/* =====================================================================================================================
   DashMage  -  Ask AI, and the branding studio

   ASK AI is always set in the site's navy, whatever the dashboard's theme: a square-cornered navy panel with an orange
   top rule and a faint square grid, docked on the right on a desktop (the dashboard stays usable beside it), wider on
   request, and a full-screen sheet on a phone that follows the keyboard. Orange marks everything you can act on.

   THE BRANDING STUDIO (brand panel, heading and image editors, the image well) uses the site's own tokens, so it
   follows the light/dark switch like every other dialog.
   ===================================================================================================================== */

.ai-dock {
    --ai-ink: #FFFFFF;
    --ai-ink-2: rgba(255, 255, 255, 0.78);
    --ai-mute: #A8A9B3;
    --ai-line: rgba(255, 255, 255, 0.08);
    --ai-line-2: rgba(255, 255, 255, 0.16);
    --ai-glass: #23273D;
    --ai-glass-2: #2D3250;
    --ai-amber: #FE5924;
    --ai-orange: #FE5924;
    --ai-orange-2: #E4461A;
    --ai-navy: #1B1E31;
    --ai-deep: #141627;
    --ai-grad: #FE5924;
    --ai-w: 468px;

    position: fixed; inset: 0; z-index: 120; pointer-events: none; display: none;
    font-family: var(--font); -webkit-font-smoothing: antialiased;
}
.ai-dock.mounted { display: block; }

.ai-scrim { position: absolute; inset: 0; background: rgba(20, 22, 39, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.ai-dock.open.wide .ai-scrim { opacity: 1; pointer-events: auto; }


/* ---- The panel ---------------------------------------------------------------------------------------------------- */

.ai-panel {
    position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(var(--ai-w), calc(100vw - 28px));
    display: flex; flex-direction: column; isolation: isolate; overflow: hidden; pointer-events: auto;
    border-radius: 4px; color: var(--ai-ink);
    background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 56px 56px,
        var(--ai-navy);
    box-shadow: 0 50px 120px -30px rgba(4, 5, 18, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: translateX(calc(100% + 40px)); opacity: 0;
    transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), opacity 0.35s ease, width 0.45s cubic-bezier(.2, .7, .2, 1);
}
.ai-dock.open .ai-panel { transform: none; opacity: 1; }
.ai-dock.wide .ai-panel { width: min(940px, calc(100vw - 28px)); }

/* The orange rule along the top. */
.ai-panel::before { content: ''; position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 4px; background: var(--ai-orange); pointer-events: none; }
.ai-panel::after { content: none; }

/* The old aurora and glare: kept in the DOM by chat.js, quiet now - a single faint orange corner light. */
.ai-aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ai-aurora i { display: none; }
.ai-aurora i:nth-child(1) { display: block; position: absolute; top: -160px; right: -160px; width: 320px; height: 320px; border: 2px solid rgba(254, 89, 36, 0.12); transform: rotate(30deg); transition: border-color 0.4s ease; }
.ai-dock.thinking .ai-aurora i:nth-child(1) { border-color: rgba(254, 89, 36, 0.3); animation: aiSpin 12s linear infinite; }
.ai-glare { display: none; }


/* ---- Header and modes -------------------------------------------------------------------------------------------- */

.ai-head { display: flex; align-items: center; gap: 12px; padding: 20px 14px 14px 18px; }
.ai-orb, .ai-fab-orb, .ai-avatar { position: relative; flex-shrink: 0; display: grid; place-items: center; border-radius: 3px; color: #fff; background: var(--ai-orange); }
.ai-orb { width: 42px; height: 42px; font-size: 16px; box-shadow: 0 10px 24px -10px rgba(254, 89, 36, 0.9); }
.ai-orb span { position: absolute; inset: -4px; border-radius: 4px; border: 1px solid rgba(254, 89, 36, 0.45); opacity: 0; }
.ai-dock.thinking .ai-orb span { opacity: 1; animation: aiRingSq 1.2s ease-out infinite; }
.ai-fab-orb::before { content: none; }
.ai-orb i { position: relative; }

.ai-id { flex: 1; min-width: 0; }
.ai-id h2 { margin: 0; font: 700 18px/1.2 var(--display); color: #fff; letter-spacing: -0.01em; }
.ai-id p { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 12px; line-height: 1.3; color: var(--ai-mute); white-space: nowrap; overflow: hidden; }
.ai-model { color: var(--ai-ink-2); font-weight: 700; flex-shrink: 0; }
.ai-about { overflow: hidden; text-overflow: ellipsis; }
.ai-live { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #3DD68C; box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.18); }
.ai-dock.thinking .ai-live { background: var(--ai-orange); box-shadow: 0 0 0 3px rgba(254, 89, 36, 0.22); animation: aiBlink 0.9s ease-in-out infinite; }

.ai-tools { display: flex; gap: 2px; }
.ai-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 3px; border: 1px solid transparent; background: transparent; color: var(--ai-ink-2); font-size: 14px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.ai-icon:hover { background: var(--ai-glass-2); border-color: var(--ai-line); color: #fff; }
.ai-icon:focus-visible, .ai-modes button:focus-visible, .ai-starter:focus-visible, .ai-btn:focus-visible, .ai-offer:focus-visible, .ai-mini:focus-visible { outline: 2px solid var(--ai-orange); outline-offset: 2px; }

.ai-modes { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0 16px 4px; padding: 4px; border-radius: 3px; background: var(--ai-deep); border: 1px solid var(--ai-line); }
.ai-modes button { position: relative; z-index: 1; height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 2px; background: none; color: var(--ai-mute); font: 600 13.5px/1 var(--display); cursor: pointer; transition: color 0.25s ease; }
.ai-modes button:hover, .ai-modes button[aria-selected="true"] { color: #fff; }
.ai-mode-ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 2px; background: var(--ai-orange); border: 0; box-shadow: 0 8px 20px -10px rgba(254, 89, 36, 0.9); transition: transform 0.4s cubic-bezier(.2, .7, .2, 1), background 0.3s ease; }
.ai-dock[data-mode="chart"] .ai-mode-ink { transform: translateX(100%); background: var(--ai-orange); }


/* ---- The thread ---------------------------------------------------------------------------------------------------- */

.ai-thread {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 18px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent); mask: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent);
}
.ai-thread::-webkit-scrollbar { width: 6px; }
.ai-thread::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 0; }

/* The empty state: a mark, a greeting, four ways in. */
.ai-hello { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 4px 4px; animation: aiRise 0.5s cubic-bezier(.2, .7, .2, 1) both; }
.ai-hello-orb { position: relative; width: 92px; height: 92px; margin: 8px 0 22px; }
.ai-hello-orb .core { position: absolute; inset: 12px; display: grid; place-items: center; border-radius: 4px; font-size: 26px; color: #fff; background: var(--ai-orange); box-shadow: 0 24px 50px -16px rgba(254, 89, 36, 0.8); }
.ai-hello-orb .core::before { content: ''; position: absolute; inset: -12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.12); }
.ai-hello-orb .ring { position: absolute; inset: 6px; border-radius: 4px; border: 1.5px solid rgba(254, 89, 36, 0.5); animation: aiRing 2.8s ease-out infinite; }
.ai-hello-orb .ring.r2 { animation-delay: 1.4s; }
.ai-hello h3 { margin: 0 0 8px; font: 700 23px/1.2 var(--display); letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.ai-hello p { max-width: 370px; margin: 0 auto 22px; font-size: 14px; line-height: 1.6; color: var(--ai-ink-2); text-wrap: pretty; }
.ai-hello p strong { color: #fff; font-weight: 700; }

.ai-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ai-starter {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; padding: 14px; text-align: left;
    border-radius: 3px; border: 1px solid var(--ai-line); background: var(--ai-glass); color: var(--ai-ink); font: 500 13.5px/1.45 var(--font); cursor: pointer;
    transition: transform 0.3s cubic-bezier(.2, .7, .2, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
    animation: aiRise 0.5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 140ms);
}
.ai-starter i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 2px; font-size: 13px; color: var(--ai-orange); background: rgba(254, 89, 36, 0.12); border: 0; transition: background 0.25s ease, color 0.25s ease; }
.ai-starter:hover { transform: translateY(-3px); background: var(--ai-glass-2); border-color: transparent; box-shadow: inset 3px 0 0 var(--ai-orange), 0 18px 40px -20px rgba(0, 0, 0, 0.8); }
.ai-starter:hover i { background: var(--ai-orange); color: #fff; }
.ai-dock[data-mode="chart"] .ai-starter i { color: #fff; background: rgba(255, 255, 255, 0.1); }
.ai-dock[data-mode="chart"] .ai-starter:hover i { background: var(--ai-orange); }
.ai-dock[data-mode="chart"] .ai-starter:hover { box-shadow: inset 3px 0 0 var(--ai-orange), 0 18px 40px -20px rgba(0, 0, 0, 0.8); }

/* Messages. */
.ai-msg { display: flex; gap: 10px; margin: 0 0 18px; }
.ai-msg.fresh { animation: aiRise 0.4s cubic-bezier(.2, .7, .2, 1) both; }
.ai-msg.user { justify-content: flex-end; }
.ai-bubble { max-width: 86%; padding: 11px 15px; border-radius: 3px; background: var(--ai-orange); color: #fff; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; box-shadow: 0 14px 30px -16px rgba(254, 89, 36, 0.9); }
.ai-tag { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; padding: 4px 6px; border-radius: 2px; background: rgba(0, 0, 0, 0.18); font: 700 10px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }

.ai-avatar { width: 30px; height: 30px; margin-top: 2px; font-size: 12px; border: 0; box-shadow: none; }
.ai-body { flex: 1; min-width: 0; }
.ai-card { border-radius: 3px; background: var(--ai-glass); border: 1px solid var(--ai-line); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.85); }
.ai-answer { padding: 13px 16px; }

/* The answer's text: a strict markdown subset (chat.js). */
.ai-md { font-size: 14.5px; line-height: 1.65; color: var(--ai-ink-2); overflow-wrap: anywhere; }
.ai-md > * + * { margin-top: 9px; }
.ai-md p { margin: 0; color: inherit; }
.ai-md strong { color: #fff; font-weight: 700; }
.ai-md em { color: #FFB59A; }
.ai-md code { padding: 2px 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); color: #FFD2C2; font: 500 12.5px/1.4 var(--mono); }
.ai-md pre { margin: 0; padding: 12px; border-radius: 3px; background: var(--ai-deep); border: 1px solid var(--ai-line); overflow-x: auto; }
.ai-md pre code { padding: 0; background: none; }
.ai-md ul, .ai-md ol { margin: 0; padding-left: 20px; }
.ai-md li + li { margin-top: 4px; }
.ai-md li::marker { color: var(--ai-orange); }
.ai-md h4 { margin: 0; font: 700 15.5px/1.3 var(--display); color: #fff; }
.ai-md h5 { margin: 0; font: 700 11.5px/1.3 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ai-orange); }
.ai-md blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--ai-orange); }
.ai-md hr { border: 0; height: 1px; background: var(--ai-line); }
.ai-table-wrap { overflow-x: auto; border-radius: 3px; border: 1px solid var(--ai-line); background: var(--ai-deep); }
.ai-md table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ai-md th { padding: 10px 12px; text-align: left; white-space: nowrap; font: 600 11.5px/1.2 var(--display); letter-spacing: 0.02em; color: #fff; background: rgba(254, 89, 36, 0.16); border-bottom: 1px solid rgba(254, 89, 36, 0.35); }
.ai-md td { padding: 8px 12px; color: var(--ai-ink); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ai-md tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.ai-md td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai-md tr:last-child td { border-bottom: 0; }
.ai-lead { margin: 2px 0 10px; }

/* The cursor while an answer streams, at the end of whatever block is being written. */
.ai-md.streaming > :last-child:not(ul):not(ol):not(.ai-table-wrap):not(pre)::after,
.ai-md.streaming > ul:last-child > li:last-child::after,
.ai-md.streaming > ol:last-child > li:last-child::after {
    content: ''; display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -2px; border-radius: 1px;
    background: var(--ai-orange); animation: aiCaret 0.9s steps(2) infinite;
}

.ai-typing { display: flex; align-items: center; gap: 5px; height: 23px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 1px; background: var(--ai-orange); animation: aiBounce 1.2s ease-in-out infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
.ai-typing em { margin-left: 8px; font-style: normal; font-size: 13px; color: transparent;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), #fff, rgba(255, 255, 255, 0.4)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: aiShimmer 1.6s linear infinite; }

/* Charts the model offers, as buttons. */
.ai-offers { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ai-offers:empty { display: none; }
.ai-offer { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; text-align: left; cursor: pointer;
    border-radius: 3px; border: 1px solid rgba(254, 89, 36, 0.3); background: var(--ai-glass-2); color: #fff; font: 500 13.5px/1.4 var(--font); box-shadow: inset 3px 0 0 var(--ai-orange);
    transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(.2, .7, .2, 1), background 0.25s ease; animation: aiRise 0.4s cubic-bezier(.2, .7, .2, 1) both; }
.ai-offer em { display: block; margin-bottom: 4px; font: 700 10.5px/1 var(--display); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ai-orange); }
.ai-offer-ico { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 2px; background: var(--ai-orange); color: #fff; }
.ai-offer > i { margin-left: auto; color: rgba(255, 255, 255, 0.5); transition: transform 0.25s ease, color 0.25s ease; }
.ai-offer:hover { border-color: var(--ai-orange); background: #333858; box-shadow: inset 3px 0 0 var(--ai-orange), 0 14px 30px -16px rgba(254, 89, 36, 0.6); transform: translateY(-1px); }
.ai-offer:hover > i { transform: translate(2px, 2px); color: var(--ai-orange); }

.ai-actions { display: flex; align-items: center; gap: 2px; min-height: 30px; margin-top: 4px; opacity: 0; transition: opacity 0.2s ease; }
.ai-actions:empty { min-height: 0; margin: 0; }
.ai-msg:hover .ai-actions, .ai-msg:focus-within .ai-actions, .ai-msg:last-child .ai-actions { opacity: 1; }
.ai-mini { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 0; border-radius: 2px; background: none; color: var(--ai-mute); font: 600 12px/1 var(--display); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.ai-mini:hover { background: var(--ai-glass-2); color: #fff; }
.ai-note { margin-left: 6px; font-size: 11.5px; color: var(--ai-mute); }

.ai-err { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; font-size: 14px; color: #FFD6DD;
    border-color: rgba(255, 90, 118, 0.35); background: rgba(255, 90, 118, 0.1); box-shadow: inset 3px 0 0 #FF5A76; }
.ai-err > i { color: #FF5A76; }
.ai-err > span { flex: 1; min-width: 160px; }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: #fff; font: 600 12.5px/1 var(--display); cursor: pointer; }
.ai-chip:hover { background: var(--ai-orange); border-color: var(--ai-orange); }

/* A chart being designed, then the chart. */
.ai-building { padding: 14px 15px 16px; }
.ai-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--ai-mute); }
.ai-steps span { display: inline-flex; align-items: center; gap: 6px; transition: color 0.4s ease; }
.ai-steps span.on { color: #fff; }
.ai-steps span.on i { color: var(--ai-orange); }
.ai-skel { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 0 4px; border-bottom: 1px solid var(--ai-line); }
.ai-skel b { flex: 1; border-radius: 1px; transform-origin: bottom; background: linear-gradient(180deg, rgba(254, 89, 36, 0.55), rgba(254, 89, 36, 0.06)); animation: aiGrow 1.3s ease-in-out infinite alternate; }
.ai-skel b:nth-child(2n) { animation-delay: 0.2s; }
.ai-skel b:nth-child(3n) { animation-delay: 0.4s; }

.ai-chart-card { padding: 10px; }
.ai-chart-card .dash.dash-inset { padding: 6px; border-radius: 3px; }
.ai-chart-card .dash .w { box-shadow: none; }
.ai-chart-card .w-chart { height: 250px; }
.ai-dock.wide .ai-chart-card .w-chart { height: 340px; }
.ai-chart-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-chart-actions .ai-btn.icon:first-of-type { margin-left: auto; }
.ai-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 3px; border: 1px solid var(--ai-line-2); background: transparent; color: #fff; font: 600 13px/1 var(--display); cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.ai-btn:hover { border-color: var(--ai-orange); color: #fff; }
.ai-btn:active { transform: translateY(1px); }
.ai-btn.primary { border-color: var(--ai-orange); background: var(--ai-orange); box-shadow: none; }
.ai-btn.primary:hover { background: var(--ai-orange-2); border-color: var(--ai-orange-2); }
.ai-btn.primary:disabled { cursor: default; background: rgba(61, 214, 140, 0.14); border-color: rgba(61, 214, 140, 0.35); color: #3DD68C; }
.ai-btn.icon { width: 36px; padding: 0; justify-content: center; }

.ai-jump { position: absolute; left: 50%; bottom: 128px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: var(--ai-orange); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, 10px);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8); transition: opacity 0.25s ease, transform 0.3s ease; }
.ai-dock.scrolled-up .ai-jump { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }


/* ---- The composer ------------------------------------------------------------------------------------------------ */

.ai-composer { position: relative; padding: 12px 14px 12px; border-top: 1px solid var(--ai-line); background: rgba(20, 22, 39, 0.55); }
.ai-field { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 3px; background: var(--ai-deep); border: 1px solid var(--ai-line-2);
    transition: border-color 0.25s ease, box-shadow 0.3s ease; }
.ai-field:focus-within { border-color: var(--ai-orange); box-shadow: 0 0 0 3px rgba(254, 89, 36, 0.25); }
.ai-dock[data-mode="chart"] .ai-field:focus-within { border-color: var(--ai-orange); box-shadow: 0 0 0 3px rgba(254, 89, 36, 0.25); }
.ai-field textarea { flex: 1; min-width: 0; min-height: 24px; max-height: 180px; height: auto; padding: 9px 0; resize: none; border: 0; border-radius: 0; outline: 0; background: none; color: #fff; font: 400 15px/1.5 var(--font); }
.ai-field textarea::placeholder { color: var(--ai-mute); }
.ai-field textarea:focus, .ai-field textarea:focus-visible { outline: none; box-shadow: none; background: none; }
.ai-send { width: 42px; height: 42px; flex-shrink: 0; border-radius: 2px; border: 0; cursor: pointer; color: #fff; font-size: 15px; background: rgba(255, 255, 255, 0.1);
    transition: transform 0.25s ease, background 0.25s ease; }
.ai-dock.has-text .ai-send, .ai-dock.busy .ai-send { background: var(--ai-orange); }
.ai-send:hover { background: var(--ai-orange-2); }
.ai-send:active { transform: translateY(1px); }
.ai-dock.busy .ai-send { animation: aiPulse 1.6s ease-out infinite; }
.ai-fine { margin: 8px 6px 0; font-size: 11.5px; line-height: 1.4; color: var(--ai-mute); text-align: center; }
.ai-fine kbd { padding: 2px 5px; border-radius: 2px; border: 1px solid var(--ai-line-2); background: rgba(255, 255, 255, 0.06); color: var(--ai-ink-2); font: 600 10.5px/1 var(--mono); }


/* ---- The floating button on a dashboard ------------------------------------------------------------------------------ */

.ai-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 45; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 7px;
    border-radius: 3px; border: 0; cursor: pointer; color: #fff; font: 600 15px/1 var(--display, system-ui);
    background: #1B1E31; box-shadow: inset 3px 0 0 #FE5924, 0 24px 50px -18px rgba(20, 22, 39, 0.8);
    transition: transform 0.35s cubic-bezier(.2, .7, .2, 1), opacity 0.3s ease, background 0.25s ease;
}
.ai-fab:hover { transform: translateY(-3px); background: #FE5924; }
.ai-fab:hover .ai-fab-orb { background: #1B1E31; }
.ai-fab-orb { width: 42px; height: 42px; font-size: 15px; transition: background 0.25s ease; }
.ai-fab-orb i { position: relative; }
html.ai-open .ai-fab { opacity: 0; transform: translateY(14px); pointer-events: none; }
.dash[data-editing="true"] .ai-fab { display: none; }


/* ---- Phones: a full-screen sheet that follows the keyboard ------------------------------------------------------------- */

@media (max-width: 700px) {
    .ai-panel { top: var(--ai-vvt, 0px); right: 0; left: 0; bottom: auto; width: 100%; height: var(--ai-vvh, 100dvh); border-radius: 0; transform: translateY(48px); }
    .ai-dock.open .ai-panel { transform: none; }
    .ai-dock.wide .ai-panel { width: 100%; }
    .ai-head { padding: calc(14px + env(safe-area-inset-top)) 8px 10px 14px; }
    .ai-orb { width: 38px; height: 38px; }
    .ai-desk { display: none !important; }
    .ai-modes { margin: 0 12px 2px; }
    .ai-thread { padding: 14px 12px 16px; }
    .ai-hello h3 { font-size: 20px; }
    .ai-starters { grid-template-columns: 1fr; gap: 8px; }
    .ai-starter { flex-direction: row; align-items: center; min-height: 0; padding: 12px; }
    .ai-starter i { flex-shrink: 0; }
    .ai-bubble { max-width: 90%; }
    .ai-avatar { display: none; }
    .ai-chart-card .w-chart { height: 220px; }
    .ai-composer { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
    .ai-field textarea { font-size: 16px; }
    .ai-fine { font-size: 11px; margin-top: 6px; }
    .ai-jump { bottom: 110px; }
    .ai-actions { opacity: 1; }
    html.ai-open, html.ai-open body { overflow: hidden; }

    .ai-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 56px; padding: 0; justify-content: center; box-shadow: 0 20px 40px -16px rgba(20, 22, 39, 0.8); background: #FE5924; }
    .ai-fab .ai-fab-orb { background: transparent; }
    .ai-fab-text { display: none; }
}

@media (hover: none) { .ai-actions { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .ai-aurora i, .ai-orb span, .ai-hello-orb .ring, .ai-skel b, .ai-dock.busy .ai-send, .ai-typing span, .ai-typing em { animation: none !important; }
    .ai-panel, .ai-msg.fresh, .ai-starter, .ai-hello, .ai-offer { transition: none; animation: none; }
}

@media print { .ai-dock { display: none !important; } }


@keyframes aiSpin { to { transform: rotate(390deg); } }
@keyframes aiRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aiRing { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
@keyframes aiRingSq { from { transform: scale(0.95); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes aiBlink { 50% { opacity: 0.35; } }
@keyframes aiBounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.55; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes aiShimmer { to { background-position: -200% 0; } }
@keyframes aiCaret { 50% { opacity: 0; } }
@keyframes aiGrow { from { transform: scaleY(0.55); opacity: 0.6; } to { transform: scaleY(1); opacity: 1; } }
@keyframes aiPulse { 0% { box-shadow: 0 0 0 0 rgba(254, 89, 36, 0.6); } 100% { box-shadow: 0 0 0 12px rgba(254, 89, 36, 0); } }


/* =====================================================================================================================
   THE BRANDING STUDIO  -  brand panel, heading and image editors (js/brand.js), in the site's own tokens
   ===================================================================================================================== */

.modal.brand-modal { max-width: 1080px; }
.brand-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
.bs-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bs-form .field { margin-bottom: 12px; }
.bs-sec + .bs-sec { padding-top: 20px; border-top: 1px solid var(--line); }
.bs-sec h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 700 15.5px/1.2 var(--display); color: var(--ink); }
.bs-sec h4 i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 2px; font-size: 13px; color: #fff; background: var(--accent); }
.bs-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.bs-row > label { font: 600 13.5px/1 var(--display); color: var(--ink-2); }

.bs-preview { position: sticky; top: 0; min-width: 0; }
.bs-preview-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-bg); animation: aiBlink 2s ease-in-out infinite; }
.bs-preview-box { overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); }
.bs-dash.dash { min-height: 0; padding: 18px; border-radius: 0; }
.bs-dash .dash-header { margin-bottom: 14px; }
.bs-dash .dash-title { font-size: min(var(--d-title-size), 24px); }
.bs-dash .dash-header.has-cover { min-height: 170px; padding: 20px; }
.bs-dash .dash-grid { gap: 10px; }
.bs-ghost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bs-ghost b { height: 56px; border-radius: var(--d-radius); background: var(--d-card); border: 1px solid var(--d-card-border); box-shadow: var(--d-card-shadow); }
.bs-ghost b.wide { grid-column: span 2; height: 110px; }
.bs-ghost b.wide2 { height: 110px; }
.bs-ghost-card { min-height: 64px; border-radius: var(--d-radius); border: 1px dashed var(--d-card-border); }
.bs-tip { margin-top: 12px; }
.bs-tip i { color: var(--accent); margin-right: 4px; }

/* Segmented controls. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 3px; background: var(--input); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; min-width: 36px; padding: 0 12px; border: 0; border-radius: 2px; background: none; color: var(--ink-2); font: 600 13px/1 var(--display); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--accent); color: #fff; box-shadow: none; }
[data-theme="dark"] .seg button.on { background: var(--accent); color: #fff; }

/* The image well: tap, drop or paste; the library to reuse what was uploaded before. */
.img-well { display: block; border-radius: var(--r); outline: none; }
.iw-stage { position: relative; display: grid; place-items: center; height: 132px; overflow: hidden; cursor: pointer; border-radius: var(--r); border: 2px dashed var(--line-2); background: var(--input);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.img-well[data-kind="cover"] .iw-stage { height: 150px; }
.img-well[data-kind="image"] .iw-stage { height: 170px; }
.iw-stage:hover, .img-well:focus-visible .iw-stage { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--input)); }
.img-well.over .iw-stage { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.iw-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; object-fit: contain; }
.img-well[data-kind="cover"] .iw-img { padding: 0; object-fit: cover; }
.img-well.has-image .iw-img { display: block; }
.img-well.has-image .iw-stage { border-style: solid; border-width: 1px; border-color: var(--line); background: repeating-conic-gradient(var(--bg-2) 0 25%, var(--card) 0 50%) 0 0 / 16px 16px; }
.img-well.has-image .iw-empty { display: none; }
.iw-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.iw-empty strong { font: 700 14.5px/1.3 var(--display); color: var(--ink); }
.iw-ico { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 50%; background: var(--card); color: var(--accent); box-shadow: var(--shadow-sm); }
.iw-busy, .iw-drop { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 10px; font: 600 14px var(--display); color: var(--ink);
    background: color-mix(in srgb, var(--card) 86%, transparent); }
.iw-busy .spinner { width: 24px; height: 24px; border-width: 2px; }
.img-well.busy .iw-busy { display: flex; }
.img-well.over .iw-drop { display: flex; color: var(--accent); }
.iw-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.iw-bar button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: 600 12.5px/1 var(--display); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.iw-bar button:hover { border-color: var(--accent); color: var(--accent); }
.iw-bar .iw-remove { display: none; }
.img-well.has-image .iw-bar .iw-remove { display: inline-flex; }
.iw-library { margin-top: 10px; padding: 12px; border-radius: 3px; background: var(--input); border: 1px solid var(--line); }
.iw-library[hidden] { display: none; }
.iw-lib-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 13.5px; color: var(--ink); }
.iw-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; }
.iw-lib-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 3px; border: 2px solid transparent; background: repeating-conic-gradient(var(--bg-2) 0 25%, var(--card) 0 50%) 0 0 / 12px 12px; }
.iw-lib-item.on { border-color: var(--accent); }
.iw-use { position: absolute; inset: 0; padding: 6px; border: 0; background: none; cursor: pointer; }
.iw-use img { width: 100%; height: 100%; object-fit: contain; }
.iw-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 2px; background: #1B1E31; color: #fff; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; }
.iw-del:hover { background: var(--bad); }
.iw-lib-item:hover .iw-del, .iw-del:focus-visible { opacity: 1; }
@media (hover: none) { .iw-del { opacity: 1; } }

/* Heading styles, each shown in the dashboard's own theme. */
.el-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.el-style { display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left; cursor: pointer; border-radius: 3px; border: 1px solid var(--line); background: var(--card); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.el-style:hover { border-color: var(--line-2); }
.el-style.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.el-style em { padding: 2px 4px 4px; font: 600 12px/1 var(--display); font-style: normal; color: var(--ink-2); }
.dash.dash-inset.es-sample { display: flex; align-items: center; min-height: 72px; padding: 10px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.es-sample .el-label { width: 100%; padding: 2px; }
.es-sample .el-label[data-style="section"] { padding: 2px 2px 6px; }
.es-sample .el-label[data-style="callout"], .es-sample .el-label[data-style="banner"] { padding: 9px 11px; }
.es-sample .el-text { font-size: 13.5px !important; }
.es-sample .el-label[data-style="eyebrow"] .el-text { font-size: 10px !important; padding: 6px 9px; }
.es-sample .el-label[data-style="section"] .el-words::before { margin-bottom: 6px; width: 22px; }

@media (max-width: 860px) {
    .brand-studio { grid-template-columns: 1fr; gap: 20px; }
    .bs-preview { position: static; order: -1; }
    .bs-dash .dash-header.has-cover { min-height: 140px; }
    .bs-ghost { display: none; }
}

@media (max-width: 560px) {
    .bs-row { flex-direction: column; align-items: stretch; }
    .seg { width: 100%; }
    .seg button { flex: 1; padding: 0 8px; }
    .el-styles { grid-template-columns: 1fr 1fr; }
}



/* ---- Ask AI on the price cards and the pricing value strip ------------------------------------------------------------ */

.pc-ai { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-sm, 2px); color: var(--ink);
    background: var(--bg-2); border: 0; box-shadow: inset 3px 0 0 var(--accent); }
.pc-ai-orb { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 2px; font-size: 14px; color: #fff; background: var(--accent); box-shadow: none; }
.pc-ai strong { display: block; font: 700 14.5px/1.25 var(--display); color: var(--ink); }
.pc-ai > div > span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }

.value-strip .vs-ai { background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px, var(--panel); border-color: transparent; box-shadow: inset 0 4px 0 var(--accent); }
.value-strip .vs-ai strong { color: #fff; }
.value-strip .vs-ai span { color: var(--panel-mute); }
.value-strip .vs-ai i { color: #fff; background: var(--accent); box-shadow: none; }

@media (max-width: 720px) {
    .value-strip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) and (min-width: 721px) {
    .value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---- Export to Power BI (render.js openPowerBI) ---------------------------------------------------------------- */

.pbi-lead { font-size: 15.5px; line-height: 1.6; margin-bottom: 16px; }
.pbi-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pbi-facts span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 2px; background: var(--input); border: 1px solid var(--line); font: 600 13px/1 var(--display); color: var(--ink-2); }
.pbi-facts i { color: var(--accent); }
.pbi-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pbi-opt { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r, 4px); border: 1px solid var(--line-2); background: var(--card); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.pbi-opt:hover { border-color: var(--accent); }
.pbi-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pbi-opt.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent); }
.pbi-ico { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 2px; font-size: 18px; color: #F2C811; background: #1B1E31; }
.pbi-txt strong { display: block; margin-bottom: 4px; font: 700 15.5px/1.3 var(--display); color: var(--ink); }
.pbi-txt span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pbi-fine { margin-top: 16px; }
.pbi-fine i { color: var(--accent); margin-right: 4px; }
@media (max-width: 640px) { .pbi-opts { grid-template-columns: 1fr; } }
.pbi-big { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; }