/*
    Financial Intelligence (Components/Pages/Admin/AiAssist.razor and Components/Pages/Admin/Ai/*): the web port of the
    mobile AI Assist page. The --ai-* tokens port the mobile theme keys (ChipIn.Mobile Themes/LightTheme.xaml and
    DarkTheme.xaml, the Ai* and SfAIAssistView* keys plus the dashboard hues the starter cards use) one for one, so web
    and mobile read the same in light and dark. MAUI writes colors as #AARRGGBB; they are rgba() here. Dark mode follows
    the site's data-bs-theme="dark" on <html>.

    Prefixes: --ai-* tokens; ai-page / ai-chat the page shell; ai-prompt / ai-answer the chat rows; ai-vis the response
    visuals (switcher, highlights, KPI cards, ranking, tree map, chart cards, table); ai-chip the follow-ups; ai-empty /
    ai-starter the empty state; ai-editor the message box; ai-history the conversation drawer; ai-toast the toasts.
*/

:root {
    --ai-font: "Poppins", var(--si-font-sans-serif, "Manrope"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ai-font-text: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Base keys */
    --ai-page: #FCFDFD;
    --ai-wrapper: #F3F6FF;
    --ai-text: #0B0F19;
    --ai-light-text: #9397AD;
    --ai-icon: #565973;
    --ai-accent: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --ai-accent-soft: hsl(calc(246.92deg + var(--ci-accent-shift, 0deg)) 100% 94.9%);
    --ai-card-border: hsl(calc(247.66deg + var(--ci-accent-shift, 0deg)) 100% 90.78%);
    --ai-white: #FFFFFF;
    --ai-error: #DC2626;

    /* Chat rows */
    --ai-request-bg: linear-gradient(135deg, hsl(calc(251.43deg + var(--ci-accent-shift, 0deg)) 100% 95.88%) 0%, hsl(calc(250.59deg + var(--ci-accent-shift, 0deg)) 100% 93.33%) 55%, hsl(calc(250.21deg + var(--ci-accent-shift, 0deg)) 100% 90.78%) 100%);
    --ai-request-border: hsl(calc(249.31deg + var(--ci-accent-shift, 0deg)) 100% 88.63%);
    --ai-request-text: hsl(calc(246.4deg + var(--ci-accent-shift, 0deg)) 58.14% 25.29%);
    --ai-avatar-ring: linear-gradient(135deg, #5A45E6 0%, #2FB4F2 100%);
    --ai-response-bg: #FFFFFF;
    --ai-editor-stroke: hsl(calc(247.66deg + var(--ci-accent-shift, 0deg)) 100% 90.78%);
    --ai-editor-stroke-focused: #58BADB;
    --ai-assist-gradient-start: #FFFFFF;
    --ai-assist-gradient-end: #FFFFFF;

    /* Chart cards */
    --ai-chart-card-bg: linear-gradient(180deg, #ECE9FF 0%, #F6F5FF 45%, #FFFFFF 100%);
    --ai-chart-card-border: #DCD7FA;
    --ai-chart-icon-badge: #D9D2FF;
    --ai-chart-column-start: #5A45E6;
    --ai-chart-column-end: #2FB4F2;
    --ai-chart-line: #5A45E6;
    --ai-chart-grid: #E6E8F2;
    --ai-chart-marker-fill: #FFFFFF;
    --ai-chart-donut-gap: #FAF9FF;
    --ai-tooltip-bg: rgba(58, 66, 86, .90);
    --ai-tooltip-text: #F8FAFC;
    --ai-palette-1: #5A45E6;
    --ai-palette-2: #0EA5E9;
    --ai-palette-3: #16A34A;
    --ai-palette-4: #D97706;
    --ai-palette-5: #DB2777;
    --ai-palette-6: #0D9488;
    --ai-palette-7: #4F46E5;
    --ai-palette-8: #DC2626;

    /* Follow-up chips */
    --ai-chip-bg: linear-gradient(135deg, hsl(calc(252.86deg + var(--ci-accent-shift, 0deg)) 100% 97.25%) 0%, hsl(calc(251.11deg + var(--ci-accent-shift, 0deg)) 100% 94.71%) 100%);
    --ai-chip-border: hsl(calc(249.33deg + var(--ci-accent-shift, 0deg)) 100% 91.18%);
    --ai-chip-icon: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --ai-chip-text: hsl(calc(246deg + var(--ci-accent-shift, 0deg)) 45.45% 25.88%);

    /* KPI cards, ranking, highlights */
    --ai-metric-bg: #FFFFFF;
    --ai-metric-border: hsl(calc(248.89deg + var(--ci-accent-shift, 0deg)) 77.14% 93.14%);
    --ai-rank-track: #EEF0F7;
    --ai-rank-bar: linear-gradient(90deg, hsl(calc(248.22deg + var(--ci-accent-shift, 0deg)) 80.22% 82.16%) 0%, #93D3F3 100%);
    --ai-rank-badge: hsl(calc(247.06deg + var(--ci-accent-shift, 0deg)) 100% 96.67%);
    --ai-rank-top-badge: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --ai-highlight-bg: hsl(calc(247.5deg + var(--ci-accent-shift, 0deg)) 100% 98.43%);
    --ai-highlight-border: hsl(calc(249.6deg + var(--ci-accent-shift, 0deg)) 75.76% 93.53%);

    /* Starter cards and the empty state */
    --ai-starter-bg: linear-gradient(180deg, #FFFFFF 0%, hsl(calc(240deg + var(--ci-accent-shift, 0deg)) 100% 99.41%) 55%, #F6F7FF 100%);
    --ai-starter-stroke: #E6E9F4;
    --ai-starter-title: #0B0F19;
    --ai-starter-prompt: #4B4F66;
    --ai-starter-caption: #7B7F99;
    --ai-greeting: #0B0F19;
    --ai-headline: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63%);
    --ai-subline: #6B6F8A;
    --ai-eyebrow: #7B7F99;
    --ai-pill-bg: hsl(calc(251.43deg + var(--ci-accent-shift, 0deg)) 91.3% 95.49%);
    --ai-pill-text: hsl(calc(253.7deg + var(--ci-accent-shift, 0deg)) 67.5% 52.94%);
    --ai-couple-pill-bg: hsl(calc(251.43deg + var(--ci-accent-shift, 0deg)) 91.3% 95.49%);
    --ai-couple-pill-text: hsl(calc(257.14deg + var(--ci-accent-shift, 0deg)) 72.2% 56.27%);
    --ai-indicator: hsl(calc(247.66deg + var(--ci-accent-shift, 0deg)) 100% 90.78%);
    --ai-brain-glow: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .70);
    --ai-brain-synapse: #0E7490;
    --ai-brain-spark: #06B6D4;
    --ai-skeleton-bone: #D2D8E6;
    --ai-skeleton-wave: #F0F3F9;

    /* Table */
    --ai-table-bg: #FFFFFF;
    --ai-table-border: #EAEEF2;
    --ai-table-header: #14181D;
    --ai-table-separator: #58BADB;
    --ai-table-cell: #14181D;
    --ai-table-alt-row: #F8F9FB;
    --ai-table-row-border: #F8F9FB;

    /* Area hues (DashboardXIconColor / IconBackgroundColor / XHeroBorderColor) */
    --ai-area-home-icon: #2563EB;
    --ai-area-home-badge: #DBEAFE;
    --ai-area-home-border: #B5CFF6;
    --ai-area-accounts-icon: #0D9488;
    --ai-area-accounts-badge: #CCFBF1;
    --ai-area-accounts-border: #BCE6E2;
    --ai-area-bills-icon: #B45309;
    --ai-area-bills-badge: #F6DDB2;
    --ai-area-bills-border: #EBD6B5;
    --ai-area-investments-icon: #16A34A;
    --ai-area-investments-badge: #DCFCE7;
    --ai-area-investments-border: #C2EACF;
    --ai-area-liabilities-icon: #EF4444;
    --ai-area-liabilities-badge: #FEE2E2;
    --ai-area-liabilities-border: #F0C8D0;
    --ai-area-partner-icon: #7C3AED;
    --ai-area-partner-badge: #EDE9FE;
    --ai-area-partner-border: #D5C8F7;
    --ai-area-reports-icon: hsl(calc(243.4deg + var(--ci-accent-shift, 0deg)) 75.36% 58.63%);
    --ai-area-reports-badge: #E0E7FF;
    --ai-area-reports-border: hsl(calc(248.57deg + var(--ci-accent-shift, 0deg)) 71.01% 86.47%);
}

[data-bs-theme="dark"] {
    --ai-page: #0B0F19;
    --ai-wrapper: #1F2233;
    --ai-text: #D9DBE8;
    --ai-light-text: #B4B7C9;
    --ai-icon: #B4B7C9;
    --ai-accent: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --ai-accent-soft: hsl(calc(250.71deg + var(--ci-accent-shift, 0deg)) 35% 15.69%);
    --ai-card-border: #2B3045;
    --ai-error: #F87171;

    --ai-request-bg: linear-gradient(135deg, hsl(calc(247.95deg + var(--ci-accent-shift, 0deg)) 45.86% 35.49%) 0%, hsl(calc(246.1deg + var(--ci-accent-shift, 0deg)) 44.36% 26.08%) 55%, hsl(calc(245.71deg + var(--ci-accent-shift, 0deg)) 41.18% 20%) 100%);
    --ai-request-border: hsl(calc(246.98deg + var(--ci-accent-shift, 0deg)) 39.81% 42.35%);
    --ai-request-text: hsl(calc(249deg + var(--ci-accent-shift, 0deg)) 100% 96.08%);
    --ai-avatar-ring: linear-gradient(135deg, #A99CFF 0%, #4ACAFF 100%);
    --ai-response-bg: #0B0F19;
    --ai-editor-stroke: hsl(calc(250.34deg + var(--ci-accent-shift, 0deg)) 21.48% 26.47%);
    --ai-editor-stroke-focused: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --ai-assist-gradient-start: #0B0F19;
    --ai-assist-gradient-end: #0B0F19;

    --ai-chart-card-bg: linear-gradient(180deg, #1E1B3C 0%, #14172A 45%, #0B0F19 100%);
    --ai-chart-card-border: #2B2A50;
    --ai-chart-icon-badge: #2F2A5E;
    --ai-chart-column-start: #7C6AF2;
    --ai-chart-column-end: #4ACAFF;
    --ai-chart-line: #A99CFF;
    --ai-chart-grid: rgba(255, 255, 255, .09);
    --ai-chart-marker-fill: #141729;
    --ai-chart-donut-gap: #121428;
    --ai-tooltip-bg: rgba(42, 48, 71, .95);
    --ai-tooltip-text: #E8EAF2;
    --ai-palette-1: #8B7CF6;
    --ai-palette-2: #4ACAFF;
    --ai-palette-3: #34D399;
    --ai-palette-4: #F2B557;
    --ai-palette-5: #F472B6;
    --ai-palette-6: #2DD4BF;
    --ai-palette-7: #A5B4FC;
    --ai-palette-8: #F87171;

    --ai-chip-bg: linear-gradient(135deg, hsl(calc(245.33deg + var(--ci-accent-shift, 0deg)) 39.13% 22.55%) 0%, hsl(calc(240deg + var(--ci-accent-shift, 0deg)) 32.47% 15.1%) 100%);
    --ai-chip-border: hsl(calc(243.67deg + var(--ci-accent-shift, 0deg)) 31.61% 30.39%);
    --ai-chip-icon: hsl(calc(247.88deg + var(--ci-accent-shift, 0deg)) 100% 80.59%);
    --ai-chip-text: hsl(calc(245.71deg + var(--ci-accent-shift, 0deg)) 56.76% 92.75%);

    --ai-metric-bg: #121626;
    --ai-metric-border: #242A40;
    --ai-rank-track: rgba(255, 255, 255, .07);
    --ai-rank-bar: linear-gradient(90deg, hsl(calc(245.83deg + var(--ci-accent-shift, 0deg)) 42.04% 51.96%) 0%, #3C78A8 100%);
    --ai-rank-badge: #1E2236;
    --ai-rank-top-badge: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --ai-highlight-bg: rgba(255, 255, 255, .05);
    --ai-highlight-border: rgba(255, 255, 255, .10);

    --ai-starter-bg: linear-gradient(180deg, #1E2236 0%, #171B2C 55%, #121626 100%);
    --ai-starter-stroke: #262A3F;
    --ai-starter-title: #EEEFF7;
    --ai-starter-prompt: #B4B7C9;
    --ai-starter-caption: #8C90A8;
    --ai-greeting: hsl(calc(244.62deg + var(--ci-accent-shift, 0deg)) 100% 97.45%);
    --ai-headline: hsl(calc(246deg + var(--ci-accent-shift, 0deg)) 100% 88.24%);
    --ai-subline: #9A9EB8;
    --ai-eyebrow: #8E92A8;
    --ai-pill-bg: hsl(calc(246.98deg + var(--ci-accent-shift, 0deg)) 36.75% 22.94%);
    --ai-pill-text: hsl(calc(252.5deg + var(--ci-accent-shift, 0deg)) 94.74% 85.1%);
    --ai-couple-pill-bg: hsl(calc(255.25deg + var(--ci-accent-shift, 0deg)) 45.04% 25.69%);
    --ai-couple-pill-text: hsl(calc(252.5deg + var(--ci-accent-shift, 0deg)) 94.74% 85.1%);
    --ai-indicator: #3A3F5C;
    --ai-brain-glow: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24%);
    --ai-brain-synapse: #22D3EE;
    --ai-brain-spark: #F0F9FF;
    --ai-skeleton-bone: rgba(154, 168, 214, .13);
    --ai-skeleton-wave: rgba(180, 190, 230, .24);

    --ai-table-bg: #121620;
    --ai-table-border: #1C2232;
    --ai-table-header: #E4E6F0;
    --ai-table-separator: #4FB0D4;
    --ai-table-cell: #D9DBE8;
    --ai-table-alt-row: rgba(255, 255, 255, .04);
    --ai-table-row-border: rgba(255, 255, 255, .07);

    --ai-area-home-icon: #60A5FA;
    --ai-area-home-badge: #1E3354;
    --ai-area-home-border: #24406A;
    --ai-area-accounts-icon: #2DD4BF;
    --ai-area-accounts-badge: #163A3B;
    --ai-area-accounts-border: #1D3A40;
    --ai-area-bills-icon: #F2B557;
    --ai-area-bills-badge: #45331A;
    --ai-area-bills-border: #3E3121;
    --ai-area-investments-icon: #34D399;
    --ai-area-investments-badge: #223A2B;
    --ai-area-investments-border: #1F3A2B;
    --ai-area-liabilities-icon: #F87171;
    --ai-area-liabilities-badge: #3A1F1F;
    --ai-area-liabilities-border: #3D2433;
    --ai-area-partner-icon: #C4B5FD;
    --ai-area-partner-badge: #33245F;
    --ai-area-partner-border: #3A2A66;
    --ai-area-reports-icon: #A5B4FC;
    --ai-area-reports-badge: hsl(calc(245.62deg + var(--ci-accent-shift, 0deg)) 44.44% 28.24%);
    --ai-area-reports-border: hsl(calc(245.81deg + var(--ci-accent-shift, 0deg)) 40.79% 29.8%);
}

/* ------------------------------------------------------------------ Page shell */

/* Lock the page to the viewport so only the chat scrolls, never the browser: the admin shell's header plus this
   page's own header take about 7rem. */
.ai-page {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 6.5rem);
    max-height: calc(100dvh - 6.5rem);
    min-height: 0;
    overflow: hidden;
    font-family: var(--ai-font-text);
    color: var(--ai-text);
}

.ai-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 0 .25rem .6rem;
}

.ai-page-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-family: var(--ai-font);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ai-text);
}

.ai-page-title .ai-page-title-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--ai-chart-icon-badge);
    color: var(--ai-accent);
    font-size: 15px;
}

.ai-page-subtitle {
    margin: 0;
    font-size: .8rem;
    color: var(--ai-light-text);
}

.ai-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ai-page-actions .ai-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 36px;
    padding: 0 .9rem;
    border: 1px solid var(--ai-card-border);
    border-radius: 12px;
    background: var(--ai-page);
    color: var(--ai-text);
    font-family: var(--ai-font);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.ai-page-actions .ai-action-btn:hover {
    border-color: var(--ai-accent);
    background: var(--ai-accent-soft);
}

.ai-page-actions .ai-action-btn:active {
    transform: scale(.97);
}

.ai-page-actions .ai-action-btn i {
    color: var(--ai-accent);
    font-size: .9rem;
}

.ai-page-actions .ai-action-btn.is-active {
    border-color: var(--ai-accent);
    background: var(--ai-accent-soft);
}

/* Temporary chat toggle, as a pill switch */
.ai-temp-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 36px;
    padding: 0 .9rem 0 .7rem;
    border: 1px solid var(--ai-card-border);
    border-radius: 12px;
    background: var(--ai-page);
    font-family: var(--ai-font);
    font-size: .82rem;
    color: var(--ai-text);
    cursor: pointer;
    user-select: none;
}

.ai-temp-toggle input {
    margin: 0;
}

.ai-temp-toggle i {
    color: var(--ai-accent);
}

.ai-chat-card {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--ai-card-border);
    border-radius: 18px;
    background: linear-gradient(180deg, var(--ai-assist-gradient-start) 0%, var(--ai-assist-gradient-end) 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

[data-bs-theme="dark"] .ai-chat-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.ai-chat-body {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ai-page-alert {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .6rem;
    padding: .5rem .8rem;
    border: 1px solid var(--ai-card-border);
    border-radius: 12px;
    background: var(--ai-wrapper);
    font-size: .82rem;
    color: var(--ai-text);
}

.ai-page-alert.is-error {
    border-color: rgba(220, 38, 38, .35);
    color: var(--ai-error);
}

.ai-page-alert i {
    color: var(--ai-accent);
}

.ai-page-alert.is-error i {
    color: var(--ai-error);
}

/* ------------------------------------------------------------------ SfAIAssistView surfaces */

.ai-page .ai-assist-view,
.ai-page .ai-assist-view .e-aiassistview,
.ai-page .ai-assist-view.e-aiassistview {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    background: transparent !important;
    color: var(--ai-text);
    border: 0 !important;
    font-family: var(--ai-font-text);
}

.ai-page .ai-assist-view .e-aiassist-content,
.ai-page .ai-assist-view .e-prompt-suggestions,
.ai-page .ai-assist-view .e-prompt-container,
.ai-page .ai-assist-view .e-prompt-toolbar,
.ai-page .ai-assist-view .e-footer,
.ai-page .ai-assist-view .e-view-container,
.ai-page .ai-assist-view .e-view-content,
.ai-page .ai-assist-view .e-prompt-view,
.ai-page .ai-assist-view .e-prompt-output-container,
.ai-page .ai-assist-view .e-output-container,
.ai-page .ai-assist-view .e-banner-view,
.ai-page .ai-assist-view .e-prompt-content,
.ai-page .ai-assist-view .e-output-content {
    background: transparent !important;
    color: var(--ai-text);
    border: 0 !important;
    box-shadow: none !important;
}

.ai-page .ai-assist-view,
.ai-page .ai-assist-view .e-aiassistview,
.ai-page .ai-assist-view .e-view-container,
.ai-page .ai-assist-view .e-prompt-view {
    display: flex !important;
    flex-direction: column !important;
}

.ai-page .ai-assist-view .e-view-content,
.ai-page .ai-assist-view .e-prompt-output-container,
.ai-page .ai-assist-view .e-output-container,
.ai-page .ai-assist-view .e-banner-view,
.ai-page .ai-assist-view .e-aiassist-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto;
}

.ai-page .ai-assist-view .e-footer,
.ai-page .ai-assist-view .e-prompt-container,
.ai-page .ai-assist-view .e-prompt-toolbar {
    flex: 0 0 auto !important;
    margin-top: auto;
}

.ai-page .ai-assist-view .e-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 0 !important;
    background: transparent !important;
}

/* The prompt bubble and response rows are ours; the control's own wrappers go flat. */
.ai-page .ai-assist-view .e-prompt-content,
.ai-page .ai-assist-view .e-output-content,
.ai-page .ai-assist-view .e-prompt-text,
.ai-page .ai-assist-view .e-output {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.ai-page .ai-assist-view .e-prompt-icon,
.ai-page .ai-assist-view .e-output-icon,
.ai-page .ai-assist-view .e-assistview-icon {
    display: none !important;
}

/* The control's own loader (a skeleton) is replaced by the progress line. */
.ai-page .ai-assist-view .e-output-container:has(.e-skeleton),
.ai-page .ai-assist-view .e-output-container .e-skeleton,
.ai-page .ai-assist-view .e-skeleton,
.ai-page .ai-assist-view .e-skeleton-text,
.ai-page .ai-assist-view .e-shimmer-wave,
.ai-page .ai-assist-view .e-loader,
.ai-page .ai-assist-view .e-stop-response {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* The scroll-to-bottom button keeps the accent. */
.ai-page .ai-assist-view .e-scroll-down-button,
.ai-page .ai-assist-view .e-scroll-to-bottom {
    background: var(--ai-accent) !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .32) !important;
}

/*
    Response toolbar: the mobile action row (glyphs only, muted until hovered). Syncfusion 34.x renders it as a plain
    .e-toolbar inside .e-content-footer (its theme paints the track and every button with the content color), so the
    footer is matched alongside the older toolbar classes: transparent track and buttons in both themes.
*/
.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer),
.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-toolbar-items,
.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-toolbar-item,
.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-tbar-btn,
.ai-page .ai-assist-view .e-output-toolbar,
.ai-page .ai-assist-view .e-output-toolbar .e-toolbar-items,
.ai-page .ai-assist-view .e-output-toolbar .e-toolbar-item,
.ai-page .ai-assist-view .e-output-toolbar .e-tbar-btn,
.ai-page .ai-assist-view .e-toolbar.e-control {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
    min-height: 0 !important;
}

/* The row sits under the answer body: the row's 16px gutter + the 40px avatar + the 10px gap. */
.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer),
.ai-page .ai-assist-view .e-output-toolbar {
    width: auto !important;
    height: auto !important;
    margin: 6px 0 18px 66px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) :is(.e-toolbar, .e-toolbar-items, .e-toolbar-item, .e-toolbar-item.e-template, .e-hscroll-bar, .e-hscroll-content),
.ai-page .ai-assist-view .e-output-toolbar :is(.e-toolbar, .e-toolbar-items, .e-toolbar-item, .e-hscroll-bar, .e-hscroll-content) {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-toolbar-items,
.ai-page .ai-assist-view .e-output-toolbar .e-toolbar-items {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-toolbar-item,
.ai-page .ai-assist-view .e-output-toolbar .e-toolbar-item {
    margin: 0 !important;
    padding: 0 !important;
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-tbar-btn,
.ai-page .ai-assist-view .e-output-toolbar .e-tbar-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ai-light-text) !important;
    opacity: 1;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-tbar-btn:hover,
.ai-page .ai-assist-view .e-output-toolbar .e-tbar-btn:hover {
    color: var(--ai-accent) !important;
    background: var(--ai-accent-soft) !important;
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-tbar-btn:focus-visible,
.ai-page .ai-assist-view .e-output-toolbar .e-tbar-btn:focus-visible {
    outline: 2px solid var(--ai-editor-stroke-focused) !important;
    outline-offset: 1px;
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-tbar-btn:active,
.ai-page .ai-assist-view .e-output-toolbar .e-tbar-btn:active {
    transform: scale(.94);
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-tbar-btn .e-btn-icon,
.ai-page .ai-assist-view .e-output-toolbar .e-tbar-btn .e-btn-icon,
.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-tbar-btn .e-icons,
.ai-page .ai-assist-view .e-output-toolbar .e-tbar-btn .e-icons {
    font-size: 16px !important;
    color: inherit !important;
}

.ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer) .e-tbar-btn.e-active,
.ai-page .ai-assist-view .e-output-toolbar .e-tbar-btn.e-active {
    opacity: 1;
    color: var(--ai-accent) !important;
}

.ai-export-toolbar .e-dropdown-btn,
.ai-export-toolbar .e-dropdown-btn.e-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px;
    background: transparent !important;
    color: var(--ai-light-text) !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-export-toolbar .e-dropdown-btn:hover,
.ai-export-toolbar .e-dropdown-btn:focus,
.ai-export-toolbar .e-dropdown-btn.e-active {
    color: var(--ai-accent) !important;
    background: var(--ai-accent-soft) !important;
}

.ai-export-toolbar .e-dropdown-btn .e-btn-icon {
    font-size: 16px !important;
    margin: 0 !important;
}

.ai-export-toolbar .e-dropdown-btn .e-caret {
    display: none;
}

/* ------------------------------------------------------------------ Chat rows */

.ai-chat-rows {
    width: 100%;
}

.ai-prompt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: end;
    gap: 10px;
    padding: 6px 16px 4px;
}

.ai-prompt-bubble {
    justify-self: end;
    max-width: min(78%, 880px);
    margin-left: 56px;
    padding: 10px 14px;
    border: 1px solid var(--ai-request-border);
    border-radius: 18px 18px 6px 18px;
    background: var(--ai-request-bg);
    color: var(--ai-request-text);
    font-family: var(--ai-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-prompt-avatar-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 2.5px;
    border-radius: 50%;
    background: var(--ai-avatar-ring);
}

.ai-prompt-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 2px solid var(--ai-page);
    border-radius: 50%;
    background-color: var(--ai-accent);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    font-family: var(--ai-font);
    font-size: .78rem;
    font-weight: 600;
}

.ai-answer-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 16px 4px;
}

/* The pending row sits in the footer, above the message box, while the answer is awaited. The orb takes the
   avatar's column (centred over the brain's spot, slightly larger), the stage message the body's, so when the
   answer arrives its brain avatar and text land exactly where the orb and message were. */
.ai-answer-row-pending {
    display: block;
    padding-bottom: 6px;
    animation: ai-count-up .3s ease-out both;
}

.ai-answer-row-pending .ai-progress {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    min-height: 40px;
}

.ai-answer-row-pending .ai-progress canvas {
    width: 56px;
    height: 56px;
    margin: -8px;
}

.ai-answer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ai-chart-icon-badge);
    color: var(--ai-accent);
    font-size: 18px;
}

.ai-answer-body {
    min-width: 0;
}

.ai-answer-text {
    max-width: 100%;
    padding: 2px 0;
    color: var(--ai-text);
    font-size: 14.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ai-answer-text h1,
.ai-answer-text h2 {
    margin: .6rem 0 .35rem;
    font-family: var(--ai-font);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ai-text);
}

.ai-answer-text h3 {
    margin: .55rem 0 .3rem;
    font-family: var(--ai-font);
    font-size: .98rem;
    font-weight: 600;
    color: var(--ai-accent);
}

.ai-answer-text h4,
.ai-answer-text h5,
.ai-answer-text h6 {
    margin: .5rem 0 .25rem;
    font-family: var(--ai-font);
    font-size: .92rem;
    font-weight: 600;
}

.ai-answer-text p {
    margin: 0 0 .5rem;
}

.ai-answer-text p:last-child {
    margin-bottom: 0;
}

.ai-answer-text ul,
.ai-answer-text ol {
    margin: .25rem 0 .5rem 1.2rem;
    padding: 0;
}

.ai-answer-text li {
    margin-bottom: .15rem;
}

.ai-answer-text strong {
    font-weight: 600;
}

.ai-answer-text code {
    padding: .05rem .3rem;
    border-radius: 6px;
    background: var(--ai-wrapper);
    font-size: .9em;
}

.ai-answer-text pre {
    padding: .6rem .8rem;
    border-radius: 10px;
    background: var(--ai-wrapper);
    overflow: auto;
}

.ai-answer-text blockquote {
    margin: .4rem 0;
    padding: .3rem .8rem;
    border-left: 3px solid var(--ai-accent);
    color: var(--ai-light-text);
}

.ai-answer-text table {
    width: 100%;
    margin: .4rem 0;
    border-collapse: collapse;
    font-size: .88rem;
}

.ai-answer-text th,
.ai-answer-text td {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--ai-table-border);
    text-align: left;
}

.ai-answer-text th {
    color: var(--ai-table-header);
    border-bottom: 2px solid var(--ai-table-separator);
}

.ai-answer-text a {
    color: var(--ai-accent);
}

.ai-answer-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -.15em;
    background: var(--ai-accent);
    animation: ai-caret-blink .9s steps(1) infinite;
}

.ai-answer-error {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: 10px 14px;
    border: 1px solid rgba(220, 38, 38, .25);
    border-radius: 14px;
    background: rgba(220, 38, 38, .06);
    color: var(--ai-error);
    font-size: 14px;
    line-height: 1.45;
}

.ai-answer-stopped {
    font-size: 12.5px;
    color: var(--ai-light-text);
}

/* The progress line: the orb and the typed stage message (mobile AiTypewriterLoadingView) */
.ai-progress {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 2px 0;
}

.ai-progress canvas {
    width: 56px;
    height: 56px;
    display: block;
}

.ai-progress-text {
    font-size: 14px;
    color: var(--ai-text);
    line-height: 1.4;
    min-height: 1.4em;
}

.ai-progress-text .ai-answer-caret {
    animation-duration: .7s;
}

@keyframes ai-caret-blink {
    50% { opacity: 0; }
}

/* ------------------------------------------------------------------ Response visuals */

.ai-vis {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}

/*
    The view switcher scrolls sideways when its segments cannot fit (the mobile SegmentedMenu Scroll mode): every
    segment keeps at least --ai-seg-min, so the track overflows instead of squeezing the labels away, and the pill
    is sized the same way so it still sits under the selected segment while the track scrolls.
*/
.ai-vis .tx-seg {
    --ai-seg-min: 88px;
    grid-auto-columns: minmax(var(--ai-seg-min), 1fr);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.ai-vis .tx-seg-pill {
    width: max(var(--ai-seg-min), calc((100% - 8px) / var(--tx-seg-count, 3)));
}

.ai-vis .tx-seg::-webkit-scrollbar {
    display: none;
}

.ai-vis .tx-seg-item {
    height: 36px;
    font-size: 12.5px;
}

.ai-vis-card {
    position: relative;
    padding: 12px 14px;
    border: 1px solid var(--ai-chart-card-border);
    border-radius: 16px;
    background: var(--ai-chart-card-bg);
    overflow: hidden;
}

.ai-vis-card-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin-bottom: 8px;
}

.ai-vis-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--ai-chart-icon-badge);
    color: var(--ai-accent);
    font-size: 14px;
}

.ai-vis-card-title {
    margin: 0;
    font-family: var(--ai-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ai-text);
}

.ai-vis-card-hint {
    margin: 1px 0 0;
    font-size: 11px;
    color: var(--ai-light-text);
}

/* Highlight chips: two to a row */
.ai-highlights {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-highlight-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ai-highlight {
    position: relative;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid var(--ai-highlight-border);
    border-radius: 12px;
    background: var(--ai-highlight-bg);
    overflow: hidden;
}

.ai-highlight-watermark {
    position: absolute;
    right: -8px;
    bottom: -14px;
    font-size: 52px;
    color: var(--ai-accent);
    opacity: .08;
    transform: rotate(-12deg);
    pointer-events: none;
}

.ai-highlight-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    letter-spacing: .8px;
    color: var(--ai-light-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-highlight-label i {
    font-size: 9px;
    color: var(--ai-accent);
}

.ai-highlight-value {
    font-family: var(--ai-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--ai-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-highlight-detail {
    font-size: 10.5px;
    color: var(--ai-light-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KPI cards */
.ai-metrics {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-metric-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ai-metric {
    position: relative;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--ai-metric-border);
    border-radius: 16px;
    background: var(--ai-metric-bg);
    overflow: hidden;
}

.ai-metric.is-hero {
    grid-column: 1 / -1;
    border-color: var(--ai-chart-card-border);
    background: var(--ai-chart-card-bg);
}

.ai-metric-watermark {
    position: absolute;
    right: -10px;
    bottom: -18px;
    font-size: 58px;
    color: var(--ai-accent);
    opacity: .08;
    transform: rotate(-12deg);
    pointer-events: none;
}

.ai-metric.is-hero .ai-metric-watermark {
    right: -12px;
    bottom: -22px;
    font-size: 78px;
    opacity: .07;
}

.ai-metric-head {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.ai-metric-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--ai-chart-icon-badge);
    color: var(--ai-accent);
    font-size: 12px;
}

.ai-metric-label {
    font-family: var(--ai-font);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ai-light-text);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-metric-value {
    margin-top: 8px;
    font-family: var(--ai-font);
    font-weight: 600;
    color: var(--ai-text);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-metric.is-animating .ai-metric-value {
    animation: ai-count-up .9s cubic-bezier(.2, .8, .2, 1) both;
}

.ai-attributes {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--ai-light-text);
}

/* Ranking */
.ai-rank-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.ai-rank-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
}

.ai-rank-badge {
    grid-row: 1 / span 2;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--ai-rank-badge);
    color: var(--ai-light-text);
    font-family: var(--ai-font);
    font-size: 11px;
    font-weight: 600;
}

.ai-rank-badge.is-top {
    background: var(--ai-rank-top-badge);
    color: #FFFFFF;
    font-size: 10px;
}

.ai-rank-label {
    font-family: var(--ai-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ai-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-rank-values {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ai-rank-share {
    font-size: 11px;
    color: var(--ai-light-text);
}

.ai-rank-value {
    font-family: var(--ai-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--ai-text);
}

.ai-rank-track {
    grid-column: 2 / span 2;
    height: 7px;
    border-radius: 3.5px;
    background: var(--ai-rank-track);
    overflow: hidden;
}

.ai-rank-bar {
    height: 100%;
    border-radius: 3.5px;
    background: var(--ai-rank-bar);
    transform-origin: left center;
}

.ai-rank-bar.is-top {
    background: linear-gradient(90deg, var(--ai-chart-column-start) 0%, var(--ai-chart-column-end) 100%);
}

.ai-rank-list.is-animating .ai-rank-bar {
    animation: ai-bar-grow .8s cubic-bezier(.2, .8, .2, 1) both;
}

.ai-rank-toggle,
.ai-table-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--ai-accent);
    font-family: var(--ai-font);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* Tree map */
.ai-treemap {
    position: relative;
    width: 100%;
    aspect-ratio: 2.2 / 1;
    min-height: 220px;
    max-height: 420px;
    border-radius: 10px;
    overflow: hidden;
}

.ai-treemap-tile {
    position: absolute;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1.5px solid var(--ai-chart-card-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: filter .15s ease;
    cursor: default;
}

.ai-treemap-tile:hover {
    filter: brightness(1.06);
}

/* Intelligence tree map: square tiles (Net Worth overview keeps its own rounded look). */
.ai-treemap:not(.nw-ov-treemap) .ai-treemap-tile {
    border-radius: 0;
}

.ai-treemap-label {
    display: block;
    font-family: var(--ai-font);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-treemap-detail {
    display: block;
    font-size: 10.5px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-vis.is-animating .ai-treemap-tile {
    animation: ai-tile-in .5s cubic-bezier(.2, .8, .2, 1) both;
}

/* Charts (Syncfusion): the card's surface shows through; text follows the theme. */
.ai-chart {
    width: 100%;
    margin-top: 4px;
}

.ai-chart .e-chart,
.ai-chart .e-accumulationchart,
.ai-chart .e-accumulation-chart {
    background: transparent !important;
}

.ai-chart svg text {
    font-family: var(--ai-font-text) !important;
}

.ai-chart .e-chart-legend text,
.ai-chart .e-accumulationchart-legend text {
    fill: var(--ai-text) !important;
}

.ai-pie-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -62%);
    text-align: center;
    pointer-events: none;
}

.ai-pie-center-label {
    font-family: var(--ai-font);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--ai-light-text);
}

.ai-pie-center-value {
    max-width: 110px;
    font-family: var(--ai-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--ai-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-chart-pie-host {
    position: relative;
}

/* Table */
.ai-table-card {
    padding: 12px;
    border: .5px solid var(--ai-table-border);
    border-radius: 10px;
    background: var(--ai-table-bg);
    opacity: .96;
}

.ai-table-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
}

.ai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ai-table th {
    padding: 8px 10px;
    border-bottom: 2px solid var(--ai-table-separator);
    font-family: var(--ai-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--ai-table-header);
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.ai-table th.is-numeric,
.ai-table td.is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ai-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ai-table-row-border);
    color: var(--ai-table-cell);
    vertical-align: top;
    max-width: 320px;
    overflow-wrap: anywhere;
}

.ai-table tbody tr:nth-child(even) td {
    background: var(--ai-table-alt-row);
}

.ai-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 2px;
    font-size: 11px;
    color: var(--ai-light-text);
}

/* Follow-up chips */
.ai-followups {
    margin-top: 14px;
}

.ai-followups-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-family: var(--ai-font);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--ai-light-text);
}

.ai-followups-eyebrow i {
    font-size: 10px;
    color: var(--ai-accent);
}

.ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ai-chip-border);
    border-radius: 18px;
    background: var(--ai-chip-bg);
    color: var(--ai-chip-text);
    font-family: var(--ai-font);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease;
}

.ai-chip:hover {
    box-shadow: 0 4px 14px hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .16);
}

.ai-chip:active {
    transform: scale(.96);
}

.ai-chip i {
    font-size: 11px;
    color: var(--ai-chip-icon);
}

.ai-chip span {
    max-width: 320px;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ Empty state */

.ai-empty {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px 6px;
}

.ai-empty-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px auto 2px;
    padding: 8px 12px;
    border: .5px solid var(--ai-card-border);
    border-radius: 20px;
    background: var(--ai-accent-soft);
    font-size: 13px;
    color: var(--ai-text);
}

.ai-empty-pill i {
    color: var(--ai-accent);
    font-size: 14px;
}

.ai-empty-pill-host {
    display: flex;
    justify-content: center;
}

.ai-empty-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 18px;
    text-align: center;
}

.ai-brain {
    position: relative;
    width: 170px;
    height: 150px;
    margin: 0 auto -34px;
    pointer-events: none;
}

.ai-brain-glyph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 150px;
    line-height: 1;
    color: var(--ai-accent);
    opacity: .1;
}

.ai-brain canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ai-empty-title {
    position: relative;
    margin: 0;
    padding-top: 10px;
    font-family: var(--ai-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--ai-accent);
}

.ai-empty-hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--ai-text);
}

.ai-empty-hint i {
    font-size: 18px;
    opacity: .8;
}

.ai-starter-eyebrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    margin-top: 48px;
}

.ai-starter-eyebrow-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ai-font-text);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--ai-eyebrow);
}

.ai-starter-eyebrow-label i {
    font-size: 11px;
    color: var(--ai-accent);
}

.ai-starter-ai-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--ai-pill-bg);
    color: var(--ai-pill-text);
    font-family: var(--ai-font);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .8px;
}

.ai-starter-ai-pill i {
    font-size: 9px;
}

.ai-starter-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ai-accent);
    font-size: 12px;
    opacity: .75;
    cursor: pointer;
}

.ai-starter-refresh:hover {
    opacity: 1;
    background: var(--ai-accent-soft);
}

.ai-starter-refresh .ai-spin {
    animation: ai-spin 1s linear infinite;
}

.ai-starter-greeting {
    margin: 6px 0 0;
    font-family: var(--ai-font);
    font-size: 19px;
    font-weight: 600;
    color: var(--ai-greeting);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-starter-headline {
    margin: 2px 0 0;
    font-family: var(--ai-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ai-headline);
}

.ai-starter-subline {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--ai-subline);
}

/* Inline-block words lose the whitespace between them, so each carries its own word gap. */
.ai-starter-subline .ai-wave-char {
    display: inline-block;
    margin-right: .28em;
    animation: ai-wave 2.8s ease-in-out infinite;
}

.ai-starter-subline .ai-wave-char:last-child {
    margin-right: 0;
}

.ai-starter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

/* A page of up to three cards is one column of the grid; on narrow screens the pages stack. */
.ai-starter-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-starter {
    --ai-starter-hue: var(--ai-area-reports-icon);
    --ai-starter-badge: var(--ai-area-reports-badge);
    --ai-starter-border: var(--ai-area-reports-border);
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--ai-starter-border);
    border-radius: 16px;
    background: var(--ai-starter-bg);
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    animation: ai-card-in .42s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: var(--ai-reveal-delay, 0ms);
    transition: box-shadow .18s ease, transform .18s ease;
}

.ai-starter:hover {
    box-shadow: 0 10px 26px rgba(15, 23, 42, .10);
}

.ai-starter:active {
    transform: scale(.985);
}

.ai-starter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ai-starter-hue) 20%, transparent) 0%, color-mix(in srgb, var(--ai-starter-hue) 6%, transparent) 50%, transparent 100%);
    pointer-events: none;
}

.ai-starter::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ai-starter-hue);
}

.ai-starter--home { --ai-starter-hue: var(--ai-area-home-icon); --ai-starter-badge: var(--ai-area-home-badge); --ai-starter-border: var(--ai-area-home-border); }
.ai-starter--accounts { --ai-starter-hue: var(--ai-area-accounts-icon); --ai-starter-badge: var(--ai-area-accounts-badge); --ai-starter-border: var(--ai-area-accounts-border); }
.ai-starter--bills { --ai-starter-hue: var(--ai-area-bills-icon); --ai-starter-badge: var(--ai-area-bills-badge); --ai-starter-border: var(--ai-area-bills-border); }
.ai-starter--investments { --ai-starter-hue: var(--ai-area-investments-icon); --ai-starter-badge: var(--ai-area-investments-badge); --ai-starter-border: var(--ai-area-investments-border); }
.ai-starter--liabilities { --ai-starter-hue: var(--ai-area-liabilities-icon); --ai-starter-badge: var(--ai-area-liabilities-badge); --ai-starter-border: var(--ai-area-liabilities-border); }
.ai-starter--partner { --ai-starter-hue: var(--ai-area-partner-icon); --ai-starter-badge: var(--ai-area-partner-badge); --ai-starter-border: var(--ai-area-partner-border); }
.ai-starter--reports { --ai-starter-hue: var(--ai-area-reports-icon); --ai-starter-badge: var(--ai-area-reports-badge); --ai-starter-border: var(--ai-area-reports-border); }

.ai-starter-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: -3px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--ai-starter-hue) 16%, transparent);
}

.ai-starter-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ai-starter-badge);
    color: var(--ai-starter-hue);
    font-size: 15px;
}

.ai-starter-text {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-starter-title {
    font-family: var(--ai-font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ai-starter-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-starter-prompt {
    font-size: 12px;
    line-height: 1.12;
    color: var(--ai-starter-prompt);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-starter-caption {
    font-family: var(--ai-font);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--ai-starter-caption);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-starter-side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.ai-starter-couple {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--ai-couple-pill-bg);
    color: var(--ai-couple-pill-text);
    font-family: var(--ai-font);
    font-size: 8.5px;
    font-weight: 600;
}

.ai-starter-chevron {
    color: var(--ai-starter-hue);
    font-size: 12px;
    opacity: .85;
}

.ai-starter-skeleton {
    position: relative;
    min-height: 92px;
    border: 1px solid var(--ai-card-border);
    border-radius: 16px;
    background: var(--ai-wrapper);
    overflow: hidden;
}

.ai-starter-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, var(--ai-skeleton-wave) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: ai-shimmer 1.4s ease-in-out infinite;
}

.ai-starter-skeleton .ai-bone {
    position: absolute;
    border-radius: 6px;
    background: var(--ai-skeleton-bone);
}

.ai-starter-error {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ai-card-border);
    border-radius: 16px;
    background: var(--ai-wrapper);
    font-size: 12.5px;
    color: var(--ai-light-text);
}

.ai-starter-error i {
    font-size: 14px;
    color: var(--ai-accent);
    opacity: .8;
}

.ai-starter-error button {
    border: 0;
    background: transparent;
    color: var(--ai-accent);
    font-family: var(--ai-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.ai-starter-footnote {
    margin: 10px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--ai-subline);
}

/* ------------------------------------------------------------------ Editor (the message box) */

.ai-editor {
    padding: 12px 16px 16px;
    background: linear-gradient(180deg, transparent 0%, var(--ai-page) 30%);
}

.ai-editor-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 8px 10px 16px;
    border: 1px solid var(--ai-editor-stroke);
    border-radius: 24px;
    background: var(--ai-page);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ai-editor-box:focus-within {
    border-color: var(--ai-editor-stroke-focused);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-editor-stroke-focused) 18%, transparent);
}

/* While a request runs the stroke travels: a conic gradient spins behind a masked border. */
.ai-editor-box.is-busy {
    border-color: transparent;
}

.ai-editor-box.is-busy::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 25px;
    padding: 1.5px;
    background: conic-gradient(from var(--ai-editor-angle, 0deg), var(--ai-chart-column-start), var(--ai-chart-column-end), var(--ai-chart-column-start));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ai-editor-spin 2.2s linear infinite;
    pointer-events: none;
}

@property --ai-editor-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.ai-editor-input {
    display: block;
    align-self: center;
    width: 100%;
    min-height: 24px;
    max-height: 140px;
    margin: 0;
    padding: 2px 0;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--ai-text);
    font-family: var(--ai-font-text);
    font-size: 15px;
    line-height: 1.4;
    overflow-y: auto;
}

.ai-editor-input::placeholder {
    color: var(--ai-light-text);
}

.ai-editor-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    background: var(--ai-accent);
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
    transition: transform .12s ease, opacity .15s ease;
}

.ai-editor-send:hover {
    opacity: .92;
}

.ai-editor-send:active {
    transform: scale(.94);
}

.ai-editor-send:disabled {
    opacity: .45;
    cursor: default;
}

/* The control's own prompt box is replaced by the editor above. */
.ai-page .ai-assist-view .e-prompt-container,
.ai-page .ai-assist-view .e-prompt-toolbar,
.ai-page .ai-assist-view .e-prompt-suggestions {
    display: none !important;
}

/* ------------------------------------------------------------------ Conversation history drawer (kept from the previous page) */

.ai-history-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    border: 0;
    background: transparent;
    cursor: default;
    opacity: 1;
}

.ai-history-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1040;
    width: min(430px, 94vw);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bs-card-bg, #fff);
    color: var(--bs-body-color, #1f2937);
    box-shadow: -18px 0 34px rgba(15, 23, 42, .18);
    transform: translateX(105%);
    transition: transform .24s ease-in-out;
    border-left: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .1));
}

.ai-history-panel.is-open {
    transform: translateX(0);
}

.ai-history-header,
.ai-history-search {
    flex: 0 0 auto;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
    background: var(--bs-card-bg, #fff);
}

.ai-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ai-history-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem;
}

.ai-history-loading,
.ai-history-empty {
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.ai-history-empty i {
    font-size: 2rem;
    color: var(--ai-accent);
    margin-bottom: .5rem;
}

.ai-history-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.ai-history-item {
    position: relative;
    display: flex;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .08));
    border-radius: .8rem;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ai-history-item:hover {
    border-color: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .35);
    box-shadow: 0 6px 18px hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .10);
}

.ai-history-item.is-selected {
    border-color: var(--ai-accent);
    background: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .08);
    box-shadow: 0 8px 22px hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .16);
}

.ai-history-item.is-selected::before {
    content: "";
    position: absolute;
    inset: .55rem auto .55rem .45rem;
    width: 3px;
    border-radius: 999px;
    background: var(--ai-accent);
}

.ai-history-item.is-pinned .ai-history-question::before {
    content: "\f08d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .7rem;
    margin-right: .35rem;
    color: var(--ai-accent);
}

.ai-history-select {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.ai-history-question {
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-history-date {
    margin-top: .25rem;
    font-size: .78rem;
    color: var(--bs-secondary-color, #6c757d);
}

.ai-history-answer {
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--bs-secondary-color, #6c757d);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-history-liked {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: hsl(calc(247.83deg + var(--ci-accent-shift, 0deg)) 76.3% 58.63% / .10);
    color: var(--ai-accent);
    font-size: .72rem;
    font-weight: 600;
}

.ai-history-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    align-self: flex-start;
}

.ai-history-icon-btn {
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    padding: .15rem;
    line-height: 1;
    cursor: pointer;
}

.ai-history-icon-btn:hover {
    color: var(--ai-accent);
}

.ai-history-icon-btn.ai-history-delete:hover {
    color: var(--bs-danger, #dc3545);
}

.ai-history-icon-btn.is-on {
    color: var(--ai-accent);
}

.ai-history-rename {
    display: flex;
    gap: .35rem;
    margin-top: .25rem;
}

[data-bs-theme="dark"] .ai-history-panel,
[data-bs-theme="dark"] .ai-history-header,
[data-bs-theme="dark"] .ai-history-search {
    background: var(--bs-card-bg, #1f2330);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, .10);
}

[data-bs-theme="dark"] .ai-history-item {
    background: #2a2f3e;
    border-color: rgba(255, 255, 255, .10);
}

[data-bs-theme="dark"] .ai-history-item:hover {
    border-color: hsl(calc(249.85deg + var(--ci-accent-shift, 0deg)) 100% 86.86% / .45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

[data-bs-theme="dark"] .ai-history-item.is-selected {
    border-color: hsl(calc(249.85deg + var(--ci-accent-shift, 0deg)) 100% 86.86%);
    background: hsl(calc(249.85deg + var(--ci-accent-shift, 0deg)) 100% 86.86% / .14);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .42);
}

[data-bs-theme="dark"] .ai-history-item.is-selected::before {
    background: hsl(calc(249.85deg + var(--ci-accent-shift, 0deg)) 100% 86.86%);
}

[data-bs-theme="dark"] .ai-history-liked {
    background: hsl(calc(249.85deg + var(--ci-accent-shift, 0deg)) 100% 86.86% / .14);
    color: hsl(calc(249.85deg + var(--ci-accent-shift, 0deg)) 100% 86.86%);
}

[data-bs-theme="dark"] .ai-history-search .form-control,
[data-bs-theme="dark"] .ai-history-rename .form-control {
    background: #2a2f3e;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, .12);
}

/* ------------------------------------------------------------------ Toasts (kept from the previous page) */

.ai-toast {
    position: fixed;
    left: 50%;
    top: 84px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: min(560px, 92vw);
    padding: .6rem .95rem;
    border: 1px solid var(--ai-card-border);
    border-radius: 14px;
    background: var(--ai-page);
    color: var(--ai-text);
    font-size: .88rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
    transform: translateX(-50%);
    animation: ai-toast-in .25s ease-out;
}

.ai-toast i {
    font-size: 1rem;
}

.ai-toast.is-liked i {
    color: var(--ai-accent);
}

.ai-toast.is-disliked i {
    color: var(--ai-light-text);
}

.ai-toast.is-success i {
    color: #16A34A;
}

.ai-toast .spinner-border {
    color: var(--ai-accent);
}

.ai-delete-toast {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 92px;
    background: rgba(15, 23, 42, .18);
}

.ai-delete-toast-card {
    position: relative;
    width: min(420px, 92vw);
    padding: 1.1rem 1.2rem 1rem;
    border: 1px solid var(--ai-card-border);
    border-radius: 16px;
    background: var(--ai-page);
    color: var(--ai-text);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
    animation: ai-toast-in .22s ease-out;
}

.ai-delete-toast-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    border: 0;
    background: transparent;
    color: var(--ai-light-text);
    font-size: 1rem;
    cursor: pointer;
}

.ai-delete-toast-title {
    font-family: var(--ai-font);
    font-weight: 600;
    margin-bottom: .25rem;
}

.ai-delete-toast-message {
    font-size: .88rem;
    color: var(--ai-light-text);
    margin-bottom: .8rem;
}

.ai-delete-toast-actions {
    display: flex;
    gap: .5rem;
}

/* ------------------------------------------------------------------ Image export (light, white surface) */

.ai-export-surface {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 920px;
    padding: 24px;
    background: #FFFFFF;
    color: #1F2937;
    z-index: -1;
    pointer-events: none;
}

.chipin-image-export-light,
.chipin-image-export-light .ai-answer-text,
.chipin-image-export-light .ai-answer-text * {
    color: #1F2937 !important;
}

.chipin-image-export-light .ai-vis-card,
.chipin-image-export-light .ai-metric,
.chipin-image-export-light .ai-table-card {
    background: #FFFFFF !important;
    border-color: #DBE3EF !important;
}

.chipin-image-export-light .ai-highlight {
    background: hsl(calc(247.5deg + var(--ci-accent-shift, 0deg)) 100% 98.43%) !important;
    border-color: hsl(calc(249.6deg + var(--ci-accent-shift, 0deg)) 75.76% 93.53%) !important;
}

.chipin-image-export-light .ai-table th {
    color: #14181D !important;
    border-bottom-color: #58BADB !important;
}

.chipin-image-export-light .ai-table td {
    color: #14181D !important;
    border-bottom-color: #F0F2F6 !important;
}

.chipin-image-export-light .ai-table tbody tr:nth-child(even) td {
    background: #F8F9FB !important;
}

.chipin-image-export-light .ai-chip {
    background: hsl(calc(252.86deg + var(--ci-accent-shift, 0deg)) 100% 97.25%) !important;
    border-color: hsl(calc(249.33deg + var(--ci-accent-shift, 0deg)) 100% 91.18%) !important;
    color: hsl(calc(246deg + var(--ci-accent-shift, 0deg)) 45.45% 25.88%) !important;
}

.chipin-image-export-light .ai-chart svg text {
    fill: #14181D !important;
}

/* ------------------------------------------------------------------ Motion */

@keyframes ai-count-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ai-bar-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes ai-tile-in {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ai-card-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ai-shimmer {
    to { transform: translateX(100%); }
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

@keyframes ai-editor-spin {
    to { --ai-editor-angle: 360deg; }
}

@keyframes ai-toast-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes ai-wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-starter,
    .ai-metric.is-animating .ai-metric-value,
    .ai-rank-list.is-animating .ai-rank-bar,
    .ai-vis.is-animating .ai-treemap-tile,
    .ai-starter-skeleton::after,
    .ai-editor-box.is-busy::before,
    .ai-starter-subline .ai-wave-char {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------------------------------------------ Responsive */

@media (max-width: 991.98px) {
    .ai-page {
        height: calc(100dvh - 5.5rem);
        max-height: calc(100dvh - 5.5rem);
    }

    .ai-page-header {
        padding-bottom: .4rem;
    }

    .ai-prompt-bubble {
        max-width: 92%;
        margin-left: 24px;
    }
}

@media (max-width: 575.98px) {
    .ai-page {
        height: calc(100dvh - 4.75rem);
        max-height: calc(100dvh - 4.75rem);
    }

    .ai-page-subtitle {
        display: none;
    }

    .ai-page-actions .ai-action-btn span,
    .ai-temp-toggle span {
        display: none;
    }

    .ai-prompt-row,
    .ai-answer-row {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ai-answer-row {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
    }

    .ai-answer-avatar {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .ai-answer-row-pending .ai-progress {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
    }

    .ai-answer-row-pending .ai-progress canvas {
        width: 48px;
        height: 48px;
    }

    .ai-page .ai-assist-view :is(.e-response-toolbar, .e-assist-response-toolbar, .e-content-footer),
    .ai-page .ai-assist-view .e-output-toolbar {
        margin-left: 50px !important;
    }

    .ai-highlight-row,
    .ai-metric-row {
        grid-template-columns: 1fr;
    }

    .ai-metric.is-hero {
        grid-column: auto;
    }

    .ai-treemap {
        aspect-ratio: 1.2 / 1;
    }

    .ai-starter-grid {
        grid-template-columns: 1fr;
    }

    .ai-editor {
        padding: 8px 10px 12px;
    }

    .ai-brain {
        transform: scale(.85);
    }
}