:root{
	--color:#5f2a62;
	--icon:#abff89;
  --aikct-box-color:#f0f4f9;
}
:root{
  --aikctbgr: #ffffffe8;
  --aikctbor: #777;
  --aikcttit: #333;
  --aikctlin: #333;
  --aikctsec: #9b9b9b2e;
  
  --aikctnutbgr: #ffffffe8;
  --aikctnutbor: #ccc;
  --aikctnutico: #333;
  
  --aikctradius: 7px;
  --aikctnutradius: 7px;
  
  --aikctlight: #ff4444;
}

.aikct_input{
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  min-width: 0;
  background-color: var(--aikct-box-color);
  border-radius: 10;
  padding: 4px 8px;
  box-shadow: inset 0 0 0 1px transparent;
}

.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.textarea-container {
  margin-bottom: 20px;
  position: relative;
  width:100%;
}
.textarea-container textarea{width:100%;}
.textarea-wrapper {
  position: relative;
}



.button-container {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}



/* Colors for each button */
.blue-btn {
  background-color: #007bff;
}

.green-btn {
  background-color: #28a745;
}

.red-btn {
  background-color: #dc3545;
}

/* Hover effects */
button:hover {
  opacity: 0.8;
}

button i {
  margin-right: 5px;
}

#loader {
    position: absolute; /* Đặt vị trí của loader so với phần tử chứa */
    top: 50%; /* Căn giữa theo chiều dọc */
    left: 50%; /* Căn giữa theo chiều ngang */
    transform: translate(-50%, -50%); /* Điều chỉnh để chính giữa chính xác */
    display: flex; /* Sử dụng Flexbox để căn giữa các phần tử con */
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    margin-top: 10px;
    z-index:99999999;
}

.kctai{
	max-width:1000px;
	line-height:1.2;
}
.kctai button{
	background:none;
	border:none;
	width:100%;
}
.kctai .ft-updated {
    margin-bottom: 20px;
    background: #5f2a620f;
    padding: 10px;
    border-radius: 7px;
    border: 1px solid #5f2a627d;
    color: var(--color);
}
.kctai .kctai-box{
	margin-top:20px;
}
.kctai .ft-menu{
	background:var(--color);
	padding:10px 20px;
	border-radius: 10px 10px 0px 0px;
}
.kctai .ft-menu img{
	width:100%;
	max-width:300px;
}
.kctai .ft-menu button{
	color:var(--icon);
	font-size:10px;
	padding:10px 0px;
	border-radius:7px;
}
.kctai .ft-menu button:hover{
	color:#fff;
}
.kctai .ft-menu button i{
	font-size:30px;
	display:block;
	margin-bottom:7px;
}
.kctai .ft-menu .sotab.sotab-select {
  background: #fff;
  color: var(--color);
  opacity: 1; 
  transition: background 0.5s ease; 
}
.kctai .ft-menu .sotab.sotab-select:hover {
  background: rgba(255, 255, 255, 0.7); 
}

.kctai .ft-main{
	background:#fff;
	border-radius: 0px 0px 10px 10px;
	padding: 20px 20px 80px 20px;
	font-size:16px;
	position: relative;
}
.kctai .ft-main h2 {
    margin-top: 0px;
    color: var(--color);
    font-weight: bold;
    font-size:25px;
}
.kctai .ft-main .ft-input-big {
    padding: 3px 7px;
    width: 100%;
    border: 2px solid var(--color);
    border-radius: 7px;
    margin-right: 7px;
}
.kctai .ft-main .ft-input-small {
    padding: 3px 7px;
    width: 70px;
    border: 2px solid var(--color);
    border-radius: 7px;
    margin-right: 7px;
}
.kctai .ft-right-text{
	font-size: 16px;
	margin-left:7px;
}
.kctai .ft-submit button {
    background: linear-gradient(180deg, #2f855a 0%, #28724d 100%);
    padding: 12px 18px;
    border-radius: 10px;
    color: #fff;
    border: 1px solid #236640;
    border-bottom: 3px solid #1d5536;
    position: absolute;
    font-weight: bold;
    right: 20px;
    left: 20px;
    width: auto;
    bottom: 20px;
    box-shadow: 0 8px 18px rgba(47, 133, 90, .18);
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.kctai .ft-main select {
    width: 150px;
    border: 2px solid var(--color);
	border-radius: 7px;
}

.aikct-provider-settings {
  background: #fff;
  border: 1px solid #dfe3e8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.aikct-provider-settings button {
  width: auto;
  opacity: 1;
}

.aikct-provider-settings .help-text {
  margin: 4px 0 0;
  color: #667085;
}

.aikct-provider-topbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(240px, 340px) minmax(220px, 280px);
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.aikct-provider-topbar h3 {
  margin: 0;
  color: #2f855a;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
}

.aikct-provider-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.aikct-provider-title-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #2f855a;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0;
}

.aikct-provider-search-wrap input {
  width: 100%;
  min-height: 42px;
  border-color: #d0d5dd;
  border-radius: 10px;
  background: #fff;
}

.aikct-provider-mode,
.aikct-provider-category-tabs,
.aikct-provider-tabs,
.aikct-sub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aikct-provider-mode {
  justify-content: flex-end;
  padding: 4px;
  border: 1px solid #d8dee7;
  border-radius: 12px;
  background: #f4f7fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.aikct-provider-mode label,
.aikct-category-tab,
.aikct-provider-tab,
.aikct-sub-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #344054;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.aikct-provider-mode label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  box-sizing: border-box;
}

.aikct-provider-mode input[type="radio"] {
  display: none !important;
}

.aikct-provider-mode label::before {
  content: none;
}

.aikct-rotation-options input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.aikct-provider-mode label.is-active,
.aikct-category-tab.is-active,
.aikct-provider-tab.is-active,
.aikct-sub-tabs button.is-active {
  border-color: #2f855a;
  background: #fff;
  color: #2f855a;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.aikct-provider-mode label.is-active {
  background: #2f855a;
  border-color: #2f855a;
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.aikct-provider-mode label:hover,
.aikct-category-tab:hover,
.aikct-sub-tabs button:hover {
  background: #fff;
  border-color: #b8c3d2;
  color: #1f2937;
  opacity: 1;
}

.aikct-provider-mode label:focus-within,
.aikct-category-tab:focus-visible,
.aikct-provider-tab:focus-visible,
.aikct-sub-tabs button:focus-visible,
.aikct-provider-use:focus-visible,
.aikct-add-key:focus-visible,
.aikct-import-keys:focus-visible,
.aikct-test-keys:focus-visible,
.aikct-remove-key:focus-visible,
.aikct-key-toolbar button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47, 133, 90, .2);
}

.aikct-provider-category-tabs {
  padding: 4px;
  border: 1px solid #d8dee7;
  border-radius: 10px;
  background: #eef3f8;
  gap: 4px;
}

.aikct-provider-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
  padding: 14px;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #f8faf9;
  max-width: 100%;
  overflow: visible;
}

.aikct-provider-tab {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 12px;
  border-color: #d9dee5;
  border-radius: 9px;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .03);
}

.aikct-provider-tab-icon,
.aikct-provider-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.aikct-provider-tab-icon {
  width: 42px;
  height: 42px;
  font-size: 12px;
  grid-row: span 2;
}

.aikct-provider-tab-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.aikct-provider-tab-copy > span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.aikct-provider-tab small {
  color: inherit;
  opacity: .68;
  font-size: 11px;
}

.aikct-provider-tab.is-active {
  background: #2f855a;
  border-color: #2f855a;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(47, 133, 90, .18), 0 1px 2px rgba(16, 24, 40, .08);
}

.aikct-provider-tab:hover {
  border-color: #65a78a;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
  opacity: 1;
  transform: translateY(-1px);
}

.aikct-provider-tab.is-active:hover {
  color: #fff;
  box-shadow: 0 0 0 3px rgba(47, 133, 90, .2), 0 8px 18px rgba(47, 133, 90, .2);
}

.aikct-provider-tab.is-current:not(.is-active) {
  border-color: #65a78a;
  background: #f1f8f4;
  color: #2f855a;
}

.aikct-provider-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  grid-column: 2;
  min-width: 0;
  height: 23px;
  padding: 0 9px;
  border: 1px solid #b9e2c8;
  border-radius: 999px;
  background: #e8f7ed;
  color: #2f855a;
  font-size: 12px;
  font-weight: 800;
}

.aikct-provider-count-badge.is-missing-key,
.aikct-provider-count-badge.is-empty {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.aikct-provider-count-badge.is-off {
  border-color: #e5e7eb;
  background: #f3f4f6;
  color: #6b7280;
}

.aikct-provider-tab.is-active .aikct-provider-count-badge {
  border-color: rgba(255, 255, 255, .55);
  background: #fff;
  color: #2f855a;
}

.aikct-provider-tab.is-active .aikct-provider-count-badge.is-missing-key,
.aikct-provider-tab.is-active .aikct-provider-count-badge.is-empty {
  color: #c2410c;
}

.aikct-provider-dashboard,
.aikct-provider-category-panel,
.aikct-provider-panel,
.aikct-sub-panel {
  display: none;
}

.aikct-provider-dashboard.is-active,
.aikct-provider-category-panel.is-active,
.aikct-provider-panel.is-active,
.aikct-sub-panel.is-active {
  display: block;
}

.aikct-provider-dashboard {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.aikct-provider-dashboard.is-active {
  display: grid;
}

.aikct-provider-stat,
.aikct-provider-summary,
.aikct-sub-panel {
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #fff;
}

.aikct-provider-stat {
  padding: 16px;
}

.aikct-provider-stat strong {
  display: block;
  color: #111827;
  font-size: 23px;
  line-height: 1.2;
}

.aikct-provider-stat span,
.aikct-provider-summary span {
  color: #667085;
}

.aikct-provider-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.aikct-provider-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.aikct-provider-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 15px;
}

.aikct-provider-summary h4 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: 0;
}

.aikct-provider-summary strong {
  display: block;
  font-size: 18px;
}

.aikct-provider-use,
.aikct-add-key,
.aikct-import-keys,
.aikct-test-keys,
.aikct-remove-key,
.aikct-key-toolbar button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #2f855a;
  border-radius: 8px;
  background: #fff;
  color: #2f855a;
  cursor: pointer;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.aikct-add-key,
.aikct-provider-use {
  border-color: #28724d;
  background: linear-gradient(180deg, #329060 0%, #28724d 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.aikct-provider-use {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.aikct-provider-use:hover,
.aikct-add-key:hover,
.aikct-import-keys:hover,
.aikct-test-keys:hover,
.aikct-key-toolbar button:hover {
  border-color: #1f6b46;
  background: #f2fbf6;
  color: #1f6b46;
  opacity: 1;
  transform: translateY(-1px);
}

.aikct-provider-use:hover,
.aikct-add-key:hover {
  background: linear-gradient(180deg, #287f55 0%, #206a45 100%);
  color: #fff;
}

.aikct-sub-tabs {
  margin: 12px 0 0;
  padding: 4px 4px 0;
  border: 1px solid #d8dee7;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #f1f5f9;
  gap: 4px;
}

.aikct-sub-panel {
  padding: 14px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.aikct-rotation-banner {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 14px;
  padding: 13px 14px;
  border-left: 4px solid #2f855a;
  border-radius: 8px;
  background: #eaf5ff;
  color: #1f2937;
}

.aikct-rotation-banner strong {
  color: #2f6fb2;
}

.aikct-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.aikct-field-grid label span,
.aikct-key-row span {
  display: block;
  margin-bottom: 4px;
  color: #50575e;
  font-size: 12px;
  font-weight: 600;
}

.aikct-field-grid input,
.aikct-field-grid select,
.aikct-key-row input,
.aikct-key-row select {
  width: 100%;
  min-height: 34px;
  border-color: #d0d5dd;
  border-radius: 7px;
}

.aikct-custom-openai-card {
  padding: 16px;
  border: 1px solid #d8dee8;
  border-radius: 14px;
  background: linear-gradient(180deg, #101827 0%, #162236 100%);
  color: #e5edf8;
}

.aikct-custom-openai-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.aikct-custom-openai-head strong {
  font-size: 17px;
  line-height: 1.25;
  color: #f8fafc;
}

.aikct-custom-openai-head span {
  color: #a7b4c8;
  font-size: 13px;
}

.aikct-custom-openai-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 12px;
}

.aikct-custom-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.aikct-custom-field-wide {
  grid-column: span 2;
}

.aikct-custom-field span {
  color: #a7b4c8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.aikct-custom-field input,
.aikct-custom-field select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid #344256;
  border-radius: 12px;
  background: #111a2a;
  color: #f8fafc;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.aikct-custom-field input::placeholder {
  color: #7d8aa0;
}

.aikct-custom-field input:focus,
.aikct-custom-field select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px #60a5fa;
  outline: 0;
}

.aikct-custom-openai-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #2d3a4f;
}

.aikct-custom-openai-actions span {
  color: #9fb0c6;
  font-size: 12px;
  line-height: 1.4;
}

.aikct-apply-custom-openai {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #60a5fa;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.aikct-apply-custom-openai:hover,
.aikct-apply-custom-openai:focus {
  background: #1d4ed8;
  color: #fff;
  opacity: 1;
}

.aikct-switch-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #344054;
}

.aikct-switch-line input[type="checkbox"] {
  position: relative;
  width: 38px;
  height: 21px;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #e5e7eb;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.aikct-switch-line input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .22);
  transition: transform .15s ease;
}

.aikct-switch-line input[type="checkbox"]:checked {
  border-color: #2f855a;
  background: #2f855a;
}

.aikct-switch-line input[type="checkbox"]:checked::before {
  transform: translateX(17px);
}

.aikct-switch-line input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(47, 133, 90, .2);
}

.aikct-key-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.aikct-key-list {
  display: grid;
  gap: 8px;
}

.aikct-key-row {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(220px, 1.5fr) minmax(100px, .7fr) 90px 90px auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e4e7ec;
  border-radius: 9px;
  background: #f9fafb;
}

.aikct-rotation-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  border-radius: 9px;
  background: #f9fafb;
}

.aikct-rotation-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d8dee7;
  border-radius: 999px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  font-weight: 700;
}

.aikct-rotation-options label:has(input[type="radio"]:checked) {
  border-color: #65a78a;
  background: #eaf7ef;
  color: #1f7a4d;
  box-shadow: 0 0 0 1px rgba(47, 133, 90, .08);
}

.aikct-rotation-options label::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 2px solid #98a2b3;
  border-radius: 50%;
  background: #fff;
}

.aikct-rotation-options label:has(input[type="radio"]:checked)::before {
  border-color: #2f855a;
  background: #2f855a;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(47, 133, 90, .16);
}

@media (max-width: 1200px) {
  .aikct-provider-topbar,
  .aikct-provider-summary,
  .aikct-field-grid,
  .aikct-key-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1500px) {
  .aikct-provider-tabs {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

@media (max-width: 760px) {
  .aikct-provider-topbar,
  .aikct-provider-summary,
  .aikct-field-grid,
  .aikct-key-row,
  .aikct-provider-dashboard.is-active {
    grid-template-columns: 1fr;
  }

  .aikct-provider-mode {
    justify-content: flex-start;
  }
}
.kctai .ft-submit button:hover{
	opacity:1;
    background: linear-gradient(180deg, #287f55 0%, #206a45 100%);
    box-shadow: 0 10px 22px rgba(47, 133, 90, .24);
    transform: translateY(-1px);
}
.kctai .ft-submit button i{
	margin-right:7px;
}
.kctai .ft-main a{
	text-decoration: none;
	color:var(--color);
	cursor: pointer;
}
.kctai .ft-main .ft-selec{
    width: 90px;
    background: var(--color);
    color: #fff;
    border-radius: 7px;
    border-bottom:var(--nutbor2);
}
.kctai .save-json a {
    background: #6d6d6d;
    padding: 7px 10px;
    margin-bottom: 5px;
    display: inline-block;
    color: #fff;
    border-radius: 7px;
    font-size: 12px;
    border-bottom: 4px solid #222;
}
.kctai .save-json a:hover{
	opacity:0.7;
}
.kctai .save-json a i{
	margin-right:7px;
}
.kctai #tb-json span, .kctai #loadbarprocess span{
    background: #5f2a6226;
    padding: 10px;
    display: block;
    border-radius: 7px;
    color: var(--color);
    margin-bottom: 10px;
    margin-top: 10px;
}
.kctai .ft-card-note {
    background: #dddddd21;
	border: 1px solid #ccc;
    padding: 10px;
    border-radius: 7px;
}
.kctai .ft-card-note p {
    font-size: 16px;
    margin: 0px;
}
.kctai .ft-card-note p:not(:last-child){
	border-bottom:1px solid #ccc;
	padding-bottom:10px;
}
.kctai .ft-card-note p:not(:first-child){
	padding-top:10px;
}
/* css nút check cho đẹp măt */
.kctai .nut-switch input[type="checkbox"],
.kctai .nut-switch .slider {
  vertical-align: middle;
  margin-right: 5px;
}
.kctai .nut-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.kctai .slider {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  background-color: #ddd;
  border-radius: 25px;
  transition: background-color 0.3s;
}
.kctai .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}
.kctai input:checked + .slider {
  background-color:var(--color);
}
.kctai input:checked + .slider:before {
  transform: translateX(24px);
}
.kctai .ft-label-right {
    font-size: 16px;
    margin-bottom: 20px;
}
.kctai .ft-note {
    background: #95fffb52;
    padding: 23px 10px 10px 10px;
    border-radius: 7px;
    font-size: 14px;
    position: relative;
    margin-top: 20px;
}
.kctai .ft-note i {
    color: var(--color);
    margin-right: 7px;
    background: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    top: -10px;
    border: 4px solid #95fffb52;
}
.kctai .ft-note.ft-note-red {
    background: #fe8f7752;
}
.kctai .ft-note.ft-note-red i{
	border: 4px solid #fe8f7752;
	color: #ff4444;
}
.kctai .tb-doi{
    background: #e6e6e6;
    : 1px ;
    display: block;
    margin-top: 10px;
    padding: 10px;
    border-radius: 7px;
}
.kctai .tb-doi{
	display:flex;
	align-items: center;
}
.kctai .tb-doi img{
	width:30px;
	margin-right:10px;
}


.🤚 {
  --skin-color: #E4C560;
  --tap-speed: 0.6s;
  --tap-stagger: 0.1s;
  position: relative;
  width: 80px;
  height: 60px;
  margin-left: 80px;
}

.🤚:before {
  content: '';
  display: block;
  width: 180%;
  height: 75%;
  position: absolute;
  top: 70%;
  right: 20%;
  background-color: black;
  border-radius: 40px 10px;
  filter: blur(10px);
  opacity: 0.3;
}

.🌴 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--skin-color);
  border-radius: 10px 40px;
}

.👍 {
  position: absolute;
  width: 120%;
  height: 38px;
  background-color: var(--skin-color);
  bottom: -18%;
  right: 1%;
  transform-origin: calc(100% - 20px) 20px;
  transform: rotate(-20deg);
  border-radius: 30px 20px 20px 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.👍:after {
  width: 20%;
  height: 60%;
  content: '';
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: -8%;
  left: 5px;
  border-radius: 60% 10% 10% 30%;
  border-right: 2px solid rgba(0, 0, 0, 0.05);
}

.👉 {
  position: absolute;
  width: 80%;
  height: 35px;
  background-color: var(--skin-color);
  bottom: 32%;
  right: 64%;
  transform-origin: 100% 20px;
  animation-duration: calc(var(--tap-speed) * 2);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform: rotate(10deg);
}

.👉:before {
  content: '';
  position: absolute;
  width: 140%;
  height: 30px;
  background-color: var(--skin-color);
  bottom: 8%;
  right: 65%;
  transform-origin: calc(100% - 20px) 20px;
  transform: rotate(-60deg);
  border-radius: 20px;
}

.👉:nth-child(1) {
  animation-delay: 0;
  filter: brightness(70%);
  animation-name: tap-upper-1;
}

.👉:nth-child(2) {
  animation-delay: var(--tap-stagger);
  filter: brightness(80%);
  animation-name: tap-upper-2;
}

.👉:nth-child(3) {
  animation-delay: calc(var(--tap-stagger) * 2);
  filter: brightness(90%);
  animation-name: tap-upper-3;
}

.👉:nth-child(4) {
  animation-delay: calc(var(--tap-stagger) * 3);
  filter: brightness(100%);
  animation-name: tap-upper-4;
}

.🤚.show {
    display: block !important; /* Hiển thị khi lớp 'show' được thêm vào */
}

.🤚.hidden {
    display: none !important; /* Ẩn khi lớp 'hidden' được thêm vào */
}

@keyframes tap-upper-1 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.4);
  }

  40% {
    transform: rotate(50deg) scale(0.4);
  }
}

@keyframes tap-upper-2 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.6);
  }

  40% {
    transform: rotate(50deg) scale(0.6);
  }
}

@keyframes tap-upper-3 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.8);
  }

  40% {
    transform: rotate(50deg) scale(0.8);
  }
}

@keyframes tap-upper-4 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(1);
  }

  40% {
    transform: rotate(50deg) scale(1);
  }
}


/* From Uiverse.io by dylanharriscameron */ 
.card {
  position: relative;
  width: 100%;
  min-height: 250px;
  border-radius: 14px;
  z-index: 1111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
  ;
}

.bg {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 100%;
  min-height: 250px;
  z-index: 2;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(24px);
  border-radius: 10px;
  overflow: hidden;
  outline: 2px solid white;
}

.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #ff0000;
  opacity: 1;
  filter: blur(12px);
  animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
  0% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }

  25% {
    transform: translate(-100%, -100%) translate3d(100%, 0, 0);
  }

  50% {
    transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
  }

  75% {
    transform: translate(-100%, -100%) translate3d(0, 100%, 0);
  }

  100% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }
}




.ai-assistant {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 10px #00000040;
    width: 100% ;
    padding: 15px;
    z-index: 999999;
	box-sizing: border-box;
	bottom: 20px !important;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.close-btn, .down-up-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
}
#kctai .content{
    
  overflow: auto;
  
  border-radius: 5px;
  max-height: min(100px,calc(100vh - 110px));
  margin-bottom: 4px;
  color:#233477;

}
#kctai .content h3 {
    margin: 15px 0 5px;
    font-size: 18px;
    color: #1E2A78;
}

#kctai .content p, .content h4 {
    font-size: 14px;
    
  color:#233477;
}

#kctai .controls {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

#kctai .controls button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #006ce7;
    color: white;
}

#kctai #insert-btn[disabled] {
    background-color: grey;
    cursor: not-allowed;
}

#kctai .input-area {
    display: flex;
    margin-top: 15px;
}

#kctai .input-area input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#kctai .input-area button {
    background-color: #f0f0f0;
    border: none;
    padding: 8px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    margin-left: 10px;
}


#kctai{
    height: auto;
    max-height: calc(100vh - 70px);
    overflow: auto;
    transition: height 0.5s ease-in-out;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    padding: 18px;
}

#kctai .header {
    position: sticky;
    top: -18px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -18px -18px 16px;
    padding: 18px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #eef2f7;
    backdrop-filter: blur(8px);
}

#kctai .header h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #1f2937;
    font-size: 18px;
    letter-spacing: 0;
}

#kctai .header h2 svg {
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 7px;
    background: #111827;
    fill: #fff;
}

#kctai .close-btn {
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 20px;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    line-height: 1;
}

#kctai .close-btn:hover {
    background: #f3f4f6;
}

.aikct-runtime-settings {
    margin: 0 0 14px;
    border: 1px solid #dfe3e8;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.aikct-runtime-settings-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 0;
    background: #f8faf9;
    color: #1f2937;
    text-align: left;
    cursor: pointer;
}

.aikct-runtime-settings-toggle span {
    font-size: 14px;
    font-weight: 900;
}

.aikct-runtime-settings-toggle small {
    min-width: 0;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aikct-runtime-settings-toggle::after {
    content: "▾";
    grid-column: 3;
    color: #667085;
    font-size: 14px;
}

.aikct-runtime-settings-toggle[aria-expanded="true"]::after {
    content: "▴";
}

.aikct-runtime-settings-panel {
    padding: 12px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.aikct-runtime-settings-panel[hidden] {
    display: none;
}

.aikct-chat-provider-bar {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) minmax(210px, 1.35fr) minmax(220px, 1.1fr);
    gap: 10px;
    align-items: end;
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    background: #f8faf9;
}

.aikct-chat-mode {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
}

.aikct-chat-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    color: #344054;
    cursor: pointer;
    font-weight: 700;
}

.aikct-chat-mode label.is-active {
    background: #2f855a;
    color: #fff;
}

.aikct-chat-mode input {
    margin: 0;
}

.aikct-chat-provider-field {
    display: grid;
    gap: 5px;
    margin: 0;
}

.aikct-chat-provider-field span {
    color: #475467;
    font-size: 12px;
    font-weight: 800;
}

.aikct-chat-provider-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    color: #111827;
}

.aikct-chat-provider-field select:disabled {
    background: #eef2f6;
    color: #667085;
}

.aikct-chat-provider-note {
    align-self: center;
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f3f4f6;
}

.aikct-chat-provider-note.is-ready {
    background: #ecfdf3;
    color: #027a48;
}

.aikct-chat-provider-note.is-missing-key {
    background: #fff7ed;
    color: #c2410c;
}

.aikct-chat-provider-note.is-off {
    background: #f3f4f6;
    color: #6b7280;
}

.aikct-agent-bar {
    display: grid;
    grid-template-columns: auto minmax(170px, 240px) minmax(240px, 1fr);
    gap: 10px;
    align-items: end;
    margin: 0;
    padding: 12px;
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    background: #fffaf0;
}

.aikct-agent-mode {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #f6d28b;
    border-radius: 10px;
    background: #fff;
}

.aikct-agent-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    color: #7c4a03;
    cursor: pointer;
    font-weight: 800;
}

.aikct-agent-mode label.is-active {
    background: #b7791f;
    color: #fff;
}

.aikct-agent-field {
    display: grid;
    gap: 5px;
    margin: 0;
}

.aikct-agent-field span {
    color: #7c4a03;
    font-size: 12px;
    font-weight: 800;
}

.aikct-agent-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #f6d28b;
    border-radius: 10px;
    background: #fff;
    color: #111827;
}

.aikct-agent-field select:disabled {
    background: #f3f4f6;
    color: #9ca3af;
}

.aikct-agent-note {
    align-self: center;
    padding: 9px 10px;
    border-radius: 10px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px;
    line-height: 1.35;
}

.aikct-agent-plan {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid #f6d28b;
    border-radius: 12px;
    background: #fffbeb;
    color: #4a3000;
}

.aikct-agent-plan strong {
    display: block;
    margin-bottom: 6px;
    color: #92400e;
}

.aikct-agent-plan p {
    margin: 0 0 8px;
}

.aikct-agent-plan ol {
    margin: 0 0 0 18px;
    padding: 0;
}

.aikct-agent-plan li {
    margin: 2px 0;
}

.prompt-toggle-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.prompt-toggle-container button {
    min-height: 44px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 8px 12px;
    border-radius: 10px;
    color: #374151;
    cursor: pointer;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.prompt-toggle-container button:not(:first-child) {
	margin-left: 0;
}

.prompt-toggle-container button:hover {
    border-color: #2f855a;
    background: #f0fdf4;
    color: #2f855a;
}
/* From Uiverse.io by MuhammadHasann */ 
.ask_ai_btn {
    display: inline-block;
    align-items: center;
    justify-content: center;
    background-color: #0073aa; /* Màu nền của nút */
    color: #fff; /* Màu văn bản */
    border: none;
    border-radius: 4px; /* Bo tròn góc */
    
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s; /* Hiệu ứng chuyển tiếp */
    outline: none;
    margin-bottom:5;
}

.ask_ai_btn svg {
    margin-right: 8px; /* Khoảng cách giữa biểu tượng SVG và văn bản */
}

.text_button {
    line-height: 24px; /* Đảm bảo văn bản căn giữa với biểu tượng */
}

.ask_ai_btn:hover {
    background-color: #005a87; /* Màu nền khi di chuột qua nút */
    transform: scale(1.05); /* Tăng kích thước nút khi di chuột qua */
}

.ask_ai_btn:focus {
    outline: 2px solid #005a87; /* Viền khi nút được chọn */
    outline-offset: 2px;
}


#my_prompt_result {
    padding: 0;
    border: none;
    transition: padding 0.3s, border 0.3s; 

}

#my_prompt_result img{max-width:70%;}

#my_prompt_result.has-content {
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    min-height: 180px;
    max-height: clamp(220px, calc(100vh - 460px), 420px);
    background: #fff;
    overflow: auto;
}

#kctai .aikct_box {
    padding: 14px;
    border: 1px dashed #9ca3af;
    border-radius: 12px;
    background: #fff;
}

#kctai .modelai {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px !important;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8 !important;
    font-weight: 700;
}

#kctai .input-area {
    margin-top: 16px;
}

#kctai .textarea-container label {
    display: block;
    margin-bottom: 7px;
    color: #374151;
    font-weight: 700;
}

#kctai .textarea-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 10px;
    align-items: stretch;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #f8fafc;
}

#kctai #ask_ai {
    width: 100%;
    min-height: 60px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #111827;
    font-size: 15px;
    resize: vertical;
}

#kctai #ask_ai:focus {
    outline: none;
}

#kctai .button-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

#kctai #send-btn {
    width: 52px;
    height: 52px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: #2f855a;
    color: #fff;
    box-shadow: 0 6px 16px rgba(47, 133, 90, .24);
}

#kctai #send-btn svg {
    fill: currentColor;
}

@media (max-width: 980px) {
    .aikct-chat-provider-bar,
    .aikct-agent-bar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .aikct-chat-provider-bar,
    .aikct-agent-bar,
    #kctai .textarea-wrapper {
        grid-template-columns: 1fr;
    }
}

.aikct_box_container {
            width: 100%;
            max-width: 1000px;
            line-height: 1.2;
            /*margin: 50px auto;*/
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
       .aikct_box_header {
            background-color: #0066cc; /* Màu xanh */
            color: white;
            padding: 20px;
            text-align: center;
        }
        .aikct_box_header h2 {
            margin: 0;
            color:#fff;
        }
        .aikct_box_tab {
            display: flex;
            border-bottom: 1px solid #ccc;
        }
        .aikct_box_tab button {
            flex: 1;
            padding: 15px;
            cursor: pointer;
            background-color: #f1f1f1;
            border: none;
            border-right: 1px solid #ccc;
            outline: none;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .aikct_box_tab button:last-child {
            border-right: none;
        }
        .aikct_box_tab button.active {
            background-color: #0066cc; /* Màu xanh */
            color: white;
        }
        .aikct_box_tabcontent {
            display: none;
            padding: 20px;
        }
        .aikct_box_tabcontent.active {
            display: block;
        }
        .aikct_box_tabcontent .help-text {
            background-color: #e0f7fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            color: #0066cc; /* Màu xanh */
        }
        .aikct_box_content label {
            display: block;
            font-weight: bold;
            margin-bottom: 10px;
            color: #0066cc; /* Màu xanh */
        }
        .aikct_box_content input[type="text"], 
        .aikct_box_content input[type="number"], 
        .aikct_box_content textarea, 
        .aikct_box_content select {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px;
            border: 2px solid #0066cc; /* Màu xanh */
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }
        .aikct_box_content textarea {
            resize: vertical;
            height: 80px;
        }
        .aikct_box_help_text {
            background-color: #e0f7fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            color: #0066cc; /* Màu xanh */
        }
        .aikct_box_buttons {
            display: flex;
            justify-content: space-between;
        }
        .aikct_box_buttons button, 
        .aikct_box_content input[type="submit"] {
            padding: 10px 15px;
            border: none;
            background-color: #0066cc; /* Màu xanh */
            color: white;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .aikct_box_buttons button:hover, 
        .aikct_box_content input[type="submit"]:hover {
            background-color: #004da3;
        }
        .aikct_box_save-btn {
            display: block;
            width: 100%;
            text-align: center;
            padding: 15px;
            background-color: #0066cc; /* Màu xanh */
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
        }
        .aikct_box_save-btn:hover {
            background-color: #004da3;
        }
        /* Toggle switch styles */
        .aikct_box_toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 25px;
            margin-right: 10px;
        }
        .aikct_box_toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .aikct_box_slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .aikct_box_slider:before {
            position: absolute;
            content: "";
            height: 19px;
            width: 19px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .aikct_box_slider {
            background-color: #0066cc;
        }
        input:checked + .aikct_box_slider:before {
            transform: translateX(24px);
        }

.aikct_box_button_wrapper {
    text-align: center;
    margin: 20px 0;
}

.aikct_box_button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.aikct_box_button:hover {
    background-color: #005177;
}

.aikct_box_loading {
    
    
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-top: 10px;

}

.aikct_box_success_message {
    text-align: center;
    font-size: 16px;
    color: #28a745;
    margin-top: 20px;
}

.icon-text {
    display: flex;
    align-items: center;
    font-size: 16px; 
}

.icon-text svg {
    margin-right: 8px; 
}
a.button.button-primary {
    vertical-align: middle;
    margin-left: 10px;
    text-align: center;
    padding: 7px 20px;
    border-radius: 7px;
}

.ai-assistant h2.icon-text{
	padding:0px !important;
    margin: 0 !important;
    margin-bottom: 10px !important;
}

.aikct_nav {
    width: 100%;
    overflow-x: auto; 
    white-space: nowrap; 
    border-radius: 5px;
    box-sizing: border-box;
}

.aikct_nav button {
    display: inline-block; 
    margin: 0px;
	margin-bottom: 5px;
	margin-top:5px;
    white-space: nowrap; 
}


.mce-i-aikct_mce-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' focusable='false'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H5Zm6.8 11.5.5 1.2a68.3 68.3 0 0 0 .7 1.1l.4.1c.3 0 .5 0 .7-.3.2-.1.3-.3.3-.6l-.3-1-2.6-6.2a20.4 20.4 0 0 0-.5-1.3l-.5-.4-.7-.2c-.2 0-.5 0-.6.2-.2 0-.4.2-.5.4l-.3.6-.3.7L5.7 15l-.2.6-.1.4c0 .3 0 .5.3.7l.6.2c.3 0 .5 0 .7-.2l.4-1 .5-1.2h3.9ZM9.8 9l1.5 4h-3l1.5-4Zm5.6-.9v7.6c0 .4 0 .7.2 1l.7.2c.3 0 .6 0 .8-.3l.2-.9V8.1c0-.4 0-.7-.2-.9a1 1 0 0 0-.8-.3c-.2 0-.5.1-.7.3l-.2 1Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
}
.mce-i-aikct_mce-icon_shortcode {
    width: 24px;
    height: 24px;
    display: inline-block;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' focusable='false'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H5Zm6.8 11.5.5 1.2a68.3 68.3 0 0 0 .7 1.1l.4.1c.3 0 .5 0 .7-.3.2-.1.3-.3.3-.6l-.3-1-2.6-6.2a20.4 20.4 0 0 0-.5-1.3l-.5-.4-.7-.2c-.2 0-.5 0-.6.2-.2 0-.4.2-.5.4l-.3.6-.3.7L5.7 15l-.2.6-.1.4c0 .3 0 .5.3.7l.6.2c.3 0 .5 0 .7-.2l.4-1 .5-1.2h3.9ZM9.8 9l1.5 4h-3l1.5-4Zm5.6-.9v7.6c0 .4 0 .7.2 1l.7.2c.3 0 .6 0 .8-.3l.2-.9V8.1c0-.4 0-.7-.2-.9a1 1 0 0 0-.8-.3c-.2 0-.5.1-.7.3l-.2 1Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
}


#ask-kctai-button{
cursor: pointer;
background: var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));
border-radius: 5px;
border: none;
color: #fff;
}


.kct-tabs {
  margin-top: 10px;
}

.kct-tablinks {
  background-color: #f1f1f1;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 20px;
  transition: 0.3s;
  font-size: 16px;
}

.kct-tablinks:hover {
  background-color: #ddd;
}

.kct-tabcontent {
  display: none;
  padding: 20px;
  border-top: none;
  border: 1px #ccc solid;
  border-radius: 5px;
}

.kct-tabcontent h3 {
  margin-top: 0;
}



 #aikct-prompt-params-wrap {
        margin-bottom: 20px;
    }

    .aikct-prompt-param {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 10px;
        background-color: #f9f9f9;
        border: 1px solid #e1e1e1;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .aikct-prompt-param:hover {
        background-color: #f1f1f1;
    }

    .aikct-prompt-param label {
        flex: 1;
        font-weight: bold;
        margin-right: 10px;
        font-size: 14px;
        color: #333;
    }

    .aikct-prompt-param input[type="text"] {
        flex: 2;
        padding: 5px 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 10px;
        transition: border-color 0.3s ease;
    }

    .aikct-prompt-param input[type="text"]:focus {
        border-color: #0073aa;
    }

    .aikct-prompt-param select {
        flex: 1;
        padding: 5px 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 10px;
        transition: border-color 0.3s ease;
    }

    .aikct-prompt-param select:focus {
        border-color: #0073aa;
    }

    .aikct-prompt-param button.aikct-remove-param {
        padding: 6px 12px;
        font-size: 12px;
        color: #fff;
        background-color: #d9534f;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .aikct-prompt-param button.aikct-remove-param:hover {
        background-color: #c9302c;
    }

    #aikct-add-param.button {
        padding: 8px 15px;
        font-size: 14px;
        background-color: #0073aa;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #aikct-add-param.button:hover {
        background-color: #006799;
    }


    input[name="audience"],
        input[name="tone"],
        input[name="style"],
        input[name="output-language"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            background-color: #f9fafb;
            font-size: 14px;
            color: #333333;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .tagify {
            border-radius: 6px !important;
            background-color: #f9fafb !important;
            border: 1px solid #e2e8f0 !important;
            padding: 4px 10px !important;
        }

        .tagify__input {
            color: #333333 !important;
        }

        .tagify__tag {
            background-color: #e2e8f0 !important;
            color: #333333 !important;
            border-radius: 4px !important;
        }

        .tagify__tag__removeBtn {
            color: #333333 !important;
        }
        .message {
            background-color: #e1ffc7;
            padding: 8px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: inline-block;
            max-width: 100%;
            word-wrap: break-word;
        }

.prompt-toggle-container {
    text-align: left;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
}


.prompt-toggle-container::-webkit-scrollbar {
    height: 6px;
}

.prompt-toggle-container::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}

.prompt-toggle-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}


.prompt-toggle-btn, .prompt-toggle-container button  {
    background-color: #838383;
	color: white;
	padding: 3px 10px;
	height: 40px;
	font-size: 16px;
    border: 1px dashed var(--aikctbor);
    border-radius: var(--aikctradius);
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.prompt-toggle-container button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.prompt-toggle-container button i{
	margin-right:10px;
}
.prompt-toggle-container button svg{
	margin-left:10px;
}
.prompt-toggle-btn:hover,.prompt-toggle-container button:hover {
    background-color: #333333; 
}

.aikct_nav {
    display: none; 
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.aikct-open-prompt {
    background-color: #222222; 
    color: white;
    border: none;
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 16px;
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}


#aikct-prompt-popup {
    display: none;
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
    max-width: 600px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
    z-index: 2000;
    overflow: auto;
}
/* Style cho overlay */
#aikct-overlay {
    display: none; /* Ẩn overlay theo mặc định */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Style cho tiêu đề popup */
#aikct-prompt-popup h2 {
    margin-top: 0;
    font-size: 1.5em;
    color: #333;
}

/* Style cho các tham số */
#aikct-prompt-params .aikct-prompt-param {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}

#aikct-prompt-params .aikct-prompt-param label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Style cho các trường nhập liệu */
#aikct-prompt-params input[type="text"],
#aikct-prompt-params select,
#aikct-prompt-params textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.aikct-open-prompt .icon {
    position: absolute; /* Position icon within button */
    bottom: 10px; /* Space from bottom */
    right: 10px; /* Space from right */
    font-size: 20px; /* Icon size */
    opacity: 0.7; /* Slight transparency */
    pointer-events: none; /* Icon won't interfere with button clicks */
}

#aikct-submit-prompt,
#aikct-close-popup {
    background-color: #0073aa; /* Màu nền của nút */
    color: #fff; /* Màu chữ */
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 5px;
}

#aikct-submit-prompt:hover,
#aikct-close-popup:hover {
    background-color: #005a87; 
}

#notification {
    display: none; 
    padding: 10px;
    border-radius: 5px;
    background: #f4f4f4;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    color: #333;
}

.aikct-open-prompt {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin: 5px;
    display: inline-block;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.aikct-open-prompt:hover {
    background-color: #005a87;
    transform: translateY(-2px);
}

.aikct-open-prompt:active {
    background-color: #003f5c;
    transform: translateY(1px);
}


            .aikct_nav {
    
    gap: 10px;
    flex-wrap: wrap;
}

.aikct-open-prompt {
    background-color: #222222; /* Dark background color */
    color: white; /* Text color */
    border: none; /* Remove default border */
    border-radius: 10px; /* Rounded corners */
    padding: 15px 20px; /* Padding for size */
    font-size: 16px; /* Font size */
    width: 200px; /* Fixed width */
    height: 100px; /* Fixed height */
    display: flex; 
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    position: relative; /* Relative position for icon placement */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    text-align: center;
}

.aikct-open-prompt:hover {
    background-color: #333333; /* Slightly lighter on hover */
}

.aikct-open-prompt:active {
    background-color: #111111; /* Darker when clicked */
}


.aikct-prompt-popup-container {
    display:flex;
    flex-direction: column;
    height: 100%;
}

.aikct-prompt-popup-container .aikct-prompt-popup-content {
    flex: 1;
    overflow: auto;
}

.aikct-prompt-popup-container .aikct-prompt-popup-footer {
    margin-top: auto;
    padding: 10px;
    background-color: #f1f1f1; /* Optional: Add a background color for better visibility */
    text-align: right; /* Optional: Align buttons to the right */
	border-radius:7px;
}

.tagify__dropdown {
 position:absolute;
 z-index:999999999999999 !important;
 transform:translateY(-1px);
 border-top:1px solid var(--tagify-dd-color-primary);
 overflow:hidden
}



/* From Uiverse.io by adamgiebl */ 
.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.dot {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #b3d4fc;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #b3d4fc;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #6793fb;
    box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #b3d4fc;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }
}

.message-box {
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 10px;
}


.message-box.left {
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  left: 0;
  text-align:left;
}

.message-box.right {
  background-color: #e1ffc7;
  color: black;
  font-size: 13px;
  right: 0;
  text-align:right;
}
.user_text_right{text-align:right;}
.AI_text_left{text-align:left;}

.prompt-toggle-btn svg {
  width: 20px;
  height: 20px;
}
.aikct_box{
  width: 100%;
  border: 1px dashed var(--aikctbor);
  padding: 20px;
  border-radius: var(--aikctradius);
  background: var(--aikctbgr);
  box-sizing: border-box;
  margin:10px 0;
}


.button-group {
    display: flex;
    gap: 10px; /* Khoảng cách giữa các nút */
    margin-top: 10px; /* Khoảng cách phía trên nhóm nút */
}

.button-group button {
    padding: 8px 16px;
    background-color: #006ce7; 
    color: white; 
    
    border: 1px dashed var(--aikctbor);
     border-radius: var(--aikctradius);
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease; 
}

.button-group button:hover {
    background-color: #005177; 
}

.button-group button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.5); /* Hiệu ứng khi nút được focus */
}

.message-box.left::before {
    content: "AIKCT : ";
    font-weight: bold; /* Optional: Makes the static text bold */
}
.button-group {
    display: flex !important;
    align-items: center !important; /* Optional: aligns buttons vertically in the center */
}

.button-group button {
    margin-right: 10px !important; /* Optional: adds space between buttons */
}

.button-group button:last-child {
    margin-right: 0 !important; /* Removes margin from the last button */
}

.message-box.right span::first-letter {
    text-transform: capitalize; /* Capitalizes the first letter of the dynamic content */
}


/* Style cho box tin tức */
.item-post {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    margin: 10px 0;
    background-color: #f9f9f9;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.item-post .item-thumb {
    margin-bottom: 12px;
}

.item-post .item-thumb img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover; /* Đảm bảo ảnh không bị biến dạng */
}
/* Hình ảnh thumbnail SVG */
.item-thumb {
    margin-bottom: 12px;
    text-align: center; /* Căn giữa SVG */
}

.item-thumb svg {
    width: 100px; /* Kích thước cụ thể của SVG */
    height: 100px; /* Kích thước cụ thể của SVG */
    fill: #ddd; /* Màu sắc của SVG */
    transition: fill 0.3s ease; /* Hiệu ứng chuyển màu khi hover */
}

.item-thumb svg:hover {
    fill: #007bff; /* Màu sắc của SVG khi hover */
}
.item-post h3 {
    font-size: 18px;
    margin-top: 0;
}
div:where(.swal2-container) {
 display:grid;
 position:fixed;
 z-index:999999999999999999999999;
}
.item-post p {
    font-size: 14px;
    margin: 5px 0;
}

.item-post button {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.item-post button:hover {
    background-color: #0056b3;
}

/* Hiệu ứng hover cho box tin tức */
.item-post:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}


.down-up-btn {
    margin-right: 10px; /* Adjust spacing between buttons */
}


.aikct_box .integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.aikct_box .integration-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.aikct_box .integration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aikct_box h2 {
    font-size: 18px;
    color: #333;
}

.aikct_box p {
    font-size: 14px;
    color: #666;
}

.aikct_box .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.aikct_box .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.aikct_box .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.aikct_box .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.aikct_box input:checked + .slider {
    background-color: #6c63ff;
}

.aikct_box input:checked + .slider:before {
    transform: translateX(18px);
}


.upgrade-pro-button {
    background-color: #ff9800; /* Màu cam nổi bật */
    color: #ffffff; /* Màu chữ trắng */
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.upgrade-pro-button:hover {
    background-color: #e68900; /* Màu cam đậm hơn khi hover */
    transform: scale(1.05); /* Phóng to nhẹ khi hover */
}

.upgrade-pro-button:active {
    transform: scale(1); /* Trở lại kích thước bình thường khi bấm */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Giảm bóng khi bấm */
}
.upgrade-button {
           background-color: #FFD166;
color: #2C3E50;
border: none;
border-radius: 10px;
padding: 5px 5px;
font-family: 'Arial', sans-serif;
font-weight: bold;
display: inline-flex;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .upgrade-button:hover {
            background-color: #FFCE5A; /* slightly darker on hover */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* deeper shadow on hover */
        }

        .upgrade-button svg {
            margin-right: 10px; /* space between icon and text */
            fill: #2C3E50; /* dark blue icon */
        }


/* Modern editor assistant panel */
#kctai {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid #d8e0e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
    color: #172033;
}

#kctai .header {
    margin: -20px -20px 0;
    padding: 20px;
    min-height: 72px;
    border-bottom: 1px solid #edf1f5;
}

#kctai .header h2 {
    font-size: 19px;
    font-weight: 900;
}

#kctai .header h2 svg {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

#kctai .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    font-size: 22px;
}

#kctai .aikct-runtime-settings {
    margin: 0;
    border-color: #dbe3ea;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}

#kctai .aikct-runtime-settings-toggle {
    min-height: 56px;
    padding: 13px 16px;
    background: #f8fafc;
}

#kctai .aikct-runtime-settings-toggle span {
    font-size: 15px;
    color: #172033;
}

#kctai .aikct-runtime-settings-toggle small {
    color: #667085;
    font-size: 13px;
}

#kctai .aikct-runtime-settings-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: #fbfcfe;
}

#kctai .aikct-runtime-settings-panel[hidden] {
    display: none;
}

#kctai .aikct-chat-provider-bar,
#kctai .aikct-agent-bar {
    border: 1px solid #e1e8ee;
    border-radius: 14px;
    background: #fff;
}

#kctai .aikct-chat-mode,
#kctai .aikct-agent-mode {
    border-color: #d8e1ea;
    background: #f8fafc;
}

#kctai .aikct-chat-mode label.is-active,
#kctai .aikct-agent-mode label.is-active {
    background: #2f855a;
    color: #fff;
    box-shadow: 0 4px 12px rgba(47, 133, 90, .22);
}

#kctai .prompt-toggle-container {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0 0 2px;
    overflow-x: auto;
}

#kctai .prompt-toggle-container button,
#kctai .prompt-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #d7dee6;
    border-radius: 12px;
    background: #f8fafc;
    color: #344054;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

#kctai .prompt-toggle-container button:hover,
#kctai .prompt-toggle-btn:hover {
    border-color: #2f855a;
    background: #eefaf3;
    color: #2f855a;
}

#kctai .aikct_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 16px;
    border: 1px solid #dce5ee;
    border-radius: 16px;
    background: #f8fafc;
    box-shadow: none;
}

#kctai .modelai {
    width: fit-content;
    max-width: 100%;
    margin: 0 !important;
    padding: 8px 12px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8 !important;
    font-size: 13px;
    white-space: normal;
}

#kctai #my_prompt_result {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
}

#kctai #my_prompt_result.has-content {
    min-height: 260px;
    max-height: clamp(320px, calc(100vh - 430px), 560px);
    padding: 14px;
    border: 1px solid #d6dee8;
    border-radius: 16px;
    background: #fff;
}

#kctai .message-box {
    max-width: min(920px, 92%);
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

#kctai .message-box.left {
    align-self: flex-start;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #111827;
    text-align: left;
}

#kctai .message-box.right {
    align-self: flex-end;
    border: 1px solid #c9f4b2;
    background: #dcfce7;
    color: #111827;
    text-align: right;
}

#kctai .message-box.left::before,
#kctai .message-box.right::before {
    display: block;
    margin-bottom: 4px;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
}

#kctai .aikct-agent-plan {
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid #f4c56f;
    border-left: 4px solid #d97706;
    border-radius: 12px;
    background: #fffbeb;
    color: #4a3000;
    font-size: 13px;
}

#kctai .aikct-agent-plan strong {
    color: #92400e;
    font-size: 14px;
}

#kctai .aikct-agent-plan p {
    color: #1e3a8a;
}

#kctai .aikct-agent-plan ol {
    margin-left: 20px;
}

#kctai .controls {
    margin: 0;
}

#kctai .controls button,
#kctai .add-to-content-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 13px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

#kctai .input-area {
    margin-top: 0;
}

#kctai .textarea-wrapper {
    border-color: #d6dee8;
    border-radius: 16px;
    background: #f8fafc;
}

#kctai #send-btn {
    border-radius: 14px;
}

@media (max-width: 782px) {
    #kctai {
        padding: 14px;
        border-radius: 14px;
    }

    #kctai .header {
        margin: -14px -14px 0;
        padding: 14px;
    }

    #kctai #my_prompt_result.has-content {
        max-height: 420px;
    }
}

/* Agent Pro copilot layout v2 */
#kctai {
    gap: 12px;
    max-height: calc(100vh - 72px);
    overflow: hidden;
}

#kctai .header {
    flex: 0 0 auto;
}

#kctai .aikct-runtime-settings {
    flex: 0 0 auto;
}

#kctai .aikct-copilot-main {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr) 286px;
    gap: 0;
    min-height: 520px;
    max-height: calc(100vh - 330px);
    border: 1px solid #d8e1e8;
    border-radius: 16px;
    background: #fbfcfd;
    overflow: hidden;
}

#kctai .aikct-copilot-rail,
#kctai .aikct-copilot-side {
    min-height: 0;
    overflow: auto;
    background: #fff;
}

#kctai .aikct-copilot-rail {
    padding: 14px;
    border-right: 1px solid #edf1f4;
}

#kctai .aikct-copilot-side {
    padding: 14px;
    border-left: 1px solid #edf1f4;
}

#kctai .aikct-rail-section {
    margin-bottom: 18px;
}

#kctai .aikct-rail-section h3 {
    margin: 0 0 9px;
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

#kctai .aikct-agent-task {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0 0 7px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #253041;
    text-align: left;
    cursor: pointer;
}

#kctai .aikct-agent-task:hover {
    border-color: #d8e1e8;
    background: #f8fafc;
}

#kctai .aikct-agent-task.is-active {
    border-color: #bbf7d0;
    background: #edf9f2;
    color: #2f855a;
}

#kctai .aikct-agent-task b,
#kctai .aikct-queue-item b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 900;
}

#kctai .aikct-agent-task small,
#kctai .aikct-queue-item small {
    display: block;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
}

#kctai .aikct-task-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eef3f7;
    color: #344054;
    font-weight: 900;
}

#kctai .aikct-agent-task.is-active .aikct-task-icon {
    background: #d1fae5;
    color: #2f855a;
}

#kctai .aikct-legacy-tools {
    display: grid;
    gap: 7px;
}

#kctai .aikct-legacy-tools > button {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 7px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #253041;
    text-align: left;
    font-weight: 900;
    cursor: pointer;
}

#kctai .aikct-legacy-tools > button:hover {
    border-color: #d8e1e8;
    background: #f8fafc;
}

#kctai .aikct-copilot-workspace {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    overflow: hidden;
}

#kctai .aikct_nav {
    grid-column: 1 / -1;
    margin: 0 !important;
    padding: 12px;
    border-top: 1px solid #edf1f4;
    background: #fff;
    max-height: 220px;
    overflow: auto;
}

#kctai .aikct_nav .aikct-open-prompt {
    width: auto;
    height: auto;
    min-height: 42px;
    display: inline-flex;
    margin: 0 8px 8px 0;
    padding: 9px 12px;
    border: 1px solid #d8e1e8;
    border-radius: 12px;
    background: #f8fafc;
    color: #253041;
    box-shadow: none;
    font-size: 13px;
    font-weight: 850;
}

#kctai .aikct-context-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #d8e1e8;
    border-radius: 14px;
    background: #fff;
}

#kctai .aikct-context-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    min-width: 0;
}

#kctai .aikct-context-chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 850;
}

#kctai .aikct-context-chip.is-ready {
    border-color: #bbf7d0;
    background: #edf9f2;
    color: #027a48;
}

#kctai .aikct-workspace-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid #d8e1e8;
    border-radius: 999px;
    background: #f8fafc;
}

#kctai .aikct-workspace-tabs button {
    min-height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    padding: 0 10px;
    color: #475467;
    font-size: 12px;
    font-weight: 850;
}

#kctai .aikct-workspace-tabs .is-active {
    background: #fff;
    color: #2f855a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

#kctai .aikct_workspace_thread {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid #d8e1e8;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

#kctai .aikct-thread-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f4;
}

#kctai .aikct-thread-head strong {
    font-size: 14px;
}

#kctai .aikct-thread-head small {
    color: #667085;
    font-weight: 750;
}

#kctai .aikct_workspace_thread .aikct_box {
    min-height: 0;
    padding: 14px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(#fff, #f8fafc);
    overflow: hidden;
}

#kctai .aikct_workspace_thread #my_prompt_result {
    min-height: 0;
    overflow: auto;
}

#kctai .aikct_workspace_thread #my_prompt_result.has-content {
    min-height: 0;
    max-height: none;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
}

#kctai .aikct-side-card {
    border: 1px solid #d8e1e8;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    margin-bottom: 12px;
}

#kctai .aikct-side-card h3 {
    margin: 0;
    padding: 12px 13px;
    border-bottom: 1px solid #edf1f4;
    font-size: 13px;
    font-weight: 900;
}

#kctai .aikct-side-card-body {
    display: grid;
    gap: 9px;
    padding: 12px 13px;
}

#kctai .aikct-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    color: #344054;
    font-size: 13px;
    font-weight: 750;
}

#kctai .aikct-metric span {
    color: #667085;
}

#kctai .aikct-metric b {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#kctai .aikct-queue-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

#kctai .aikct-queue-item > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #edf9f2;
    color: #2f855a;
    font-size: 12px;
    font-weight: 900;
}

#kctai .aikct-side-settings {
    min-height: 36px;
    border: 1px solid #d8e1e8;
    border-radius: 10px;
    background: #fff;
    color: #344054;
    font-weight: 850;
    cursor: pointer;
}

#kctai .input-area {
    flex: 0 0 auto;
}

#kctai .textarea-container label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

#kctai .aikct-command-suggestions {
    display: flex;
    gap: 7px;
    margin-top: 8px;
    overflow-x: auto;
}

#kctai .aikct-command-suggestions button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid #d8e1e8;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

#kctai .aikct-command-suggestions button:hover {
    border-color: #2f855a;
    color: #2f855a;
}

@media (max-width: 1200px) {
    #kctai .aikct-copilot-main {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    #kctai .aikct-copilot-side {
        display: none;
    }
}

@media (max-width: 860px) {
    #kctai {
        max-height: none;
        overflow: visible;
    }

    #kctai .aikct-copilot-main {
        grid-template-columns: 1fr;
        max-height: none;
    }

    #kctai .aikct-copilot-rail {
        display: none;
    }

    #kctai .aikct-context-strip {
        grid-template-columns: 1fr;
    }
}

/* Compact copilot sizing fixes */
#kctai {
    max-height: calc(100vh - 42px);
    min-height: 720px;
    overflow: hidden;
}

#kctai .header {
    min-height: 58px;
    padding: 12px 16px;
    margin: -20px -20px 0;
}

#kctai .header h2 svg {
    width: 30px;
    height: 30px;
}

#kctai .aikct-runtime-settings-toggle {
    min-height: 42px;
    padding: 8px 12px;
}

#kctai .aikct-runtime-settings-toggle small {
    font-size: 12px;
}

#kctai .aikct-copilot-main {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: 210px minmax(520px, 1fr) 230px;
}

#kctai .aikct-copilot-rail,
#kctai .aikct-copilot-side {
    padding: 10px;
}

#kctai .aikct-rail-section {
    margin-bottom: 12px;
}

#kctai .aikct-rail-section h3 {
    margin-bottom: 6px;
    font-size: 10px;
}

#kctai .aikct-agent-task {
    min-height: 36px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 4px;
    padding: 6px 7px;
    border-radius: 10px;
}

#kctai .aikct-task-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
}

#kctai .aikct-agent-task b,
#kctai .aikct-queue-item b {
    font-size: 12px;
}

#kctai .aikct-agent-task small,
#kctai .aikct-queue-item small {
    display: none;
}

#kctai .aikct-copilot-workspace {
    padding: 10px;
    gap: 8px;
}

#kctai .aikct-context-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 7px 9px;
}

#kctai .aikct-context-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
}

#kctai .aikct-context-chip {
    min-height: 24px;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
}

#kctai .aikct-workspace-tabs button {
    min-height: 24px;
    padding: 0 8px;
    font-size: 11px;
}

#kctai .aikct-thread-head {
    min-height: 42px;
    padding: 8px 11px;
}

#kctai .aikct-thread-head strong {
    font-size: 13px;
}

#kctai .aikct-thread-head small {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

#kctai .aikct_workspace_thread .aikct_box {
    padding: 10px;
}

#kctai .aikct_workspace_thread #my_prompt_result,
#kctai .aikct_workspace_thread #my_prompt_result.has-content {
    height: 100%;
    max-height: none;
    overflow-y: auto;
    padding-bottom: 16px;
}

#kctai .modelai {
    padding: 5px 9px;
    font-size: 12px;
}

#kctai .message-box {
    max-width: min(980px, 96%);
    padding: 10px 12px;
    font-size: 14px;
}

#kctai .aikct-agent-plan {
    padding: 9px 11px;
    font-size: 12px;
}

#kctai .aikct-side-card {
    margin-bottom: 8px;
    border-radius: 12px;
}

#kctai .aikct-side-card h3 {
    padding: 8px 10px;
    font-size: 12px;
}

#kctai .aikct-side-card-body {
    gap: 6px;
    padding: 8px 10px;
}

#kctai .aikct-metric {
    font-size: 12px;
}

#kctai .aikct-metric b {
    max-width: 92px;
}

#kctai .aikct-queue-item {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
}

#kctai .aikct-queue-item > span {
    width: 22px;
    height: 22px;
}

#kctai .input-area {
    position: sticky;
    bottom: 0;
    z-index: 8;
    margin: 0 -20px -20px;
    padding: 10px 20px 14px;
    border-top: 1px solid #edf1f4;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, .06);
}

#kctai .textarea-container label {
    display: none;
}

#kctai .textarea-wrapper {
    grid-template-columns: minmax(0, 1fr) 50px;
    padding: 7px;
}

#kctai #ask_ai {
    min-height: 44px;
    max-height: 110px;
    font-size: 14px;
}

#kctai #send-btn {
    width: 46px;
    height: 46px;
}

#kctai .aikct-command-suggestions {
    margin-top: 6px;
}

#kctai .aikct-command-suggestions button {
    min-height: 28px;
}

@media (max-width: 1400px) {
    #kctai .aikct-copilot-main {
        grid-template-columns: 190px minmax(440px, 1fr) 210px;
    }
}

@media (max-width: 1150px) {
    #kctai .aikct-copilot-main {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    #kctai .aikct-copilot-side {
        display: none;
    }
}

/* Chat visibility fix: no overlay, only messages scroll */
#kctai {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    max-height: calc(100vh - 36px) !important;
    overflow: hidden !important;
}

#kctai .aikct-copilot-main {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

#kctai .aikct-copilot-rail,
#kctai .aikct-copilot-side,
#kctai .aikct-copilot-workspace,
#kctai .aikct_workspace_thread,
#kctai .aikct_workspace_thread .aikct_box {
    min-height: 0 !important;
}

#kctai .aikct-copilot-workspace {
    height: 100% !important;
}

#kctai .aikct_workspace_thread {
    height: 100% !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    height: 100% !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    overflow: hidden !important;
}

#kctai .aikct_workspace_thread #my_prompt_result {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
}

#kctai .aikct_workspace_thread #my_prompt_result.has-content {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 0 4px 12px 0 !important;
}

#kctai .input-area {
    position: static !important;
    margin: 0 -20px -20px !important;
    padding: 10px 20px 14px !important;
    flex: none !important;
}

#kctai .message-box {
    flex: 0 0 auto;
}

#kctai .controls {
    flex: 0 0 auto;
}

/* Simplified production layout: one-column assistant */
#kctai {
    display: flex !important;
    flex-direction: column !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

#kctai .header {
    position: relative !important;
    z-index: 50 !important;
    min-height: 62px !important;
}

#kctai .close-btn {
    position: relative !important;
    z-index: 60 !important;
    pointer-events: auto !important;
}

#kctai .aikct-copilot-main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

#kctai .aikct-copilot-rail,
#kctai .aikct-copilot-side,
#kctai .aikct-context-strip,
#kctai .aikct-thread-head {
    display: none !important;
}

#kctai .aikct-copilot-workspace {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#kctai .aikct_workspace_thread {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid #d8e1e8 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    display: block !important;
    height: auto !important;
    min-height: 360px !important;
    max-height: 58vh !important;
    overflow: auto !important;
    padding: 14px !important;
    background: #fff !important;
}

#kctai .aikct_workspace_thread #my_prompt_result,
#kctai .aikct_workspace_thread #my_prompt_result.has-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 320px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

#kctai .modelai {
    margin-bottom: 10px !important;
}

#kctai .input-area {
    position: static !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#kctai .textarea-wrapper {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    padding: 8px !important;
}

#kctai #ask_ai {
    min-height: 58px !important;
    max-height: 160px !important;
}

#kctai .aikct-command-suggestions {
    margin-top: 8px !important;
}

#kctai .aikct-command-suggestions button {
    min-height: 30px !important;
}

#kctai .aikct-inline-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 4px;
}

#kctai .aikct-inline-actions button {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #d8e1e8;
    border-radius: 999px;
    background: #fff;
    color: #253041;
    font-weight: 850;
    cursor: pointer;
}

#kctai .aikct-inline-actions button:hover {
    border-color: #2f855a;
    color: #2f855a;
    background: #edf9f2;
}

#kctai .aikct-inline-actions span {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    background: #eef3f7;
    font-weight: 900;
}

#kctai .aikct-command-suggestions {
    opacity: .85;
}

#kctai::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    min-height: 0;
}

/* AIKCT final editor assistant layout */
#kctai.is-aikct-hidden {
    display: none !important;
}

#kctai {
    box-sizing: border-box !important;
    width: min(760px, calc(100vw - 40px)) !important;
    max-height: calc(100vh - 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid #d7dde5 !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22) !important;
}

#kctai .header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 1002 !important;
    min-height: 52px !important;
    padding: 10px 12px 10px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
}

#kctai .header h2 {
    margin: 0 !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

#kctai .close-btn {
    position: relative !important;
    z-index: 1003 !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    border: 1px solid #d8dee8 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #475569 !important;
    line-height: 1 !important;
}

#kctai .close-btn:hover,
#kctai .close-btn:focus {
    border-color: #ef4444 !important;
    color: #b91c1c !important;
    background: #fff5f5 !important;
    outline: none !important;
}

#kctai .aikct-runtime-settings,
#kctai .aikct-inline-actions,
#kctai .aikct-copilot-main,
#kctai .input-area {
    flex: 0 0 auto !important;
}

#kctai .aikct-runtime-settings {
    margin: 10px 12px 0 !important;
}

#kctai .aikct-inline-actions {
    padding: 10px 12px 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e5eaf0 !important;
}

#kctai .aikct-copilot-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    overflow: hidden !important;
}

#kctai .aikct-copilot-rail,
#kctai .aikct-copilot-side,
#kctai .aikct-context-strip,
#kctai .aikct-thread-head {
    display: none !important;
}

#kctai .aikct-copilot-workspace,
#kctai .aikct_workspace_thread {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    flex: 1 1 auto !important;
    min-height: 220px !important;
    max-height: calc(100vh - 285px) !important;
    overflow: auto !important;
    padding: 14px !important;
    border: 1px solid #dce3eb !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

#kctai .aikct_workspace_thread #my_prompt_result,
#kctai .aikct_workspace_thread #my_prompt_result.has-content {
    min-height: 190px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

#kctai .input-area {
    margin: 0 !important;
    padding: 10px 12px 12px !important;
    border-top: 1px solid #e5eaf0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#kctai .textarea-container label {
    display: none !important;
}

#kctai .textarea-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    align-items: end !important;
    padding: 7px !important;
    border: 1px solid #ccd6e0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

#kctai #ask_ai {
    min-height: 48px !important;
    max-height: 128px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    box-shadow: none !important;
    resize: vertical !important;
}

#kctai #send-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
}

#kctai .aikct-command-suggestions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 7px !important;
    overflow-x: auto !important;
}

#kctai .aikct-command-suggestions button {
    flex: 0 0 auto !important;
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
}

@media (max-width: 782px) {
    #kctai {
        width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 12px !important;
    }

    #kctai .aikct_workspace_thread .aikct_box {
        max-height: calc(100vh - 270px) !important;
    }
}

/* AIKCT final scroll correction */
#kctai:not(.is-aikct-hidden) {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(180px, 1fr) auto !important;
    height: min(860px, calc(100vh - 36px)) !important;
    max-height: calc(100vh - 36px) !important;
    overflow: hidden !important;
}

#kctai .aikct-runtime-settings,
#kctai .aikct-inline-actions,
#kctai .input-area {
    min-height: 0 !important;
}

#kctai .aikct-copilot-main {
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

#kctai .aikct-copilot-workspace,
#kctai .aikct_workspace_thread {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

#kctai .aikct_workspace_thread #my_prompt_result,
#kctai .aikct_workspace_thread #my_prompt_result.has-content {
    min-height: 0 !important;
    overflow: visible !important;
}

#kctai .input-area {
    position: relative !important;
    z-index: 20 !important;
}

@media (max-width: 782px) {
    #kctai:not(.is-aikct-hidden) {
        height: calc(100vh - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }
}

/* AIKCT quick action sizing guard */
#kctai .aikct-inline-actions {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 9px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

#kctai .aikct-inline-actions button,
#kctai .aikct-inline-actions .prompt-toggle-btn {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    border-radius: 999px !important;
}

#kctai .aikct-inline-actions span {
    flex: 0 0 24px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    line-height: 1 !important;
}

/* AIKCT settings panel guard */
#kctai #aikct_runtime_settings_panel {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-height: 310px !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#kctai #aikct_runtime_settings_panel[hidden] {
    display: none !important;
}

#kctai .aikct-chat-provider-bar,
#kctai .aikct-agent-bar {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(210px, auto) minmax(180px, 1fr) minmax(220px, 1.1fr) !important;
    gap: 10px !important;
    align-items: end !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
}

#kctai .aikct-chat-provider-note,
#kctai .aikct-agent-note {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
}

#kctai .aikct-chat-mode,
#kctai .aikct-agent-mode {
    min-width: 0 !important;
    align-self: end !important;
}

#kctai .aikct-chat-mode label,
#kctai .aikct-agent-mode label {
    white-space: nowrap !important;
}

#kctai .aikct-chat-provider-field,
#kctai .aikct-agent-field {
    min-width: 0 !important;
}

#kctai .aikct-chat-provider-field select,
#kctai .aikct-agent-field select {
    max-width: 100% !important;
}

#kctai .aikct-agent-bar {
    background: #fffaf0 !important;
    border-color: #f6d28b !important;
}

@media (max-width: 860px) {
    #kctai .aikct-chat-provider-bar,
    #kctai .aikct-agent-bar {
        grid-template-columns: 1fr !important;
    }

    #kctai .aikct-chat-mode,
    #kctai .aikct-agent-mode {
        width: 100% !important;
    }

    #kctai .aikct-chat-mode label,
    #kctai .aikct-agent-mode label {
        flex: 1 1 0 !important;
        justify-content: center !important;
    }
}

/* AIKCT settings must show agent controls when expanded */
#kctai #aikct_runtime_settings {
    overflow: visible !important;
}

#kctai #aikct_runtime_settings_panel {
    max-height: none !important;
    overflow: visible !important;
}

#kctai .aikct-chat-provider-bar {
    grid-template-columns: minmax(210px, auto) minmax(180px, 1fr) minmax(220px, 1fr) !important;
}

#kctai .aikct-chat-provider-note {
    padding: 7px 10px !important;
    font-size: 12px !important;
}

#kctai .aikct-agent-bar {
    display: grid !important;
    grid-template-columns: minmax(210px, auto) minmax(220px, 1fr) !important;
}

#kctai .aikct-agent-note {
    grid-column: 1 / -1 !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
}

/* AIKCT expanded settings mode */
#kctai.is-settings-open:not(.is-aikct-hidden) {
    grid-template-rows: auto auto minmax(160px, 1fr) auto !important;
}

#kctai.is-settings-open .aikct-inline-actions {
    display: none !important;
}

#kctai.is-settings-open #aikct_runtime_settings {
    overflow: hidden !important;
}

#kctai.is-settings-open #aikct_runtime_settings_panel {
    display: flex !important;
    max-height: min(420px, calc(100vh - 315px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#kctai.is-settings-open .aikct-chat-provider-bar,
#kctai.is-settings-open .aikct-agent-bar {
    position: static !important;
    z-index: auto !important;
}

#kctai.is-settings-open .aikct-copilot-main {
    padding-top: 10px !important;
}

#kctai.is-settings-open .aikct_workspace_thread .aikct_box {
    min-height: 130px !important;
}

/* AIKCT compact chat-first layout */
#kctai:not(.is-aikct-hidden) {
    display: grid !important;
    grid-template-rows: 64px auto 56px minmax(320px, 1fr) auto !important;
    gap: 0 !important;
    height: min(900px, calc(100vh - 24px)) !important;
    max-height: calc(100vh - 24px) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#kctai .header {
    box-sizing: border-box !important;
    min-height: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
}

#kctai .aikct-runtime-settings {
    margin: 8px 12px 0 !important;
}

#kctai .aikct-runtime-settings-toggle {
    min-height: 44px !important;
    padding: 9px 14px !important;
}

#kctai .aikct-runtime-settings-panel {
    padding: 10px !important;
}

#kctai .aikct-inline-actions {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 7px 12px !important;
    margin: 0 !important;
    border-bottom: 1px solid #dbe3ea !important;
}

#kctai .aikct-copilot-main {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
}

#kctai .aikct-copilot-workspace,
#kctai .aikct_workspace_thread {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 320px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#kctai .input-area {
    box-sizing: border-box !important;
    min-height: 132px !important;
    margin: 0 !important;
    padding: 8px 12px 10px !important;
}

#kctai .textarea-wrapper {
    min-height: 76px !important;
    padding: 6px !important;
}

#kctai #ask_ai {
    min-height: 58px !important;
    max-height: 86px !important;
}

#kctai .aikct-command-suggestions {
    margin-top: 6px !important;
}

#kctai.is-settings-open:not(.is-aikct-hidden) {
    grid-template-rows: 64px auto minmax(260px, 1fr) auto !important;
}

#kctai.is-settings-open #aikct_runtime_settings_panel {
    max-height: min(330px, calc(100vh - 300px)) !important;
}

@media (max-height: 760px) {
    #kctai:not(.is-aikct-hidden) {
        grid-template-rows: 56px auto 50px minmax(240px, 1fr) auto !important;
    }

    #kctai .header {
        min-height: 56px !important;
        height: 56px !important;
    }

    #kctai .input-area {
        min-height: 116px !important;
    }

    #kctai .aikct_workspace_thread .aikct_box {
        min-height: 240px !important;
    }
}

/* AIKCT remove chat vertical gap */
#kctai .aikct-copilot-main {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 8px 12px !important;
}

#kctai .aikct-copilot-workspace {
    position: absolute !important;
    inset: 8px 12px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#kctai .aikct_workspace_thread {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#kctai .aikct_workspace_thread #my_prompt_result,
#kctai .aikct_workspace_thread #my_prompt_result.has-content {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* AIKCT visible chat fallback */
#kctai:not(.is-aikct-hidden) {
    grid-template-rows: 64px auto 56px minmax(360px, 1fr) 128px !important;
}

#kctai .aikct-copilot-main,
#kctai .aikct-copilot-workspace,
#kctai .aikct_workspace_thread,
#kctai .aikct_workspace_thread .aikct_box {
    position: static !important;
    inset: auto !important;
}

#kctai .aikct-copilot-main {
    display: block !important;
    min-height: 360px !important;
    height: 100% !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
}

#kctai .aikct-copilot-workspace,
#kctai .aikct_workspace_thread {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    overflow: hidden !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #fff !important;
}

#kctai #my_prompt_result {
    display: block !important;
    min-height: 100% !important;
}

#kctai.is-settings-open:not(.is-aikct-hidden) {
    grid-template-rows: 64px auto minmax(300px, 1fr) 128px !important;
}

/* AIKCT stable modal layout reset */
#kctai:not(.is-aikct-hidden) {
    box-sizing: border-box !important;
    position: fixed !important;
    top: 32px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999999999 !important;
    width: min(920px, calc(100vw - 48px)) !important;
    height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
    display: grid !important;
    grid-template-rows: 74px auto 58px minmax(260px, 1fr) 118px !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #cfd8e3 !important;
    border-radius: 18px !important;
    background: #f6f8fb !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .28) !important;
}

#kctai .header {
    box-sizing: border-box !important;
    height: 74px !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #dce4ee !important;
    background: #fff !important;
}

#kctai .header h2 svg {
    width: 44px !important;
    height: 44px !important;
}

#kctai .close-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
}

#kctai .aikct-runtime-settings {
    box-sizing: border-box !important;
    margin: 10px 14px 0 !important;
    overflow: hidden !important;
}

#kctai .aikct-runtime-settings-toggle {
    min-height: 42px !important;
    padding: 8px 13px !important;
}

#kctai .aikct-runtime-settings-panel {
    max-height: min(300px, calc(100vh - 310px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#kctai .aikct-inline-actions {
    box-sizing: border-box !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border-bottom: 1px solid #dce4ee !important;
    background: #f6f8fb !important;
}

#kctai .aikct-copilot-main {
    box-sizing: border-box !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
}

#kctai .aikct-copilot-workspace,
#kctai .aikct_workspace_thread {
    box-sizing: border-box !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#kctai .aikct_workspace_thread {
    border: 1px solid #d5dee9 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    box-sizing: border-box !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

#kctai #my_prompt_result {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#kctai .input-area {
    box-sizing: border-box !important;
    min-height: 118px !important;
    height: 118px !important;
    margin: 0 !important;
    padding: 8px 14px 10px !important;
    border-top: 1px solid #dce4ee !important;
    background: #fff !important;
    overflow: hidden !important;
}

#kctai .textarea-wrapper {
    min-height: 62px !important;
    padding: 6px !important;
}

#kctai #ask_ai {
    min-height: 48px !important;
    max-height: 62px !important;
}

#kctai .aikct-command-suggestions {
    margin-top: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

#kctai.is-settings-open:not(.is-aikct-hidden) {
    grid-template-rows: 74px auto minmax(220px, 1fr) 118px !important;
}

#kctai.is-settings-open .aikct-inline-actions {
    display: none !important;
}

#kctai:not(.is-aikct-hidden):has(#my_prompt_result:empty) {
    grid-template-rows: 74px auto 58px 180px 118px !important;
}

#kctai:not(.is-aikct-hidden):has(#my_prompt_result.has-content) {
    grid-template-rows: 74px auto 58px minmax(260px, 1fr) 118px !important;
}

#kctai #my_prompt_result:empty {
    display: none !important;
}

/* AIKCT final compact empty state */
#kctai:not(.is-aikct-hidden):not(:has(#my_prompt_result.has-content)) {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 64px) !important;
    grid-template-rows: 74px auto 58px 118px !important;
}

#kctai:not(:has(#my_prompt_result.has-content)) .aikct-copilot-main {
    display: none !important;
}

#kctai:not(:has(#my_prompt_result.has-content)) .input-area {
    border-top: 1px solid #dce4ee !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct-copilot-main {
    display: grid !important;
}

/* AIKCT final chat panel shape override */
#kctai:has(#my_prompt_result.has-content) .aikct-copilot-main,
#kctai:has(#modelai:not(:empty)) .aikct-copilot-main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct-copilot-workspace,
#kctai:has(#modelai:not(:empty)) .aikct-copilot-workspace,
#kctai:has(#my_prompt_result.has-content) .aikct_workspace_thread,
#kctai:has(#modelai:not(:empty)) .aikct_workspace_thread {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct_workspace_thread,
#kctai:has(#modelai:not(:empty)) .aikct_workspace_thread {
    border: 1px solid #d5dee9 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct_workspace_thread .aikct_box,
#kctai:has(#modelai:not(:empty)) .aikct_workspace_thread .aikct_box {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

#kctai .modelai {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 7px 10px !important;
    border: 1px solid #cfe1ff !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
}

#kctai .modelai[style*="display:none"],
#kctai .modelai[style*="display: none"],
#kctai .modelai:empty {
    display: none !important;
}

#kctai #my_prompt_result,
#kctai #my_prompt_result.has-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#kctai #my_prompt_result .message-box {
    max-width: min(760px, 86%) !important;
}

/* AIKCT final chat panel shape */
#kctai:has(#my_prompt_result.has-content) .aikct-copilot-main,
#kctai:has(#modelai:not(:empty)) .aikct-copilot-main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 10px 14px !important;
    overflow: hidden !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct-copilot-workspace,
#kctai:has(#modelai:not(:empty)) .aikct-copilot-workspace,
#kctai:has(#my_prompt_result.has-content) .aikct_workspace_thread,
#kctai:has(#modelai:not(:empty)) .aikct_workspace_thread {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct_workspace_thread,
#kctai:has(#modelai:not(:empty)) .aikct_workspace_thread {
    border: 1px solid #d5dee9 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct_workspace_thread .aikct_box,
#kctai:has(#modelai:not(:empty)) .aikct_workspace_thread .aikct_box {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
}

#kctai .modelai {
    box-sizing: border-box !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 7px 10px !important;
    border: 1px solid #cfe1ff !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
}

#kctai .modelai[style*="display:none"],
#kctai .modelai[style*="display: none"],
#kctai .modelai:empty {
    display: none !important;
}

#kctai #my_prompt_result,
#kctai #my_prompt_result.has-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#kctai #my_prompt_result .message-box {
    max-width: min(760px, 86%) !important;
}

/* AIKCT compact empty state */
#kctai:not(.is-aikct-hidden):not(:has(#my_prompt_result.has-content)) {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 64px) !important;
    grid-template-rows: 74px auto 58px 118px !important;
}

#kctai:not(:has(#my_prompt_result.has-content)) .aikct-copilot-main {
    display: none !important;
}

#kctai:not(:has(#my_prompt_result.has-content)) .input-area {
    border-top: 1px solid #dce4ee !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct-copilot-main {
    display: grid !important;
}

#kctai:has(#my_prompt_result:empty) .aikct_workspace_thread {
    opacity: .72 !important;
}

@media (max-height: 760px) {
    #kctai:not(.is-aikct-hidden) {
        top: 16px !important;
        height: calc(100vh - 32px) !important;
        max-height: calc(100vh - 32px) !important;
        grid-template-rows: 62px auto 52px minmax(180px, 1fr) 106px !important;
    }

    #kctai .header {
        height: 62px !important;
        min-height: 62px !important;
    }

    #kctai .input-area {
        height: 106px !important;
        min-height: 106px !important;
    }
}

/* AIKCT message flow fix */
#kctai .aikct_workspace_thread .aikct_box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

#kctai #outputId:empty,
#kctai .modelai:empty {
    display: none !important;
}

#kctai #my_prompt_result,
#kctai #my_prompt_result.has-content,
#kctai .aikct_workspace_thread #my_prompt_result,
#kctai .aikct_workspace_thread #my_prompt_result.has-content {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* AIKCT loader and workspace placement fix */
#kctai > #loader,
#kctai .aikct_box_loading#loader {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1000000000 !important;
    pointer-events: none !important;
}

#kctai > #loader[style*="display: none"],
#kctai .aikct_box_loading#loader[style*="display: none"] {
    display: none !important;
}

#kctai:not(.is-aikct-hidden) {
    grid-template-rows: 74px auto 58px minmax(0, 1fr) 118px !important;
}

#kctai .aikct-copilot-main {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-content: stretch !important;
}

#kctai .aikct-copilot-main > .aikct-copilot-workspace {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-content: stretch !important;
}

#kctai .aikct-copilot-main > .aikct-copilot-workspace > .aikct_workspace_thread {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-content: stretch !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    min-height: 0 !important;
}

/* AIKCT empty/content chat sizing */
#kctai:not(.is-aikct-hidden):has(#my_prompt_result:empty) {
    grid-template-rows: 74px auto 58px 180px 118px !important;
}

#kctai:not(.is-aikct-hidden):has(#my_prompt_result.has-content) {
    grid-template-rows: 74px auto 58px minmax(260px, 1fr) 118px !important;
}

#kctai #my_prompt_result:empty {
    display: none !important;
}

/* AIKCT final compact empty state */
#kctai:not(.is-aikct-hidden):not(:has(#my_prompt_result.has-content)) {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 64px) !important;
    grid-template-rows: 74px auto 58px 118px !important;
}

#kctai:not(:has(#my_prompt_result.has-content)) .aikct-copilot-main {
    display: none !important;
}

#kctai:not(:has(#my_prompt_result.has-content)) .input-area {
    border-top: 1px solid #dce4ee !important;
}

#kctai:has(#my_prompt_result.has-content) .aikct-copilot-main {
    display: grid !important;
}


/* AIKCT redesign v3 - clean assistant UI */
#kctai:not(.is-aikct-hidden) {
    --aikct-panel-bg: #f7f9fd;
    --aikct-surface: #ffffff;
    --aikct-border: #dce5f0;
    --aikct-text: #14213d;
    --aikct-muted: #667085;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 18px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 999999999 !important;
    width: min(980px, calc(100vw - 44px)) !important;
    height: min(780px, calc(100vh - 36px)) !important;
    display: grid !important;
    grid-template-rows: 78px auto 62px minmax(260px, 1fr) 138px !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--aikct-border) !important;
    border-radius: 14px !important;
    background: var(--aikct-panel-bg) !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .24) !important;
    color: var(--aikct-text) !important;
}

#kctai .header {
    box-sizing: border-box !important;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--aikct-border) !important;
    background: rgba(255,255,255,.92) !important;
}

#kctai .header h2 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    color: var(--aikct-text) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

#kctai .header h2::after {
    content: "Online";
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #047857;
    font-size: 12px;
    font-weight: 850;
}

#kctai .header h2 svg {
    width: 42px !important;
    height: 42px !important;
    padding: 9px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #1d4ed8, #7c3aed) !important;
    fill: #fff !important;
}

#kctai .close-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid #d5dfec !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #475569 !important;
    font-size: 20px !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
}

#kctai .aikct-runtime-settings {
    margin: 12px 18px 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--aikct-border) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.82) !important;
}

#kctai .aikct-runtime-settings-toggle {
    min-height: 44px !important;
    padding: 9px 14px !important;
    background: transparent !important;
    color: var(--aikct-text) !important;
}

#kctai .aikct-runtime-settings-toggle span {
    font-size: 14px !important;
    font-weight: 900 !important;
}

#kctai .aikct-runtime-settings-toggle span::before {
    content: "⚙";
    margin-right: 9px;
    color: #4f46e5;
}

#kctai .aikct-runtime-settings-toggle small {
    color: var(--aikct-muted) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

#kctai .aikct-runtime-settings-panel {
    max-height: min(320px, calc(100vh - 300px)) !important;
    padding: 12px !important;
    overflow: auto !important;
    border-top: 1px solid var(--aikct-border) !important;
}

#kctai .aikct-inline-actions {
    box-sizing: border-box !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-bottom: 1px solid var(--aikct-border) !important;
    background: transparent !important;
}

#kctai .aikct-inline-actions button {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    border: 1px solid #dbe4ee !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1f2a44 !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;
}

#kctai .aikct-inline-actions span {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    background: #eef2ff !important;
    color: #4f46e5 !important;
}

#kctai .aikct-copilot-rail,
#kctai .aikct-copilot-side,
#kctai .aikct-context-strip,
#kctai .aikct-thread-head {
    display: none !important;
}

#kctai .aikct-copilot-main {
    box-sizing: border-box !important;
    display: block !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 14px 18px !important;
    overflow: hidden !important;
}

#kctai .aikct-copilot-workspace,
#kctai .aikct_workspace_thread {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#kctai .aikct_workspace_thread {
    border: 1px solid var(--aikct-border) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.72) !important;
}

#kctai .aikct_workspace_thread .aikct_box {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
}

#kctai:not(.is-chat-open) .aikct_workspace_thread .aikct_box::before {
    content: "🤖\AHow can I help you today?\AAsk me to create titles, translate content, improve SEO, or add tags to your post.";
    white-space: pre-line;
    display: grid;
    place-items: center;
    text-align: center;
    height: 100%;
    color: #172554;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.8;
}

#kctai.is-chat-open .aikct_workspace_thread .aikct_box::before {
    content: none !important;
}

#kctai #outputId:empty,
#kctai .modelai:empty,
#kctai .modelai[style*="display:none"],
#kctai .modelai[style*="display: none"] {
    display: none !important;
}

#kctai .modelai {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 4px !important;
    padding: 7px 10px !important;
    border: 1px solid #cfe1ff !important;
    border-radius: 999px !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

#kctai #my_prompt_result,
#kctai #my_prompt_result.has-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

#kctai .message-box {
    max-width: min(760px, 86%) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

#kctai .message-box.right {
    align-self: flex-end !important;
    background: #dcfce7 !important;
    border: 1px solid #9ee7b7 !important;
    color: #123023 !important;
}

#kctai .message-box.left {
    align-self: flex-start !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    color: #172554 !important;
}

#kctai .input-area {
    box-sizing: border-box !important;
    height: 138px !important;
    min-height: 138px !important;
    margin: 0 !important;
    padding: 12px 18px 14px !important;
    border-top: 1px solid var(--aikct-border) !important;
    background: rgba(255,255,255,.94) !important;
    overflow: hidden !important;
}

#kctai .textarea-wrapper {
    min-height: 70px !important;
    padding: 8px !important;
    border: 1px solid #cfdceb !important;
    border-radius: 12px !important;
    background: #fff !important;
}

#kctai #ask_ai {
    min-height: 54px !important;
    max-height: 74px !important;
    padding: 9px 10px !important;
    font-size: 14px !important;
}

#kctai #send-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 11px !important;
    background: #059669 !important;
}

#kctai .aikct-command-suggestions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

#kctai .aikct-command-suggestions button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
    background: #fff !important;
}

#kctai.is-settings-open .aikct-inline-actions {
    display: none !important;
}

#kctai.is-settings-open:not(.is-aikct-hidden) {
    grid-template-rows: 78px auto minmax(240px, 1fr) 138px !important;
}

@media (max-height: 760px) {
    #kctai:not(.is-aikct-hidden) {
        top: 10px !important;
        height: calc(100vh - 20px) !important;
        grid-template-rows: 64px auto 52px minmax(190px, 1fr) 116px !important;
    }

    #kctai .header { height: 64px !important; min-height: 64px !important; }
    #kctai .input-area { height: 116px !important; min-height: 116px !important; }
}

/* AIKCT hard fix: result must not become a tiny nested box */
#kctai.is-chat-open:not(.is-aikct-hidden) {
    height: min(780px, calc(100vh - 36px)) !important;
    grid-template-rows: 78px auto 62px minmax(280px, 1fr) 138px !important;
}

#kctai.is-chat-open .aikct-copilot-main {
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 14px 18px !important;
    overflow: hidden !important;
}

#kctai.is-chat-open .aikct-copilot-workspace,
#kctai.is-chat-open .aikct_workspace_thread {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#kctai.is-chat-open .aikct_workspace_thread {
    border: 1px solid #d5dee9 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

#kctai.is-chat-open .aikct_workspace_thread .aikct_box {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

#kctai.is-chat-open #my_prompt_result,
#kctai.is-chat-open #my_prompt_result.has-content,
#kctai.is-chat-open .aikct_workspace_thread #my_prompt_result,
#kctai.is-chat-open .aikct_workspace_thread #my_prompt_result.has-content {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#kctai.is-chat-open #my_prompt_result .message-box {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: min(760px, 86%) !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#kctai.is-chat-open #my_prompt_result .message-box.right {
    align-self: flex-end !important;
}

#kctai.is-chat-open #my_prompt_result .message-box.left {
    align-self: flex-start !important;
}

/* AIKCT settings visibility hard fix */
#kctai.is-settings-open:not(.is-aikct-hidden) {
    grid-template-rows: 78px auto minmax(220px, 1fr) 138px !important;
}

#kctai.is-settings-open .aikct-inline-actions {
    display: none !important;
}

#kctai.is-settings-open #aikct_runtime_settings {
    display: block !important;
    overflow: visible !important;
    margin: 12px 18px 0 !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
}

#kctai.is-settings-open #aikct_runtime_settings_panel,
#kctai #aikct_runtime_settings_panel:not([hidden]) {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-height: min(360px, calc(100vh - 300px)) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-top: 1px solid #dce5f0 !important;
    background: #fff !important;
}

#kctai #aikct_runtime_settings_panel[hidden] {
    display: none !important;
}

#kctai.is-settings-open .aikct-chat-provider-bar,
#kctai.is-settings-open .aikct-agent-bar,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-chat-provider-bar,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-agent-bar {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    overflow: visible !important;
}

#kctai.is-settings-open .aikct-chat-provider-bar,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-chat-provider-bar {
    grid-template-columns: minmax(210px, auto) minmax(190px, 1fr) minmax(220px, 1fr) !important;
    border: 1px solid #dce5f0 !important;
    background: #f8fafc !important;
}

#kctai.is-settings-open .aikct-agent-bar,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-agent-bar {
    grid-template-columns: minmax(210px, auto) minmax(220px, 1fr) !important;
    border: 1px solid #fed7aa !important;
    background: #fff7ed !important;
}

#kctai.is-settings-open .aikct-chat-provider-field,
#kctai.is-settings-open .aikct-agent-field,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-chat-provider-field,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-agent-field {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

#kctai.is-settings-open .aikct-chat-mode,
#kctai.is-settings-open .aikct-agent-mode,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-chat-mode,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-agent-mode {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding: 4px !important;
    border-radius: 10px !important;
    background: #fff !important;
}

#kctai.is-settings-open .aikct-chat-provider-note,
#kctai.is-settings-open .aikct-agent-note,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-chat-provider-note,
#kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-agent-note {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    white-space: normal !important;
}

@media (max-width: 860px) {
    #kctai.is-settings-open .aikct-chat-provider-bar,
    #kctai.is-settings-open .aikct-agent-bar,
    #kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-chat-provider-bar,
    #kctai #aikct_runtime_settings_panel:not([hidden]) .aikct-agent-bar {
        grid-template-columns: 1fr !important;
    }
}

/* AIKCT final modal layout fix - keep settings visible and stop helper layers from taking grid rows */
#kctai.ai-assistant:not(.is-aikct-hidden) {
    position: fixed !important;
    top: 18px !important;
    right: 22px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(920px, calc(100vw - 44px)) !important;
    height: min(820px, calc(100vh - 36px)) !important;
    max-height: calc(100vh - 36px) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 62px auto 52px minmax(0, 1fr) 112px !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d8e0eb !important;
    border-radius: 18px !important;
    background: #f8fafc !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, .2) !important;
    z-index: 999999 !important;
}

#kctai.ai-assistant.is-settings-open:not(.is-aikct-hidden) {
    grid-template-rows: 62px auto 0 minmax(0, 1fr) 112px !important;
}

#kctai.ai-assistant > #loader,
#kctai.ai-assistant > #aikct-overlay,
#kctai.ai-assistant > #aikct-prompt-popup {
    grid-row: 1 / -1 !important;
}

#kctai.ai-assistant > #aikct-overlay,
#kctai.ai-assistant > #aikct-prompt-popup {
    position: absolute !important;
}

#kctai.ai-assistant > .header {
    grid-row: 1 !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5ebf2 !important;
}

#kctai.ai-assistant > .aikct-runtime-settings {
    grid-row: 2 !important;
    min-height: 0 !important;
    margin: 10px 12px 0 !important;
    overflow: visible !important;
    border: 1px solid #dde6f0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

#kctai.ai-assistant .aikct-runtime-settings-toggle {
    width: 100% !important;
    min-height: 46px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    text-align: left !important;
    cursor: pointer !important;
}

#kctai.ai-assistant .aikct-runtime-settings-toggle span {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

#kctai.ai-assistant .aikct-runtime-settings-toggle small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    color: #64748b !important;
}

#kctai.ai-assistant .aikct-runtime-settings-toggle::after {
    content: "Settings" !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #eef2ff !important;
    color: #3730a3 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

#kctai.ai-assistant.is-settings-open .aikct-runtime-settings-toggle::after {
    content: "Hide" !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
}

#kctai.ai-assistant #aikct_runtime_settings_panel {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 0 !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    border-top: 0 !important;
}

#kctai.ai-assistant #aikct_runtime_settings_panel[hidden] {
    display: block !important;
}

#kctai.ai-assistant.is-settings-open #aikct_runtime_settings_panel,
#kctai.ai-assistant #aikct_runtime_settings_panel:not([hidden]) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-height: min(310px, calc(100vh - 300px)) !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-top: 1px solid #e5ebf2 !important;
    background: #ffffff !important;
}

#kctai.ai-assistant.is-settings-open .aikct-inline-actions {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#kctai.ai-assistant > .aikct-inline-actions {
    grid-row: 3 !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 7px 12px !important;
    background: #f8fafc !important;
}

#kctai.ai-assistant > .aikct-copilot-main {
    grid-row: 4 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
}

#kctai.ai-assistant > .input-area {
    grid-row: 5 !important;
    height: 112px !important;
    min-height: 112px !important;
    padding: 10px 12px 12px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #e5ebf2 !important;
}

#kctai.ai-assistant .aikct-chat-provider-bar,
#kctai.ai-assistant .aikct-agent-bar {
    display: grid !important;
    grid-template-columns: minmax(160px, auto) minmax(180px, 1fr) minmax(200px, 1fr) !important;
    gap: 10px !important;
    align-items: end !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #dbe5f0 !important;
    background: #f8fafc !important;
}

#kctai.ai-assistant .aikct-agent-bar {
    grid-template-columns: minmax(160px, auto) minmax(220px, 1fr) !important;
    background: #fff7ed !important;
    border-color: #fed7aa !important;
}

#kctai.ai-assistant .aikct-chat-mode,
#kctai.ai-assistant .aikct-agent-mode {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

#kctai.ai-assistant .aikct-chat-mode label,
#kctai.ai-assistant .aikct-agent-mode label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
}

#kctai.ai-assistant .aikct-chat-mode label.is-active,
#kctai.ai-assistant .aikct-agent-mode label.is-active {
    background: #111827 !important;
    color: #ffffff !important;
}

#kctai.ai-assistant .aikct-chat-provider-field,
#kctai.ai-assistant .aikct-agent-field {
    display: grid !important;
    gap: 5px !important;
    min-width: 0 !important;
}

#kctai.ai-assistant .aikct-chat-provider-field span,
#kctai.ai-assistant .aikct-agent-field span {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
}

#kctai.ai-assistant .aikct-chat-provider-field select,
#kctai.ai-assistant .aikct-agent-field select {
    width: 100% !important;
    min-height: 34px !important;
    max-width: 100% !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    font-size: 13px !important;
}

#kctai.ai-assistant .aikct-chat-provider-note,
#kctai.ai-assistant .aikct-agent-note {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .78) !important;
    color: #475569 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

@media (max-width: 860px) {
    #kctai.ai-assistant:not(.is-aikct-hidden) {
        top: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }

    #kctai.ai-assistant .aikct-chat-provider-bar,
    #kctai.ai-assistant .aikct-agent-bar {
        grid-template-columns: 1fr !important;
    }
}

/* AIKCT chat-style loading indicator */
#kctai.ai-assistant > #loader.aikct-chat-typing,
#kctai.ai-assistant > .aikct-chat-typing#loader {
    grid-row: 4 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    align-self: end !important;
    justify-self: start !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: min(520px, calc(100% - 36px)) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 18px 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 9px !important;
    z-index: 30 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#kctai.ai-assistant .aikct_workspace_thread .aikct_box > #loader.aikct-chat-typing,
#kctai.ai-assistant .aikct_workspace_thread .aikct_box > .aikct-chat-typing#loader {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: min(520px, 80%) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 9px !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
}

#kctai.ai-assistant .aikct_workspace_thread .aikct_box > #loader.aikct-chat-typing[style*="display:none"],
#kctai.ai-assistant .aikct_workspace_thread .aikct_box > #loader.aikct-chat-typing[style*="display: none"] {
    display: none !important;
}

#kctai.ai-assistant > #loader.aikct-chat-typing[style*="display:none"],
#kctai.ai-assistant > #loader.aikct-chat-typing[style*="display: none"] {
    display: none !important;
}

#kctai.ai-assistant .aikct-chat-typing-avatar {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #111827 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .18) !important;
}

#kctai.ai-assistant .aikct-chat-typing-bubble {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 38px !important;
    max-width: 100% !important;
    padding: 9px 12px !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 15px 15px 15px 5px !important;
    background: #ffffff !important;
    color: #334155 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .1) !important;
}

#kctai.ai-assistant .aikct-chat-typing-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
}

#kctai.ai-assistant .aikct-chat-typing-dots {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 12px !important;
}

#kctai.ai-assistant .aikct-chat-typing-dots i {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
    border-radius: 50% !important;
    background: #64748b !important;
    opacity: .42 !important;
    animation: aikctTypingDot 1.05s infinite ease-in-out !important;
}

#kctai.ai-assistant .aikct-chat-typing-dots i:nth-child(2) {
    animation-delay: .14s !important;
}

#kctai.ai-assistant .aikct-chat-typing-dots i:nth-child(3) {
    animation-delay: .28s !important;
}

@keyframes aikctTypingDot {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: .36;
    }
    40% {
        transform: translateY(-4px);
        opacity: .95;
    }
}

@media (max-width: 640px) {
    #kctai.ai-assistant > #loader.aikct-chat-typing,
    #kctai.ai-assistant > .aikct-chat-typing#loader {
        max-width: calc(100% - 24px) !important;
        margin: 0 0 12px 14px !important;
    }

    #kctai.ai-assistant .aikct-chat-typing-text {
        max-width: 180px !important;
    }
}

/* AIKCT full-width chat workspace fix */
#kctai.ai-assistant > .aikct-copilot-main {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

#kctai.ai-assistant .aikct-copilot-rail,
#kctai.ai-assistant .aikct-copilot-side,
#kctai.ai-assistant .aikct-context-strip,
#kctai.ai-assistant .aikct-thread-head {
    display: none !important;
}

#kctai.ai-assistant .aikct-copilot-workspace,
#kctai.ai-assistant .aikct_workspace_thread,
#kctai.ai-assistant .aikct_workspace_thread .aikct_box {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
}

#kctai.ai-assistant .aikct_workspace_thread {
    border: 1px solid #d7e1ee !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

#kctai.ai-assistant .aikct_workspace_thread .aikct_box {
    padding: 14px 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#kctai.ai-assistant #outputId,
#kctai.ai-assistant #my_prompt_result,
#kctai.ai-assistant #my_prompt_result.has-content {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#kctai.ai-assistant #outputId:empty {
    display: none !important;
}

#kctai.ai-assistant #my_prompt_result .message-box,
#kctai.ai-assistant .message-box {
    box-sizing: border-box !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(760px, 72%) !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

#kctai.ai-assistant #my_prompt_result .message-box.right,
#kctai.ai-assistant .message-box.right {
    align-self: flex-end !important;
}

#kctai.ai-assistant #my_prompt_result .message-box.left,
#kctai.ai-assistant .message-box.left {
    align-self: flex-start !important;
}

#kctai.ai-assistant #my_prompt_result .message-box.left > *,
#kctai.ai-assistant .message-box.left > * {
    max-width: 100% !important;
}

#kctai.ai-assistant:has(#my_prompt_result.has-content) > .aikct-copilot-main,
#kctai.ai-assistant.is-chat-open > .aikct-copilot-main {
    display: block !important;
    padding: 10px 12px !important;
}

#kctai.ai-assistant:has(#my_prompt_result.has-content) .aikct-copilot-workspace,
#kctai.ai-assistant:has(#my_prompt_result.has-content) .aikct_workspace_thread,
#kctai.ai-assistant.is-chat-open .aikct-copilot-workspace,
#kctai.ai-assistant.is-chat-open .aikct_workspace_thread {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
}

/* AIKCT stop legacy grid from shrinking the chat column */
#kctai.ai-assistant.is-chat-open > .aikct-copilot-main,
#kctai.ai-assistant:has(#my_prompt_result.has-content) > .aikct-copilot-main,
#kctai.ai-assistant > .aikct-copilot-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

#kctai.ai-assistant.is-chat-open .aikct-copilot-workspace,
#kctai.ai-assistant.is-chat-open .aikct_workspace_thread,
#kctai.ai-assistant.is-chat-open .aikct_workspace_thread .aikct_box,
#kctai.ai-assistant:has(#my_prompt_result.has-content) .aikct-copilot-workspace,
#kctai.ai-assistant:has(#my_prompt_result.has-content) .aikct_workspace_thread,
#kctai.ai-assistant:has(#my_prompt_result.has-content) .aikct_workspace_thread .aikct_box,
#kctai.ai-assistant .aikct-copilot-workspace,
#kctai.ai-assistant .aikct_workspace_thread,
#kctai.ai-assistant .aikct_workspace_thread .aikct_box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

#kctai.ai-assistant .aikct_workspace_thread .aikct_box > .content,
#kctai.ai-assistant .aikct_workspace_thread .aikct_box > #outputId,
#kctai.ai-assistant .aikct_workspace_thread .aikct_box > #my_prompt_result,
#kctai.ai-assistant #my_prompt_result,
#kctai.ai-assistant #my_prompt_result.has-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

#kctai.ai-assistant .aikct_workspace_thread .aikct_box > #my_prompt_result.has-content {
    flex: 1 1 auto !important;
}

#kctai.ai-assistant .aikct_workspace_thread .aikct_box > #outputId:empty,
#kctai.ai-assistant .aikct_workspace_thread .aikct_box > #my_prompt_result:empty {
    display: none !important;
}

/* AIKCT new chat action */
#kctai.ai-assistant .aikct-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
}

#kctai.ai-assistant .aikct-new-chat-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 13px !important;
    border: 1px solid #d7e1ee !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #334155 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .06) !important;
}

#kctai.ai-assistant .aikct-new-chat-btn:hover,
#kctai.ai-assistant .aikct-new-chat-btn:focus {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
    opacity: 1 !important;
}

@media (max-width: 640px) {
    #kctai.ai-assistant .aikct-new-chat-btn {
        width: 36px !important;
        padding: 0 !important;
        font-size: 0 !important;
    }

    #kctai.ai-assistant .aikct-new-chat-btn::before {
        content: "+" !important;
        font-size: 20px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 782px) {
  .aikct-custom-openai-grid {
    grid-template-columns: 1fr;
  }

  .aikct-custom-field-wide {
    grid-column: auto;
  }

  .aikct-custom-openai-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* AIKCT viewport centered assistant */
#kctai.ai-assistant:not(.is-aikct-hidden) {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(1120px, calc(100vw - 56px)) !important;
    max-width: calc(100vw - 56px) !important;
    height: min(760px, calc(100vh - 40px)) !important;
    max-height: calc(100vh - 40px) !important;
}

@media (max-width: 782px) {
    #kctai.ai-assistant:not(.is-aikct-hidden) {
        top: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        height: calc(100vh - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }
}