html {
  font-size: 16px;
  scroll-behavior: smooth;
  overscroll-behavior: none;
}
/* html.dynamic-font-embed {
  font-size: clamp(16px, 1.05vw, 18px);
} */

body {
    font-family: "Inter", sans-serif;
    background-color: #f8f9fa;
    /* All scrolling happens inside #chat-container / overlays; locking the body
       stops iOS from panning the page (and losing the header) when the
       on-screen keyboard opens. */
    overflow: hidden;
    overscroll-behavior: none;
}

.plotly-notifier {
    display: none !important;
}

/* 16px or iOS Safari zooms the page on focus. */
.form-control {
    font-size: 16px !important;
}
.fs-9 {
    font-size: 0.625rem !important;
}
.fs-10 {
    font-size: 0.625rem !important;
}
.fs-11 {
    font-size: 0.75rem !important;
}
.fs-12 {
    font-size: 0.75rem !important;
}
.fs-13 {
    font-size: 0.8rem !important;
}
.fs-14 {
    font-size: 0.875rem !important;
}

/* Table Export */
.table-export-wrapper {
    position: relative;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.table-scroll-container {
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    padding-bottom: 4px;
}
.table-scroll-container::-webkit-scrollbar {
    height: 4px;
}
.table-scroll-container::-webkit-scrollbar-track {
    background: rgba(var(--color-primary-rgb), 0.08);
    border-radius: 4px;
    margin: 0 4px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(var(--color-primary-rgb), 0.5);
    border-radius: 4px;
    transition: background 200ms ease;
}
.table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-primary-rgb), 0.8);
}
html[data-theme='dark'] .table-scroll-container::-webkit-scrollbar-track {
    background: rgba(var(--color-primary-rgb), 0.1);
}
html[data-theme='dark'] .table-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(var(--color-primary-rgb), 0.5);
}
html[data-theme='dark'] .table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-primary-rgb), 0.8);
}
.table-scroll-container table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: max-content !important;
    min-width: 100%;
}
.table-export-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    margin-top: 0.25rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(2,6,23,0.1);
    background: #fff;
    color: #475569;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.table-export-wrapper:hover .table-export-btn {
    opacity: 1;
}
.table-export-btn:hover {
    background: #f1f5f9;
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,162,197,0.15);
}
.table-export-btn:active {
    transform: scale(0.95);
}
.table-export-btn.exported {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}
html[data-theme='dark'] .table-export-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(148,163,184,0.3);
    color: #e2e8f0;
}
html[data-theme='dark'] .table-export-btn:hover {
    background: rgba(0,162,197,0.15);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,162,197,0.3);
}
html[data-theme='dark'] .table-export-btn.exported {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}

/* Light mode Table */
/* Light mode Table */
.bot-message-bubble table,
table {
    font-size: 0.8rem;
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
}
table thead {
    background: rgba(var(--color-primary-rgb), 0.75);
}
table th {
    font-weight: 600;
    color: #fff;
    padding: 0.55rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border: none;
}
table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
table tbody tr:last-child td {
    border-bottom: none;
}
table tbody tr:nth-child(odd) {
    background: #fff;
}
table tbody tr:nth-child(even) {
    background: #f8fafc;
}
table tbody tr:hover {
    background: rgba(0,162,197,0.05);
}
/* Dark mode Table */
html[data-theme='dark'] table {
    border-color: #334155;
}
html[data-theme='dark'] table thead {
    background: rgba(var(--color-primary-rgb), 0.75);
}
html[data-theme='dark'] table th {
    color: #fff;
}
html[data-theme='dark'] table td {
    color: #e2e8f0;
    border-bottom-color: #1e293b;
}
html[data-theme='dark'] table tbody tr:nth-child(odd) {
    background: #0f172a;
}
html[data-theme='dark'] table tbody tr:nth-child(even) {
    background: #1e293b;
}
html[data-theme='dark'] table tbody tr:hover {
    background: rgba(0,162,197,0.12);
}
#chat-window {
    /* --kb-inset: on-screen keyboard overlap, set by setupKeyboardViewportHandler()
       (index.js) on iOS, where the keyboard never shrinks the layout viewport.
       Android shrinks dvh itself via interactive-widget=resizes-content. */
    height: calc(100vh - var(--kb-inset, 0px));
    height: calc(100dvh - var(--kb-inset, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
}

#chat-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#chat-card.standalone {
    max-width: 60vw;
    max-height: 99vh;
    max-height: 99dvh;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 768px) {
    #chat-card {
        max-width: unset !important;
        max-height: unset !important;
    }
    /* Careful: this block sits ABOVE most base rules, so a single-class
       override added here loses on source order and does nothing. Put phone
       styles in the MOBILE section at the end of the file instead. */
    .hero-input-group .form-control.user-input::placeholder {
        color: #94a3b8;
    }
}
@media screen and (min-width: 1024px) {
    #chat-container {
        padding-inline: 10vw !important;
    }
    .input-box {
        margin-inline: 10vw !important;
    }
}

#chat-container {
    flex-grow: 1;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
}
#hero-input {
    max-height: 120px;
    overflow-y: auto !important;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    /* 24px + 0.5rem padding = the 40px min-height exactly, so one line is centred
       and the send button lines up (group is align-items: flex-end). */
    line-height: 1.5rem;
}
/* Hero overlay - initial screen */
.hero-overlay {
    position: absolute;
    inset: 56px 0 0 0; /* leave header space */
    display: flex;
    align-items: safe center;
    justify-content: center;
    overflow-y: auto;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease;
    z-index: 10;
}
.hero-overlay .hero-content { pointer-events: none; }
#chat-card.hero-active .hero-overlay {
    opacity: 1;
    pointer-events: auto;
}
#chat-card.hero-active .hero-overlay .hero-content {
    pointer-events: auto;
}
.hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 680px;
    width: 100%;
    /* Top padding keeps the icon clear of the header when the content grows
       past the viewport (e.g. a location badge is attached) and `safe center`
       falls back to top-alignment. */
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}
/* Hero icon with glow */
.hero-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
}
.hero-icon-glow {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    box-shadow: 0 0 8px 2px rgba(0,162,197,0.35);
    animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.15); opacity: 1; }
}
.hero-icon {
    /* width: 56px;
    height: 56px;
    border-radius: 50%; */
    width: 60px;
    height: 60px;
    position: relative;
    z-index: 1;
}
/* Hero heading */
.hero-heading {
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    margin-top: -0.75rem;
}
/* Hero description */
.hero-description {
    font-size: clamp(13px, 1.4vw, 15px);
    color: #64748b;
    max-width: 420px;
    line-height: 1.5;
}
/* Hero input wrapper - no longer absolute */
.hero-input-wrapper {
    width: min(600px, 92vw);
    display: flex;
    flex-direction: column;
}
.hero-input-group {
    width: 100%;
    align-items: flex-end;
    background: #ffffff;
    border-radius: 2rem;
    border: 1px solid rgba(2,6,23,0.1);
    padding: 0.25rem;
    box-shadow: 0 2px 8px rgba(2,6,23,0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.hero-input-group:focus-within {
    border-color: rgba(0,162,197,0.4);
    box-shadow: 0 2px 12px rgba(0,162,197,0.1);
    background: #fff;
}
/* Two columns on desktop. The single-column phone override lives in the MOBILE
   section at the end of this file, which must stay after this rule to win. */
.hero-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.25rem;
    width: min(600px, 92vw);
}
.hero-category-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid rgba(2,6,23,0.08);
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: #334155;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    text-align: left;
}
.hero-category-btn:hover {
    background: #f8fafc;
    border-color: rgba(0,162,197,0.3);
    box-shadow: 0 2px 8px rgba(0,162,197,0.08);
    transform: translateY(-1px);
}
.hero-category-btn:active {
    transform: translateY(0);
}
.hero-category-btn .category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    background: rgba(0,162,197,0.08);
    color: var(--color-primary);
    flex-shrink: 0;
}
/* Loading skeletons for the hero quick-actions (shown while /quick-actions loads) */
.hero-category-skeleton {
    pointer-events: none;
    cursor: default;
    transform: none !important;
    box-shadow: none;
}
.hero-category-skeleton .skeleton-block,
.hero-category-skeleton .skeleton-line {
    background: linear-gradient(90deg, rgba(2,6,23,0.06) 25%, rgba(2,6,23,0.12) 37%, rgba(2,6,23,0.06) 63%);
    background-size: 400% 100%;
    animation: heroSkeletonShimmer 1.4s ease infinite;
    border-radius: 0.4rem;
}
.hero-category-skeleton .skeleton-line {
    height: 0.7rem;
    flex: 1;
    max-width: 60%;
}
@keyframes heroSkeletonShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-category-skeleton .skeleton-block,
    .hero-category-skeleton .skeleton-line { animation: none; }
}
html[data-theme='dark'] .hero-category-skeleton .skeleton-block,
html[data-theme='dark'] .hero-category-skeleton .skeleton-line {
    background: linear-gradient(90deg, rgba(148,163,184,0.10) 25%, rgba(148,163,184,0.20) 37%, rgba(148,163,184,0.10) 63%);
    background-size: 400% 100%;
}
html.embed-false #hero-brand-title .brand-orbit { display: inline; }
.hero-input-group .form-control.user-input {
    background: transparent;
    border-radius: 1.5rem !important;
    resize: none; /* auto-resize via JS */
    overflow-y: auto;
    scrollbar-gutter: stable both-edges; /* keep scrollbar space inside */
    background-clip: padding-box;
    border: none !important;
    box-shadow: none !important;
    /* Fixed line box (1.5rem) + symmetric padding so a single line fills the
       40px min-height exactly and stays vertically centred. Without this the
       line box tracks the font, and a shorter placeholder line left a bottom
       gap that pushed the text up and knocked the send button off centre
       (.hero-input-group is align-items: flex-end). */
    line-height: 1.5rem;
    padding-block: 0.5rem;
}
.hero-input-group .form-control.user-input::placeholder {
    color: #94a3b8;
}
.hero-input-group .form-control.user-input:focus {
    background: transparent !important;
    box-shadow: none !important;
}
.hero-input-group .btn {
    border-radius: 50%;
    background: transparent;
    border: none;
}
.input-box {
    border-radius: 1.5rem;
    margin: 0rem 1rem 0.25rem 1rem;
    box-shadow: 0 -4px 8px 0px #0000000d;
}
.input-tip {
    text-align: center;
    font-size: 0.7rem;
    color: #475569;
    padding: 0 1rem;
    line-height: 1.3;
}
.input-tip-icon {
    display: inline-block;
    vertical-align: -0.14em;
    margin-right: 0.25rem;
    opacity: 0.75;
}
html[data-theme='dark'] .input-tip {
    color: #94a3b8;
}
#chat-card.hero-active .input-tip {
    display: none;
}
.bottom-input-group {
    align-items: flex-end !important;
}
/* Bottom dock mic + send: clean, borderless icons matching the hero dock (the
   default button border would draw a circle that overlaps the send disc). */
.bottom-input-group .dictate-btn,
.bottom-input-group .send-btn {
    border: none;
    background: transparent;
}
.bottom-input-group .dictate-btn { left: 0 !important; }
html[data-theme='dark'] .bottom-input-group .form-control.user-input {
    background-color: inherit;
}
/* When hero is active, keep footer hidden and center input */
#chat-card.hero-active .input-box { display: none; }
/* Hide header border on welcome/hero screen */
#chat-card.hero-active .card-header {
    border-bottom-color: transparent !important;
    box-shadow: none;
}

/* Theme toggle visible in embed=false mode */
html.embed-false #theme-toggle-container {
    display: flex !important;
}

.bottom-credit {
    position: absolute;
    bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    white-space: pre;
}
.logo-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 1rem;
}
.powered-by {
    position: absolute;
    bottom: -16px;
    left: 0;
    white-space: nowrap;
}
.brand-logo { height: 30px; vertical-align: middle; }
.big-logo { height: 40px; }
html.embed-false .brand-orbit { display: inline; }
.hidden-copy-session-id-btn {
    position: absolute;
    width: 23px;
    height: 100%;
    cursor: pointer;
}
.welcome-text {
    white-space: pre-line;
    span {
        font-weight: bold;
    }
}
/* Custom scrollbar*/
::-webkit-scrollbar {
    width: 6px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
}

.map-container .leaflet-control-attribution {
    font-size: 0.625rem;
    background: rgba(255,255,255,0.72);
}

html[data-theme='dark'] .map-container .leaflet-control-attribution {
    background: rgba(15,23,42,0.72);
    color: #cbd5e1;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Hide new session button when on welcome/hero screen */
#chat-card.hero-active #new-chat-btn {
    display: none !important;
}
#chat-card.hero-active #new-chat-btn-2 {
    display: none !important;
}


.blinking-cursor {
    display: inline-block;
    width: 8px;
    height: 1.2rem;
    background-color: #333;
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    from,
    to {
        background-color: transparent;
    }

    50% {
        background-color: #333;
    }
}

.avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

.user-avatar {
    background-color: #63c5e5;
    color: #fff;
    margin-bottom: 4px;
}

.bot-message-bubble {
    background-color: #f8fafc;
    border: 1px solid transparent;
    border-radius: 1rem;
    border-top-left-radius: 0.25rem;
    max-width: 85%;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(2,6,23,0.04);
    background-image: linear-gradient(#f8fafc, #f8fafc), linear-gradient(135deg, rgba(0,162,197,0.3), rgba(34,174,86,0.3), rgba(13,110,253,0.3));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.user-message-bubble {
    background: linear-gradient(135deg, #00b4d8 0%, #00a2c5 40%, #0090b0 100%);
    color: white;
    border-radius: 1.25rem;
    border-bottom-right-radius: 0.3rem;
    max-width: 85%;
    box-shadow: 0 4px 14px rgba(0,162,197,0.25), 0 1px 3px rgba(0,0,0,0.08);
}

/* Location chip inside user message bubble */
.user-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    padding: 0.2rem 0.65rem 0.2rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}
.user-location-chip-icon {
    font-size: 0.8rem;
    line-height: 1;
}
.user-location-chip-place {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
}
html[data-theme='dark'] .user-location-chip {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.28);
}

/* When a chart is present, force the bot bubble to use full available width */
.bot-message-bubble:has(.chart-wrapper) {
    width: 85%;
}

.chart-wrapper {
    min-width: 300px;
    width: 100%;
}

/* Give Plotly a stable box to size into. A min-height keeps the plot area
   readable even when automargin expands the bottom margin to fit long,
   rotated x-axis labels and the axis title. */
.sage-chart {
    width: 100%;
    min-height: 420px;
}

.chart-html-title {
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 8px 12px 4px;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    color: #495057;
}

html[data-theme='dark'] .chart-html-title {
    color: #e9ecef;
}

.bot-message-bubble>*:last-child,
.user-message-bubble>*:last-child {
    margin-bottom: 0;
}

.bot-message-bubble p,
.user-message-bubble p {
    margin: 0;
}

/* Soften headings inside bot messages */
.bot-message-bubble h1,
.bot-message-bubble h2,
.bot-message-bubble h3,
.bot-message-bubble h4,
.bot-message-bubble h5,
.bot-message-bubble h6 {
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.bot-message-bubble h1 { font-size: 1.35rem; }
.bot-message-bubble h2 { font-size: 1.2rem; }
.bot-message-bubble h3 { font-size: 1.1rem; }
.bot-message-bubble h4,
.bot-message-bubble h5,
.bot-message-bubble h6 { font-size: 0.95rem; }
.bot-message-bubble h1 strong,
.bot-message-bubble h2 strong,
.bot-message-bubble h3 strong,
.bot-message-bubble h4 strong,
.bot-message-bubble h5 strong,
.bot-message-bubble h6 strong {
    font-weight: 700;
}
.bot-message-bubble strong {
    font-weight: 600;
}

/* Styles for rendered markdown */
.bot-message-bubble ul,
.bot-message-bubble ol {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Login brand title toggles */
html.embed-false #login-brand-title .brand-orbit { display: inline; }

.bot-message-bubble ul {
    list-style-type: disc;
}

.bot-message-bubble ol {
    list-style-type: decimal;
}

.bot-message-bubble a {
    color: var(--color-quaternary);
    text-decoration: underline;
}

.bot-message-bubble pre {
    position: relative;
    background-color: #212529;
    color: #f8f9fa;
    padding: 1.5rem 1rem 1rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
}

.bot-message-bubble code {
    color: var(--color-tertiary);
    background-color: #f8f9fa;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: monospace;
}

.bot-message-bubble pre code {
    color: inherit;
    background-color: transparent;
    padding: 0;
}

.copy-code-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: #495057;
    color: #f8f9fa;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 0.2s;
}

.copy-code-btn:hover {
    background-color: #6c757d;
}
.bot-message-bubble.aborted {
    font-style: italic;
}
/* Hover-only copy button under each message bubble */
.chat-message { position: relative; }
/* Invisible hover zone that bridges the bubble to the buttons below it,
   so moving the mouse from the bubble onto / between the buttons keeps them visible */
.chat-message::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 24px;
    pointer-events: auto;
    z-index: 1;
}
.chat-message .message-copy-btn {
    position: absolute;
    z-index: 2; /* Above the hover zone */
    bottom: -16px; /* sit just below bubble */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    opacity: 0;
    pointer-events: none; /* only active on hover of parent */
    transition: opacity 120ms ease;
}
.chat-message .message-copy-btn img { width: 16px; height: 16px; display: block; }
.chat-message:hover .message-copy-btn { opacity: 1; pointer-events: auto; }
/* Align under respective side */
.chat-message.from-bot .message-copy-btn { left: 58px; }
.chat-message.from-user .message-copy-btn { right: 44px; }

/* Like / dislike feedback buttons — mirror copy button behavior */
.chat-message .message-feedback-btn {
    position: absolute;
    bottom: -16px; /* sit just below bubble */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    opacity: 0;
    pointer-events: none; /* only active on hover of parent */
    transition: opacity 120ms ease, transform 120ms ease, color 200ms ease;
    border-radius: 50%;
    z-index: 2;
}
.chat-message .message-feedback-btn img {
    width: 16px;
    height: 16px;
    display: block;
    transition: transform 150ms ease;
}
.chat-message:hover .message-feedback-btn { opacity: 1; pointer-events: auto; }
/* Position like/dislike to the right of the copy button (copy at 58px) */
.chat-message.from-bot .message-feedback-btn.like-btn { left: 84px; }
.chat-message.from-bot .message-feedback-btn.dislike-btn { left: 110px; }
/* Hover / active / submitted effects */
.message-feedback-btn:hover { transform: translateY(-1px) scale(1.2); }
.message-feedback-btn:hover img { transform: scale(1.2); }
.message-feedback-btn.feedback-submitted img { transform: scale(1.1); }
.message-feedback-btn:active { transform: translateY(0) scale(0.95); }
@keyframes feedbackPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Ensure bubbles have extra bottom spacing to avoid overlap */
.bot-message-bubble, .user-message-bubble { margin-bottom: 6px; }
.chat-message {
    margin-bottom: 0.75rem;
}
.user-input {
    /* background-color: #e9ecef; */
    box-shadow: none;
    border-radius: 2rem !important;
    resize: none;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    background-clip: padding-box;
    min-height: 40px !important;
}
.user-input-bottom {
    padding-top: 0.5rem !important;
    /* Transparent while empty so the frosted glass shows through; a solid
       backing appears only once text is entered, keeping typing readable. */
    background-color: transparent !important;
    border-radius: 0.9rem;
    transition: background-color 160ms ease;
}
.user-input-bottom:not(:placeholder-shown) {
    background-color: #ffffff !important;
}
html[data-theme='dark'] .user-input-bottom:not(:placeholder-shown) {
    background-color: #202024 !important;
}
.send-btn {
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 160ms ease, transform 120ms ease;
}
.send-btn:hover {
    background: rgba(0,162,197,0.1);
    transform: scale(1.05);
}
.stop-btn {
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f1f5f9;
    border: 1px solid rgba(2,6,23,0.1);
    transition: background 160ms ease, transform 120ms ease;
    margin-left: 2px !important;
}
.stop-btn img {
    width: 18px;
    height: 18px;
}
.stop-btn:hover {
    background: #e2e8f0;
    transform: scale(1.05);
}
.stop-btn:hover img {
    opacity: 1;
}
html[data-theme='dark'] .stop-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    filter: none;
}
html[data-theme='dark'] .stop-btn img {
    filter: invert(1);
}
html[data-theme='dark'] .stop-btn:hover {
    background: rgba(255,255,255,0.14);
}
.form-control:focus {
    box-shadow: 0 0 0 1px rgba(13, 110, 253, .25) !important;
}
.user-input-bottom.form-control:focus {
    box-shadow: none !important;
}

/* Dictation (speech input) */
.dictate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: 3rem !important;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
    position: relative;
    left: 0.5rem !important;
}
.dictate-btn:hover { background: rgba(0,162,197,0.08); }
.dictate-btn.recording { color: #dc3545; }
html[data-theme='dark'] .dictate-btn { color: var(--color-primary); }
html[data-theme='dark'] .dictate-btn:hover { background: rgba(255,255,255,0.08); }
html[data-theme='dark'] .dictate-btn.recording { color: #f87171; }

/* ---- Composer send/mic revamp (ported from orbit-ai-b2c) ----
   The send button stays quiet (greyed) until the composer has text, then it
   fills with the brand colour and gently pops — one clear primary action.
   Applies to both composers (hero + bottom) since both carry .input-group. */
.send-btn .send-icon { width: 20px; height: 20px; display: block; }
/* Mic + send are identical 40px circles (matching the plus button) so they're
   the same size and their bottoms line up. */
.dictate-btn, .send-btn, .stop-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    padding: 0 !important;
    border-radius: 50% !important;
    flex: 0 0 auto;
}
.dictate-btn svg { width: 24px; height: 24px; }
/* Send is a filled disc in both states (an up-arrow ↑): quiet = soft grey disc,
   active = solid brand-primary disc with a white arrow. Colour states via
   background/colour (not opacity) so the dictation show/hide opacity rules
   don't out-specify them. */
.input-group:not(.has-text) .send-btn {
    background: rgba(2,6,23,0.07);
    color: var(--color-muted, #94a3b8);
}
html[data-theme='dark'] .input-group:not(.has-text) .send-btn {
    background: rgba(255,255,255,0.10);
}
.input-group.has-text .send-btn {
    background: var(--color-primary, #00a2c5) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -5px rgba(0,162,197,0.6);
}
.input-group.has-text .send-btn:hover { transform: scale(1.05); }
/* Space the trailing action buttons so the mic and send never crowd or overlap. */
.dictate-btn { left: 0 !important; }
.input-group .dictate-btn { margin-right: 6px; }
@media (prefers-reduced-motion: reduce) {
    .input-group.has-text .send-btn:hover { transform: none; }
}

.dictation-overlay-inline {
    position: absolute;
    right: 0;
    bottom: 100%;
    transform: translateY(-0.5rem);
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    padding: .5rem .75rem;
    border-radius: .75rem;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.15));
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 260px;
    z-index: 2000;
    animation: scaleIn 160ms ease;
}
html[data-theme='dark'] .dictation-overlay-inline { background: #0f172a; }
.dictation-waveform {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 28px;
}
.dictation-waveform .bar {
    flex: 1 0 0;
    background: linear-gradient(180deg, var(--color-primary), var(--color-quaternary));
    width: 4px;
    border-radius: 2px;
    animation: wf 600ms ease-in-out infinite;
    transform-origin: bottom;
}
.dictation-waveform .bar:nth-child(2) { animation-delay: 120ms; }
.dictation-waveform .bar:nth-child(3) { animation-delay: 240ms; }
.dictation-waveform .bar:nth-child(4) { animation-delay: 360ms; }
.dictation-waveform .bar:nth-child(5) { animation-delay: 480ms; }
@keyframes wf { 0%,100% { height: 4px; } 50% { height: 100%; } }
.dictation-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.dictation-actions button {
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    background: transparent;
    padding: .25rem .5rem;
    border-radius: .5rem;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
}
.dictation-actions button.confirm { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.dictation-actions button.confirm:hover { background: #008aa7; }
.dictation-actions button.cancel:hover { background: rgba(0,0,0,0.05); }
html[data-theme='dark'] .dictation-actions button.cancel:hover { background: rgba(255,255,255,0.08); }
html[data-theme='dark'] .dictation-actions button { color: var(--color-quaternary); border-color: var(--color-border); }
html[data-theme='dark'] .dictation-actions button.confirm { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* === Inline Dictation Redesigned (waveform inside input area) === */
.dictation-inline {
    position: absolute;
    right: .5rem;
    bottom: .35rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    z-index: 30;
    pointer-events: none;
}
.hero-input-group.dictating textarea::placeholder {
  line-height: 0; /* reset any browser weirdness for placeholder */
}

.dictation-inline .dictation-bars, .dictation-inline .dictation-dots { display:flex; align-items:flex-end; gap:3px; height:28px; width:120px; pointer-events:none; }
.dictation-inline .dictation-bars .bar { width:6px; background:linear-gradient(180deg, var(--color-primary), var(--color-quaternary)); border-radius:3px; height:6px; transition:height 90ms ease; }
html[data-theme='dark'] .dictation-inline .dictation-bars .bar { background:linear-gradient(180deg, var(--color-quaternary), var(--color-primary)); }
.dictation-inline .dictation-dots span { width:6px; height:6px; background:var(--color-primary); border-radius:50%; opacity:.35; animation:dots-blink 1.2s ease-in-out infinite; }
.dictation-inline .dictation-dots span:nth-child(2){ animation-delay:.2s; }
.dictation-inline .dictation-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes dots-blink { 0%,100%{opacity:.2; transform:translateY(0);} 50%{opacity:.9; transform:translateY(-4px);} }
.dictation-inline .dictation-ctrls { display:flex; gap:.4rem; pointer-events:auto; }
.dictation-inline .dictation-ctrls button { width:32px; height:32px; border-radius:50%; border:1px solid var(--color-border, rgba(0,0,0,0.15)); display:inline-flex; align-items:center; justify-content:center; background:var(--color-card,#fff); color:var(--color-primary); cursor:pointer; font-size:16px; line-height:1; transition:background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }
html[data-theme='dark'] .dictation-inline .dictation-ctrls button { background:#0f172a; color:var(--color-quaternary); }
.dictation-inline .dictation-ctrls button:hover { background:var(--color-primary); color:#fff; }
html[data-theme='dark'] .dictation-inline .dictation-ctrls button:hover { background:var(--color-primary); color:#fff; }
.dictation-inline .dictation-ctrls button.confirm { background:var(--color-primary); color:#fff; }
.dictation-inline .dictation-ctrls button.confirm:hover { filter:brightness(.92); }
.dictation-inline .dictation-ctrls button.cancel:hover { background:#dc3545; color:#fff; }
html[data-theme='dark'] .dictation-inline .dictation-ctrls button.cancel:hover { background:#ef4444; }
/* .input-group.dictating textarea.user-input { padding-right:170px; }
@media (max-width:640px){ .input-group.dictating textarea.user-input { padding-right:140px; } } */

/* Hide mic & send buttons during active dictation */
.input-group.dictating #mic-btn,
.input-group.dictating #send-btn,
.input-group.dictating #hero-mic-btn,
.input-group.dictating #hero-send-btn { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 120ms ease; }
.input-group:not(.dictating) #mic-btn,
.input-group:not(.dictating) #send-btn,
.input-group:not(.dictating) #hero-mic-btn,
.input-group:not(.dictating) #hero-send-btn { opacity:1; visibility:visible; }


.orbitai-icon-border {
    position: relative;
    top: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 41px;
}
.orbitai-icon-border.emdeded {
    width: 42px;
}
/* Match the original avatar icon footprint (~23px), not the full slot height */
.orbitai-icon-border img {
    width: 24px;
    height: 24px;
    display: block;
}

.orbitai-icon-border-arc {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    padding: 4px;
    background: conic-gradient(from 135deg,
        var(--color-primary),
        var(--color-secondary),
        var(--color-quaternary),
        var(--color-primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(5px);
    animation: orbitai-pulse-glow 1.2s ease-in-out infinite;
}
@keyframes orbitai-pulse-glow {
    0%, 100% { transform: scale(0.95); opacity: 0.22; }
    50% { transform: scale(1.05); opacity: 0.5; }
}

/* Popup notification for session ID copy */
.popup-notification {
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 9999;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.5s;
}
.popup-notification.error {
    background: #dc3545;
}

/* Animated rotating gradient border for thinking message (Gemini-style) */
@property --shimmer-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
}
.bot-message-bubble.shimmer-background {
    position: relative;
    overflow: visible;
    animation: borderRotate 1.5s infinite linear;
}
/* Soft blurred comet glow that orbits the bubble (Gemini-style) */
.bot-message-bubble.shimmer-background::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: inherit;
    padding: 4px;
    background: conic-gradient(from var(--shimmer-angle),
        color-mix(in srgb, var(--color-primary) 12%, transparent) 0deg,
        color-mix(in srgb, var(--color-secondary) 12%, transparent) 110deg,
        color-mix(in srgb, var(--color-quaternary) 12%, transparent) 200deg,
        var(--color-primary) 280deg,
        var(--color-secondary) 320deg,
        var(--color-quaternary) 352deg,
        color-mix(in srgb, var(--color-primary) 12%, transparent) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: blur(6px);
    opacity: 0.75;
    pointer-events: none;
}
/* Thinking/status text styling */
.shimmer-background .status-text {
    color: #4b5563 !important;
    font-size: 0.85rem;
}

@keyframes borderRotate {
    to {
        --shimmer-angle: 360deg;
    }
}

/* Sessions history overlay - left drawer */
.sessions-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 88%;
    max-width: 500px;
    background: #fff;
    border-right: 1px solid rgba(2,6,23,0.06);
    box-shadow: 4px 0 20px rgba(2,6,23,0.08);
    transform: translateX(-100%);
    transition: transform 280ms ease;
    z-index: 30;
}
.sessions-overlay.open {
    transform: translateX(0);
}

/* Backdrop behind sessions overlay */
.sessions-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, 0.25); /* slate-900 @ 45% */
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 25; /* above header (20), below overlay (30) */
}
.sessions-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.sessions-overlay .overlay-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.5rem;
}
.sessions-overlay .overlay-header {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.98);
    z-index: 1;
    padding: 0.5rem 0.85rem 0.4rem;
}
.sessions-search-toggle,
#close-sessions-overlay,
.sessions-overlay-btn {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 0.5rem;
    color: #475569;
    border: 1px solid rgba(2,6,23,0.12);
    background: #fff;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.sessions-search-toggle svg,
.sessions-overlay-btn svg { width: 16px; height: 16px; }
.sessions-search-toggle:hover, .sessions-search-toggle:focus,
#close-sessions-overlay:hover, #close-sessions-overlay:focus,
.sessions-overlay-btn:hover, .sessions-overlay-btn:focus {
    background: #f1f5f9;
    border-color: rgba(2,6,23,0.2);
    color: #0f172a;
}
html[data-theme='dark'] .sessions-search-toggle,
html[data-theme='dark'] #close-sessions-overlay,
html[data-theme='dark'] .sessions-overlay-btn {
    color: #94a3b8;
    border-color: rgba(148,163,184,0.2);
    background: rgba(255,255,255,0.04);
}
html[data-theme='dark'] .sessions-search-toggle:hover,
html[data-theme='dark'] .sessions-search-toggle:focus,
html[data-theme='dark'] #close-sessions-overlay:hover,
html[data-theme='dark'] #close-sessions-overlay:focus,
html[data-theme='dark'] .sessions-overlay-btn:hover,
html[data-theme='dark'] .sessions-overlay-btn:focus {
    background: rgba(255,255,255,0.08);
    border-color: rgba(148,163,184,0.35);
    color: #e5e7eb;
}
.sessions-search-bar { overflow: hidden; transition: max-height 260ms ease, opacity 200ms ease; max-height:0; opacity:0; }
.sessions-search-bar.open { max-height:120px; opacity:1; }
.sessions-search-bar .search-inner { display:flex; align-items:center; }
.sessions-search-input { padding-right:2rem; background:#f8fafc; }
html[data-theme='dark'] .sessions-search-input { background:#1e293b; color:#f1f5f9; border-color:#334155; }
html[data-theme='dark'] .sessions-search-input:focus { background:#1e293b; color:#fff; }
html[data-theme='dark'] .sessions-search-input::placeholder { color:#64748b; opacity:1; }
/* Empty sessions message styling */
.empty-sessions-msg { color:#475569; }
html[data-theme='dark'] .empty-sessions-msg { color:#cbd5e1; }
.sessions-search-clear { position:absolute; right:.25rem; top:50%; transform:translateY(-50%); color:#64748b; text-decoration:none; font-size:1.1rem; padding:.125rem .25rem; }
.sessions-search-clear:hover { color:#0f172a; }
/* spinner removed */
html[data-theme='dark'] .sessions-search-clear { color:#94a3b8; }
html[data-theme='dark'] .sessions-search-clear:hover { color:#fff; }
/* spinner removed */
.sessions-overlay .overlay-list {
    overflow-y: auto;
    font-size: small;
    height: calc(100% - 48px);
}
.sessions-overlay .list-loading {
    padding: 0.5rem;
    overflow: unset;
}
.sessions-overlay .list-group-item {
    cursor: pointer;
    border: none;
    border-radius: 0.5rem !important;
    padding: 0.65rem 0.75rem;
    margin: 0.2rem 0.5rem;
    transition: background 150ms ease;
}
.sessions-overlay .list-group-item .session-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.sessions-overlay .list-group-item.active {
    background-color: rgba(0,162,197,0.08);
    border: none !important;
    color: #0f172a;
    border-left: 3px solid var(--color-primary) !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
}
.sessions-overlay .list-group-item:not(.active):hover {
    background: rgba(2,6,23,0.03);
}
/* small utility area for actions */
.session-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
/* Session actions: hover-only kebab and dropdown menu */
.list-group-item .session-actions {
    position: relative;
    display: flex;
    align-items: center;
}

.list-group-item .session-actions .kebab-btn {
    background: transparent;
    border: none;
    line-height: 1;
    font-size: 18px;
    padding: 4px 6px;
    border-radius: 6px;
    color: #6c757d; /* muted */
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.list-group-item:hover .session-actions .kebab-btn,
.list-group-item .session-actions.open .kebab-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Keep kebab visible for the selected (active) session */
.list-group-item.active .session-actions .kebab-btn {
    opacity: 1;
    pointer-events: auto;
    color: var(--color-primary);
}

.list-group-item.active .session-actions .kebab-btn:hover {
    background: rgba(0,162,197,0.1);
    color: var(--color-primary);
}

.list-group-item .session-actions .kebab-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #343a40;
}

.list-group-item .session-actions .session-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 6px 0;
    display: none;
    z-index: 5;
}

.list-group-item .session-actions.open .session-menu {
    display: block;
}

.list-group-item .session-actions .session-menu-item {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 12px;
    font-size: 14px;
    color: #212529;
    cursor: pointer;
}

.list-group-item .session-actions .session-menu-item:hover {
    background: rgba(0,0,0,0.05);
}
.list-group-item .session-actions .session-menu-item.text-danger { color: #dc3545; }
.list-group-item .session-actions .session-menu-item.text-danger:hover { background: rgba(220,53,69,0.08); }
.session-actions .btn-icon {
    border: none;
    background: transparent;
    color: #64748b;
    padding: 0.125rem 0.25rem;
}
.session-actions .btn-icon:hover {
    color: #0f172a;
}

/* Simple spinner */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* "Preparing PDF…" overlay shown while maps are scrolled into view before print.
   Covers the chat so the scroll-sweep jank is hidden; never printed (see @media print). */
.print-prep-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--bs-body-bg, #fff);
    color: #1f2937;
    font-size: 0.95rem;
    font-weight: 500;
}
/* Full-viewport variant for the iOS autoprint window. */
.print-prep-overlay--full {
    position: fixed;
}
.print-prep-overlay .spinner { width: 22px; height: 22px; }
html[data-theme='dark'] .print-prep-overlay {
    background: #0f172a;
    color: #e5e7eb;
}

/* Rename modal */
.rename-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Improve separation from background */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.rename-modal-overlay.open {
    display: flex;
}
.rename-modal-dialog {
    background: #fff;
    width: min(92vw, 420px);
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    /* Subtle boundary in light mode */
    border: 1px solid var(--color-border);
}

/* Login overlay */
.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.login-card {
    position: relative;
    overflow: hidden;
    width: min(92vw, 400px);
    min-height: 380px;
    border-radius: 0.75rem;
    padding: 1.25rem 1.25rem 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.88));
    border: 1px solid rgba(13,110,253,0.08);
    box-shadow: 0 18px 40px rgba(2,6,23,0.18);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
    display: flex;
    flex-direction: column;
    justify-content: center; /* center content vertically */
    align-items: stretch;
    gap: 1rem; /* consistent spacing between title, error, and form */
}
.login-card::before {
    /* Brand accent bar at the top */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-quaternary), var(--color-secondary));
}
.login-card::after {
    /* Soft corner glow */
    content: "";
    position: absolute;
    width: 260px; height: 260px;
    right: -140px; bottom: -140px;
    background: radial-gradient(closest-side, rgba(0,162,197,0.22), transparent 70%);
    filter: blur(10px);
    pointer-events: none;
}
/* Subtle heading tint */
.login-card h5, .login-card .card-title {
    color: var(--color-quaternary);
    font-weight: 600;
}
/* Inputs within the login card */
.login-card .form-control {
    background-color: #f8fafc;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0.5rem;
}
.login-card .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(0, 162, 197, .2) !important;
}
/* Primary action button inside login card */
.login-card #login-submit, .login-card .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 162, 197, 0.25);
}
.login-card #login-submit:hover, .login-card .btn-primary:hover {
    background-color: #008aa7;
    border-color: #008aa7;
}
.login-card #login-submit:focus-visible, .login-card .btn-primary:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(0, 162, 197, .35) !important;
}
/* Error text */
#login-error { color: var(--color-tertiary); font-weight: 500; min-height: 1.125rem; }
/* Ensure error appears above the login button */
.login-card .d-flex.justify-content-between.align-items-center {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.5rem;
}
/* Layout and spacing inside login card */
.login-card h5, .login-card .card-title { margin-bottom: 0.5rem; }
.login-card form {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.75rem;
}
@media (min-width: 480px) {
    .login-card form { gap: 1rem; }
}
.login-card label { margin-bottom: 0.25rem; color: #334155; font-weight: 500; }
.login-card .form-group,
.login-card .input-group,
.login-card .form-floating,
.login-card .mb-3 { margin-bottom: 0 !important; }
.login-card .form-control { width: 100%; }
.login-card .btn { width: 100%; min-height: 44px; border-radius: 0.5rem; }
.login-card .btn-row { display: flex; align-items: center; gap: 0.5rem; }
.login-card .btn-row .btn { flex: 1 0 0; }
.login-card #login-error { margin-top: 0.25rem; }
/* Custom button styles */
.custom-primary-btn {
    background-color: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 0.375rem;
}
.custom-primary-btn:hover {
    background-color: #0094b6;
    border-color: #0094b6;
    color: #fff;
}
.custom-primary-btn:focus {
    outline: none;
    box-shadow: 0 0 0 .125rem rgba(0, 162, 197, .25);
}
.custom-primary-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
/* Hero brand title */
#hero-brand-title {
    font-size: 40px; /* larger */
    font-weight: 600;
    background-image: linear-gradient(to right, #69d9f0 0%, #6be6b3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

/* Hero content alignment */
.hero-overlay .hero-content {
    transform: none;
    height: auto;
}

/* Login brand title (smaller to fit card) */
#login-brand-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    background-image: linear-gradient(to right, #69d9f0 0%, #6be6b3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Keep Orbit word in gradient, color AI #00a2c5 in hero/login when non-embed */
html.embed-false #hero-brand-title .brand-orbit .orbit-word,
html.embed-false #login-brand-title .brand-orbit .orbit-word {
    background-image: linear-gradient(to right, #69d9f0 0%, #6be6b3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html.embed-false #hero-brand-title .brand-orbit .orbit-ai,
html.embed-false #login-brand-title .brand-orbit .orbit-ai {
    color: #0d9dfd;
    -webkit-background-clip: initial;
    background-clip: initial;
    font-weight: lighter;
}


/* Delete modal (mirrors rename modal) */
.delete-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Improve separation from background */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.delete-modal-overlay.open { display: flex; }
.delete-modal-dialog {
    /* Subtle boundary in light mode */
    border: 1px solid var(--color-border);
    background: #fff;
    width: min(92vw, 420px);
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Auth Token modal (mirrors rename and delete modals) */
.authtoken-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Improve separation from background */
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.authtoken-modal-overlay.open { display: flex; }
.authtoken-modal-dialog {
    /* Subtle boundary in light mode */
    border: 1px solid var(--color-border);
    background: #fff;
    width: min(92vw, 420px);
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* ==========================
     UI Makeover: Chat Enhancements
     ========================== */
.bot-message-bubble:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm);
}
.user-message-bubble:hover {
    transform: none !important;
    box-shadow: 0 6px 20px rgba(0,162,197,0.3), 0 2px 6px rgba(0,0,0,0.1);
}

/* 2) Sessions list spacing between items */
.sessions-overlay .overlay-list .list-group-item {
    margin: 2px 0;
}

/* 3) Ensure session action menu renders above neighbors */
.list-group-item .session-actions .session-menu {
    z-index: 1002; /* above list items and sticky header */
}
/* Elevate stacking when the actions menu is open */
.list-group-item .session-actions.open {
    position: relative;
    z-index: 1003;
}

/* 3b) Prevent hovered items from creating a higher stacking context than open menus */
.sessions-overlay .list-group-item {
    position: relative; /* enable z-index stacking */
}
/* Remove transform on hover to avoid new stacking contexts overshadowing menus */
.sessions-overlay .list-group-item:not(.active):hover {
    transform: none !important;
}

/* 4) Add breathing room between overlay header and list */
.sessions-overlay .overlay-header {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(2,6,23,0.06);
}
.sessions-overlay .overlay-list {
    margin-top: 0.25rem;
}

/* === Design System Variables === */
:root {
    --color-primary: #00a2c5;
    --color-primary-rgb: 0,162,197;
    /* --color-primary-new: #69d9f0; */
    --color-secondary: #22ae56;
    /* --color-secondary-new: #6be6b3; */
    --color-tertiary: #d63384;
    --color-quaternary: #0d6efd;
    /* --color-quaternary-new: #4b98ee; */

    --color-bg: #f8f9fa;
    --color-card: #ffffff;
    --color-muted: #64748b;
    --color-border: rgba(2, 6, 23, 0.08);
    --shadow-sm: 0 4px 10px rgba(2, 6, 23, 0.06);
    --shadow-md: 0 10px 25px rgba(2, 6, 23, 0.12);
    --shadow-lg: 0 18px 40px rgba(2, 6, 23, 0.18);
    --radius-sm: .375rem;
    --radius-md: .75rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999px;
}

/* Global background with subtle radial washes */
body {
    background:
        radial-gradient(1200px 800px at 10% -10%, rgba(13,110,253,0.06), transparent 60%),
        radial-gradient(1000px 600px at 110% 10%, rgba(0,162,197,0.08), transparent 60%),
        var(--color-bg);
    color: #0f172a;
}

/* Chat card: soft glassy panel */
#chat-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.94));
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    contain: layout style paint;
}

/* Hero overlay: gentle entrance handled by opacity transition */

/* Input dock: floating, airy */
.input-box {
    position: relative;
    overflow: visible;
    box-shadow: 0 -2px 12px 0px rgba(0,0,0,0.06);
    background: #ffffff;
    border: 1px solid rgba(2,6,23,0.08);
}

/* Inputs: crisp borders + responsive focus ring */
.form-control.user-input {
    border: 1px solid rgba(2,6,23,0.06);
    transition: box-shadow 160ms ease, border-color 160ms ease, height 160ms ease, background-color 160ms ease;
}
.hero-input-group .form-control.user-input { background: transparent; border: none; }
.hero-input-group .form-control.user-input:focus { background: transparent !important; box-shadow: none !important; border: none !important; }
.form-control:focus {
    box-shadow: 0 0 0 .16rem rgba(13, 110, 253, .20) !important;
    border-color: rgba(13,110,253,.35) !important;
}

/* Fancy brand gradients with a slow shimmer */
#hero-brand-title,
#login-brand-title {
    background-size: 200% auto;
    animation: gradientShift 8s ease infinite;
}

/* Message bubbles: depth + micro-interactions */
/* .bot-message-bubble,
.user-message-bubble { transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.bot-message-bubble { box-shadow: 0 2px 8px rgba(2,6,23,0.06); }
.user-message-bubble { box-shadow: 0 2px 10px rgba(0,162,197,0.22); }
.bot-message-bubble:hover,
.user-message-bubble:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } */

/* Chat message mount animations */
.chat-message.from-user {
    animation: slideUpFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-fill-mode: both;
}
.chat-message.from-user .user-message-bubble {
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-message.from-bot {
    animation: slideDownFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-fill-mode: both;
}
.chat-message.from-bot .bot-message-bubble {
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover controls polish */
.copy-code-btn { transition: background-color 0.2s, transform 120ms ease; }
.copy-code-btn:hover { transform: translateY(-1px); }
.chat-message .message-copy-btn { transition: opacity 120ms ease, transform 120ms ease; }
.chat-message .message-copy-btn:hover { transform: translateY(-1px) scale(1.02); }

/* Scrollbar: subtle gradient */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
}

/* Map/image controls */
.fullscreen-btn { transition: transform 140ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.fullscreen-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.fullscreen-btn:active { transform: translateY(0); }

/* Session drawer: smoother slide and glass effect */
.sessions-overlay {
    transition: transform 320ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 2px 0 18px rgba(0,0,0,0.08);
    backdrop-filter: blur(8px) saturate(1.02);
}
.sessions-overlay .list-group-item:not(.active):hover {
    transform: none;
}
.list-group-item .session-actions .kebab-btn { transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease; }
.list-group-item .session-actions .kebab-btn:active { transform: scale(0.98); }
.list-group-item .session-actions .session-menu { animation: scaleIn 160ms ease both; }

/* Active session request indicators */
.session-status { display:inline-flex; align-items:center; margin-left:6px; flex-shrink:0; }
/* Base dot — primary theme color, compact */
.session-active-dot { position:relative; display:inline-block; width:8px; height:8px; border-radius:50%; background: #00a2c5; }
/* Fetching phase: animated pulse */
.session-active-dot.fetching { background: #00a2c5; animation: pulseDotBg 1.2s ease-in-out infinite; }
/* Typing/rendering phase */
.session-active-dot.typing { background: #00a2c5; }
/* Done/unseen: subtle secondary */
.session-active-dot.done { background: #22ae56; }
/* Animated outer ring only for fetching */
.session-active-dot.fetching::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid #00a2c5; animation: pulseDot 1.2s ease-in-out infinite; }
@keyframes pulseDot { 0% { transform:scale(.7); opacity:.7;} 50% { transform:scale(1.15); opacity:.1;} 100% { transform:scale(.7); opacity:.7;} }
@keyframes pulseDotBg { 0%,100% { opacity:1;} 50% { opacity:.5;} }
/* Dark mode */
[data-bs-theme="dark"] .session-active-dot { background: #00a2c5; }
[data-bs-theme="dark"] .session-active-dot.done { background: #22ae56; }

/* Session Title Dropdown */
.session-title-container {
    /* `flex: 1` here stretches once the header groups span, dragging the buttons after it. */
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    margin: 0 0.25rem;
    max-width: 45vw;
}
.session-title-dropdown-wrapper {
    position: relative;
    max-width: 100%;
}
.session-title-btn {
    border-radius: 0.5rem;
    padding: 0.35rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #334155;
    font-size: 0.813rem;
    font-weight: 500;
    height: 32px;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    background: transparent;
}
.session-title-btn:hover {
    background: #f8fafc;
    border-color: rgba(0, 162, 197, 0.2);
    color: #1e293b;
}
.session-title-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 162, 197, 0.1);
    border-color: var(--color-primary);
}
.session-title-btn.active {
    border-color: var(--color-primary);
    background: rgba(0, 162, 197, 0.05);
}
.session-title-text {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.25rem;
    min-width: 0;
    line-height: 1.3;
}
.session-dropdown-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #64748b;
}
.session-title-btn.active .session-dropdown-arrow {
    transform: rotate(180deg);
}
.session-options-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(0.95);
    background: #fff;
    border: 1px solid rgba(2,6,23,0.08);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(2,6,23,0.15);
    min-width: 130px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
}
.session-options-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}
.session-options-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    color: #334155;
    font-size: 0.813rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    border-radius: 0.5rem;
}
.session-options-dropdown .dropdown-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.session-options-dropdown .dropdown-item svg {
    flex-shrink: 0;
    color: #64748b;
}
.session-options-dropdown .dropdown-item:hover svg {
    color: #334155;
}
#session-delete-option {
    color: #dc3545;
}
#session-delete-option svg {
    color: #dc3545;
}
#session-delete-option:hover {
    background: rgba(220,53,69,0.08);
    color: #dc3545;
}
#session-delete-option:hover svg {
    color: #dc3545;
}
/* Dark mode Session Title */
html[data-theme='dark'] .session-title-btn {
    color: #cbd5e1;
    background: transparent;
}
html[data-theme='dark'] .session-title-btn:hover {
    background: rgba(15,23,42,0.8);
    border-color: rgba(0, 162, 197, 0.3);
    color: #e5e7eb;
}
html[data-theme='dark'] .session-title-btn:focus {
    box-shadow: 0 0 0 3px rgba(0, 162, 197, 0.15);
    border-color: var(--color-primary);
}
html[data-theme='dark'] .session-title-btn.active {
    border-color: var(--color-primary);
    background: rgba(0, 162, 197, 0.1);
}
html[data-theme='dark'] .session-dropdown-arrow {
    color: #94a3b8;
}
html[data-theme='dark'] .session-options-dropdown {
    background: #1e293b;
    border-color: rgba(148,163,184,0.15);
    box-shadow: 0 10px 30px rgba(2,6,23,0.7);
}
html[data-theme='dark'] .session-options-dropdown .dropdown-item {
    color: #cbd5e1;
}
html[data-theme='dark'] .session-options-dropdown .dropdown-item:hover {
    background: rgba(30,41,59,0.6);
    color: #e5e7eb;
}
html[data-theme='dark'] .session-options-dropdown .dropdown-item svg {
    color: #94a3b8;
}
html[data-theme='dark'] .session-options-dropdown .dropdown-item:hover svg {
    color: #cbd5e1;
}
html[data-theme='dark'] #session-delete-option {
    color: #f87171;
}
html[data-theme='dark'] #session-delete-option svg {
    color: #f87171;
}
html[data-theme='dark'] #session-delete-option:hover {
    background: rgba(248,113,113,0.08);
    color: #f87171;
}
html[data-theme='dark'] #session-delete-option:hover svg {
    color: #f87171;
}

/* Interaction Blocking Overlay */
.interaction-blocking-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.interaction-blocking-overlay.active {
    display: flex;
}
.interaction-blocking-overlay .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    background: var(--color-card, #fff);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.interaction-blocking-overlay .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 162, 197, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.interaction-blocking-overlay .loading-text {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
html[data-theme='dark'] .interaction-blocking-overlay {
    background: rgba(15, 23, 42, 0.7);
}
html[data-theme='dark'] .interaction-blocking-overlay .loading-content {
    background: #1e293b;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
html[data-theme='dark'] .interaction-blocking-overlay .loading-text {
    color: #94a3b8;
}
html[data-theme='dark'] .interaction-blocking-overlay .loading-spinner {
    border-color: rgba(0, 162, 197, 0.15);
    border-top-color: var(--color-primary);
}

/* Modals and cards: scale-in */
.rename-modal-dialog,
.delete-modal-dialog,
.login-card { animation: scaleIn 200ms ease both; }

/* Success/error toasts */
.popup-notification {
    top: 12px;
    background: linear-gradient(90deg, var(--color-secondary), #16c172);
    box-shadow: var(--shadow-md);
    transition: opacity 300ms ease, transform 300ms ease;
    transform-origin: top center;
}
.popup-notification.error { background: linear-gradient(90deg, #dc3545, #ef476f); }

/* Keyframes */
@keyframes slideUpFadeIn {
    0% { opacity: 0; transform: translateY(50px) translateX(50px) scale(0.75); }
    100% { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
}
@keyframes slideDownFadeIn {
    0% { opacity: 0; transform: translateY(-50px) translateX(-50px) scale(0.75); }
    100% { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
}
@keyframes scaleIn { from { opacity: 0; transform: scale(0.98);} to { opacity: 1; transform: scale(1);} }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ==========================
     Dark Mode Toggle + Theme
     ========================== */
.theme-toggle-btn {
    color: #334155;
    border-radius: 999px;
    border: 1px solid rgba(2,6,23,0.08);
    background: #fff;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    box-shadow: 0 2px 8px rgba(2,6,23,0.08);
}
.theme-toggle-btn:hover { background: #f8fafc; }
.theme-toggle-btn .icon-sun { display: none; }
.theme-toggle-btn.is-dark .icon-moon { display: none; }
.theme-toggle-btn.is-dark .icon-sun { display: inline-flex; }

/* Light (default) variables already set above; Dark overrides below */
html[data-theme='dark'] {
    --color-bg: #0b1220;
    --color-card: #0f172a;
    --color-muted: #9aa4b2;
    --color-border: rgba(148,163,184,0.18);
    color-scheme: dark;
}

/* Theme reveal animation (directional, performant) */
:root { view-transition-name: root; }
@media (prefers-reduced-motion: no-preference) {
    /* Simple, smooth circular reveal only */
    html.theme-animating::view-transition-old(root) { animation: none; }
        html.theme-animating::view-transition-new(root) {
        will-change: clip-path;
        contain: paint;
            animation: theme-reveal 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
        clip-path: circle(0 at var(--vt-x, 100%) var(--vt-y, 0%));
    }
    /* To-dark only (data-theme is already the new value here): the shared curve
       front-loads the travel, which reads as a burst against a light page. */
    html[data-theme='dark'].theme-animating::view-transition-new(root) {
        animation-duration: 520ms;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes theme-reveal {
        to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 100%) var(--vt-y, 0%)); }
    }
}

/* Page background */
html[data-theme='dark'] body {
    background:
        radial-gradient(1200px 800px at 10% -10%, rgba(13,110,253,0.12), transparent 60%),
        radial-gradient(1000px 600px at 110% 10%, rgba(0,162,197,0.14), transparent 60%),
        var(--color-bg);
    color: #e5e7eb;
}

/* Chat card */
html[data-theme='dark'] #chat-card {
    background: linear-gradient(180deg, rgba(15,23,42,0.78), rgba(15,23,42,0.86));
    border-color: var(--color-border);
    box-shadow: 0 10px 30px rgba(2,6,23,0.5);
}

/* Header tweaks */
.card-header {
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid rgba(2,6,23,0.06) !important;
    padding: 0.5rem 0.75rem 0.85rem !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(2,6,23,0.06);
    overflow: visible;
    position: relative;
    z-index: 20;
}
.card-header .d-flex {
    gap: 0.6rem;
}
/* Fixed box, not padding: the two source SVGs differ in size. */
.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 0.4rem;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    background: transparent;
    color: #64748b;
    transition: background 150ms ease, color 150ms ease;
    text-decoration: none !important;
}
.header-icon-btn:hover {
    background: rgba(2,6,23,0.05);
    color: #334155;
}
html[data-theme='dark'] .header-icon-btn { color: #94a3b8; }
html[data-theme='dark'] .header-icon-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #e5e7eb;
}

/* Settings Toggle Button */
.settings-toggle-btn {
    color: #334155;
    border-radius: 999px;
    border: 1px solid rgba(2,6,23,0.08);
    background: #fff;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(2,6,23,0.08);
    transition: all 0.2s ease;
    margin-right: 0.5rem;
}
.settings-toggle-btn:hover {
    background: #f8fafc;
    transform: rotate(90deg);
}
.settings-toggle-btn:active {
    transform: rotate(180deg) scale(0.95);
}
.settings-toggle-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: rotate(90deg);
}

/* Settings Container */
.settings-container {
    position: relative;
}

/* Settings Dropdown */
.settings-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: -100%;
    background: #fff;
    border: 1px solid rgba(2,6,23,0.08);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(2,6,23,0.15);
    /* The phone block's max-width still keeps this inside a narrow embed. */
    min-width: 248px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    backdrop-filter: blur(8px);
}
.settings-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Settings Content */
.settings-content {
    padding: 0;
}
.settings-header {
    padding: 0.7rem;
}
.settings-header h6 {
    color: #1e293b;
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0;
}

.settings-body {
    padding: 0.4rem;
}
/* Setting Item */
.setting-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    justify-content: flex-start;
    padding: 0.45rem 0.3rem;
    border-radius: 0.4rem;
    /* Set here, not per row, or Bootstrap's .btn leaves each row its own size. */
    font-size: 0.8125rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.setting-item:hover {
    background: rgba(2,6,23,0.05);
    color: #0f172a;
}
/* Keyed on data-theme, not a JS class, so the icon can't disagree with the label. */
#m-theme-icon .icon-moon { display: inline-flex; }
#m-theme-icon .icon-sun { display: none; }
html[data-theme='dark'] #m-theme-icon .icon-moon { display: none; }
html[data-theme='dark'] #m-theme-icon .icon-sun { display: inline-flex; }

.setting-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#history-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    margin-right: 0.5rem;
    border-radius: 0.4rem;
    border: none;
    background: transparent;
    color: #64748b;
    transition: background 150ms ease, color 150ms ease;
}
#history-btn:hover {
    background: rgba(2,6,23,0.05);
    color: #334155;
}
#history-btn img {
    width: 28px;
    height: 28px;
}
html[data-theme='dark'] #history-btn {
    color: #94a3b8;
    background: transparent;
}
html[data-theme='dark'] #history-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #e5e7eb;
}
html[data-theme='dark'] .card-header { border-color: var(--color-border) !important; background: rgba(15,23,42,0.6); }
html[data-theme='dark'] .powered-by { color: var(--color-muted) !important; }
html[data-theme='dark'] .theme-toggle-btn { background: #0b1220; color: #cbd5e1; border-color: var(--color-border); box-shadow: 0 2px 10px rgba(2,6,23,0.6); }
html[data-theme='dark'] .theme-toggle-btn:hover { background: #0f172a; }
/* Dark mode Settings */
html[data-theme='dark'] .settings-toggle-btn {
    background: #0b1220;
    color: #cbd5e1;
    border-color: var(--color-border);
    box-shadow: 0 2px 10px rgba(2,6,23,0.6);
}
html[data-theme='dark'] .settings-toggle-btn:hover {
    background: #0f172a;
    transform: rotate(90deg);
}
html[data-theme='dark'] .settings-toggle-btn:active {
    background: #0f172a;
    transform: rotate(180deg) scale(0.95);
}
html[data-theme='dark'] .settings-toggle-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
html[data-theme='dark'] .settings-dropdown {
    background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(15,23,42,0.98));
    border-color: var(--color-border);
    box-shadow: 0 10px 30px rgba(2,6,23,0.7);
    backdrop-filter: blur(12px);
}
html[data-theme='dark'] .settings-header h6 {
    color: #e5e7eb;
}
html[data-theme='dark'] .setting-item:hover {
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}
html[data-theme='dark'] .setting-item {
    color: #cbd5e1;
}

/* Persona */
.persona-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.persona-avatar-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.settings-toggle-btn.has-persona {
    /* p-2 makes an odd oval; size the disc instead. */
    padding: 0 !important;
    width: 30px;
    height: 30px;
    background: rgba(0,162,197,0.10);
    border-color: transparent;
    box-shadow: none;
    color: #00a2c5;
}
.settings-toggle-btn.has-persona .persona-avatar-glyph svg {
    width: 17px;
    height: 17px;
}
/* !important: the dark-theme rotation rules out-specify these two classes. */
.settings-toggle-btn.has-persona:hover,
.settings-toggle-btn.has-persona:active,
.settings-toggle-btn.has-persona.active {
    transform: none !important;
}
.settings-toggle-btn.has-persona:hover { background: rgba(0,162,197,0.16); }
.settings-toggle-btn.has-persona.active {
    background: #00a2c5;
    color: #fff;
}
.settings-toggle-btn.has-persona.persona-neutral {
    background: rgba(2,6,23,0.05);
    color: #64748b;
}
.settings-toggle-btn.has-persona.persona-neutral:hover { background: rgba(2,6,23,0.08); }
.settings-toggle-btn.has-persona.persona-neutral.active {
    background: #64748b;
    color: #fff;
}

/* Hero only. */
.persona-name {
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    white-space: nowrap;
    /* Not the control; the button beside it is. */
    pointer-events: none;
    user-select: none;
}
.persona-user {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
/* No name from user-info: drop the line, don't leave a gap. */
.persona-user:empty { display: none; }
/* #046c85 not brand #00a2c5: the brighter teal is under 3:1 at this size. */
.persona-role {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.688rem;
    font-weight: 600;
    line-height: 1.15;
    color: #046c85;
}
.persona-name.persona-neutral .persona-role {
    color: #64748b;
    font-weight: 500;
}
/* #chat-card is what beats the base rule above. */
#chat-card.hero-active .persona-name {
    display: inline-flex;
}
/* Order sits on the disc, not the label: these share a container with the title. */
.settings-container {
    order: 1;
}
.persona-name {
    align-items: flex-end;
    text-align: right;
}
#chat-card.hero-active .settings-toggle-btn.has-persona {
    margin-left: 0.3rem;
    margin-right: 0;
}

/* They must be able to span before any auto margin has room to push into. */
.left-top-header-container,
.center-top-header-container {
    flex: 1 1 auto;
    min-width: 0;
}
/* Those groups shrink, so the brand has to opt out. */
#history-btn,
.logo-container {
    flex: 0 0 auto;
}
#chat-card.hero-active .center-top-header-container {
    justify-content: flex-end;
}
/* Only the button pins right, so the row doesn't reshuffle on first send. */
#chat-card:not(.hero-active) .settings-container {
    margin-left: auto;
}
/* The auto margin goes on the label, which leads the pair. */
@media screen and (min-width: 992px) {
    #chat-card:not(.hero-active) .persona-name {
        display: inline-flex;
        margin-left: auto;
    }
    #chat-card:not(.hero-active) .settings-container {
        margin-left: 0;
    }
    #chat-card:not(.hero-active) .settings-toggle-btn.has-persona {
        margin-left: 0.3rem;
        margin-right: 0;
    }
}
html[data-theme='dark'] .persona-user { color: #e5e7eb; }
html[data-theme='dark'] .persona-role { color: #69d9f0; }
html[data-theme='dark'] .persona-name.persona-neutral .persona-role { color: #94a3b8; }

/* Settings identity row */
.settings-identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.identity-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(0,162,197,0.08);
    color: #046c85;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}
.identity-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.identity-name,
.identity-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.identity-name {
    font-size: 0.813rem;
    font-weight: 600;
    color: #1e293b;
}
.identity-email {
    font-size: 0.688rem;
    color: var(--color-muted);
}

/* Persona card in the Settings menu */
/* A band, not a card: no border or radius of its own. */
.persona-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem;
    background: rgba(0,162,197,0.055);
    border-top: 1px solid rgba(0,162,197,0.13);
    border-bottom: 1px solid rgba(0,162,197,0.13);
}
.persona-card-lead {
    font-size: 0.688rem;
    line-height: 1.4;
    color: var(--color-muted);
}
.persona-card-role {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* Ported from orbit-ai-b2c's .settings-profile-persona-dot; JS sets the colour. */
.persona-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #64748b;
}
.persona-dot-lg {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
}
.persona-card-role-name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #046c85;
}
.persona-card-note {
    font-size: 0.688rem;
    line-height: 1.5;
    margin-top: 0.1rem;
    color: #475569;
}
.persona-card.persona-neutral .persona-card-role-name { color: #475569; }
.persona-card.persona-neutral {
    background: rgba(2,6,23,0.03);
    border-top-color: rgba(2,6,23,0.08);
    border-bottom-color: rgba(2,6,23,0.08);
}

html[data-theme='dark'] .settings-toggle-btn.has-persona {
    background: rgba(0,162,197,0.16);
    border-color: transparent;
    box-shadow: none;
    color: #69d9f0;
}
html[data-theme='dark'] .settings-toggle-btn.has-persona:hover { background: rgba(0,162,197,0.24); }
html[data-theme='dark'] .settings-toggle-btn.has-persona.active {
    background: #00a2c5;
    color: #fff;
}
html[data-theme='dark'] .settings-toggle-btn.has-persona.persona-neutral {
    background: rgba(148,163,184,0.12);
    color: #94a3b8;
}
html[data-theme='dark'] .settings-toggle-btn.has-persona.persona-neutral:hover { background: rgba(148,163,184,0.2); }
html[data-theme='dark'] .settings-toggle-btn.has-persona.persona-neutral.active {
    background: #94a3b8;
    color: #0b1220;
}
html[data-theme='dark'] .identity-initials {
    background: rgba(0,162,197,0.14);
    color: #69d9f0;
}
html[data-theme='dark'] .identity-name { color: #e5e7eb; }
html[data-theme='dark'] .persona-card {
    background: rgba(0,162,197,0.10);
    border-top-color: rgba(0,162,197,0.22);
    border-bottom-color: rgba(0,162,197,0.22);
}
html[data-theme='dark'] .persona-card-note { color: #cbd5e1; }
html[data-theme='dark'] .persona-card.persona-neutral {
    background: rgba(148,163,184,0.09);
    border-top-color: rgba(148,163,184,0.18);
    border-bottom-color: rgba(148,163,184,0.18);
}
html[data-theme='dark'] .persona-card-role-name { color: #69d9f0; }
html[data-theme='dark'] .persona-card.persona-neutral .persona-card-role-name { color: #cbd5e1; }

/* Embed: the header drops this icon; the session-title menu already carries it. */
html.embed-true #download-pdf-btn {
    display: none !important;
}
html.embed-true .session-options-dropdown .dropdown-item#title-download-pdf {
    display: flex;
}
html.embed-true .session-options-dropdown .session-options-divider.title-only-mobile {
    display: block;
}
/* Not the base `right: -100%`, which pushes it toward the host's corner. */
/* Reserve the corner the host page paints over. Retune if its chrome changes. */
html.embed-true .right-top-header-container {
    min-width: var(--embed-chrome-reserve, 84px);
}

html.embed-true .settings-dropdown {
    right: 0;
    left: auto;
}

/* Input dock */
html[data-theme='dark'] .input-box {
    background: #1e293b;
    border-color: rgba(148,163,184,0.12) !important;
    box-shadow: none;
}
html[data-theme='dark'] .form-control.user-input,
html[data-theme='dark'] .hero-input-group .form-control.user-input {
    color: #e5e7eb;
    border-color: var(--color-border);
}
html[data-theme='dark'] .form-control.user-input {
    background: transparent;
}
html[data-theme='dark'] .hero-input-group .form-control.user-input {
    background: transparent;
    border: none;
}
html[data-theme='dark'] .form-control.user-input::placeholder,
html[data-theme='dark'] .hero-input-group .form-control.user-input::placeholder { color: #94a3b8; }
html[data-theme='dark'] .form-control:focus { box-shadow: none !important; border-color: rgba(148,163,184,0.15) !important; }

/* Messages */
html[data-theme='dark'] .bot-message-bubble { background-color: #1e293b; color: #e5e7eb; border-color: transparent; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
html[data-theme='dark'] .user-message-bubble { background: linear-gradient(135deg, #0097b2 0%, #007c94 50%, #006577 100%); color: #fff; box-shadow: 0 4px 16px rgba(0,162,197,0.3), 0 1px 4px rgba(0,0,0,0.3); }
html[data-theme='dark'] .bot-message-bubble pre { background-color: #0f172a; color: #e5e7eb; }
html[data-theme='dark'] .bot-message-bubble code { background-color: #0f172a; color: var(--color-tertiary); }
html[data-theme='dark'] .bot-message-bubble a { color: var(--color-quaternary); }

/* Scrollbar */
html[data-theme='dark'] ::-webkit-scrollbar-track { background: #0b1220; }
html[data-theme='dark'] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #334155, #475569); }

/* Sessions overlay */
html[data-theme='dark'] .sessions-overlay { background: #0f172a; border-color: var(--color-border); box-shadow: 4px 0 20px rgba(0,0,0,0.4); }
html[data-theme='dark'] .sessions-overlay .overlay-header { background: #0f172a; box-shadow: 0 1px 0 rgba(148,163,184,0.1); }
html[data-theme='dark'] .sessions-overlay .list-group-item:not(.active):hover { background-color: rgba(255,255,255,0.04); }
html[data-theme='dark'] .sessions-overlay .list-group-item.active { background-color: rgba(0,162,197,0.12); color: #e5e7eb; border-left-color: var(--color-primary) !important; }
html[data-theme='dark'] .list-group-item .session-actions .kebab-btn { color: #bdcee6; }
html[data-theme='dark'] .list-group-item .session-actions .kebab-btn:hover { background: rgba(255,255,255,0.06); color: #e5e7eb; }
html[data-theme='dark'] .list-group-item .session-actions .session-menu { background: #0f172a; border-color: var(--color-border); box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
html[data-theme='dark'] .list-group-item .session-actions .session-menu-item { color: #e5e7eb; }
html[data-theme='dark'] .list-group-item .session-actions .session-menu-item:hover { background: rgba(255,255,255,0.06); }
html[data-theme='dark'] .list-group-item .session-actions .session-menu-item.text-danger { color: #f87171; }
html[data-theme='dark'] .list-group-item .session-actions .session-menu-item.text-danger:hover { background: rgba(248,113,113,0.08); }

/* Modals */
html[data-theme='dark'] .rename-modal-dialog,
html[data-theme='dark'] .delete-modal-dialog,
html[data-theme='dark'] .authtoken-modal-dialog,
html[data-theme='dark'] .login-card {
    background: #0f172a;
    border-color: var(--color-border);
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
html[data-theme='dark'] .login-card h5, html[data-theme='dark'] .login-card .card-title { color: var(--color-quaternary); }
html[data-theme='dark'] .login-card .form-control { background-color: #0b1220; border-color: var(--color-border); color: #e5e7eb; }
html[data-theme='dark'] .login-card .form-control::placeholder { color: #94a3b8; }
html[data-theme='dark'] .login-card .form-control:focus { border-color: rgba(13,110,253,.45); box-shadow: 0 0 0 .2rem rgba(13,110,253,.28) !important; }
html[data-theme='dark'] .login-card #login-submit, html[data-theme='dark'] .login-card .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 6px 20px rgba(0,162,197,0.35); }
html[data-theme='dark'] .custom-primary-btn { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
html[data-theme='dark'] #login-error { color: var(--color-tertiary); }
/* Dark overlay clarity */
html[data-theme='dark'] .rename-modal-overlay,
html[data-theme='dark'] .delete-modal-overlay,
html[data-theme='dark'] .authtoken-modal-overlay {
    background: rgba(2,6,23,0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* Toasts */
html[data-theme='dark'] .popup-notification { box-shadow: 0 10px 24px rgba(0,0,0,0.6); }

/* Dark mode keeps the same theme-colored comet glow; brighten slightly for contrast */
html[data-theme='dark'] .bot-message-bubble.shimmer-background::before {
    opacity: 0.9 !important;
}
html[data-theme='dark'] .shimmer-background .status-text {
    color: #c8dce4 !important;
}

/* ==========================
     Dark Mode – Readability Fixes
     ========================== */
/* Hero overlay text */
html[data-theme='dark'] .hero-title { color: #cbd5e1; }
html[data-theme='dark'] .hero-heading { color: #e5e7eb; }
html[data-theme='dark'] .hero-description { color: #94a3b8; }
html[data-theme='dark'] .hero-overlay .hero-content { color: #e5e7eb; }
html[data-theme='dark'] .hero-input-group {
    background: rgba(30,41,59,0.6);
    border-color: var(--color-border);
}
html[data-theme='dark'] .hero-input-group:focus-within {
    background: rgba(30,41,59,0.85);
    border-color: rgba(0,162,197,0.45);
}
html[data-theme='dark'] .hero-category-btn {
    background: rgba(30,41,59,0.5);
    border-color: rgba(148,163,184,0.14);
    color: #cbd5e1;
}
html[data-theme='dark'] .hero-category-btn:hover {
    background: rgba(30,41,59,0.75);
    border-color: rgba(0,162,197,0.35);
}
html[data-theme='dark'] .hero-category-btn .category-icon {
    background: rgba(0,162,197,0.12);
    color: #69d9f0;
}
html[data-theme='dark'] .hero-icon-glow {
    box-shadow: 0 0 10px 3px rgba(0,162,197,0.5);
}
html[data-theme='dark'] .orbitai-icon-border-arc {
    filter: blur(4px) brightness(1.15);
}

/* Textarea focus background should not turn white in dark */
html[data-theme='dark'] .form-control.user-input:focus {
    background: rgba(30,41,59,0.75) !important; /* slate-800 with alpha */
    color: #e5e7eb;
}
html[data-theme='dark'] .hero-input-group .form-control.user-input:focus {
    background: transparent !important;
    color: #e5e7eb;
}

/* Bot message bubble contrast and separation */
html[data-theme='dark'] .bot-message-bubble {
    background-color: #0e1726;
    border: 1px solid transparent;
    background-image: linear-gradient(#0e1726, #0e1726), linear-gradient(135deg, rgba(0,162,197,0.35), rgba(34,174,86,0.35), rgba(13,110,253,0.35));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
html[data-theme='dark'] .user-message-bubble {
    border: 1px solid rgba(255,255,255,0.1);
}

/* Card header text and controls */
html[data-theme='dark'] .card-header { color: #e5e7eb; }
html[data-theme='dark'] .card-header .text-secondary { color: #cbd5e1 !important; }
html[data-theme='dark'] .card-header .btn-link { color: #cbd5e1; }
html[data-theme='dark'] .card-header .btn-link:hover { color: #ffffff; }

/* Sessions overlay text colors */
html[data-theme='dark'] .sessions-overlay { color: #e5e7eb; }
html[data-theme='dark'] .sessions-overlay .overlay-header h6 { color: #e5e7eb; }
html[data-theme='dark'] .sessions-overlay .list-group-item { color: #e5e7eb; background: transparent; }
html[data-theme='dark'] .sessions-overlay .list-group-item .text-muted { color: #9aa4b2 !important; }
html[data-theme='dark'] .sessions-overlay .list-group-item.active { color: #ffffff; }
html[data-theme='dark'] .sessions-overlay .list-group-item.active .text-muted { color: rgba(255,255,255,0.9) !important; }
html[data-theme='dark'] .sessions-overlay .list-group-item:not(.active):hover { background-color: rgba(255,255,255,0.05); }

/* ==========================
     Dark Mode – Additional Fixes
     ========================== */
/* Session list items borders and backgrounds */
html[data-theme='dark'] .sessions-overlay .list-group-item {
    background: transparent;
    border: none;
}
html[data-theme='dark'] .sessions-overlay .list-group-item.active {
    border-color: transparent !important;
    background: rgba(0,162,197,0.12);
    color: #e5e7eb;
    border-left: 3px solid var(--color-primary) !important;
}
html[data-theme='dark'] .sessions-overlay .list-group-item:not(.active):hover {
    background-color: rgba(255,255,255,0.04) !important;
}

/* Bot bubble higher contrast vs. background */
html[data-theme='dark'] .bot-message-bubble {
    background-color: #1f2937;
    background-image: linear-gradient(#1f2937, #1f2937), linear-gradient(135deg, rgba(0,162,197,0.35), rgba(34,174,86,0.35), rgba(13,110,253,0.35));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-color: transparent;
}

/* Rename input should not be white */
html[data-theme='dark'] .rename-modal-dialog .form-control,
html[data-theme='dark'] .authtoken-modal-dialog .form-control {
    background-color: #0b1220;
    color: #e5e7eb;
    border: 1px solid var(--color-border);
}
html[data-theme='dark'] .rename-modal-dialog .form-control::placeholder,
html[data-theme='dark'] .authtoken-modal-dialog .form-control::placeholder { 
    color: #94a3b8; 
}

/* Delete overlay bottom text visibility */
html[data-theme='dark'] .delete-modal-dialog,
html[data-theme='dark'] .authtoken-modal-dialog { 
    color: #e5e7eb; 
}
html[data-theme='dark'] .delete-modal-dialog .text-muted,
html[data-theme='dark'] .authtoken-modal-dialog .text-muted { 
    color: #9aa4b2 !important; 
}

/* Close buttons outline removal and visibility */
#close-sessions-overlay:focus, #rename-close:focus, #delete-close:focus { outline: none !important; box-shadow: none !important; }
html[data-theme='dark'] #close-sessions-overlay,
html[data-theme='dark'] #rename-close,
html[data-theme='dark'] #delete-close {
    color: #cbd5e1;
    border-color: var(--color-border);
    background: transparent;
}
html[data-theme='dark'] #close-sessions-overlay:hover,
html[data-theme='dark'] #rename-close:hover,
html[data-theme='dark'] #delete-close:hover { background: rgba(255,255,255,0.06); }

/* Session list (history) button icon visibility */
html[data-theme='dark'] #history-btn img { filter: invert(1); }

/* User message bubble refinement for dark mode */
html[data-theme='dark'] .user-message-bubble {
    background: linear-gradient(135deg, #0097b2 0%, #007c94 50%, #006577 100%);
    color: #f8fafc;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,162,197,0.3), 0 1px 4px rgba(0,0,0,0.3);
}
html[data-theme='dark'] .user-message-bubble p,
html[data-theme='dark'] .user-message-bubble a { color: #f8fafc; }
html[data-theme='dark'] .user-message-bubble a { text-decoration: underline; }
/* ==========================
     Map Widget – Plus Button & Menu
     ========================== */
.input-plus-wrapper {
    display: inline-flex;
    align-items: center;
}
.plus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid transparent;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
    flex-shrink: 0;
}
.plus-btn:hover {
    background: rgba(0,162,197,0.10);
    border-color: rgba(0,162,197,0.18);
}
.plus-btn.active {
    background: rgba(0,162,197,0.15);
    border-color: rgba(0,162,197,0.3);
    transform: rotate(45deg);
}
html[data-theme='dark'] .plus-btn { color: var(--color-primary); }
html[data-theme='dark'] .plus-btn:hover { background: rgba(0,162,197,0.15); }

.plus-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    border-radius: 0.625rem;
    box-shadow: var(--shadow-md, 0 10px 25px rgba(2,6,23,0.12));
    padding: 4px 0;
    z-index: 1500;
    animation: scaleIn 140ms ease both;
}
html[data-theme='dark'] .plus-menu {
    background: #0f172a;
    border-color: var(--color-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.plus-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 14px;
    font-size: 0.875rem;
    color: #212529;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 120ms ease;
}
.plus-menu-item:hover { background: rgba(0,162,197,0.08); }
html[data-theme='dark'] .plus-menu-item { color: #e5e7eb; }
html[data-theme='dark'] .plus-menu-item:hover { background: rgba(255,255,255,0.06); }
.plus-menu-item svg { color: var(--color-primary); flex-shrink: 0; }

/* Location badge inside input area */
.location-badge {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: linear-gradient(135deg, rgba(0,162,197,0.42), rgba(34,174,86,0.38));
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    color: #ffffff;
    border: 1px solid rgba(0,162,197,0.28);
    border-radius: 1rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
    max-width: min(360px, calc(100% - 1rem));
    animation: scaleIn 160ms ease both;
    box-shadow: 0 10px 24px rgba(15,23,42,0.08);
}

#bottom-location-badge {
    position: absolute;
    left: 0.5rem;
    bottom: calc(100% + 0.5rem);
    margin: 0;
    width: fit-content;
    max-width: min(360px, calc(100% - 1rem));
    z-index: 3;
    background: linear-gradient(135deg, rgba(0,162,197,0.76), rgba(34,174,86,0.68));
}

.location-badge-thumb {
    width: 46px;
    height: 46px;
    border-radius: 0.85rem;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.75);
}
.location-badge-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.location-badge-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
}
.location-badge-title {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
}
.location-badge-meta {
    color: rgba(255,255,255,0.92);
    font-size: 0.7rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.location-badge-remove {
    background: rgba(255,255,255,0.75);
    border: none;
    padding: 0;
    margin-left: auto;
    font-size: 0.7rem;
    line-height: 1;
    color: #0f172a;
    opacity: 0.85;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transition: opacity 120ms ease, background-color 120ms ease;
}
.location-badge-remove:hover { opacity: 1; background: rgba(0,162,197,0.2); }
html[data-theme='dark'] .location-badge {
    background: linear-gradient(135deg, rgba(0,162,197,0.28), rgba(34,174,86,0.26));
    border-color: rgba(0,162,197,0.38);
    color: #e2f5fb;
    box-shadow: 0 14px 28px rgba(2,6,23,0.32);
}
html[data-theme='dark'] .location-badge-thumb {
    background: rgba(15,23,42,0.8);
    border-color: rgba(148,163,184,0.18);
}
html[data-theme='dark'] .location-badge-title {
    color: #ffffff;
}
html[data-theme='dark'] .location-badge-meta {
    color: rgba(255,255,255,0.9);
}
html[data-theme='dark'] .location-badge-remove {
    background: rgba(15,23,42,0.7);
    color: #e2e8f0;
}

html[data-theme='dark'] #bottom-location-badge {
    background: linear-gradient(135deg, rgba(0,162,197,0.48), rgba(34,174,86,0.42));
    box-shadow: 0 14px 28px rgba(2,6,23,0.32);
}

/* Hero location badge sits above the input, in normal block flow */
#hero-location-badge {
    position: static;
    /* align left edge with the textarea start (offset by plus-btn width 40px) */
    margin-left: 40px;
    margin-top: 0.5rem;
    margin-bottom: 0;
    width: fit-content;
    max-width: calc(100% - 40px);
    background: linear-gradient(135deg, rgba(0,162,197,0.76), rgba(34,174,86,0.68));
}

/* ==========================
     Map Widget – Modal Overlay
     ========================== */
.map-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.55);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 5000;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 1rem;
    overflow-y: auto;
}
.map-modal-overlay.open {
    display: flex;
    align-items: center;
}
.map-modal-dialog {
    background: var(--color-card, #fff);
    width: min(96vw, 860px);
    max-height: min(92dvh, calc(100dvh - 2rem));
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(2,6,23,0.22);
    border: 1px solid var(--color-border, rgba(0,0,0,0.08));
    animation: scaleIn 200ms ease both;
}
html[data-theme='dark'] .map-modal-dialog {
    background: #0f172a;
    border-color: var(--color-border);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.map-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08));
    background: rgba(255,255,255,0.96);
    flex-shrink: 0;
}
html[data-theme='dark'] .map-modal-header {
    background: rgba(15,23,42,0.96);
    border-bottom-color: var(--color-border);
    color: #e5e7eb;
}
.map-modal-instructions {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--color-muted, #64748b);
    background: rgba(0,162,197,0.04);
    border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.06));
    flex-shrink: 0;
}
html[data-theme='dark'] .map-modal-instructions {
    background: rgba(0,162,197,0.06);
    border-bottom-color: var(--color-border);
}
.map-search-overlay {
    position: absolute;
    top: 0.875rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 32rem;
    z-index: 720;
    pointer-events: none;
}
.map-search-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    pointer-events: auto;
}
.map-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.map-search-lens {
    position: absolute;
    top: 50%;
    left: 0.7rem;
    transform: translateY(-50%);
    color: #94a3b8;
    display: flex;
    align-items: center;
    pointer-events: none;
}
.map-search-input {
    width: 100%;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid rgba(100,116,139,0.22);
    padding: 0 2.5rem 0 2.25rem;
    background: rgba(255,255,255,0.96);
    color: #0f172a;
    outline: none;
    font-size: 0.875rem;
    box-shadow: 0 8px 20px rgba(15,23,42,0.11);
}
.map-search-input:focus {
    border-color: rgba(0,162,197,0.45);
    box-shadow: 0 0 0 3px rgba(0,162,197,0.12), 0 10px 22px rgba(15,23,42,0.14);
}
.map-search-clear {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(148,163,184,0.16);
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.map-search-clear:hover,
.map-search-clear:focus-visible {
    background: rgba(0,162,197,0.14);
    color: #0f172a;
}
.map-search-btn {
    display: none;
}
.map-search-results {
    margin-top: 0.5rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 18px 38px rgba(15,23,42,0.16);
    border: 1px solid rgba(100,116,139,0.14);
    pointer-events: auto;
    overflow: hidden;
}
.map-search-results-scroll {
    display: grid;
    gap: 0.45rem;
    max-height: min(15rem, calc(100dvh - 20rem));
    overflow-y: auto;
    padding: 0.35rem;
}
.map-search-result {
    width: 100%;
    border: 1px solid rgba(100,116,139,0.16);
    background: rgba(248,250,252,0.96);
    border-radius: 0.85rem;
    padding: 0.65rem 0.8rem;
    text-align: left;
    transition: border-color 140ms, background 140ms, transform 140ms;
}
.map-search-result:hover,
.map-search-result:focus-visible,
.map-search-result.is-active {
    border-color: rgba(0,162,197,0.35);
    background: rgba(240,249,255,0.98);
    transform: translateY(-1px);
}
.map-search-result-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}
.map-search-result-meta {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #64748b;
}
.map-search-results-empty {
    font-size: 0.8rem;
    color: #64748b;
    padding: 0.45rem 0.55rem;
}
html[data-theme='dark'] .map-search-lens {
    color: #64748b;
}
html[data-theme='dark'] .map-search-input {
    background: rgba(15,23,42,0.9);
    color: #e2e8f0;
    border-color: rgba(148,163,184,0.24);
}
html[data-theme='dark'] .map-search-input::placeholder {
    color: #94a3b8;
}
html[data-theme='dark'] .map-search-clear {
    background: rgba(148,163,184,0.14);
    color: #cbd5e1;
}
html[data-theme='dark'] .map-search-clear:hover,
html[data-theme='dark'] .map-search-clear:focus-visible {
    background: rgba(0,162,197,0.18);
    color: #f8fafc;
}
html[data-theme='dark'] .map-search-results {
    background: rgba(15,23,42,0.94);
    border-color: rgba(148,163,184,0.14);
    box-shadow: 0 18px 38px rgba(0,0,0,0.36);
}
html[data-theme='dark'] .map-search-result {
    background: rgba(15,23,42,0.72);
    border-color: rgba(148,163,184,0.16);
}
html[data-theme='dark'] .map-search-result:hover,
html[data-theme='dark'] .map-search-result:focus-visible,
html[data-theme='dark'] .map-search-result.is-active {
    background: rgba(0,162,197,0.12);
    border-color: rgba(0,162,197,0.36);
}
html[data-theme='dark'] .map-search-result-title {
    color: #f8fafc;
}
html[data-theme='dark'] .map-search-result-meta,
html[data-theme='dark'] .map-search-results-empty {
    color: #94a3b8;
}
.map-container {
    flex: 1 1 auto;
    /* Tall enough that the top-right draw dock never reaches the bottom-right
       current-location button. */
    min-height: clamp(380px, 54dvh, 580px);
    position: relative;
    z-index: 1;
}
.map-container-shell {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
/* Right-hand rail spanning the map height. The draw dock and the GPS button
   used to be two absolute boxes anchored to opposite edges, so on a short map
   they slid into each other and the GPS circle covered the Clear tool. As flex
   siblings they hold the same positions but can never overlap. */
.map-side-rail {
    position: absolute;
    top: 3rem;
    bottom: 1.75rem;
    right: 0.85rem;
    z-index: 716;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.5rem;
    pointer-events: none;
}
.map-side-rail > * {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
}
/* position:static is repeated here because `.map-tool-dock`'s own rule comes
   later at equal specificity and would re-assert absolute. */
.map-side-rail > .map-tool-dock {
    position: static;
    min-height: 0;
    flex: 0 1 auto;
    overflow-y: auto;
    scrollbar-width: none;
    pointer-events: auto;
}
.map-side-rail > .map-tool-dock::-webkit-scrollbar { display: none; }
/* auto margin, not space-between: the dock is hidden at ≤576px and a single
   child would then sit at the top. */
.map-side-rail > .map-floating-actions {
    flex: 0 0 auto;
    margin-top: auto;
}

.map-floating-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.map-floating-actions .btn {
    pointer-events: auto;
}
.map-floating-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.96);
    box-shadow: 0 2px 10px rgba(15,23,42,0.22);
    border: 1px solid rgba(0,162,197,0.28);
    color: var(--color-primary);
    transition: background 140ms, box-shadow 140ms;
}
.map-floating-btn:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,162,197,0.28);
}
.map-floating-btn.is-loading {
    opacity: 0.7;
}
/* GPS button icon */
.map-gps-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
/* Blue dot – current GPS location marker */
.map-gps-dot {
    width: 16px;
    height: 16px;
    background: #4285f4;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(66,133,244,0.25);
    animation: gpsPulse 1.8s ease-out infinite;
}
@keyframes gpsPulse {
    0%   { box-shadow: 0 0 0 0 rgba(66,133,244,0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(66,133,244,0); }
    100% { box-shadow: 0 0 0 0 rgba(66,133,244,0); }
}
html[data-theme='dark'] .map-floating-btn {
    background: rgba(15,23,42,0.9);
    border-color: rgba(0,162,197,0.4);
    color: #69d9f0;
}
html[data-theme='dark'] .map-floating-btn:hover {
    background: rgba(15,23,42,0.98);
}
/* Override Leaflet z-index so controls sit above our overlay */
.map-container .leaflet-top,
.map-container .leaflet-bottom { z-index: 500; }
.map-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
    background: rgba(255,255,255,0.96);
    flex-shrink: 0;
    gap: 0.75rem;
    flex-wrap: wrap;
}
html[data-theme='dark'] .map-modal-footer {
    background: rgba(15,23,42,0.96);
    border-top-color: var(--color-border);
}
.map-selection-info {
    font-size: 0.75rem;
    color: var(--color-muted, #64748b);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-selection-info.is-error {
    color: #d63384;
}
/* .map-current-location-btn inherits all styling from .map-floating-btn */
.map-current-location-btn.is-loading {
    opacity: 0.7;
    animation: gpsPulse 1s ease-in-out infinite;
}

/* ============================================================================
   MAP PICKER — REDESIGNED CONTROLS
   A glass draw dock (replacing the default Leaflet.draw button toolbar), a live
   status chip, and restyled zoom + Finish/Cancel action bar.
   ============================================================================ */

/* Shared glass surface tokens for the map controls. */
.map-tool-dock,
.map-mode-chip,
.map-container .leaflet-control-zoom {
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(238,246,249,0.86));
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 10px 28px -10px rgba(2,6,23,0.34), inset 0 1px 0 0 rgba(255,255,255,0.9);
}
html[data-theme='dark'] .map-tool-dock,
html[data-theme='dark'] .map-mode-chip,
html[data-theme='dark'] .map-container .leaflet-control-zoom {
    background: linear-gradient(180deg, rgba(30,41,59,0.92), rgba(15,23,42,0.86));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 28px -10px rgba(0,0,0,0.6), inset 0 1px 0 0 rgba(255,255,255,0.16);
}

/* --- Hide the stock Leaflet.draw button toolbar; we drive its handlers from
   our own dock. The Finish/Cancel/"Delete last point" ACTION bar stays and is
   restyled below. --- */
.map-container .leaflet-draw-toolbar { display: none !important; }
.map-container .leaflet-draw-section { border: 0 !important; }

/* --- Restyled glass zoom control --- */
.map-container .leaflet-control-zoom {
    border-radius: 14px;
    overflow: hidden;
}
.map-container .leaflet-control-zoom a {
    width: 40px; height: 40px; line-height: 40px;
    background: transparent;
    border: 0;
    color: var(--color-ink, #0f172a);
    font-size: 1.25rem;
}
.map-container .leaflet-control-zoom a:first-child { border-bottom: 1px solid rgba(15,23,42,0.10); }
.map-container .leaflet-control-zoom a:hover { background: rgba(0,162,197,0.10); color: var(--color-primary); }
html[data-theme='dark'] .map-container .leaflet-control-zoom a {
    background: transparent !important; color: #e5e7eb !important; border-color: transparent !important; box-shadow: none !important;
}
html[data-theme='dark'] .map-container .leaflet-control-zoom a:first-child { border-bottom: 1px solid rgba(148,163,184,0.2) !important; }
html[data-theme='dark'] .map-container .leaflet-control-zoom a:hover { background: rgba(0,162,197,0.18) !important; color: #69d9f0 !important; }

/* --- Live status chip (bottom-centre, clear of the search bar) --- */
.map-mode-chip {
    position: absolute;
    bottom: 0.85rem; left: 50%;
    transform: translateX(-50%);
    z-index: 710;
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    font-size: 0.72rem; font-weight: 650;
    color: var(--color-muted, #64748b);
    pointer-events: none;
    white-space: nowrap;
}
.map-mode-chip .map-mode-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; opacity: 0.65;
    flex: 0 0 auto;
}
.map-mode-chip.ready { color: #22ae56; }
.map-mode-chip.ready .map-mode-dot { opacity: 1; box-shadow: 0 0 0 3px rgba(34,174,86,0.18); }
/* Hidden while a draw/edit tool is active — the Finish/Cancel bar takes this spot. */
.map-mode-chip.is-hidden { display: none; }
html[data-theme='dark'] .map-mode-chip { color: #94a3b8; }
html[data-theme='dark'] .map-mode-chip.ready { color: #4ade80; }

/* --- Draw tool dock (right edge) --- */
.map-tool-dock {
    position: absolute;
    top: 3rem; right: 0.85rem;
    z-index: 715;
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.3rem;
    border-radius: 16px;
}
.map-tool {
    position: relative;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent;
    color: var(--color-ink, #0f172a);
    border-radius: 11px;
    cursor: pointer;
    transition: background 140ms, color 140ms, transform 140ms;
}
.map-tool:hover { background: rgba(0,162,197,0.10); color: var(--color-primary); }
.map-tool:active { transform: scale(0.94); }
.map-tool.is-active {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,162,197,0.4);
}
.map-tool.map-tool-danger:hover { background: rgba(214,51,132,0.12); color: #d63384; }
.map-tool-divider { height: 1px; margin: 0.15rem 0.4rem; background: rgba(15,23,42,0.1); }
.map-tool:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Hover label */
.map-tool-tip {
    position: absolute;
    right: calc(100% + 10px);
    white-space: nowrap;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    font-size: 0.74rem; font-weight: 600;
    background: rgba(15,23,42,0.92); color: #fff;
    opacity: 0; pointer-events: none;
    transform: translateX(6px);
    transition: opacity 140ms, transform 140ms;
}
.map-tool:hover .map-tool-tip,
.map-tool:focus-visible .map-tool-tip { opacity: 1; transform: translateX(0); }
html[data-theme='dark'] .map-tool { color: #e5e7eb; }
html[data-theme='dark'] .map-tool.is-active { color: #fff; }
html[data-theme='dark'] .map-tool-divider { background: rgba(148,163,184,0.22); }
html[data-theme='dark'] .map-tool-tip { background: rgba(226,232,240,0.95); color: #0f172a; }

/* --- Restyled Leaflet.draw Finish/Cancel action bar ---
   Hoisted (in JS) to be a direct child of .map-container-shell so it can be
   reliably centred; leaflet-draw sets inline top/left when it shows the bar,
   hence the !important overrides. */
.map-container-shell > .leaflet-draw-actions {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0.85rem !important;
    top: auto !important;
    transform: translateX(-50%);
    z-index: 726;
    margin: 0;
    list-style: none;
    padding: 0;
    white-space: nowrap;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 10px 28px -10px rgba(2,6,23,0.4);
}
/* inline-block (not flex) so the row survives leaflet's inline display:block toggle */
.map-container-shell > .leaflet-draw-actions li { margin: 0; display: inline-block; }
.map-container-shell > .leaflet-draw-actions a {
    display: block;
    height: 2.35rem; line-height: 2.35rem;
    padding: 0 1rem;
    font-size: 0.8rem; font-weight: 600;
    text-align: center; text-decoration: none;
    background: #ffffff; color: #0f172a;
    border: 0; border-right: 1px solid rgba(15,23,42,0.08);
}
.map-container-shell > .leaflet-draw-actions li:last-child a { border-right: 0; }
.map-container-shell > .leaflet-draw-actions a:hover,
.map-container-shell > .leaflet-draw-actions a:focus-visible { background: #e8f6fb; color: var(--color-primary); }
html[data-theme='dark'] .map-container-shell > .leaflet-draw-actions a { background: #1e293b; color: #e5e7eb; border-right-color: rgba(148,163,184,0.2); }
html[data-theme='dark'] .map-container-shell > .leaflet-draw-actions a:hover,
html[data-theme='dark'] .map-container-shell > .leaflet-draw-actions a:focus-visible { background: #0b3947; color: #8fe3f5; }

@media (max-height: 760px) {
    .map-modal-overlay {
        padding: 0.5rem;
        align-items: flex-start;
    }

    .map-modal-dialog {
        width: min(100vw, 860px);
        max-height: calc(100dvh - 1rem);
        /* Definite height, not just a cap, or the min-height:0 map pane has no
           leftover to grow into and collapses to 0px. */
        height: calc(100dvh - 5rem);
        border-radius: 0.875rem;
    }

    .map-modal-header {
        padding: 0.75rem 0.875rem;
    }

    .map-modal-instructions {
        padding: 0.45rem 0.875rem;
        font-size: 0.75rem;
    }

    .map-search-overlay {
        top: 0.625rem;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
    }

    .map-search-row {
        gap: 0.5rem;
    }

    .map-search-input {
        height: 2.1rem;
    }

    .map-search-results {
        max-height: min(12rem, calc(100dvh - 18rem));
    }

    .map-container {
        /* No height floor here. .map-container-shell shrinks with the dialog, so a
           floor makes the map overflow it, and because the dialog is
           overflow:hidden the clipped-off bottom takes Leaflet's zoom control
           and the footer's Confirm button with it. flex: 1 1 auto already gives
           the map every spare pixel. */
        min-height: 0;
    }

    .map-modal-footer {
        padding: 0.625rem 0.875rem;
        align-items: flex-start;
    }

    .map-selection-info {
        max-width: none;
        white-space: normal;
    }
}

@media (min-height: 900px) {
    .map-modal-dialog {
        max-height: min(94dvh, calc(100dvh - 2rem));
    }

    .map-container {
        min-height: clamp(420px, 62dvh, 720px);
    }
}
.map-current-location-btn.is-loading {
    opacity: 0.8;
}
.map-modal-dialog .btn-outline-secondary {
    border-color: rgba(100,116,139,0.35);
    color: #334155;
}
.map-modal-dialog .btn-outline-secondary:hover,
.map-modal-dialog .btn-outline-secondary:focus-visible {
    background: rgba(148,163,184,0.14);
    border-color: rgba(100,116,139,0.45);
    color: #0f172a;
}
.map-mode-badge {
    font-size: 0.7rem;
    background: rgba(0,162,197,0.1);
    color: var(--color-primary);
    border: 1px solid rgba(0,162,197,0.2);
    border-radius: 2rem;
    padding: 2px 8px;
    font-weight: 500;
}
html[data-theme='dark'] .map-mode-badge { background: rgba(0,162,197,0.18); border-color: rgba(0,162,197,0.3); }
.map-close-btn { font-size: 0.8rem; }
html[data-theme='dark'] .map-selection-info.is-error {
    color: #ff8fbd;
}
html[data-theme='dark'] .map-modal-dialog .btn-outline-secondary {
    color: #e2e8f0;
    border-color: rgba(148,163,184,0.28);
    background: rgba(15,23,42,0.72);
}
html[data-theme='dark'] .map-modal-dialog .btn-outline-secondary:hover,
html[data-theme='dark'] .map-modal-dialog .btn-outline-secondary:focus-visible {
    background: rgba(148,163,184,0.16);
    border-color: rgba(148,163,184,0.45);
    color: #f8fafc;
}
/* .map-current-location-btn dark mode is covered by .map-floating-btn dark rules */

/* Ensure Leaflet draw toolbar styles are legible in dark mode */
html[data-theme='dark'] .leaflet-draw-toolbar a,
html[data-theme='dark'] .leaflet-bar a {
    background-color: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
    box-shadow: 0 6px 18px rgba(2,6,23,0.28);
}
html[data-theme='dark'] .leaflet-bar a:hover,
html[data-theme='dark'] .leaflet-draw-toolbar a:hover {
    background-color: #f8fafc;
}
html[data-theme='dark'] .leaflet-draw-toolbar a.leaflet-draw-toolbar-button-enabled,
html[data-theme='dark'] .leaflet-draw-toolbar a:focus-visible {
    background-color: #c8f1f8;
    border-color: rgba(0,162,197,0.55);
}
html[data-theme='dark'] .leaflet-draw-actions a {
    background: #0f172a;
    color: #e5e7eb;
    border-color: #334155;
}
html[data-theme='dark'] .leaflet-draw-actions a:hover,
html[data-theme='dark'] .leaflet-draw-actions a:focus-visible {
    background: #1e293b;
    color: #f8fafc;
}
html[data-theme='dark'] .leaflet-disabled {
    opacity: 0.55;
}
html[data-theme='dark'] .leaflet-popup-content-wrapper { background: #0f172a; color: #e5e7eb; }
html[data-theme='dark'] .leaflet-popup-tip { background: #0f172a; }

/* Hide dictation buttons when dictating – also hide the plus button */
.input-group.dictating #plus-btn,
.input-group.dictating #hero-plus-btn { opacity:0; visibility:hidden; pointer-events:none; transition:opacity 120ms ease; }
.input-group:not(.dictating) #plus-btn,
.input-group:not(.dictating) #hero-plus-btn { opacity:1; visibility:visible; }

/* Pr Widgets Wrapper */

.pr-widgets-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.pr-map-details-container {
    flex: 1 1 calc(50% - 8px);
    min-width: 320px;
    /* Header + map stack into one card; the shadow wraps the whole unit so
       the title doesn't read as a detached element above the map. */
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}
/* PR Widget styles */
/* ── PR map: gradient-bordered card ──────────────────────────────────── */
/* A single brand-gradient border hugs the live map. */
.pr-widget-iframe-wrapper {
    position: relative;
    display: flex;
    /* Top corners squared: the title header caps the map here, so they read
       as one stacked card (gradient border stays on the map only). The card
       shadow lives on .pr-map-details-container so it wraps header + map. */
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Crisp gradient border drawn as a masked ring laid OVER the map edge:
   exact thickness, covers the embedded map's own edge gutter, and follows
   the rounded corners (a plain border / ancestor clip can't do all three). */
.pr-widget-iframe-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;                       /* border thickness */
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 1) 0%,
        rgba(34, 174, 86, 0.95) 50%,
        rgba(13, 110, 253, 1) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

/* Inner surface holding the iframe */
.pr-widget-frame {
    position: relative;
    flex: 1 1 auto;
    height: 480px;
    border-radius: inherit;
    overflow: hidden;
}
/* The embedded widget page has an ~8px body margin, so the map sits inset
   inside the iframe. Grow the iframe by that margin on every side and let
   .pr-widget-frame clip it: the blank margin is pushed out of view and the
   map fills to the border. No map content is lost — only the blank margin. */
.pr-widget-frame iframe {
    display: block;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    margin: -8px;
    border: 0;
}

/* Per-map header (shown when multiple maps are returned) — a brand-gradient
   "Map N" pill + the plot name, tied to the gradient border of the card. */
/* Title header capping the map: shares the map's width and sits flush on top
   of it (no gap), so the two stack into one card without the gradient border
   wrapping the title. */
.widget-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.875rem;
    /* Faint brand wash (echoes the gradient border) over the card surface, so
       the header reads as a defined header in light mode instead of flat white. */
    background:
        linear-gradient(135deg,
            rgba(var(--color-primary-rgb), 0.10) 0%,
            rgba(34, 174, 86, 0.08) 50%,
            rgba(13, 110, 253, 0.10) 100%),
        var(--color-card);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Same brand wash in dark mode, at higher opacity so it reads over the
   dark card surface. */
html[data-theme='dark'] .widget-title {
    background:
        linear-gradient(135deg,
            rgba(var(--color-primary-rgb), 0.22) 0%,
            rgba(34, 174, 86, 0.16) 50%,
            rgba(13, 110, 253, 0.22) 100%),
        var(--color-card);
}
.widget-title-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
    padding: 0.28rem 0.5rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 1) 0%,
        rgba(34, 174, 86, 0.95) 50%,
        rgba(13, 110, 253, 1) 100%);
}
.widget-title-name {
    min-width: 0;
    flex: 0 1 auto;
    font-weight: 600;
    color: #212529;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-theme='dark'] .widget-title-name {
    color: #e5e7eb;
}

.pr-widget-info {
    --pr-info-bg: rgba(44, 44, 44, 0.85);
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: fit-content;
    white-space: pre-line;
    background-color: var(--pr-info-bg);
    border-color: var(--pr-info-bg);
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.75rem;
}

html[data-theme='dark'] .pr-widget-iframe-wrapper {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Regional map & image artifacts (regional_metadata), ported from orbit-ai-b2c */
.map-iframe-wrapper {
    position: relative;
    display: flex;
    padding: 1.5px;                       /* gradient border thickness */
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 1) 0%,
        rgba(34, 174, 86, 0.95) 50%,
        rgba(13, 110, 253, 1) 100%);
}

/* Inner surface holding the iframe — clips the map to the rounded border */
.map-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: calc(var(--radius-lg) - 1.5px);
    overflow: hidden;
    background: var(--color-card);
}
.map-frame iframe {
    display: block;
    width: 100%;
    height: clamp(480px, 75vh, 700px);
    height: clamp(480px, 75dvh, 700px);
    border: 0;
    border-radius: inherit;
    background: var(--color-card);
}
/* Crisp hairline bevel over the map edge, separating it from the border */
.map-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    z-index: 1;
}
html[data-theme='dark'] .map-frame::after {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Floating glass control over the map */
.fullscreen-btn {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    right: auto;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #202024;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-pill);
    cursor: pointer;
    line-height: 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.fullscreen-btn svg { display: block; }
.fullscreen-btn:hover { box-shadow: var(--shadow-md); background: var(--color-primary); color: #fff; border-color: transparent; }

/* Dark theme: glass control adapts to the dark surface */
html[data-theme='dark'] .fullscreen-btn {
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(148, 163, 184, 0.28);
}
html[data-theme='dark'] .fullscreen-btn:hover { background: var(--color-primary); color: #fff; border-color: transparent; }

/* Map card fills the screen cleanly while in fullscreen */
.map-iframe-wrapper:fullscreen { border-radius: 0; padding: 0; background: var(--color-card); box-shadow: none; }
.map-iframe-wrapper:fullscreen .map-frame { padding: 0; border-radius: 0; }
.map-iframe-wrapper:fullscreen iframe { height: 100%; border-radius: 0; }

/* Fallback where the Fullscreen API is unavailable (iPhone Safari, embeds without allow="fullscreen") */
.map-iframe-wrapper.map-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    padding: 0;
    background: var(--color-card);
    box-shadow: none;
}
.map-iframe-wrapper.map-pseudo-fullscreen .map-frame { padding: 0; border-radius: 0; height: 100%; }
.map-iframe-wrapper.map-pseudo-fullscreen iframe { height: 100%; border-radius: 0; }
/* Lock chat scroll behind the map (wrapper is reparented to <body> in index.js) */
body.map-pseudo-fullscreen-lock { overflow: hidden; }

.image-clickable {
    cursor: pointer;
}

/* Gradient on the border-box + card colour on the padding-box paints a gradient ring around the <img> */
.chat-inline-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1.5px solid transparent;      /* gradient border thickness */
    border-radius: var(--radius-lg);
    background:
        linear-gradient(var(--color-card, #fff), var(--color-card, #fff)) padding-box,
        linear-gradient(135deg,
            rgba(var(--color-primary-rgb), 1) 0%,
            rgba(34, 174, 86, 0.95) 50%,
            rgba(13, 110, 253, 1) 100%) border-box;
    transition: transform 200ms ease;
}

/* translate, not scale: scaling a raster image blurs it */
.chat-inline-image:hover {
    transform: translateY(-2px);
}

html[data-theme='dark'] .chat-inline-image {
    background:
        linear-gradient(#202024, #202024) padding-box,
        linear-gradient(135deg,
            rgba(var(--color-primary-rgb), 1) 0%,
            rgba(34, 174, 86, 0.95) 50%,
            rgba(13, 110, 253, 1) 100%) border-box;
}

/* Pre-sized to the final card so nothing shifts on reveal */
.regional-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-lg);
    background: rgba(2, 6, 23, 0.05);
    color: var(--color-muted);
    animation: regionalSkeletonPulse 1.5s ease-in-out infinite;
}
html[data-theme='dark'] .regional-skeleton {
    background: rgba(148, 163, 184, 0.08);
}
.regional-skeleton--map {
    height: clamp(480px, 75vh, 700px);
    height: clamp(480px, 75dvh, 700px);
    margin-top: 0.5rem;
}
.regional-skeleton--image {
    height: 220px;
    margin-top: 1rem;
}
.regional-skeleton svg { opacity: 0.55; }
.regional-skeleton-label {
    font-size: 0.78rem;
    font-weight: 500;
}
@keyframes regionalSkeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Not display:none: the embedded map would init on a zero-size viewport; !important beats pt-2 */
.regional-map-loading {
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    opacity: 0;
}

/* Content fades in as it replaces its skeleton */
.regional-fade-in {
    animation: regionalFadeIn 320ms ease;
}
@keyframes regionalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .regional-skeleton { animation: none; }
    .regional-fade-in { animation: none; }
}

/* Fullscreen image viewer overlay */
.image-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.image-fullscreen-overlay.show {
    opacity: 1;
}

.image-fullscreen-container {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-fullscreen-img {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: default;
    transition: transform 0.2s ease-out;
    transform-origin: center center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -webkit-touch-callout: none;
}

.image-fullscreen-img.zoomed {
    cursor: grab;
}

.image-fullscreen-img.zoomed:active,
.image-fullscreen-img.dragging {
    cursor: grabbing !important;
    transition: none; /* Disable transition during drag for immediate response */
}

.image-fullscreen-controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 10002;
}

.zoom-control-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #333;
    transition: background 0.2s ease, transform 0.2s ease;
}

.zoom-control-btn:hover {
    background: #f8f9fa;
    transform: scale(1.1);
}

.zoom-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.image-zoom-indicator {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-zoom-indicator.show {
    opacity: 1;
}

.image-fullscreen-close {
    position: fixed;
    top: 40px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    color: #333;
    transition: background 0.2s ease, transform 0.2s ease;
}

.image-fullscreen-close:hover {
    background: #f8f9fa;
    transform: scale(1.1);
}

/* Dark mode adjustments */
html[data-theme='dark'] .image-fullscreen-close {
    background: #202024;
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

html[data-theme='dark'] .image-fullscreen-close:hover {
    background: #3b3b42;
}

html[data-theme='dark'] .zoom-control-btn {
    background: #202024;
    color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

html[data-theme='dark'] .zoom-control-btn:hover {
    background: #3b3b42;
}

html[data-theme='dark'] .image-zoom-indicator {
    background: rgba(30, 41, 59, 0.9);
    color: #cbd5e1;
}


@media print {
    html, body, #chat-card, #chat-container {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin: 0 !important;
        padding-inline: 0.25rem !important;
        width: 100% !important;
        height: auto !important;
    }
    body { margin: 0; height: auto !important; overflow: visible !important; background: var(--bs-body-bg); }
    #chat-window { height: auto !important; overflow: visible !important; }
    #chat-card { width: 297mm; margin: 1rem auto; height: auto !important; max-height: none !important; overflow: visible !important; }
    #chat-container { padding-inline: 1rem !important; height: auto !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; }
    /* no input box and tip in print view */
    #chat-card .input-box,
    #chat-card .input-tip, 
    #chat-card #history-btn,
    #chat-card #new-chat-btn,
    #chat-card #settings-container,
    #chat-card #theme-toggle-container,
    #chat-card .session-dropdown-arrow,
    #chat-card #download-pdf-btn,
    .table-export-btn {
        display: none !important;
    }
    .pr-widgets-wrapper {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* dvh is unreliable in print; pin the regional map to its minimum so it fits one page */
    .map-frame iframe { height: 480px; }
    .map-iframe-wrapper,
    .chat-inline-image {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .fullscreen-btn {
        display: none !important;
    }
    /* The "Preparing PDF…" overlay is still in the DOM during window.print();
       keep it out of the printed output. */
    .print-prep-overlay {
        display: none !important;
    }
    /* Keep each map card (title header + map) together — never split the
       title from its map, or the map itself, across a page break. */
    .pr-map-details-container,
    .widget-title {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .widget-title {
        break-after: avoid;
        page-break-after: avoid;
    }
    /* The map's gradient border is a full-size gradient rect carved into a
       thin ring via mask-composite. Print engines don't honor mask-composite,
       so the mask fails and the whole gradient fills over the map. Drop the
       masked pseudo-element and fall back to a plain border for print. */
    .pr-widget-iframe-wrapper::after {
        display: none !important;
    }
    .pr-widget-iframe-wrapper {
        border: 1.5px solid rgba(13, 110, 253, 0.6) !important;
    }
    @page {
        size: A4 landscape;
        margin: 0;
        padding: 0;
    }
}

/* Feedback modal */
.feedback-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.feedback-modal-overlay.open { display: flex; }
.feedback-modal-dialog {
    border: 1px solid var(--color-border, rgba(0,0,0,0.1));
    background: #fff;
    width: min(92vw, 480px);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.feedback-modal-dialog .form-control {
    background-color: #f8fafc;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0.5rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.feedback-modal-dialog .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(0, 162, 197, .2) !important;
}
.feedback-modal-dialog .form-label {
    color: #374151;
    font-weight: 500;
}

/* Dark mode feedback modal */
html[data-theme='dark'] .feedback-modal-dialog {
    background: #0f172a;
    border-color: var(--color-border);
    box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}
html[data-theme='dark'] .feedback-modal-dialog .form-control {
    background-color: #0b1220;
    border-color: var(--color-border);
    color: #e5e7eb;
}
html[data-theme='dark'] .feedback-modal-dialog .form-control::placeholder {
    color: #94a3b8;
}
html[data-theme='dark'] .feedback-modal-dialog .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(0, 162, 197, .28) !important;
}
html[data-theme='dark'] .feedback-modal-dialog .form-label {
    color: #cbd5e1;
}
html[data-theme='dark'] .feedback-modal-overlay {
    background: rgba(2,6,23,0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* === Related questions (chips under bot messages) ========================= */
.related-questions-container {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(var(--color-primary-rgb), 0.25);
}
.related-questions-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-muted);
    margin-bottom: 0.55rem;
}
.related-questions-title svg { color: var(--color-primary); flex-shrink: 0; }
.related-questions-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}
.related-question-wrapper {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
    max-width: 100%;
}
.related-question-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    background: rgba(var(--color-primary-rgb), 0.06);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.related-question-btn:hover:not(:disabled) {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-color: rgba(var(--color-primary-rgb), 0.55);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.15);
}
.related-question-btn:active:not(:disabled) { transform: translateY(0); }
.related-question-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--color-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.related-question-wrapper:hover .related-question-edit-btn,
.related-question-edit-btn:focus-visible { opacity: 1; }
.related-question-edit-btn:hover:not(:disabled) {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}
.related-question-btn:disabled {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.55;
}
/* Edit affordance can't rely on hover on touch screens */
@media (hover: none) {
    .related-question-edit-btn { opacity: 1; }
}
/* Pill radius reads awkward on wrapped multi-line text; use rounded rect + full width on mobile */
@media (max-width: 600px) {
    .related-questions-list { align-items: stretch; }
    .related-question-wrapper { display: flex; width: 100%; align-items: center; }
    .related-question-btn { flex: 1; border-radius: 14px; }
    .related-question-edit-btn { border-radius: 12px; align-self: stretch; }
}
html[data-theme='dark'] .related-question-btn {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: #cbd5e1;
}
html[data-theme='dark'] .related-question-btn:hover:not(:disabled) {
    background: rgba(var(--color-primary-rgb), 0.18);
}

/* ============================================================================
   Scroll shortcut FAB — go-to-top / go-to-bottom glass button (ported from
   orbit-ai-b2c). JS (setupScrollFab) toggles .show and flips the chevron.
   ============================================================================ */
.scroll-fab {
    position: absolute;
    right: 1.1rem;
    bottom: 6.5rem;
    z-index: 6;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    backdrop-filter: blur(24px) saturate(190%);
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(238,246,249,0.88));
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow:
        0 12px 30px -10px rgba(2,6,23,0.3),
        inset 0 1px 0 0 rgba(255,255,255,0.95);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease, background-color 140ms ease;
}
.scroll-fab.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.scroll-fab:hover {
    background: linear-gradient(180deg,
        rgba(var(--color-primary-rgb), 0.16),
        rgba(var(--color-primary-rgb), 0.10));
}
.scroll-fab:active { transform: scale(0.92); }
.scroll-fab:focus-visible {
    outline: none;
    box-shadow:
        0 12px 30px -10px rgba(2,6,23,0.3),
        inset 0 1px 0 0 rgba(255,255,255,0.95),
        0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.28);
}
.scroll-fab-icon { transition: transform 200ms ease; }
.scroll-fab.up .scroll-fab-icon { transform: rotate(180deg); }
#chat-card.hero-active .scroll-fab { display: none; }
html[data-theme='dark'] .scroll-fab {
    background: linear-gradient(180deg, rgba(30,41,59,0.92), rgba(19,19,22,0.88));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
        0 12px 30px -10px rgba(0,0,0,0.6),
        inset 0 1px 0 0 rgba(255,255,255,0.16);
}
@media (prefers-reduced-motion: reduce) {
    .scroll-fab, .scroll-fab-icon { transition: none; }
}

/* ============================================================================
   Listen (text-to-speech) — speaker action button + docked player pill
   (ported from orbit-ai-b2c). See tts.js.
   ============================================================================ */
/* Speaker action: fourth icon after copy (58) / like (84) / dislike (110). */
.chat-message.from-bot .message-tts-btn { left: 136px; color: #95999A; position: absolute; }
.message-tts-btn .tts-icon { display: inline-flex; align-items: center; justify-content: center; }
.message-tts-btn svg { width: 18px; height: 18px; display: block; }
.message-tts-btn.tts-active, .message-tts-btn.tts-paused { color: var(--color-primary); }
.message-tts-btn.tts-paused .tts-eq i { animation-play-state: paused; }
.message-tts-btn .tts-eq { height: 13px; }
.message-tts-btn .tts-eq i { width: 2.5px; }
/* pr-llm keeps copy/like/dislike at fixed offsets on all widths (no mobile
   re-anchor), so the speaker stays in the 4th slot at 136px on mobile too. */

.tts-new-badge {
    position: absolute; top: -1px; right: -1px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-secondary);
    border: 1.5px solid var(--color-card);
    animation: tts-badge-pulse 1.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tts-badge-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.85; }
    50% { transform: scale(1.15); opacity: 1; }
}

.tts-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.tts-eq i {
    width: 3px; border-radius: 2px; background: currentColor; height: 5px;
    transform-origin: bottom;
    animation: tts-eq 0.9s ease-in-out infinite;
}
.tts-eq i:nth-child(2) { animation-delay: 0.2s; height: 12px; }
.tts-eq i:nth-child(3) { animation-delay: 0.4s; height: 8px; }
@keyframes tts-eq {
    0%, 100% { transform: scaleY(0.45); }
    50% { transform: scaleY(1); }
}
.tts-player.paused .tts-eq i { animation-play-state: paused; }

.tts-dots { display: inline-flex; gap: 2.5px; align-items: center; }
.tts-dots i {
    width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor;
    animation: tts-dot 1s ease-in-out infinite;
}
.tts-dots i:nth-child(2) { animation-delay: 0.2s; }
.tts-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes tts-dot {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}
.message-tts-btn.tts-loading { color: var(--color-primary); }

#tts-player {
    position: absolute; z-index: 6;
    left: 10px; right: 10px; top: 66px;
    margin-inline: auto; max-width: 440px;
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #131316;
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);
    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(236,244,248,0.36) 100%);
    border: 1px solid rgba(148,163,184,0.3);
    box-shadow:
        0 10px 30px -8px rgba(2,6,23,0.28),
        inset 0 1px 0 0 rgba(255,255,255,0.9);
    transform: translateY(-160%); opacity: 0;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#tts-player.is-in { transform: translateY(0); opacity: 1; }
html[data-theme='dark'] #tts-player {
    color: #e5e7eb;
    background: linear-gradient(180deg, rgba(30,41,59,0.6) 0%, rgba(19,19,22,0.45) 100%);
    border-color: rgba(255,255,255,0.14);
    box-shadow:
        0 8px 30px -8px rgba(0,0,0,0.5),
        inset 0 1px 0 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 0 rgba(0,0,0,0.25);
}
#tts-player .tts-disc {
    position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; border: 0; padding: 0; color: #fff;
    background: conic-gradient(from 210deg, var(--color-primary), var(--color-secondary) 55%, var(--color-primary));
    box-shadow: 0 4px 12px -2px rgba(var(--color-primary-rgb), 0.5);
    transition: transform 0.1s ease;
}
#tts-player .tts-disc:active { transform: scale(0.92); }
#tts-player .tts-disc::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: rgba(255,255,255,0.16); }
#tts-player .tts-disc svg { position: relative; z-index: 1; width: 17px; height: 17px; }
#tts-player:not(.paused) .tts-disc::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid rgba(var(--color-primary-rgb), 0.45);
    animation: tts-disc-pulse 2.2s ease-out infinite;
}
@keyframes tts-disc-pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    70%, 100% { transform: scale(1.4); opacity: 0; }
}
#tts-player .tts-disc[aria-expanded="true"]::after { background: rgba(255,255,255,0.32); }

#tts-player .tts-ctl, #tts-player .tts-playpause, #tts-player .tts-speed {
    font: inherit; cursor: pointer; border: none; background: none; color: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; line-height: 0; flex: 0 0 auto;
}
#tts-player .tts-ctl {
    width: 28px; height: 28px; border-radius: 50%; opacity: 0.72;
    transition: opacity 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}
#tts-player .tts-ctl:hover { opacity: 1; background: rgba(2,6,23,0.06); }
html[data-theme='dark'] #tts-player .tts-ctl:hover { background: rgba(255,255,255,0.1); }
#tts-player .tts-ctl svg { width: 17px; height: 17px; }
#tts-player .tts-close svg { width: 13px; height: 13px; }

#tts-player .tts-playpause {
    width: 32px; height: 32px; border-radius: 50%; color: #fff;
    background: var(--color-primary);
    box-shadow: 0 6px 14px -4px rgba(var(--color-primary-rgb), 0.6);
    transition: transform 0.1s ease;
}
#tts-player .tts-playpause:active { transform: scale(0.94); }
#tts-player .tts-playpause svg { width: 15px; height: 15px; }

#tts-player .tts-track { flex: 1 1 auto; min-width: 24px; display: block; }
#tts-player .tts-bar {
    position: relative; display: block; height: 4px; border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.16); overflow: hidden;
}
#tts-player .tts-fill {
    position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px;
    background: var(--color-primary);
    transition: width 0.2s linear;
}
#tts-player .tts-speed {
    min-width: 40px; height: 26px; border-radius: 999px; padding: 0 9px;
    font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
    border: 1px solid rgba(2,6,23,0.12); background: rgba(255,255,255,0.4);
}
html[data-theme='dark'] #tts-player .tts-speed {
    border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.08);
}

#tts-player .tts-voices[hidden] { display: none; }
#tts-player .tts-voices {
    position: absolute; z-index: 7;
    top: calc(100% + 8px); left: 0;
    min-width: 240px; max-width: 100%; max-height: 250px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(238,246,249,0.92));
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 16px 40px -10px rgba(2,6,23,0.3), inset 0 1px 0 0 rgba(255,255,255,0.95);
}
html[data-theme='dark'] #tts-player .tts-voices {
    background: linear-gradient(180deg, rgba(30,41,59,0.96), rgba(19,19,22,0.94));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6), inset 0 1px 0 0 rgba(255,255,255,0.16);
}
#tts-player .tts-voice-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    width: 100%; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
    padding: 8px 10px; border-radius: 10px; font-size: 0.8rem;
}
#tts-player .tts-voice-item:hover { background: rgba(2,6,23,0.06); }
html[data-theme='dark'] #tts-player .tts-voice-item:hover { background: rgba(255,255,255,0.08); }
#tts-player .tts-voice-item.is-active {
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary); font-weight: 600;
}
#tts-player .tts-voice-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tts-player .tts-voice-meta { flex: 0 0 auto; font-size: 0.66rem; color: var(--color-muted); }
#tts-player .tts-voice-empty { padding: 10px; font-size: 0.78rem; color: var(--color-muted); }

@media (max-width: 480px) {
    #tts-player { gap: 6px; }
    #tts-player .tts-speed { min-width: 34px; padding: 0 6px; }
}
@media print { #tts-player, .message-tts-btn { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    #tts-player { transition: none; }
    .tts-eq i, .tts-dots i { animation: none !important; }
    #tts-player .tts-fill { transition: none; }
}

/* ============================================================================
   MOBILE / RESPONSIVE

   Two things to know before editing this section:

   1. It lives at the END of the file on purpose. Most rules here are
      single-class selectors that override an equally-specific base rule further
      up, so they only win by source order. Moving them earlier silently
      disables them.

   2. The phone breakpoint is 576px, not the 768px orbit-ai-b2c uses. This
      widget is embedded in an iframe, so media queries measure the IFRAME, not
      the device. The production embed is 610px wide, which would match 768px
      and hand a desktop browser the phone layout. Real phones (~360-430px) sit
      below 576px. Height queries are unaffected by this.
   ============================================================================ */

/* --- Phone message layout ------------------------------------------------- */
@media (max-width: 576px) {
    .avatar.user-avatar,
    .orbitai-icon-border { display: none !important; }

    .bot-message-bubble,
    .user-message-bubble
    { max-width: 100% !important; }

    .bot-message-bubble:has(.chart-wrapper) { width: 100% !important; }
    /* The 320px floor is wider than the bubble on a phone, so the bubble's
       overflow: hidden clipped the map's right edge (zoom controls, legend). */
    .pr-map-details-container { min-width: 0; flex-basis: 100%; }

    .bot-message-bubble { border-top-left-radius: 0; }
    .user-message-bubble { border-bottom-right-radius: 0; }

    /* Avatars hidden, so re-anchor the action buttons to the bubble edge. */
    .chat-message.from-bot .message-copy-btn { left: 8px; }
    .chat-message.from-user .message-copy-btn { right: 6px; }
    .chat-message.from-bot .message-feedback-btn.like-btn { left: 34px; }
    .chat-message.from-bot .message-feedback-btn.dislike-btn { left: 60px; }
    .chat-message.from-bot .message-tts-btn { left: 86px; }
}

/* --- Compact brand ---------------------------------------------------------
   Below 576px the header swaps the 80px wordmark for a 28px round mark so the
   session title has room. Hidden by default; the block below reveals it. */
.brand-logo-icon { display: none; height: 28px; vertical-align: middle; }

@media (max-width: 576px) {
    .card-header { padding: 0.35rem 0.6rem 0.4rem !important; }

    /* !important beats `html.embed-false .brand-orbit { display: inline }`. */
    .logo-container .brand-orbit { display: none !important; }
    .logo-container .brand-logo-icon { display: inline-block; }
    .logo-container .powered-by { display: none; }

    /* Close the gap to the session title: the base 1rem was spaced for the
       80px wordmark and leaves a 24px void beside the 28px mark. */
    .logo-container { margin-right: 0.25rem; }

    /* Hero state has no session title competing for width, so it keeps the
       full wordmark, the "Powered by" caption, and the taller header. */
    #chat-card.hero-active .logo-container .brand-orbit { display: inline-block !important; }
    #chat-card.hero-active .logo-container .brand-logo-icon { display: none; }
    #chat-card.hero-active .logo-container .powered-by { display: inline; }
    #chat-card.hero-active .card-header { padding: 0.5rem 0.6rem 0.85rem !important; }
}

/* --- Header collapse -------------------------------------------------------
   On phones the header can't hold every control, so New Session, Download PDF
   and the theme toggle move into the two dropdowns that are already there (the
   session-title menu and the gear). These are the menu entries that only exist
   for that layout — hidden here, revealed below. */
.mobile-only-setting { display: none; }
/* Not in embed: the host owns theming. Out-specifies the phone block below. */
html.embed-true .mobile-only-setting { display: none; }
.session-options-dropdown .title-only-mobile { display: none; }

@media screen and (max-width: 576px) {
    .mobile-only-setting { display: flex; }
    .settings-divider.mobile-only-setting { display: block; }
    .session-options-dropdown .dropdown-item.title-only-mobile { display: flex; }
    .session-options-dropdown .session-options-divider.title-only-mobile { display: block; }

    /* Hide the standalone header buttons; the menu entries above replace them. */
    #new-chat-btn,
    #download-pdf-btn { display: none !important; }
    html.embed-false #theme-toggle-container { display: none !important; }

    /* Let the header fill the row, but only the title may shrink and ellipsize
       — the logo and history button keep their size. */
    .left-top-header-container { flex: 1 1 auto; min-width: 0; }
    .center-top-header-container { flex: 1 1 auto; min-width: 0; }
    #history-btn,
    .logo-container { flex: 0 0 auto; }
    .session-title-container {
        flex: 0 1 auto;
        max-width: 60vw;
        min-width: 0;
        /* Keep this a `0` shorthand: a longhand here would re-add the left gap
           that the compact-brand block above deliberately trims. */
        margin: 0;
    }
    .session-title-dropdown-wrapper,
    .session-title-btn { min-width: 0; }

    /* Pin the gear flush right and keep its dropdown on-screen. */
    .settings-container { margin-left: auto; }
    .settings-toggle-btn { margin-right: 0; }

    /* No room at this width; the menu still names the role. */
    #chat-card.hero-active .persona-name {
        display: none;
    }

    .settings-dropdown {
        right: 0;
        left: auto;
        max-width: calc(100vw - 1.5rem);
    }

    /* Hero keeps the wordmark caption here, and the menu lands on it. */
    #chat-card.hero-active .settings-dropdown {
        top: calc(100% + 1.25rem);
    }

    /* Make the relocated theme toggle look like the other menu rows. */
    /* `.setting-item` owns type and spacing; restating them here desyncs the rows. */
    .setting-item.btn {
        border: none !important;
        box-shadow: none !important;
    }
    .settings-divider {
        height: 1px;
        background: rgba(2,6,23,0.08);
        margin: 0.35rem 0;
    }
    html[data-theme='dark'] .settings-divider { background: var(--color-border); }
}

/* --- Map picker: bottom tool bar -------------------------------------------
   Phone replacement for the vertical draw dock: same four tools, laid out
   horizontally under the map. The markup duplicates the dock's data-map-tool
   attributes, so the existing JS wiring picks these up with no changes.
   Hidden by default; the block below switches it on. */
.map-mobile-tools {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
    background: var(--color-card, #fff);
    flex-shrink: 0;
}
.map-mtool {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    min-height: 56px;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--color-border, rgba(0,0,0,0.08));
    border-radius: 14px;
    background: transparent;
    color: var(--color-ink, #131316);
    font-size: 0.68rem; font-weight: 600;
    cursor: pointer;
}
.map-mtool.is-active { background: var(--color-primary); color: #fff; border-color: transparent; }
.map-mtool.map-mtool-danger { color: #d63384; }
.map-mtool.map-mtool-danger.is-active { background: #d63384; color: #fff; }
html[data-theme='dark'] .map-mtool { color: #e5e7eb; }

/* --- Map picker: full-bleed sheet on phones -------------------------------- */
/* The windowed dialog becomes an edge-to-edge sheet. */
@media (max-width: 576px) {
    .map-modal-overlay { padding: 0; align-items: stretch; }
    .map-modal-overlay.open { align-items: stretch; }
    .map-modal-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
    }
    /* Vertical dock out, horizontal bar in. Keep Leaflet's zoom control (no
       scroll wheel on touch) but grow it to a 44px tap target. */
    .map-tool-dock { display: none; }
    .map-mobile-tools { display: grid; }
    .map-container { min-height: 0; }
    .map-container .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
    .map-mode-chip { bottom: 0.7rem; }

    /* Footer stacks: info on top, full-width Confirm below. */
    .map-modal-footer { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom)); }
    .map-modal-footer .map-footer-info { justify-content: space-between; }
    .map-modal-footer .custom-primary-btn { width: 100%; padding: 0.8rem; font-size: 0.95rem; border-radius: 14px; }
    .map-selection-info { max-width: none; white-space: normal; }

    /* Full-width search across the top (chip now lives at the bottom). */
    .map-search-overlay { top: 0.7rem; left: 0.7rem; right: 0.7rem; width: auto; max-width: none; transform: none; }
}

/* --- Touch: long-press a session row instead of hunting the kebab --------- */
@media (hover: none), (pointer: coarse) {
    .list-group-item .session-actions .kebab-btn { display: none !important; }
    /* ...except the currently selected session, which keeps its kebab visible
       so its options are one tap away (higher specificity wins over the hide). */
    .list-group-item.active .session-actions .kebab-btn { display: inline-flex !important; }
    /* Long-press still needs to show the menu, so keep .open working. */
    .list-group-item .session-actions.open .session-menu { display: block; }
    .sessions-overlay .list-group-item { touch-action: manipulation; }
}

/* --- Feedback modal on small screens -------------------------------------- */
@media (max-width: 768px) {
    .feedback-modal-overlay { align-items: center; }
    .feedback-modal-dialog { width: min(96vw, 480px); }
}

/* --- Hero categories -------------------------------------------------------
   Two columns leave ~160px per card on a phone, which wraps the labels, so
   stack them. Note this cannot live in the ≤768px block near the top of the
   file — it precedes the .hero-categories base rule and would lose on source
   order. It silently did exactly that for a long time. */
@media screen and (max-width: 576px) {
    .hero-categories {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .hero-category-btn {
        padding: 0.6rem 0.85rem;
    }
}

/* --- Hero on short viewports ---------------------------------------------- */
/* Vertical centring pushes the glowing icon up under the header where it gets
   clipped, and `align-items: safe center` isn't honoured everywhere. Top-align
   and tighten instead. */
@media (max-height: 720px) {
    .hero-overlay { align-items: flex-start; }
    .hero-content { padding-top: 1.25rem; padding-bottom: 1.25rem; gap: 0.75rem; }
}
@media (max-height: 560px) {
    .hero-icon-wrapper { width: 56px; height: 56px; }
    .hero-icon { width: 44px; height: 44px; }
}
/* After the max-height rules so it wins for phones matching both. */
@media (max-width: 768px) {
    .hero-content { padding-top: 2.5rem; }
}

/* --- Misc mobile polish --------------------------------------------------- */
@media (max-width: 768px) {
    html[data-theme='dark'] #chat-card { border-color: transparent; }

    /* `.hero-input-wrapper` prefix outranks the plain #id rule's margin-left. */
    .location-badge { gap: 0.5rem; padding: 0.4rem 0.6rem 0.4rem 0.4rem; }
    .location-badge-thumb { width: 40px; height: 40px; border-radius: 0.65rem; }
    .hero-input-wrapper #hero-location-badge {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
    }
}

/* --- Login gate on phones ------------------------------------------------- */
@media (max-width: 576px) {
    .login-card {
        padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}
@media (max-height: 560px) {
    .login-card { min-height: 0; }
}

/* The map search box styles itself from scratch rather than using Bootstrap's
   .form-control, so it needs the 16px iOS rule applied separately. */
.map-search-input {
    font-size: 16px;
}

/* --- Attachment gallery (attachment_metadata) ----------------------------- */

.attachment-gallery {
    margin-top: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    padding: 0.75rem;
}

.attachment-gallery-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}
.attachment-gallery-icon {
    display: inline-flex;
    color: #475569;
}
.attachment-gallery-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f172a;
}
.attachment-sep { font-size: 0.75rem; color: #94a3b8; }
.attachment-gallery-sub { font-size: 0.6875rem; color: #475569; }
.attachment-spacer { flex-grow: 1; }
.attachment-plot-chip {
    font-size: 0.65rem;
    font-weight: 600;
    color: #0b6d82;
    background: rgba(var(--color-primary-rgb), 0.10);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
}


.attachment-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.6875rem;
}
.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-card);
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
}
.attachment-chip:hover { border-color: rgba(var(--color-primary-rgb), 0.35); }
.attachment-chip.is-active {
    border-color: rgba(var(--color-primary-rgb), 0.45);
    background: rgba(var(--color-primary-rgb), 0.12);
    color: #0b6d82;
}
.attachment-chip-count { opacity: 0.6; font-variant-numeric: tabular-nums; }
.attachment-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4375rem;
}

.attachment-tile {
    position: relative;
    display: block;
    padding: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border);
    border-radius: 0.5625rem;
    overflow: hidden;
    cursor: pointer;
    /* No width/height comes back in the payload, so reserve the box up front and
       shimmer it until the bitmap lands. */
    background: linear-gradient(100deg, #eef2f7 30%, #f8fafc 50%, #eef2f7 70%);
    background-size: 220% 100%;
    animation: attachment-shimmer 1.4s linear infinite;
}
.attachment-tile.is-loaded,
.attachment-tile--unavailable {
    animation: none;
    background: #f1f5f9;
}
@keyframes attachment-shimmer {
    to { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .attachment-tile { animation: none; }
}
.attachment-tile:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.attachment-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.attachment-thumb[hidden] { display: none; }
.attachment-tile-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.375rem 0.25rem 0.375rem;
    background: linear-gradient(transparent, rgba(2, 6, 23, 0.78));
    font-size: 0.5625rem;
    font-weight: 600;
    color: #ffffff;
    pointer-events: none;
}
.attachment-tile--more .attachment-thumb { filter: brightness(0.75); }
.attachment-tile--more .attachment-tile-caption { display: none; }
.attachment-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.68);
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
}

.attachment-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    color: #94a3b8;
}
.attachment-fallback-text {
    font-size: 0.5625rem;
    color: #64748b;
}

.attachment-gallery-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.625rem;
}
.attachment-gallery-footer:empty { display: none; }
.attachment-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-family: inherit;
    font-size: 0.71875rem;
    font-weight: 600;
    color: #0b6d82;
    background: rgba(var(--color-primary-rgb), 0.10);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.attachment-view-all:hover { background: rgba(var(--color-primary-rgb), 0.16); }
.attachment-view-all-icon { display: inline-flex; }

/* --- Viewer --------------------------------------------------------------- */

body.attachment-viewer-open { overflow: hidden; }

.attachment-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #0b1220;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.attachment-viewer[hidden] { display: none; }

.attachment-viewer-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
    min-height: 34px;
}
/* Only grid mode can run content under the rail, so only it gives up the column.
   In single mode the stage keeps the full width and the rail floats over the
   letterboxing, the way a lightbox normally overlays its controls. */
.attachment-viewer.is-grid .attachment-viewer-filters,
.attachment-viewer.is-grid .attachment-viewer-select,
.attachment-viewer.is-grid .attachment-viewer-grid {
    margin-right: 2.75rem;
}
/* Vertical actions rail: close on top, then grid, then download. */
.attachment-viewer-actions {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.attachment-viewer-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.attachment-viewer-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.attachment-viewer-btn:hover { background: rgba(255, 255, 255, 0.18); }
.attachment-viewer-btn[hidden] { display: none; }

.attachment-viewer-stage {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 0;
}
.attachment-viewer-frame {
    position: relative;
    flex-grow: 1;
    height: 100%;
    min-width: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #060b14;
    display: flex;
    align-items: center;
    justify-content: center;
}
.attachment-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.attachment-viewer-img[hidden] { display: none; }
.attachment-viewer-nav {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.attachment-viewer-nav:hover { background: rgba(255, 255, 255, 0.18); }
.attachment-viewer-nav[hidden] { display: none; }

.attachment-viewer-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}
.attachment-viewer-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--attachment-pill-color, rgba(255, 255, 255, 0.16));
    padding: 0.1875rem 0.5625rem;
    border-radius: var(--radius-pill);
}
.attachment-viewer-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
}
.attachment-viewer-plot {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.70);
}
.attachment-viewer-counter {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.80);
    font-variant-numeric: tabular-nums;
}

.attachment-viewer-grid { display: none; }
.attachment-viewer.is-grid .attachment-viewer-stage,
.attachment-viewer.is-grid .attachment-viewer-meta { display: none; }
.attachment-viewer.is-grid .attachment-viewer-grid {
    display: block;
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* The viewer is dark in both themes, so its scroller must not inherit the page's
   light-mode scrollbar (a near-white track). Two classes deep so it outranks the
   html[data-theme='dark'] globals. */
.attachment-viewer .attachment-viewer-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}
.attachment-viewer .attachment-viewer-grid::-webkit-scrollbar {
    width: 8px;
}
.attachment-viewer .attachment-viewer-grid::-webkit-scrollbar-track {
    background: transparent;
}
.attachment-viewer .attachment-viewer-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
}
.attachment-viewer .attachment-viewer-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
}
.attachment-viewer-group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    padding: 0.625rem 0 0.4375rem 0;
    background: #0b1220;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
}
.attachment-viewer-group-count {
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}
.attachment-viewer-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 0.4375rem;
    margin-bottom: 0.625rem;
}
.attachment-viewer-group-grid .attachment-tile {
    aspect-ratio: 1 / 1;
    border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 576px) {
    .attachment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .attachment-plot-chip { max-width: 45%; }
    .attachment-viewer { padding: 0.75rem; }
    .attachment-viewer-nav { width: 34px; height: 34px; }
    .attachment-viewer-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Dark theme ----------------------------------------------------------- */

html[data-theme='dark'] .attachment-gallery {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme='dark'] .attachment-gallery-count { color: #e2e8f0; }
html[data-theme='dark'] .attachment-gallery-sub,
html[data-theme='dark'] .attachment-gallery-icon { color: #94a3b8; }
html[data-theme='dark'] .attachment-plot-chip {
    color: #7dd3fc;
    background: rgba(var(--color-primary-rgb), 0.18);
}
html[data-theme='dark'] .attachment-chip {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}
html[data-theme='dark'] .attachment-chip.is-active {
    background: rgba(var(--color-primary-rgb), 0.22);
    border-color: rgba(var(--color-primary-rgb), 0.55);
    color: #7dd3fc;
}
html[data-theme='dark'] .attachment-tile {
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(100deg, #1e293b 30%, #273449 50%, #1e293b 70%);
    background-size: 220% 100%;
}
html[data-theme='dark'] .attachment-tile.is-loaded,
html[data-theme='dark'] .attachment-tile--unavailable { background: #1e293b; }
html[data-theme='dark'] .attachment-fallback-text { color: #94a3b8; }
html[data-theme='dark'] .attachment-view-all {
    color: #7dd3fc;
    background: rgba(var(--color-primary-rgb), 0.18);
    border-color: rgba(var(--color-primary-rgb), 0.40);
}
html[data-theme='dark'] .attachment-view-all:hover { background: rgba(var(--color-primary-rgb), 0.26); }

/* Viewer filter row. The viewer is dark in both themes, so these selectors are
   deliberately more specific than the html[data-theme='dark'] chip rules above. */
.attachment-viewer-filters { display: none; }
.attachment-viewer.is-grid .attachment-viewer-filters {
    display: block;
    padding-bottom: 0.625rem;
}
.attachment-viewer .attachment-chips { margin-bottom: 0; }
.attachment-viewer .attachment-chips .attachment-chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.82);
}
.attachment-viewer .attachment-chips .attachment-chip:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.32);
}
.attachment-viewer .attachment-chips .attachment-chip.is-active {
    background: rgba(var(--color-primary-rgb), 0.28);
    border-color: rgba(var(--color-primary-rgb), 0.65);
    color: #7dd3fc;
}

/* --- Bulk-select in the viewer's grid ------------------------------------- */

.attachment-viewer-btn.is-busy { opacity: 0.55; pointer-events: none; }
.attachment-viewer.is-grid.is-selecting .attachment-viewer-download {
    background: rgba(var(--color-primary-rgb), 0.30);
    border-color: rgba(var(--color-primary-rgb), 0.65);
    color: #bae6fd;
}

.attachment-viewer-select { display: none; }
.attachment-viewer.is-grid.is-selecting .attachment-viewer-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
}
.attachment-select-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
}
.attachment-select-link {
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    background: none;
    border: none;
    padding: 0.125rem 0.25rem;
    cursor: pointer;
    text-decoration: underline;
}
.attachment-select-link:hover { color: #ffffff; }
.attachment-select-go {
    font-family: inherit;
    font-size: 0.71875rem;
    font-weight: 600;
    color: #062c36;
    background: #7dd3fc;
    border: 1px solid #7dd3fc;
    padding: 0.375rem 0.8125rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    min-width: 7.5rem;
}
.attachment-select-go:hover:not(:disabled) { background: #a5e3fd; border-color: #a5e3fd; }
.attachment-select-go:disabled { opacity: 0.45; cursor: default; }
.attachment-select-go.is-busy { cursor: progress; }

/* The check badge only exists while selecting. */
.attachment-select-mark { display: none; }
.attachment-viewer.is-selecting .attachment-select-mark {
    display: flex;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 19px;
    height: 19px;
    border-radius: var(--radius-pill);
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    background: rgba(2, 6, 23, 0.45);
    color: transparent;
}
.attachment-viewer.is-selecting .attachment-tile.is-selected .attachment-select-mark {
    background: var(--color-primary);
    border-color: #ffffff;
    color: #ffffff;
}
.attachment-viewer.is-selecting .attachment-tile.is-selected {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.attachment-viewer.is-selecting .attachment-tile.is-selected .attachment-thumb { filter: brightness(0.82); }
.attachment-viewer.is-selecting .attachment-viewer-group-grid .attachment-tile-caption { display: none; }

/* Embed: the host paints its own chrome (maximize/close) over the iframe's
   top-right corner. The viewer is position:fixed, so its controls land under
   that chrome — step them aside the same way .right-top-header-container does,
   off the same variable so one retune covers both. */
/* Embed: the host paints its chrome across the top-right, so the rail starts
   below it. Same idea as --embed-chrome-reserve, measured downward instead. */
html.embed-true .attachment-viewer-actions {
    top: var(--embed-chrome-reserve-top, 52px);
}
/* A short embed pushes the vertically-centred nav arrows up toward the rail. Lay
   it out as a row there instead of shrinking the buttons below a usable size.
   Reversed so close stays at the outer end — top of the column, right of the row. */
@media (max-height: 420px) {
    .attachment-viewer-actions { flex-direction: row-reverse; }
}

/* === Persona features (Sourcing Lead): pill subtitles, + menu submenus, places, tutorial === */

/* --- Quick-action pills with a subtitle ---------------------------------- */
.hero-category-btn .category-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.hero-category-btn .category-desc {
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-muted);
}
html[data-theme='dark'] .hero-category-btn .category-desc { color: #94a3b8; }

/* --- + menu with persona items and in-menu submenus ---------------------- */
.plus-menu.persona-menu {
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    overflow-y: auto;
}
.plus-menu.open-down {
    top: calc(100% + 6px);
    bottom: auto;
}
.plus-menu-item.plus-menu-item-rich {
    gap: 10px;
    padding: 7px 8px;
    border-radius: 0.5rem;
}
.plus-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 0.5rem;
    background: rgba(0,162,197,0.08);
    color: var(--color-primary);
}
.plus-menu-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.plus-menu-label {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
    color: #1e293b;
}
.plus-menu-desc {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--color-muted);
}
.plus-menu-chevron { display: flex; }
.plus-menu-item .plus-menu-chevron svg { color: #94a3b8; }
.plus-menu-divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--color-border);
}
.plus-menu-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 8px;
    font-size: 0.75rem;
}
.plus-menu-crumb,
.plus-menu-retry {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}
.plus-menu-crumb-sep { color: #94a3b8; }
.plus-menu-crumb-current {
    font-weight: 600;
    color: #334155;
}
.plus-menu-item.plus-menu-sub-item {
    padding: 8px;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}
.plus-menu-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    font-size: 0.75rem;
    color: var(--color-muted);
}
html[data-theme='dark'] .plus-menu-icon {
    background: rgba(0,162,197,0.12);
    color: #69d9f0;
}
html[data-theme='dark'] .plus-menu-label,
html[data-theme='dark'] .plus-menu-crumb-current { color: #e5e7eb; }
html[data-theme='dark'] .plus-menu-desc { color: #94a3b8; }

/* --- Places list in the chat --------------------------------------------- */
.bot-message-bubble.places-bubble { width: 100%; }
.places-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.places-group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
}
.places-type-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 3px;
}
.places-group-count {
    font-weight: 500;
    color: var(--color-muted);
}
.places-table {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}
.places-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 3.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
}
/* Fixed last column: each row is its own grid, so an auto width would differ row to row. */
.places-table.has-coverage .places-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 4.5rem 3.5rem; }
.places-row:first-child { border-top: 0; }
.places-head {
    background: rgba(0,162,197,0.05);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-muted);
}
.places-name {
    overflow-wrap: anywhere;
    font-weight: 500;
    color: #1e293b;
}
.places-loc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #475569;
}
.places-cov {
    white-space: nowrap;
    text-align: right;
    color: #475569;
}
.places-head .places-name,
.places-head .places-loc,
.places-head .places-cov {
    font-weight: 600;
    color: inherit;
}
.places-act {
    display: flex;
    justify-content: flex-end;
}
.places-ask {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem 0.15rem 0.3rem;
    border: 1px solid rgba(0,162,197,0.35);
    border-radius: 999px;
    background: rgba(0,162,197,0.06);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary);
    white-space: nowrap;
}
.places-ask img { width: 14px; height: 14px; }
.places-ask:hover { background: rgba(0,162,197,0.14); }
.places-ask:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.places-popup .places-ask { margin-top: 0.45rem; }
.places-more {
    margin-top: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}
html[data-theme='dark'] .places-group-title,
html[data-theme='dark'] .places-name { color: #e5e7eb; }
html[data-theme='dark'] .places-loc,
html[data-theme='dark'] .places-cov { color: #cbd5e1; }
html[data-theme='dark'] .places-head { background: rgba(255,255,255,0.04); }

.places-view-toggle {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 0.75rem;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}
.places-view-btn {
    padding: 0.25rem 1rem;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted);
}
.places-view-btn:hover { color: var(--color-primary); }
.places-view-btn[aria-pressed='true'] {
    background: rgba(0,162,197,0.1);
    color: var(--color-primary);
}
.places-view-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.places-map-shell {
    position: relative;
    height: clamp(340px, 60vh, 560px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}
/* Own stacking context, so Leaflet's panes and controls stay under the type panel. */
.places-map {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.places-map .leaflet-control-attribution { font-size: 0.625rem; }
.places-map-note {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--color-muted);
}
.places-map-panel {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    width: 176px;
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 4px 16px -4px rgba(2,6,23,0.3);
    font-size: 0.75rem;
}
.places-map-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 0;
    background: none;
    font-weight: 600;
    color: #1e293b;
}
.places-map-panel-chevron { display: flex; color: #64748b; transform: rotate(-90deg); transition: transform 0.15s; }
.places-map-panel.collapsed .places-map-panel-chevron { transform: rotate(90deg); }
.places-map-panel-head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 0.5rem; }
.places-map-types {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 0.65rem 0.6rem;
}
.places-map-panel.collapsed { width: auto; }
.places-map-panel.collapsed .places-map-panel-head { gap: 0.5rem; }
.places-map-panel.collapsed .places-map-types { display: none; }
.places-map-type {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: #1e293b;
    cursor: pointer;
}
.places-map-type-name { flex: 1; }
.places-map-type-count { color: var(--color-muted); }
.places-switch {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 14px;
    margin: 0;
    border-radius: 999px;
    background: #cbd5e1;
    appearance: none;
    cursor: pointer;
    transition: background 0.15s;
}
.places-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}
.places-switch:checked { background: #264554; }
.places-switch:checked::before { transform: translateX(12px); }
.places-switch:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.places-cluster-wrap { background: none; border: 0; }
.places-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(159,239,206,0.94);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    color: #264554;
}
.places-cluster-count { font-size: 12px; }
.places-popup-wrap .leaflet-popup-content { margin: 0.5rem 0.75rem; }
.places-popup-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
}
.places-popup-meta {
    font-size: 0.75rem;
    color: #475569;
}
html[data-theme='dark'] .places-map-panel { background: rgba(15,23,42,0.94); }
html[data-theme='dark'] .places-map-panel-head,
html[data-theme='dark'] .places-map-type,
html[data-theme='dark'] .places-popup-name { color: #e5e7eb; }
html[data-theme='dark'] .places-popup-meta { color: #cbd5e1; }
html[data-theme='dark'] .places-switch { background: #475569; }
html[data-theme='dark'] .places-switch:checked { background: var(--color-primary); }
@media (max-width: 576px) {
    .places-row {
        gap: 0.5rem;
        padding: 0.45rem 0.6rem;
        font-size: 0.75rem;
    }
    .places-map-shell { height: clamp(280px, 50vh, 420px); }
    .places-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 1.75rem; }
    .places-table.has-coverage .places-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 3.5rem 1.75rem; }
    .places-row .places-ask { padding: 0.3rem; }
    .places-row .places-ask-label { display: none; }
}
@media print {
    .places-view-toggle,
    .places-map-view { display: none !important; }
    .places-list.d-none { display: flex !important; }
}

/* --- Add a Place --------------------------------------------------------- */
/* Zeplin "Add place_confirmed location"; the map takes the height the fields leave, then the body scrolls. */
.map-modal-dialog.add-place-dialog {
    width: min(96vw, 566px);
    height: min(calc(100dvh - 2rem), 760px);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.25);
}
.add-place-overlay.clear-host { padding-top: 40px; padding-bottom: 6px; }
.add-place-overlay.clear-host .map-modal-dialog.add-place-dialog { height: min(calc(100dvh - 46px), 760px); }
.add-place-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 18px 19px 8px;
}
.add-place-title {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.17;
    letter-spacing: -0.44px;
    color: #264554;
}
.add-place-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #264554;
}
.add-place-close:hover { background: rgba(38,69,84,0.08); }
.add-place-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    /* Bottom room so the last field's focus ring isn't clipped by the scroll box. */
    padding: 0 19px 4px;
    overflow-y: auto;
}
.add-place-body > *,
.add-place-new > * { flex-shrink: 0; }
.add-place-new {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 6px;
}
.add-place-label {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #14181a;
}
.add-place-label-gap { margin-top: 4px; }
.add-place-req { margin-left: 1px; color: #c00; }
.add-place-close:focus-visible,
.add-place-geo:focus-within,
.add-place-input:focus,
.add-place-radius input:focus,
.add-place-dd-btn:focus-visible,
.add-place-btn-outline:focus-visible,
.add-place-map-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,162,197,0.2);
}
.add-place-input:focus,
.add-place-radius input:focus,
.add-place-dd-btn:focus-visible { border-color: var(--color-primary); }

/* Instruction under "Select Location"; the search itself lives on the map. */
.add-place-hint {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin: 0 0 2px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #f4f3f4;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: #6d6d6d;
}
.add-place-results-head {
    padding: 0.35rem 0.55rem 0.1rem;
    font-size: 11px;
    font-weight: 600;
    color: #6d6d6d;
}
.add-place-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.add-place-result {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.add-place-result-text { min-width: 0; }

/* Map and the selected-location bar, one rounded block */
.add-place-new > .add-place-map-block {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
}
/* Tall enough for the search box, zoom and location buttons not to touch. */
.add-place-map-shell {
    position: relative;
    flex: 1 0 auto;
    min-height: 200px;
}
.add-place-map {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: crosshair;
}
.add-place-map .leaflet-control-attribution { font-size: 0.625rem; }
.add-place-map-controls {
    position: absolute;
    right: 13px;
    bottom: 22px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.add-place-zoom {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.add-place-zoom button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: #264554;
}
.add-place-zoom button + button { border-top: 1px solid #e2e2e2; }
.add-place-zoom button:hover { background: #f4f3f4; }
.add-place-zoom button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(0,162,197,0.5); }
.add-place-search {
    position: absolute;
    top: 14px;
    left: 12px;
    right: 12px;
    z-index: 2;
}
.add-place-geo {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border-radius: 14px;
    background: #f4f3f4;
}
.add-place-geo-icon { display: flex; color: #264554; }
.add-place-geo input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #14181a;
}
.add-place-geo input::placeholder { color: #4f6874; }
/* Fits inside the shortest map, which clips anything below it. */
.add-place-search .map-search-results-scroll { max-height: 10rem; }
.add-place-map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    color: #264554;
}
.add-place-map-btn:hover { background: #f4f3f4; }
.add-place-map-btn.is-loading { opacity: 0.6; }
.add-place-radius {
    position: absolute;
    left: 13px;
    bottom: 22px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    margin: 0;
    padding: 0 7px 0 8px;
    border-radius: 7px;
    background: rgba(255,255,255,0.9);
}
.add-place-dialog.is-existing .add-place-radius { display: none; }
.add-place-radius label {
    margin: 0 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: #264554;
}
.add-place-radius input {
    width: 45px;
    height: 25px;
    padding: 0 4px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: #14181a;
    -moz-appearance: textfield;
    appearance: textfield;
}
.add-place-radius input::placeholder { color: #6b7280; }
.add-place-radius input::-webkit-outer-spin-button,
.add-place-radius input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.add-place-selected {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    min-height: 40px;
    padding: 4px 14px;
    background: #f4f3f4;
    font-size: 12px;
    font-weight: 500;
    color: #6d6d6d;
    overflow-wrap: anywhere;
}
.add-place-selected-empty { font-style: italic; }

/* Place name input and the styled dropdowns */
.add-place-input,
.add-place-dd-btn {
    width: 100%;
    height: 44px;
    padding: 2px 10px;
    border: 1px solid #c5cacc;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #14181a;
}
.add-place-input::placeholder { color: #8a9399; font-weight: 400; }
.add-place-dd { position: relative; }
.add-place-dd-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
}
.add-place-dd-btn[aria-expanded='true'] { border-color: rgba(0,162,197,0.6); }
.add-place-dd-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.add-place-dd.is-empty .add-place-dd-value { color: #8a9399; font-weight: 400; }
.add-place-dd-chevron { display: flex; color: #5f6162; transition: transform 0.15s; }
.add-place-dd-btn[aria-expanded='true'] .add-place-dd-chevron { transform: rotate(180deg); }
.add-place-dd-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10;
    min-width: 100%;
    max-height: 14rem;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px -8px rgba(2,6,23,0.28);
    outline: none;
}
.add-place-dd.open-up .add-place-dd-list { top: auto; bottom: calc(100% + 4px); }
.add-place-dd-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: #14181a;
    cursor: pointer;
}
.add-place-dd-option-label { flex: 1; }
.add-place-dd-option.is-active { background: #f4f3f4; }
.add-place-dd-option[aria-selected='true'] { color: #264554; font-weight: 600; }
.add-place-dd-check { display: flex; visibility: hidden; color: #264554; }
.add-place-dd-option[aria-selected='true'] .add-place-dd-check { visibility: visible; }
/* Unit picker inside the coverage radius field: shows just the short form. */
.add-place-radius .add-place-dd-btn {
    width: auto;
    height: 25px;
    gap: 2px;
    padding: 0 2px 0 4px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    color: #264554;
}
.add-place-radius .add-place-dd-btn:hover { background: rgba(38,69,84,0.08); }
.add-place-radius .add-place-dd-chevron svg { width: 12px; height: 12px; }
.add-place-radius .add-place-dd-list { min-width: 9.5rem; }

/* Existing place notice */
.add-place-notice {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f4f3f4;
    font-size: 14px;
    color: #14181a;
}
.add-place-notice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.add-place-notice-actions .places-more { margin-top: 0; }

/* Footer buttons */
.add-place-footer {
    display: flex;
    flex-shrink: 0;
    gap: 13px;
    padding: 4px 19px 18px;
}
.add-place-btn {
    flex: 1 1 0;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}
.add-place-btn-outline {
    border: 1px solid #264554;
    background: #fff;
    color: #264554;
}
.add-place-btn-outline:hover { background: rgba(38,69,84,0.05); }
.add-place-footer .custom-primary-btn:disabled {
    border-color: #c5cacc;
    background: #c5cacc;
    color: #fff;
    opacity: 1;
}

/* Chat card after a place is added */
.add-place-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}
.add-place-card .places-type-icon { width: 24px; height: 24px; }
.add-place-card-text { min-width: 0; }

html[data-theme='dark'] .add-place-title,
html[data-theme='dark'] .add-place-close,
html[data-theme='dark'] .add-place-label,
html[data-theme='dark'] .add-place-notice { color: #e5e7eb; }
html[data-theme='dark'] .add-place-hint,
html[data-theme='dark'] .add-place-geo,
html[data-theme='dark'] .add-place-selected,
html[data-theme='dark'] .add-place-notice { background: #1e293b; color: #cbd5e1; }
html[data-theme='dark'] .add-place-geo input::placeholder { color: #94a3b8; }
html[data-theme='dark'] .add-place-results-head { color: #94a3b8; }
html[data-theme='dark'] .add-place-geo input,
html[data-theme='dark'] .add-place-geo-icon { color: #e5e7eb; }
html[data-theme='dark'] .add-place-radius { background: rgba(15,23,42,0.92); }
html[data-theme='dark'] .add-place-radius label,
html[data-theme='dark'] .add-place-radius .add-place-dd-btn { color: #e5e7eb; }
html[data-theme='dark'] .add-place-radius input,
html[data-theme='dark'] .add-place-input,
html[data-theme='dark'] .add-place-dd-btn { border-color: rgba(148,163,184,0.3); background: #0f172a; color: #e5e7eb; }
html[data-theme='dark'] .add-place-radius .add-place-dd-btn { background: transparent; }
html[data-theme='dark'] .add-place-dd-list { border-color: rgba(148,163,184,0.25); background: #1e293b; }
html[data-theme='dark'] .add-place-dd-option { color: #e5e7eb; }
html[data-theme='dark'] .add-place-dd-option.is-active { background: rgba(148,163,184,0.15); }
html[data-theme='dark'] .add-place-dd-option[aria-selected='true'],
html[data-theme='dark'] .add-place-dd-check { color: #69d9f0; }
html[data-theme='dark'] .add-place-map-btn,
html[data-theme='dark'] .add-place-zoom { background: #1e293b; color: #e5e7eb; }
html[data-theme='dark'] .add-place-zoom button { color: #e5e7eb; }
html[data-theme='dark'] .add-place-zoom button + button { border-top-color: rgba(148,163,184,0.25); }
html[data-theme='dark'] .add-place-btn-outline { border-color: #94a3b8; background: transparent; color: #e5e7eb; }
html[data-theme='dark'] .add-place-footer .custom-primary-btn:disabled { border-color: #334155; background: #334155; color: #94a3b8; }
@media (max-height: 760px) {
    .map-modal-dialog.add-place-dialog { height: calc(100dvh - 1rem); }
}
@media (max-width: 576px) {
    .map-modal-dialog.add-place-dialog { height: 100dvh; border-radius: 0; }
    .add-place-overlay.clear-host { padding-bottom: 0; }
    .add-place-overlay.clear-host .map-modal-dialog.add-place-dialog { height: calc(100dvh - 40px); }
    .add-place-header { padding: 16px 14px 10px; }
    .add-place-body { padding: 0 14px 4px; }
    .add-place-footer { padding: 14px; }
}

/* --- Welcome and tutorial ------------------------------------------------ */
/* Set from <head> until the persona is known, so a first-run tutorial never opens over a home screen in use. */
html.persona-pending #chat-card.hero-active .hero-overlay {
    opacity: 0;
    pointer-events: none;
}
/* Sits below the card header (top is set from JS) so the panel chrome stays visible. */
.onboarding-overlay {
    position: absolute;
    inset: 0;
    z-index: 1600;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f8fcff;
}
.onboarding-overlay.open { display: flex; }
.onboarding-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 640px;
    margin: auto;
    padding: 1.5rem 1.25rem 1.75rem;
    text-align: center;
}
.onboarding-logo {
    width: 56px;
    height: 56px;
}
.onboarding-title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: #264554;
}
.onboarding-welcome .onboarding-title { font-weight: 500; }
.onboarding-subtitle {
    margin: -0.35rem 0 0.25rem;
    font-size: 14px;
    font-weight: 500;
    color: #7d8f98;
}
.onboarding-illustration {
    width: min(300px, 80%);
    height: auto;
}
.onboarding-role {
    margin: 0;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    background: rgba(0,162,197,0.06);
    font-size: 0.8125rem;
    color: #334155;
}
.onboarding-role-name {
    font-weight: 600;
    color: var(--color-primary);
}
.onboarding-note {
    max-width: 420px;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-muted);
}
/* Same height on every slide (two-line title and subtitle, fixed image frame), so nothing moves between steps. */
.onboarding-slide { --onboarding-image-height: max(200px, min(400px, calc(100dvh - 358px))); }
.onboarding-slide .onboarding-title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2.7em;
}
.onboarding-slide .onboarding-subtitle {
    min-height: 2.8em;
    line-height: 1.4;
}
.onboarding-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.onboarding-slide .onboarding-image-frame { height: var(--onboarding-image-height); }
/* Widget-only shots are tall, so they fit the frame's height as well as its width. */
.onboarding-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
}
.onboarding-dots {
    display: flex;
    gap: 10px;
    margin-top: 0.25rem;
}
.onboarding-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d9d9;
    cursor: pointer;
}
.onboarding-dot[aria-current='step'] { background: #3fb5e7; }
/* Zeplin: 203px (Next/Finish) or 342px (Continue) wide, 40px tall, teal-to-blue gradient. */
.btn.onboarding-primary {
    width: 203px;
    max-width: 100%;
    height: 40px;
    margin-top: 0.5rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(to right, #35cab9, #41b1f1);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.onboarding-welcome .btn.onboarding-primary { width: 342px; }
/* Focus is moved here on every step, and Bootstrap's hover/focus styles would replace the gradient. */
.btn.onboarding-primary:hover,
.btn.onboarding-primary:focus-visible,
.btn.onboarding-primary:active {
    background: linear-gradient(to right, #35cab9, #41b1f1);
    color: #fff;
}
.btn.onboarding-primary:hover { filter: brightness(1.05); }
.btn.onboarding-primary:focus-visible { box-shadow: 0 0 0 .2rem rgba(65,177,241,.35); }
.onboarding-skip {
    padding: 0.25rem 0.75rem;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #264554;
    cursor: pointer;
}
.onboarding-skip:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
    .onboarding-view { animation: onboardingIn 180ms ease both; }
    .onboarding-from-right { animation: onboardingFromRight 240ms ease-out both; }
    .onboarding-from-left { animation: onboardingFromLeft 240ms ease-out both; }
}
@keyframes onboardingFromRight {
    from { opacity: 0; transform: translateX(36px); }
    to { opacity: 1; transform: none; }
}
@keyframes onboardingFromLeft {
    from { opacity: 0; transform: translateX(-36px); }
    to { opacity: 1; transform: none; }
}
@keyframes onboardingIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
html[data-theme='dark'] .onboarding-overlay { background: #0f172a; }
html[data-theme='dark'] .onboarding-title { color: #e5e7eb; }
html[data-theme='dark'] .onboarding-role {
    background: rgba(0,162,197,0.12);
    color: #cbd5e1;
}
html[data-theme='dark'] .onboarding-skip { color: #cbd5e1; }
html[data-theme='dark'] .onboarding-dot { background: #475569; }
html[data-theme='dark'] .onboarding-dot[aria-current='step'] { background: var(--color-primary); }
@media (max-width: 576px) {
    .onboarding-view { padding: 1rem 1rem 1.25rem; }
    .onboarding-title { font-size: 18px; }
    .btn.onboarding-primary { width: 100%; }
}
@media print {
    .onboarding-overlay { display: none !important; }
}

/* === 404 Page === */
body.not-found-page {
    overflow: auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}
.not-found-card {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem 2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.94));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.not-found-logo { display: inline-flex; margin-bottom: 1.75rem; }
.not-found-logo .logo-dark { display: none; }
.not-found-code {
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(90deg, var(--color-primary), var(--color-quaternary), var(--color-secondary), var(--color-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 8s ease infinite;
}
.not-found-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0.75rem 0 0.5rem;
}
.not-found-text {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-muted);
    margin: 0 0 1.75rem;
}
.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
}
.not-found-actions .btn {
    flex: 1 1 140px;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.btn.not-found-btn-primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.28);
}
.btn.not-found-btn-primary:hover,
.btn.not-found-btn-primary:focus-visible {
    background: #008fae;
    border-color: #008fae;
    color: #fff;
}
.btn.not-found-btn-secondary {
    background: transparent;
    border: 1px solid var(--color-border);
    color: #0f172a;
}
.btn.not-found-btn-secondary:hover,
.btn.not-found-btn-secondary:focus-visible {
    background: rgba(var(--color-primary-rgb), 0.08);
    border-color: rgba(var(--color-primary-rgb), 0.35);
    color: var(--color-primary);
}
html[data-theme='dark'] .not-found-card {
    background: linear-gradient(180deg, rgba(15,23,42,0.78), rgba(15,23,42,0.86));
    box-shadow: 0 10px 30px rgba(2,6,23,0.5);
}
html[data-theme='dark'] .not-found-logo .logo-light { display: none; }
html[data-theme='dark'] .not-found-logo .logo-dark { display: inline; }
html[data-theme='dark'] .not-found-title { color: #f1f5f9; }
html[data-theme='dark'] .btn.not-found-btn-secondary { color: #e5e7eb; }
html[data-theme='dark'] .btn.not-found-btn-secondary:hover,
html[data-theme='dark'] .btn.not-found-btn-secondary:focus-visible {
    background: rgba(var(--color-primary-rgb), 0.14);
    color: #fff;
}
@media (max-width: 576px) {
    .not-found-card { padding: 2rem 1.25rem 1.5rem; }
    .not-found-code { font-size: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .not-found-card, .not-found-code { animation: none; }
}