/* Responsive styles for mobile */
/* Frontend/css/mobile-chat.css */

/* Force mobile layout when JS detects mobile device (even if media queries fail) */
body.mobile-standalone {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    --mobile-keyboard-offset: 0px;
}

body.mobile-standalone .app-container {
    height: 100%;
    position: relative;
    overflow: hidden !important;
}

body.mobile-standalone .snowflake-area {
    z-index: 1;
}

body.mobile-standalone .chat-area {
    overflow-y: hidden !important;
    position: fixed !important;
    z-index: 2;
    background-color: transparent !important;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    display: flex;
    padding-bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

body.mobile-standalone .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(90vw, 420px) !important;
    min-width: 0 !important;
    z-index: 3000;
    transform: translate3d(-100%, 0, 0);
    /* Dimmed at rest, full strength only once it is open: the scrim behind it
       ramps with the gesture, and a drawer that slid in at a constant, final
       opacity was the one element in the transition that did not participate.
       The floor matches DRAWER_MIN_OPACITY in mobile_chat/sidebar.js, which
       drives the same property inline while a drag is in progress — starting a
       drag must not step the panel's brightness. */
    opacity: 0.3;
    transition:
        transform 260ms cubic-bezier(0.22, 0.8, 0.25, 1),
        opacity 200ms cubic-bezier(0.22, 0.8, 0.25, 1);
    will-change: transform, opacity;
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    pointer-events: none;
}

body.mobile-standalone .sidebar.collapsed {
    width: min(90vw, 420px) !important;
}

/* The sidebar header is content-box (no global border-box reset in this app),
   so the desktop `height: 65px` + `padding: 18px` add up to a 101px bar — twice
   the 50px chat header beside it, and the single tallest thing on a phone
   screen. Match the chat header's compact metrics on mobile instead. The
   sidebar already carries `padding-top: env(safe-area-inset-top)`, so the
   status bar is accounted for above this box, not inside it.

   58, not the chat header's 50: this bar is the only one of the two that holds
   a CONTROL rather than text. The Chats/Teams segmented track is 34px tall, so
   at 50px it had 8px of air above and below and read as wedged into the bar.
   The drawer is an overlay — it does not have to line up with the header
   behind it, and 58 is still well under the desktop 101. */
body.mobile-standalone .sidebar .sidebar-header {
    height: 58px;
    padding: 0 10px 0 14px;
    box-sizing: border-box;
    min-height: 58px;
    gap: 8px;
}

/* A 16px glyph is not a tap target. The close control gets the 34px circle it
   needs, and the `gap` above stops it from crowding the segmented track — at
   the old metrics the two were touching, so the button read as sitting ON the
   Teams half rather than beside it. */
/* First in the header's DOM (on desktop it sits left of the logo), but a
   drawer's close control belongs at the far right, where it always was. */
body.mobile-standalone .sidebar .sidebar-toggle--drawer-close {
    order: 10;
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 17px;
    color: var(--icon-color);
    -webkit-tap-highlight-color: transparent;
}

body.mobile-standalone .sidebar .sidebar-toggle--drawer-close:active {
    background: var(--tm-bg-alt, rgba(0, 0, 0, .06));
}

/* `.sessions-header` ("Recent Sessions (N)") is hidden on mobile, so this
   container's 8px is the ENTIRE gap between the search field and the bar
   above it. On desktop that 8px sits under a heading and reads fine; here it
   made the field look stuck to the header. */
body.mobile-standalone .sidebar .sessions-search-container {
    padding-top: 14px;
    padding-bottom: 10px;
}

body.mobile-standalone .sidebar .sidebar-header h2 {
    padding: 0;
    font-size: 1.05em;
}

body.mobile-standalone .sidebar.expanded .workflow-title {
    display: flex !important;
}

body.mobile-standalone .sidebar.expanded {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

body.mobile-standalone .sidebar.drawer-dragging {
    transition: none !important;
}

body.mobile-standalone .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms cubic-bezier(0.22, 0.8, 0.25, 1);
}

body.mobile-standalone .sidebar-overlay.active {
    opacity: 0.5;
    pointer-events: auto;
}

/* The drawer observes Pointer Events at document level. Giving it an edge-strip
   overlay would make that overlay the original event target, preventing a
   message below it from receiving a press-and-hold. Apply `touch-action` to
   the real scroll surfaces instead: horizontal drawer drags remain available,
   while message spotlighting and every normal message interaction retain
   their native target. */
body.mobile-standalone .messages-wrapper,
body.mobile-standalone .teams-conversation__scroll,
body.mobile-standalone .space-feed__scroller {
    touch-action: pan-y;
}

body.mobile-standalone .current-workflow {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
    display: none;
}

/* `.chat-header-center` carries a `margin-right: 100px` in main-chat.css —
   room for the THREE-COLUMN DESKTOP GRID's right column (`.header-actions`).
   Mobile switches `.chat-header` to flexbox instead (below), where that fixed
   margin is just 100px permanently eaten out of a ~350px-wide phone header
   before the Chat/Teams/Settings pill and .mobile-header-actions even start
   competing for the rest — which starved the icon row down to zero width and
   made `.mobile-menu-toggle` (the "⋮" for Notifications/Calendar/Logout/etc.)
   impossible to see or tap. `min-width: 0` lets the tab pill itself shrink
   under real pressure instead of forcing the overflow onto its neighbors. */
body.mobile-standalone .chat-header-center {
    min-width: 0;
}

/* Never the ones sacrificed when the header runs out of room: an invisible
   hamburger or "⋮" is a dead end with no other way to reach what's behind it
   (the sidebar; Notifications/Calendar/Logout). `.chat-header-left` (holds
   only the hidden search box on mobile) and `.chat-header-center` absorb any
   remaining squeeze instead. */
body.mobile-standalone .mobile-sidebar-toggle,
body.mobile-standalone .mobile-header-actions {
    flex-shrink: 0;
}

body.mobile-standalone .chat-header .search-container {
    display: none;
}

/* Off-screen rather than display:none: the desktop header still hosts the
   Notifications bell + dropdown (notification-center.css) and its full
   fetch/render/filter logic. `display:none` on an ancestor makes every
   descendant unrenderable no matter what CSS a child later sets — so a
   mobile entry point that wants to pop just the notif panel back on top
   (see #chatNotifContainer.mobile-notif-active below) needs an ancestor that
   only WOULD occupy space/paint, not one that structurally can't. Calendar
   and the user-avatar dropdown don't need this trick — their panels mount
   straight onto document.body — but they ride along here for free. */
body.mobile-standalone .header-actions {
    /* `display` is explicit and `!important` on purpose: this used to just be
       `display: none`, which is what a stray `display:flex` (main-chat.css,
       unconditional, loaded FIRST) or the older unguarded
       `@media (max-width: 768px) { .header-actions { display: none } }`
       further down this same file could never out-cascade regardless of load
       order — losing that `display: none` (swapped below for the
       position/visibility trick the notif escape hatch needs) left `display`
       itself contested between those two other same-specificity rules with no
       tie-breaker this rule was part of, and the desktop icons (search,
       notifications, calendar, theme, language/logout) reappeared, overlapping
       the header tabs. `!important` here removes that ambiguity outright
       rather than depending on file load order to keep winning it. */
    display: block !important;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

/* The Notifications bell + dropdown popped back to a full-screen sheet from
   the mobile "⋮" menu (see frontend/js/components/mobile_chat/header.js and
   notification-center.css's own mobile block). Only this one container
   escapes the hidden .header-actions above — Calendar/theme/search/avatar
   stay hidden, matching the rest of the mobile chrome. */
body.mobile-standalone #chatNotifContainer.mobile-notif-active {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
    z-index: 100060;
}

/* `.chat-header` carries `will-change: transform` further down this file (for
   its `.scroll-hidden` slide) — a `will-change` naming `transform` makes the
   header itself the CONTAINING BLOCK for any `position: fixed` descendant,
   the same as an actual `transform` would. #chatNotifContainer/#chatNotifDropdown
   above rely on `inset: 0` resolving against the real viewport to go
   full-screen; with the header as their containing block instead, they were
   sized to the header's own ~50-65px box and rendered as a sliver (or nothing
   at all once `.chat-notif-dropdown`'s mobile padding-top ate that whole
   sliver) — never full-screen. Drop the hint for the duration the sheet is
   open, where the scroll-hide animation can't be running anyway (the header
   is occupied by the sheet, not the scroll it hides for). */
body.mobile-standalone .chat-header:has(#chatNotifContainer.mobile-notif-active) {
    will-change: auto;
}

body.mobile-standalone .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 15px;
}

body.mobile-standalone .mobile-sidebar-toggle,
body.mobile-standalone .mobile-menu-toggle {
    background: none;
    border: none;
    color: var(--icon-color);
    font-size: 18px;
    padding: 5px;
    cursor: pointer;
}

body.mobile-standalone .mobile-search-bar {
    display: none;
    position: fixed;
    top: calc(env(safe-area-inset-top) + 50px);
    left: 0;
    right: 0;
    background: var(--header-bg);
    z-index: 1001;
    padding: 10px 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transform: translateZ(0);
}

body.mobile-standalone .mobile-search-bar.active {
    display: block !important;
}

body.mobile-standalone .mobile-search-bar.active ~ .messages-wrapper {
    margin-top: 50px;
}

body.mobile-standalone .file-upload-button {
    display: none;
}

body.mobile-standalone .messages-container {
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding: 10px 5px 0;
    max-width: 97%;
    gap: 5px;
    padding-bottom: calc(10px + var(--send-anchor-extra-space, 0px)) !important;
    margin-bottom: 0;
    box-sizing: border-box;
    min-height: auto;
    height: auto;
}

body.mobile-standalone .chat-area .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px 10px;
    padding-top: calc(env(safe-area-inset-top) + 12px);
    transition: transform 0.8s ease-in-out;
    height: 50px;
    position: relative !important;
    z-index: 1000;
}

body.mobile-standalone.keyboard-open .chat-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

body.mobile-standalone.keyboard-open .messages-wrapper {
    padding-top: 80px;
}

body.mobile-standalone .input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1001;
    padding: 5px;
    padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    transform: translateY(calc(-1 * var(--mobile-keyboard-offset, 0px)));
    transition: transform 0.2s ease-out;
    /* box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); */
    box-shadow: none;
    min-height: 20px;
    display: flex !important;
    visibility: visible !important;
    /* OPAQUE, not `--input-field-bg`. That token is the same colour with a b5
       alpha (~71%), which reads as frosted over a plain page and as broken over
       a Teams conversation background photo: the transcript showed straight
       through the composer. `--header-bg` is that same colour without the
       alpha, in both themes, so the composer keeps its design and stops
       competing with whatever is scrolling behind it. Mobile only — the
       composer is `position: fixed` here, so it always has content under it. */
    background: var(--header-bg);
    --stt-mic-color: var(--stt-regular-mic);
    --stt-mic-hover-color: var(--stt-regular-mic-hover);
    --stt-mic-hover-bg: var(--stt-regular-mic-hover-bg);
    --stt-stop-color: var(--stt-regular-stop);
    --stt-spinner-color: var(--stt-regular-spinner);
    --stt-visualizer-color: var(--stt-regular-visualizer);
}

body.mobile-standalone.keyboard-open .input-container {
    bottom: 0;
    padding-bottom: 5px;
}

body.mobile-standalone .input-container:focus-within,
body.mobile-standalone .input-container.has-text {
    --stt-mic-color: var(--stt-regular-mic-focus);
    --stt-mic-hover-color: var(--stt-regular-mic-hover-focus);
    --stt-mic-hover-bg: var(--stt-regular-mic-hover-bg-focus);
    --stt-spinner-color: var(--stt-regular-spinner-focus);
    --stt-visualizer-color: var(--stt-regular-visualizer-focus);
}

body.mobile-standalone.fresh-chat-mode #inputContainer {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

body.mobile-standalone .fresh-chat-wrapper {
    max-width: 640px;
    padding: 0 16px 24px;
}

body.mobile-standalone .fresh-chat-input-shell {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
}

body.mobile-standalone .messages-wrapper {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 950;
    box-sizing: border-box;
    padding-bottom: calc(20px + var(--mobile-keyboard-offset, 0px));
    transition: margin-top 0.3s ease-in-out;
    margin-top: -50px;
}

body.mobile-standalone.assistant-streaming .messages-wrapper {
    padding-bottom: calc(82px + var(--mobile-keyboard-offset, 0px));
}

body.mobile-standalone .scroll-bottom-arrow {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(88px + env(safe-area-inset-bottom, 0px) + var(--mobile-keyboard-offset, 0px));
    z-index: 1002;
    opacity: 0.6;
}

body.mobile-standalone.assistant-streaming .scroll-bottom-arrow {
    display: none !important;
}

body.mobile-standalone .scroll-bottom-arrow:hover {
    transform: translateX(-50%) scale(1.1);
}

body.mobile-standalone .chat-header.scroll-hidden {
    transform: translateY(-100%);
    overflow: hidden;
}

body.mobile-standalone .chat-header.scroll-hidden ~ .messages-wrapper {
    margin-top: -50px;
}

body.mobile-standalone .messages-container.input-visible {
    padding-bottom: calc(10px + var(--send-anchor-extra-space, 0px));
}

body.mobile-standalone .messages-container.input-hidden {
    padding-bottom: calc(20px + var(--send-anchor-extra-space, 0px));
}

body.mobile-standalone #userInput {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 44px;
    max-height: 150px;
    height: auto;
    line-height: 1.3;
    padding: 10px 50px 10px 16px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent;
    font-size: 0.92rem;
    color: var(--text-color);
}

body.mobile-standalone #userInput::placeholder {
    color: rgba(64, 80, 98, 0.55);
}

body.dark-theme.mobile-standalone #userInput::placeholder {
    color: rgba(240, 240, 240, 0.55);
}

body.mobile-standalone .input-container:focus-within #userInput,
body.mobile-standalone .input-container.has-text #userInput {
    background: #ffffff;
    color: #2b2b2b;
    box-shadow: 0 0 5px rgba(97, 98, 98, 0.5);
}

body.mobile-standalone .input-container:focus-within #userInput::placeholder,
body.mobile-standalone .input-container.has-text #userInput::placeholder {
    color: #6b7280;
}

/* The shared Chat composer must not change to the light focus treatment on a
   dark mobile page. Keep text, placeholder and speech controls legible on the
   same dark surface in idle and focused states. */
body.dark-theme.mobile-standalone .input-container,
body.dark-theme.mobile-standalone .input-container:focus-within,
body.dark-theme.mobile-standalone .input-container.has-text {
    --stt-mic-color: #dce3ec;
    --stt-mic-hover-color: #fff;
    --stt-mic-hover-bg: rgba(255, 255, 255, 0.12);
    --stt-spinner-color: #fff;
    --stt-visualizer-color: #b8c0cb;
}
body.dark-theme.mobile-standalone .input-container:focus-within #userInput,
body.dark-theme.mobile-standalone .input-container.has-text #userInput {
    background: var(--input-field-bg);
    color: var(--text-color);
}
body.dark-theme.mobile-standalone .input-container:focus-within #userInput::placeholder,
body.dark-theme.mobile-standalone .input-container.has-text #userInput::placeholder {
    color: rgba(240, 240, 240, 0.55);
}
body.dark-theme.mobile-standalone .send-button.has-content {
    color: #dce3ec;
}

body.mobile-standalone.keyboard-open .welcome-container {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: auto;
}

body.mobile-standalone .mobile-menu {
    position: fixed;
    top: 60px;
    right: 10px;
    background-color: var(--sidebar-bg);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 25;
    display: none;
    min-width: 150px;
    border: 1px solid var(--border-color);
}

body.mobile-standalone .mobile-menu-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
}

body.mobile-standalone .mobile-menu-item:hover {
    background-color: rgba(0,0,0,0.05);
}

body.mobile-standalone .mobile-menu-item i {
    font-size: 16px;
}

body.mobile-standalone .mobile-menu-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
    font-weight: 500;
}

body.mobile-standalone .mobile-switch {
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background: rgba(64, 80, 98, 0.3);
    position: relative;
    transition: background 0.2s ease;
}

body.mobile-standalone .mobile-switch-handle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

body.mobile-standalone .mobile-switch.enabled {
    background: #4f8ad9;
}

body.mobile-standalone .mobile-switch.enabled .mobile-switch-handle {
    left: 22px;
    box-shadow: 0 2px 6px rgba(79,138,217,0.4);
}

body.mobile-standalone .mobile-lang-options {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--secondary-text);
}

body.mobile-standalone .mobile-lang-option {
    cursor: pointer;
    font-weight: 500;
    opacity: 0.6;
}

body.mobile-standalone .mobile-lang-option.active {
    opacity: 1;
    color: var(--text-color);
    border-bottom: 2px solid var(--text-color);
    background: #4f8ad9;
    padding: 5px 10px;
    border-radius: 8px;
    color: white;
}

body.mobile-standalone .mobile-lang-divider {
    opacity: 0.4;
}

body.mobile-standalone .mobile-menu-separator {
    height: 1px;
    background: rgba(0,0,0,0.1);
    margin: 4px 0;
}

/* `.mobile-menu-item` sets its own `display: flex` (same specificity as the
   UA stylesheet's `[hidden] { display: none }`, and author styles win that
   tie), so toggling the JS `hidden` property on "New chat" alone does nothing
   visible without this. Same trap documented for `.teams-conversation__ask-ai`
   in AMBY_TEAMS_SYSTEM_GUIDE.md — worth remembering, since it is silent: the
   element just never disappears and nothing errors. */
body.mobile-standalone .mobile-menu-item[hidden] {
    display: none !important;
}

/* Unread dot on the "Notifications" row — mirrors #chatNotifBadge's color,
   pushed to the row's end regardless of the row's own justify-content. */
body.mobile-standalone .mobile-menu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e74c3c;
    margin-left: auto;
    flex-shrink: 0;
}

body.mobile-standalone .mobile-menu.active {
    display: block;
}

body.mobile-standalone .input-row {
    width: 100%;
    position: relative;
    /* background: #fff; */
    /* border-radius: 24px; */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    box-shadow: none;
    padding: 0;
    display: flex !important;
    align-items: center;
    min-height: 52px;
    /* border: 1px solid rgba(0, 0, 0, 0.05); */
    overflow: hidden;
}

body.mobile-standalone .input-row:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); */
}

body.mobile-standalone #userInput::placeholder {
    color: rgba(64, 80, 98, 0.55);
}

body.mobile-standalone .file-upload-button {
    display: none !important;
}

body.mobile-standalone .input-container .send-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(64, 80, 98, 0.08);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(64, 80, 98, 0.75);
    border: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

body.mobile-standalone.pull-refreshing .input-container {
    opacity: 0;
    pointer-events: none;
}

body.mobile-standalone.pull-refreshing .scroll-bottom-arrow {
    display: none !important;
}

body.mobile-standalone .input-container .stt-visualizer {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    gap: 4px;
    height: 18px;
}

body.mobile-standalone .input-container .stt-visualizer span {
    width: 3px;
    height: 10px;
    background: var(--stt-visualizer-color);
    border-radius: 2px;
    animation: stt-bar 0.9s ease-in-out infinite;
}

body.mobile-standalone .input-container .stt-visualizer span:nth-child(2) {
    animation-delay: 0.2s;
}

body.mobile-standalone .input-container .stt-visualizer span:nth-child(3) {
    animation-delay: 0.4s;
}

body.mobile-standalone .input-container .mic-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stt-mic-color);
    border: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    z-index: 10;
}

/* HOLDING this button is the gesture that records an audio message — and a long
   press is also what raises iOS's selection loupe, so the magnifier popped up
   over the composer every time someone recorded. There is no text here anyone
   could want to select, and the gesture is ours.
   Deliberately NOT nested under .input-container: the same button is relocated
   into .teams-conversation__composer-slot for a Team conversation, which is
   where it was reported, so the suppression keys on the component itself. */
body.mobile-standalone .mic-button,
body.mobile-standalone .mic-button i {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body.mobile-standalone .input-container .send-button i {
    font-size: 18px;
    margin-left: 1px;
}

body.mobile-standalone .input-container .mic-button i {
    font-size: 18px;
    margin-left: 1px;
}

.chat-area #inputContainer .send-button.has-content,
body.mobile-standalone .send-button.has-content {
    /* background: #405062; */
    background: transparent;
    color: var(--send-btn-bg, #405062);
    box-shadow: none;
    z-index: 10;
}

body.mobile-standalone .send-button.has-content i {
    font-size: 18px;
}

body.mobile-standalone .mic-button.has-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* The mirror of the rule above, and it was missing. Both buttons are
   `position: absolute; right: 0`, and `has-content` is toggled on the two
   together (chat_page/index.js, teams-conversation-composer.js) — so the mic
   correctly disappeared once there was something to send, but the send button
   was never hidden while the composer was EMPTY. The two then sat on the same
   42px circle: a paper plane showing through a microphone. Desktop is
   unaffected; it does not stack them. */
body.mobile-standalone .send-button:not(.has-content) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.mobile-standalone .mic-button.is-recording {
    color: var(--stt-stop-color);
}

body.mobile-standalone .mic-button.is-processing,
body.mobile-standalone .mic-button.is-preparing {
    pointer-events: none;
    opacity: 1;
    color: var(--stt-spinner-color);
}

body.mobile-standalone .input-container.is-recording .stt-visualizer {
    display: flex;
}


@media (max-width: 768px) {
    body {
        overflow: hidden;
    }

    .app-container {
        overflow: hidden !important;
    }

    .welcome-container .welcome-image {
        width: 50px;
        height: 50px;
    }

    .snowflake-area {
        z-index: 1;
    }

    .chat-area .chat-header {
        z-index: 1200;
    }

    .messages-wrapper {
        position: relative;
        /* z-index: 1000; */
    }

    .input-container {
        position: relative;
        z-index: 1200;
    }

    .input-container .additional-query-suggestions-wrapper {
        width: 89%;
        bottom: calc(50% + 30px);
        border-radius: 12px;
    }

    /* Prevent chat-area scroll */
    .chat-area { 
        overflow-y: hidden !important;
        position: fixed;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        display: flex;
        padding-bottom: 80px;
    }

    /* Hide sidebar by default on mobile */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        width: 0;
        z-index: 3000;
        transition: width 0.3s ease;
        overflow: hidden;
        padding-top: env(safe-area-inset-top);
    }

    .sidebar.collapsed {
        width: 0;
    }

    /* Same compaction as the standalone/PWA rule above — see the comment there. */
    .sidebar .sidebar-header {
        height: 50px;
        padding: 0 14px;
        box-sizing: border-box;
    }

    .sidebar .sidebar-header h2 {
        padding: 0;
        font-size: 1.05em;
    }

    .sidebar.expanded .workflow-title {
        display: flex !important;
    }

    .sidebar.expanded {
        width: 90% !important;
    }

    /* Scoped to the sidebar (CLAUDE.md CSS rule): both of these class names are
       generic enough to exist on another surface, and the drawer is the only
       place this layout is meant for. */
    .sidebar .sessions-search-container {
        display: flex;
    }

    .sidebar .sessions-list-container .sessions-header {
        display: none;
    }

    /* Sidebar overlay for mobile click-outside-to-close */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.active {
        display: block;
    }

    .current-workflow {
        flex: 1;
        text-align: center;
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 10px;
    }

    .workflows-list {
        max-height: 40%;
        box-shadow: 0 1px 4px rgb(0 0 0 / 14%);
    }

    /* Hide desktop search bar on mobile */
    .chat-header .search-container {
        display: none;
    }
    
    /* Hide normal header elements and show mobile header */
    .header-actions {
        display: none;
    }
    
    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-left: 10px;
    }

    .mobile-right-icons {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .mobile-sidebar-toggle {
        background: none;
        border: none;
        color: var(--icon-color);
        font-size: 18px;
        padding: 5px;
        cursor: pointer;
        margin-right: 10px;
    }

    .mobile-search-toggle,
    .mobile-theme-toggle,
    .mobile-new-chat,
    .mobile-menu-toggle {
        background: none;
        border: none;
        color: var(--icon-color);
        font-size: 18px;
        padding: 5px;
        cursor: pointer;
        right: 10px;
    }
    
    .mobile-search-bar {
        display: none;
        position: fixed;
        /* top: 50px; */
        top: calc(env(safe-area-inset-top) + 50px);
        left: 0;
        right: 0;
        background: var(--header-bg);
        z-index: 1001;
        padding: 10px 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
    }

    body.keyboard-open .mobile-search-bar.active {
        top: env(safe-area-inset-top, 0px);
        z-index: 1003; /* Above keyboard */
        top: 50px;
    }

    .mobile-search-bar.active {
        display: block;
        transform: translateY(0);
        opacity: 1;
    }

    .mobile-search-bar.active ~ .messages-wrapper {
        margin-top: 50px; /* Same as search bar height */
    }

    .mobile-search-bar.active .search-container {
        display: block;
    }

    .mobile-search-bar .search-nav-btn:hover:not(:disabled) {
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* Hide file upload on mobile */
    .file-upload-button {
        display: none;
    }
    
    /* Make search more compact on mobile */
    .search-container {
        display: flex;
        align-items: center;
        position: relative;
        width: 100% !important;
        min-width: 200px;
    }
    
    .search-container.expanded {
        width: 70%;
    }
    
    /* Styling for three-dot menu */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        color: var(--icon-color);
        font-size: 18px;
        padding: 5px;
    }
    
    .mobile-menu {
        position: fixed;
        top: 60px;
        right: 10px;
        background-color: var(--sidebar-bg);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        z-index: 25;
        display: none;
        min-width: 150px;
        border: 1px solid var(--border-color);
    }

    .message-container-bot .bot-message .ui-resource-wrapper {
        min-width: 100px !important;
    }
    
    .mobile-menu.active {
        display: block;
    }
    
    .mobile-menu-item {
        padding: 10px 15px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }
    
    .mobile-menu-item:hover {
        background-color: rgba(0,0,0,0.05);
    }

    .mobile-menu-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e74c3c;
        margin-left: auto;
        flex-shrink: 0;
    }

    .messages-container {
        overflow-y: visible !important; /* Single-scroll model: wrapper scrolls */
        overflow-x: visible !important;
        padding: 10px 5px 0; 
        max-width: 97%;
        gap: 5px;
        padding-bottom: 10px !important;
        margin-bottom: 0;
        box-sizing: border-box;
        min-height: auto; /* Remove min-height that might cause issues */
        height: auto;
    }

    /* .messages-container.input-visible,
    .messages-container.input-hidden {
        padding-bottom: 0 !important;
    } */

    /* Adjust chat header padding */
    .chat-area .chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 20px 10px;
        padding-top: calc(env(safe-area-inset-top) + 12px);
        transition: transform 0.8s ease-in-out;
        will-change: transform;
        height: 50px;
        position: relative !important;
        z-index: 1000;
    }

    /* Only apply fixed positioning when keyboard is open */
    body.keyboard-open .chat-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    .chat-header.scroll-hidden {
        transform: translateY(-100%);
        overflow: hidden;
    }

    #chatMessages .welcome-container {
        margin-top: 70px !important;
    }
    
    /* Reduce padding for input container */
    .input-container {
        position: fixed;
        bottom: env(safe-area-inset-bottom, 0);
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        z-index: 100;
        padding: 10px 5px;
        padding-bottom: max(var(--input-padding, 12px), env(safe-area-inset-bottom));
        box-sizing: border-box;
        transition: transform 0.3s ease-in-out;
        will-change: transform;
        background-color: var(--header-bg);
        box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2);
        min-height: calc(20px + env(safe-area-inset-bottom, 0));
        /* Ensure container is visible */
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Additional fix for iOS viewport issues */
    @supports (-webkit-touch-callout: none) {
        .input-container {
            bottom: max(env(safe-area-inset-bottom, 0), 0px);
            padding-bottom: max(15px, env(safe-area-inset-bottom, 0));
            bottom: 0;
        }
    }

    textarea {
        -webkit-overflow-scrolling: touch;
        /* Prevent iOS keyboard accessory bar */
        -webkit-user-select: text;
        user-select: text;
    }

    /* Specifically target iOS */
    @supports (-webkit-touch-callout: none) {
        textarea {
            font-size: 16px; /* Prevent zoom on focus */
        }
    }

    @supports (-webkit-touch-callout: none) {
        /* Target only the navigation bar */
        div[role="toolbar"][aria-label="Previous, Next, Done"] {
            display: none !important;
        }
        
        /* Keep text suggestions visible */
        div[role="presentation"][aria-label="Predictive input"] {
            display: flex !important;
        }
        
        /* Ensure input still works normally */
        textarea, input {
            -webkit-user-select: text;
            user-select: text;
            font-size: 16px;
        }
    }

    .messages-wrapper {
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        position: relative;
        box-sizing: border-box;
        padding-bottom: 40px;
        transition: margin-top 0.3s ease-in-out;
        margin-top: -50px; /* Default state */
    }

    /* When header is hidden, smoothly reduce top margin */
    .chat-header.scroll-hidden ~ .messages-wrapper {
        margin-top: -50px; 
    }

    /* Dynamic padding when input container is visible */
    .messages-container.input-visible {
        padding-bottom: 10px;
    }
    
    /* Reduced padding when input container is hidden */
    .messages-container.input-hidden {
        padding-bottom: 20px;
    }    

    /* Only add top padding when keyboard is open and header is fixed */
    body.keyboard-open .messages-wrapper {
        padding-top: 80px;
    }

    /* Only apply these styles on mobile when keyboard is open */
    body.keyboard-open .welcome-container {
        position: relative;
        margin-top: 20px;
        margin-bottom: 20px;
        min-height: auto;
    }

    /* Ensure welcome message is visible above keyboard */
    /* body.keyboard-open .messages-container {
        max-height: calc(100vh - 250px);
        overflow-y: auto;
    } */

    #userInput {
        /* border-radius: 30px; */
        min-height: 40px; /* Remove !important */
        max-height: 120px; /* Remove !important */
        height: 40px; /* Set initial height without !important */
        line-height: 1.2;
        padding: 8px 12px;
        padding-right: 48px;
        /* Ensure textarea stays visible */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 1;
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .input-row {
        gap: 0;
        width: 100%;
        padding-left: 10px;
        display: flex !important;
        align-items: flex-end; /* Align to bottom when textarea grows */
    }

    .input-container .send-button {
        height: 40px;
        width: 40px;
        background-color: transparent;
        color: color-mix(in srgb, var(--accent-color) 60%, white);
        border-radius: 0;
    }

    .input-container .send-button i {
        font-size: 18px;
    }

    .input-container .mic-button {
        height: 40px;
        width: 40px;
        background-color: transparent;
        color: color-mix(in srgb, var(--accent-color) 60%, white);
        border-radius: 0;
    }

    .input-container .mic-button i {
        font-size: 18px;
    }

    .send-button.has-content {
        box-shadow: none;
        /* box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3); */
        background-color: transparent;
        cursor: pointer;
        color: var(--send-button-bg);
        /* border-radius: 20px; */
    }

    .send-button.has-content i {
        font-size: 20px;
    }

    .mic-button.has-content {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .mic-button.is-processing,
    .mic-button.is-preparing {
        pointer-events: none;
        opacity: 1;
    }

    .input-container.is-recording .stt-visualizer {
        display: flex;
    }


    .file-attachments-container {
        display: none !important;
    }
    
    /* Reduce padding for message bubbles */
    .user-message, .bot-message,
    .message-container .user-message {
        padding: 8px 12px;  /* Slightly reduced padding */
        margin-bottom: 10px;
    }

    .message-container, .message-container-bot {
        gap: 0;
        padding: 0;
        margin: 0;
    }

    .message-container-bot .bot-message {
        max-width: 90%;
    }

    .tooltip-container .bot-icon {
        width: 20px;
        height: 20px;
    }

    .message-meta {
        display: none !important;
    }

    .scroll-bottom-arrow {
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: calc(88px + env(safe-area-inset-bottom, 0px) + var(--mobile-keyboard-offset, 0px));
    }

    .message-entering {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .message-entered {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Different animations for user vs bot messages */
    .user-container.message-entering {
        transform: translateX(30px) translateY(10px) scale(0.95);
    }

    .bot-container.message-entering {
        transform: translateX(-30px) translateY(10px) scale(0.95);
    }

    /* Timestamp styles for swipe feature - mobile only */
    .individual-timestamp {
        position: absolute;
        width: 50px;
        max-height: 40px;
        /* background: var(--chat-bg); */
        background: transparent;
        color: var(--text-color);
        font-size: 11px;
        text-align: center;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease-out;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }
    
    .individual-timestamp .timestamp-time {
        font-weight: 500;
        line-height: 1.1;
    }
    
    .individual-timestamp .timestamp-date {
        font-size: 11px;
        opacity: 0.8;
        line-height: 1.1;
    }

    .sidebar-header {
        background-color: var(--header-bg);
    }

    .sidebar.expanded ~ .chat-area .scroll-bottom-arrow {
        display: none !important;
    }
    
    .pull-refresh-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
    }
    
    .pull-refresh-arrow {
        font-size: 18px;
        transition: transform 0.3s ease;
        color: inherit;
    }
    
    .pull-refresh-text {
        font-size: 14px;
        font-weight: 800;
        text-align: center;
        line-height: 1.4;
        max-width: 200px;
    }
    
    .pull-refresh-indicator.ready-to-refresh .pull-refresh-arrow {
        color: white;
    }

    .ios-spinner {
        width: 24px;
        height: 24px;
        position: relative;
        animation: ios-spinner-rotate 2s linear infinite;
    }
    
    .ios-spinner-blade {
        position: absolute;
        width: 2px;
        height: 6px;
        background: currentColor;
        border-radius: 1px;
        opacity: 0.3;
        left: 50%;
        top: 0;
        transform-origin: center 12px;
    }
    
    .ios-spinner-blade:nth-child(1) { transform: translateX(-50%) rotate(0deg); animation-delay: 0s; }
    .ios-spinner-blade:nth-child(2) { transform: translateX(-50%) rotate(30deg); animation-delay: -0.083s; }
    .ios-spinner-blade:nth-child(3) { transform: translateX(-50%) rotate(60deg); animation-delay: -0.166s; }
    .ios-spinner-blade:nth-child(4) { transform: translateX(-50%) rotate(90deg); animation-delay: -0.25s; }
    .ios-spinner-blade:nth-child(5) { transform: translateX(-50%) rotate(120deg); animation-delay: -0.333s; }
    .ios-spinner-blade:nth-child(6) { transform: translateX(-50%) rotate(150deg); animation-delay: -0.416s; }
    .ios-spinner-blade:nth-child(7) { transform: translateX(-50%) rotate(180deg); animation-delay: -0.5s; }
    .ios-spinner-blade:nth-child(8) { transform: translateX(-50%) rotate(210deg); animation-delay: -0.583s; }
    .ios-spinner-blade:nth-child(9) { transform: translateX(-50%) rotate(240deg); animation-delay: -0.666s; }
    .ios-spinner-blade:nth-child(10) { transform: translateX(-50%) rotate(270deg); animation-delay: -0.75s; }
    .ios-spinner-blade:nth-child(11) { transform: translateX(-50%) rotate(300deg); animation-delay: -0.833s; }
    .ios-spinner-blade:nth-child(12) { transform: translateX(-50%) rotate(330deg); animation-delay: -0.916s; }
    
    @keyframes ios-spinner-rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .ios-spinner-blade {
        animation: ios-spinner-fade 2s linear infinite;
    }
    
    @keyframes ios-spinner-fade {
        0% { opacity: 1; }
        100% { opacity: 0.3; }
    }
}