.message.bot.bot-stream-progress .content p {
    white-space: pre-line;
}

.message.bot .progress-step-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.95em;
    color: var(--text-secondary);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.message.bot .progress-step-line.progress-step-fade-out {
    opacity: 0;
}

.message.bot .progress-step-line.progress-step-fade-in {
    opacity: 1;
}

.message.bot .progress-step-order {
    display: inline-block;
    min-width: 2.2rem;
    font-weight: 600;
    color: var(--accent-color, #2563eb);
}

.message.bot .progress-step-message {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    color: var(--text-secondary);
}

/* Loader icon for progress steps */
.progress-step-line {
    display: flex;
    align-items: center;
    gap: 8px;
}
.progress-step-loader svg {
    width: 18px;
    height: 18px;
    display: block;
    transform-origin: 50% 50%;
}

/* Two-phase rotation: 3/5 of cycle slow, then 2/5 fast. Implemented using keyframes
   where the first 60% of the animation is a slow rotation and the last 40% is faster. */
@keyframes loader-two-phase {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(258deg); } /* slow: 158deg over 40% */
    100% { transform: rotate(360deg); } /* fast: remaining to 360deg */
}

.progress-step-loader svg {
    animation: loader-two-phase 1.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .progress-step-loader svg { animation: none; }
}

/* LLM think panel embedded inside each bot message content */
.chat-messages .content .llm-think {
    margin-top: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-messages .content .llm-think:not(.has-think) {
    display: none;
}

.chat-messages .content .llm-think:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.chat-messages .content .llm-think.is-complete {
    border-color: var(--accent-color, #10b981);
}

.chat-messages .content .llm-think-preview {
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.84rem;
    color: var(--text-secondary);
}

.chat-messages .content .llm-think-full {
    display: none;
    max-height: 220px;
    overflow-y: auto;
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.02);
}

.chat-messages .content .llm-think.is-expanded .llm-think-preview {
    display: none;
}

.chat-messages .content .llm-think.is-expanded .llm-think-full {
    display: block;
}

.chat-messages .content .llm-think-entry {
    padding: 0.4rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.chat-messages .content .llm-think-entry.is-partial {
    opacity: 0.75;
    font-style: italic;
}

.chat-messages .content .llm-think-entry:first-child {
    border-top: none;
}

.chat-messages .content .llm-think.is-expanded .llm-think-entry + .llm-think-entry {
    margin-top: 0.2rem;
}

@media (max-width: 520px) {
    .chat-messages .content .llm-think {
        font-size: 0.8rem;
    }
    .chat-messages .content .llm-think-full {
        max-height: 180px;
    }
}
/* ----------------- Fundamental metric buttons (themed) ----------------- */
.fundamental-metric-buttons {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    margin: 0.5rem 0 0.35rem 0;
    /* Default behavior on desktop: allow wrapping so buttons flow onto multiple lines */
    flex-wrap: wrap;
}

/* On narrow viewports (phones / small tablets) convert the button row into a
   horizontal scroller so users can swipe metric buttons. Children are made
   non-shrinking so each button remains an easily tappable target. The
   scrollbar is styled to be thin and to follow the theme colors. */
@media (max-width: 1200px) {
    .fundamental-metric-buttons {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin: 0.4rem 0 0.25rem 0;
        /* horizontal scrolling */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */
        scroll-snap-type: x proximity;
        flex-wrap: nowrap; /* keep a single row for swipe interaction */
        padding-bottom: 6px; /* give room for the thin scrollbar */
    }
    .fundamental-metric-buttons > * {
        flex: 0 0 auto; /* avoid shrinking; buttons sized to content */
        scroll-snap-align: start;
    }

    /* Themed thin scrollbar for WebKit-based browsers (Chrome, Safari)
       Use CSS variables so theme or JS can tweak colors if needed. */
    .fundamental-metric-buttons {
        --fm-scrollbar-size: 8px; /* default scrollbar thickness */
        --fm-scrollbar-thumb: rgba(16,24,40,0.10); /* light thumb on light themes */
        --fm-scrollbar-thumb-hover: rgba(16,24,40,0.18);
        --fm-scrollbar-track: transparent;
    }
    .fundamental-metric-buttons::-webkit-scrollbar { height: var(--fm-scrollbar-size); }
    .fundamental-metric-buttons::-webkit-scrollbar-track { background: var(--fm-scrollbar-track); border-radius: 999px; }
    .fundamental-metric-buttons::-webkit-scrollbar-thumb { background: var(--fm-scrollbar-thumb); border-radius: 999px; }
    .fundamental-metric-buttons::-webkit-scrollbar-thumb:hover { background: var(--fm-scrollbar-thumb-hover); }

    /* Firefox: use thin scrollbar and provide thumb/track colors */
    .fundamental-metric-buttons { scrollbar-width: thin; scrollbar-color: var(--fm-scrollbar-thumb) var(--fm-scrollbar-track); }

    /* Slight spacing tweak for very small phones */
    @media (max-width: 420px) {
        .fundamental-metric-buttons { gap: 0.35rem; --fm-scrollbar-size: 6px; padding-bottom: 8px; }
        .fundamental-metric-buttons .fundamental-metric-btn { padding: 0.22rem 0.48rem; font-size: 0.86rem; }
    }
}

/* Fundamental table: small percent-change badges and value sizing
   These variables make it easy to tweak font sizes and colors later. */
:root {
    --fund-value-font-size: calc(var(--chat-font-size, 14px) * 0.98);
    --fund-percent-font-size: 0.72rem;
    --fund-percent-up-color: #16a34a; /* green */
    --fund-percent-down-color: #dc2626; /* red */
    --fund-percent-neutral-color: var(--text-secondary);
}

.compact-metric-table td .value-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.compact-metric-table td .value-wrap .fund-val { font-size: var(--fund-value-font-size); color: var(--text-primary); }
.compact-metric-table td .value-wrap .percent-change { font-size: var(--fund-percent-font-size); line-height: 1; }
.compact-metric-table td .value-wrap .percent-change.up { color: var(--fund-percent-up-color); }
.compact-metric-table td .value-wrap .percent-change.down { color: var(--fund-percent-down-color); }
.compact-metric-table td .value-wrap .percent-change.neutral { color: var(--fund-percent-neutral-color); }

/* Tiny helper when cell is empty to keep layout stable */
.compact-metric-table td .value-wrap .no-data { color: var(--text-secondary); font-size: var(--fund-value-font-size); }

/* QoQ / YoY percent-change stacking
   - .percent-change.qoq (or .percent-change.qoq.up/.down) is used to show
     quarter-over-quarter change; it should appear directly below the numeric
     value.
   - .percent-change._yoy or .percent-change.yoy shows year-over-year change
     and appears below the QoQ badge (if both present).
   Keep the existing .up/.down/neutral color rules intact; these classes can be
   combined with .qoq/.yoy/_yoy. */
.compact-metric-table td .value-wrap .percent-change {
    display: block; /* ensure badges stack vertically */
    margin-top: 4px;
    font-size: var(--fund-percent-font-size);
    line-height: 1;
    white-space: nowrap;
}

/* Slightly differentiate QoQ vs YoY sizing and opacity so the primary
   comparison (QoQ) reads first and YoY is slightly subtler. */
.compact-metric-table td .value-wrap .percent-change.qoq {
    font-weight: 600;
    opacity: 1;
}
.compact-metric-table td .value-wrap .percent-change._yoy,
.compact-metric-table td .value-wrap .percent-change.yoy {
    font-size: calc(var(--fund-percent-font-size) * 0.95);
    opacity: 0.88;
}

/* Add small textual suffixes for clarity (QoQ / YoY). These can be removed
   later if the renderer explicitly includes the label. Uses small font and
   the secondary text color so it doesn't overwhelm the numeric value. */
.compact-metric-table td .value-wrap .percent-change.qoq::after {
    content: ' (QoQ)';
    font-size: 0.78em;
    color: var(--text-secondary);
    margin-left: 6px;
}
.compact-metric-table td .value-wrap .percent-change._yoy::after,
.compact-metric-table td .value-wrap .percent-change.yoy::after {
    content: ' (YoY)';
    font-size: 0.78em;
    color: var(--text-secondary);
    margin-left: 6px;
}

/* Respect the existing up/down color hints when combined with QoQ/YoY */
.compact-metric-table td .value-wrap .percent-change.qoq.up { color: var(--fund-percent-up-color); }
.compact-metric-table td .value-wrap .percent-change.qoq.down { color: var(--fund-percent-down-color); }
.compact-metric-table td .value-wrap .percent-change._yoy.up,
.compact-metric-table td .value-wrap .percent-change.yoy.up { color: var(--fund-percent-up-color); }
.compact-metric-table td .value-wrap .percent-change._yoy.down,
.compact-metric-table td .value-wrap .percent-change.yoy.down { color: var(--fund-percent-down-color); }


.fundamental-metric-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    background: transparent;
    color: var(--text-primary, #0f172a);
    padding: 0.28rem 0.6rem;
    font-size: calc(var(--chat-font-size, 14px) * 0.85);
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
    box-shadow: none;
}

.fundamental-metric-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}

.fundamental-metric-btn:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08);
}

.fundamental-metric-btn.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(90deg, var(--gradient-start, #7c3aed), var(--gradient-end, #ec4899));
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.16);
}

@media (max-width: 520px) {
    .fundamental-metric-btn { padding: 0.24rem 0.5rem; font-size: 0.86rem; }
    .fundamental-metric-buttons { gap: 0.35rem; }
}

/* Small helper: ensure compact table numbers align right and no wrapping */
.compact-metric-table th,
.compact-metric-table td { white-space: nowrap; }
.compact-metric-table td.num { text-align: right; }

* {
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 1px;
    margin-right:1px;
    padding: 0;
    box-sizing: border-box;
}
p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

/* Final override: ensure user message bubbles size to content and don't stretch
   This is placed at the end to override earlier rules. Targets the exact
   structure seen in the DOM: .chat-messages .message.user > .content.user-content */
.chat-messages .message.user > .content.user-content,
.chat-messages .message.user .content.user-content {
    display: inline-block !important;
    box-sizing: border-box !important;
    width: auto !important;           /* size to content */
    flex: 0 0 auto !important;        /* don't flex-grow or shrink to fill row */
    align-self: flex-end !important;  /* stay aligned to right for user messages */
    min-width: 0 !important;
    white-space: normal !important;   /* allow wrapping inside bubble */
}
/* -------------------------------------------------- */
/* Ordered list styling inside chat message content     */
/* Scoped to .chat-messages .content to avoid global changes */

.chat-messages .content ol,
#chatMessages .screener-condition-stream-content ol {
    counter-reset: chat-ol-counter;
    margin: 1.1rem 0 0 1.1rem;
    padding: 0;
    list-style: none; /* we create custom counters */
}

/* Unordered lists should align visually with ordered lists inside chat content */
.chat-messages .content ul,
#chatMessages .screener-condition-stream-content ul {
    margin: 0 0 0 1.1rem; /* same left offset as ol */
    padding: 0;
    list-style: none; /* we'll render custom bullets */
}

.chat-messages .content ul li,
#chatMessages .screener-condition-stream-content ul li {
    position: relative;
    margin: 0 0 0.75rem 0;
    padding: 0.35rem 0.75rem 0.35rem 3.2rem; /* match ol li padding so text aligns */
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    line-height: 1.45;
}

.chat-messages .content ul li::before,
#chatMessages .screener-condition-stream-content ul li::before {
    content: '';
    position: absolute;
    left: 0.9rem; /* position similar to ol counter */
    top: 50%;
    transform: translateY(-50%);
    width: 0.7rem;
    height: 0.7rem;
    background: var(--gradient-start);
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}

.chat-messages .content ol li,
#chatMessages .screener-condition-stream-content ol li {
    position: relative;
    margin: 0 0 0.75rem 0;
    padding: 0.35rem 0.75rem 0.35rem 3.2rem; /* space for badge */
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    line-height: 1.45;
}

.chat-messages .content ol li::before,
#chatMessages .screener-condition-stream-content ol li::before {
    counter-increment: chat-ol-counter;
    content: counter(chat-ol-counter);
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff, #f3f6ff);
    border: 1px solid rgba(0,0,0,0.06);
    color: #1f2937;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}

/* Support nested ordered lists: smaller badge and adjusted spacing */
.chat-messages .content ol li ol,
.chat-messages .content ol li ul,
#chatMessages .screener-condition-stream-content ol li ol,
#chatMessages .screener-condition-stream-content ol li ul {
    margin-top: 0.5rem;
    margin-left: 0.25rem;
}

.chat-messages .content ol li ol li::before,
#chatMessages .screener-condition-stream-content ol li ol li::before {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.85rem;
}

/* Improve readability for long list items */
.chat-messages .content ol li p,
#chatMessages .screener-condition-stream-content ol li p {
    margin: 0;
}

/* Tweak for compact mode (if chat messages are small) */
.chat-messages.compact .content ol li,
#chatMessages .screener-condition-stream-content ol li {
    padding-left: 2.6rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Accessibility: ensure focus outline when list item receives focus */
.chat-messages .content ol li:focus,
#chatMessages .screener-condition-stream-content ol li:focus {
    outline: 2px solid rgba(59,130,246,0.25);
    outline-offset: 2px;
}

/* small screens: reduce padding */
@media (max-width: 520px) {
    .chat-messages .content ol li,
    #chatMessages .screener-condition-stream-content ol li {
        padding-left: 2.6rem;
    }
    .chat-messages .content ol li::before,
    #chatMessages .screener-condition-stream-content ol li::before {
        left: 0.4rem;
    }

    .chat-messages .content ul li,
    #chatMessages .screener-condition-stream-content ul li {
        padding-left: 2.6rem;
    }
    .chat-messages .content ul li::before,
    #chatMessages .screener-condition-stream-content ul li::before {
        left: 0.4rem;
    }
}

/* -------------------------------------------------- */

/* Inline document reference button used inside rendered responses */
.chat-messages .content .doc-ref-btn {
    display: inline-inline;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-color);
    background: rgb(255 255 255 / 89%);
    color: #000000;
    padding: 0.2rem;
    margin: 0.1rem;
    font-size: 0.78rem;
    line-height: 1;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: baseline;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}

.chat-messages .content .doc-ref-btn:hover {
    filter: brightness(0.98);
}

.chat-messages .content .doc-ref-btn:active {
    transform: translateY(1px);
}

.chat-messages .content .doc-ref-btn[aria-pressed="true"],
.chat-messages .content .doc-ref-btn.selected {
    background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
    color: white;
}

.chat-messages .content .table-responsive,
#chatMessages .screener-condition-stream-content .table-responsive,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1rem 0;
}

/* Table visual styling tuned for compact chat messages */
.chat-messages .content .table-responsive table,
#chatMessages .screener-condition-stream-content .table-responsive table,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive table,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive table {
    border-collapse: collapse;
    width: 100%;               /* occupy available width, but allow horizontal scroll when content is wider */
    min-width: max-content;    /* allow the table to expand to fit long cells and trigger horizontal scroll */
    color: var(--text-primary);
    font-size: calc(var(--chat-font-size) * 0.9);
    /* slightly smaller text than normal chat text for better fit */
    line-height: 1.35;
}

.chat-messages .content .table-responsive th,
.chat-messages .content .table-responsive td,
#chatMessages .screener-condition-stream-content .table-responsive th,
#chatMessages .screener-condition-stream-content .table-responsive td,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive th,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive td,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive th,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive td {
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;           /* avoid wrapping; allow horizontal scroll instead */
    overflow: hidden;
    text-overflow: ellipsis;       /* show ellipsis when clipped */
}

/* Header styling */
.chat-messages .content .table-responsive th,
#chatMessages .screener-condition-stream-content .table-responsive th,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive th,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive th {
    background: linear-gradient(180deg, var(--sidebar-bg), rgba(0,0,0,0.02));
    color: var(--text-primary);
    font-weight: 700;
    position: sticky; /* keep header visible when vertically scrolling inside a taller container */
    top: 0;
    z-index: 3;
}

/* Compact variant — tighter padding and slightly smaller text */
.chat-messages.compact .content .table-responsive th,
.chat-messages.compact .content .table-responsive td,
#chatMessages .screener-condition-stream-content .table-responsive th,
#chatMessages .screener-condition-stream-content .table-responsive td,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive th,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive td,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive th,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive td {
    padding: 0.3rem 0.45rem;
}

/* Alternating row colours for readability */
.chat-messages .content .table-responsive tr:nth-child(even) td,
#chatMessages .screener-condition-stream-content .table-responsive tr:nth-child(even) td,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive tr:nth-child(even) td,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive tr:nth-child(even) td {
    background: var(--table-row2-color);
}
.chat-messages .content .table-responsive tr:hover td,
#chatMessages .screener-condition-stream-content .table-responsive tr:hover td,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive tr:hover td,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive tr:hover td {
    background: rgba(0,0,0,0.6);
}

/* Freeze the first column when horizontally scrolling. Works when the wrapper has overflow-x. */
.chat-messages .content .table-responsive th:first-child,
.chat-messages .content .table-responsive td:first-child,
#chatMessages .screener-condition-stream-content .table-responsive th:first-child,
#chatMessages .screener-condition-stream-content .table-responsive td:first-child,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive th:first-child,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive td:first-child,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive th:first-child,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: linear-gradient(180deg, var(--card-bg), var(--card-bg));
    /* Add a subtle divider between frozen column and body */
    box-shadow: 1px 0 0 rgba(0,0,0,0.06);
}

/* Ensure header cell above frozen column has higher stacking so it doesn't get covered */
.chat-messages .content .table-responsive th:first-child,
#chatMessages .screener-condition-stream-content .table-responsive th:first-child,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper > div.table-responsive th:first-child,
#chatMessages > div.message.bot.bot-stream-complete > div.flash-data-wrapper div.table-responsive th:first-child {
    z-index: 4;
}

/* Small screens: make font slightly smaller and preserve usability */
@media (max-width: 520px) {
    .chat-messages .content .table-responsive table,
    #chatMessages .screener-condition-stream-content .table-responsive table {
        font-size: 0.92rem;
    }
}

/* Specific rule to target the third paragraph strong inside a completed bot message */
#chatMessages > div.message.bot.bot-stream-complete > div.content > p > strong {
    display: inline-block; /* allow margin to take effect reliably */
    margin: 0.2rem 0;       /* add vertical spacing above and below */
    line-height: 1.3;
    color: var(--text-primary);
}

/* If you prefer a class-based approach for reusability, use .bot-heading-strong on the element */
.chat-messages .content .bot-heading-strong {
    display: inline-block;
    font-size: 1.18rem;
    margin: 0.6rem 0;
    line-height: 1.3;
    color: var(--text-primary);
}



:root {
    /* Light Mode */
    --primary-bg: #f1f0ea;
    /* Lighter sidebar for Light theme so it reads better with white card surfaces */
    --sidebar-bg: #eeeeee; /* soft very-light gray */
    --card-bg: #ffffff;
    --bg-deep-th: #7b7b7b;       /* background for deep elements */
    --border-underline: rgb(102 102 102 / 40%);
    --modal-bg: rgba(255, 255, 255, 0.7);
    --text-primary: #4c4c4c;
    --text-secondary: #86868b;
    --gradient-start: #7c3aed;
    --gradient-end: #ec4899;
    --border-color: #d2d2d7;
    --hover-bg: rgba(0,0,0,0.04); /* subtle dark-on-light hover */
    --sidebar-btn-hover: rgba(0,0,0,0.06);
    --shadow-color: rgba(0, 0, 0, 0.1);
     /* theme glow used for focused controls / glowy accents (soft, low-opacity)
         Use a pair so we can have a stronger and a softer glow. These are
         tuned to the default purple gradient used by the light theme. */
     --glow-color: rgba(124, 58, 237, 0.12);
     --glow-color-soft: rgba(124, 58, 237, 0.06);
    /* menu text color fallback: use the theme primary text color so items read on light sidebar */
    --menu-text: var(--text-primary);
    /* Viz toolbar button sizing (can be overridden) */
    --viz-btn-width: auto;        /* use 'auto' for content-sized, or set e.g. 120px */
    --viz-btn-min-width: 44px;    /* minimum touch target */
    --viz-btn-max-width: 240px;   /* optional cap */
    --viz-btn-mobile-width: 120px; /* default mobile stacked width */
    --table-row2-color: rgb(255 255 255 / 80%);
}

/* News reference snippet styling (used by router.processMarked extraction)
   Adds a compact, accessible row for each news reference. Links open
   in a new tab and use a subtle accent color. */
.news-ref {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    font-size: 0.92rem;
    color: var(--text-primary);
}
.news-ref a {
    color: var(--gradient-start);
    font-weight: 600;
    text-decoration: none;
}
.news-ref a:hover {
    color: var(--gradient-end);
    text-decoration: underline;
}
.news-ref::after {
    content: '';
    margin-left: auto;
}


/* Dark Mode */
[data-theme="dark"] {
    --primary-bg: #000000;
    --sidebar-bg: #1c1c1e;
    --card-bg: #1c1c1e;
    --bg-deep-th: #0c171d;       /* background for deep elements */
    ---modal-bg: rgb(34 38 47 / 70%);
    --text-primary: #f5f5f7;
    --text-secondary: #98989d;
    --gradient-start: #9333ea;
    --gradient-end: #ec4899;
    --border-color: #2c2c2e;
    --hover-bg: #2c2c2e;
    --topbar-shadow: rgba(64, 64, 64, 0.824);
    --sidebar-btn-hover: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(255, 255, 255, 0.1);
    /* darker themes should use a slightly different glow hue — keep it purple-ish */
    --glow-color: rgba(147, 51, 234, 0.12);
    --glow-color-soft: rgba(147, 51, 234, 0.05);
    /* menu text in dark theme should be light */
    --menu-text: #ffffff;
    --table-row2-color: rgb(35 26 37 / 89%);
}

/* Dark Blue Theme */
[data-theme="dark-blue"] {
    --primary-bg: #071024;        /* deep navy */
    --bg-primary: #07122a;
    --bg-secondary: #071f37;
    --sidebar-bg: #061422;        /* slightly darker for contrast */
    --bg-deep-th: #0c171d;       /* background for deep elements */
    --bg-deep-fund-table: rgb(14 25 100 / 24%); /* slightly lighter for fund table backgrounds */
    --card-bg: #0b1b2b;           /* card surfaces in dark-blue tone */
    --modal-bg: rgb(34 38 47 / 70%);
    --text-primary: #e4e4e4;      /* very-light blue/white for readability */
    --text-secondary: #9fb7d9;    /* soft blue-gray for secondary text */
    --gradient-start: #006cff;    /* cyan-blue start */
    --gradient-end: #003994;      /* vivid blue end */
    --border-color: #112838;      /* subtle border */
    --hover-bg: rgba(255,255,255,0.02);
    --sidebar-btn-hover: rgba(255,255,255,0.06);
    --shadow-color: rgba(11,27,43,0.6);
    --glow-color: rgba(14,165,233,0.12); /* cyan-blue glow */
    --glow-color-soft: rgba(14,165,233,0.05);
    --topbar-shadow: rgba(0, 108, 255, 0.824);
    --table-row2-color: rgb(33 38 60 / 80%);
    

}

/* Dark Gray Theme */
[data-theme="darkgray"] {
    --primary-bg: #0f1720;        /* very dark gray-blue */
    --bg-secondary: #071f37;
    --sidebar-bg: #0b0f12;        /* near-black for rail */
    --bg-deep-th: #151717;       /* background for deep elements */
    --card-bg: #131313;           /* slightly lighter card surfaces */
    --modal-bg: rgb(34 38 47 / 70%);
    --text-primary: #e6e8ea;      /* off-white text */
    --text-secondary: #a2a6ab;    /* muted gray text */
    --border-color: #2c2d2d;      /* subtle border */
    --hover-bg: rgba(255,255,255,0.02);
    --sidebar-btn-hover: rgba(255,255,255,0.03);
    --shadow-color: rgba(0,0,0,0.6);
    --glow-color: rgba(107,114,128,0.12); /* neutral gray glow */
    --glow-color-soft: rgba(107,114,128,0.04);
    --topbar-shadow: rgba(64, 64, 64, 0.824);
    --table-row2-color: rgb(54 54 54 / 40%);

}

/* System Theme - Auto */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --primary-bg: #000000;
        --sidebar-bg: #1c1c1e;
        --bg-deep-th: rgba(15, 16, 16, 0.65);       /* background for deep elements */
        --card-bg: #1c1c1e;
        --text-primary: #f5f5f7;
        --text-secondary: #98989d;
        --gradient-start: #9333ea;
        --gradient-end: #ec4899;
        --border-color: #2c2c2e;
        --hover-bg: #2c2c2e;
        --sidebar-btn-hover: rgba(255, 255, 255, 0.1);
        --shadow-color: rgba(255, 255, 255, 0.1);
    }
}

body {
    font-family: 'IBM Plex Sans Thai"', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-primary);
    display: flex;
    min-height: 100vh; /* allow page to grow and be scrollable */
    overflow-y: auto;    /* switch to page-level (body) vertical scrolling */
    transition: background-color 0.3s ease, color 0.3s ease;
    scroll-behavior: smooth;
}

/* Sidebar */
.sidebar {
    width: 60px;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    /* Make the sidebar fixed to the viewport so its height equals the browser viewport
       (prevents it from matching the page's scroller height when body is scrollable). */
    position: fixed;
    left: 0;
    top: env(safe-area-inset-top, 0);
    bottom: env(safe-area-inset-bottom, 0);
    height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
    border-right: 1px solid var(--border-color);
}

.sidebar-header {
    margin-bottom: 30px;
}

.logo {
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.sidebar-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: #86868b;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 16px;
}

.sidebar-btn:hover {
    background-color: var(--sidebar-btn-hover);
    color: white;
}

.sidebar-btn.active {
    color: var(--gradient-end)
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main Content */
.main-content {
    flex: 1;
    /* no inner scrolling on main-content — page (body) will scroll */
    overflow-y: visible;
    display: flex;
    justify-content: center;
    padding: 0px;
}

/* Ensure main content clears the fixed sidebar on wide viewports */
@media (min-width: 1025px) {
    .main-content {
        margin-left: 60px !important; /* match the sidebar width */
    }
    .container {
        width: calc(-60px + 100vw); max-width: 100vw !important;
    }
}

/* Topbar (integrates menu toggle and per-chat settings) */
.topbar {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    height: 45px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 5px;
    z-index: 1900 !important;
    background: var(--primary-bg);
    box-shadow: 1px 2px 20px var(--topbar-shadow, rgba(0,0,0,0.12));
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.topbar .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* make the control visually compact so it reads as the icon itself */
    width: auto;
    height: auto;
    border-radius: 0px;
    background: transparent; /* icon-only by default */
    border: none;
    color: var(--text-primary);
    transition: background 0.18s ease, color 0.12s ease;
}


/* Archive (folders) panel — read-only overlay */
.archive-panel {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    right: 0;
    height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
    width: 420px;
    max-width: 92vw;
    background: var(--card-bg);
    border-left: 1px solid var(--border-color);
    box-shadow: -8px 0 30px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(.2,.9,.3,1);
    z-index: 1600;
    display: flex;
    flex-direction: column;
}
.archive-panel[aria-hidden="false"] { transform: translateX(0); }

/* When archive is open, visually indicate read-only input */
.archive-open .input-section textarea,
.archive-open .input-section .send-btn {
    opacity: 0.6;
    pointer-events: none;
}
.archive-open .input-section textarea.disabled {
    background: linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
}

/* Archive row small adjustments */
.archive-row:hover {
    background: var(--hover-bg);
    cursor: pointer;
}


.topbar-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Add a small left inset so the title visually steps away from the icon */
.topbar-title { padding-left: 100px !important}

/* Make sure sidebar appears above the topbar visually (sidebar is left rail) */
.sidebar { z-index: 2100; }

/* Ensure the main content margin accounts for the shorter topbar */
.container { margin-top: 65px; }

@media (max-width: 599px) {
    .topbar { height: 45px; padding-left: 6px; padding-right: 6px; }
    .topbar-title { padding-left: 40px !important}
    .container { margin-top: 35px; }
}

/* On wide viewports the left sidebar is visible, so hide the compact menu toggle */
@media (min-width: 1025px) {
    #menuToggle { display: none !important; }
    .topbar-title { padding-left: 10px !important; } /* slightly reduce the left offset when icon hidden */
    .topbar{margin-left: 62px; z-index: 100; min-height: 60px;}
}

/* When the left sidebar opens on narrower viewports (1025px and below), shift the fixed topbar
   so it visually aligns with the pushed container/main-content. Keep animation timing similar
   to the container transforms used on these breakpoints. */
@media (max-width: 1025px) {
    body.sidebar-open .topbar {
        left: 60px; /* match sidebar width */
        width: calc(100% - 60px);
        transition: left 260ms cubic-bezier(.2,.9,.2,1), width 260ms cubic-bezier(.2,.9,.2,1);
    }

     body.sidebar-open .topbar {
        left: 60px; /* match sidebar width */
       
    }
    

    /* also ensure the topbar-title padding compensates for the menu toggle hidden state */
    body.sidebar-open .topbar .topbar-title { padding-left: 8px; }

    /* Move the fixed hamburger/menu toggle to remain visible and clickable
       when the left sidebar is open. Menu-toggle is fixed to the viewport by default,
       so nudge it right by the sidebar width so it sits on top of the shifted topbar. */
    body.sidebar-open .menu-toggle {
        left: calc(20px + 60px); /* original left (20px) + sidebar width */
        transition: left 260ms cubic-bezier(.2,.9,.2,1);
        z-index: 2100; /* above sidebar/topbar so it's always clickable */
    }
}

.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Ensure main content doesn't sit under the fixed topbar */


/* Prevent horizontal overflow inside main layout areas; keep internal
   components that intentionally scroll (overflow-x:auto) functional. */
.main-content, .chat-messages, .container {
    overflow-x: hidden;
}


/* Touch-action: allow vertical pan but prevent pinch/zoom gestures on touch devices */
html, body, .main-content, .chat-messages, .container {
    /* allow vertical panning but block pinch-zoom */
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

/* Prevent accidental horizontal scrolling across the app. Keep internal
   overflow-x:auto elements (like small carousels) functioning by applying
   hidden overflow only to page-level containers. */
html, body {
    overflow-x: hidden;
    max-width: 100vw; /* ensure no element can push the viewport wider */
}


h1, h2, h3 { text-wrap: balance; } /* แบ่งบรรทัดหัวข้อให้สวยขึ้น */
/* H6 จริง ๆ */
h6, .h6 {
  font-family: var(--thai-heading-font);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 18px) !important;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--heading-color);
  margin: 0 0 .5em;
  text-wrap: balance;
}

/* Modern / Tech */
.h-heading-modern {
  font-family: "Chakra Petch", "Kanit", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* Business Clean / Corporate */
.h-heading-clean {
    
  font-family: "Noto Sans Thai", "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

/* Friendly / Rounded */
.h-heading-friendly {
  font-family: "Mitr", "Kanit", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.15;
  letter-spacing: 0;
}

/* Editorial / Serif (บทความ, นิตยสาร) */
.h-heading-editorial {
  font-family: "Pridi", "Noto Serif Thai", serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.005em;
}

/* Display Impact (ตัวหนาโดดเด่น) */
.h-heading-impact {
  font-family: "Kanit", "Chakra Petch", "Noto Sans Thai", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}


/* For interactive controls that need two-dimensional panning (e.g., map widgets), override as needed */
.allow-gesture {
    touch-action: auto;
}

body.chatting .main-content {
    padding-bottom: 0px; /* Space for fixed input + viz toolbar; increase slightly for breathing room */
}

/* When chatting, keep the centered container flowing normally (don't force full-viewport height)
   so the page can scroll. Removing the fixed 100vh prevents the inner chat container from
   becoming the scrolling element. */
body.chatting .container {
    display: block;
    height: auto;
    max-width: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Make chat messages participate in page flow (no inner scrollbar). Reserve a modest
   minimum height so very short pages still look ok. Add large padding-bottom to create
   space for scrolling so messages can move above the fixed input container. */
body.chatting .chat-messages {
    flex: initial;
    max-height: none;
    min-height: 240px;
    padding-bottom: 550px; /* Large bottom padding for scroll space */
    overflow: visible;
    width: 100%;
}

body.chatting .input-section {
    position: fixed;
    bottom: 20px;
    left: calc(50% + 30px);
    transform: translateX(-50%);
    max-width: calc(100% - 120px);
    width: calc(100% - 120px);
    z-index: 800;
}
@media (min-width: 1200px) {
    body.chatting .input-section {
        max-width: calc(70% - 30px);
        width: calc(100% - 320px);
    }
}

/* Mobile adjustments for input when sidebar is hidden */
@media (max-width: 599px) {
    body.chatting .input-section {
        left: 50%;
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
    }
}

.container {
    max-width: 1000px; /* Increased from 900px */
    width: 100%;
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 40px;
}

.header h1 {
    font-size: 42px;
    font-weight: 400;
    margin-bottom: 10px;
}

.user-name {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.header h2 {
    font-size: 42px;
    font-weight: 400;
    margin-bottom: 15px;
}

.gradient-text {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Hide header when chatting */
body.chatting .header {
    display: none;
}

/* Prompt Cards */
.prompt-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card:hover {
    border-color: var(--gradient-start);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px var(--shadow-color), 0 0 20px rgba(124, 58, 237, 0.15);
}

.card-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.1));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gradient-start);
    font-size: 18px;
}

.card p {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
}

/* New Chat specific overrides (when prompt-cards live under #newChat).
   These rules ensure the prompt cards inside the New Chat greeting use the
   intended flex layout and spacing when placed in the #newChat container. */
.new-chat-inner { max-width: 980px; margin: 30px auto; }
.new-chat .header { margin-bottom: 14px; }
#newChat .prompt-cards { display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
#newChat .prompt-cards .card { flex:1 1 200px; border-radius:8px; padding:12px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); cursor:pointer; }
#newChat .prompt-cards .card p { margin:0; font-size:14px; color:var(--text-primary,#111); }
#refreshPromptsBtn { align-self:flex-end; margin-left:auto; padding:8px 10px; border-radius:6px;  border:1px solid rgba(0,0,0,0.06); }

@media (max-width:600px) {
    #newChat .prompt-cards { gap:8px; }
    #newChat .prompt-cards .card { flex:1 1 100%; }
}

/* Refresh Button */
.refresh-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0 auto 30px;
}

.refresh-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.refresh-btn i {
    font-size: 16px;
}

/* Input Section */
.input-section {
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    max-width: 1000px; /* Increased from 900px */

    position: relative;
}

.input-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    /* extra top padding to make room for the floating toolbar */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Floating visualization toolbar placed above the input container */
.viz-toolbar {
    position: fixed; /* fixed to viewport so it's visually outside input-section */
    bottom: 50px; /* sit above the fixed input section */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    gap: 8px;
    align-items: center;
    pointer-events: auto;
}

.viz-btn {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    font-weight: 600;
}

.viz-btn:hover {
    background: var(--hover-bg);
}

/* Use CSS variables so widths are easy to tweak */
.viz-btn {
    width: var(--viz-btn-width, auto);
    min-width: var(--viz-btn-min-width, 44px);
    max-width: var(--viz-btn-max-width, 240px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 899px) {
    /* On narrow screens keep the toolbar slightly above the input and narrower */
    .viz-toolbar { left: 50%; transform: translateX(-50%); bottom: 140px; gap:6px; }
    .input-container { padding-top: 54px; }
    .viz-btn { padding: 6px 10px; font-size: 14px; }
}

/* Portrait phones: bring toolbar closer to the input and prevent label wrapping */
@media (max-width: 599px) and (orientation: portrait) {
    .viz-toolbar {
        /* small offset above the fixed input-section (input-section bottom is 20px) */
        bottom: 75px !important;
        left: 50%;
        transform: translateX(-50%);
        gap: 8px;
    }
    .viz-btn {
        width: auto !important;      /* size to content */
        white-space: nowrap !important; /* avoid wrapping */
        padding: 8px 10px !important;
    }
}


@media (max-width: 360px) {
    .viz-toolbar { bottom: 70px; gap:6px; }
    .input-container { padding-top: 64px; }
    .viz-btn { padding: 6px 8px; font-size: 11px; }
}

/* When extremely narrow, hide labels to preserve space and keep icons only */
@media (max-width: 360px) {
    .viz-toolbar .viz-label { display: none; }
    .viz-toolbar { gap: 6px; right: 8px; left: auto; transform: none; align-items: flex-end; }
    .viz-toolbar .viz-btn { justify-content: flex-end; text-align: right; }
}

.input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.mode-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: all 0.3s ease;
}

.mode-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

textarea {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    resize: none;
    background: transparent;
    min-height: 20px;
    max-height: 200px;
    color: var(--text-primary);
}

textarea::placeholder {
    color: var(--text-secondary);
}

.send-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mode-menu {
    position: absolute;
    top: -10px;
    left: 0;
    transform: translateY(-100%);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    min-width: 200px;
    z-index: 1000;
}

.mode-menu-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.mode-options {
    padding: 8px;
}

.mode-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    text-align: left;
}

.mode-option:hover {
    background: var(--hover-bg);
}

.mode-option.active {
    background: var(--gradient-start);
    color: white;
}

.mode-attachments {
    border-top: 1px solid var(--border-color);
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--card-bg);
}

.mode-attach-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mode-attach-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--hover-bg);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mode-attach-trigger:hover,
.mode-attach-trigger:focus {
    background: rgba(124, 58, 237, 0.08);
    color: var(--gradient-start);
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.mode-attach-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.mode-attach-feedback {
    font-size: 12px;
    color: var(--text-secondary);
    min-height: 16px;
}

.mode-attach-feedback.error {
    color: #d73a49;
}

.mode-attach-feedback.success {
    color: #1a7f37;
}

.mode-settings {
    background: var(--card-bg);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

/* Option panel buttons (replace select + label) */
.option-panel-btns {
    display: flex;
    gap: 8px;
    align-items: center;
}

.option-btn {
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    transition: all 0.18s ease;
}

/* When any control inside the input container is focused (typing), highlight the container
   with the theme color and a soft glow to match card hover affordance. */
.input-container:focus-within {
    border-color: var(--gradient-start);
    box-shadow: 0 10px 30px rgba(124,58,237,0.12), 0 0 30px rgba(124,58,237,0.06);
    transition: border-color 0.12s ease, box-shadow 0.18s ease;
}

.option-btn:hover {

    background: var(--hover-bg);
    color: var(--text-primary);
}

.option-btn.active {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border-color: transparent;
}

/* New single-selected pill + floating option panel */
.option-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.option-selected {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    padding: 4px 5px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 400;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.option-selected:focus {
    outline: 2px solid rgba(255,255,255,0.12);
}

.option-panel {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.96);
    min-width: 180px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px;
    display: none;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    z-index: 1200;
    transition: transform 0.14s ease, opacity 0.12s ease;
    opacity: 0;
}

.option-panel.show {
    display: flex;
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

.option-panel-item {
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
}

.option-panel-item:hover {
    background: var(--hover-bg);
}

.option-panel-item.active {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
}

@media (max-width: 599px) {
    .option-panel {
        min-width: 140px;
        right: 0;
        margin-left: 0;
        margin-right: auto;
        left: 55px;
        transform: none;
        bottom: calc(100% + 6px);
    }
    .option-selected {
        padding: 5px 5px;
        font-size: 14px;
    }
}

.mode-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.current-mode-label {
    color: var(--text-secondary);
}

.current-mode-value {
    color: var(--text-primary);
    font-weight: 500;
}

.mode-region {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Single-selected region pill + floating panel */
.region-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.region-selected {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 1px 3px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.region-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.98);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 1200;
    opacity: 0;
    transition: transform 0.12s ease, opacity 0.12s ease;
}

.region-panel.show {
    display: flex;
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

.region-item {
    background: transparent;
    border: none;
    /* slightly larger padding for better touch hit area */
    padding: 6px 6px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    /* increase emoji / flag size so the flag is more prominent */
    font-size: 20px;
}

.region-item:hover {
    background: var(--hover-bg);
}

@media (max-width: 599px) {
    .region-panel {
        margin-left: 17px;
        left: auto;
        padding: 0px;
        transform: none;
    }
}

/* Ensure region items are readable in dark mode and emoji render properly */
.region-item, .region-selected {
    color: var(--text-primary);
    font-family: system-ui, -apple-system, 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI', Roboto, "Helvetica Neue", Arial;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-theme="dark"] .region-item, [data-theme="dark"] .region-selected {
    color: var(--text-primary);
}

.region-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

/* Themed select for Ollama model selector */
#llm-model-select {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px 32px 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

#llm-model-select:focus {
    outline: none;
    border-color: var(--gradient-start);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* add a chevron using a pseudo-element on a wrapper if needed; fallback to native arrow */
.select-with-chevron { position: relative; display: inline-block; }
.select-with-chevron::after {
    content: "\f078"; /* fontawesome chevron-down unicode fallback */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-secondary);
}

@media (max-width: 599px) {
    #llm-model-select { max-width: 140px; font-size: 12px; padding-right: 28px; }
}

.region-btn:hover {
    border-color: var(--gradient-start);
}

.region-btn.active {
    border-color: var(--gradient-start);
    background: var(--gradient-start);
    color: white;
}

.flag-icon {
    font-size: 14px;
    line-height: 1;
}

.send-btn {
    background: var(--gradient-start);
    border: 1px solid var(--gradient-end);
    color: #FFFFFF;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    width: 36px;
    height: 36px;
}

.send-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========== Responsive Design ========== */

/* Tablet & iPad (Portrait) */
@media (max-width: 1024px) and (min-width: 768px) {
    body.chatting .input-section{
        left:50%
    }
    .container {
        padding: 0 20px;
        max-width: 700px;
        padding: 0 20px;
    }
    
    .header h1, .header h2 {
        font-size: 36px;
    }
    
    .prompt-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .card {
        padding: 18px;
    }
    
    .input-container {
        padding: 18px;
    }
}

/* Treat iPad/tablet sizes as mobile: collapse sidebar and use overlay/stacked layout */
@media (max-width: 1024px) {
    /* Keep main-content transform-free on narrow viewports so fixed children (like .topbar)
       remain fixed to the viewport even when scripts toggle sidebar transforms. */
    .main-content { transform: none !important; will-change: auto !important; }

    /* Shift the inner container instead for sidebar open state (safe for fixed topbar). */
    .sidebar.open ~ .main-content .container {
        transform: translateX(60px);
        transition: transform 560ms cubic-bezier(.2,.9,.2,1);
    }

    .sidebar {
        width: 0;
        padding: 0;
        overflow: hidden;
        position: fixed;
        left: 0;
        top: env(safe-area-inset-top);
        bottom: 0;
        z-index: 2100;
        transition: width 0.3s ease;
    }
    .sidebar.open {
        width: 60px;
        padding: 20px 0;
        overflow: visible;
        top: env(safe-area-inset-top);
        height: calc(100dvh - env(safe-area-inset-top));
        bottom: auto;
    }

    .chat-history-panel {
        left: 0;
        width: 100%;
        max-width: 420px;
        z-index: 2200;;
    }

    body.chat-history-open .main-content {
        margin-left: 0;
    }

    .container {
        max-width: 100%;
        width: 100%;
        padding: 0 2px;
    }

    .header h1, .header h2 {
        font-size: 26px;
    }

    .input-section {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: calc(100% - 40px);
    }

    .input-container {
        padding: 14px;
        border-radius: 14px;
    }

    /* make controls stacked like mobile */
    .mobile-controls { display: flex; }

    .sidebar.open ~ .main-content .message {
        margin-left: 20px;
    }
     .main-content {
        transition: transform 260ms cubic-bezier(.2,.9,.2,1);
        will-change: transform;
    }

    .sidebar.open ~ .main-content {
        transform: translateX(60px);
    }


/* Also apply the slide effect for small tablets / large phones (600px - 768px)
   so the main content yields to the sidebar in this range as well. */
@media (min-width: 600px) and (max-width: 768px) and (orientation: portrait) {
    .main-content {
        transition: transform 260ms cubic-bezier(.2,.9,.2,1);
        will-change: transform;
    }
    .sidebar.open ~ .main-content {
        transform: translateX(60px);
    }
}
}

/* Tablet & iPad (Landscape) */
@media (max-width: 1024px) and (orientation: landscape) {
    .header {
        margin-bottom: 30px;
    }
    
    .header h1, .header h2 {
        font-size: 32px;
    }
    
    .main-content {
        padding: 5px 2px;
    }
}

/* Small Tablet & iPad Mini */
@media (max-width: 768px) and (min-width: 600px) {
    .sidebar {
        width: 55px;
    }
    
    .header h1, .header h2 {
        font-size: 32px;
    }
    
    .prompt-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .card {
        padding: 16px;
    }
    
    .card p {
        font-size: 12px;
    }
    
    
    .input-section {
        left:50% !important;
        transform: translateX(-50%) !important;
        margin-top: 30px;
    }
}

/* Mobile (Portrait) */
@media (max-width: 599px) {
    .sidebar {
        width: 0;
        padding: 0;
        overflow: hidden;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        transition: width 0.3s ease;
    }
    
    .sidebar.open {
        width: 60px;
        padding: 20px 0;
        overflow: visible;
    }
    
    .chat-history-panel {
        left: 0;
        width: 100%;
        max-width: 320px;
        z-index: 2200;;
    }
    
    .chat-history-panel.open {
        box-shadow: 4px 0 20px var(--shadow-color);
    }
    
    /* Don't push content on mobile - overlay instead */
    body.chat-history-open .main-content {
        margin-left: 0;
    }

    
    .main-content {
        width: 100%;
    }
    
    .container {
        max-width: 100%;
        width: 100%;
    }
    
    .header {
        margin-bottom: 25px;
    }
    
    .header h1, .header h2 {
        font-size: 24px;
        line-height: 1.3;
    }
    
    .subtitle {
        font-size: 13px;
    }
    
    .prompt-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .card {
        padding: 15px;
    }
    
    .card p {
        font-size: 13px;
    }
    
    .refresh-btn {
        font-size: 13px;
        margin-bottom: 20px;
    }
    
    .input-section {
        margin-top: 25px;
        max-width: 100%;
        width: 100%;
    }
    
    .input-container {
        padding: 15px;
        border-radius: 16px;
    }
    
    .send-btn {
        width: 36px;
        height: 36px;
    }
    
    .theme-menu {
        position: fixed;
        left: 80px;
        bottom: 100px;
        transform: none;
        z-index: 1200;
    }
}

/* Mobile portrait stacked control buttons */
@media (max-width: 599px) and (orientation: portrait) {
    .mobile-controls {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin-top: 8px;
    }

    .mobile-row {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
    }

    .mobile-row .mobile-control-btn {
        flex: 1;
        width: auto;
    }

    .mobile-control-btn {
        width: 100%;
        padding: 12px 14px;
        font-size: 15px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-primary);
        text-align: left;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .mobile-control-btn:active {
        transform: translateY(1px);
    }

    /* make sure the existing pill controls are hidden when mobile stacked controls are visible */
    .mobile-only-controls-hidden { display: none !important; }
}

/* Mobile (Landscape) */
@media (max-width: 896px) and (orientation: landscape) and (max-height: 450px) {
    .main-content {
        padding: 5px;
    }
    
    .header {
        margin-bottom: 15px;
    }
    
    .header h1, .header h2 {
        font-size: 20px;
    }
    
    .subtitle {
        font-size: 12px;
        margin-bottom: 5px;
    }
    
    .prompt-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 15px;
    }
    
    .card {
        padding: 10px;
    }
    
    .card p {
        font-size: 11px;
    }
    
    .card-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .refresh-btn {
        margin-bottom: 15px;
        font-size: 12px;
    }
    
    .input-section {
        margin-top: 15px;
    }
    
    .input-container {
        padding: 12px;
    }
    
    textarea {
        font-size: 14px;
        min-height: 40px;
    }
}

/* Very Small Mobile (Portrait) */
@media (max-width: 375px) {
    .header h1, .header h2 {
        font-size: 20px;
    }
    
    .subtitle {
        font-size: 12px;
    }
    
    .card {
        padding: 12px;
    }
    
    .card p {
        font-size: 12px;
    }
}

/* Hamburger Menu Button for Mobile */
.menu-toggle {
    display: none;
    position: fixed;
    left: 20px;
    z-index: 1001;
    width: 40px;
    height: 40px;
    background: var(--card-bg);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    box-shadow: var(--shadow-color) 0px 10px 30px, #0000001a 0px 0px 0px 1px;
    background: var(--hover-bg);
}

.menu-toggle i {
    color: var(--text-primary);
    font-size: 18px;
}

@media (max-width: 599px) {
    .menu-toggle {
        display: flex;
    }
    
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    .card,
    .sidebar-btn,
    .theme-option,
    .send-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .card {
        padding: 18px;
    }
    
    .sidebar-btn {
        width: 44px;
        height: 44px;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeIn 0.5s ease forwards;
}

.card:nth-child(1) {
    animation-delay: 0.1s;
}

.card:nth-child(2) {
    animation-delay: 0.2s;
}

.card:nth-child(3) {
    animation-delay: 0.3s;
}

.card:nth-child(4) {
    animation-delay: 0.4s;
}

/* Theme Toggle */
.theme-toggle {
    position: relative;
}

.theme-toggle-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: #86868b;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 16px;
    position: relative;
}

.theme-toggle-btn:hover {
    background-color: var(--sidebar-btn-hover);
    color: white;
}

.theme-toggle-btn.active {
    color: white;
}

.theme-menu {
    position: absolute;
    bottom: 100%;
    left: 150%;
    transform: translateX(-50%);
    background: #2c2c2e;
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    min-width: 150px;
    z-index: 1100;
}

.theme-menu.show {
    opacity: 1;
    visibility: visible;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: #f5f5f7;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
    font-size: 14px;
}

/* Avatar menu: inline menu inside .user-avatar, follows same pattern as .theme-menu */
.avatar-menu {
    position: absolute;
    bottom: 3%;
    left: 0%;
    transform: none;
    background: var(--sidebar-bg);
    border-radius: 10px;
    padding: 6px;
    margin-bottom: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.18s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    min-width: 140px;
    z-index: 1200;
    /* Use the theme-aware menu text color for proper contrast */
    color: var(--menu-text);
}
.avatar-menu.show {
    opacity: 1;
    visibility: visible;
}
.avatar-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--menu-text, var(--text-primary));
    text-align: left;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
}
.avatar-item:hover { background: var(--hover-bg); }
.avatar-item.danger { color: #ff6b6b; }

.theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-option.active {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
}

.theme-option i {
    font-size: 14px;
    width: 16px;
}

.theme-option .checkmark {
    margin-left: auto;
    font-size: 12px;
    color: #4ade80;
}

/* ========== Chat History Panel ========== */

.chat-history-panel {
  position: fixed;
  left: 0;
  top: 0;
  width: 400px;
  height: 100vh;
  background: var(--card-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s ease, left 0.3s ease;
  z-index: 2200;
  box-shadow: 2px 0 10px var(--shadow-color);
}

.sidebar:not(.open) ~ .main-content .chat-history-panel {
    left: 0;
}

.sidebar.open ~ .main-content .chat-history-panel {
    left: 60px;
}.chat-history-panel.open {
    transform: translateX(0);
}

/* Push main content when chat history is open */
body.chat-history-open .main-content {
    margin-left: 0px;
}

.sidebar:not(.open) body.chat-history-open .main-content {
    margin-left: 400px;
}

/* Tablet responsive for chat history */
@media (max-width: 1024px) and (min-width: 600px) {
    .chat-history-panel {
        width: 300px;
    }

    body.chat-history-open .main-content {
        margin-left: 0px;
    }

    .sidebar:not(.open) body.chat-history-open .main-content {
        margin-left: 300px;
    }
}

.chat-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.chat-history-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-history-actions {
    display: flex;
    gap: 8px;
}

.history-action-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.history-action-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Settings Back button (positioned to the far right of the settings header) */
#settingsBackBtn, .back-btn {
    /* hidden by default; only visible on small portrait screens */
    display: none;
    margin-left: auto; /* push to the right when shown */
    margin-right: 2px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.16s ease;
}

#settingsBackBtn:hover, .back-btn:hover {
    background: var(--hover-bg);
    transform: translateY(-1px);
}

#settingsBackBtn:focus, .back-btn:focus {
    outline: 3px solid rgba(124,58,237,0.14);
    outline-offset: 2px;
}

/* Show back button only on narrow portrait phones */
@media (max-width: 599px) and (orientation: portrait) {
    #settingsBackBtn, .back-btn {
        display: inline-flex;
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* Chat Search Box */
.chat-search-box {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.chat-search-box input {
    width: 100%;
    padding: 10px 35px 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--primary-bg);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.chat-search-box input:focus {
    border-color: var(--gradient-start);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.chat-search-box i {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 14px;
    pointer-events: none;
}

/* Chat History Content */
.chat-history-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

/* ===== Privacy Settings (compact themed) ===== */
.privacy-settings {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-primary);
}

.privacy-settings .muted {
    color: var(--text-secondary);
    font-size: 13px;
}


.privacy-settings .setting-row {
    /* Use a 2-column grid so the checkbox can be positioned in the first column
       while the label and helper occupy the second column. This lets us keep
       the existing DOM (label/span then input then small) but render the
       checkbox visually before the label text. */
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    align-items: center;
    padding: 8px 6px;
    border-radius: 8px;
}

.privacy-settings .setting-row .label {
    grid-column: 2;
    grid-row: 1;
}

.privacy-settings .setting-row input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.privacy-settings .setting-row .helper {
    grid-column: 2;
    grid-row: 2;
    margin-top: 4px;
}

.privacy-settings .setting-row:hover {
    background: var(--hover-bg);
}

.privacy-settings .setting-row .label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.privacy-settings .setting-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gradient-start);
}

.privacy-settings select,
.privacy-settings input[type="number"] {
    min-width: 110px;
    max-width: 160px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 13px;
}

.privacy-settings .helper {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 6px;
}

.privacy-settings fieldset {
    border: none;
    padding: 0;
    margin: 6px 0 0 0;
}

.privacy-settings legend {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.privacy-settings .actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    align-items: center;
}

/* Inline toggle used in settings list for quick Personalization enable/disable */
.inline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.inline-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--border-color);
    position: relative;
    outline: none;
    cursor: pointer;
    transition: background 0.18s ease;
}

.inline-toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.18s cubic-bezier(.2,.9,.3,1);
}

.inline-toggle input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

.inline-toggle input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

.inline-toggle .inline-toggle-label {
    font-size: 13px;
    color: var(--text-secondary);
    display: inline-block;
}

@media (max-width: 599px) {
    .inline-toggle .inline-toggle-label { display: none; }
    .settings-list-inline-controls { justify-content: flex-start; }
}

/* Reuse existing option-btn / primary / danger styles where possible */
.privacy-settings .option-btn { padding: 8px 10px; font-size: 13px; }
.privacy-settings .option-btn.primary { background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); color: #fff; border-color: transparent; }
.privacy-settings .option-btn.danger { background: transparent; border: 1px solid #ef4444; color: #ef4444; }

/* Compact helpers for small screens */
@media (max-width: 599px) {
    .privacy-settings { padding: 12px; gap: 8px; }
    .privacy-settings .setting-row { padding: 6px 4px; }
    .privacy-settings select, .privacy-settings input[type="number"] { min-width: 90px; }
    .privacy-settings .actions { flex-direction: column; align-items: stretch; }
}

/* Group filter pills */
.chat-group-filters {
    display: flex;
    gap: 8px;
    padding: 10px 12px; /* reduce side padding to give more room on small screens */
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    overflow-x: auto; /* allow horizontal scrolling when many groups */
    white-space: nowrap; /* keep pills on one line */
    -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
    scroll-behavior: smooth;
    padding-bottom: 12px; /* extra breathing room for scroll */
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    min-width: 48px;
    max-width: 160px; /* prevent extremely long pills from overflowing */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* ensure ellipsis works */
}

.filter-pill.active {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border-color: transparent;
}

/* hide native scrollbar but keep functionality (desktop) */
.chat-group-filters::-webkit-scrollbar {
    height: 8px;
}
.chat-group-filters::-webkit-scrollbar-track {
    background: transparent;
}
.chat-group-filters::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.08);
    border-radius: 8px;
}

/* Accessible focus outline for pills */
.filter-pill:focus {
    outline: 2px solid rgba(124, 58, 237, 0.18);
    outline-offset: 2px;
}

/* Show a subtle track on desktop for discoverability (Firefox + Webkit) */
@media (min-width: 600px) {
    .chat-group-filters {
        scrollbar-color: rgba(0,0,0,0.12) transparent; /* Firefox */
        scrollbar-width: thin; /* Firefox */
    }
    .chat-group-filters::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.12);
    }
}

/* Edge hint gradients to indicate more content left/right */
.chat-group-filters {
    position: relative; /* needed for pseudo elements */
}
.chat-group-filters::before,
.chat-group-filters::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    transition: opacity 0.18s ease;
    opacity: 0;
}
.chat-group-filters::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0));
}
.chat-group-filters::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.06), rgba(0,0,0,0));
}
.chat-group-filters.has-left::before { opacity: 1; }
.chat-group-filters.has-right::after { opacity: 1; }

.chat-history-content::-webkit-scrollbar {
    width: 6px;
}

.chat-history-content::-webkit-scrollbar-track {
    background: transparent;
}

.chat-history-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.chat-history-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Chat Group */
.chat-group {
    margin-bottom: 8px;
}

/* ========== Landing Page / Home styles ========== */
.home-landing { background: linear-gradient(180deg, rgba(124,58,237,0.04), transparent 30%); min-height: 100vh; }
.landing-hero { padding: 80px 20px; display: flex; align-items: center; justify-content: center; }
.landing-inner { max-width: 1100px; width: 100%; display: grid; grid-template-columns: 1fr 360px; gap: 36px; align-items: center; }
.hero-content h1 { font-size: 44px; margin-bottom: 10px; }
.hero-content .hero-sub { color: var(--text-secondary); margin-bottom: 18px; font-size: 16px; }
.logo-hero { width: 64px; height: 64px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: white; background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); font-size: 28px; margin-bottom: 14px; }
.hero-ctas { display: flex; gap: 12px; margin-top: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; text-decoration: none; font-weight: 600; border: 1px solid transparent; }
.btn.primary { background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); color: white; }
.btn.outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }
.hero-visual { display: flex; align-items: center; justify-content: center; }

.landing-main { padding: 40px 20px; }
.features { max-width: 1100px; margin: 0 auto 30px; }
.features h2 { font-size: 22px; margin-bottom: 18px; text-align: center; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 18px; text-align: center; min-height: 140px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; }
.feature-icon { font-size: 28px; color: var(--gradient-start); width: 56px; height: 56px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(236,72,153,0.06)); }

.cta-banner { background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(79,70,229,0.02)); padding: 28px 0; margin-top: 8px; }
.cta-inner { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; }
.landing-footer { padding: 18px 20px; background: transparent; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary); gap: 12px; }

@media (max-width: 1024px) {
    
    .landing-inner { grid-template-columns: 1fr; gap: 20px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 599px) {
    .hero-content h1 { font-size: 28px; }
    .features-grid { grid-template-columns: 1fr; }
    .landing-hero { padding: 36px 12px; }
    .hero-visual { display: none; }
    .cta-inner { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ========== Magic Button (floating star + radial fan) ========== */
.magic-container {
    position: fixed;
    z-index: 900;
    bottom: 100px;
    left: 22px; /* default left; .right will override */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* container doesn't block clicks, buttons inside do */
}
.magic-container.right { left: auto; right: 22px; }
@media (min-width: 599px) {
    
    .magic-container { 
        bottom: 90px; 
        left: 110px; /* default left; .right will override */
    }
}
@media (min-width: 599px ) and (max-width: 1024px) {
    
    .magic-container { 
        bottom: 90px; 
        left: 50px; /* default left; .right will override */
    }
}

.magic-main {
    width: 40px;
    height: 40px;
    padding:3px !important;    
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    /* subtle theme-aware glow + border to match input-container:focus-within */
    box-shadow: 0 8px 20px rgba(0,0,0,0.16), 0 0 18px var(--glow-color-soft);
    border: 1px solid var(--border-color); /* base fallback border */
    cursor: pointer;
    pointer-events: auto;
    /* visible button size / touch target */
    padding: 6px;
    transition: transform 0.18s cubic-bezier(.2,1,.3,1), box-shadow 0.12s ease;
}
.magic-main-svg {
    width: 30px;
    height: 30px;
    display: block;
}
/* stronger glow when active/open/hover/focus */
.magic-main:focus-visible {
    outline: 3px solid rgba(124,58,237,0.12);
    outline-offset: 2px;
}
.magic-main:active { transform: scale(0.96); }
.magic-main.idle-pulse { animation: magic-pulse 6400ms ease-in-out infinite; }
@keyframes magic-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Press animation: expand to 115% then return to normal. This is triggered
   by adding the `press-anim` class on click from JS so it plays even if the
   user only taps (no long-press). Respects reduced-motion preference. */
@keyframes magic-press {
    0%   { transform: scale(1); }
    18%  { transform: scale(1.15); }
    60%  { transform: scale(1.45); }
    80%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Stage Loading Spinner Animation */
@keyframes spin-loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dash-animation {
    0% {
        stroke-dasharray: 31.4 94.2;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 78.5 94.2;
        stroke-dashoffset: -47.1;
    }
    100% {
        stroke-dasharray: 31.4 94.2;
        stroke-dashoffset: -125.6;
    }
}

#stageLoadingIndicator {
    transition: opacity 0.3s ease;
}

#stageLoadingIndicator.active {
    opacity: 1;
    pointer-events: auto;
}

#stageLoadingIndicator:not(.active) {
    opacity: 0;
    pointer-events: none;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.stage-loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    color: var(--primary-color, #7c3aed);
}

.stage-loading-spinner svg {
    animation: spin-loader 2s linear infinite;
}

.stage-loading-spinner .spinner-circle {
    animation: dash-animation 1.5s ease-in-out infinite;
    stroke-linecap: round;
}
}

.magic-main.press-anim {
    animation: magic-press 480ms cubic-bezier(.2,1,.3,1);
}

@media (prefers-reduced-motion: reduce) {
    .magic-main.press-anim { animation: none; transform: scale(1); }
}

.magic-sub {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12), 0 0 10px var(--glow-color-soft);
    border: 1px solid var(--border-color);
    /* slightly smaller padding so the label can sit closer to the button */
    padding: 4px;
    transform: translate(0,0) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: transform 380ms cubic-bezier(.12,1.15,.3,1), opacity 280ms ease, box-shadow 180ms ease;
}
.magic-sub button { background: transparent; border: none; width:100%; height:100%; border-radius:999px; cursor:pointer; font-size:12px; }
.magic-sub.show { opacity: 1; pointer-events: auto; transform: translate(0,0) scale(1); 
    border-color: var(--gradient-start);
    box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 0 36px var(--glow-color);

}


/* Visible label for touch targets; hidden on large pointer devices */
.magic-label {
    display: none;
    position: absolute;
    left: 48px; /* moved closer to the sub-button */
    top: 50%;
    transform: translateY(-50%);
    /* use the same prominent background as user message bubbles so the label pops */
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: var(--text-primary);
    /* stronger border that reads well on both light/dark themes */
    border: 1px solid var(--border-color);
    padding: 2px 4px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    /* deeper shadow and gentle glow using theme-aware vars */
    box-shadow: 0 12px 34px rgba(0,0,0,0.22), 0 0 28px var(--glow-color);
    white-space: nowrap;
    z-index: 1200;
}

/* On touch devices or narrow screens, show visible labels for easier touch targeting */
@media (hover: none) and (pointer: coarse), (max-width: 899px) {
    .magic-label { display: block; }
    .magic-sub { padding-left: 8px; padding-right: 8px; }
    /* adjust label placement when container is on the right */
    .magic-container.right .magic-label { left: auto; right: 36px; }
}

/* Ensure labels are visible whenever the magic menu or a sub-button is shown.
   This helps desktop debugging and makes the label styling (gradient/border/glow)
   apply consistently when the control is active. The touch-only rule above
   remains for normal behavior on small/touch devices. */
.magic-sub.show .magic-label,
.magic-container.open .magic-label {
    display: block !important;
    color: #fff; /* ensure readable text on gradient */
    border: 1px solid rgba(255,255,255,0.12);
}

/* Make sure the inner button expands to fill padded area */
.magic-sub-btn { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; 
    color: var(--text-primary);
    border-color: var(--gradient-start);
    box-shadow: 0 10px 24px rgba(0,0,0,0.14), 0 0 22px var(--glow-color-soft);
}

.magic-sub button:focus-visible {
    outline: 3px solid rgba(124,58,237,0.12);
    outline-offset: 2px;
}

.magic-close {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    background: rgba(0,0,0,0.6);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    right: -1px;
    top: -0px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
}
.magic-container.open .magic-close { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Respect reduced motion: simplify animations */
@media (prefers-reduced-motion: reduce) {
    .magic-sub { transition: opacity 60ms linear; transform: none !important; }
    .magic-main.idle-pulse { animation: none; }
    .magic-main, .magic-sub { box-shadow: none; }
}

.chat-group-header {
    display: flex;
    min-height: 35px;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    position: relative; /* สำหรับ positioning ของ menu panel */
    /* เพิ่มสี background ที่เด่นกว่า --card-bg เพื่อเน้นว่าเป็นหัวข้อหรือ folder */
    background: linear-gradient(274deg, 
        rgba(121, 121, 121, 0.08), 
        rgba(236, 72, 15, 0.05)
    );
    border-radius: 8px;
    border: 1px solid rgba(124, 58, 237, 0.12);
}

.chat-group-header:hover {
    background: linear-gradient(135deg, 
        rgba(124, 58, 237, 0.02), 
        rgba(236, 72, 153, 0.04)
    );
    border-color: rgba(124, 58, 237, 0.25);
}

/* Make the magic label elements visually interactive when they're clickable.
   These styles complement the JS which adds the 'magic-label-clickable' class
   and role/tabindex so the labels behave like buttons (click + keyboard).
*/
.magic-label-clickable {
    cursor: pointer;
    outline: none;
    display: block;
    padding: 6px;
    transition: box-shadow 120ms ease, transform 120ms ease;
}

.magic-label-clickable:hover,
.magic-label-clickable:focus {
    box-shadow: 0 8px 22px rgba(0,0,0,0.18), 0 0 20px var(--glow-color);
}

.magic-label-clickable:focus-visible {
    outline: 3px solid rgba(124,58,237,0.12);
    outline-offset: 2px;
}

/* Dark theme variants */
[data-theme="dark"] .chat-group-header {
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.12), 
        rgba(236, 72, 153, 0.08)
    );
    border-color: rgba(147, 51, 234, 0.18);
}

[data-theme="dark"] .chat-group-header:hover {
    background: linear-gradient(135deg, 
        rgba(147, 51, 234, 0.20), 
        rgba(236, 72, 153, 0.15)
    );
    border-color: rgba(147, 51, 234, 0.35);
}

/* Dark Blue theme */
[data-theme="dark-blue"] .chat-group-header {
    background: linear-gradient(135deg, 
        rgba(0, 108, 255, 0.12), 
        rgba(0, 57, 148, 0.08)
    );
    border-color: rgba(0, 108, 255, 0.18);
}

[data-theme="dark-blue"] .chat-group-header:hover {
    background: linear-gradient(135deg, 
        rgba(0, 108, 255, 0.20), 
        rgba(0, 57, 148, 0.15)
    );
    border-color: rgba(0, 108, 255, 0.35);
}

/* Dark Gray theme */
[data-theme="darkgray"] .chat-group-header {
    background: linear-gradient(135deg, 
        rgba(107, 114, 128, 0.12), 
        rgba(52, 53, 54, 0.08)
    );
    border-color: rgba(107, 114, 128, 0.18);
}

[data-theme="darkgray"] .chat-group-header:hover {
    background: linear-gradient(135deg, 
        rgba(107, 114, 128, 0.20), 
        rgba(52, 53, 54, 0.15)
    );
    border-color: rgba(107, 114, 128, 0.35);
}

.chat-group-header i:first-child {
    font-size: 12px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    order: 0;                 /* อยู่ซ้ายสุดเสมอ */
    flex-shrink: 0;
}

.chat-group-header.collapsed i:first-child {
    transform: rotate(-90deg);
}

.chat-group-header span:nth-child(2) {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.2px;
    line-height: 1.25;
    text-transform: none;
}

/* Truncate long chat group header names to a single line with ellipsis. 
   Keep the icon (first child) and the count (chat-count) visible by allowing
   the middle text to shrink. This rule works with the existing flex layout. */
.chat-group-header .group-title {
    display: block;           /* allow width control */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;             /* enable flex child to shrink in modern browsers */
    flex: 1;                  /* ขยายเต็มพื้นที่ที่เหลือ */
    order: 1;                 /* อยู่หลัง icon แต่ก่อน menu และ count */
}

/* Group Menu Trigger - คล้ายกับ chat-menu-trigger */
.group-menu-trigger {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    /* อยู่ก่อน chat-count ในลำดับ flex */
    order: 998;
    flex-shrink: 0;
}

.group-menu-trigger .menu-ic {
    width: 14px;
    height: 14px;
}

/* แสดงเมื่อ hover group header */
.chat-group-header:hover .group-menu-trigger {
    opacity: 1;
}

.group-menu-trigger:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
    opacity: 1 !important;
}

/* Group Menu Panel */
.group-menu-panel {
    position: absolute;
    top: 100%;
    right: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 160px;
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.group-menu-panel.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.group-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    text-align: left;
    transition: all 0.2s ease;
}

.group-menu-item:hover {
    background: var(--hover-bg);
}

.group-menu-item.danger {
    color: #ff6b6b;
}

.group-menu-item.danger:hover {
    background: rgba(255, 107, 107, 0.1);
}

.group-menu-item svg,
.group-menu-item i {
    width: 16px;
    height: 16px;
    font-size: 14px;
}

/* Mobile responsive */
@media (max-width: 599px) {
    .group-menu-trigger {
        width: 28px;
        height: 28px;
        opacity: 1; /* แสดงตลอดเวลาบนมือถือ */
    }
    
    .group-menu-trigger .menu-ic {
        width: 16px;
        height: 16px;
    }
    
    .group-menu-panel {
        right: 4px;
        min-width: 140px;
    }
    
    .group-menu-item {
        padding: 12px 10px;
        font-size: 15px;
    }
}

.chat-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--hover-bg);
    padding: 2px 8px;
    border-radius: 10px;
    /* ให้ chat-count อยู่ขวาสุดเสมอ แม้เมื่อมี group-menu-trigger */
    order: 999;
    flex-shrink: 0;
}

/* Chat Group Items */
.chat-group-items {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}

/* Chat Item */
.chat-item {
    display: flex;
    align-items: center; /* center vertically so icon sits nicely beside stacked text */
    gap: 12px;
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 1px var(--border-color) solid;
}

.chat-item:hover {
    background: var(--hover-bg);
}

/* Swipe action UI */
.chat-item { overflow: hidden; }
:root {
    --swipe-action-width: 86px; /* default width for action containers */
    --swipe-action-btn-size: 56px; /* button size inside action container */
}
.chat-item .swipe-inner { position: relative; z-index: 2; transition: transform 0.18s ease; will-change: transform; }
.chat-item .left-actions,
.chat-item .right-actions { position: absolute; top: 0; bottom: 0; width: var(--swipe-action-width); display: flex; align-items: center; justify-content: center; z-index: 1; opacity: 0; transition: opacity 0.12s ease; }
.chat-item .right-actions { right: 0; }
.chat-item .left-actions { left: 0; }
.chat-item .left-actions button, .chat-item .right-actions button { width: var(--swipe-action-btn-size); height: var(--swipe-action-btn-size); border-radius: 10px; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-item .left-actions button { background: linear-gradient(135deg, rgba(236,72,153,0.1), transparent); color: var(--text-primary); }
.chat-item .right-actions button { background: linear-gradient(135deg, rgba(124,58,237,0.08), transparent); color: var(--text-primary); }

/* When swiped show actions and translate content */
.chat-item.swiped-right .swipe-inner { transform: translateX(86px); }
.chat-item.swiped-right .left-actions { opacity: 1; }
.chat-item.swiped-left .swipe-inner { transform: translateX(-86px); }
.chat-item.swiped-left .right-actions { opacity: 1; }

/* Only enable swipe UI on small portrait devices */
@media (max-width: 599px) and (orientation: portrait) {
    .chat-item .chat-item-actions { display: none; } /* hide inline hover actions to avoid duplication */
    .chat-item .swipe-inner { touch-action: pan-y; }
}

.chat-item.active {
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.08), transparent);
    border-bottom: 1px solid var(--gradient-start);
    border-bottom-width: 50%;
    border-bottom-right-radius:20px ;
    border-bottom-left-radius:12px;
}

.chat-item.pinned {
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.05), transparent);
}

.chat-item-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.1));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Option to hide icons and let content use full width */
.chat-item.no-icon .chat-item-icon,
.chat-item.hide-icons .chat-item-icon {
    display: none !important;
}

.chat-item.no-icon .chat-item-content,
.chat-item.hide-icons .chat-item-content {
    margin-left: 0;
}

.chat-item-icon i {
    font-size: 16px;
    color: var(--gradient-start);
}

.chat-item.pinned .chat-item-icon {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(124, 58, 237, 0.1));
}

.chat-item.pinned .chat-item-icon i {
    color: var(--gradient-end);
}

.chat-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-item-content h4 {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.25;
    letter-spacing: 0.1px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Allow the content column to shrink inside the horizontal .chat-item flex row
   so the title can ellipsize instead of pushing layout. Also ensure the h4
   itself can shrink (min-width:0) in some browsers. */
.chat-item-content { min-width: 0; flex: 1 1 auto; }
.chat-item-content h4 { min-width: 0; margin-left: 2px; }

.chat-item-content p {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.2;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Keep actions pinned to the right side of the chat item */
.chat-item-actions { margin-left: auto; }

.chat-item:hover .chat-item-actions {
    opacity: 1;
}

/* Mobile portrait behavior */
@media (max-width: 599px) and (orientation: portrait) {
    .chat-item { padding: 8px 10px 8px 10px; gap: 10px; }
    .chat-item-icon { display: none; }
    .chat-item-content p { display: none !important; }
    .chat-menu-trigger { width: 36px !important; height: 36px !important; }
    .chat-item .chat-time {
        position: static;
        order: 2;
        margin-left: auto;
        font-size: 11px;
        color: var(--text-secondary);
        opacity: 0.8;
    }
    .chat-item-actions {
        order: 3;
        display: none;
        opacity: 1;
        margin-left: 0;
    }
    .chat-item.actions-visible .chat-time { display: none; }
    .chat-item.actions-visible .chat-item-actions { display: flex; }
}

/* Ensure the portal panel floats above everything and is hidden until opened */
.chat-menu-panel {
    position: fixed; /* will be positioned via JS when opened */
    display: none;
}
.chat-menu-panel.open { display: block; }

.chat-action-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Three-dot menu trigger and panel styles */
.chat-menu-trigger {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}
.chat-menu-trigger .menu-ic { width: 16px; height: 16px; }

/* Larger hit target on desktop for easier clicking */
@media (min-width: 1025px) {
    .chat-menu-trigger { width: 44px; height: 44px; border-radius: 8px; }
    .chat-menu-trigger .menu-ic { width: 20px; height: 20px; }
    .chat-menu-panel { right: 6px; top: 46px; min-width: 180px; }
}
.chat-menu-trigger:hover { color: var(--text-primary); background: var(--primary-bg); }
.chat-menu-trigger .menu-ic { width: 16px; height: 16px; }

.chat-menu-panel {
    position: absolute;
    min-width: 160px;
    max-width: 220px;
    right: 8px;
    top: 36px;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px 6px;
    z-index: 2300;
    display: none;
}
.chat-menu-panel.open { display: block; }
.chat-menu-panel .menu-item {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
}
.chat-menu-panel .menu-item:hover { background: var(--hover-bg); }
.chat-menu-panel .menu-item svg,
.chat-menu-panel .menu-item .w-4,
.chat-menu-panel .menu-item .h-4 {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}
.chat-menu-panel .menu-item.danger { color: #e11d48; }

/* Ensure the panel is positioned relative to the chat item */
.chat-item { position: relative; }

/* Per-chat settings (gear) button */
.chat-action-btn.settings-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.chat-action-btn.settings-btn:hover {
    background: var(--primary-bg);
    color: var(--text-primary);
}

/* Small touch target increase on mobile */
@media (max-width: 599px) {
    .chat-action-btn.settings-btn {
        width: 36px;
        height: 36px;
    }
}

/* Desktop: larger hit area for settings gear */
@media (min-width: 1025px) {
    .chat-action-btn.settings-btn {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }
    .chat-action-btn.settings-btn svg, .chat-action-btn.settings-btn .icon {
        width: 20px !important;
        height: 20px !important;
    }
}

.chat-action-btn:hover {
    background: var(--primary-bg);
    color: var(--text-primary);
}

.chat-action-btn.active {
    color: var(--gradient-end);
}

.chat-time {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.7;
}

.chat-item:hover .chat-time {
    opacity: 0;
}

/* Chat Messages (mockup like ChatGPT) */
.chat-messages {
    --chat-messages-padding-x: 20px;
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    margin-left: 2px; /* Reduced from 60px for better spacing */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Hide the native vertical scrollbar for .chat-messages while keeping it scrollable.
   This allows the browser/page scrollbar to be the primary scroll indicator. */
.chat-messages {
    /* Firefox */
    scrollbar-width: none;
    /* Internet Explorer 10+ */
    -ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* optional: remove background */
}

/* If you want a thin custom track for desktop, you can enable and style it here.
.chat-messages::-webkit-scrollbar {
    width: 8px;
}
.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 8px;
}
*/

.message {
    display: flex;
    max-width: 900px;
    align-self: center;
    width: 100%;
    justify-content: center;
}

.message .content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 5px 0px;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.75;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    max-width: 936px;
    width: 100%;
}
/* Ensure content boxes never exceed their parent's width (helps avoid
   quirks on small screens where padding + width can induce overflow). */
.message .content { box-sizing: border-box; max-width: 100%; }

.message.user {
    justify-content: flex-end;
}

.message.user .content {
    position: relative;
    background: transparent;
    color: white;
    border: none;
    max-width: 70%; /* ความกว้างสูงสุด 70% */
    width: fit-content; /* ขนาดพอดีกับข้อความ */
    display: inline-block; /* ให้ขนาดปรับตามเนื้อหา */
}

/* Background fade สำหรับ user message โดยไม่กระทบ text */
.message.user .content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    opacity: 0.6; /* ปรับระดับ fade ได้ที่นี่ */
    border-radius: inherit;
    z-index: -1;
}
.user-content {
    padding: 10px 14px !important;
    margin-bottom: 10px;
    margin-top: 20px; /* remove large top gap so timestamp aligns to bubble */
    border-radius: 16px; /* มุมมน */
    word-wrap: break-word; /* ตัดคำยาวได้ */
}

/* make the user-content a positioning context for timestamp/action overlays */
.message.user .content.user-content {
    position: relative;
    width: fit-content !important; /* พอดีกับเนื้อหา */
    max-width: 70% !important; /* ไม่เกิน 70% ของ browser */
    display: inline-block !important; /* ให้ขนาดปรับตามเนื้อหา */
}

/* Stronger override to prevent flex container from stretching the user bubble
   Use flex: 0 0 auto so the bubble sizes to content, width:auto, and limit by
   viewport width (70vw) as a safeguard if parent percentages cause sizing issues. */
.message.user > .content.user-content,
.message.user .content.user-content {
    flex: 0 0 auto !important;
    width: auto !important; /* prefer auto when inside flex */
}

.message.bot {
  justify-content: center;
  flex-direction: column;
}.message.bot .content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.message p {
    margin: 0;
    line-height: 1.85;
}

.message p:last-child {
    margin-bottom: 0;
}

.message .content p + strong {
    margin-top: 1rem;
    font-size: 20px;
}


/* Extra spacing for significant breaks (e.g., chapter transitions) */
.message .content p:empty {
    margin: 0.5rem 0;
    min-height: 0.5rem;
}

.follow-up-questions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.follow-up-btn {
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.follow-up-btn:hover {
    background: var(--gradient-start);
    color: white;
}

/* Full-width follow-up suggestion list resembling the provided mockup */
.follow-up-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-self: center;
    max-width: 900px;
    margin-top: 2px 30px !important;
}

.follow-up-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.follow-up-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 6px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    color: var(--text-secondary);
    font-size: calc(var(--chat-font-size) * 0.86); /* slightly smaller than main text */
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.follow-up-item:hover {
    background: rgba(0,0,0,0.03);
    color: var(--text-primary);
}

.follow-up-item .follow-arrow {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px; /* reserve space so text aligns */
}

/* Inline SVG icon size; uses currentColor from parent */
.follow-up-item .follow-icon { width: 14px; height: 14px; display: block; }

/* Hover: brighten icon along with text */
.follow-up-item:hover .follow-arrow { color: var(--text-primary); }

.follow-up-item .follow-text { flex: 1; }

/* Message action buttons (edit / copy / delete) */
.msg-actions {
    display: flex;
    gap: 2px;
    position: absolute;
    /* pull actions inward so they sit snug under the bubble */
    right: 8px;
    bottom: -16px; /* reduced from -28px -> closer to bubble */
    opacity: 0;
    transform: translateY(3px); /* smaller translate for subtle reveal */
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}

.message.user { position: relative; }
/* Keep actions visible when hovering the message OR the actions themselves,
   and when .actions-open is toggled (mobile) */
.message.user:hover .msg-actions,
.message.user .msg-actions:hover,
.message.user.actions-open .msg-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.msg-action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
}

.msg-action-btn:hover { background: var(--hover-bg); color: var(--text-primary); }

.msg-action-btn.copied { background: rgba(0,0,0,0.06); color: var(--text-primary); }

/* Bot message action buttons row */
.bot-actions-row {
    margin-top: 0px;
    margin-left: 2px;
    margin-bottom: 4px;
}

.token-usage-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 2px 4px 60px;
    line-height: 1.4;
}

.bot-actions-container {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 4px;
    padding: 4px 0;
}

.bot-action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    min-width: 32px;
    height: 32px;
}

.bot-action-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.bot-action-btn svg {
    width: 16px;
    height: 16px;
}

.bot-action-btn.copied {
    background: rgba(0,0,0,0.06);
    color: var(--text-primary);
}

/* Compact per-message action buttons (new replacement) */
.msg-actions-compact {
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.msg-actions-compact .compact-btn-wrap {
    display: inline-flex;
}

.msg-actions-compact button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
    opacity: 0; /* hidden by default, becomes visible on hover */
}

.msg-actions-compact button .icon-sm { width: 16px; height: 16px; }

/* Reveal on desktop hover and when mobile .actions-open is toggled */
.message.user:hover .msg-actions-compact button,
.message.user.actions-open .msg-actions-compact button,
.msg-actions.actions-open .msg-actions-compact button {
    opacity: 1;
}

/* Keep the container reachable while hidden so layout not affected */
.message.user:hover .msg-actions,
.message.user.actions-open .msg-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Button hover */
.msg-actions-compact button:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Provide a small visible fallback when JavaScript toggles .actions-open on mobile */
@media (max-width: 599px) {
    .msg-actions { right: 6px; bottom: -22px; }
    .msg-actions-compact button { padding: 0px; border-radius: 10px; }
}

/* Timestamp shown for user messages on hover or tap */
.msg-timestamp-wrap {
    width: 100%;
    position: absolute;
    top: -18px; /* sit above the bubble */
    right: 12px;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.msg-timestamp {
    text-wrap-mode: nowrap;
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    padding: 0 4px;
    width: 100%;
    line-height: 1;
    transform: translateY(1px);
    opacity: 0;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

/* Reveal timestamp on hover (desktop) or when actions-open (mobile) */
.message.user:hover .msg-timestamp,
.message.user.actions-open .msg-timestamp {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 599px) {
    .msg-timestamp-wrap { right: 8px; top: -16px; }
}

/* Inline edit form shown under the message bubble */
.edit-form {
    width: calc(100% - 20px);
    margin: 8px 10px 0 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.edit-textarea {
    width: 100%;
    min-height: 64px;
    max-height: 240px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    resize: vertical;
    font-size: 14px;
    background: var(--card-bg);
    color: var(--text-primary);
}

.edit-controls {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.edit-controls .option-btn { padding: 8px 12px; border-radius: 18px; }
.edit-controls .send-edit { background: var(--text-primary); color: white; }

/* Mobile: make the message actions appear on tap by toggling .actions-open */
@media (max-width: 599px) {
    .msg-actions { right: 8px; }
}

/* Terminal styles removed */

/* Settings Panel */
.settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1400;
    background: rgba(0,0,0,0.35);
}

.settings-panel[aria-hidden="false"] {
    display: flex;
}

.settings-panel-inner {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    position: relative; /* ensure absolutely positioned children (close button) are placed inside this container */
    width: 90%;
    max-width: 1100px;
    height: 90vh;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 320px 1fr;
    overflow: hidden;
}

.settings-list {
    border-right: 1px solid var(--border-color);
    padding: 18px;
    overflow-y: auto;
}

/* Improved settings list visuals */
.settings-list h3.settings-title {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
}
.settings-list ul {
    list-style: none;
    margin-top: 6px;
}
.settings-list .settings-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}
.settings-list .settings-item:hover {
    background: var(--hover-bg);
}
.settings-list .settings-item.active {
    background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(236,72,153,0.06));
    color: var(--text-primary);
    font-weight: 600;
}

/* Chat font size variable and application */
:root {
    --chat-font-size: 1.0rem; /* default */
}

.chat-messages .content {
    font-size: var(--chat-font-size);
}

.settings-title {
    margin: 0 0 12px 0;
    font-size: 18px;
}

.settings-item {
    padding: 12px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.settings-item:hover, .settings-item.active {
    background: var(--hover-bg);
}

.settings-detail {
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

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

/* Ensure the settings header area is full width and right-align any header controls
   (this puts the back button at the far-right inside the left column on mobile). */
.settings-list .settings-header,
.settings-list .settings-header.mobile-only,
.settings-detail .detail-header.mobile-only {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
}

.settings-list .settings-header { padding-right: 12px; }
.settings-detail .detail-header.mobile-only { padding-right: 12px; }

.mobile-only { display: none; }
.desktop-only { display: block; }

/* Position the close button in the top-right of the settings panel on desktop */
.desktop-only .close-settings {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
}

.desktop-only .close-settings:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Mobile behavior: list first, then detail (full screen) */
@media (max-width: 599px) {
    .settings-panel-inner {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        grid-template-columns: 1fr;
    }
    .settings-list {
        padding: 12px;
    }
    .settings-detail {
        display: none;
        padding: 12px;
    }
    .settings-detail.show {
        display: block;
    }
    .mobile-only { display: block; }
    .desktop-only { display: none; }
}

/* When detail is opened on mobile, hide the list and make detail occupy full area */
@media (max-width: 599px) {
    .settings-panel-inner.detail-open {
        grid-template-columns: 1fr;
    }

    .settings-panel-inner.detail-open .settings-list {
        display: none;
    }

    .settings-panel-inner.detail-open .settings-detail {
        display: block;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        padding: 18px;
    }
}

/* Terminal-related styles removed */

/* Responsive Design for Chat Messages */
@media (max-width: 768px) {
    .chat-history-panel{
        z-index: 2200;;
    }
            
    .sidebar{
        padding-top: 10px;
    }
    .message {
        max-width: 100%;
        padding: 0 5px;
    }
    
    .message .content {
        max-width: none;
    }
    
    .message.user .content {
        max-width: 80%;
    }

}
/* Collapse sidebar and show menu toggle for small tablets / large phones
   This makes the left rail behave like a mobile overlay between 600px and 768px. */
@media (min-width: 600px) and (max-width: 768px) {
    .sidebar {
        width: 0;
        padding: 0;
        overflow: hidden;
        position: fixed;
        left: 0;
        top: env(safe-area-inset-top, 0);
        bottom: 0;
        z-index: 1000;
        transition: width 0.28s ease, padding 0.28s ease;
    }

    .sidebar.open {
        width: 60px;
        padding: 20px 0;
        overflow: visible;
    }

    /* Make the menu toggle visible in this breakpoint */
    .menu-toggle, #menuToggle { display: flex !important; }

    /* Keep main content accessible; when sidebar opens act like an overlay/push */
    .main-content { transition: transform 260ms cubic-bezier(.2,.9,.2,1); }
    .sidebar.open ~ .main-content { transform: translateX(60px); }
}
@media (max-width: 960px) and (orientation: portrait) {
    .chat-history-panel{
        z-index: 2200;;
    }
            
    .sidebar{
        padding-top: 10px;
    }
    .message {
        max-width: 100%;
        padding: 0 5px;
    }
    
    .message .content {
        max-width: none;
    }
    
    .message.user .content {
        max-width: 80%;
    }

}

/* Mobile portrait: make bot messages use almost full viewport width,
   remove outer container side-padding, and respect safe-area insets
   (notch / rounded corners). Keeps a tiny 6px gutter plus any device
   safe-area so text is readable but visually nearly edge-to-edge. */
@media (max-width: 599px) and (orientation: portrait) {
    /* remove side padding that was added earlier so messages can reach edges */
    .chat-messages {
        --chat-messages-padding-x: 0px;
        padding-left: 0;
        padding-right: 0;
    }
    .chat-messages#chatMessages {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* make the message row itself not introduce extra inset */
    .message {
        padding: 0;
    }

    /* center the bot row and allow it to take full width */
    .message.bot {
        justify-content: center;
        width: 100%;
    }

    /* make the bubble expand to the viewport width minus a tiny gutter
       and minus any device safe-area insets (iPhone notch, etc.) */
    .message.bot .content {
        /* prefer percentage-based sizing to avoid 100vw overflow bugs.
           Subtract the small gutter and any safe-area insets while staying
           within the parent's width. */
        box-sizing: border-box;
        width: calc(100% - 12px - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-width: none;
        margin: 0;
        /* keep a small internal padding but offset by safe-area to avoid overlap */
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: calc(6px + env(safe-area-inset-left));
        padding-right: calc(6px + env(safe-area-inset-right));
        border-radius: 8px;
        box-shadow: none;
    }
}

/* Tighten vertical spacing for portrait phones so content sits closer to
   the top/bottom edges without colliding with the fixed input area. This
   reduces the main-content top/bottom padding and container vertical gaps
   only on narrow portrait viewports. */
@media (max-width: 599px) and (orientation: portrait) {
    .main-content {
        /* reduce large page-level paddings for phones */
        padding-top: calc(0px + env(safe-area-inset-top));
        padding-bottom: calc(0px + env(safe-area-inset-bottom));
    }

    .container {
        /* remove extra top/bottom space inside centered container */
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* If body.chatting increases bottom spacing for input, keep a small
       minimum so the messages don't overlap the input area. */
    body.chatting .main-content {
        padding-bottom: calc(0px + env(safe-area-inset-bottom));
    }

    /* Reduce overall vertical footprint on narrow portrait phones by ~20px.
       This shortens the centered container and the chat messages area so
       content fits more comfortably without visual overflow. */
    body.chatting .container {
        height: calc(100vh - 120px);
    }

    /* Reduce chat-messages max-height (was calc(100vh - 140px) globally)
       so the visible message area becomes ~20px shorter on portrait phones.
       Also add large padding-bottom for scroll space on mobile. */
    body.chatting .chat-messages {
        max-height: calc(100vh - 100px);
        min-height: 380px; /* slightly smaller than the desktop/mobile default */
        padding-bottom: 4%; /* Extra scroll space on mobile (keyboard consideration) */
    }

    
}

/* Visualization gallery modal */
.viz-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 1600;
}

/* Desktop: reduce extra top padding introduced for small/touch layouts
   The base stylesheet keeps a large padding-top to make room for the
   floating toolbar on small/touch devices. On wide desktop viewports
   this makes the input container look taller than necessary, so
   override it here for screens >= 1025px. */
@media (min-width: 1025px) {
    .input-container {
        /* keep comfortable spacing but remove the large top inset */
        padding: 18px 14px 10px 14px;
    }
}
.viz-modal[aria-hidden="false"] { display:flex; }
.viz-modal-inner {
    margin-top: auto;
    margin-bottom: 100px;
    background: var(--modal-bg);
    border: 1px solid var(--border-color);
    padding: 18px;
    border-radius: 12px;
    width: min(94%, 860px);
    max-width: 860px;
    position: relative;
}
@media (min-width: 1024px) {
    .viz-modal-inner {
        margin: auto;
    }
    .viz-thumb { 
        min-height: 500px;
        min-width:600px;

    }
}
#routerDebugPanel {
    position: fixed;
    right: 12px;
    bottom: 12px;
    width: 320px;
    max-height: 46vh;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    z-index: 9999;
    font-size: 13px;
}
#routerDebugHeader {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:8px 10px; background: linear-gradient(90deg, rgba(0,0,0,0.03), transparent);
    border-bottom:1px solid var(--border-color);
}
#routerDebugHeader button { background:transparent; border:none; cursor:pointer; font-size:14px; }
#routerDebugLog { padding:8px 10px; overflow:auto; max-height: calc(46vh - 44px); }
.router-debug-entry { padding:6px 0; border-bottom:1px dashed rgba(0,0,0,0.04); color:var(--text-secondary); }
.router-debug-entry b { color:var(--text-primary); }
.viz-gallery {
    display:flex;
    gap:5px;
    overflow-x: auto;
    padding:0px
}
.viz-thumb {
    width:250px;
    height:250px;
    flex:0 0 250px;
    background: linear-gradient(180deg,#ddd,#aaa);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:var(--text-primary);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.viz-controls { display:flex; gap:8px; justify-content:center; margin-top:8px; }

/* Move-group modal/theme styling to match app card theme */
.move-group-inner {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 14px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    color: var(--text-primary);
    width: min(94%, 560px);
    max-width: 560px;
}
.move-group-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,0.04); }
.move-group-header h4 { margin:0; font-size:1.05rem; color:var(--text-primary); }
.move-group-close { background:transparent; border:none; font-size:20px; line-height:1; cursor:pointer; color:var(--text-secondary); }
.move-group-body { padding-top:10px; }
.move-group-list { display:flex; flex-direction:column; gap:6px; max-height:320px; overflow:auto; padding:6px 2px; }
.move-item label { display:flex; align-items:center; gap:8px; width:100%; padding:6px 8px; border-radius:8px; cursor:pointer; }
.move-item label:hover { background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent); }
.move-item input[type="radio"] { flex:0 0 auto; }
.move-item .chat-count { opacity:0.6; margin-left:8px; }
.move-group-foot { display:flex; gap:8px; justify-content:flex-end; padding-top:10px; border-top:1px solid rgba(0,0,0,0.04); margin-top:8px; }
.move-group-foot .btn { padding:8px 12px; border-radius:8px; border:1px solid var(--border-color); background:transparent; color:var(--text-primary); }
.move-group-foot .btn.primary { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-color: rgba(255,255,255,0.02); }

.viz-close { position:absolute; top:12px; right:12px; background:none; border:none; font-size:20px; color:var(--text-primary); cursor:pointer; }


.personalization-panel {
    background: transparent; /* panels usually sit inside settings-detail already styled */
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary);
}
.personalization-panel .muted {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 6px;
}
.personalization-panel .setting-row {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 10px 12px;
    align-items: start;
    padding: 6px 0;
}
.personalization-panel .setting-row .label {
    font-weight: 600;
    color: var(--text-primary);
}
.personalization-panel .pers-goals,
.personalization-panel .pers-constraints {
    display:flex; flex-direction:column; gap:6px;
}
.personalization-panel input[type="text"],
.personalization-panel select,
.personalization-panel textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
}
.personalization-panel textarea { resize: vertical; min-height:64px; }
.personalization-panel input[type="checkbox"],
.personalization-panel input[type="radio"] {
    transform: scale(1.02);
    margin-right: 8px;
}
.personalization-panel .actions {
    display:flex; align-items:center; gap:8px; margin-top:6px;
}
.personalization-panel .option-btn {
    padding:8px 12px; border-radius:8px; border:1px solid var(--border-color); background:transparent; color:var(--text-primary); cursor:pointer;
}
.personalization-panel .option-btn.primary { background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end)); color: white; border: none; }
.personalization-panel .option-btn.danger { background: transparent; color: var(--danger); border:1px solid var(--danger); }

@media (max-width: 680px) {
    .personalization-panel .setting-row { grid-template-columns: 1fr; }
    .personalization-panel { gap:8px; font-size:13px; }
}

/* Right-side Chat Config Panel */
.chat-config-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0));
    right: 0;
    height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
    width: 360px;
    max-width: 92vw;
    background: var(--card-bg);
    border-left: 1px solid var(--border-color);
    box-shadow: -6px 0 30px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 260ms cubic-bezier(.2,.9,.3,1);
    z-index: 1900;
    display: flex;
    flex-direction: column;
}
.chat-config-panel[aria-hidden="false"] {
    transform: translateX(0);
}
.chat-config-inner { display:flex; flex-direction:column; height:100%; }
.chat-config-header { padding:12px 14px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border-color); }
.chat-config-header h4 { margin:0; font-size:16px; color:var(--text-primary); }
.close-config { margin-left:auto; background:transparent; border:none; font-size:20px; color:var(--text-secondary); cursor:pointer; }
.chat-config-body { padding:14px; overflow-y:auto; }

@media (max-width: 899px) {
    .chat-config-panel { width: 92vw; }
    /* When the sidebar is opened on portrait phones, slide main content to the right
       so it visibly yields to the sidebar instead of overlaying. This gives a clear
       'move aside' effect on narrow portrait viewports. */
}

/* Stock Data Panel (popup for fundamental, dividend data) */
.stock-data-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2000;
    font-size: 14px;
    pointer-events: none;
}

.stock-data-panel-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
    pointer-events: auto;
}

.stock-data-panel-container {
    position: relative;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.5);
    width: 200px;
    max-height: 400px;
    display: flex;
    flex-direction: row; /* change to row so menu sits left and content right */
    overflow: hidden;
    z-index: 2;
    pointer-events: auto;
    margin: 0 20px 80px 20px;
}

.stock-data-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.stock-data-panel-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.stock-data-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.12s ease;
    /* will be positioned via inline fixed coordinates from JS when shown */
    position: fixed;
    z-index: 2100;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    background: var(--card-bg);
}

/* Vertical menu on the left of the panel */
.stock-data-panel-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    min-width: 120px;
    background: transparent;
    border-right: 1px solid rgba(0,0,0,0.04);
}

.stock-data-menu-item {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.stock-data-menu-item:hover { background: rgba(0,0,0,0.03); }
.stock-data-menu-icon { font-size: 18px; }
.stock-data-menu-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }

/* Content area sits to the right and takes remaining space */

.stock-data-close-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.stock-data-close-btn svg {
    width: 20px;
    height: 20px;
}

.stock-data-panel-menu {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--subtle-bg);
}

.stock-data-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.stock-data-menu-item:hover {
    background: var(--hover-bg);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.stock-data-menu-icon {
    font-size: 16px;
}

.stock-data-menu-label {
    font-size: 14px;
}

.stock-data-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1px;
}

.stock-data-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
    font-size: 16px;
}

.stock-data-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--danger);
    font-size: 14px;
}

.flash-data {
    width: 100%;
}

.stock-info-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.stock-symbol {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-color);
}

.stock-name {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

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

.stock-data-table thead {
    background: var(--subtle-bg);
    border-bottom: 2px solid var(--border-color);
}

.stock-data-table thead th {
    padding: 10px 8px;
    font-size: 1.2rem !important;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.stock-data-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.15s ease;
}

.stock-data-table tbody tr:hover {
    background: var(--subtle-bg);
}

.stock-data-table th {
    font-size: 1.0rem !important;
    color: var(--accent-color);
}
.stock-data-table tbody td {
    padding: 10px 8px;
    color: var(--text-primary);
}

.stock-data-table td.num {
    text-align: right;
    font-size: 1.0rem !important;
    color: var(--accent-color);
}

@media (max-width: 600px) {
    .stock-data-panel-container {
        max-height: 95vh;
        border-radius: 8px;
    }
    .stock-data-close-btn {
        /* ensure the close button doesn't stick offscreen on very small devices */
        left: auto !important;
        right: 12px !important;
        top: 12px !important;
    }

    .stock-data-panel-menu {
        flex-direction: column;
    }

    .stock-data-menu-item {
        width: 100%;
        justify-content: center;
    }

    .stock-data-table {
        font-size: 12px;
    }

    .stock-data-table thead th,
    .stock-data-table tbody td {
        padding: 8px 4px;
    }
}

.flash-data-wrapper{
    margin: 5px;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(121, 59, 255, 0.4);
}

.danger-panel-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:2300 !important; }
.danger-panel { background: var(--bg, #fff); color: var(--fg, #111); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.35); width: min(540px, calc(100% - 48px)); padding:16px; }
.danger-panel h3 { margin:0 0 8px 0; }
.danger-panel p { margin:0 0 12px 0; color: #444; }
.danger-panel-actions { display:flex; gap:8px; justify-content:flex-end; }
.btn { padding:8px 12px; border-radius:6px; border:1px solid #ccc; background:#f5f5f5; cursor:pointer; }
.btn.btn-danger { background:#d9534f; color:#fff; border-color:#d43f3a; }
.btn.btn-secondary { background:#e9ecef; }

/* Hide the sheet LLM container until the user explicitly activates it
   by pressing the `.sheet-llm-btn`. This prevents the placeholder box
   from appearing until the user requests analysis. The `.active` class
   (added by JS) makes the container visible. */
.fav-sheet .sheet-llm {
    /* Make the LLM container present in the DOM and visible by default.
       Visibility/animation is controlled via `.active`, `.collapsed` and
       `.content-collapsed` classes in `favorites.css`. Hiding the element
       entirely when not active prevents the title from remaining visible
       for user toggles, so ensure it's display:block here. */
    display: block;
}
.fav-sheet .sheet-llm.active {
    display: block;
}

.global-lookup-name{
  font-size: 0.6rem;
  font-weight: 600;
}

.global-lookup-price {
  font-size: 0.8rem;
  font-weight: 700;
}
.global-lookup-change {
  font-size: 0.8rem;
  font-weight: 700;
}