/* Account → AI connections and the "Create an AI chatbot" dialog (js/ai-connections.js) — Xpert Group FZE-LLC. Prefix aic-. Tokens: css/tokens.css. */
.aic-pane { max-width: 860px; }
.aic .wk-field { box-sizing: border-box; margin: 0; max-width: 100%; font-size: 13.5px; }
.aic input.wk-field, .aic select.wk-field { height: 42px; padding-top: 0; padding-bottom: 0; }
.aic select.wk-field { padding-inline-end: 8px; text-overflow: ellipsis; }
.aic.aic-busy { cursor: progress; }
.aic-card { background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: var(--wk-r-panel); padding: var(--wk-s5); display: grid; gap: var(--wk-s3); min-width: 0; }
.aic-cardhead { display: flex; align-items: center; justify-content: space-between; gap: var(--wk-s2); }
.aic-h2 { margin: 0; font-size: var(--wk-fs-lg); font-weight: 600; display: flex; align-items: center; gap: var(--wk-s2); }
.aic-countchip { font-size: var(--wk-fs-xs); font-weight: 600; color: var(--wk-green-700); background: var(--wk-selected); border-radius: var(--wk-r-pill); padding: 1px 9px; }
.aic-countchip:empty { display: none; }
.aic-muted { margin: 0; color: var(--wk-text-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.aic-help { color: var(--wk-text-3); font-size: var(--wk-fs-xs); line-height: 1.4; }
.aic-f { display: grid; gap: 6px; min-width: 0; font-size: 13px; align-content: start; }
.aic-flabel { font-weight: 600; font-size: 12.5px; color: var(--wk-text); }
.aic-flabel, .aic-flabelrow { height: 20px; line-height: 20px; }
.aic-flabelrow { display: flex; align-items: center; justify-content: space-between; gap: var(--wk-s2); min-width: 0; }
.aic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wk-s3); }
.aic-note { margin: 0; font-size: 13px; line-height: 1.45; border-radius: var(--wk-r-btn); padding: 8px 12px; overflow-wrap: anywhere; }
.aic-note[hidden] { display: none; }
.aic-note[data-kind="ok"] { background: var(--wk-selected); color: var(--wk-green-700); }
.aic-note[data-kind="bad"] { background: #fdecea; color: #a52a2a; }
.aic-note[data-kind="wait"] { background: var(--wk-surface-2); color: var(--wk-text-2); }

/* hero: the AI chatbot builder */
.aic-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--wk-s4); padding: var(--wk-s5);
  border-radius: var(--wk-r-panel); color: #fff; background: linear-gradient(120deg, var(--wk-navy) 0%, var(--wk-green-700) 55%, var(--wk-green) 100%); box-shadow: var(--wk-sh-2); }
.aic-heroicon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: var(--wk-lime); }
.aic-heroicon .wk-i { width: 28px; height: 28px; }
.aic-herotext h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: #fff; }
.aic-herotext p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wk-on-navy-2); }
.aic .aic-herocta { background: #fff; color: var(--wk-green-700); white-space: nowrap; }
.aic .aic-herocta:hover { background: var(--wk-selected); }

/* connection cards */
.aic-list { display: grid; gap: var(--wk-s3); }
.aic-conn { border: 1px solid var(--wk-border); border-radius: var(--wk-r-btn); padding: var(--wk-s4); display: grid; gap: var(--wk-s3); background: var(--wk-surface); min-width: 0; }
.aic-connhead { display: flex; align-items: center; gap: var(--wk-s3); min-width: 0; }
.aic-badge { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.aic-conntitle { display: grid; min-width: 0; flex: 1; }
.aic-conntitle b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-conntitle small { color: var(--wk-text-3); font-size: var(--wk-fs-xs); }
.aic-keychip { display: inline-flex; align-items: center; gap: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--wk-text-2); background: var(--wk-surface-2); border: 1px solid var(--wk-border); border-radius: var(--wk-r-pill); padding: 3px 10px; white-space: nowrap; direction: ltr; }
.aic-keychip .wk-i { width: 14px; height: 14px; }
.aic-actions { display: flex; flex-wrap: wrap; gap: var(--wk-s2); }
.aic-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--wk-border-strong); border-radius: var(--wk-r-pill); background: var(--wk-surface); color: var(--wk-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.aic-btn .wk-i { width: 16px; height: 16px; }
.aic-btn:hover { background: var(--wk-hover); } .aic-btn:disabled { opacity: .55; cursor: progress; }
.aic-btn.aic-primary { border-color: var(--wk-selected-line); background: var(--wk-selected); color: var(--wk-green-700); }
.aic-btn.aic-danger { color: var(--wk-error); margin-inline-start: auto; } .aic-btn.aic-danger:hover { background: #fdecea; border-color: #f3c1bc; }
.aic-empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: var(--wk-s6) var(--wk-s4); border: 1px dashed var(--wk-border-strong); border-radius: var(--wk-r-btn); background: var(--wk-surface-2); }
.aic-empty p { margin: 0; max-width: 460px; color: var(--wk-text-2); font-size: 13px; line-height: 1.5; }
.aic-emptyicon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--wk-selected); color: var(--wk-green-700); margin-bottom: 4px; }

/* add form */
.aic-keyslink { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--wk-green-700); text-decoration: none; white-space: nowrap; }
.aic-keyslink:hover { text-decoration: underline; } .aic-keyslink[hidden] { display: none; }
.aic-saverow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wk-s3); }
.aic-saverow .aic-note { flex: 1; min-width: 200px; }

/* dialogs */
.wk-modal.aic-dialog { width: min(560px, 94vw); }
.wk-modal.aic-builder { width: min(680px, 96vw); }
.aic-dialog .wk-mbody { gap: var(--wk-s3); padding: var(--wk-s4); }
.aic-dialog .wk-mfoot { padding: 0 var(--wk-s4) var(--wk-s4); }
.aic-info { margin: 0; display: flex; gap: 8px; align-items: flex-start; background: var(--wk-selected); color: var(--wk-green-700); border-radius: var(--wk-r-btn); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.aic-info .wk-i { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.aic-biz { resize: vertical; min-height: 140px; line-height: 1.5; font-family: inherit; }
.aic-dialog textarea.wk-field { font-family: inherit; resize: vertical; }
.aic-count { color: var(--wk-text-3); font-size: var(--wk-fs-xs); font-variant-numeric: tabular-nums; }
.aic-tones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wk-s2); }
.aic-tone { display: grid; gap: 2px; text-align: start; padding: 10px 12px; border: 1px solid var(--wk-border-strong); border-radius: var(--wk-r-btn); background: var(--wk-surface); color: var(--wk-text); font: inherit; cursor: pointer; min-width: 0; }
.aic-tone b { font-size: 13px; } .aic-tone small { color: var(--wk-text-3); font-size: 11.5px; line-height: 1.35; }
.aic-tone:hover { background: var(--wk-hover); }
.aic-tone[aria-checked="true"] { border-color: var(--wk-green); background: var(--wk-selected); box-shadow: inset 0 0 0 1px var(--wk-green); }
.aic-details { border: 1px solid var(--wk-border); border-radius: var(--wk-r-btn); padding: 8px 12px; background: var(--wk-surface-2); }
.aic-details summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--wk-green-700); }
.aic-prompt { margin: 8px 0 0; max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.5; color: var(--wk-text-2); }
.aic-need { display: grid; justify-items: center; text-align: center; gap: 6px; padding: var(--wk-s2) 0; }
.aic-reply { border-radius: var(--wk-r-btn); padding: 10px 12px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; }
.aic-reply[hidden] { display: none; }
.aic-reply p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .aic-reply small { color: var(--wk-text-3); font-size: var(--wk-fs-xs); }
.aic-reply.ok { background: var(--wk-bubble-out); } .aic-reply.bad { background: #fdecea; color: #a52a2a; } .aic-reply.wait { background: var(--wk-surface-2); color: var(--wk-text-2); }
.wk-cta.aic-dangercta { background: var(--wk-error); }

/* phone width */
@media (max-width: 640px) {
  .aic-hero { grid-template-columns: auto minmax(0, 1fr); padding: var(--wk-s4); }
  .aic-herocta { grid-column: 1 / -1; width: 100%; }
  .aic-grid, .aic-tones { grid-template-columns: 1fr; }
  .aic-card { padding: var(--wk-s4); }
  .aic-connhead { flex-wrap: wrap; } .aic-keychip { order: 3; }
  .aic-btn.aic-danger { margin-inline-start: 0; }
  .aic-save { width: 100%; }
}