/* Aida workspace shell, conversation and composer. */
.aida-app {
    --ink: #25272d;
    --muted: #70747e;
    /* Small secondary text: at least 4.5:1 on white and on the grey panels (the muted grey is for larger text). */
    --quiet: #5f6676;
    --accent: #5755d9;
    --border: #e3e6ee;
    --sidebar-width: 250px;
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}
.aida-app *, .aida-app *::before, .aida-app *::after { box-sizing: border-box; }
.aida-app .app-header {
    height: 68px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 1030;
}
.header-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.aida-brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); font-size: 24px; line-height: 1; font-weight: 750; letter-spacing: -.6px; }
.aida-brand:hover { color: var(--ink); }
.brand-caption { margin-left: 12px; padding-left: 24px; border-left: 1px solid var(--border); font-size: 13px; line-height: 20px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.aida-app #btnSidebarToggle { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.aida-app #btnSidebarToggle:hover { color: var(--accent); background: #eeeffb; }
.aida-app #btnSidebarToggle:focus-visible, .aida-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.aida-app .logout-btn { border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--muted); font-size: 13px; padding: 8px 12px; }
.aida-app .app-header a.text-white { color: var(--muted) !important; }
.aida-app .main-with-header { padding: 0; }
.aida-app .sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    height: calc(100dvh - 68px);
    min-height: 0;
    background: #f7f7f9;
    border-right: 1px solid var(--border);
    position: relative;
    padding: 23px 12px 140px;
}
.aida-app #chat-sidebar { max-height: 100%; overflow-y: auto; }
.aida-app .sidebar .text-white, .aida-app .sidebar .text-info { color: var(--ink) !important; }
.aida-app .sidebar .accordion-button { padding: 12px; color: #81899a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.3px; box-shadow: none; background: none; }
.aida-app .sidebar .accordion-button::after { filter: brightness(.45); background-size: 12px; width: 12px; height: 12px; }
.aida-app .sidebar .accordion-button i { display: none; }
.aida-app .sidebar .accordion-item { border: 0; background: none; }
.aida-app .sidebar .app-link { border: 0; border-radius: 10px; padding: 0 9px 0 12px; margin: 3px 0; color: #586277; min-height: 46px; gap: 4px; }
.aida-app .sidebar .app-link a { display: flex; align-items: center; flex: 1; min-width: 0; padding: 12px 0; color: inherit; font-weight: 500; font-size: 13px; }
.aida-app .sidebar .app-link a i { color: #8790a4; }
.aida-app .sidebar .app-link:hover { background: #e9ecf4; }
.aida-app .sidebar .app-link.is-current { background: #e5e5fb; color: #4542b8; }
.aida-app .sidebar .app-link.is-current a i { color: var(--accent); }
.aida-app .sidebar .app-link button { color: #8790a4; border: none; padding: 5px; opacity: .4; }
.aida-app .sidebar .app-link:hover button, .aida-app .sidebar .app-link button:focus-visible { opacity: 1; }
.aida-app .main-content-area { flex: 1; min-width: 0; height: calc(100dvh - 68px); background: #fff; }
.chat-workspace { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.chat-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 32px; flex-shrink: 0; }
.workspace-eyebrow { display: block; color: var(--quiet); font-size: 10px; font-weight: 650; letter-spacing: 1.4px; margin-bottom: 5px; }
.chat-heading h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.5px; }
.workspace-actions { display: flex; gap: 7px; }
.quiet-button, .icon-button { background: transparent; border: 1px solid transparent; border-radius: 8px; color: #697386; cursor: pointer; }
.quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 11px; font-size: 12px; white-space: nowrap; }
.quiet-button:hover, .icon-button:hover { color: var(--accent); background: #eeeffb; }
.workspace-actions .quiet-button { background: #fff; border-color: var(--border); }
.icon-button { width: 30px; height: 30px; font-size: 13px; }
.aida-app button:focus-visible, .aida-app a:focus-visible, .aida-app summary:focus-visible, .aida-app select:focus-visible, .aida-app input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.messageContainer { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 15px 38px 32px; scrollbar-width: thin; scrollbar-color: #d1d6e3 transparent; }
.conversation-content { max-width: 800px; margin: 0 auto; width: 100%; }
.messageContainer.empty { display: flex; align-items: flex-start; justify-content: center; padding-top: 30px; }
/* Centred while it fits; taller than the window (pinned charts), it starts at the top so all of it can be scrolled to. */
.messageContainer.empty > .conversation-content { margin: auto; }
.empty-state { text-align: center; padding: 18px 0 38px; }
.welcome-symbol { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 26px; color: var(--accent); background: #edecff; border: 1px solid #e3e1fc; border-radius: 22px; font-size: 25px; transform: rotate(-4deg); }
.welcome-symbol i { transform: rotate(4deg); }
.welcome-eyebrow { font-size: 10px; font-weight: 650; letter-spacing: 2px; color: #9399aa; margin-bottom: 12px; }
.empty-state h2 { font-size: clamp(25px, 2.5vw, 37px); line-height: 1.2; font-weight: 600; letter-spacing: -1.3px; margin-bottom: 16px; color: #242b3e; }
.welcome-description { color: #7c8496; font-size: 14px; line-height: 1.8; margin: 0 auto 32px; }
.starter-prompts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 760px; margin: 0 auto; }
.starter-prompts button { text-align: left; border: 1px solid var(--border); background: #fff; padding: 18px; border-radius: 14px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.starter-prompts button:hover { border-color: #bcbaf0; box-shadow: 0 5px 20px #343a6810; }
.starter-prompts i { display: block; color: #7772c9; font-size: 16px; margin-bottom: 16px; }
.starter-prompts strong { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.starter-prompts span { display: block; font-size: 12px; color: var(--quiet); }
.composer-area { width: 100%; max-width: 876px; padding: 10px 38px 18px; margin: 0 auto; flex-shrink: 0; }
.chat-shell { padding: 10px 14px 0; background: #fff; border: 1px solid #dce0eb; border-radius: 20px; box-shadow: 0 2px 12px #26365a06; }
.chat-shell:focus-within { border-color: #adabe8; box-shadow: 0 0 0 3px #5855d90a; }
.chat-shell.is-dropping { border-color: var(--accent); border-style: dashed; box-shadow: 0 0 0 4px #5855d91f; }
.chat-input { display: block; width: 100%; min-height: 42px; max-height: 160px; resize: none; background: transparent; color: var(--ink); border: 0; outline: 0; padding: 6px 3px; font-size: 15px; line-height: 1.65; }
.chat-input::placeholder { color: #9299a9; }
.composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0 10px; }
.composer-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.format-control { display: flex; align-items: center; gap: 7px; padding: 5px 8px; background: #f5f6fa; border-radius: 8px; color: #788295; font-size: 12px; }
.format-control select { border: 0; background: transparent; color: #5e687d; font-size: 12px; max-width: 145px; padding: 3px 2px; cursor: pointer; }
#sendBtn { display: grid; place-items: center; flex-shrink: 0; width: 39px; height: 39px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-size: 16px; cursor: pointer; }
#sendBtn:hover { background: #4542bd; }
#sendBtn:disabled { opacity: .5; cursor: wait; }
.report-options { border-top: 1px solid #eef0f5; }
.report-options summary { font-size: 11px; color: #7b8497; padding: 11px 2px; cursor: pointer; list-style: none; }
.report-options summary::-webkit-details-marker { display: none; }
.report-options summary > i { margin-right: 6px; }
.report-options summary::after { content: '+'; float: right; font-size: 16px; line-height: 16px; }
.report-options[open] summary::after { content: '−'; }
.options-hint { margin-left: 10px; color: #9299a9; font-size: 10px; }
.report-options-body { padding: 8px 2px 14px; max-height: min(42dvh, 340px); overflow-y: auto; }
.report-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.report-fields .field-wide { grid-column: 1 / -1; }
.report-fields label { font-size: 12px; color: #596478; margin-bottom: 6px; }
.report-fields label span { color: #939aab; font-size: 11px; }
.report-fields .form-control { font-size: 13px; padding: 9px 10px; border-color: #dfe3ed; border-radius: 8px; }
.report-fields .form-control::placeholder { color: #9da5b3; }
.field-help { color: var(--quiet); font-size: 12px; line-height: 1.6; margin: 10px 0 0; }
.composer-caption { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--quiet); margin: 10px 4px 0; }
.bubble { position: relative; max-width: 100%; margin: 12px 0 24px; padding: 16px 19px; line-height: 1.75; font-size: 14px; overflow-wrap: anywhere; }
.bubble-user { background: #f1f1f4; color: #30323a; border-radius: 16px 16px 4px 16px; max-width: 85%; }
.bubble-bot { color: var(--ink); background: transparent; border: 0; border-radius: 0; min-width: 100px; padding-left: 0; padding-right: 0; }
.bubble-bot h1, .bubble-bot h2 { font-size: 20px; line-height: 1.4; font-weight: 650; margin: 24px 0 12px; }
.bubble-bot h3 { font-size: 16px; line-height: 1.5; font-weight: 650; margin: 20px 0 10px; }
.bubble-bot > :first-child { margin-top: 0; }
.bubble p:last-child { margin-bottom: 0; }
.bubble table { display: block; max-width: 100%; overflow-x: auto; font-size: 13px; }
.bubble th, .bubble td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.bubble th { background: #f5f6fa; white-space: nowrap; }
.bubble pre { max-width: 100%; overflow-x: auto; background: #f1f3f8; padding: 14px; border-radius: 9px; }
.bubble-edit, .bubble-save { position: absolute; bottom: -14px; right: 5px; width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid #dde0ee; border-radius: 8px; color: #7d789f; background: #fff; font-size: 11px; }
.bubble-edit { right: 39px; }
.aida-app .think-text { color: var(--quiet); font-size: 13px; font-style: normal; }
.aida-app .think-wrap .dot { background: #8b84d9; }
.aida-app .modal-content { border: 1px solid var(--border); border-radius: 16px; color: var(--ink); box-shadow: 0 18px 70px #18203920; }
.aida-app .modal-header, .aida-app .modal-footer { border-color: #eef0f5; padding: 18px 22px; }
.aida-app .modal-body { padding: 22px; }
.aida-app .modal-title { font-weight: 600; font-size: 18px; }
.aida-app .modal .btn-primary { background: var(--accent); border-color: var(--accent); }
.aida-app .modal .form-control, .aida-app .modal .form-select { border-color: #dce1ec; border-radius: 8px; }
.aida-app .modal .form-label { font-size: 13px; color: #657086; }
.aida-app .sidebar-backdrop { display: none; }
@media (min-width: 831px) {
    .aida-app.sidebar-collapsed #appSidebar { display: none; }
}
@media (max-width: 1050px) {
    .aida-app { --sidebar-width: 220px; }
    .chat-heading { padding: 22px 24px 16px; }
    .messageContainer { padding-left: 24px; padding-right: 24px; }
    .composer-area { padding-left: 24px; padding-right: 24px; }
    .starter-prompts { gap: 8px; }
    .starter-prompts button { padding: 14px; }
}
@media (max-width: 830px) {
    .aida-app .app-header { height: 60px; padding: 0 16px !important; }
    .brand-caption { display: none; }
    .aida-app .sidebar { position: fixed; top: 60px; bottom: 0; left: 0; height: calc(100dvh - 60px); width: 270px; transform: translateX(-100%); z-index: 1045; }
    .aida-app .sidebar.show { transform: translateX(0); }
    .aida-app.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 60px 0 0; background: #1b233c66; z-index: 1040; }
    .aida-app .main-content-area { height: calc(100dvh - 60px); width: 100%; }
    .aida-app .logout-btn.d-block { bottom: 80px !important; }
    .chat-heading { padding: 14px 18px; }
    .workspace-actions .quiet-button { min-width: 38px; min-height: 38px; padding: 9px; }
    .workspace-actions span { display: none; }
    .workspace-actions #showSaved::after { content: ''; }
    .workspace-eyebrow { font-size: 9px; }
    .chat-heading h1 { font-size: 19px; }
    .chat-input { font-size: 18px; }
    .welcome-description { font-size: 13px; }
    .starter-prompts { max-width: 600px; }
    .composer-caption span:last-child { display: none; }
}
@media (max-width: 520px) {
    .messageContainer { padding: 8px 18px 20px; }
    .messageContainer.empty { align-items: flex-start; padding-top: 16px; }
    .messageContainer.empty > .conversation-content { margin-top: 0; }
    .empty-state { padding-bottom: 0; }
    .welcome-symbol { width: 48px; height: 48px; border-radius: 16px; font-size: 19px; margin-bottom: 20px; }
    .welcome-eyebrow { font-size: 10px; letter-spacing: 1.4px; }
    .empty-state h2 { font-size: 27px; letter-spacing: -.8px; }
    .welcome-description { font-size: 12px; margin-bottom: 23px; }
    .welcome-description br { display: none; }
    .starter-prompts { grid-template-columns: 1fr; gap: 8px; }
    .starter-prompts button { padding: 12px 14px; display: grid; grid-template-columns: 28px 1fr; align-items: center; text-align: left; }
    .starter-prompts i { grid-row: 1 / 3; margin: 0; font-size: 14px; }
    .starter-prompts strong { font-size: 11px; margin-bottom: 2px; }
    .starter-prompts span { font-size: 11px; }
    .composer-area { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
    .chat-shell { border-radius: 20px; padding: 8px 12px 0; }
    .composer-tools { gap: 4px; }
    .composer-tools .quiet-button { padding: 8px; }
    .composer-tools .quiet-button span { display: none; }
    .report-fields { grid-template-columns: 1fr; }
    .options-hint { display: none; }
    .report-options-body { max-height: 28dvh; }
    .bubble { font-size: 15px; padding: 12px 14px; }
    .bubble-bot { padding-left: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .aida-app *, .aida-app *::before, .aida-app *::after { animation: none !important; transition: none !important; }
}

.attachment-tray { max-height: 130px; overflow-y: auto; }
.attachment-tray:has(.attachment-chip, .attachment-earlier) { padding-bottom: 12px; }
.attachment-tray .field-help:empty { display: none; }
.attachment-tray .field-help { margin: 0 0 10px; }
#aidaFiles { display: flex; flex-wrap: wrap; gap: 7px; }
.attachment-chip { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; border: 1px solid #dedff1; background: #f6f5ff; border-radius: 10px; padding: 8px 10px; color: #565577; font-size: 12px; }
.attachment-name { min-width: 0; overflow-wrap: anywhere; }
.attachment-earlier { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; color: var(--muted, #6b6d78); font-size: 12px; }
.attachment-stop { border: 0; background: transparent; padding: 0; color: var(--accent); font-size: 12px; text-decoration: underline; }
/* Files a question was asked with, above it (as in other chat apps). */
.message-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-bottom: 6px; max-width: 100%; }
.message-file { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid #dedff1; background: #f6f5ff; border-radius: 10px;
    padding: 7px 10px; color: #48476a; font-size: 12.5px; }
.message-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-file i { color: var(--accent); }
.message-file.is-gone { opacity: .6; text-decoration: line-through; }
.attachment-problem { display: block; margin-top: 2px; color: #ad3043; }
.attachment-delete { border: 0; background: transparent; color: #77778e; font-size: 20px; line-height: 1; padding: 2px 4px; }
.attachment-delete:hover { color: #ad3043; }

/* Saved light / dark / system appearance. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; background: #191a1e; }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
html[data-theme="dark"] .aida-app { --ink: #ececef; --muted: #a3a5af; --quiet: #a7aab5; --accent: #aaa2ff; --border: #393a40; background: #191a1e; }
/* Dark: text that inherits its colour (page titles, headings, labels, facts) follows the theme, not Bootstrap's near-black. */
html[data-theme="dark"] .aida-app { --bs-body-color: var(--ink); --bs-body-bg: #191a1e; color: var(--ink); }
html[data-theme="dark"] .aida-app .form-check-input { background-color: #202125; border-color: #5a5c66; }
html[data-theme="dark"] .aida-app .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] .aida-app .form-check-input:checked[type=checkbox] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23191525' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .aida-app .form-check-input:checked[type=radio] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23191525'/%3e%3c/svg%3e"); }
/* Switches: AIDA's colour when on; in dark, a knob that shows when off and a knob (not a checkbox's tick) when on. */
.aida-app .form-switch .form-check-input:checked { border-color: var(--accent); background-color: var(--accent); }
html[data-theme="dark"] .aida-app .form-switch .form-check-input { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a3a5af'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .aida-app .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23191525'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .aida-app .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(170, 162, 255, .25); }
html[data-theme="dark"] .aida-app .alert-warning { border-color: #5c4718; background: #3d2f14; color: #f2c46d; }
html[data-theme="dark"] .aida-app .alert-info { border-color: #4b4775; background: #2a2838; color: #d5ceff; }
html[data-theme="dark"] .aida-app .btn-outline-danger { border-color: #7a3540; color: #ffb3c0; }
html[data-theme="dark"] .aida-app .btn-outline-danger:hover { border-color: #ff8fa3; background: #3a1f25; color: #ffd0d8; }
html[data-theme="dark"] .aida-app .btn-link { color: var(--accent); }
html[data-theme="dark"] .aida-app .text-danger { color: #ff8fa3 !important; }
/* Bootstrap 5.1 hard-codes link blue and code pink for light pages; :where keeps these below every component's own colours. */
html[data-theme="dark"] :where(a:not(.btn, .dropdown-item, .nav-link)) { color: #b9b3ff; }
html[data-theme="dark"] :where(a:not(.btn, .dropdown-item, .nav-link)):hover { color: #d5ceff; }
html[data-theme="dark"] :where(code) { color: #f2a2c8; }
/* Dark: every menu on the dark surface (each menu's own rules add its layout and its chosen item's colours). */
html[data-theme="dark"] .dropdown-menu { border-color: var(--border); background: #242529; color: var(--ink); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .dropdown-item-text { color: var(--ink); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: #34304e; color: var(--ink); }
html[data-theme="dark"] .dropdown-header { color: var(--quiet); }
html[data-theme="dark"] .dropdown-divider { border-top-color: var(--border); }
html[data-theme="dark"] .aida-app .input-group-text { border-color: var(--border); background: #2c2d33; color: var(--muted); }
html[data-theme="dark"] .aida-app .messageContainer { scrollbar-color: #3a3b42 transparent; }
html[data-theme="dark"] .aida-app .app-header,
html[data-theme="dark"] .chat-shell,
html[data-theme="dark"] .starter-prompts button,
html[data-theme="dark"] .workspace-actions .quiet-button,
html[data-theme="dark"] .aida-app .modal-content,
html[data-theme="dark"] .aida-app .card,
html[data-theme="dark"] .aida-app .logout-btn { background: #242529; color: var(--ink); border-color: var(--border); }
html[data-theme="dark"] .aida-app .main-content-area { background: #191a1e; }
html[data-theme="dark"] .aida-app .sidebar { background: #151619; }
html[data-theme="dark"] .aida-app .sidebar .app-link { color: #b2bbd0; }
html[data-theme="dark"] .aida-app .sidebar .app-link.is-current,
html[data-theme="dark"] .bubble-user { background: #303137; color: #ececef; }
html[data-theme="dark"] .aida-app .sidebar .app-link:hover { background: #2a2b31; }
html[data-theme="dark"] .aida-app .sidebar .accordion-button::after { filter: brightness(2); }
html[data-theme="dark"] .quiet-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .format-control,
html[data-theme="dark"] .format-control select,
html[data-theme="dark"] .report-options summary,
html[data-theme="dark"] .report-fields label,
html[data-theme="dark"] .aida-app .modal .form-label { color: #b6bdd0; }
html[data-theme="dark"] .quiet-button:hover,
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .aida-app #btnSidebarToggle:hover { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .format-control,
html[data-theme="dark"] .bubble th,
html[data-theme="dark"] .bubble pre { background: #2c2d33; }
html[data-theme="dark"] .report-options { border-color: var(--border); }
html[data-theme="dark"] .aida-app .form-control,
html[data-theme="dark"] .aida-app .form-select,
html[data-theme="dark"] .aida-app .list-group-item { background: #202125; color: var(--ink); border-color: var(--border); }
html[data-theme="dark"] .aida-app .form-control::placeholder,
html[data-theme="dark"] .chat-input::placeholder { color: #929bb2; }
html[data-theme="dark"] .attachment-chip,
html[data-theme="dark"] .bubble-edit,
html[data-theme="dark"] .bubble-save { background: #292a30; color: #d7d8df; border-color: #44454d; }
html[data-theme="dark"] .attachment-delete { color: #c2bdd8; }
html[data-theme="dark"] .attachment-problem { color: #ff8fa3; }
html[data-theme="dark"] .message-file { background: #292a30; color: #d7d8df; border-color: #44454d; }
html[data-theme="dark"] #sendBtn,
html[data-theme="dark"] .aida-app .modal .btn-primary { color: #191525; background: #aaa2ff; border-color: #aaa2ff; }
html[data-theme="dark"] #sendBtn:hover { background: #c0baff; }
html[data-theme="dark"] .aida-app .text-muted { color: #a8afc2 !important; }
html[data-theme="dark"] .aida-app .btn-close { filter: invert(1) grayscale(1) brightness(2); }
html[data-theme="dark"] .bubble a { color: #bcb5ff; }
html[data-theme="dark"] .aida-app .modal-header,
html[data-theme="dark"] .aida-app .modal-footer { border-color: var(--border); }
@media (max-width: 1050px) { .brand-caption { display: none; } }
@media (max-width: 520px) {
    .header-identity { gap: 7px; }
    .header-actions { gap: 8px; }
}
.admin-settings-menu > button { border-color: var(--border); }
.admin-settings-menu .dropdown-menu { border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px #16203818; }
.admin-settings-menu .dropdown-item { border-radius: 6px; padding: 9px 12px; font-size: 13px; }
html[data-theme="dark"] .admin-settings-menu .dropdown-menu { background: #242529; }
html[data-theme="dark"] .admin-settings-menu .dropdown-item { color: var(--ink); }
html[data-theme="dark"] .admin-settings-menu .dropdown-item:hover,
html[data-theme="dark"] .admin-settings-menu .dropdown-item:focus { background: #34304e; }
@media(max-width:520px) { .admin-settings-menu .settings-label { display: none; } }

/* Keep the conversation dominant and the mobile composer compact. */
.chat-workspace [hidden] { display: none !important; }
.bubble-user { width: fit-content; }
.bubble-bot { width: 100%; }
.report-options[open] { margin-top: 4px; }
.attachment-chip { background: transparent; border-color: var(--border); }
html[data-theme="dark"] .bubble-bot { background: transparent; }
html[data-theme="dark"] .empty-state h2 { color: var(--ink); }
html[data-theme="dark"] .welcome-symbol { color: var(--accent); background: #2b293a; border-color: #3a374e; }
html[data-theme="dark"] .bubble th { color: var(--ink); }
html[data-theme="dark"] .bubble pre { color: var(--ink); }
/* Bootstrap 5.1 sets both the table colour and striped-row colour explicitly. */
.aida-app .bubble .table {
    color: var(--ink);
    border-color: var(--border);
    --bs-table-color: var(--ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-striped-color: var(--ink);
    --bs-table-active-color: var(--ink);
    --bs-table-hover-color: var(--ink);
}
.aida-app .bubble .table > :not(caption) > * > * { padding: 10px 14px; }
html[data-theme="dark"] .aida-app .bubble .table {
    --bs-table-striped-bg: rgba(255, 255, 255, .035);
    --bs-table-active-bg: rgba(255, 255, 255, .08);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
}
@media (max-width: 520px) {
    .workspace-eyebrow { display: none; }
    .chat-heading { gap: 8px; }
    .chat-heading h1 { font-size: 17px; }
    .composer-caption { margin-top: 7px; font-size: 10px; }
    .composer-toolbar .quiet-button { min-width: 40px; min-height: 40px; }
    .format-control { min-height: 38px; background: transparent; }
    .chat-input { line-height: 1.5; }
}
/* iOS zooms the page into any field whose text is under 16px, so fields get 18px on touch screens. */
@media (pointer: coarse) {
    .aida-app input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], .otp-input),
    .aida-app select,
    .aida-app textarea { font-size: 18px !important; }
}

/* Conversations listed under the current workspace. */
.aida-app .conversation-list { margin: 2px 0 10px 14px; padding-left: 10px; border-left: 1px solid var(--border); }
.aida-app .conversation-new { display: flex; align-items: center; width: 100%; border: 0; border-radius: 8px; background: transparent; color: var(--accent); padding: 8px 10px; font-size: 12px; font-weight: 600; text-align: left; }
.aida-app .conversation-new:hover { background: #eeeffb; }
.aida-app .conversation-item { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.aida-app .conversation-item a { flex: 1; min-width: 0; padding: 7px 10px; color: #5d6577; font-size: 12px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aida-app .conversation-item:hover { background: #e9ecf4; }
.aida-app .conversation-item.is-current { background: #ecebfc; }
.aida-app .conversation-item.is-current a { color: #4542b8; font-weight: 600; }
.aida-app .conversation-item button { border: 0; background: transparent; color: #8790a4; padding: 4px 7px; font-size: 10px; opacity: 0; }
.aida-app .conversation-item:hover button, .aida-app .conversation-item button:focus-visible, .aida-app .conversation-item.is-current button { opacity: 1; }
@media (hover: none) { .aida-app .conversation-item button { opacity: 1; } }

/* Answer tools, the "How I got this" note, and progress with Stop. */
.answer { width: 100%; min-width: 0; margin-bottom: 18px; }
.answer .bubble-bot { margin-bottom: 6px; }
.answer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.answer-action { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; background: transparent; color: var(--quiet); padding: 6px 8px; font-size: 12px; cursor: pointer; text-decoration: none; }
.answer-action:hover { background: #eeeffb; color: var(--accent); }
.answer-action[aria-pressed="true"] { color: var(--accent); }
.answer-status { margin-left: 8px; color: var(--muted); font-size: 12px; }
.answer-feedback { max-width: 520px; margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.answer-feedback .form-label { color: #657086; font-size: 12px; }
.answer-feedback .form-label span { color: #939aab; }
.answer-feedback .form-control { border-color: #dce1ec; border-radius: 8px; font-size: 13px; }
.answer-feedback-buttons { display: flex; gap: 6px; margin-top: 8px; }
.answer-feedback .btn-primary { background: var(--accent); border-color: var(--accent); }
.bubble-bot blockquote { margin: 0 0 18px; padding: 9px 14px; border-left: 3px solid #c9c6f5; border-radius: 0 10px 10px 0; background: #f7f7fd; color: #5d6577; font-size: 13px; line-height: 1.6; }
.bubble-bot blockquote p { margin: 0; }
.thinking-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 18px; }
.think-elapsed { color: var(--quiet); font-size: 12px; font-variant-numeric: tabular-nums; }
.stop-button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: #5d6577; padding: 6px 12px; font-size: 12px; }
.stop-button:hover:not(:disabled) { border-color: #e4b3bb; color: #ad3043; }
.stop-button:disabled { opacity: .5; }
html[data-theme="dark"] .aida-app .conversation-item a { color: #b2bbd0; }
html[data-theme="dark"] .aida-app .conversation-item:hover { background: #2a2b31; }
html[data-theme="dark"] .aida-app .conversation-item.is-current { background: #303137; }
html[data-theme="dark"] .aida-app .conversation-item.is-current a { color: #d5ceff; }
html[data-theme="dark"] .aida-app .conversation-new:hover,
html[data-theme="dark"] .answer-action:hover { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .answer-action { color: #a3a8b8; }
html[data-theme="dark"] .answer-action[aria-pressed="true"] { color: var(--accent); }
html[data-theme="dark"] .bubble-bot blockquote { background: #232330; border-color: #4b4775; color: #c3c6d2; }
html[data-theme="dark"] .stop-button { background: #242529; color: var(--ink); }
html[data-theme="dark"] .answer-feedback .form-label { color: #b6bdd0; }
html[data-theme="dark"] .answer-feedback .btn-primary { color: #191525; background: #aaa2ff; border-color: #aaa2ff; }
/* Bootstrap 5.1 gives tables a fixed dark text colour; keep modal tables (saved questions) readable in dark mode. */
html[data-theme="dark"] .aida-app .modal .table { color: var(--ink); border-color: var(--border); --bs-table-striped-color: var(--ink); --bs-table-active-color: var(--ink); --bs-table-hover-color: var(--ink); }
/* Tables scroll sideways, so keep words in cells whole instead of breaking "Supplier" mid-word. */
.bubble th, .bubble td { overflow-wrap: normal; }

/* Answer format menu (replaces the unstyled native select). */
.format-control, html[data-theme="dark"] .format-control { padding: 0; background: transparent; }
.format-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; background: #f5f6fa; color: #5e687d; padding: 7px 10px; font-size: 12px; cursor: pointer; }
.format-button:hover, .format-button[aria-expanded="true"] { background: #eeeffb; color: var(--accent); }
.format-button.is-file { background: #edecff; border-color: #d9d6fb; color: #4542b8; font-weight: 600; }
.format-chevron { font-size: 9px; opacity: .7; transition: transform .15s; }
.format-button[aria-expanded="true"] .format-chevron { transform: rotate(180deg); }
.format-menu { width: 300px; max-width: calc(100vw - 32px); max-height: min(640px, calc(100dvh - 150px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px #16203822; }
.format-menu-heading { margin: 8px 10px 4px; color: #9399aa; font-size: 10px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; }
.format-menu .dropdown-item { display: grid; grid-template-columns: 22px 1fr 14px; align-items: center; gap: 10px; border-radius: 9px; padding: 9px 10px; color: var(--ink); white-space: normal; }
.format-menu .dropdown-item > i:first-child { color: #7772c9; font-size: 15px; text-align: center; }
.format-menu .dropdown-item strong { display: block; font-size: 13px; font-weight: 600; }
.format-menu .dropdown-item small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.format-menu .dropdown-item:hover, .format-menu .dropdown-item:focus { background: #f1f0fd; color: var(--ink); }
.format-menu [aria-checked="true"] { background: #f4f3fe; }
/* Files in this chat (header panel). */
.files-control .files-count { min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #edecff; color: #4542b8; font-size: 10.5px; font-weight: 650; }
.files-menu { width: 340px; }
.files-menu-head { display: flex; align-items: center; justify-content: space-between; padding-right: 4px; }
.files-menu-head .icon-button { width: 28px; height: 28px; }
.files-empty { margin: 4px 10px 10px; color: var(--muted); font-size: 12px; }
.files-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border-radius: 9px; padding: 7px 8px 7px 10px; }
.files-row:hover { background: #f6f5fe; }
.files-row > i { color: #7772c9; font-size: 15px; text-align: center; }
.files-text strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink); }
.files-text small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.files-row.is-used .files-text small { color: var(--accent); }
.files-use { border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--accent); font-size: 11.5px; padding: 3px 9px; }
.files-use:hover { background: #eeeffb; }
html[data-theme="dark"] .files-row:hover { background: #2c2d33; }
html[data-theme="dark"] .files-control .files-count { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .files-use:hover { background: #34304e; }
.format-check { visibility: hidden; color: var(--accent); font-size: 11px; }
.format-menu [aria-checked="true"] .format-check { visibility: visible; }
html[data-theme="dark"] .format-button { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .format-button:hover,
html[data-theme="dark"] .format-button[aria-expanded="true"] { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .format-button.is-file { background: #34304e; border-color: #4b4775; color: #d5ceff; }
html[data-theme="dark"] .format-menu { background: #242529; }
html[data-theme="dark"] .format-menu .dropdown-item:hover,
html[data-theme="dark"] .format-menu .dropdown-item:focus,
html[data-theme="dark"] .format-menu [aria-checked="true"] { background: #34304e; color: var(--ink); }
html[data-theme="dark"] .format-menu .dropdown-item > i:first-child { color: #aaa2ff; }

/* Administration (Settings > Users & companies, Apps). */
.admin-page { height: 100%; overflow-y: auto; padding: 22px 32px 56px; }
.admin-inner { max-width: 1040px; margin: 0 auto; }
.admin-header h1 { margin: 0 0 14px; font-size: 22px; font-weight: 650; letter-spacing: -.5px; }
.admin-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.admin-tabs a { margin-bottom: -1px; padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.admin-tabs a:hover { color: var(--accent); }
.admin-tabs a.active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.admin-alert { border-radius: 10px; font-size: 13px; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-search { position: relative; flex: 1; max-width: 360px; }
.admin-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9399aa; font-size: 13px; }
.admin-search .form-control { padding-left: 34px; border-color: #dce1ec; border-radius: 9px; font-size: 13px; }
.admin-card { border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.admin-card.table-responsive { overflow-x: auto; }
.admin-table { --bs-table-bg: transparent; margin: 0; font-size: 13px; }
.admin-table th { padding: 11px 16px; background: #f7f7f9; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; }
.admin-table td { padding: 12px 16px; border-color: #eef0f5; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: #fafafe; }
.admin-table a { color: var(--ink); font-weight: 600; text-decoration: none; }
.admin-table a:hover { color: var(--accent); }
.admin-empty { padding: 28px 16px !important; color: var(--muted); text-align: center; }
.admin-badge { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.admin-badge.ok { background: #e3f5ea; color: #1d7a45; }
.admin-badge.off { background: #eef0f4; color: var(--quiet); }
.admin-badge.wait { background: #fdf1dc; color: #9a5b00; }
.admin-badge.info { background: #edecff; color: #4542b8; }
.admin-back { display: inline-flex; gap: 6px; margin-bottom: 8px; color: var(--muted); font-size: 13px; text-decoration: none; }
.admin-back:hover { color: var(--accent); }
.admin-title { margin: 0 0 16px; font-size: 20px; font-weight: 650; }
.admin-form { padding: 22px; }
.admin-form .form-label { color: #596478; font-size: 13px; }
.admin-form .form-control { border-color: #dce1ec; border-radius: 8px; }
.admin-section-title { margin: 26px 0 10px; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: 1px; text-transform: uppercase; }
.admin-help { color: var(--muted); font-size: 12px; }
.admin-static { margin: 8px 0 0; }
.admin-switches, .admin-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.admin-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.admin-check:hover { border-color: #c9c6f5; }
.admin-check:has(input:checked) { border-color: #c9c6f5; background: #f7f7fd; }
.admin-check input { flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); }
.admin-check strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
.admin-check small { display: block; color: var(--muted); font-size: 11px; }
.admin-note { margin: 20px 0 0; padding: 10px 14px; border-radius: 10px; background: #f4f3fe; color: #4f4b8f; font-size: 12px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
/* The save bar: a form's own buttons, which follow the page (stuck to the bottom of the scrolling panel) while something
   is unsaved, and say so. */
.save-bar { align-items: center; }
.save-bar-status { display: none; align-items: center; gap: 8px; margin-right: auto; color: var(--ink); font-size: 13px; font-weight: 600; }
.save-bar-status i { color: var(--accent); }
.save-bar.is-dirty { position: sticky; bottom: 0; z-index: 20; margin-left: -22px; margin-right: -22px; margin-bottom: -22px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); border-radius: 0 0 13px 13px; background: #fff; box-shadow: 0 -12px 24px -20px #16203866; }
.save-bar.is-dirty .save-bar-status { display: inline-flex; }
html[data-theme="dark"] .save-bar.is-dirty { background: #202125; box-shadow: 0 -12px 24px -20px #000c; }
@media (max-width: 830px) {
    .save-bar.is-dirty { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
    .save-bar.is-dirty .save-bar-status { flex-basis: 100%; }
}
/* A server error shown beside the field (or the part of the form) it's about. */
.field-error-message { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: #b4233b; font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.field-error-message i { margin-top: 1px; }
[data-error-for].has-error > .field-error-message { margin: 0 0 10px; }
.admin-form .form-control.is-invalid, .admin-form .form-select.is-invalid { border-color: #c2334b; }
html[data-theme="dark"] .field-error-message { color: #ff8fa3; }
html[data-theme="dark"] .admin-form .form-control.is-invalid, html[data-theme="dark"] .admin-form .form-select.is-invalid { border-color: #ff8fa3; }
/* AIDA's own question dialog (leave without saving, discard changes): the delete dialog's look, in amber. */
/* A "done" message (_Notice): the toast's look, with a close button. */
.settings-toast.admin-notice { display: flex; align-items: center; gap: 10px; padding-right: 8px; }
.settings-toast.admin-notice.show { pointer-events: auto; }
.admin-notice-close { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .75; }
.admin-notice-close:hover { opacity: 1; background: #ffffff1f; }
.admin-delete-type { margin-top: 14px; }
.admin-delete-type .form-label { font-size: 13px; }
.user-devices { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--quiet); font-size: 11.5px; white-space: nowrap; }
.admin-ask .admin-delete-icon { background: #fdf1dc; color: #9a5b00; }
.admin-ask.is-danger .admin-delete-icon { background: #fdecee; color: #b4233b; }
.admin-ask-text { margin: 0; line-height: 1.55; }
html[data-theme="dark"] .admin-ask .admin-delete-icon { background: #3d2f14; color: #f2c46d; }
html[data-theme="dark"] .admin-ask.is-danger .admin-delete-icon { background: #3a1f25; color: #ffb3c0; }
.admin-page .btn-primary { background: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] .admin-card { background: #202125; }
html[data-theme="dark"] .admin-table { color: var(--ink); border-color: var(--border); }
html[data-theme="dark"] .admin-table th { background: #26272c; color: #a3a8b8; }
html[data-theme="dark"] .admin-table td { border-color: var(--border); }
html[data-theme="dark"] .admin-table tbody tr:hover { background: #26262d; }
html[data-theme="dark"] .admin-form .form-label { color: #b6bdd0; }
html[data-theme="dark"] .admin-check:has(input:checked) { border-color: #4b4775; background: #2a2838; }
html[data-theme="dark"] .admin-note { background: #2a2838; color: #c9c4f5; }
html[data-theme="dark"] .admin-badge.ok { background: #1e3a2a; color: #8fe0b0; }
html[data-theme="dark"] .admin-badge.off { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .admin-badge.wait { background: #3d2f14; color: #f2c46d; }
html[data-theme="dark"] .admin-badge.info { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .aida-app .admin-page .btn-primary { color: #191525; background: #aaa2ff; border-color: #aaa2ff; }
@media (max-width: 830px) { .admin-page { padding: 16px 16px 48px; } }

/* Data tables in answers: a quiet card with a sticky header, aligned numbers, grouped sections and totals. */
.bubble .table-responsive { max-height: 520px; overflow: auto; margin: 6px 0 10px; border: 1px solid var(--border); border-radius: 12px; }
.bubble .table-responsive > .data-table { display: table; width: auto; min-width: 100%; max-width: none; margin: 0; overflow: visible; }
.aida-app .bubble .data-table > :not(caption) > * > * { padding: 10px 16px; border-width: 0 0 1px; border-color: #eef0f5; }
.aida-app .bubble .data-table thead th { position: sticky; top: 0; z-index: 1; background: #f7f7f9; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.aida-app .bubble .data-table tbody tr:last-child > * { border-bottom: 0; }
.aida-app .bubble .data-table tbody tr:hover > * { background: #fafafe; }
.aida-app .bubble .data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aida-app .bubble .data-table .neg { color: #b4233b; }
.aida-app .bubble .data-table td:empty::before { content: '—'; color: #c0c5d0; }
.aida-app .bubble .data-table td.repeat { color: transparent; }
.aida-app .bubble .data-table tr.group-start > * { border-top: 1px solid #dfe2ea; }
.aida-app .bubble .data-table tr.total-row > * { border-top: 2px solid #d9d6fb; background: #f7f7fd; font-weight: 650; }
html[data-theme="dark"] .aida-app .bubble .data-table > :not(caption) > * > * { border-color: #2f3036; }
html[data-theme="dark"] .aida-app .bubble .data-table thead th { background: #26272c; color: #a3a8b8; border-bottom-color: var(--border); }
html[data-theme="dark"] .aida-app .bubble .data-table tbody tr:hover > * { background: #232329; }
html[data-theme="dark"] .aida-app .bubble .data-table td:empty::before { color: #555864; }
html[data-theme="dark"] .aida-app .bubble .data-table tr.group-start > * { border-top-color: #3a3b42; }
html[data-theme="dark"] .aida-app .bubble .data-table tr.total-row > * { background: #2a2838; border-top-color: #4b4775; }
html[data-theme="dark"] .aida-app .bubble .data-table .neg { color: #ff8fa3; }

/* Report options: column chips, field suggestions and a live summary. */
.report-options summary .options-hint { color: #7d78c4; }
.token-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 6px 8px; border: 1px solid #dfe3ed; border-radius: 8px; cursor: text; }
.token-field:focus-within { border-color: #adabe8; box-shadow: 0 0 0 3px #5855d914; }
.token-list { display: contents; }
.token { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #edecff; color: #4542b8; font-size: 12px; font-weight: 600; }
.token button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 10px; }
.token button:hover { background: #dcdafc; }
.token-input { flex: 1; min-width: 160px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; padding: 4px 2px; }
.token-input::placeholder { color: #9da5b3; }
.field-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.field-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed #c9c6f5; border-radius: 999px; background: transparent; color: #5a56b8; font-size: 12px; }
.field-chip i { font-size: 9px; }
.field-chip:hover { border-style: solid; background: #f4f3fe; }
.report-fields .field-help { margin-top: 6px; }
html[data-theme="dark"] .report-options summary .options-hint { color: #b4adff; }
html[data-theme="dark"] .token-field { border-color: var(--border); background: #202125; }
html[data-theme="dark"] .token { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .token button:hover { background: #4b4775; }
html[data-theme="dark"] .field-chip { border-color: #4b4775; color: #c9c4f5; }
html[data-theme="dark"] .field-chip:hover { background: #2a2838; }
.admin-tabs { overflow-y: hidden; }
.admin-page .btn { font-size: 13px; border-radius: 9px; }

/* Sign-in pages (login, verification code, password reset). */
.auth-page { min-height: 100dvh; background: #f7f7f9; }
.auth-shell { display: grid; grid-template-columns: minmax(320px, 42%) 1fr; min-height: 100dvh; }
.auth-brand { display: flex; align-items: center; padding: 56px; background: radial-gradient(circle at 18% 12%, #7471f2 0, #5450d3 42%, #2f2c8a 100%); color: #fff; }
.auth-logo { display: block; font-size: 36px; font-weight: 750; letter-spacing: -1px; line-height: 1; }
.auth-tagline { margin: 10px 0 40px; font-size: 18px; opacity: .85; }
.auth-points { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.auth-points li { display: flex; align-items: center; gap: 12px; }
.auth-points i { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 9px; background: #ffffff24; font-size: 13px; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-card { width: 100%; max-width: 410px; padding: 36px 34px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 14px 44px #1b233c12; }
.auth-logo-small { display: none; margin-bottom: 22px; color: var(--ink); font-size: 26px; }
.auth-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; background: #edecff; color: var(--accent); font-size: 18px; }
.auth-title { margin: 0 0 6px; font-size: 23px; font-weight: 650; letter-spacing: -.4px; }
.auth-subtitle { margin: 0 0 24px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.auth-form .form-label { margin-bottom: 6px; color: #4c5568; font-size: 13px; font-weight: 600; }
.auth-form .form-control { height: 46px; border-color: #dce1ec; border-radius: 10px; font-size: 14px; }
.auth-form .form-control:focus { border-color: #adabe8; box-shadow: 0 0 0 3px #5855d920; }
.password-field { position: relative; }
.password-field .form-control { padding-right: 46px; }
.password-toggle { position: absolute; top: 5px; right: 5px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--quiet); }
.password-toggle:hover { background: #eeeffb; color: var(--accent); }
.auth-form .otp-input { height: 58px; text-align: center; font-size: 26px; font-weight: 650; letter-spacing: 12px; font-variant-numeric: tabular-nums; }
.auth-form .otp-input::placeholder { color: #c7cad4; letter-spacing: 12px; }
.auth-remember { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.auth-remember input { flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); }
.auth-remember strong { display: block; font-size: 13px; font-weight: 600; }
.auth-remember small { display: block; color: var(--muted); font-size: 12px; }
.auth-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 46px; margin-top: 20px; border-color: var(--accent); border-radius: 10px; background: var(--accent); font-size: 14px; font-weight: 600; }
.auth-submit:hover, .auth-submit:focus { border-color: #4542bd; background: #4542bd; }
.auth-submit .spinner-border { width: 16px; height: 16px; margin-right: 10px; border-width: 2px; }
.auth-link { color: var(--accent); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-help { margin: 18px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.field-error { display: block; margin-top: 5px; color: #b4233b; font-size: 12px; }
.field-error:empty { display: none; }
.auth-form .field-help { display: block; margin: 5px 0 0; }
.auth-error, .auth-alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.auth-error.validation-summary-valid { display: none; }
.auth-error ul { margin: 0; padding: 0; list-style: none; }
.auth-error, .auth-alert.error { background: #fdecee; color: #a42335; }
.auth-alert.success { background: #e3f5ea; color: #1d7a45; }
.auth-alert.info { background: #f1f0fd; color: #4542b8; }
.auth-alert i { margin-top: 2px; }
.auth-footer { margin: 22px 0 0; color: #9399aa; font-size: 12px; }
@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-logo-small { display: block; }
}
@media (max-width: 480px) {
    .auth-main { justify-content: flex-start; padding: 24px 16px; }
    .auth-card { padding: 26px 20px; border-radius: 16px; }
}
html[data-theme="dark"] .auth-page { background: #151619; }
html[data-theme="dark"] .auth-card { border-color: var(--border); background: #202125; box-shadow: none; }
html[data-theme="dark"] .auth-icon { background: #2b293a; }
html[data-theme="dark"] .auth-form .form-label { color: #c3c6d2; }
html[data-theme="dark"] .auth-form .otp-input::placeholder { color: #4d505a; }
html[data-theme="dark"] .password-toggle:hover { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .auth-submit { border-color: #aaa2ff; background: #aaa2ff; color: #191525; }
html[data-theme="dark"] .auth-submit:hover, html[data-theme="dark"] .auth-submit:focus { border-color: #c0baff; background: #c0baff; }
html[data-theme="dark"] .auth-error, html[data-theme="dark"] .auth-alert.error { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .auth-alert.success { background: #1e3a2a; color: #8fe0b0; }
html[data-theme="dark"] .auth-alert.info { background: #2a2838; color: #c9c4f5; }
html[data-theme="dark"] .field-error { color: #ff8fa3; }

/* Header theme menu and the sidebar's mobile log-out button. */
.theme-button { gap: 7px; min-height: 38px; border-color: var(--border); }
.theme-chevron { font-size: 10px; opacity: .7; }
.theme-options, .admin-settings-menu .dropdown-menu { min-width: 170px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px #16203818; }
.theme-options .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 9px 12px; font-size: 13px; }
.theme-options .dropdown-item[aria-checked="true"] { background: #f1f0fd; color: #4542b8; font-weight: 600; }
.aida-app .sidebar { padding-bottom: 90px; }
.aida-app .sidebar-logout { position: absolute; left: 16px; right: 16px; bottom: 22px; justify-content: center; }
.aida-app .sidebar-logout:not(.d-none) { display: flex; }
html[data-theme="dark"] .theme-button { border-color: var(--border); }
html[data-theme="dark"] .theme-options { background: #242529; }
html[data-theme="dark"] .theme-options .dropdown-item { color: var(--ink); }
html[data-theme="dark"] .theme-options .dropdown-item:hover,
html[data-theme="dark"] .theme-options .dropdown-item[aria-checked="true"] { background: #34304e; color: #d5ceff; }
@media (max-width: 520px) { .theme-label, .theme-chevron { display: none; } }

/* Email settings tab. */
.email-status { display: flex; gap: 16px; align-items: flex-start; }
.email-status-icon { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 14px; font-size: 20px; }
.email-status-icon.ok { background: #e3f5ea; color: #1d7a45; }
.email-status-icon.off { background: #fdf1dc; color: #9a5b00; }
.email-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 22px 0 0; }
.email-facts > div { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.email-facts dt { color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; }
.email-facts dd { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
html[data-theme="dark"] .email-status-icon.ok { background: #1e3a2a; color: #8fe0b0; }
html[data-theme="dark"] .email-status-icon.off { background: #3d2f14; color: #f2c46d; }

/* Dialogs: saved questions, scheduled reports, save question, workspace info. */
.aida-app .modal-dialog-scrollable .modal-body { padding-top: 18px; }
.modal-intro { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.modal-section { margin: 26px 0 12px; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: 1px; text-transform: uppercase; }
.modal-prose { font-size: 14px; line-height: 1.7; }
.modal-loading { margin: 0; padding: 24px; color: var(--muted); text-align: center; font-size: 13px; }
.modal-search { position: relative; margin-bottom: 14px; }
.modal-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #9399aa; font-size: 13px; }
.modal-search .form-control { padding-left: 36px; border-radius: 10px; }
.modal-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px; border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); text-align: center; font-size: 13px; }
.modal-empty i { margin-bottom: 4px; color: #a7a3ec; font-size: 22px; }
.modal-empty strong { color: var(--ink); font-size: 14px; }
.saved-list { display: grid; gap: 8px; }
.saved-item, .schedule-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; }
.saved-item:hover, .schedule-item:hover { border-color: #c9c6f5; }
.saved-text, .schedule-text { flex: 1; min-width: 0; }
.saved-text strong, .schedule-text strong { display: block; font-size: 13.5px; font-weight: 600; }
.saved-text p { display: -webkit-box; margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 12.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.saved-actions { display: flex; flex-shrink: 0; gap: 6px; align-items: center; }
.icon-button.danger:hover { background: #fdecee; color: #b4233b; }
.schedule-list { display: grid; gap: 8px; }
.schedule-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; background: #edecff; color: var(--accent); }
.schedule-text span { display: block; color: var(--ink); font-size: 12.5px; }
.schedule-text small { display: block; color: var(--muted); font-size: 11.5px; }
.schedule-preview { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid #c9c6f5; border-radius: 0 8px 8px 0; background: #f7f7fd; color: #5d6577; font-size: 12.5px; white-space: pre-wrap; }
.day-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.day-picker label { min-width: 48px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; color: #5d6577; font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer; user-select: none; }
.day-picker label:hover { border-color: #c9c6f5; }
.day-picker .btn-check:checked + label { border-color: var(--accent); background: var(--accent); color: #fff; }
.day-picker .btn-check:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.day-presets { display: flex; gap: 4px; margin-top: 8px; }
.day-presets button { border: 0; border-radius: 6px; background: transparent; color: var(--accent); padding: 3px 8px; font-size: 12px; }
.day-presets button:hover { background: #eeeffb; }
.aida-app .modal .btn { border-radius: 9px; font-size: 13px; }
html[data-theme="dark"] .modal-empty i { color: #8f89d8; }
html[data-theme="dark"] .icon-button.danger:hover { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .schedule-icon { background: #2b293a; }
html[data-theme="dark"] .schedule-preview { border-color: #4b4775; background: #232330; color: #c3c6d2; }
html[data-theme="dark"] .day-picker label { color: #c3c6d2; }
html[data-theme="dark"] .day-picker .btn-check:checked + label { border-color: #aaa2ff; background: #aaa2ff; color: #191525; }
html[data-theme="dark"] .day-presets button:hover { background: #34304e; }
html[data-theme="dark"] .saved-item:hover, html[data-theme="dark"] .schedule-item:hover { border-color: #4b4775; }
.auth-icon-error { background: #fdecee; color: #b4233b; }
html[data-theme="dark"] .auth-icon-error { background: #3a1f25; color: #ffb3c0; }
a.auth-submit { color: #fff; text-decoration: none; }
html[data-theme="dark"] a.auth-submit { color: #191525; }

/* Alerts, secondary buttons and modal links in dark mode; a calmer brand panel. */
html[data-theme="dark"] .aida-app .alert-danger { border-color: #5a2a33; background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .aida-app .alert-success { border-color: #285a3c; background: #1e3a2a; color: #8fe0b0; }
html[data-theme="dark"] .aida-app .btn-outline-secondary { border-color: #4a4c55; color: #c3c6d2; }
html[data-theme="dark"] .aida-app .btn-outline-secondary:hover { background: #34304e; color: #d5ceff; }
.aida-app .modal .btn-link, .aida-app .admin-page .btn-link { color: var(--muted); text-decoration: none; }
.aida-app .modal .btn-link:hover, .aida-app .admin-page .btn-link:hover { color: var(--accent); }
html[data-theme="dark"] .auth-brand { background: radial-gradient(circle at 18% 12%, #4b47b8 0, #34318a 45%, #1d1b55 100%); }
.auth-subtitle code { padding: 1px 5px; border-radius: 5px; background: #f1f0fd; color: #4542b8; font-size: 11px; word-break: break-all; }
html[data-theme="dark"] .auth-subtitle code { background: #2a2838; color: #c9c4f5; }
.admin-badge.error { background: #fdecee; color: #a42335; }
html[data-theme="dark"] .admin-badge.error { background: #3a1f25; color: #ffb3c0; }

/* Message times, follow-up chips, saved-question starters, admin SQL, inline charts and schedule status. */
.user-message { display: flex; flex-direction: column; align-items: flex-end; max-width: 85%; }
.user-message .bubble-user { max-width: 100%; margin-bottom: 4px; }
.message-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.message-meta .bubble-edit, .message-meta .bubble-save { position: static; }
.message-time { color: var(--quiet); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.answer-actions .message-time { margin-right: 6px; }
.follow-ups { display: none; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.answer.is-latest .follow-ups { display: flex; }
.follow-up-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 13px; border: 1px solid #d9d6fb; border-radius: 999px; background: #f7f7fd; color: #4542b8; font-size: 12.5px; text-align: left; }
.follow-up-chip i { font-size: 10px; opacity: .7; }
.follow-up-chip:hover { border-color: var(--accent); background: #efeefd; }
.follow-up-chip:disabled { opacity: .5; }
.saved-starters { max-width: 760px; margin: 22px auto 0; text-align: left; }
.saved-starters-heading { margin: 0 0 8px; color: #9399aa; font-size: 10px; font-weight: 650; letter-spacing: 1.4px; text-align: center; text-transform: uppercase; }
.saved-starters-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.saved-starter { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink); font-size: 12.5px; }
.saved-starter i { color: #7772c9; }
.saved-starter span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-starter:hover { border-color: #bcbaf0; }
.answer-sql { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #f7f7f9; }
.answer-sql pre { max-height: 320px; margin: 0 0 6px; overflow: auto; color: #3d4252; font-size: 12px; white-space: pre-wrap; }
.chat-chart { margin: 0 0 12px; }
.chat-chart img { display: block; max-width: 100%; height: auto; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.schedule-actions { display: flex; flex-shrink: 0; gap: 2px; }
.schedule-item.failed { border-color: #f1b8c1; background: #fff7f8; }
.schedule-item.failed .schedule-icon { background: #fdecee; color: #b4233b; }
.schedule-item.failed small { color: #a42335; }
.schedule-item.editing { border-color: var(--accent); }
.schedule-notice { margin-bottom: 12px; padding: 9px 12px; border-radius: 10px; background: #f1f0fd; color: #4542b8; font-size: 12.5px; }
.schedule-notice.error { background: #fdecee; color: #a42335; }
#manageSchedules { position: relative; }
#manageSchedules.has-alert::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #d43a52; }
html[data-theme="dark"] .follow-up-chip { border-color: #4b4775; background: #2a2838; color: #d5ceff; }
html[data-theme="dark"] .follow-up-chip:hover { background: #34304e; }
html[data-theme="dark"] .saved-starter { border-color: var(--border); background: #242529; color: var(--ink); }
html[data-theme="dark"] .answer-sql { background: #202125; }
html[data-theme="dark"] .answer-sql pre { color: #c3c6d2; }
html[data-theme="dark"] .chat-chart img { border-color: var(--border); background: #f7f7f9; }
html[data-theme="dark"] .schedule-item.failed { border-color: #5a2a33; background: #2a1d21; }
html[data-theme="dark"] .schedule-item.failed .schedule-icon { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .schedule-item.failed small { color: #ffb3c0; }
html[data-theme="dark"] .schedule-notice { background: #2a2838; color: #c9c4f5; }
html[data-theme="dark"] .schedule-notice.error { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] #manageSchedules.has-alert::after { border-color: #242529; }
@media (max-width: 520px) { .user-message { max-width: 92%; } }

/* Scroll-to-latest button, floating just above the message box. */
.composer-area { position: relative; }
.scroll-down { position: absolute; top: -50px; left: 50%; z-index: 5; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 4px 16px #1b233c1f; font-size: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .15s, transform .15s, visibility .15s; }
.scroll-down.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.scroll-down:hover { border-color: #c9c6f5; color: var(--accent); }
.scroll-down.has-new::after { content: ''; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: var(--accent); }
html[data-theme="dark"] .scroll-down { border-color: #3c3d44; background: #242529; color: var(--ink); box-shadow: 0 4px 16px #0006; }
html[data-theme="dark"] .scroll-down:hover { border-color: #4b4775; color: #d5ceff; }
html[data-theme="dark"] .scroll-down.has-new::after { border-color: #242529; }

/* Charts drawn in answers: horizontal bars for categories, a line for periods. */
.aida-app { --chart-1: #5755d9; --chart-2: #12a089; --chart-3: #e3862b; --chart-surface: #fff; }
html[data-theme="dark"] .aida-app { --chart-1: #aaa2ff; --chart-2: #43cdb1; --chart-3: #f2a35a; --chart-surface: #202125; }
.answer-chart { margin: 4px 0 22px; padding: 16px 18px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--chart-surface); }
.answer-chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin-bottom: 14px; }
.chart-title { color: var(--ink); font-size: 14px; font-weight: 650; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12px; }
.legend-item::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; background: var(--chart-1); vertical-align: -1px; }
.legend-item.s1::before { background: var(--chart-2); }
.legend-item.s2::before { background: var(--chart-3); }
.chart-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.chart-bars { display: grid; grid-template-columns: minmax(72px, 30%) minmax(0, 1fr); align-items: center; gap: 9px 14px; }
.bar-label { overflow: hidden; color: var(--ink); font-size: 13px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.bar-cells { display: grid; gap: 3px; min-width: 0; }
.bar-line { display: grid; grid-template-columns: minmax(0, 1fr) 68px; align-items: center; gap: 10px; }
.bar-track { position: relative; height: 16px; }
.answer-chart.multi .bar-track { height: 11px; }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--chart-1); }
.bar-fill.s1 { background: var(--chart-2); }
.bar-fill.s2 { background: var(--chart-3); }
.bar-zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: #c5c8d3; }
.bar-value { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-value.neg { color: #b4233b; }
.chart-lines { width: 100%; min-height: 240px; }
.chart-lines svg { display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-grid.zero { stroke: #c5c8d3; }
.chart-axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-line { fill: none; stroke: var(--chart-1); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.s1 { stroke: var(--chart-2); }
.chart-line.s2 { stroke: var(--chart-3); }
.chart-area { fill: var(--chart-1); opacity: .08; }
.chart-dot { fill: var(--chart-surface); stroke: var(--chart-1); stroke-width: 2; }
.chart-dot.s1 { stroke: var(--chart-2); }
.chart-dot.s2 { stroke: var(--chart-3); }
.chart-dot:hover { r: 5; }
html[data-theme="dark"] .bar-zero, html[data-theme="dark"] .chart-grid.zero { background: #55575f; stroke: #55575f; }
html[data-theme="dark"] .bar-value.neg { color: #ff9fb0; }
@media (max-width: 520px) {
    .answer-chart { padding: 14px 12px 12px; }
    .chart-bars { grid-template-columns: minmax(64px, 34%) minmax(0, 1fr); gap: 8px 10px; }
    .bar-line { grid-template-columns: minmax(0, 1fr) 58px; gap: 8px; }
}

/* File answers: a card that says what the file is. */
.file-download { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--chart-surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.file-download:hover { border-color: #bcbaf0; box-shadow: 0 2px 12px #5755d91f; color: var(--ink); }
.file-download:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-download-icon { color: var(--accent); font-size: 22px; }
.file-download-text { display: grid; min-width: 0; line-height: 1.35; }
.file-download-text strong { font-size: 14px; font-weight: 600; }
.file-download-text small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.file-download > .fa-download { margin-left: 8px; color: var(--muted); }
.file-download:hover > .fa-download { color: var(--accent); }
.file-gone { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
/* Older file answers float their button beside the actions; keep the actions underneath. */
.bubble-bot > a[download] { float: none !important; }
html[data-theme="dark"] .bubble a.file-download { color: var(--ink); }
html[data-theme="dark"] .file-download:hover { border-color: #4b4775; box-shadow: none; }

/* Next-answer picker: says the choice is one-off. */
.format-menu-note { max-width: 270px; margin: 6px 10px 4px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--quiet); font-size: 11px; line-height: 1.5; white-space: normal; }

/* Save / Edit question: how it answers, and an optional report layout. */
.save-question .field-help { margin: 6px 0 0; font-size: 12px; }
.save-question .report-options { padding: 0 14px; border: 1px solid var(--border); border-radius: 12px; }
.save-question .report-options summary { padding: 12px 0; color: var(--ink); font-size: 13px; font-weight: 600; }
.save-question .options-hint { font-size: 12px; font-weight: 400; }
.save-question .report-options-body { max-height: none; overflow: visible; padding: 0 0 14px; }
.save-question .report-options-intro { margin: 0 0 12px; }
.save-question .report-fields label { font-size: 12.5px; }
.save-question .report-options[open] { margin-top: 0; }
.saved-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.saved-format { display: inline-flex; align-items: center; gap: 6px; color: #4542b8; font-weight: 600; }
html[data-theme="dark"] .saved-format { color: #c9c4f5; }
.saved-pin { display: inline-flex; align-items: center; gap: 5px; }
.saved-chart { display: inline-flex; align-items: center; gap: 6px; }
.saved-chart i { color: #7772c9; font-size: 11px; }
html[data-theme="dark"] .saved-chart i { color: #aaa2ff; }
/* Schedules: the pinned charts' Monday email, switched on or off where it's listed. */
.schedule-item.is-digest { background: #faf9ff; }
.schedule-switch { display: flex; align-items: center; min-height: 0; margin: 0 6px 0 0; padding: 0; }
.schedule-switch .form-check-input { width: 2.2em; height: 1.2em; margin: 0; cursor: pointer; }
.schedule-list .modal-empty { margin-top: 0; }
html[data-theme="dark"] .schedule-item.is-digest { background: #222230; }
.saved-pin.fixed { color: #9a5b00; }
html[data-theme="dark"] .saved-pin.fixed { color: #f0b860; }
.saved-meta .link-button { font-size: 12px; }
html[data-theme="dark"] .save-question .report-options summary { color: var(--ink); }
/* The dark field background must not drop the dropdown arrow. */
html[data-theme="dark"] .aida-app .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a3a5af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }

/* Answer as: one tile per format, grouped like the message box menu. */
.answer-choice { margin: 0; padding: 0; border: 0; }
.answer-choice legend { float: none; width: auto; margin-bottom: 2px; padding: 0; font-size: 14px; }
.choice-group-label { margin: 10px 0 6px; color: #9399aa; font-size: 10px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; }
.choice-grid { display: grid; gap: 8px; }
.choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-tile { position: relative; display: flex; align-items: center; gap: 11px; min-height: 58px; margin: 0; padding: 10px 28px 10px 11px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.choice-tile > i { display: grid; flex: 0 0 34px; place-items: center; height: 34px; border-radius: 10px; background: #f1f1fa; color: #6461d6; font-size: 15px; transition: background-color .15s, color .15s; }
.choice-tile span { min-width: 0; }
.choice-tile strong { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.choice-tile small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.choice-tile:hover { border-color: #c9c6f5; }
.btn-check:checked + .choice-tile { border-color: var(--accent); background: #f6f5ff; box-shadow: inset 0 0 0 1px var(--accent); }
.btn-check:checked + .choice-tile > i { background: var(--accent); color: #fff; }
.btn-check:checked + .choice-tile::after { content: '\f00c'; position: absolute; top: 8px; right: 10px; color: var(--accent); font-family: 'Font Awesome 6 Free'; font-size: 11px; font-weight: 900; }
.btn-check:focus-visible + .choice-tile { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice-help { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.choice-help i { color: #9399aa; font-size: 11px; }
html[data-theme="dark"] .choice-tile { background: #202125; }
html[data-theme="dark"] .choice-tile:hover { border-color: #4b4775; }
html[data-theme="dark"] .choice-tile > i { background: #2a2b31; color: #c9c4f5; }
html[data-theme="dark"] .btn-check:checked + .choice-tile { background: #2a2838; }
html[data-theme="dark"] .btn-check:checked + .choice-tile > i { background: var(--accent); color: #191a1e; }
@media (max-width: 575px) {
    .choice-grid.two, .choice-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .choice-tile { gap: 9px; padding: 9px 24px 9px 9px; }
    .choice-tile > i { flex-basis: 30px; height: 30px; font-size: 14px; }
}

/* Administration lists: edit and delete on every row. */
.admin-table th.admin-row-actions, .admin-table td.admin-row-actions { width: 1%; padding-right: 12px; text-align: right; white-space: nowrap; }
.admin-icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 2px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--quiet); font-size: 14px; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.admin-table a.admin-icon-button { color: var(--quiet); font-weight: 400; }
.admin-icon-button:hover, .admin-table a.admin-icon-button:hover { border-color: #dcdaf7; background: #f1f0fd; color: var(--accent); }
.admin-icon-button.danger:hover { border-color: #f3c6cd; background: #fdecee; color: #b4233b; }
.admin-icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.admin-icon-button.is-disabled { opacity: .35; cursor: not-allowed; }
.admin-icon-button.is-disabled:hover { border-color: transparent; background: transparent; color: var(--quiet); }
.admin-danger { border-color: #f3d3d8; }
.admin-danger .admin-section-title { color: #a42335; }
/* Delete confirmation */
.admin-delete .modal-body { padding-top: 22px; }
.admin-delete-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: #fdecee; color: #b4233b; font-size: 19px; }
.admin-delete-lead { margin-bottom: 8px; font-weight: 600; }
.admin-delete-list { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.admin-delete-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f7f7f9; color: #5d6577; font-size: 13px; line-height: 1.55; }
.admin-delete .modal-footer { gap: 6px; }
.admin-delete .modal-footer form { margin: 0; }
html[data-theme="dark"] .admin-icon-button, html[data-theme="dark"] .admin-table a.admin-icon-button { color: #a3a8b8; }
html[data-theme="dark"] .admin-icon-button:hover, html[data-theme="dark"] .admin-table a.admin-icon-button:hover { border-color: #4b4775; background: #2a2838; color: #d5ceff; }
html[data-theme="dark"] .admin-icon-button.danger:hover { border-color: #5a2a33; background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .admin-icon-button.is-disabled:hover { border-color: transparent; background: transparent; color: #a3a8b8; }
html[data-theme="dark"] .admin-danger { border-color: #5a2a33; }
html[data-theme="dark"] .admin-danger .admin-section-title { color: #ffb3c0; }
html[data-theme="dark"] .admin-delete-icon { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .admin-delete-note { background: #26272c; color: #c3c6d2; }

/* App data source: SQL Server or Salesforce, with only that connector's fields showing. */
.connector-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.connector-panel { margin-bottom: 4px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: #fafafc; }
.source-switch { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.source-switch label { margin: 0; padding: 6px 14px; border-radius: 8px; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.source-switch .btn-check:checked + label { background: var(--accent); color: #fff; }
.source-switch .btn-check:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.code-input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
.admin-howto { margin-top: 4px; font-size: 13px; }
.admin-howto summary { color: var(--accent); cursor: pointer; }
.admin-howto ol { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.7; }
.admin-errors ul { margin: 0; padding-left: 18px; }
.test-result { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; }
.test-result > i { margin-top: 1px; font-size: 16px; }
.test-result.pending { background: #f3f4f8; color: var(--muted); }
.test-result.ok { background: #e7f6ee; color: #1d6b40; }
.test-result.failed { background: #fdecee; color: #a42335; }
.test-result strong { font-weight: 600; }
.test-columns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.test-columns span { padding: 2px 8px; border-radius: 6px; background: #ffffffb3; color: #3d4252; font-size: 11.5px; }
.refresh-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.refresh-summary { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.refresh-summary strong { color: var(--ink); }
.refresh-speed { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; color: var(--muted); }
.refresh-speed i { color: #b7791f; }
.refresh-sources { margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.refresh-sources li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 2px 0; }
.refresh-sources i { color: #0b5cab; }
.refresh-sources strong { color: var(--ink); font-weight: 600; }
html[data-theme="dark"] .refresh-sources i { color: #9cc7f2; }
/* Data tab: how AIDA reads this data. */
.reading-card { display: flex; align-items: flex-start; gap: 14px; }
.reading-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; background: #f1f2f6; color: var(--muted); font-size: 18px; }
.reading-card[data-tone="ok"] .reading-icon { background: #e7f6ee; color: #1d6b40; }
.reading-card[data-tone="warn"] .reading-icon { background: #fff4e0; color: #9a5b00; }
.reading-body { flex: 1; min-width: 0; }
.reading-body .admin-section-title { margin-bottom: 4px; }
.reading-title { display: flex; align-items: center; margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.reading-detail { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 720px; }
html[data-theme="dark"] .reading-icon { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .reading-card[data-tone="ok"] .reading-icon { background: #173526; color: #7fd6a5; }
html[data-theme="dark"] .reading-card[data-tone="warn"] .reading-icon { background: #3a2c12; color: #f2c26b; }
.data-source { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.data-detail { display: block; color: var(--muted); font-size: 12px; }
.data-detail.problem { color: #9a5b00; }
html[data-theme="dark"] .connector-panel { background: #1c1d21; }
html[data-theme="dark"] .source-switch { background: #202125; }
html[data-theme="dark"] .source-switch .btn-check:checked + label { color: #191a1e; }
html[data-theme="dark"] .test-result.pending { background: #26272c; }
html[data-theme="dark"] .test-result.ok { background: #1c3326; color: #8fe0b0; }
html[data-theme="dark"] .test-result.failed { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .test-columns span { background: #00000040; color: #d7d8df; }
html[data-theme="dark"] .data-detail.problem { color: #f2c27a; }
@media (max-width: 575px) { .connector-choice { grid-template-columns: 1fr; } }
/* Email: three sending methods (Outlook, SMTP, Microsoft 365 app), with the chosen one's fields underneath. */
.connector-choice.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .connector-choice.is-three { grid-template-columns: 1fr; } }
.admin-howto ul { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.7; }
/* The tick on a chosen tile is drawn, so it shows on pages with either icon font. */
.btn-check:checked + .choice-tile::after { content: ''; top: 10px; right: 12px; width: 6px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; font-family: inherit; transform: rotate(45deg); }
.refresh-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f1f0fd; color: #4542b8; font-size: 13.5px; }
.refresh-progress small { flex-basis: 100%; margin-top: 2px; color: var(--muted); font-size: 12px; }
html[data-theme="dark"] .refresh-progress { background: #2a2838; color: #c9c4f5; }

/* Workspace setup steps: name, data source, then descriptions drafted from the data. */
.step-number { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; letter-spacing: 0; vertical-align: 1px; }
.connection-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.describe-intro { margin: -4px 0 12px; }
.describe-field { margin-bottom: 14px; }
.describe-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.suggest-button { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 4px 10px; border: 1px solid #dcdaf7; border-radius: 999px; background: #f6f5ff; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.suggest-button:hover { border-color: var(--accent); }
.suggest-button:disabled { opacity: .6; cursor: wait; }
.suggest-button .spinner-border { width: 12px; height: 12px; border-width: 2px; }
/* Instructions for AIDA: suggest them from the data. */
.describe-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.describe-tools .suggest-button { margin-bottom: 0; }
.suggest-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: 12.5px; }
.suggest-status.pending { color: var(--muted); }
.suggest-status.done { color: #4542b8; }
.suggest-status.failed { color: #a42335; }
.link-button { padding: 0; border: 0; background: none; color: var(--accent); font-size: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
html[data-theme="dark"] .step-number { color: #191a1e; }
html[data-theme="dark"] .suggest-button { border-color: #4b4775; background: #2a2838; color: #d5ceff; }
html[data-theme="dark"] .suggest-status.done { color: #c9c4f5; }
html[data-theme="dark"] .suggest-status.failed { color: #ffb3c0; }
.setting-value span[title] { display: inline-block; max-width: 420px; overflow: hidden; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
/* All settings: grouped, each with what it's for, and what needs attention first. */
.settings-attention { margin-bottom: 14px; padding: 14px 18px; border-color: #f3c7cd; background: #fff7f8; }
.settings-attention h4 { margin: 0 0 8px; color: #a42335; font-size: 14px; font-weight: 650; }
.settings-attention ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 13px; line-height: 1.7; }
.settings-attention code { font-size: 12px; }
.settings-ok { margin: 0 0 14px; color: #1d7a45; font-size: 13.5px; }
.settings-group { margin-bottom: 22px; }
.settings-group-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.settings-group-head h4 { margin: 0 0 2px; color: var(--ink); font-size: 14px; font-weight: 650; }
.settings-table .setting-name { min-width: 260px; }
.setting-purpose { display: block; max-width: 520px; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; white-space: normal; }
.setting-unset { color: var(--muted); font-size: 12px; font-style: italic; }
.setting-problem { display: block; max-width: 420px; margin-top: 4px; color: #a42335; font-size: 12px; line-height: 1.45; white-space: normal; }
.settings-table tr.is-unset code { opacity: .75; }
.setting-about { padding: 10px 14px; border-radius: 10px; background: #f6f5ff; font-size: 13px; }
html[data-theme="dark"] .setting-about { background: #2a2838; }
html[data-theme="dark"] .settings-attention { border-color: #5a2a33; background: #2a1d21; }
html[data-theme="dark"] .settings-attention h4, html[data-theme="dark"] .setting-problem { color: #ffb3c0; }
html[data-theme="dark"] .settings-ok { color: #8fe0b0; }

/* Administration overview: numbers, what needs attention, quick actions. */
.overview-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.overview-number { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; }
a.overview-number:hover { border-color: #bcbaf0; color: var(--ink); }
.overview-number strong { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.overview-number span { color: var(--muted); font-size: 12.5px; }
.overview-attention { padding: 18px 20px; }
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.attention-list li:first-child { border-top: 0; padding-top: 2px; }
.attention-list li > i { color: #9a5b00; font-size: 16px; }
.overview-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.admin-badge.admin { background: #edecff; color: #4542b8; }
.admin-continue { margin-left: 4px; font-size: 12.5px; }
.user-status { margin-top: -8px; }
.user-status span { margin-left: 4px; }

/* A workspace: its title and status, then setup steps (a draft) or tabs (live). */
.workspace-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.setup-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; overflow-x: auto; }
.setup-steps li { flex: 1 1 0; min-width: 120px; }
.setup-steps a { display: flex; align-items: center; gap: 8px; height: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--muted); font-size: 12.5px; text-decoration: none; }
.setup-steps a[href]:hover { border-color: #bcbaf0; color: var(--ink); }
.setup-steps .step-marker { display: inline-grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: #eef0f4; color: var(--muted); font-size: 12px; font-weight: 700; }
.setup-steps .step-name { display: flex; flex-direction: column; line-height: 1.2; }
.setup-steps .step-name small { color: var(--muted); font-size: 10.5px; }
.setup-steps li.done .step-marker { background: #e3f5ea; color: #1d7a45; }
.setup-steps li.current a { border-color: var(--accent); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--accent) inset; }
.setup-steps li.current .step-marker { background: var(--accent); color: #fff; }
.workspace-tabs { display: flex; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: #f6f7fa; overflow-x: auto; }
.workspace-tabs a { padding: 8px 12px; border-radius: 9px; color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.workspace-tabs a:hover { color: var(--ink); }
.workspace-tabs a.active { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 3px #16203818; }

/* Choosing the data: the table list, and the preview with a tick per column. */
.table-picker-search { position: relative; margin-bottom: 8px; }
.table-picker-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.table-picker-search input { padding-left: 34px; }
.table-list { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.preview-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.data-preview { max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.data-preview table { font-size: 12.5px; white-space: nowrap; }
.data-preview th { position: sticky; top: 0; z-index: 1; background: #f6f7fa; vertical-align: top; font-weight: 600; color: var(--ink); }
.data-preview th small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.data-preview td { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.data-preview td.is-null { color: var(--muted); font-style: italic; }
.data-preview td.is-null::before { content: "empty"; }
.data-preview .is-hidden { opacity: .45; }
.data-preview th.is-hidden { text-decoration: line-through; }

/* Describing it: suggestion, example questions, history. */
.describe-intro-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.describe-intro-row .suggest-button { flex: 0 0 auto; }
.example-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.history-list li:first-child { border-top: 0; }
.history-line { display: grid; grid-template-columns: 150px 140px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.history-when { color: var(--muted); white-space: nowrap; }
.history-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-actions { display: flex; gap: 6px; }
.history-detail { margin-top: 8px; padding: 12px; border-radius: 10px; background: #f6f7fa; font-size: 12.5px; }
.history-detail pre { margin: 2px 0 10px; white-space: pre-wrap; font-size: 12px; color: var(--ink); }

/* Try it. */
.try-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.try-examples .suggestion-chip { border: 1px solid var(--border); border-radius: 999px; background: transparent; padding: 4px 12px; color: var(--ink); font-size: 12.5px; }
.try-examples .suggestion-chip:hover { border-color: #bcbaf0; }
.try-result { padding: 18px 20px; }
.try-answer { font-size: 14px; }
.try-answer table { font-size: 12.5px; }
.try-sql { margin-top: 12px; }
.try-sql summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.try-sql pre, .try-failures pre { margin: 8px 0 0; padding: 12px; border-radius: 10px; background: #f6f7fa; white-space: pre-wrap; font-size: 12px; color: var(--ink); }
.try-failures { margin-top: 12px; font-size: 13px; color: #a42335; }
.try-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }

/* Going live, the overview cards and feedback. */
.golive-list { list-style: none; margin: 0 0 8px; padding: 0; }
.golive-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 8px 0; font-size: 13.5px; }
.golive-list li.ok > i { color: #1d7a45; }
.golive-list li.missing > i { color: #a42335; }
.golive-list li.warn > i { color: #9a5b00; }
.golive-list a { margin-left: 4px; font-size: 12.5px; }
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.overview-card { padding: 16px 18px; font-size: 13.5px; }
.overview-card p { margin-bottom: 8px; }
.feedback-list { list-style: none; margin: 0; padding: 0; }
.feedback-list li { padding: 12px 0; border-top: 1px solid var(--border); }
.feedback-list li:first-child { border-top: 0; }
.feedback-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.feedback-question { margin: 0 0 4px; font-weight: 600; font-size: 13.5px; }
.feedback-answer { margin: 0 0 6px; color: var(--muted); font-size: 12.5px; }
.feedback-comment { margin: 0 0 8px; font-size: 13px; }

/* The chat's starters, when a workspace has its own example questions. */
.starter-prompts.is-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.starter-prompts.is-examples button { display: flex; align-items: center; gap: 12px; }
.starter-prompts.is-examples i { display: inline; margin: 0; }
.starter-prompts.is-examples strong { margin: 0; font-size: 12.5px; font-weight: 500; }

html[data-theme="dark"] .overview-number,
html[data-theme="dark"] .setup-steps a { background: #202125; }
html[data-theme="dark"] a.overview-number:hover,
html[data-theme="dark"] .setup-steps a[href]:hover { border-color: #5a56a8; }
html[data-theme="dark"] .attention-list li > i,
html[data-theme="dark"] .golive-list li.warn > i { color: #f2c46d; }
html[data-theme="dark"] .golive-list li.ok > i { color: #8fe0b0; }
html[data-theme="dark"] .golive-list li.missing > i,
html[data-theme="dark"] .try-failures { color: #ffb3c0; }
html[data-theme="dark"] .admin-badge.admin { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .setup-steps .step-marker { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .setup-steps li.done .step-marker { background: #1e3a2a; color: #8fe0b0; }
html[data-theme="dark"] .setup-steps li.current .step-marker { background: var(--accent); color: #fff; }
html[data-theme="dark"] .workspace-tabs { background: #1a1b1f; }
html[data-theme="dark"] .workspace-tabs a.active { background: #2a2b31; color: #c9c4ff; box-shadow: none; }
html[data-theme="dark"] .data-preview th,
html[data-theme="dark"] .history-detail,
html[data-theme="dark"] .try-sql pre,
html[data-theme="dark"] .try-failures pre { background: #26272c; }

@media (max-width: 760px) {
    .overview-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overview-grid, .example-inputs, .starter-prompts.is-examples { grid-template-columns: 1fr; }
    .attention-list li { grid-template-columns: 22px 1fr; }
    .attention-list li .btn { grid-column: 2; justify-self: start; }
    .describe-intro-row { flex-direction: column; }
    .history-line { grid-template-columns: 1fr auto; }
    .history-who, .history-summary { grid-column: 1 / -1; }
    .setup-steps li { min-width: 108px; }
}

/* ---------- Connections, access filters, feedback review, Performance ---------- */
/* Absolutely positioned content (a visually hidden column header) stays inside its scrolling table instead of widening the page. */
.table-responsive { position: relative; }
.overview-numbers { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.connection-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 10px; }
.connection-option { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 26px 9px 10px; border: 1px solid var(--border); border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.connection-option > i { display: grid; flex: 0 0 30px; place-items: center; height: 30px; border-radius: 9px; background: #f1f1fa; color: #6461d6; font-size: 14px; }
.connection-option span { min-width: 0; }
.connection-option strong { display: block; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.connection-option small { display: block; overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.connection-option:hover { border-color: #c9c6f5; }
.btn-check:checked + .connection-option { border-color: var(--accent); background: #f6f5ff; box-shadow: inset 0 0 0 1px var(--accent); }
.btn-check:checked + .connection-option > i { background: var(--accent); color: #fff; }
.btn-check:focus-visible + .connection-option { outline: 2px solid var(--accent); outline-offset: 2px; }
.new-connection { margin: 4px 0 14px; padding: 14px; border: 1px dashed var(--border); border-radius: 12px; }
.admin-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.connection-pinned td { background: rgba(87, 85, 217, .04); }

.admin-checks.access-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.access-company > .admin-check { max-width: 520px; }
.access-company { padding: 2px 0; }
.row-filter { max-width: 760px; margin: 6px 0 8px 14px; padding: 10px 14px; border-left: 2px solid var(--border); }
.source-switch-sm label { padding: 4px 10px; font-size: 12.5px; }
.filter-fields { margin-top: 8px; }
.filter-tools { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.value-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-height: 160px; overflow-y: auto; }
.value-chips .suggestion-chip { border: 1px solid var(--border); border-radius: 999px; background: transparent; padding: 3px 10px; color: var(--ink); font-size: 12px; }
.value-chips .suggestion-chip.chosen { border-color: var(--accent); background: var(--accent); color: #fff; }
.try-as { margin-top: 12px; max-width: 520px; }

.feedback-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-reviewed { margin-top: 10px; }
.feedback-reviewed summary { color: var(--muted); font-size: 13px; cursor: pointer; }

.perf-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.perf-filters .form-select { width: auto; min-width: 150px; }
.overview-number.perf-bad strong { color: #c0392b; }
.perf-bad-text { color: #c0392b; font-weight: 600; }
.perf-chart-card { padding: 14px 16px; margin-bottom: 16px; }
.perf-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.perf-key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.perf-key.ok { background: var(--accent); }
.perf-key.fail { background: #e0605a; }
.perf-key.line { height: 3px; background: #d99a1e; vertical-align: 2px; }
.perf-chart { display: block; width: 100%; height: auto; }
.perf-bar.ok { fill: var(--accent); opacity: .85; }
.perf-bar.fail { fill: #e0605a; }
.perf-line { fill: none; stroke: #d99a1e; stroke-width: 2; stroke-linejoin: round; }
.perf-dot { fill: #d99a1e; }
.perf-axis { stroke: var(--border); }
.perf-tick { fill: var(--muted); font-size: 11px; }
.perf-tick.line { fill: #d99a1e; }
.perf-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
.perf-grid > .admin-card { padding: 16px 18px; }
.perf-table td, .perf-table th { padding: 7px 6px; }
.perf-total td { font-weight: 700; }
.perf-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 10px; font-size: 13px; }
.perf-facts dt { color: var(--muted); font-weight: 500; }
.perf-facts dd { margin: 0; }
.perf-subtitle { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.perf-refresh { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.perf-runs { list-style: none; margin: 0; padding: 0 2px; }
.perf-runs li { padding: 12px 4px; border-top: 1px solid var(--border); }
.perf-runs li:first-child { border-top: 0; }
.perf-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.perf-run-head code { font-size: 11px; }
.perf-error { margin: 0 0 8px; font-size: 13px; }
.perf-question { max-width: 420px; }

html[data-theme="dark"] .connection-option { background: #202125; }
html[data-theme="dark"] .connection-option:hover { border-color: #4b4775; }
html[data-theme="dark"] .connection-option > i { background: #2a2b31; color: #c9c4f5; }
html[data-theme="dark"] .btn-check:checked + .connection-option { background: #2a2838; }
html[data-theme="dark"] .btn-check:checked + .connection-option > i { background: var(--accent); color: #191a1e; }
html[data-theme="dark"] .value-chips .suggestion-chip.chosen { color: #191a1e; }
html[data-theme="dark"] .connection-pinned td { background: rgba(170, 162, 255, .06); }
html[data-theme="dark"] .overview-number.perf-bad strong,
html[data-theme="dark"] .perf-bad-text { color: #ff9b94; }

@media (max-width: 760px) {
    .perf-grid { grid-template-columns: 1fr; }
    .row-filter { margin-left: 0; }
    .perf-filters .form-select { flex: 1 1 140px; }
    .perf-question { max-width: 220px; }
    .perf-chart-card { overflow-x: auto; }
    .perf-chart { min-width: 560px; }
}

/* Performance sections, the Runs list and the run page. */
.perf-tabs { display: inline-flex; gap: 4px; margin: -4px 0 14px; padding: 4px; border-radius: 12px; background: #f1f2f6; }
.perf-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.perf-tabs a:hover { color: var(--accent); }
.perf-tabs a.active { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(20, 20, 40, .08); }
.runs-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.runs-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.runs-search .form-control { padding-left: 30px; }
.runs-person { margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
.runs-question { min-width: 260px; max-width: 520px; }
.runs-question a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.run-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.run-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; text-decoration: none; }
.run-crumbs a:hover { color: var(--accent); }
.run-crumbs code { font-size: 12px; }
.run-head { margin-bottom: 16px; padding: 18px 20px; }
.run-badges { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; }
.run-question { margin: 0 0 6px; font-size: 20px; font-weight: 650; line-height: 1.35; letter-spacing: -.2px; overflow-wrap: anywhere; }
.run-origin { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.run-error { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: #fdecee; color: #a42335; font-size: 13px; }
.run-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px; margin: 14px 0 0; }
.run-facts dt { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; }
.run-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.run-facts dd small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.run-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.run-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.run-side { display: grid; gap: 16px; min-width: 0; }
.run-card { padding: 16px 18px; }
.run-attempt { margin: 14px 0 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.run-steps { list-style: none; margin: 0; padding: 0; }
.run-step { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.run-step::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--border); }
.run-step:last-child { padding-bottom: 0; }
.run-step:last-child::before { display: none; }
.run-step-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: #edecff; color: #4542b8; font-size: 14px; }
.run-step.kind-query .run-step-icon { background: #e3f1fb; color: #1f6aa5; }
.run-step.kind-plan .run-step-icon, .run-step.kind-decision .run-step-icon, .run-step.kind-note .run-step-icon { background: #eef0f4; color: #5b6275; }
.run-step.kind-pin .run-step-icon { background: #fdf1dc; color: #9a5b00; }
.run-step.kind-compare .run-step-icon, .run-step.kind-totals .run-step-icon, .run-step.kind-delivery .run-step-icon { background: #e3f5ea; color: #1d7a45; }
.run-step.failed .run-step-icon { background: #fdecee; color: #a42335; }
.run-step-body { flex: 1; min-width: 0; padding-top: 5px; }
.run-step-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.run-step-head strong { font-size: 14px; }
.run-step.failed .run-step-head strong { color: #a42335; }
.run-step-meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.run-step-detail { margin: 3px 0 0; color: #4b5060; font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.run-sql { margin-top: 6px; }
.run-sql summary { width: fit-content; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.run-sql-box { position: relative; margin-top: 6px; }
.run-sql-box pre { max-height: 360px; margin: 0; padding: 12px 80px 12px 14px; overflow: auto; border-radius: 10px; background: #f6f7fb; font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.run-sql-box pre code { color: #2b2f3a; }
.run-sql-box .btn { position: absolute; top: 8px; right: 8px; padding: 2px 8px; background: #fff; font-size: 11px; }
.run-waterfall { display: flex; height: 14px; overflow: hidden; border-radius: 7px; background: #eef0f4; }
.run-wf { display: inline-block; height: 100%; }
.run-wf.wait { background: #c3c7d4; }
.run-wf.schema { background: #8fb7e6; }
.run-wf.plan { background: #7a77e6; }
.run-wf.query { background: #3a8fd6; }
.run-wf.repair { background: #e0605a; }
.run-wf.write { background: #a58bf2; }
.run-wf.other { background: #dfe2ea; }
.run-wf.deliver { background: #4cb782; }
.run-wf-legend { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; }
.run-wf-legend li { display: flex; align-items: center; gap: 8px; }
.run-wf-legend i { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 3px; }
.run-wf-legend strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.run-answer.bubble { max-height: 560px; margin: 0; padding: 0; overflow: auto; font-size: 13.5px; line-height: 1.65; }
.run-answer.bubble h1, .run-answer.bubble h2 { margin: 14px 0 8px; font-size: 15px; }
.run-answer.bubble h3 { margin: 12px 0 6px; font-size: 14px; }
.run-answer.bubble > :first-child { margin-top: 0; }
.run-files { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.run-files i { margin-right: 6px; color: var(--muted); }
html[data-theme="dark"] .perf-tabs { background: #26272c; }
html[data-theme="dark"] .perf-tabs a.active { background: #34304e; color: #d5ceff; box-shadow: none; }
html[data-theme="dark"] .run-error { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .run-step-icon { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .run-step.kind-query .run-step-icon { background: #1d3142; color: #9fd0ff; }
html[data-theme="dark"] .run-step.kind-plan .run-step-icon, html[data-theme="dark"] .run-step.kind-decision .run-step-icon, html[data-theme="dark"] .run-step.kind-note .run-step-icon { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .run-step.kind-pin .run-step-icon { background: #3d2f14; color: #f2c46d; }
html[data-theme="dark"] .run-step.kind-compare .run-step-icon, html[data-theme="dark"] .run-step.kind-totals .run-step-icon, html[data-theme="dark"] .run-step.kind-delivery .run-step-icon { background: #1e3a2a; color: #8fe0b0; }
html[data-theme="dark"] .run-step.failed .run-step-icon { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .run-step.failed .run-step-head strong { color: #ffb3c0; }
html[data-theme="dark"] .run-step-detail { color: #c3c6d2; }
html[data-theme="dark"] .run-sql-box pre { background: #26272c; }
html[data-theme="dark"] .run-sql-box pre code { color: #e4e6ee; }
html[data-theme="dark"] .run-sql-box .btn { background: #202125; }
html[data-theme="dark"] .run-waterfall { background: #2c2d33; }
html[data-theme="dark"] .run-wf.wait { background: #5d6170; }
html[data-theme="dark"] .run-wf.other { background: #44464f; }
@media (max-width: 900px) {
    .run-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .perf-tabs { display: flex; }
    .perf-tabs a { flex: 1; justify-content: center; }
    .runs-wide { display: none; }
    .runs-question { min-width: 170px; }
    .runs-search { max-width: none; }
    .run-head { padding: 14px; }
    .run-question { font-size: 17px; }
    .run-card { padding: 14px; }
}

/* The Settings page: grouped cards, each setting edited in place with the control its kind calls for. */
.settings-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.settings-intro h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.settings-intro p { margin: 0; color: var(--muted); font-size: 13.5px; }
.settings-search { position: relative; flex: 0 1 340px; min-width: 220px; }
.settings-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.settings-search .form-control { padding-left: 36px; border-radius: 10px; }
.settings-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.settings-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.settings-chip span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #eef0f4; color: #5b6275; font-size: 11.5px; text-align: center; }
.settings-chip:hover { border-color: #c9c6f3; color: var(--accent); }
.settings-chip.active { border-color: var(--accent); background: #edecff; color: #4542b8; }
.settings-chip.warn span { background: #fdecee; color: #a42335; }
.settings-ok { display: flex; align-items: center; margin: 0 0 14px; color: #1d7a45; font-size: 13.5px; font-weight: 600; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-nav { position: sticky; top: 16px; }
.settings-nav select { display: none; }
.settings-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.settings-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: #586277; font-size: 13px; font-weight: 500; text-decoration: none; }
.settings-nav a:hover { background: #f1f2f6; color: var(--ink); }
.settings-nav a.active { background: #edecff; color: #4542b8; font-weight: 600; }
.settings-nav a i { width: 16px; color: #8790a4; text-align: center; }
.settings-nav a.active i { color: var(--accent); }
.settings-nav a span:first-of-type { flex: 1; min-width: 0; }
.settings-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0605a; }
.settings-groups { display: grid; gap: 16px; min-width: 0; }
.settings-card { scroll-margin-top: 16px; overflow: hidden; }
.settings-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; padding: 16px 18px 14px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #fafaff, #fff); }
.settings-card-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #edecff; color: #4542b8; font-size: 16px; }
.settings-card-title { flex: 1 1 260px; min-width: 0; }
.settings-card-title h3 { margin: 0 0 2px; font-size: 15.5px; font-weight: 700; }
.settings-card-title p { margin: 0; color: var(--muted); font-size: 13px; }
.settings-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto; gap: 10px 18px; align-items: center; padding: 14px 18px; border-top: 1px solid #eef0f5; scroll-margin-top: 16px; transition: background-color .3s; }
.settings-card-head + .setting-row { border-top: 0; }
.setting-row.saving { opacity: .65; }
.setting-row.just-saved { background: #f3f2ff; }
.setting-row[data-attention="true"] { box-shadow: inset 3px 0 0 #e0605a; }
.setting-label { display: block; margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); }
.setting-desc { margin: 2px 0 0; color: #5b6275; font-size: 12.5px; line-height: 1.5; }
.setting-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.setting-meta code { font-size: 11px; color: #8a6a96; }
.setting-meta i { margin-right: 4px; }
.setting-problem { margin: 6px 0 0; color: #a42335; font-size: 12.5px; font-weight: 600; }
.setting-restart { margin: 6px 0 0; color: #9a5b00; font-size: 12.5px; }
.setting-control { min-width: 0; }
.setting-side { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.setting-chip { margin: 0; }
.setting-switch { display: flex; align-items: center; gap: 10px; min-height: 31px; margin: 0; padding-left: 0; }
.setting-switch .form-check-input { width: 2.6em; height: 1.4em; margin: 0; float: none; cursor: pointer; }
.switch-state { color: var(--muted); font-size: 13px; font-weight: 600; }
/* Bootstrap hides each choice's radio with position: absolute; anchored here, focusing it never scrolls the page away. */
.setting-segments, .ai-cards { position: relative; }
.setting-segments > .btn-check, .ai-cards > .btn-check { top: 0; left: 0; }
.setting-segments { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: #f1f2f6; }
.setting-segments .btn { padding: 4px 12px; border: 0; border-radius: 8px; color: #5b6275; font-size: 13px; font-weight: 600; }
.setting-segments .btn:hover { color: var(--accent); }
.setting-segments .btn-check:checked + .btn { background: #fff; color: #4542b8; box-shadow: 0 1px 2px rgba(20, 20, 40, .12); }
.setting-segments .btn-check:focus-visible + .btn { outline: 2px solid var(--accent); outline-offset: 1px; }
.setting-presets, .setting-slider, .setting-custom { display: flex; align-items: center; gap: 8px; }
.setting-presets { flex-wrap: wrap; }
.setting-presets .form-select { flex: 1 1 140px; }
.setting-custom .form-control { width: 110px; }
.setting-slider .form-range { flex: 1; min-width: 100px; }
.setting-slider .form-control { width: 76px; }
.setting-unit { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.setting-number { max-width: 160px; }
.setting-price { max-width: 200px; }
.setting-secret .secret-view, .setting-elsewhere { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.secret-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.secret-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.secret-edit .input-group { flex: 1 1 180px; }
.setting-value { min-width: 0; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.settings-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 18px; }
.settings-custom > div { flex: 1 1 260px; }
.settings-custom .settings-card-icon { background: #eef0f4; color: #5b6275; }
.settings-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1080; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 12px; background: #25272d; color: #fff; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s; }
.settings-toast.show { opacity: 1; transform: translate(-50%, 0); }
.settings-toast.failed { background: #a42335; }
html[data-theme="dark"] .settings-chip { background: #202125; }
html[data-theme="dark"] .settings-chip span { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .settings-chip.active { border-color: #6f68c9; background: #2a2838; color: #d5ceff; }
html[data-theme="dark"] .settings-chip.warn span { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .settings-ok { color: #8fe0b0; }
html[data-theme="dark"] .settings-nav a { color: #b6bdd0; }
html[data-theme="dark"] .settings-nav a:hover { background: #26272c; color: var(--ink); }
html[data-theme="dark"] .settings-nav a.active { background: #2a2838; color: #d5ceff; }
html[data-theme="dark"] .settings-card-head { background: linear-gradient(180deg, #24242b, #202125); }
html[data-theme="dark"] .settings-card-icon { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .settings-custom .settings-card-icon { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .setting-row { border-color: var(--border); }
html[data-theme="dark"] .setting-row.just-saved { background: #2a2838; }
html[data-theme="dark"] .setting-desc { color: #b6bdd0; }
html[data-theme="dark"] .setting-meta code { color: #d7a8e6; }
html[data-theme="dark"] .setting-problem { color: #ffb3c0; }
html[data-theme="dark"] .setting-restart { color: #f2c46d; }
html[data-theme="dark"] .setting-segments { background: #26272c; }
html[data-theme="dark"] .setting-segments .btn { color: #b6bdd0; }
html[data-theme="dark"] .setting-segments .btn-check:checked + .btn { background: #34304e; color: #fff; box-shadow: none; }
html[data-theme="dark"] .settings-toast { background: #ececef; color: #191a1e; }
html[data-theme="dark"] .settings-toast.failed { background: #ffb3c0; color: #3a1f25; }
/* A card too narrow for text and control side by side puts the control under the text. */
.settings-card { container-type: inline-size; }
@container (max-width: 820px) {
    .setting-row { grid-template-columns: minmax(0, 1fr) auto; }
    .setting-control { grid-column: 1 / -1; grid-row: 2; max-width: 480px; }
    .setting-side { grid-column: 2; grid-row: 1; align-self: start; }
}
@media (max-width: 760px) {
    .settings-layout { grid-template-columns: 1fr; gap: 12px; }
    .settings-nav { position: sticky; top: 0; z-index: 5; padding: 8px 0; background: #fff; }
    .settings-card, .setting-row { scroll-margin-top: 64px; }
    .settings-nav select { display: block; }
    .settings-nav ul { display: none; }
    .settings-search { flex: 1 1 100%; }
    .settings-card-head { padding: 14px; }
    .setting-row { padding: 12px 14px; }
    .setting-slider .form-range { min-width: 0; }
    html[data-theme="dark"] .settings-nav { background: #191a1e; }
}

/* The Users page: the administrators on their own, filters, and an Administrator switch on each person. */
.admins-card { margin-bottom: 18px; overflow: hidden; }
.admins-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, #fafaff, #fff); }
.admins-list { margin: 0; padding: 0; list-style: none; }
.admins-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 18px; border-top: 1px solid #eef0f5; }
.admins-list li:first-child { border-top: 0; }
.admins-list li.is-off { opacity: .7; }
.admin-avatar { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #edecff; color: #4542b8; font-size: 13px; font-weight: 700; }
.admins-who { flex: 1 1 220px; min-width: 0; }
.admins-who a { color: var(--ink); text-decoration: none; }
.admins-who a:hover { color: var(--accent); }
.admins-who .admin-badge { margin-left: 6px; }
.admins-who small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.admins-facts { display: grid; flex: 1 1 220px; color: var(--muted); font-size: 12.5px; }
.admin-switch { display: flex; align-items: center; min-height: 24px; margin: 0; padding-left: 0; }
.admin-switch .form-check-input { width: 2.4em; height: 1.3em; margin: 0; float: none; cursor: pointer; }
.admin-switch .form-check-input:disabled { cursor: not-allowed; }
.users-narrow { display: none; }
.add-admin-tabs { display: flex; }
.add-admin-tabs .btn { flex: 1; }
.add-admin-results { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.add-admin-results li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.add-admin-results li > div { min-width: 0; }
.add-admin-results small { display: block; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.add-admin-results .add-admin-none { color: var(--muted); font-size: 13px; border-style: dashed; }
html[data-theme="dark"] .admins-head { background: linear-gradient(180deg, #24242b, #202125); }
html[data-theme="dark"] .admins-list li { border-color: var(--border); }
html[data-theme="dark"] .admin-avatar { background: #34304e; color: #d5ceff; }
@media (max-width: 760px) {
    .users-wide { display: none; }
    .users-narrow { display: block; }
    .admins-head, .admins-list li { padding: 12px 14px; }
}

/* A workspace's AI tab. */
.ai-form { padding: 18px 20px; }
.ai-intro { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.ai-field { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.ai-field legend, .ai-field > .form-label { margin-bottom: 2px; font-size: 14px; font-weight: 650; float: none; }
.ai-field .admin-help { margin-bottom: 8px; }
.ai-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ai-card { display: flex; flex-direction: column; gap: 4px; height: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ai-card strong { font-size: 14px; }
.ai-card span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ai-card:hover { border-color: #c9c6f3; }
.btn-check:checked + .ai-card { border-color: var(--accent); background: #f3f2ff; box-shadow: inset 0 0 0 1px var(--accent); }
.btn-check:focus-visible + .ai-card { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-accepts { font-size: 11.5px; font-weight: 600; }
.ai-accepts.ok { color: #1d7a45; }
.ai-accepts.no { color: #a42335; }
.ai-check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.ai-grid .form-select { max-width: 280px; }
.ai-budget { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; }
.ai-budget-amount { width: 220px; }
.ai-spend { flex: 1 1 260px; min-width: 0; }
.ai-spend-line strong { font-size: 18px; }
.ai-spend-line span { color: var(--muted); font-size: 13px; }
.ai-meter { height: 8px; margin: 6px 0 2px; overflow: hidden; border-radius: 4px; background: #eef0f4; }
.ai-meter span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.ai-meter.near span { background: #d99a1e; }
.ai-meter.over span { background: #e0605a; }
.ai-lower { display: grid; gap: 16px; margin-top: 16px; }
.ai-stats { overflow-x: auto; }
.ai-stats, .ai-compare { padding: 16px 18px; }
.ai-compare-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ai-compare-column { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.ai-compare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ai-compare-head a { font-size: 12.5px; }
.ai-compare-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0 0 8px; font-size: 13px; }
.ai-compare-facts dt { color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; }
.ai-compare-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ai-compare-column .bubble { max-height: 360px; margin: 0; padding: 0; overflow: auto; font-size: 13px; }
html[data-theme="dark"] .ai-card { background: #202125; }
html[data-theme="dark"] .btn-check:checked + .ai-card { background: #2a2838; }
html[data-theme="dark"] .ai-accepts.ok { color: #8fe0b0; }
html[data-theme="dark"] .ai-accepts.no { color: #ffb3c0; }
html[data-theme="dark"] .ai-meter { background: #2c2d33; }
@media (max-width: 980px) {
    .ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .ai-form { padding: 14px; }
    .ai-grid, .ai-compare-results { grid-template-columns: 1fr; }
    .ai-cards { grid-template-columns: 1fr; }
    .ai-budget-amount { width: 100%; }
}

/* Performance: Cost and Speed. */
.perf-budgets { margin-bottom: 16px; padding: 16px 18px; }
.perf-budgets ul { display: grid; gap: 12px; margin: 0 0 10px; padding: 0; list-style: none; }
.perf-budget-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13.5px; }
.perf-budget-head span { color: var(--muted); }
.cost-bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cost-bar-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.cost-bar { height: 8px; margin: 4px 0 2px; overflow: hidden; border-radius: 4px; background: #eef0f4; }
.cost-bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.cost-bars small { color: var(--muted); font-size: 12px; }
.speed-waterfall { height: 18px; border-radius: 9px; }
.speed-legend { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 24px; }
.slow-sql { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; white-space: normal; word-break: break-word; }
html[data-theme="dark"] .cost-bar { background: #2c2d33; }

/* Data tab: more tables and how they link. */
.admin-section-title .section-optional { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #eef0f4; color: var(--quiet); font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; vertical-align: 1px; }
.section-empty { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 13px 16px; border: 1px dashed #d6d9e3; border-radius: 12px; color: var(--muted); font-size: 13px; }
.section-empty i { color: #7772c9; font-size: 18px; }
.extra-tables { display: grid; gap: 10px; }
.extra-tables:not(:empty) { margin-bottom: 12px; }
.extra-table { padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: 12px; background: #fbfbfd; }
.extra-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.extra-icon { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 9px; background: #edecff; color: #5755d9; font-size: 14px; }
.extra-name { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.extra-shared { display: flex; align-items: center; gap: 8px; margin: 0; padding-left: 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.extra-shared .form-check-input { width: 2.2em; height: 1.2em; margin: 0; float: none; cursor: pointer; }
.extra-shared .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.extra-shared .form-check-label { cursor: pointer; }
.extra-table .form-label { font-size: 12px; color: #657086; margin-bottom: 4px; }
.extra-columns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.extra-columns-label { flex-basis: 100%; color: var(--muted); font-size: 11.5px; }
.column-chip { border: 1px solid #d9d6fb; border-radius: 999px; background: #f4f3fe; padding: 2px 10px; color: #4542b8; font-size: 12px; line-height: 1.6; transition: background .15s, color .15s; }
.column-chip.is-off { border-color: var(--border); background: transparent; color: var(--muted); text-decoration: line-through; }
.extra-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.extra-actions > .btn { flex: none; }
.extra-add { display: flex; flex: 1 1 360px; gap: 8px; max-width: 560px; }
/* Optimise with AI: a leaner SOQL query beside the administrator's. */
.soql-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.soql-tools .suggest-button { margin: 0; }
.soql-tools .admin-help { margin: 0; font-size: 12.5px; }
.soql-tools .admin-help.problem { color: #a42335; }
.soql-suggestion { margin-top: 10px; padding: 12px 14px; border: 1px solid #d9d6fb; border-radius: 12px; background: #f8f7ff; font-size: 13px; }
.soql-suggestion-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; color: var(--ink); }
.soql-suggestion-head > i { color: var(--accent); }
.soql-counts { padding: 2px 9px; border-radius: 999px; background: #edecff; color: #4542b8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.soql-code { margin: 0 0 8px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.soql-suggestion ul { margin: 0 0 8px; padding-left: 18px; color: var(--muted); }
.soql-note { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; }
.soql-label { margin: 2px 0 4px; color: var(--ink); font-size: 12px; font-weight: 650; }
.soql-actions { display: flex; align-items: center; gap: 6px; }
html[data-theme="dark"] .soql-suggestion { border-color: #4b4775; background: #222130; }
html[data-theme="dark"] .soql-counts { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .soql-code { background: #1b1c20; }
html[data-theme="dark"] .soql-tools .admin-help.problem { color: #ffb3c0; }
/* A Salesforce workspace's other query or report. */
.extra-table.sf-source { border-color: #cfe0f5; background: #fafcff; }
.extra-table.sf-source .row { margin-bottom: 2px; }
.sf-source .sf-icon { background: #e6f0fb; color: #0b5cab; }
.admin-badge.sf-badge { margin: 0; background: #e6f0fb; color: #0b5cab; }
.sf-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.sf-preview .admin-help { margin: 0; font-size: 12.5px; }
.sf-preview .admin-help.problem { color: #a42335; }
html[data-theme="dark"] .extra-table.sf-source { border-color: #2c3b4f; background: #1b1e24; }
html[data-theme="dark"] .sf-source .sf-icon, html[data-theme="dark"] .admin-badge.sf-badge { background: #1f3147; color: #9cc7f2; }
html[data-theme="dark"] .sf-preview .admin-help.problem { color: #ffb3c0; }
.extra-add .form-select { flex: 1; min-width: 0; }
.extra-add .btn { flex: none; white-space: nowrap; }
.link-list { display: grid; gap: 8px; }
.link-list:not(:empty) { margin-bottom: 10px; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.link-equals { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #f1f2f6; color: #7772c9; font-size: 13px; }
html[data-theme="dark"] .admin-section-title .section-optional { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .section-empty { border-color: #3a3b42; }
html[data-theme="dark"] .extra-table { background: #1c1d21; }
html[data-theme="dark"] .extra-icon { background: #2b293a; color: #aaa2ff; }
html[data-theme="dark"] .column-chip { border-color: #4b4775; background: #2a2838; color: #d5ceff; }
html[data-theme="dark"] .column-chip.is-off { border-color: #3a3b42; background: transparent; color: #8a90a2; }
html[data-theme="dark"] .link-equals { background: #2c2d33; color: #aaa2ff; }

/* Rules tab: a card per table with its rules and column settings, then definitions and joins. */
.rules-intro { margin-bottom: 4px; }
.rules-table { margin-top: 14px; padding: 16px 16px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fbfbfd; }
.rules-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rules-head .extra-name { flex: 0 1 auto; }
.rules-table .form-label { font-size: 12.5px; color: #657086; margin-bottom: 5px; }
.rules-columns { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.rules-columns summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--ink); font-size: 13px; font-weight: 600; }
.rules-columns summary::-webkit-details-marker { display: none; }
.rules-columns summary::before { content: "\F285"; font-family: bootstrap-icons; font-size: 11px; color: var(--muted); transition: transform .15s; }
.rules-columns[open] summary::before { transform: rotate(90deg); }
.rules-columns summary .admin-badge { margin: 0; font-weight: 600; }
.rules-columns > .admin-help { margin: 10px 0; }
.rules-grid-wrap { max-height: 460px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.rules-grid { margin: 0; font-size: 12.5px; }
.rules-grid thead th { position: sticky; top: 0; z-index: 1; padding: 9px 8px; background: #f6f7fa; color: #657086; font-size: 11.5px; font-weight: 650; white-space: nowrap; border-bottom: 1px solid var(--border); }
.rules-grid tbody th, .rules-grid td { padding: 6px 8px; vertical-align: middle; border-color: #eef0f5; }
.rules-grid tbody th { font-weight: 400; white-space: nowrap; }
.rules-grid tbody th small { display: block; color: var(--muted); font-size: 11px; }
.rules-grid tbody tr:hover { background: #fafafe; }
.rules-column { font-weight: 600; color: var(--ink); }
.rules-grid td { min-width: 130px; }
.rules-grid td.rules-check { min-width: 0; text-align: center; }
.rules-grid .form-control-sm, .rules-grid .form-select-sm { border-color: #e3e6ee; }
.definition-list { display: grid; gap: 8px; margin-bottom: 10px; }
.definition-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 8px; }
.rules-joins .admin-check { max-width: 640px; }
html[data-theme="dark"] .rules-table { background: #1c1d21; }
html[data-theme="dark"] .rules-grid-wrap { background: #202125; }
html[data-theme="dark"] .rules-grid thead th { background: #26272c; color: #b6bdd0; }
html[data-theme="dark"] .rules-grid tbody tr:hover { background: #24252a; }
html[data-theme="dark"] .rules-grid tbody th, html[data-theme="dark"] .rules-grid td { border-color: #2c2d33; }
@media (max-width: 575px) {
    .link-row { grid-template-columns: minmax(0, 1fr) auto; }
    .link-row .link-equals { display: none; }
    .definition-row { grid-template-columns: minmax(0, 1fr) auto; }
    .definition-row input:nth-of-type(2) { grid-column: 1; }
    .extra-head { flex-wrap: wrap; }
    .extra-name { flex-basis: calc(100% - 80px); }
    .extra-shared { order: 3; }
}
/* A value the AI suggested, until it's changed. */
.workspace-form .is-suggested { border-color: #a9a4f0; background-color: #f6f5ff; box-shadow: 0 0 0 3px #5855d91a; }
.workspace-form .form-check-input.is-suggested { background-color: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] .workspace-form .is-suggested { border-color: #6d67c9; background-color: #26243a; }
.rules-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; }
.rules-note i { color: #7772c9; }
/* A run page's faster version of a query. */
.run-sql + .soql-tools, .run-step-body .soql-tools { margin-top: 8px; }
.soql-note.problem { color: #a42335; font-weight: 600; }
html[data-theme="dark"] .soql-note.problem { color: #ffb3c0; }

/* Administration's menu (_AdminNav): its sections in groups, with a count of what needs doing beside each. A column
   beside the page on a wide screen; a menu naming the section you're in on a narrower one. */
.admin-nav-title { margin: 2px 10px 10px; color: var(--quiet); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-nav-list { display: grid; gap: 1px; }
.admin-nav-group { margin: 14px 10px 4px; color: var(--quiet); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.admin-nav-list a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: 8px; color: var(--ink); font-size: 13.5px; text-decoration: none; }
.admin-nav-list a i { width: 18px; color: var(--muted); font-size: 15px; text-align: center; }
.admin-nav-list a:hover { background: #f1f1f6; color: var(--ink); }
.admin-nav-list a.active { background: #edecff; color: var(--accent); font-weight: 600; }
.admin-nav-list a.active i { color: var(--accent); }
.admin-nav-count { min-width: 20px; margin-left: auto; padding: 0 6px; border-radius: 999px; background: #fdecee; color: #a42335; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.admin-nav-menu > summary { display: none; }
@media (min-width: 1100px) {
    .admin-inner:has(> .admin-nav) { position: relative; max-width: 1290px; padding-left: 236px; }
    .admin-nav { position: absolute; top: 0; bottom: 0; left: 0; width: 212px; }
    .admin-nav-menu { position: sticky; top: 0; max-height: calc(100dvh - 92px); overflow-y: auto; padding-bottom: 12px; }
}
@media (max-width: 1099.98px) {
    .admin-nav { margin-bottom: 16px; }
    .admin-nav-menu { border: 1px solid var(--border); border-radius: 12px; background: #fff; }
    .admin-nav-menu > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; cursor: pointer; list-style: none; }
    .admin-nav-menu > summary::-webkit-details-marker { display: none; }
    .admin-nav-menu > summary strong { font-size: 15px; font-weight: 650; }
    .admin-nav-menu > summary i { margin-left: auto; color: var(--muted); transition: transform .15s; }
    .admin-nav-menu[open] > summary i { transform: rotate(180deg); }
    .admin-nav-caption { order: -1; padding-right: 10px; border-right: 1px solid var(--border); color: var(--quiet); font-size: 12px; }
    .admin-nav-title { display: none; }
    .admin-nav-list { padding: 4px 8px 10px; border-top: 1px solid var(--border); }
}
html[data-theme="dark"] .admin-nav-list a:hover { background: #26272c; }
html[data-theme="dark"] .admin-nav-list a.active { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .admin-nav-list a.active i { color: #d5ceff; }
html[data-theme="dark"] .admin-nav-count { background: #3a1f25; color: #ffb3c0; }
@media (max-width: 1099.98px) { html[data-theme="dark"] .admin-nav-menu { background: #202125; } }

/* The Administration home: four numbers that open the page behind them, and what needs attention by tier. */
.home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.home-tile { display: flex; flex-direction: column; gap: 3px; min-height: 132px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; }
.home-tile:hover { border-color: #bcbaf0; color: var(--ink); box-shadow: 0 6px 18px -14px #5755d9aa; }
.home-tile-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--quiet); font-size: 12.5px; }
.home-tile-label i { opacity: .6; }
.home-tile strong { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.home-tile strong small { color: var(--quiet); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.home-tile-note { color: var(--quiet); font-size: 12px; }
.home-tile-note.up { color: #1d7a45; }
.home-tile-empty strong { color: var(--accent); font-size: 19px; }
.home-spark { width: 100%; height: 30px; margin-top: auto; }
.home-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.home-meter { position: relative; display: block; height: 6px; margin-top: auto; border-radius: 999px; background: #ecebf5; }
.home-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.home-meter.near > span { background: #c98400; }
.home-meter.over > span { background: #c0392b; }
.home-meter > i { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .45; }
.home-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; color: var(--quiet); font-size: 12px; }
.home-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #1d7a45; }
.home-legend .bad::before { background: #c0392b; }
.home-attention { padding: 18px 20px; }
.home-attention-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.home-attention-head h3 { margin: 0 8px 0 0; font-size: 16px; font-weight: 650; }
.home-tier { display: flex; align-items: center; gap: 8px; margin: 16px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.home-tier.broken { color: #a42335; }
.home-tier.action { color: #9a5b00; }
.home-items { margin: 0; padding: 0; list-style: none; }
.home-items li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.home-item-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #f1f2f6; color: var(--muted); font-size: 15px; }
.home-item-icon.broken { background: #fdecee; color: #b4233b; }
.home-item-icon.action { background: #fdf1dc; color: #9a5b00; }
.home-item-text { display: grid; gap: 1px; min-width: 0; }
.home-item-text strong { font-size: 13.5px; font-weight: 600; }
.home-item-text span { color: var(--quiet); font-size: 12.5px; overflow-wrap: anywhere; }
.home-suggestions { margin-top: 14px; padding: 0 12px; border: 1px dashed var(--border); border-radius: 10px; }
.home-suggestions > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 0; cursor: pointer; font-size: 13px; }
.home-suggestions > summary span { color: var(--quiet); font-size: 12.5px; }
.home-suggestions > summary i { color: #9a5b00; }
.home-suggestions .home-items li:first-child { border-top-color: var(--border); }
@media (max-width: 1100px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .home-tile { min-height: 116px; padding: 12px 14px; }
    .home-tile strong { font-size: 22px; }
    .home-items li { grid-template-columns: 34px minmax(0, 1fr); }
    .home-items li .btn { grid-column: 2; justify-self: start; }
}
html[data-theme="dark"] .home-tile { background: #202125; }
html[data-theme="dark"] .home-tile:hover { border-color: #5a5480; }
html[data-theme="dark"] .home-tile-note.up { color: #8fe0b0; }
html[data-theme="dark"] .home-meter { background: #2c2d33; }
html[data-theme="dark"] .home-tier.broken { color: #ffb3c0; }
html[data-theme="dark"] .home-tier.action { color: #f2c46d; }
html[data-theme="dark"] .home-item-icon { background: #2c2d33; }
html[data-theme="dark"] .home-item-icon.broken { background: #3a1f25; color: #ffb3c0; }
html[data-theme="dark"] .home-item-icon.action { background: #3d2f14; color: #f2c46d; }

/* Settings in two levels: Basic (saves as it changes, with Undo) and Advanced (Save, then a question). */
.settings-levels { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 4px 0 12px; }
.settings-level { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: #fff; }
.settings-level-button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.settings-level-button.active { background: #edecff; color: var(--accent); }
.settings-level-button .admin-nav-count { margin-left: 0; }
.settings-tech-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--quiet); font-size: 13px; }
.settings-tech-switch .form-check-input { margin: 0; }
.settings-page:not(.show-tech) .setting-tech { display: none; }
.settings-advanced-note { margin-bottom: 14px; }
.setting-hold { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; padding: 6px 8px 6px 12px; border-radius: 9px; background: #fdf1dc; color: #7a4a00; font-size: 12.5px; font-weight: 600; }
.setting-hold span { margin-right: auto; }
.settings-toast.has-undo.show { pointer-events: auto; }
.settings-toast-undo { margin-left: 12px; padding: 0; border: 0; background: transparent; color: #c9c6ff; font-weight: 700; text-decoration: underline; }
.cost-prices { margin-bottom: 16px; }
html[data-theme="dark"] .settings-level { background: #202125; }
html[data-theme="dark"] .settings-level-button.active { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .setting-hold { background: #3d2f14; color: #f2c46d; }
html[data-theme="dark"] .settings-toast-undo { color: var(--accent); }

/* A workspace's header: where it is, its status (switched off or on from its menu), Open in chat and ⋯. */
.workspace-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.workspace-crumb { color: var(--quiet); font-size: 13px; text-decoration: none; }
.workspace-crumb:hover { color: var(--accent); }
.workspace-crumb-sep { color: var(--quiet); font-size: 11px; }
.workspace-head-spacer { flex: 1; }
.workspace-status-button { display: inline-flex; align-items: center; border: 0; cursor: pointer; font-size: 12px; padding: 4px 10px; }
.workspace-status-menu form { margin: 0; }
.workspace-more { border: 1px solid var(--border); }

/* The health strip above a live workspace's tabs. */
.workspace-health { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
.health-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; border-left: 1px solid var(--border); color: var(--ink); text-decoration: none; }
.health-cell:first-child { border-left: 0; }
a.health-cell:hover { background: #f7f7fd; color: var(--ink); }
.health-label { color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
/* Each cell's heading and detail take up to two lines (the whole of either on hover) rather than being cut short on one. */
.health-cell strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.health-cell strong i { margin-right: 6px; }
.health-cell > span:not(.health-label):not(.home-meter) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--quiet); font-size: 12px; line-height: 1.4; }
.health-cell > span[hidden] { display: none !important; }
.health-cell .home-meter { margin-top: 6px; }
.health-cell.tone-ok strong i { color: #1d7a45; }
.health-cell.tone-info strong i { color: var(--accent); }
.health-cell.tone-warn strong i { color: #9a5b00; }
.health-cell.tone-err strong { color: #a42335; }
.workspace-problem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; padding: 12px 16px; border: 1px solid #f3c3ca; border-left: 4px solid #c0392b; border-radius: 12px; background: #fdecee; }
.workspace-problem > i { color: #b4233b; font-size: 18px; }
.workspace-problem > div { display: grid; flex: 1 1 260px; min-width: 0; }
.workspace-problem strong { font-size: 13.5px; }
.workspace-problem span { color: #5d2a33; font-size: 12.5px; overflow-wrap: anywhere; }
.workspace-problem form { margin: 0; }
.workspace-health.has-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.workspace-health.has-five .health-cell { padding: 12px 14px; }
.workspace-health.has-five .health-cell strong { font-size: 14px; }
@media (max-width: 900px) {
    .workspace-health, .workspace-health.has-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .health-cell:nth-child(2n + 1) { border-left: 0; }
    .health-cell:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
html[data-theme="dark"] .workspace-health { background: #202125; }
html[data-theme="dark"] a.health-cell:hover { background: #26272c; }
html[data-theme="dark"] .health-cell.tone-ok strong i { color: #8fe0b0; }
html[data-theme="dark"] .health-cell.tone-warn strong i { color: #f2c46d; }
html[data-theme="dark"] .health-cell.tone-err strong { color: #ffb3c0; }
html[data-theme="dark"] .workspace-problem { border-color: #5c2a33; border-left-color: #ff8fa3; background: #3a1f25; }
html[data-theme="dark"] .workspace-problem > i { color: #ffb3c0; }
html[data-theme="dark"] .workspace-problem span { color: #f1c6cd; }

/* Teach AIDA: its sections, one at a time. */
.teach-nav { display: flex; gap: 4px; margin: -4px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.teach-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.teach-nav a:hover { background: #f1f1f6; color: var(--ink); }
.teach-nav a.active { background: #edecff; color: var(--accent); font-weight: 650; }
.teach-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #eef0f4; color: var(--quiet); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.teach-nav a.active .teach-count { background: #fff; color: var(--accent); }
.teach-part > .rules-table:first-of-type { margin-top: 4px; }
.history-summary small { display: block; color: var(--quiet); font-size: 12px; }
html[data-theme="dark"] .teach-nav a:hover { background: #26272c; }
html[data-theme="dark"] .teach-nav a.active { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .teach-count { background: #2c2d33; color: #b6bdd0; }
html[data-theme="dark"] .teach-nav a.active .teach-count { background: #191a1e; color: #d5ceff; }

/* Teach AIDA's columns: a table at a time, found by name or narrowed to those with settings, each with an "AIDA can use"
   switch; a column turned off keeps its settings but shows a note in their place. */
.columns-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 12px; }
.columns-table { width: auto; max-width: 320px; }
.columns-search { position: relative; flex: 1 1 200px; max-width: 280px; }
.columns-search i { position: absolute; top: 50%; left: 12px; color: var(--quiet); font-size: 13px; transform: translateY(-50%); pointer-events: none; }
.columns-search input { padding-left: 34px; }
.filter-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); font-size: 13px; font-weight: 550; }
.filter-chip:hover { color: var(--ink); }
.filter-chip[aria-pressed="true"] { border-color: #c9c4ff; background: #edecff; color: var(--accent); font-weight: 650; }
.columns-none { margin: 4px 0 12px; color: var(--quiet); font-size: 13px; }
.rules-grid th.rules-use, .rules-grid td.rules-use { width: 104px; min-width: 0; text-align: center; }
.rules-grid td.rules-use .form-switch { display: inline-flex; min-height: 0; margin: 0; padding-left: 0; }
.rules-grid td.rules-use .form-check-input { width: 2.2em; height: 1.2em; margin: 0; float: none; cursor: pointer; }
.rules-grid td.rules-use .form-check-input:checked { border-color: var(--accent); background-color: var(--accent); }
.rules-grid td.rules-off-note { display: none; color: var(--quiet); font-size: 12.5px; }
.rules-grid td.rules-off-note i { margin-right: 6px; }
.rules-grid tr.is-off > td:not(.rules-use):not(.rules-off-note) { display: none; }
.rules-grid tr.is-off > td.rules-off-note { display: table-cell; }
.rules-grid tr.is-off .rules-column { color: var(--quiet); text-decoration: line-through; }
html[data-theme="dark"] .filter-chip { border-color: #3a3b42; background: #202125; }
html[data-theme="dark"] .filter-chip[aria-pressed="true"] { border-color: #4a4470; background: #34304e; color: #d5ceff; }

/* The Data tab's map of sources: the main one on the left, each other one beside it with the columns that link them, a
   warning for a copy cut short, and a table of them all with Edit (which jumps to its part of the form below). */
.source-map-card { margin-bottom: 14px; padding: 20px 22px; }
.source-map-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.source-map { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: center; gap: 0; margin-bottom: 16px; }
.source-node { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; }
.source-node.is-main { border-color: #c9c4ff; background: #f7f6ff; }
.source-node.is-cut { border-color: #f0c36d; background: #fffaf0; }
.source-node.is-empty { margin-left: 56px; border-style: dashed; color: var(--muted); font-size: 13px; }
.source-node.is-empty:hover { border-color: var(--accent); color: var(--accent); }
.source-node-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; background: #edecff; color: var(--accent); font-size: 16px; }
.source-node-body { display: grid; flex: 1; min-width: 0; }
.source-node-body strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.source-node-body small { overflow: hidden; color: var(--quiet); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.source-branches { display: grid; gap: 10px; margin: 0; padding: 0 0 0 28px; list-style: none; border-left: 2px solid #d9d6fb; margin-left: 28px; }
.source-branch { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); align-items: center; position: relative; }
.source-branch::before { content: ""; position: absolute; top: 50%; left: -28px; width: 28px; border-top: 2px solid #d9d6fb; }
.source-link { display: grid; gap: 2px; padding: 0 12px; color: var(--accent); font-family: var(--bs-font-monospace); font-size: 11.5px; text-align: center; overflow-wrap: anywhere; }
.source-link.is-unlinked { color: var(--quiet); font-family: inherit; font-style: italic; }
.source-cut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; padding: 12px 16px; border: 1px solid #f3dca8; border-left: 4px solid #d99a1e; border-radius: 12px; background: #fff8ea; }
.source-cut > i { color: #9a5b00; font-size: 18px; }
.source-cut > div { display: grid; flex: 1 1 260px; min-width: 0; }
.source-cut strong { font-size: 13.5px; }
.source-cut span { color: #6b4a12; font-size: 12.5px; }
.source-map-card .admin-table-wrap { position: relative; overflow-x: auto; }
.source-table td { vertical-align: middle; }
.source-table td small { font-size: 12px; }
.source-anchor, .extra-table { scroll-margin-top: 90px; }
.source-anchor:target, .extra-table:target { animation: source-flash 1.8s ease-out; }
@keyframes source-flash { 0%, 40% { box-shadow: 0 0 0 4px rgba(91, 84, 232, .28); } 100% { box-shadow: 0 0 0 0 rgba(91, 84, 232, 0); } }
@media (max-width: 760px) {
    .source-map { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .source-branches { margin-left: 16px; padding-left: 16px; }
    .source-branch { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .source-branch::before { left: -16px; width: 16px; }
    .source-link { padding: 0; text-align: left; }
    .source-node.is-empty { margin-left: 0; }
}

/* The connection and how AIDA reads it, side by side; the connection's fields open in the form below when asked for. */
.data-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.data-card { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px; }
.data-card.reading-card { flex-direction: column; align-items: stretch; gap: 0; }
.data-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.data-card-head .admin-section-title { margin: 0; }
.data-card-icon { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; background: #f1f2f6; color: var(--muted); font-size: 16px; }
.data-card-title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.data-card-detail { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.data-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.data-card .test-result { margin-top: 10px; }
.data-connection { margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
@media (max-width: 900px) { .data-cards { grid-template-columns: minmax(0, 1fr); } }
html[data-theme="dark"] .source-node { background: #202125; }
html[data-theme="dark"] .source-node.is-main { border-color: #4a4470; background: #26243a; }
html[data-theme="dark"] .source-node.is-cut { border-color: #6b5320; background: #2e2716; }
html[data-theme="dark"] .source-node-icon { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .source-branches, html[data-theme="dark"] .source-branch::before { border-color: #4a4470; }
html[data-theme="dark"] .source-link { color: #c9c2ff; }
html[data-theme="dark"] .source-cut { border-color: #6b5320; border-left-color: #f2c26b; background: #2e2716; }
html[data-theme="dark"] .source-cut > i { color: #f2c26b; }
html[data-theme="dark"] .source-cut span { color: #e9d3a6; }
html[data-theme="dark"] .data-card-icon { background: #2c2d33; color: #b6bdd0; }

/* Teach AIDA's history: what each version changed, as tags, and View's comparison with the version before. */
.history-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.history-tag { padding: 1px 8px; border-radius: 999px; background: #eef0f4; color: #4b5266; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.history-tag.is-first { background: #edecff; color: var(--accent); }
.history-diff { margin: 6px 0 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; font-family: var(--bs-font-monospace); font-size: 12px; }
.diff-line { position: relative; padding: 3px 12px 3px 30px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-line::before { content: attr(data-sign); position: absolute; left: 12px; color: var(--quiet); }
.diff-line.is-added { background: #e9f7ef; color: #14532d; }
.diff-line.is-added::before { color: #1d7a45; }
.diff-line.is-removed { background: #fdecee; color: #7f1d1d; }
.diff-line.is-removed::before { color: #b4233b; }
.diff-line.is-skipped { background: #f6f7fa; color: var(--quiet); font-family: var(--bs-body-font-family); font-style: italic; }
.history-same { margin: 6px 0 12px; color: var(--quiet); font-size: 12.5px; }
.history-full summary { color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }
html[data-theme="dark"] .history-tag { background: #2c2d33; color: #c3c8d6; }
html[data-theme="dark"] .history-tag.is-first { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .diff-line.is-added { background: #173526; color: #b6ecc9; }
html[data-theme="dark"] .diff-line.is-removed { background: #3a1f25; color: #f6c3cc; }
html[data-theme="dark"] .diff-line.is-skipped { background: #26272c; }

/* The answer card: a long table shows its first rows (Show all opens every row full screen), "How I got this" is one
   source line just above the actions, a failed answer looks like one and offers Try again, and older answers show their
   actions on hover or focus. */
.bubble .table-responsive.is-previewed { max-height: none; overflow-y: hidden; margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.aida-app .bubble .data-table tr.is-folded { display: none; }
.table-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px; background: #f7f7fb; color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.table-more:hover { background: #efeefc; }
.table-viewer .modal-header { gap: 12px; }
.table-viewer .modal-title { font-size: 15px; }
.table-viewer-actions { display: flex; gap: 4px; margin-left: auto; }
/* The full-screen table: its tools in a bar above it, the rows (or the pivot) filling the rest. */
.table-viewer .modal-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.table-viewer .viewer-tools { flex: none; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.table-viewer-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.table-viewer .pivot-panel { flex: 1 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr); padding: 12px 16px 16px; }
.table-viewer .pivot-out { max-height: none; min-height: 0; border: 1px solid var(--border); border-radius: 12px; }
/* The full-screen table, the pivot and a full-screen chart's table read alike. */
:is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table { width: auto; min-width: 100%; margin: 0; font-size: 13px; border-collapse: separate; border-spacing: 0; }
:is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table > :not(caption) > * > * { padding: 9px 16px; border-width: 0 0 1px; border-color: #eef0f5; background: var(--bg, #fff); white-space: nowrap; }
:is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table thead th { position: sticky; top: 0; z-index: 2; background: #f7f7f9; color: var(--quiet); font-size: 11px; font-weight: 650; letter-spacing: .4px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
:is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--border); }
:is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table thead tr > :first-child { z-index: 3; }
:is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
:is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table td.repeat { color: transparent; }
:is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table tr.total-row > * { border-top: 2px solid #d9d6fb; background: #f7f7fd; font-weight: 650; }
.chart-viewer .chart-full-table { border: 1px solid var(--border); border-radius: 12px; }

.bubble-bot blockquote.answer-source { display: grid; gap: 4px; margin: 14px 0 0; padding: 8px 12px 8px 34px; position: relative; border: 0; border-top: 1px solid #eef0f5; border-radius: 0; background: transparent; color: var(--quiet); font-size: 12.5px; }
.bubble-bot blockquote.answer-source::before { content: "\f05a"; position: absolute; left: 12px; top: 9px; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #b3b0e6; }
.bubble-bot blockquote.answer-source strong { color: #5d6577; font-weight: 600; }
.answer-defs summary { color: var(--accent); font-weight: 600; cursor: pointer; }
.answer-defs p { margin: 4px 0 0; }

.answer.is-failed .bubble-bot { padding: 12px 16px; border: 1px solid #f3c3ca; border-left: 3px solid #e07b8b; border-radius: 12px; background: #fff8f9; }
.answer.is-failed .bubble-bot::before { content: "Couldn't answer"; display: block; margin-bottom: 6px; color: #a42335; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.answer.is-stopped .bubble-bot::before { content: "Stopped"; display: block; margin-bottom: 6px; color: var(--quiet); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.answer-action.is-retry { color: var(--accent); font-weight: 600; }

.feedback-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.feedback-reason { padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: #5d6577; font-size: 12px; cursor: pointer; }
.feedback-reason:hover { border-color: #c9c4ff; color: var(--accent); }
.feedback-reason[aria-pressed="true"] { border-color: #c9c4ff; background: #edecff; color: var(--accent); font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
    .answer:not(.is-latest) .answer-actions > :not(.message-time):not(.answer-status) { opacity: 0; transition: opacity .15s; }
    /* As specific as the rule above, or it never wins and older answers' actions (Pin among them) stay hidden. */
    .answer:not(.is-latest):hover .answer-actions > :not(.message-time):not(.answer-status),
    .answer:not(.is-latest):focus-within .answer-actions > :not(.message-time):not(.answer-status),
    .answer.is-failed:not(.is-latest) .answer-actions > :not(.message-time):not(.answer-status),
    .answer.is-stopped:not(.is-latest) .answer-actions > :not(.message-time):not(.answer-status) { opacity: 1; }
}
@media (pointer: coarse) {
    .answer-action { min-height: 40px; padding: 8px 10px; }
}

/* The message box: "Answer as" with what it's set to, a chip for a file the next answer will be, and Send turning into
   Stop while AIDA answers. */
.format-prefix { color: var(--quiet); }
.format-button.is-file .format-prefix { color: inherit; opacity: .8; }
.next-answer { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 4px 6px 4px 11px; border: 1px solid #d9d6fb; border-radius: 999px; background: #f4f3fe; color: #4542b8; font-size: 12.5px; }
.next-answer-clear { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 12px; cursor: pointer; }
.next-answer-clear:hover { background: #e4e2fb; }
#sendBtn.is-stop { background: #fff; border: 1px solid var(--border); color: #ad3043; cursor: pointer; }
#sendBtn.is-stop:hover { border-color: #e4b3bb; background: #fff5f6; }
@media (max-width: 560px) { .format-prefix { display: none; } }

html[data-theme="dark"] .table-more { background: #242529; }
html[data-theme="dark"] :is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table > :not(caption) > * > * { border-color: #2f3036; background: #1c1d21; }
html[data-theme="dark"] :is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table thead th { background: #26272c; color: #a3a8b8; }
html[data-theme="dark"] :is(.table-viewer-scroll, .pivot-out, .chart-full-table) .data-table tr.total-row > * { border-top-color: #4b4775; background: #2a2838; }
html[data-theme="dark"] .bubble-bot blockquote.answer-source { border-top-color: #2f3036; background: transparent; }
html[data-theme="dark"] .bubble-bot blockquote.answer-source strong { color: #c3c6d2; }
html[data-theme="dark"] .answer.is-failed .bubble-bot { border-color: #5c2a33; border-left-color: #ff8fa3; background: #2c1e22; }
html[data-theme="dark"] .answer.is-failed .bubble-bot::before { color: #ffb3c0; }
html[data-theme="dark"] .feedback-reason { background: #242529; color: #c3c6d2; border-color: #3a3b42; }
html[data-theme="dark"] .feedback-reason[aria-pressed="true"] { background: #34304e; color: #d5ceff; border-color: #4b4775; }
html[data-theme="dark"] .next-answer { background: #34304e; border-color: #4b4775; color: #d5ceff; }
html[data-theme="dark"] #sendBtn.is-stop { background: #242529; border-color: #3a3b42; color: #ff8fa3; }

/* A workspace's first screen: the conversation to continue, the workspace with how fresh its data is, what it covers,
   questions to try as rows that send when chosen, and the person's saved questions. */
.empty-state { max-width: 680px; margin: 0 auto; text-align: left; }
.continue-chat { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; padding: 12px 14px; border: 1px solid #d9d6fb; border-radius: 14px; background: #f7f6ff; color: var(--ink); text-decoration: none; }
.continue-chat:hover { border-color: #bcbaf0; color: var(--ink); }
.continue-chat > i { color: var(--accent); font-size: 16px; }
.continue-chat > span:not(.continue-go) { display: grid; flex: 1; min-width: 0; }
.continue-chat strong { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.continue-chat small { color: var(--quiet); font-size: 12px; }
.continue-go { padding: 5px 12px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; }
.welcome-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.welcome-head .welcome-symbol { flex: none; width: 48px; height: 48px; margin: 0; border-radius: 15px; font-size: 19px; transform: none; }
.welcome-head .welcome-symbol i { transform: none; }
.empty-state .welcome-head h2 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.8px; }
.welcome-fresh { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--quiet); font-size: 12.5px; }
.empty-state .welcome-description { margin: 0 0 24px; font-size: 13.5px; line-height: 1.65; }
.welcome-description .link-button { font-size: 13px; }
.welcome-heading { margin: 0 0 8px; color: #9399aa; font-size: 10.5px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; }
.starter-list { display: grid; gap: 8px; margin-bottom: 24px; }
.starter-list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); font-size: 13.5px; text-align: left; transition: border-color .15s, box-shadow .15s; }
.starter-list button:hover { border-color: #bcbaf0; box-shadow: 0 5px 20px #343a6810; }
.starter-list button > i:first-child { color: #7772c9; }
.starter-list button span { flex: 1; min-width: 0; }
.starter-go { color: var(--quiet); font-size: 12px; transition: transform .15s, color .15s; }
.starter-list button:hover .starter-go { color: var(--accent); transform: translateX(2px); }
.saved-starters { max-width: none; margin: 0; }
.saved-starters-list { display: grid; gap: 6px; justify-content: stretch; }
.saved-starter { display: flex; width: 100%; padding: 8px 8px 8px 14px; border-radius: 12px; }
.saved-starter span { flex: 1; }
@media (max-width: 560px) {
    .continue-chat { margin-bottom: 18px; }
    .welcome-head .welcome-symbol { width: 40px; height: 40px; font-size: 16px; }
    .starter-list button { padding: 11px 12px; font-size: 13px; }
}
html[data-theme="dark"] .continue-chat { border-color: #4b4775; background: #26243a; }
html[data-theme="dark"] .starter-list button { border-color: var(--border); background: #242529; color: var(--ink); }
html[data-theme="dark"] .continue-go { background: #c0baff; color: #1c1b2b; }

/* The Files list's "Made by AIDA": kept files until when, with Download; those no longer kept, with Make again. */
.files-made { margin-top: 6px; padding-top: 2px; border-top: 1px solid var(--border); }
a.files-use { text-decoration: none; }
.files-row.is-gone strong { color: var(--quiet); }
.file-gone .link-button { font-size: inherit; }
.table-viewer .modal-header .btn-close { margin-left: 8px; }

/* Saved questions and schedules as one library: a tab for each, and each saved question's schedule on its row. */
.library-head { gap: 12px; }
.library-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 11px; background: #f6f7fa; }
.library-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.library-tab:hover { color: var(--ink); }
.library-tab.is-current { background: #fff; color: var(--accent); box-shadow: 0 1px 3px #16203818; }
.saved-schedule { display: inline-flex; align-items: center; gap: 5px; color: #1d7a45; font-weight: 600; }
.saved-schedule.failed { color: #a42335; }
.saved-email { font-size: 12px; }
html[data-theme="dark"] .library-tabs { background: #1a1b1f; }
html[data-theme="dark"] .library-tab.is-current { background: #2a2b31; color: #c9c4ff; box-shadow: none; }
html[data-theme="dark"] .saved-schedule { color: #8fe0b0; }

/* The account menu: initials on the button; who's signed in, the colour theme and Sign out in the menu. */
.account-button { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--muted); }
.account-button:hover, .account-button[aria-expanded="true"] { border-color: #c9c4ff; color: var(--accent); }
.account-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #edecff; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.account-chevron { font-size: 11px; }
.account-options { min-width: 240px; padding: 6px; border-radius: 12px; }
.account-options .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 10px; }
.account-options .dropdown-item[aria-checked="true"] { background: #f1f0fd; color: var(--accent); font-weight: 600; }
.account-options .dropdown-header { padding: 6px 10px 2px; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.account-who { display: grid; padding: 8px 10px 6px; }
.account-who strong { font-size: 13.5px; }
.account-who small { overflow: hidden; color: var(--quiet); font-size: 12px; text-overflow: ellipsis; }
html[data-theme="dark"] .account-button { background: #242529; border-color: var(--border); }
html[data-theme="dark"] .account-avatar { background: #34304e; color: #d5ceff; }
html[data-theme="dark"] .account-options .dropdown-item[aria-checked="true"] { background: #34304e; color: #d5ceff; }

/* The sidebar: conversations grouped by when they were used, and a workspace's Delete all only on hover or focus. */
.conversation-group { margin: 10px 8px 2px 14px; color: #9399aa; font-size: 10px; font-weight: 650; letter-spacing: 1px; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
    .app-link button[data-workspace-id] { opacity: 0; transition: opacity .15s; }
    .app-link:hover button[data-workspace-id], .app-link:focus-within button[data-workspace-id] { opacity: 1; }
}

/* On a phone: a workspace's tabs as one picker naming the open one, and only the most urgent health cell. */
.workspace-tabs-menu { display: none; margin-bottom: 14px; }
.workspace-tabs-menu summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--accent); font-weight: 600; list-style: none; cursor: pointer; }
.workspace-tabs-menu summary::-webkit-details-marker { display: none; }
.workspace-tabs-menu summary span { flex: 1; }
.workspace-tabs-menu[open] summary .bi-chevron-down { transform: rotate(180deg); }
.workspace-tabs-menu nav { display: grid; gap: 2px; margin-top: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #16203818; }
.workspace-tabs-menu nav a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.workspace-tabs-menu nav a.active { background: #edecff; color: var(--accent); font-weight: 600; }
@media (max-width: 575.98px) {
    .workspace-tabs { display: none; }
    .workspace-tabs-menu { display: block; }
    .workspace-health { grid-template-columns: minmax(0, 1fr); }
    .health-cell:not(.is-urgent) { display: none; }
    .health-cell.is-urgent { border-top: 0; border-left: 0; }
}
html[data-theme="dark"] .workspace-tabs-menu summary, html[data-theme="dark"] .workspace-tabs-menu nav { background: #202125; }
html[data-theme="dark"] .workspace-tabs-menu nav a.active { background: #34304e; color: #d5ceff; }

/* A company's members: search to add several at once (people in no company stand out), and the members with Remove. */
.members-card .admin-section-title { display: flex; align-items: center; gap: 8px; }
.member-results { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.member-results label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.member-results label:hover { border-color: #c9c4ff; }
.member-results label span:not(.member-company) { display: grid; min-width: 0; }
.member-results small { overflow: hidden; color: var(--quiet); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.member-company { color: var(--muted); font-size: 12px; }
.member-company.is-none { padding: 2px 8px; border-radius: 999px; background: #fff4e0; color: #9a5b00; font-weight: 600; }
.member-none { padding: 8px 10px; color: var(--quiet); font-size: 13px; }
.member-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.member-picked > span { color: var(--muted); font-size: 13px; }
.members-table td:first-child { display: flex; align-items: center; gap: 10px; }
.member-who { display: grid; min-width: 0; }
.member-who small { color: var(--quiet); font-size: 12px; }
html[data-theme="dark"] .member-company.is-none { background: #3a2c12; color: #f2c26b; }

/* The People list: the administrators in one line (opening to the list), search, company and sort, ticks with a bulk bar,
   and pages of 50. */
.admins-card > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; list-style: none; cursor: pointer; }
.admins-card > summary::-webkit-details-marker { display: none; }
.admins-card > summary > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.admins-card > summary small { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.admins-card[open] .admins-chevron { transform: rotate(180deg); }
.admins-card:not([open]) { margin-bottom: 14px; }
.users-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 auto; }
.users-filters .admin-search { flex: 1 1 240px; max-width: 360px; }
.users-filters .form-select { width: auto; }
.users-tick { width: 36px; }
.users-bulk { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 12px; border: 1px solid #c9c4ff; border-radius: 12px; background: #f7f6ff; box-shadow: 0 6px 18px #16203812; }
.users-bulk > span { color: var(--accent); font-size: 13px; font-weight: 650; }
.users-bulk .form-select { width: auto; }
.users-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.users-pager > span { margin-right: auto; }
html[data-theme="dark"] .users-bulk { border-color: #4b4775; background: #26243a; }

/* Usage: labelled filters with Show, plain-words help on Cost, and charts with gridlines on both scales, values on hover,
   focus or tap, and Show as table. */
.perf-filter-label { align-self: center; color: var(--muted); font-size: 12px; font-weight: 600; }
.perf-intro { max-width: 760px; }
.perf-glossary > summary { color: var(--accent); font-weight: 600; cursor: pointer; }
.perf-glossary dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 0; }
.perf-glossary dt { font-weight: 650; }
.perf-glossary dd { margin: 0; color: var(--muted); }
.perf-legend small { color: var(--quiet); font-size: 11px; }
.perf-gridline { stroke: #e9ebf1; stroke-dasharray: 3 3; }
.perf-tick { font-size: 11.5px; }
.perf-hit { fill: transparent; }
.perf-point { outline: none; cursor: default; }
.perf-point:hover .perf-hit, .perf-point:focus .perf-hit { fill: #5b54e80f; }
.perf-point:focus-visible .perf-hit { stroke: var(--accent); stroke-width: 1.5; }
.perf-value { display: none; fill: var(--ink); font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.perf-point:hover .perf-value, .perf-point:focus .perf-value { display: inline; }
.perf-chart-table { margin-top: 8px; }
.perf-chart-table > summary { color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.perf-chart-table .table-responsive { max-height: 320px; margin-top: 8px; overflow: auto; }
html[data-theme="dark"] .perf-gridline { stroke: #2f3036; }
html[data-theme="dark"] .perf-value { stroke: #202125; }
html[data-theme="dark"] .perf-point:hover .perf-hit, html[data-theme="dark"] .perf-point:focus .perf-hit { fill: #c0baff14; }

/* Setup's later steps: how the first Salesforce copy is going. */
.copy-progress { display: flex; align-items: center; gap: 12px; margin: -4px 0 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.copy-progress > span:last-child { display: grid; min-width: 0; }
.copy-progress strong { font-size: 13.5px; font-weight: 600; }
.copy-progress small { color: var(--muted); font-size: 12.5px; }
.copy-progress.is-running { border-color: #c9c4ff; background: #f7f6ff; }
.copy-progress.is-running .spinner-border { color: var(--accent); }
.copy-progress.is-done > i { color: #1d7a45; }
.copy-progress.is-failed { border-color: #f3c3ca; background: #fdecee; }
.copy-progress.is-failed > i { color: #b4233b; }
html[data-theme="dark"] .copy-progress { background: #202125; }
html[data-theme="dark"] .copy-progress.is-running { border-color: #4b4775; background: #26243a; }
html[data-theme="dark"] .copy-progress.is-failed { border-color: #5c2a33; background: #3a1f25; }

/* The live Data tab's side panel: one part of the form at a time (a source, adding one, the links or the connection), with
   Save changes at its foot. The form itself only holds the panel, so it shows no card of its own. */
.workspace-form.is-paneled { margin: 0 !important; padding: 0; border: 0; background: none; box-shadow: none; }
.workspace-form.is-paneled > .data-form-body { display: none; }
.data-drawer.offcanvas-end { width: min(720px, 100vw); }
.data-drawer .offcanvas-header { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.data-drawer .offcanvas-title { font-size: 17px; font-weight: 650; }
.data-drawer .offcanvas-body { padding: 18px 20px; }
.data-drawer .offcanvas-body > :first-child, .data-drawer .offcanvas-body > :first-child > .admin-section-title:first-child { margin-top: 0; }
.data-drawer-foot { padding: 12px 20px; border-top: 1px solid var(--border); background: #fff; }
.data-drawer-foot .admin-actions { margin: 0; }
.data-drawer[data-focus="table"] [data-more-part="tables"] > :not(.extra-tables),
.data-drawer[data-focus="table"] [data-more-part="links"],
.data-drawer[data-focus="table"] .extra-table:not(.is-focus),
.data-drawer[data-focus="links"] [data-more-part="tables"],
.data-drawer[data-focus="tables"] [data-more-part="links"],
.data-drawer [data-connection-fields] > .admin-section-title:first-child,
.data-drawer [data-more-part="links"] > .admin-section-title:first-child { display: none; }
.source-links-edit { margin: -6px 0 14px; font-size: 13px; }
.source-cut .btn-primary { white-space: nowrap; }
html[data-theme="dark"] .data-drawer { background: #1c1d21; color: var(--ink); }
html[data-theme="dark"] .data-drawer-foot { background: #1c1d21; }

/* How the question was read, in an answer: each ambiguous part with AIDA's reading, and the other readings to choose. */
.answer-reading { display: grid; margin: 12px 0; border: 1px solid #d9d6fb; border-radius: 12px; background: #f6f5ff; font-size: 13px; }
.reading-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px 7px; color: #4542b8; font-size: 12.5px; font-weight: 650; }
.reading-head i { color: var(--accent); }
.reading-row { display: grid; grid-template-columns: minmax(0, .9fr) 14px minmax(0, 1.4fr) auto; gap: 10px; align-items: center; padding: 7px 10px 7px 14px; border-top: 1px solid #d9d6fb; }
.reading-said { color: var(--muted); overflow-wrap: anywhere; }
.reading-read { overflow-wrap: anywhere; }
.reading-arrow { color: var(--accent); font-size: 11px; }
.reading-change { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: #4542b8; font-size: 12px; font-weight: 600; white-space: nowrap; }
.reading-change:hover, .reading-change[aria-expanded="true"] { border-color: #d9d6fb; background: #fff; }
.reading-change i { font-size: 10px; }
.reading-menu { width: min(330px, 86vw); padding: 6px; border-radius: 12px; font-size: 13px; }
.reading-menu .dropdown-header { padding: 6px 10px 4px; color: var(--quiet); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; white-space: normal; }
.reading-menu .dropdown-item, .reading-menu .dropdown-item-text { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 10px; border-radius: 8px; white-space: normal; }
.reading-menu .dropdown-item i, .reading-menu .dropdown-item-text i { margin-top: 3px; color: var(--accent); font-size: 12px; }
.reading-menu .is-current { background: #f6f5ff; }
.reading-menu small { display: block; color: var(--quiet); font-size: 11.5px; }
.reading-foot { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid #eef0f5; color: var(--quiet); font-size: 11.5px; }
@media (max-width: 560px) {
    .reading-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
    .reading-arrow { display: none; }
    .reading-read { grid-column: 1; }
    .reading-choice { grid-column: 2; grid-row: 1 / span 2; }
}
html[data-theme="dark"] .answer-reading { border-color: #4b4775; background: #24233a; }
html[data-theme="dark"] .reading-head, html[data-theme="dark"] .reading-change { color: #d5ceff; }
html[data-theme="dark"] .reading-row { border-top-color: #4b4775; }
html[data-theme="dark"] .reading-change:hover, html[data-theme="dark"] .reading-change[aria-expanded="true"] { border-color: #4b4775; background: #2c2b45; }
html[data-theme="dark"] .reading-menu .is-current { background: #24233a; }
html[data-theme="dark"] .reading-foot { border-top-color: #2f3036; }

/* Questions with known answers, on a workspace's Test tab. */
.known-answers { padding: 22px; scroll-margin-top: 16px; }
.known-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; }
.known-intro { flex: 1 1 320px; min-width: 0; }
.known-run { margin: 0; }
.known-running { display: flex; align-items: center; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f7f6ff; color: var(--ink); font-size: 13px; }
.known-empty { margin-top: 14px; }
.known-list { display: grid; margin: 14px 0 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.known-item + .known-item { border-top: 1px solid var(--border); }
.known-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 8px 10px 14px; }
.known-row > i { font-size: 17px; }
.known-item.is-passed .known-row > i { color: #1d7a45; }
.known-item.is-failed .known-row > i { color: #b4233b; }
.known-item.is-waiting .known-row > i { color: var(--quiet); }
.known-question { display: grid; gap: 2px; min-width: 0; }
.known-question strong { font-size: 13.5px; font-weight: 600; }
.known-question span, .known-when { color: var(--quiet); font-size: 12px; }
.known-when { white-space: nowrap; }
.known-item.is-failed .known-when { color: #a42335; font-weight: 600; }
.known-remove { color: var(--quiet); }
.known-item.is-failed { background: #fdecee; }
.known-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 14px 46px; }
.known-diff > div { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 12.5px; overflow-wrap: anywhere; }
.known-label { color: var(--quiet); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.known-read { color: var(--muted); font-size: 12px; }
.known-diff .known-change { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-style: dashed; border-color: #d9d6fb; background: #f6f5ff; }
.known-change i { color: var(--accent); }
.known-change span { flex: 1 1 260px; }
.known-note { margin: -4px 14px 10px 46px; color: var(--quiet); font-size: 12px; }
.known-queries { margin: 0 14px 10px 46px; font-size: 12.5px; }
.known-queries summary { color: var(--accent); cursor: pointer; font-size: 12px; }
.known-queries pre { max-height: 220px; margin: 4px 0 8px; padding: 8px 10px; border-radius: 8px; background: #f6f7fa; font-size: 12px; white-space: pre-wrap; }
.known-add { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.known-add summary { display: inline-flex; align-items: center; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.known-add summary::-webkit-details-marker { display: none; }
.known-add-form { display: grid; gap: 4px; margin-top: 12px; max-width: 860px; }
.known-add-form .form-label { margin: 6px 0 2px; color: #596478; font-size: 13px; }
.known-add-form .form-control { border-color: #dce1ec; border-radius: 8px; font-size: 13.5px; }
.known-add-form .field-help { margin: 2px 0 0; }
.known-sql { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
@media (max-width: 640px) {
    .known-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
    .known-when { grid-column: 2; grid-row: 2; }
    .known-diff { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
    .known-note, .known-queries { margin-left: 14px; }
}
html[data-theme="dark"] .known-running { background: #24233a; }
html[data-theme="dark"] .known-add-form .form-label { color: #a3a5af; }
html[data-theme="dark"] .known-add-form .form-control { border-color: #3a3b42; }
html[data-theme="dark"] .known-item.is-failed { background: #3a1f25; }
html[data-theme="dark"] .known-item.is-passed .known-row > i { color: #8fe0b0; }
html[data-theme="dark"] .known-item.is-failed .known-row > i, html[data-theme="dark"] .known-item.is-failed .known-when { color: #ffb3c0; }
html[data-theme="dark"] .known-diff > div { background: #202125; }
html[data-theme="dark"] .known-diff .known-change { background: #24233a; border-color: #4b4775; }
html[data-theme="dark"] .known-queries pre { background: #26272c; }

/* ---------- Charts of every kind (aida-visuals.js): colours, the chart's tools, Change chart and full screen ---------- */
/* Series colours: AIDA's accent first, then a colour-blind-safe order (Okabe-Ito); a scale for heatmaps; good and bad. */
.aida-app { --chart-4: #cc79a7; --chart-5: #0072b2; --chart-6: #d55e00; --chart-7: #8a8fa0; --chart-ink: #25272d; --chart-muted: #70747e; --chart-grid: #e3e6ee;
    --chart-band: rgba(87, 85, 217, .16); --chart-flag: #c2410c; --chart-good: #1d7a45; --chart-bad: #b4233b;
    --heat-1: #f1f0ff; --heat-2: #cfccfb; --heat-3: #9893f0; --heat-4: #5755d9; --heat-5: #33318f; }
html[data-theme="dark"] .aida-app { --chart-4: #e7a3c8; --chart-5: #7cb8f0; --chart-6: #ff9a5c; --chart-7: #9aa0b3; --chart-ink: #ececef; --chart-muted: #a3a5af; --chart-grid: #35363d;
    --chart-band: rgba(170, 162, 255, .2); --chart-flag: #ffa36b; --chart-good: #8fe0b0; --chart-bad: #ffb3c0;
    --heat-1: #23223a; --heat-2: #3b3870; --heat-3: #6560c2; --heat-4: #9a92ff; --heat-5: #d6d1ff; }
.answer-chart.is-echarts { padding: 12px 12px 8px 16px; }
.answer-chart .chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.answer-chart .chart-head figcaption { display: flex; flex: 1 1 220px; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; margin: 0; }
.answer-chart .chart-head figcaption small { color: var(--quiet); font-size: 11.5px; }
.chart-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.chart-tool { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chart-tool:hover, .chart-tool[aria-expanded="true"] { background: #f1f1f8; color: var(--ink); }
.chart-tool.icon { width: 30px; justify-content: center; padding: 0; }
.chart-canvas { width: 100%; min-width: 0; }
.chart-canvas.chart-failed { display: grid; place-items: center; height: auto !important; padding: 18px; color: var(--quiet); font-size: 13px; text-align: center; }
.chart-table-wrap { max-height: 420px; overflow: auto; }
.chart-menu { width: min(360px, 88vw); padding: 6px; border-radius: 14px; font-size: 13px; }
.chart-menu .dropdown-header { padding: 6px 10px 4px; color: var(--quiet); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.chart-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 2px 4px 6px; }
.chart-type { display: grid; justify-items: center; gap: 4px; padding: 9px 4px 7px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink); font-size: 11.5px; line-height: 1.2; text-align: center; }
.chart-type i { font-size: 18px; color: var(--muted); }
.chart-type:hover:not(:disabled) { background: #f6f6fc; }
.chart-type.on { border-color: #d9d6fb; background: #f6f5ff; color: #4542b8; font-weight: 600; }
.chart-type.on i { color: var(--accent); }
.chart-type.off, .chart-type:disabled { color: var(--quiet); opacity: .55; cursor: not-allowed; }
.chart-why { margin: 0; padding: 0 10px 6px; color: var(--quiet); font-size: 11.5px; line-height: 1.4; }
.chart-option { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; font-size: 12.5px; cursor: pointer; }
.chart-option > i { width: 16px; color: var(--muted); text-align: center; }
.chart-option > span { flex: 1 1 auto; }
.chart-option .form-check-input { margin: 0; }
.chart-viewer .modal-header { gap: 8px; }
/* Chart or table, full screen: a two-part switch. */
.chart-switch { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: #f6f6fa; }
.chart-switch button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.chart-switch button:hover { color: var(--ink); }
.chart-switch button.active { background: #fff; box-shadow: 0 1px 3px rgba(20, 20, 40, .12); color: #4542b8; font-weight: 600; }
html[data-theme="dark"] .chart-switch { background: #1c1d21; }
html[data-theme="dark"] .chart-switch button.active { background: #34304e; box-shadow: none; color: #d5ceff; }
/* An administrator's Pin: for themselves or for everyone, each saying what it means. */
.pin-menu { width: 320px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px #16203822; }
.pin-menu .dropdown-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--ink); white-space: normal; }
.pin-menu .dropdown-item > i { margin-top: 2px; color: #7772c9; font-size: 14px; text-align: center; }
.pin-menu strong { display: block; font-size: 13px; font-weight: 600; }
.pin-menu small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.pin-menu .dropdown-item:hover, .pin-menu .dropdown-item:focus { background: #f1f0fd; color: var(--ink); }
html[data-theme="dark"] .pin-menu .dropdown-item > i { color: #aaa2ff; }
.chart-viewer .modal-title { flex: 1 1 auto; font-size: 15px; font-weight: 650; }
.chart-viewer .chart-canvas { height: calc(100vh - 140px); }
.chart-viewer .chart-full-table { max-height: calc(100vh - 140px); }
html[data-theme="dark"] .chart-tool:hover, html[data-theme="dark"] .chart-tool[aria-expanded="true"] { background: #2c2d33; }
html[data-theme="dark"] .chart-type:hover:not(:disabled) { background: #27272f; }
html[data-theme="dark"] .chart-type.on { border-color: #4b4775; background: #24233a; color: #d5ceff; }

/* Pinned charts on the first screen. */
.pinned-charts { margin: 6px 0 22px; text-align: left; }
.pinned-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pinned-head .welcome-heading { margin: 0 auto 0 0; }
.pinned-weekly { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.pinned-weekly .form-check-input { margin: 0; }
.pinned-status { color: var(--quiet); font-size: 12px; }
.pinned-changes { display: grid; gap: 6px; margin: 10px 0 12px; padding: 10px 14px; border-radius: 12px; background: #f6f5ff; list-style: none; font-size: 13px; }
.pinned-changes li { display: flex; gap: 8px; align-items: baseline; }
.pinned-changes i { color: var(--accent); font-size: 11px; }
.pinned-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; margin-top: 10px; }
.pinned-card { min-width: 0; padding: 10px 12px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--chart-surface); }
.pinned-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 2px 0 0; overflow: hidden; font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.pinned-card .answer-chart { margin: 4px 0 0; padding: 0; border: 0; box-shadow: none; }
.pinned-card .answer-chart .chart-head { margin-bottom: 2px; }
.pinned-card .answer-chart .chart-head figcaption { display: none; }
/* A card is narrow: its tools are icons (each named on hover). */
.pinned-card .chart-tool { width: 30px; justify-content: center; padding: 0; }
.pinned-card .chart-tool > span { display: none; }
.pinned-tools { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.pinned-head .link-button { font-size: 12.5px; text-decoration: none; }
.pinned-head .link-button:hover { text-decoration: underline; }
.pinned-note { margin: 12px 0; color: var(--quiet); font-size: 13px; }
.pinned-badge { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: #e7f6f1; color: #0f6b52; font-size: 11px; font-weight: 600; }
.pinned-card.is-shared { border-color: #bfe6d8; }
html[data-theme="dark"] .pinned-badge { background: #173a30; color: #8fe0c2; }
html[data-theme="dark"] .pinned-card.is-shared { border-color: #2c5a4b; }
html[data-theme="dark"] .pinned-changes { background: #24233a; }

/* Dig deeper: the queries it ran, each linking to its part of the answer. */
.answer-steps { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--chart-surface); }
.steps-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--quiet); font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.answer-steps ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.answer-steps li > a, .answer-steps li > span { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 13px; }
.answer-steps li > a:hover { background: #f4f4fb; }
.step-n { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #efeefe; color: var(--accent); font-size: 11.5px; font-weight: 700; }
.step-title { flex: 1 1 auto; min-width: 0; font-weight: 550; }
.step-rows { color: var(--quiet); font-size: 12px; white-space: nowrap; }
.step.is-failed .step-n { background: #fde8ec; color: var(--chart-bad); }
.step.is-failed .step-title, .step.is-failed .step-rows { color: var(--quiet); }
.bubble h3.deeper-heading { margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 15px; font-weight: 650; scroll-margin-top: 90px; }
html[data-theme="dark"] .answer-steps li > a:hover { background: #2a2a31; }
html[data-theme="dark"] .step-n { background: #2c2a4a; }
html[data-theme="dark"] .step.is-failed .step-n { background: #3a2028; }

/* Click a chart's part to ask about it. */
.answer-chart { position: relative; }
.answer-chart.is-askable .chart-canvas { cursor: pointer; }
.chart-ask { position: absolute; z-index: 20; width: 240px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--chart-surface);
    box-shadow: 0 16px 40px -18px rgba(20, 20, 40, .45); }
.chart-ask-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 6px; font-size: 13px; }
.chart-ask-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-ask-head .btn-close { flex: 0 0 auto; width: 8px; height: 8px; }
.chart-ask-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 12.5px; text-align: left; }
.chart-ask-item i { width: 16px; color: var(--accent); text-align: center; }
.chart-ask-item:hover, .chart-ask-item:focus-visible { background: #f4f4fb; outline: none; }
html[data-theme="dark"] .chart-ask-item:hover, html[data-theme="dark"] .chart-ask-item:focus-visible { background: #2a2a31; }
html[data-theme="dark"] .chart-ask-head .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Tables of periods: a small trend for each row. */
.data-table th.trend-col { width: 120px; }
.data-table td.trend-cell { min-width: 110px; padding-top: 4px; padding-bottom: 4px; }
.data-table td.trend-cell .kpi-spark { height: 24px; margin: 0; }

/* The full-screen table: show, group by, pivot, and a row's details. */
.viewer-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--quiet); font-size: 12px; }
.viewer-pick .form-select { width: auto; min-width: 120px; height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 12.5px; }
.answer-action[aria-pressed="true"] { background: #efeefe; color: var(--accent); }
.data-table tr.group-subtotal > td { border-bottom: 1px solid var(--border); background: #f7f7fb; color: var(--muted); font-size: 12.5px; font-weight: 650; }
.table-viewer .data-table tbody tr:not(.total-row):not(.group-subtotal) { cursor: pointer; }
.data-table tr.is-picked > td { background: #efeefe; }
.pivot-panel { display: grid; gap: 10px; }
.pivot-choices { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.pivot-out { max-height: calc(100vh - 210px); overflow: auto; }
.pivot-table td.num, .pivot-table th.num { white-space: nowrap; }
.row-details { position: fixed; right: 16px; top: 76px; bottom: 16px; z-index: 1060; width: min(340px, calc(100vw - 32px)); overflow: auto; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--chart-surface); box-shadow: 0 24px 60px -24px rgba(20, 20, 40, .5); }
.row-details-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.row-details dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px 12px; margin: 0 0 14px; font-size: 13px; }
.row-details dt { color: var(--quiet); font-weight: 500; }
.row-details dd { margin: 0; overflow-wrap: anywhere; }
.row-details dd.num { font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .answer-action[aria-pressed="true"], html[data-theme="dark"] .data-table tr.is-picked > td { background: #2c2a4a; }
html[data-theme="dark"] .data-table tr.group-subtotal > td { background: #24252b; }

/* Headline cards: the figure, its change and a small trend. */
.answer-kpis-wrap { margin: 12px 0; }
.answer-kpis-wrap .answer-kpis { margin: 6px 0 0; }
.kpi-title { margin: 0; color: var(--ink); font-size: 13px; font-weight: 650; }
.answer-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.kpi { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 12px 14px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--chart-surface); }
.kpi-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--quiet); font-size: 12px; font-weight: 500; }
.kpi-label small { font-size: 11px; }
.kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.kpi-change { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--quiet); font-size: 11.5px; }
.kpi-change b { display: inline-flex; align-items: center; gap: 3px; font-weight: 650; }
.kpi-change b i { font-size: 10px; }
.kpi-change .is-good { color: var(--chart-good); }
.kpi-change .is-bad { color: var(--chart-bad); }
.kpi-change .is-flat { color: var(--muted); }
.kpi-spark { display: block; width: 100%; height: 32px; margin-top: 4px; }

/* Tables: sorting headings, change arrows, bars in cells, the question's highlight, computed totals. */
.data-table .sort-button { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.data-table th.num .sort-button { justify-content: flex-end; }
.data-table .sort-button i { color: var(--quiet); font-size: 10px; opacity: .55; }
.data-table th[aria-sort] .sort-button i { color: var(--accent); opacity: 1; }
.data-table .chg { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.data-table .chg i { font-size: 10px; }
.data-table .chg.is-good { color: var(--chart-good); }
.data-table .chg.is-bad { color: var(--chart-bad); }
.data-table .chg.is-flat { color: var(--muted); font-weight: 500; }
.cell-bar { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.cell-bar > b { position: relative; flex: 1 1 auto; min-width: 50px; height: 14px; }
.cell-bar > b > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--chart-1) 26%, transparent); }
.cell-bar > span { flex: 0 0 var(--figure, auto); text-align: right; }
.data-table tr.is-highlight > td { background: #fff4dc; }
.data-table tr.is-highlight > td:first-child { box-shadow: inset 3px 0 0 #9a5b00; }
.data-table.rule-off tr.is-highlight > td { background: inherit; box-shadow: none; }
.table-rule { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px; padding: 4px 10px; border: 0; border-radius: 999px; background: #fdf1dc; color: #9a5b00; font-size: 12px; font-weight: 600; }
.table-rule[aria-pressed="false"] { background: #f1f2f6; color: var(--quiet); text-decoration: line-through; }
.data-table tr.total-row.is-computed > td { border-top: 1px solid var(--border); font-weight: 650; }
.viewer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.viewer-find { display: flex; align-items: center; gap: 8px; width: min(280px, 100%); height: 34px; padding: 0 10px; border: 1px solid #dce1ec; border-radius: 8px; background: #fff; }
.viewer-find i { color: var(--quiet); font-size: 13px; }
.viewer-find input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: 13px; }
.viewer-count { color: var(--quiet); font-size: 12px; }
.viewer-columns { max-height: 60vh; overflow: auto; padding: 6px; font-size: 13px; }
.viewer-column { display: flex; align-items: center; gap: 8px; border-radius: 8px; }
html[data-theme="dark"] .data-table tr.is-highlight > td { background: rgba(242, 196, 109, .1); }
html[data-theme="dark"] .data-table tr.is-highlight > td:first-child { box-shadow: inset 3px 0 0 #f2c46d; }
html[data-theme="dark"] .table-rule { background: #3d2f14; color: #f2c46d; }
html[data-theme="dark"] .table-rule[aria-pressed="false"] { background: #2c2d33; }
html[data-theme="dark"] .viewer-find { border-color: #44454d; background: #202125; }
@media (max-width: 560px) {
    .chart-tool span { display: none; }
    .chart-tool { width: 30px; justify-content: center; padding: 0; }
    .chart-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}