/* ── INOTEX Chat Base CSS ──
   Structural styles shared by all chat themes.
   Theme CSS files load AFTER this and override visual properties (colors, backgrounds, borders, shadows).
*/


/* ── Reset ── */
* { box-sizing: border-box; margin: 0; padding: 0; }


/* ── Body ── */
body {
    font-family: var(--font-family, "Vazirmatn", sans-serif);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}


/* ── App Layout ── */
.app-layout {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    position: relative;
    z-index: 1;
    /* The body is itself a flex column. Without this the shell is shrinkable,
       so any sibling that accidentally lands in flow (a floating panel that
       lost its `position`, say) steals height from the app and the body's own
       background shows through as a band. The shell always owns the viewport. */
    flex: none;
}


/* ── View Container ── */
.view-container {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.tab-view {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
}

.tab-view.active {
    display: flex;
}

#text-view {
    height: calc(100% - 117px);
}


/* ── Chat Messages ── */
#chat-view-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    scroll-behavior: smooth;
}

#chat-view-content::-webkit-scrollbar {
    display: none;
}

.message {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
}

.message.bot {
    align-self: flex-start;
}

.message.user {
    align-self: flex-end;
}

.message .bubble {
    word-wrap: break-word;
    position: relative;
}

.message.bot .bubble {
    padding: 15px;
}

.message.user .bubble {
    padding: 12px 18px;
}

/* Bubble content formatting */
.bubble p { margin: 0; }
.bubble ul,
.bubble ol { margin: 5px 0; padding-right: 15px; }
.bubble a { color: var(--secondary-blue, #2b78c5); text-decoration: underline; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Questions List ── */
.questions-list {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.questions-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.92rem;
    line-height: 1.6;
}

.questions-list li::before {
    content: "▶";
    font-size: 0.65rem;
    flex-shrink: 0;
}

.show-more-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-family, "Vazirmatn", sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.message.bot.questions-msg {
    max-width: 85%;
}


/* ── Typing Indicator ── */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 10px;
}

.typing-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator .dot:nth-child(2) { animation-delay: -0.16s; }

#loading-bubble {
    opacity: 0;
    transition: opacity 0.3s;
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40%            { transform: scale(1); }
}


/* ── Video View ── */
#video-view {
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.avatar-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#avatar-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-actions {
    position: absolute;
    bottom: 120px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 0 20px;
    z-index: 20;
    flex-wrap: wrap;
}

.action-btn {
    cursor: pointer;
    transition: all 0.3s ease;
}


/* ── Input Area ── */
.wrapper {
    padding: 0;
}

#input-area {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    flex-shrink: 0;
    width: 100%;
    max-width: 800px;
}

.input-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0.5rem;
    transition: border-color 0.2s;
}

#user-input {
    flex: 1;
    border: none;
    background-color: transparent;
    font-family: var(--font-family, "Vazirmatn", sans-serif);
    font-size: 1rem;
    line-height: 1.5;
    outline: none;
    resize: none;
    overflow-y: auto;
    min-height: 40px;
    max-height: 100px;
}

/* The room (dir="rtl") never mirrors — see core.js setLang() — but the text
   INSIDE the box should still read the way the active UI language reads.
   dir="auto" on the textarea already gets this right once there is content
   (or, in modern browsers, from the placeholder), but an empty field before
   that resolution kicks in has fallen back to the room's own rtl in the
   past. Keying text-align off the UI language directly makes it deterministic
   instead of relying on that per-browser heuristic. */
html[lang="fa"] #user-input { text-align: right; direction: rtl; }
html[lang="en"] #user-input { text-align: left; }

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

.mic-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mic-btn.recording {
    animation: pulse 1.5s infinite;
}

.mic-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

#send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

#send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

button:disabled {
    cursor: not-allowed !important;
}

@keyframes pulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.7); }
    70%  { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(214, 69, 69, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214, 69, 69, 0); }
}


/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .message {
        max-width: 85%;
    }

    .message.user {
        max-width: 85%;
    }

    .the-slogan {
        display: none;
    }

    .video-actions {
        bottom: 90px;
        gap: 10px;
    }

    body.video-mode #avatar-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    #input-area {
        position: fixed;
        bottom: 10px;
        left: 0;
        width: 100%;
        z-index: 100;
        padding: 0 15px;
    }

    body.video-mode .video-actions {
        bottom: 145px;
        z-index: 100;
    }
}


/* ── Desktop Optimization ── */
@media (min-width: 769px) {
    body {
        align-items: center;
        justify-content: center;
    }

    .app-layout {
        max-width: 100vw;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    .message {
        max-width: 50%;
    }

    #input-area {
        position: absolute;
        bottom: 7px;
        left: 50%;
        transform: translateX(-50%);
    }

    .video-actions {
        bottom: 134px;
    }
}

/* ── Header tools cluster ──
   Groups the header's icon buttons (new-chat, hamburger). Already defined
   per-theme in inotex/liquid-glass's own style.css (identically) — shared
   here too so base/minimal/haj get the same layout without copying it a
   third and fourth time. */
.header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* New chat — the shared-kiosk escape hatch.
   Styled here, in the file every theme loads, instead of four times in four
   theme stylesheets: it is one icon, it must be readable in all of them, and
   currentColor makes it take each theme's own header colour. The accessible
   name lives entirely in title/aria-label (data-i18n-title="newChat") — no
   visible text label, so it reads as a single, obvious "+" everywhere. */
#new-chat-btn {
    padding: 0;
    display: flex;
    align-items: center;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    opacity: 0.85;
    flex-shrink: 0;
}

#new-chat-btn svg {
    width: 18px;
    height: 18px;
}

#new-chat-btn:hover,
#new-chat-btn:focus-visible {
    opacity: 1;
}

/* ── Hamburger Drawer Menu ──
   Shared structural shell for every theme (base, minimal, inotex,
   liquid-glass, haj). Each theme's own style.css overrides only colour
   (background/text/border), same convention as everything else in this
   file — see the header comment. The rows/controls inside the drawer keep
   their own existing ids and CSS classes; only their container moved. */
.menu-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: currentColor;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-toggle svg {
    width: 35px;
    height: 35px;
}

.menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 300;
}

.menu-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.menu-drawer {
    position: fixed;
    top: 0;
    /* Physical right, not a logical edge: the page direction is always rtl
       (core.js never mirrors the room — only the words change, see
       setLang()), so "right" here is not conditional on anything. */
    right: 0;
    height: 100dvh;
    width: min(320px, 86vw);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 16px;
    /* The drawer itself does not scroll — #menu-history is the one region
       that does (below), and .menu-footer is pinned under it. Containing
       overflow here keeps a tall history list from growing the whole panel
       instead of scrolling in place. */
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 301;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
    /* Structural-only file: a plain, reasonably dark default so the drawer is
       never invisible on a theme that forgets to override it (base/minimal
       included). Every other theme replaces this with its own surface
       colour — see the "Theme CSS files load AFTER this" note at the top of
       this file. */
    background: #14172a;
    color: #f0f1f5;
}

.menu-drawer.open {
    transform: translateX(0);
}

.menu-drawer-close {
    align-self: flex-end;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: currentColor;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
}

.menu-drawer-close:hover,
.menu-drawer-close:focus-visible {
    opacity: 1;
}

.menu-section {
    padding: 10px 0;
    border-top: 1px solid currentColor;
    border-color: rgba(128, 128, 128, 0.2);
}

.menu-section:first-of-type {
    border-top: none;
}

/* #menu-history is the drawer's one scrolling region: it grows to fill
   whatever space is left above .menu-footer, and scrolls internally once its
   list is taller than that — the visitor pages in more "my chats" rows by
   scrolling here, not by scrolling the whole drawer (see core.js
   loadMoreMenuHistory). min-height: 0 is required for a flex child to be
   allowed to shrink below its content size; without it this never scrolls. */
#menu-history {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Language / theme / text-size / logout — one flex column, pinned to the
   bottom of the drawer regardless of how tall or short #menu-history is
   (margin-top: auto does the pinning even when history is hidden/empty, and
   costs nothing extra when #menu-history is already flex:1 and has pushed
   this down on its own). Each row inside is admin-toggleable — see
   app/services/menu_settings.py. */
/* :first-of-type is relative to each element's own parent, so the existing
   .menu-section:first-of-type rule above already drops the border on
   whichever row lands first inside .menu-footer too (language, or theme/
   text-size/account if admin-toggled rows above it are off) — this border
   is only the line separating the footer as a whole from #menu-history. */
.menu-footer {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    flex-shrink: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.menu-section-label {
    font-size: 0.78rem;
    opacity: 0.65;
    margin-bottom: 8px;
}

.menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.menu-row + .menu-row {
    margin-top: 4px;
}

.menu-row-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
}

.menu-row-label svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}

.menu-a11y-buttons {
    display: flex;
    gap: 8px;
}

.menu-account-btn {
    width: 100%;
    text-align: center;
    padding: 9px 12px;
    border-radius: 10px;
    background: transparent;
    color: currentColor;
    border: 1px solid currentColor;
    opacity: 0.85;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
}

.menu-account-btn:hover,
.menu-account-btn:focus-visible {
    opacity: 1;
}

/* Sign-out reads as sign-out at a glance — a semantic red, not the neutral
   pill every other account-row control uses (docs/features/hamburger-menu/
   SPEC.md's REQ-002 only asked for relocation; the look was never revisited
   until now). Colors are fixed rather than theme tokens on purpose: this is
   a safety-relevant action (a kiosk visitor accidentally signing the NEXT
   person out of nothing, or hesitating over an ambiguous button) and must
   read as "leave" the same way in every theme, light or dark. */
.menu-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(229, 72, 77, 0.12);
    color: #e5484d;
    border: 1px solid rgba(229, 72, 77, 0.4);
    opacity: 1;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
}

.menu-logout-btn:hover,
.menu-logout-btn:focus-visible {
    background: rgba(229, 72, 77, 0.22);
    border-color: rgba(229, 72, 77, 0.6);
}

.menu-logout-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* "My chats" rows, paginated 10 at a time — see core.js refreshMenuHistory /
   loadMoreMenuHistory. #menu-history above holds the actual scrolling. */
.menu-history-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
}

.menu-history-item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
}

.menu-history-delete {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: currentColor;
    opacity: 0.55;
    cursor: pointer;
    border-radius: 50%;
}

.menu-history-delete:hover,
.menu-history-delete:focus-visible {
    opacity: 1;
}

/* "New chat" — always the first row, signed-in or not, mobile or desktop
   (matches every ChatGPT-style sidebar). Its own row rather than a
   .menu-section: it does not toggle, delete, or admin-hide like the rows
   below it. */
.menu-newchat-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    background: transparent;
    color: currentColor;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    text-align: start;
}

.menu-newchat-btn:hover,
.menu-newchat-btn:focus-visible {
    background: rgba(128, 128, 128, 0.14);
}

.menu-newchat-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* liquid-glass wraps every control's real content in .liquidGlass-effect/
   -shine/-text (see its own style.css); the first two are absolutely
   positioned there, so only .liquidGlass-text needs the row layout the
   button itself has everywhere else. A no-op selector on every theme that
   never has this class on this button. */
.menu-newchat-btn .liquidGlass-text {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

@media (min-width: 769px) {
    .menu-drawer {
        width: 300px;
    }
}

/* ── Desktop: persistent, collapsible sidebar ──────────────────────────
   Below this width the drawer is what it has always been: a fixed overlay
   the hamburger button opens and closes (.open), dismissed by the X, an
   outside click, or Escape. At and above it, the SAME markup becomes a
   sidebar that sits beside the chat instead of over it — part of the page's
   own flex layout, not `position: fixed` — open by default, and collapsible
   to a narrow logo-only rail via #menu-sidebar-toggle (a separate control
   from the mobile hamburger, which is hidden here). Two independent state
   machines on one element: `.open` (mobile slide) and `.collapsed` (desktop
   rail) never both apply at the same viewport width, so they cannot
   conflict — see static/chat/core.js for which one JS drives at which width.

   Scope: base/inotex/minimal/liquid-glass only. haj keeps its own
   full-width top-bar layout (a deliberately different, bespoke shell for
   that install) unchanged at every width — its menu.html has none of the
   markup these rules target, so this block is simply inert there. */
@media (min-width: 992px) {
    body {
        flex-direction: row;
    }

    .app-layout {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .menu-backdrop {
        display: none;
    }

    .menu-drawer {
        position: static;
        height: 100dvh;
        width: auto;
        flex: 0 0 300px;
        transform: none;
        transition: flex-basis 0.18s ease;
        box-shadow: none;
        border-left: 1px solid rgba(128, 128, 128, 0.15);
    }

    .menu-drawer.collapsed {
        flex-basis: 76px;
    }

    /* Mobile-only chrome, hidden once the sidebar is part of the layout. */
    .menu-drawer-close {
        display: none;
    }

    /* The header's own hamburger only makes sense for the mobile overlay;
       the sidebar's own toggle (below) replaces it here. */
    #menu-toggle {
        display: none;
    }

    .menu-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 14px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(128, 128, 128, 0.15);
    }

    .menu-drawer.collapsed .menu-sidebar-header {
        justify-content: center;
    }

    .menu-sidebar-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        overflow: hidden;
        font-weight: 700;
        font-size: 0.95rem;
    }

    .menu-sidebar-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .menu-drawer.collapsed .menu-sidebar-logo {
        display: none;
    }

    .menu-sidebar-toggle-btn {
        position: relative;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: transparent;
        border: none;
        color: currentColor;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-sidebar-toggle-btn:hover,
    .menu-sidebar-toggle-btn:focus-visible {
        background: rgba(128, 128, 128, 0.14);
    }

    /* Expanded: the toggle is its own button next to the logo, always the
       rail icon — no morphing needed, the logo already has its own slot. */
    .menu-sidebar-toggle-logo {
        display: none;
    }

    /* Collapsed: the logo's own slot is gone, so this SAME button carries a
       copy of the logo at rest, and only reveals the rail icon on hover —
       "hover the collapsed menu and the logo becomes the toggle button". */
    .menu-drawer.collapsed .menu-sidebar-toggle-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0;
        border-radius: 8px;
        overflow: hidden;
        font-weight: 700;
        font-size: 0.95rem;
        opacity: 1;
        transition: opacity 0.15s ease;
    }

    .menu-drawer.collapsed .menu-sidebar-toggle-icon {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .menu-drawer.collapsed .menu-sidebar-toggle-btn:hover .menu-sidebar-toggle-logo {
        opacity: 0;
    }

    .menu-drawer.collapsed .menu-sidebar-toggle-btn:hover .menu-sidebar-toggle-icon {
        opacity: 1;
    }

    /* Collapsed rail: everything below the header hides — a "my chats" list,
       language row, etc. cannot read as icons with no clutter, and ChatGPT's
       own collapsed rail hides its equivalent rows too, not just labels. */
    .menu-drawer.collapsed #menu-history,
    .menu-drawer.collapsed .menu-footer,
    .menu-drawer.collapsed .menu-newchat-btn span {
        display: none;
    }

    .menu-drawer.collapsed .menu-newchat-btn {
        justify-content: center;
        padding: 8px;
    }
}