/* ══════════════════════════════════════════════════════════════════════
   INOTEX theme — minimal modular brick design system
   Palette: official INOTEX colors only (see :root tokens). Layout comes
   from static/chat/base.css; this file styles visuals exclusively.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* — Official INOTEX base palette — */
    /* Every --wl-* token ships from the whitelabel_* branding settings (see
       app/services/branding.py — Settings > Branding owns ALL theme colors);
       the var() fallbacks keep the official palette when branding is unset.
       The primary/accent mapping below is INTENTIONALLY crossed and must
       not be "fixed": --wl-primary (#2D5CA7, blue) feeds --inotex-blue and
       --wl-accent (#FCB715, yellow) feeds --inotex-primary, because the
       leads pages already established primary=blue / accent=yellow
       semantics for these keys. */
    --inotex-primary: var(--wl-accent, #FCB715);
    --inotex-yellow-light: var(--wl-yellow-light, #FEBE27);
    --inotex-blue: var(--wl-primary, #2D5CA7);
    --inotex-navy: var(--wl-navy, #1E2D52);
    --inotex-teal: var(--wl-teal, #04A584);
    --inotex-dark-teal: var(--wl-dark-teal, #00644F);
    --inotex-background: var(--wl-background, #000000);
    --inotex-white: var(--wl-white, #FFFFFF);
    /* Background photos behind the two tabs. Both ship the same brick
       photo; Settings > Branding (پس‌زمینهٔ چت / پس‌زمینهٔ ویدیو) can point
       each tab at its own image. */
    --inotex-chat-bg: var(--wl-chat-background, url("/themes/inotex/static/bg-bricks.jpg"));
    --inotex-video-bg: var(--wl-video-background, url("/themes/inotex/static/bg-bricks.jpg"));

    /* — Semantic mapping — */
    --color-page-background: var(--inotex-background);
    --color-surface-primary: var(--inotex-navy);
    --color-surface-sunken: #141F3A;          /* navy, darker tonal variant */
    --color-surface-raised: #27396634;        /* navy alpha variant */
    --color-surface-interactive: var(--inotex-blue);
    --color-action-primary: var(--inotex-primary);
    --color-action-primary-hover: var(--inotex-yellow-light);
    --color-accent-information: var(--inotex-blue);
    --color-accent-success: var(--inotex-teal);
    --color-accent-success-dark: var(--inotex-dark-teal);
    --color-text-primary: var(--inotex-white);
    --color-text-muted: #B8C4DE;              /* navy-tinted light tonal */
    --color-text-on-yellow: var(--inotex-background);
    --color-border-interactive: var(--inotex-blue);
    --color-border-subtle: #2D5CA74D;
    --color-focus-ring: var(--inotex-yellow-light);

    /* — Brick geometry — */
    --brick-unit: 8px;
    --stud-size: 6px;
    --compact-radius: 10px;
    --panel-radius: 16px;
    --raised-depth: 0 2px 0 rgba(0, 0, 0, .55), 0 8px 22px rgba(0, 0, 0, .45);
    --panel-gap: 14px;
    --border-width: 1.5px;

    /* — Motion — */
    --motion-instant: 80ms;
    --motion-fast: 160ms;
    --motion-normal: 260ms;
    --motion-deliberate: 420ms;

    /* — Reading column —
       The transcript and the composer share ONE measure so they line up on the
       same edges and the conversation reads as a framed column instead of text
       running the full width of a 1440px display. This is the same device the
       previous theme used (--chat-measure); it is a theme-level constraint, so
       the shared skeleton in static/chat/base.css is untouched. */
    --chat-measure: 858px;

    /* Legacy variable names some shared rules reference */
    --secondary-blue: var(--inotex-blue);
}

/* The framed conversation column, centred in the view. */
div#text-view {
    width: var(--chat-measure);
    max-width: 100%;
    margin: 0 auto;
    height: calc(100% - 117px);
    position: relative;
}

/* base.css caps the composer at 800px; it must share the transcript's edge. */
#input-area {
    max-width: var(--chat-measure);
    margin: 0 auto;
}

.input-wrapper { max-width: var(--chat-measure); }

.wrapper {
    width: var(--chat-measure);
    max-width: 100%;
    margin: 0 auto;
}

/* The video tab is a full-bleed stage — the reading measure does not apply. */
body.video-mode div#text-view { width: 100%; }


/* ── Page ─────────────────────────────────────────────────────────── */
/* The body carries ONLY the base colour. The brick photo belongs to the
   view area (.view-container) — the element the visitor actually reads —
   where it composes with the stud texture and the darkening gradient in
   one coherent stack. The header and the composer keep their own panel
   surfaces, so the photo frames the conversation instead of the shell. */
body {
    background-color: var(--color-page-background);
    color: var(--color-text-primary);
    font-family: "Vazirmatn", system-ui, sans-serif;
}

/* Brick photo + subtle stud texture over it, darkened edge-to-edge.
   The image is the branding setting پس‌زمینهٔ چت; the video tab gets its
   own (same form) below. */
.view-container {
    background:
        radial-gradient(circle at center, rgba(45, 92, 167, 0.05) 1.2px, transparent 1.3px) 0 0 / 26px 26px,
        linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .42)),
        var(--inotex-chat-bg) center bottom / cover no-repeat,
        var(--color-page-background);
}

/* The video tab paints its own photo — same stack, its own setting. */
body.video-mode .view-container {
    background:
        radial-gradient(circle at center, rgba(45, 92, 167, 0.05) 1.2px, transparent 1.3px) 0 0 / 26px 26px,
        linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .42)),
        var(--inotex-video-bg) center bottom / cover no-repeat,
        var(--color-page-background);
}

/* ── Header ───────────────────────────────────────────────────────── */
header.inx-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--panel-gap);
    padding: 10px 18px;
    background: var(--color-surface-primary);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .5);
    position: relative;
    z-index: 999;
}

/* stud strip along the header base — the "brick edge" */
header.inx-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg,
            transparent, var(--inotex-blue) 18%, var(--inotex-blue) 82%, transparent);
    opacity: .5;
    pointer-events: none;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Now living in menu.html's sidebar header instead of the removed header
   logo. The brand mark itself moved into .menu-sidebar-toggle-btn (below) so
   it stays visible at every width; .logo-container is left holding only the
   two-line title, which the collapsed rail (76px, static/chat/base.css) has
   no room for. */
.menu-drawer.collapsed .menu-sidebar-header .logo-container .the-slogan {
    display: none;
}

/* Inotex keeps the full 38px brand mark inside the toggle button in both
   states, not only the collapsed rail the base shell assumes — the mark
   used to sit in .the-logo beside the title; it now lives in the button
   that used to hold just a compact stand-in. At rest the mark is what a
   visitor sees and clicks to collapse the sidebar; on hover it swaps to the
   rail icon, the same choreography base.css already gives the collapsed
   state, just applied here unconditionally. */
.menu-sidebar-toggle-btn {
    width: 38px;
    height: 38px;
}

.menu-sidebar-toggle-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity var(--motion-fast, .15s) ease;
}

.menu-sidebar-toggle-icon {
    opacity: 0;
    transition: opacity var(--motion-fast, .15s) ease;
}

.menu-sidebar-toggle-btn:hover .menu-sidebar-toggle-logo,
.menu-sidebar-toggle-btn:focus-visible .menu-sidebar-toggle-logo {
    opacity: 0;
}

.menu-sidebar-toggle-btn:hover .menu-sidebar-toggle-icon,
.menu-sidebar-toggle-btn:focus-visible .menu-sidebar-toggle-icon {
    opacity: 1;
}

/* .menu-sidebar-header's real layout (flex, space-between, the 32px logo
   sizing it used to hold) only ever existed inside base.css's desktop
   (min-width: 992px) rule — menu.html's own comment calls this block
   "desktop-only... hidden below the 992px breakpoint", but nothing actually
   hid it below that width. It went unnoticed while the slot held one small
   icon-only span; the full brand mark + two-line title moved in above does
   not fit unstyled, so enforce the documented intent here. */
@media (max-width: 991.98px) {
    .menu-sidebar-header {
        display: none;
    }
}

.header-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-subtitle {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .35em;
    color: var(--inotex-primary);
}

/* ── Tab switcher: brick pill ─────────────────────────────────────── */
.switcher {
    display: flex;
    border: var(--border-width) solid var(--color-border-interactive);
    border-radius: 999px;
    background: var(--color-surface-sunken);
    padding: 3px;
    gap: 3px;
    margin: 0;
}

.switcher__legend {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.switcher__option {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 600;
    transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
    user-select: none;
}

.switcher__option:hover { color: var(--color-text-primary); }

.switcher__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switcher__option:has(.switcher__input:checked) {
    background: var(--color-surface-interactive);
    color: var(--color-text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 8px rgba(0, 0, 0, .4);
}

.switcher__option:has(.switcher__input:focus-visible) {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Header tools ─────────────────────────────────────────────────── */
.header-tools { display: flex; align-items: center; gap: 8px; }

/* Hamburger drawer — --color-surface-primary already has a light-mode
   redefinition (see body.light-mode below), so this adapts for free. */
.menu-drawer {
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
}

.menu-section {
    border-color: var(--color-border-subtle);
}

.theme-btn,
.lang-btn,
.a11y-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: var(--border-width) solid var(--color-border-interactive);
    border-radius: 999px;
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.theme-btn:hover,
.lang-btn:hover,
.a11y-btn:hover { background: var(--color-surface-interactive); }

.theme-btn:focus-visible,
.lang-btn:focus-visible,
.a11y-btn:focus-visible,
.switcher__input:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Chat bubbles: stacked brick cards ────────────────────────────── */
.message .bubble {
    position: relative;
    border-radius: var(--panel-radius);
    padding: 12px 16px;
    line-height: 1.9;
    box-shadow: var(--raised-depth);
    border: var(--border-width) solid transparent;
}

/* user: interactive-blue outline card */
.message.user .bubble {
    background: linear-gradient(180deg, #24396B, var(--color-surface-primary));
    border-color: var(--color-border-interactive);
    color: var(--color-text-primary);
}

/* bot: navy card with hexagon mark + yellow accent edge.
   Surface and border are fully opaque: at 30% border alpha over the black
   brick background the card edge disappeared and the answer read as loose
   text on the page instead of a message card. */
.message.bot .bubble {
    background: linear-gradient(180deg, #223258, #182642);
    border-color: var(--inotex-blue);
    color: var(--color-text-primary);
    padding-inline-start: 20px;
}

.message.bot .bubble::before {
    /* stud pair on the card corner — the brick signature */
    content: "";
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    width: calc(var(--stud-size) * 2 + 5px);
    height: var(--stud-size);
    background:
        radial-gradient(circle at calc(var(--stud-size)/2) 50%, var(--inotex-blue) 45%, transparent 50%) 0 0 / calc(var(--stud-size) + 5px) 100% repeat-x;
    opacity: .85;
    pointer-events: none;
}

.bubble-mark {
    position: absolute;
    top: -7px;
    inset-inline-start: 14px;
    width: 14px;
    height: 14px;
    background: var(--inotex-primary);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.bubble-text { min-width: 0; }
.bubble a { color: #7FA8E8; }
.bubble strong { color: var(--inotex-yellow-light); }

/* typing indicator — one yellow stud like the reference sheet */
.typing-indicator .dot { background: var(--inotex-blue); }
.typing-indicator .dot:nth-child(3) { background: var(--inotex-primary); }

.ai-loader { display: flex; align-items: center; gap: 10px; }
.ai-loader-label { color: var(--color-text-muted); font-size: 13px; }
.ai-loader-studs { display: inline-flex; gap: 5px; }
.ai-loader-studs i {
    width: var(--stud-size);
    height: var(--stud-size);
    border-radius: 50%;
    background: var(--inotex-blue);
    animation: inx-stud-pulse 1.1s ease-in-out infinite;
}
.ai-loader-studs i:nth-child(2) { animation-delay: .18s; }
.ai-loader-studs i:nth-child(3) { animation-delay: .36s; background: var(--inotex-primary); }

@keyframes inx-stud-pulse {
    0%, 100% { transform: translateY(0); opacity: .6; }
    50% { transform: translateY(-4px); opacity: 1; }
}

/* ── Suggested-question chips: brick chips ────────────────────────── */
.suggest-menu { margin: 6px 4px 10px; }

.suggest-title {
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

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

.suggest-chips button,
.questions-list li,
.show-more-btn {
    background: var(--color-surface-primary);
    border: var(--border-width) solid var(--color-border-interactive);
    border-radius: 999px;
    color: var(--color-text-primary);
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease,
        transform var(--motion-instant) ease;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

.suggest-chips button:hover,
.questions-list li:hover,
.show-more-btn:hover {
    background: var(--color-surface-interactive);
    transform: translateY(-1px);
}

.suggest-chips button:active { transform: translateY(1px); }

.suggest-chips button:focus-visible,
.questions-list li:focus-visible,
.show-more-btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Composer ─────────────────────────────────────────────────────── */
/* base.css lays #input-area out as a row; the credit line lives under the
   input, so stack them (matches the coordinated composer reference). */
#input-area {
    background: transparent;
    flex-direction: column;
    align-items: stretch;
}

.input-wrapper {
    position: relative;
    background: linear-gradient(180deg, #223258, var(--color-surface-sunken));
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--panel-radius);
    box-shadow: var(--raised-depth);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.input-wrapper:focus-within {
    border-color: var(--color-border-interactive);
    box-shadow: 0 0 0 3px #2D5CA74D, var(--raised-depth);
}

#user-input {
    background: transparent;
    color: var(--color-text-primary);
    font-family: inherit;
}

#user-input::placeholder { color: var(--color-text-muted); opacity: .75; }

#user-input:focus { outline: none; }

html[lang="fa"] #user-input { padding-right: 40px; }
html[lang="en"] #user-input { padding-left: 38px; }

/* composer stud cluster (decorative, like the reference sheet) */
.composer-studs {
    position: absolute;
    top: 10px;
    inset-inline-start: 12px;
    right: auto;
    display: grid;
    grid-template-columns: repeat(3, var(--stud-size));
    gap: 4px;
    pointer-events: none;
    opacity: .5;
}

.composer-studs i {
    width: var(--stud-size);
    height: var(--stud-size);
    border-radius: 50%;
    background: var(--inotex-blue);
}

/* Composer buttons: ONE size for mic and send — they sit in a row and must
   read as one family. */
.mic-btn,
#send-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mic-btn svg, #send-btn svg {
    width: 19px;
    height: 19px;
}

/* mic: blue circular brick button */
.mic-btn {
    background: var(--color-surface-interactive);
    color: var(--color-text-primary);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .55);
    transition: background var(--motion-fast) ease, transform var(--motion-instant) ease;
}

.mic-btn:hover { background: #3A6FC2; }
.mic-btn:active { transform: translateY(1px); }

.mic-btn.recording {
    background: var(--inotex-primary);
    color: var(--color-text-on-yellow);
    animation: inx-rec-pulse 1.4s ease-in-out infinite;
}

@keyframes inx-rec-pulse {
    0%, 100% { box-shadow: 0 0 0 0 #FCB71566; }
    50% { box-shadow: 0 0 0 9px #FCB71500; }
}

/* send: the yellow primary action */
#send-btn {
    background: var(--color-action-primary);
    color: var(--color-text-on-yellow);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 0 #00000080, 0 4px 14px #FCB71540;
    transition: background var(--motion-fast) ease, transform var(--motion-instant) ease;
}

#send-btn:hover { background: var(--color-action-primary-hover); }
#send-btn:active { transform: translateY(1px); }

#send-btn:disabled {
    background: #6B5A22;
    color: #00000099;
    box-shadow: none;
}

.mic-btn:focus-visible, #send-btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* powered-by credit. Text AND colour are the install's (Settings >
   Branding → متن/رنگ پایین صفحه); the var() fallback is the palette's
   muted text so a bare theme file still looks right. */
.rayen-sidebar-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--wl-footer-color, var(--color-text-muted));
}

.rayen-sidebar-foot img { border-radius: 4px; }

/* ── Video view ───────────────────────────────────────────────────── */
.action-btn {
    background: var(--color-surface-interactive);
    color: var(--color-text-primary);
    border: none;
    border-radius: 999px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

.action-btn:hover { background: #3A6FC2; }

/* ── Pet-INOTEX companion (chat) ──────────────────────────────────── */
/* Parked in the decorative lower corner the coordinated assets reserve for
   brick objects — outside the message column and above the composer, so it
   can never cover text or controls. */
.pet-slot {
    position: fixed;
    /* PHYSICAL left/bottom on purpose: the coordinated assets reserve the
       lower-LEFT for the brick scene in both languages, and a logical
       inset-inline-start would flip it onto the composer in RTL. */
    left: 20px;
    bottom: 168px;
    --pet-scale: 1;
    --pet-dx: 0px;
    --pet-dy: 0px;
    /* Base size of the character. The − / + controls multiply this via
       --pet-scale, so raising the base raises every step with it and a
       visitor's saved preference keeps its relative meaning. */
    width: calc(210px * var(--pet-scale));
    height: calc(210px * var(--pet-scale));
    translate: var(--pet-dx) var(--pet-dy);
    z-index: 6;
    transition: translate 120ms ease, opacity 200ms ease;
}

.pet-slot[data-dragging] { transition: none; cursor: grabbing; }

.pet-slot canvas,
.pet-slot .pet-fallback {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6));
    opacity: 0;
    transition: opacity 320ms ease;
}

.pet-slot canvas.is-ready,
.pet-slot .pet-fallback { opacity: 1; }

/* Hidden by the eye control — declared AFTER the is-ready rule on purpose:
   the two selectors carry equal specificity, so source order is what decides,
   and hiding must be able to override "loaded". The rail stays visible and
   reachable so the character can be brought back. */
.pet-slot[data-hidden="true"] canvas,
.pet-slot[data-hidden="true"] canvas.is-ready,
.pet-slot[data-hidden="true"] .pet-fallback,
.pet-slot[data-hidden="true"] .pet-hit,
.pet-slot[data-hidden="true"]::after {
    opacity: 0;
    pointer-events: none;
}

/* The tap/drag target sits over the character. */
.pet-hit {
    position: absolute;
    inset: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: grab;
    border-radius: 14px;
}

.pet-hit:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
}

/* ── Control rail (hide / − / +) ──────────────────────────────────── */
/* The rail sits INSIDE the character's own box, along its top edge. Hanging it
   off the side pushed it into the message column once the character grew, and
   it landed on top of a chat bubble. Keeping it within the companion's
   footprint means the two can never fight for the same pixels. */
.pet-rail {
    position: absolute;
    top: 2px;
    left: 2px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
    opacity: .55;
    transition: opacity var(--motion-fast) ease;
}

/* Full strength when the visitor is actually reaching for it. */
.pet-slot:hover .pet-rail,
.pet-rail:focus-within { opacity: 1; }

.pet-rail-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--motion-fast) ease;
}

.pet-rail-btn:hover:not(:disabled) { background: var(--color-surface-interactive); }
.pet-rail-btn:disabled { opacity: .4; cursor: not-allowed; }

.pet-rail-btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.pet-rail-btn .eye-closed { display: none; }
.pet-slot[data-hidden="true"] .pet-rail-btn .eye-open { display: none; }
.pet-slot[data-hidden="true"] .pet-rail-btn .eye-closed { display: block; }

/* ── Mini chat panel ──────────────────────────────────────────────── */
.pet-panel {
    /* One vertical rhythm unit drives every gap in the panel, so the spacing
       between title, pills, transcript, composer and status is consistent
       instead of five separately-chosen numbers. */
    --panel-rhythm: 12px;

    position: fixed;
    left: 20px;
    bottom: 168px;
    z-index: 7;
    width: min(340px, calc(100vw - 40px));
    max-height: min(58vh, 440px);
    display: flex;
    flex-direction: column;
    gap: var(--panel-rhythm);
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, #24365EF7, #16223CF7);
    border: 1.5px solid var(--inotex-blue);
    border-radius: var(--panel-radius);
    box-shadow: var(--raised-depth), 0 0 24px #2D5CA733;
    backdrop-filter: blur(10px);
    text-align: right;
}

.pet-panel[hidden] { display: none; }

.pet-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: calc(var(--panel-rhythm) - 4px);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* Hierarchy: a quiet source line, then the question the panel answers. */
.pet-panel-eyebrow {
    margin: 0 0 3px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .03em;
    color: var(--inotex-primary);
}

.pet-panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--color-text-primary);
}

.pet-panel-close {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}

.pet-panel-close:hover {
    background: var(--color-surface-interactive);
    color: var(--color-text-primary);
}

.pet-panel-close:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Quick questions: one row of pills, wrapping, never crowding the transcript. */
.pet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pet-chips:empty { display: none; }

.pet-chip {
    background: var(--color-surface-primary);
    border: 1.5px solid var(--color-border-interactive);
    border-radius: 999px;
    color: var(--color-text-primary);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.6;
    cursor: pointer;
    transition: background var(--motion-fast) ease;
}

.pet-chip:hover { background: var(--color-surface-interactive); }

.pet-chip:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Transcript */
.pet-log {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 2px 2px 2px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 96px;
    scrollbar-width: thin;
}

.pet-msg { display: flex; }
.pet-msg-user { justify-content: flex-start; }
.pet-msg-bot { justify-content: flex-end; }

.pet-msg p {
    margin: 0;
    max-width: 88%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    /* Persian needs air between lines to stay readable at this size. */
    line-height: 1.95;
    border: 1px solid var(--color-border-subtle);
}

.pet-msg-user p {
    background: #24396B;
    border-color: var(--inotex-blue);
    border-end-end-radius: 4px;
}

.pet-msg-bot p {
    background: #16233F;
    border-end-start-radius: 4px;
}

/* Composer */
.pet-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-top: calc(var(--panel-rhythm) - 4px);
    border-top: 1px solid var(--color-border-subtle);
}

.pet-form textarea {
    flex: 1;
    resize: none;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1.5px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.8;
    max-height: 104px;
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.pet-form textarea::placeholder { color: var(--color-text-muted); opacity: .7; }

.pet-form textarea:focus-visible {
    outline: none;
    border-color: var(--inotex-primary);
    box-shadow: 0 0 0 2px #FEBE2744;
}

.pet-send {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: none;
    border-radius: 50%;
    background: var(--color-action-primary);
    color: var(--color-text-on-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 0 #00000070;
    transition: background var(--motion-fast) ease, transform var(--motion-instant) ease;
}

.pet-send:hover { background: var(--color-action-primary-hover); }
.pet-send:active { transform: translateY(1px); }

.pet-send:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.pet-status {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--color-text-muted);
    min-height: 16px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* teal base-plate glow: the character stands on a brick plate */
.pet-slot::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 18%;
    right: 18%;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--inotex-teal), transparent);
    opacity: .55;
}

/* The companion lives at theme level and is present on BOTH tabs — chat and
   video — the way the reference integration behaves. On the video tab it sits
   over the footage as a corner overlay; the drop shadow keeps it legible
   against bright frames. */
body.video-mode .pet-slot { bottom: 96px; }
body.video-mode .pet-panel { bottom: 96px; }

@media (max-width: 900px) {
    .pet-slot {
        width: calc(140px * var(--pet-scale));
        height: calc(140px * var(--pet-scale));
        bottom: 150px;
        left: 10px;
    }

    .pet-panel { left: 10px; right: 10px; width: auto; bottom: 150px; max-height: 56vh; }
}

/* Short viewports (landscape kiosk, small phones): the composer and the
   message column need every pixel — the decoration goes first. The panel
   stays available, since it is the functional half. */
@media (max-height: 620px) {
    .pet-slot { display: none; }
    .pet-panel { bottom: 12px; max-height: 78vh; }
}

/* Phones below 640px: the companion is a desktop/tablet companion — on a
   small screen it would sit on top of the composer. It is unreachable
   there (the panel only opens through the character), so both halves go. */
@media (max-width: 639px) {
    .pet-slot,
    .pet-panel { display: none; }
}

/* ── Voice stage ──────────────────────────────────────────────────── */
.voice-stage[hidden] { display: none; }

.voice-stage {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #000000D9;
    backdrop-filter: blur(6px);
}

.voice-orb-wrap { position: relative; }

.voice-orb {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-primary);
    border: 2px solid var(--color-border-interactive);
    color: var(--color-text-primary);
    box-shadow: 0 0 34px #2D5CA766;
}

.voice-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid #2D5CA755;
    animation: inx-ring 1.8s ease-out infinite;
}

@keyframes inx-ring {
    from { transform: scale(.92); opacity: .9; }
    to { transform: scale(1.25); opacity: 0; }
}

.voice-stage .voice-ic { display: none; }
.voice-stage.is-listening .voice-ic-listen { display: block; }
.voice-stage.is-thinking .voice-ic-think { display: block; animation: inx-spin 1.2s linear infinite; }
.voice-stage.is-speaking .voice-ic-speak { display: block; }

.voice-stage.is-listening .voice-orb { border-color: var(--inotex-primary); box-shadow: 0 0 34px #FCB71566; }
.voice-stage.is-speaking .voice-orb { border-color: var(--inotex-teal); box-shadow: 0 0 34px #04A58466; }

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

.voice-wave {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 52px;
}

.voice-wave span {
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--inotex-primary), var(--inotex-blue));
    transition: height 90ms linear;
}

.voice-status { color: var(--color-text-primary); font-weight: 600; margin: 0; }
.voice-timer { color: var(--color-text-muted); font-size: 13px; margin: 0; }

.voice-stop {
    border: var(--border-width) solid var(--color-border-interactive);
    background: var(--color-surface-primary);
    color: var(--color-text-primary);
    border-radius: 999px;
    padding: 8px 26px;
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.voice-stop:hover { background: var(--color-surface-interactive); }

/* ── INOTEX startup loader ────────────────────────────────────────── */
.inx-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--inotex-background);
    transition: opacity var(--motion-deliberate) ease;
}

.inx-loader.is-done { opacity: 0; pointer-events: none; }

.inx-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* A set whitelabel_logo_url replaces the animated hexagon (see footer.html).
   The brick animation lives on the svg's own paths, so the img simply sits
   there — no animation to carry over, by design: the operator's logo is the
   brand, not a toy. */
img.inx-loader-mark {
    display: block;
    width: 84px;
    height: 84px;
    object-fit: contain;
    border-radius: var(--panel-radius);
}

.inx-hex-outline {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: inx-draw 1.1s ease forwards;
}

.inx-brick {
    opacity: 0;
    transform: translateY(-8px);
    animation: inx-drop .5s ease forwards;
}

.inx-brick-1 { animation-delay: .55s; }
.inx-brick-2 { animation-delay: .78s; }
.inx-brick-3 { animation-delay: 1.0s; }

@keyframes inx-draw { to { stroke-dashoffset: 0; } }

@keyframes inx-drop {
    to { opacity: 1; transform: translateY(0); }
}

.inx-loader-studs { display: flex; gap: 7px; }

.inx-loader-studs i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--inotex-blue);
    animation: inx-stud-pulse 1.1s ease-in-out infinite;
}

.inx-loader-studs i:nth-child(2) { animation-delay: .18s; }
.inx-loader-studs i:nth-child(3) { animation-delay: .36s; background: var(--inotex-primary); }

.inx-loader-label {
    color: var(--color-text-muted);
    font-size: 14px;
    letter-spacing: .12em;
    margin: 0;
}

/* ── Reduced motion: static mark, no animation anywhere ───────────── */
@media (prefers-reduced-motion: reduce) {
    .inx-hex-outline { animation: none; stroke-dashoffset: 0; }
    .inx-brick { animation: none; opacity: 1; transform: none; }
    .inx-loader-studs i,
    .ai-loader-studs i,
    .voice-ring,
    .mic-btn.recording { animation: none; }
    * { transition-duration: 1ms !important; }
}


/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    header.inx-header {
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 8px;
        padding: 8px 12px;
    }

    .switcher__option { flex: 1; justify-content: center; padding: 8px 10px; }

    .header-title { font-size: 13.5px; }

    body {
        background-attachment: scroll;
        background-position: center 78%;
    }

    .composer-studs { display: none; }
}

@media (max-width: 380px) {
    .header-subtitle { display: none; }
}


/* ══ Registration modal (Smart Visit) ══════════════════════════════════
   Centred over the whole page, because signing up is a full-attention task
   — not something to squeeze into the corner panel. */
.reg-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #000000C4;
    backdrop-filter: blur(6px);
}

.reg-card {
    position: relative;
    width: min(400px, 100%);
    max-height: min(88vh, 640px);
    overflow-y: auto;
    padding: 26px 24px 22px;
    background: linear-gradient(180deg, #24365EF7, #16223CF7);
    border: 1.5px solid var(--inotex-blue);
    border-radius: var(--panel-radius);
    box-shadow: var(--raised-depth), 0 0 34px #2D5CA733;
    text-align: right;
}

.reg-close {
    position: absolute;
    top: 12px;
    inset-inline-start: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.reg-close:hover { background: var(--color-surface-interactive); color: var(--color-text-primary); }

.reg-title {
    margin: 0 0 6px;
    /* Symmetric room for the close button so a centred title of any length
       stays clear of it instead of running underneath. */
    padding: 0 36px;
    font-size: 19px;
    font-weight: 800;
    color: var(--color-text-primary);
}

.reg-step-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text-primary);
}

.reg-sub {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--color-text-muted);
}

/* Steps that set no subtitle (the sign-in card) leave no empty gap. */
.reg-sub:empty { display: none; }

.reg-masked { color: var(--color-text-primary); font-weight: 700; }

.reg-form { display: flex; flex-direction: column; gap: 12px; }

.reg-field { display: flex; flex-direction: column; gap: 5px; }

.reg-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.reg-field input {
    padding: 11px 13px;
    border-radius: 12px;
    border: 1.5px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 14px;
}

.reg-field input:focus-visible {
    outline: none;
    border-color: var(--inotex-primary);
    box-shadow: 0 0 0 3px #FEBE2740;
}

.reg-submit {
    margin-top: 6px;
    width: 100%;
    padding: 13px 18px;
    border: none;
    border-radius: 14px;
    background: var(--color-action-primary);
    color: var(--color-text-on-yellow);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 0 #00000090;
    transition: background var(--motion-fast) ease, transform var(--motion-instant) ease;
}

.reg-submit:hover:not(:disabled) { background: var(--color-action-primary-hover); }
.reg-submit:active:not(:disabled) { transform: translateY(1px); }
.reg-submit:disabled { background: #6B5A22; color: #000000A0; box-shadow: none; cursor: not-allowed; }

/* Code entry — LTR digits inside the RTL card, as on the verify page.
   The boxes are DECORATION. One transparent input sits over the whole row and
   holds the real value, because a row of maxlength="1" inputs makes the
   browser truncate an autofilled SMS code to its first digit. */
.reg-digits {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 12px;
}

.reg-code-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    text-align: center;
    /* 16px is the floor that stops iOS Safari zooming the page on focus. */
    font-family: inherit;
    font-size: 16px;
    letter-spacing: 2em;
}

.reg-code-input:focus { outline: none; }

/* Never hide it with display:none / visibility / opacity:0 — a field the
   browser considers invisible is skipped by autofill, which is the entire
   point of this markup. Transparent text over visible cells keeps it real. */
.reg-digit {
    width: 46px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1.5px solid var(--inotex-blue);
    background: linear-gradient(180deg, #24396B, var(--color-surface-sunken));
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.reg-digit.is-active {
    border-color: var(--inotex-primary);
    box-shadow: 0 0 0 3px #FEBE2755;
}

.reg-timer {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--color-text-muted);
    text-align: center;
}

.reg-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

.reg-link {
    background: none;
    border: none;
    color: var(--inotex-teal);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 2px;
}

.reg-link:disabled { color: #4C5F84; cursor: not-allowed; }
.reg-link:hover:not(:disabled) { text-decoration: underline; }

.reg-status {
    margin: 14px 0 0;
    min-height: 18px;
    font-size: 12.5px;
    text-align: center;
    color: var(--color-text-muted);
}

.reg-status[data-kind="error"] { color: #E5484D; }
.reg-status[data-kind="ok"] { color: var(--inotex-teal); }

/* Job dropdown — same shell as the text inputs so the form reads as one row
   of controls, not a mix of widgets. */
.reg-select {
    padding: 11px 13px;
    border-radius: 12px;
    border: 1.5px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 14px;
    /* The native arrow sits on the wrong side in RTL on some engines; the
       field is wide enough that letting the UA place it is still the most
       predictable option across browsers. */
    appearance: none;
    background-image: linear-gradient(45deg, transparent 49%, var(--color-text-muted) 50%),
                      linear-gradient(-45deg, transparent 49%, var(--color-text-muted) 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: left 16px top 22px, left 11px top 22px;
    background-repeat: no-repeat;
}

.reg-select:focus-visible {
    outline: none;
    border-color: var(--inotex-primary);
    box-shadow: 0 0 0 3px #FEBE2740;
}

/* Locked identity fields while editing: visible, obviously not editable. */
.reg-field input[data-locked="true"] {
    color: var(--color-text-muted);
    background: transparent;
    border-style: dashed;
    cursor: default;
}

/* Searchable multi-select */
.reg-multi { display: flex; flex-direction: column; gap: 8px; }

.reg-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.reg-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--inotex-primary);
    color: var(--color-text-on-yellow);
    font-size: 12px;
    font-weight: 700;
}

.reg-chip-x {
    border: none;
    background: none;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: .7;
}

.reg-chip-x:hover { opacity: 1; }

.reg-search {
    padding: 10px 13px;
    border-radius: 12px;
    border: 1.5px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 13.5px;
}

.reg-search:focus-visible {
    outline: none;
    border-color: var(--inotex-primary);
    box-shadow: 0 0 0 3px #FEBE2740;
}

.reg-add {
    align-self: flex-start;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1.5px dashed var(--inotex-teal);
    background: none;
    color: var(--inotex-teal);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.reg-add:hover { background: #04A58418; }
.reg-add[hidden] { display: none; }

/* The option list scrolls rather than pushing the submit button off-screen. */
.reg-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 148px;
    overflow-y: auto;
    padding: 2px;
}

.reg-option {
    padding: 6px 11px;
    border-radius: 999px;
    border: 1.5px solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.reg-option:hover { border-color: var(--inotex-primary); color: var(--color-text-primary); }

.reg-option[data-on="true"] {
    border-color: var(--inotex-primary);
    color: var(--color-text-primary);
    font-weight: 700;
}

.reg-empty { margin: 4px 2px; font-size: 12px; color: var(--color-text-muted); }

/* Checkbox rows (e.g. "interested in learning AI") */
.reg-flags { display: flex; flex-direction: column; gap: 8px; }

.reg-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--color-text-primary);
    cursor: pointer;
}

.reg-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--inotex-primary);
    flex: none;
    cursor: pointer;
}

/* Secondary explanation under a form or a plan — never competes with the
   content it annotates. */
.reg-note {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.85;
    color: var(--color-text-muted);
    text-align: start;
}

.reg-note a, .reg-note { word-break: break-word; }

/* Targeted-visit plan — one brick-like row per recommended section. */
.reg-plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.reg-plan-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px;
    border: 1.5px solid var(--color-border-subtle);
    /* The stud strip on the leading edge ties the row to the brick language
       without another image to load. */
    border-inline-start: 4px solid var(--inotex-primary);
    border-radius: 12px;
    background: var(--color-surface-sunken);
}

/* General suggestions read one step quieter than the matched ones — the
   stud strip goes neutral so the yellow marks a real match only. */
.reg-plan-item[data-general="true"] {
    border-inline-start-color: var(--color-border-subtle);
}

.reg-plan-head {
    margin: 6px 0 -2px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.reg-plan-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-text-primary);
}

.reg-plan-why {
    font-size: 12px;
    line-height: 1.8;
    color: var(--color-text-muted);
}

.reg-plan-note { margin-top: 10px; }

/* ══ In-chat questions (شغل / سمت / علاقه‌مندی‌ها) ══════════════════════
   Buttons, never a dropdown. On a phone a <select> is a spinning wheel and
   eighteen options are a scroll inside a scroll; a chip is one tap. Tapping
   writes the label into the message box, so the visitor edits it if they want
   and presses the same send button they already know. */
.reg-ask {
    /* A block in the transcript rather than a message bubble: it takes the
       full column so the options WRAP instead of scrolling sideways. */
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    /* Pulled up under the question it answers — the two are one unit. */
    margin-top: -16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeIn 0.3s ease-in-out;
}

.reg-ask-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reg-ask-option {
    /* 44px: a comfortable thumb target, which is what this is used with. */
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: var(--border-width) solid var(--color-border-subtle);
    background: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}

.reg-ask-option:hover { border-color: var(--inotex-primary); }

.reg-ask-option:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Chosen reads as brand yellow — the same "this one is on" language the
   registration card already uses for its chips. */
.reg-ask-option[data-on="true"] {
    background: var(--color-action-primary);
    border-color: var(--color-action-primary);
    color: var(--color-text-on-yellow);
    font-weight: 700;
}

.reg-ask-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--color-text-muted);
}

@media (max-width: 430px) {
    /* Eighteen interests on a small screen: the list scrolls VERTICALLY in its
       own box so it never pushes the message field off screen — and never asks
       for a sideways swipe or a pinch. */
    .reg-ask-options { max-height: 42vh; overflow-y: auto; }
    .reg-ask-option { font-size: 13.5px; padding: 10px 14px; }
}

@media (max-width: 430px) {
    .reg-digit { width: 42px; height: 52px; font-size: 20px; }
    .reg-digits { gap: 6px; }
}

/* Signed-in control: styled generically in static/chat/base.css
   (.menu-logout-btn — a fixed semantic red in every theme, not a token) so
   sign-out reads the same everywhere. Nothing INOTEX-specific to add. */


/* ══ Light mode — liquid-crystal ═══════════════════════════════════════
   A per-VISITOR preference, not an install-wide theme switch: a kiosk visitor
   who prefers light must not change what the next visitor sees. The look is
   the frosted "liquid crystal" surface of the previous theme, re-expressed in
   the INOTEX palette — the same tokens, inverted roles, so every component
   below follows without its own light-mode rule. */
body.light-mode {
    --color-page-background: #EEF3FC;
    --color-surface-primary: #FFFFFFCC;
    --color-surface-sunken: #FFFFFFE6;
    --color-surface-interactive: #DCE7FA;
    --color-text-primary: #14203A;
    --color-text-muted: #4A5B7C;
    --color-border-interactive: #9FBBE8;
    --color-border-subtle: #2D5CA733;
    --raised-depth: 0 1px 0 rgba(255, 255, 255, .9), 0 10px 26px rgba(20, 40, 90, .14);

    background-color: var(--color-page-background);
    color: var(--color-text-primary);
}

/* The brick photo is a night scene; in daylight the view area is frosted
   glass over a soft brand wash instead — on .view-container, where the
   photo lives, so the shorthand genuinely replaces it. Sits after the
   video-mode rule on purpose: a light-mode visitor gets the frosted look
   on BOTH tabs, whichever is open. */
body.light-mode .view-container {
    background:
        radial-gradient(circle at center, rgba(45, 92, 167, .07) 1.2px, transparent 1.3px) 0 0 / 26px 26px,
        linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .3)),
        radial-gradient(1100px 620px at 12% 88%, #C9DBF7 0%, transparent 62%),
        radial-gradient(900px 520px at 88% 12%, #FFF0CC 0%, transparent 58%),
        var(--color-page-background);
}

/* The header surface is --color-surface-primary in BOTH modes (the base
   rule above reads it; light mode re-points the token below), so no
   background override is needed here — only the frosted extras. */
body.light-mode header.inx-header {
    backdrop-filter: blur(14px);
    border-bottom-color: var(--color-border-subtle);
    box-shadow: 0 4px 18px rgba(20, 40, 90, .10);
}

body.light-mode .header-title { color: var(--color-text-primary); }

body.light-mode .switcher {
    background: #FFFFFFCC;
    backdrop-filter: blur(10px);
}

body.light-mode .switcher__option { color: var(--color-text-muted); }

body.light-mode .switcher__option:has(.switcher__input:checked) {
    background: var(--inotex-blue);
    color: #FFFFFF;
}

body.light-mode .lang-btn,
body.light-mode .theme-btn,
body.light-mode .a11y-btn {
    background: #FFFFFFD9;
    color: var(--color-text-primary);
    border-color: var(--color-border-interactive);
    backdrop-filter: blur(8px);
}
/* .menu-logout-btn (base.css) is a fixed semantic red on purpose — it does
   not join the frosted-glass light-mode look above, in either mode. */

/* Frosted message cards */
body.light-mode .message.bot .bubble {
    background: linear-gradient(180deg, #FFFFFFE6, #F4F8FFE6);
    /* Brand-fed, not fixed: --inotex-blue rides --wl-primary, so the admin
       primary color picker (رنگ اصلی) restyles this border per install. */
    border-color: var(--inotex-blue);
    color: var(--color-text-primary);
    backdrop-filter: blur(12px);
}

body.light-mode .message.user .bubble {
    background: linear-gradient(180deg, #DCE8FB, #CBDCF7);
    border-color: var(--inotex-blue);
    color: var(--color-text-primary);
}

body.light-mode .bubble a { color: #1B4C99; }
body.light-mode .bubble strong { color: #A97C05; }
body.light-mode .message.bot .bubble::before { opacity: .45; }

body.light-mode .input-wrapper {
    background: linear-gradient(180deg, #FFFFFFE6, #F3F7FEE6);
    border-color: #B9CDEC;
    backdrop-filter: blur(12px);
}

body.light-mode #user-input { color: var(--color-text-primary); }

body.light-mode .suggest-chips button,
body.light-mode .questions-list li,
body.light-mode .show-more-btn {
    background: #FFFFFFD9;
    color: var(--color-text-primary);
}

/* Panels and modal follow the same frosted treatment */
body.light-mode .pet-panel,
body.light-mode .reg-card {
    background: linear-gradient(180deg, #FFFFFFF2, #F2F7FFF2);
    border-color: #B9CDEC;
    color: var(--color-text-primary);
}

body.light-mode .pet-msg-bot p { background: #F4F8FF; }
body.light-mode .pet-msg-user p { background: #DCE8FB; }
body.light-mode .reg-field input,
body.light-mode .reg-digit,
body.light-mode .pet-form textarea {
    background: #FFFFFF;
    color: var(--color-text-primary);
    border-color: #B9CDEC;
}

body.light-mode .reg-overlay { background: #0B172FA8; }

/* The toggle shows the mode that is ACTIVE, so the icons swap with it. */
/* The icon shows the mode you are IN, and only ever one of the two is in the
   layout — otherwise the button grows to fit both glyphs. */
.theme-btn .theme-icon-moon,
.theme-btn .theme-icon-sun {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-btn .theme-icon-sun { display: none; }
body.light-mode .theme-btn .theme-icon-moon { display: none; }
body.light-mode .theme-btn .theme-icon-sun { display: inline-flex; }

/* ── Context suggestion chips (after-answer follow-ups) ────────────── */
/* The 3-4 tappable follow-ups the assistant offers under its latest
   answer (server side: app/services/suggestions.py; frontend wiring:
   renderSuggestions() in static/chat/core.js, container from the theme's
   suggestions.html partial). The row floats above the input region
   (bottom: 135px), centred on the reading measure, and keeps every chip
   on ONE horizontal line: the row scrolls sideways instead of wrapping,
   so overflow never stacks chips over the input. Every color reads from
   the theme's semantic tokens, which all feed from the --wl-* branding
   custom properties (Settings > Branding owns ALL theme colors). */
.chat-suggestions {
    position: absolute;
    bottom: 135px;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--chat-measure), calc(100% - 24px));
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 5px 5px 12px;
    gap: 8px;
    z-index: 5;
}

/* An empty row must not reserve space — chips exist only while offered. */
.chat-suggestions:empty { display: none; }

/* The video tab is a full-bleed stage; chips belong to the conversation. */
body.video-mode .chat-suggestions { display: none; }

.chat-suggestions button {
    background: var(--color-surface-primary);
    border: var(--border-width) solid var(--color-border-interactive);
    border-radius: 999px;
    color: var(--color-text-primary);
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--motion-fast) ease, transform var(--motion-instant) ease;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}

.chat-suggestions button:hover {
    background: var(--color-surface-interactive);
    transform: translateY(-1px);
}

.chat-suggestions button:active { transform: translateY(1px); }

.chat-suggestions button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Light mode flips the chip to the install's own light surface token. */
body.light-mode .chat-suggestions button {
    background: var(--inotex-white, #FFFFFF);
    color: var(--color-text-primary);
}