/* static/css/mobile-bob.css
 *
 * Mobile "Bob underneath" layer (≤576px, EVERY cohort — the release
 * model is the non-cohort shell; her call 2026-08-17). Bob is the
 * phone's floor (navy pane under the header) and the app rides a
 * rounded sheet above him with THREE resting positions
 * (design_handoff_mobile_bob_states):
 *
 *   strip (152px)  — teaser line only, whole band taps to half
 *   half  (430px)  — thread + composer; grabber carries two chevrons
 *   full  (lip 52) — Bob owns the screen; the sheet lip taps back to half
 *
 * Chevrons follow the sheet's travel: up collapses Bob, down opens him
 * entirely. Transitions 300ms ease everywhere (--t-slow; no bounce).
 *
 * Scope discipline: every rule is inside the 576 breakpoint — desktop is
 * untouched. Loaded AFTER chat-styles.css / mobile-chat-widget.css so
 * the display overrides below win the cascade at equal specificity.
 * The chat DOM re-dressed here is the ONE shared chat stack from
 * chat/index.js — no second agent instance (see .claude-memory/
 * mobile-bob-omnipresent.md).
 */

@import url('./colors.css');

/* Outside mobile the Bob chrome never shows (the desktop chat panel is
   its own surface). */
.bob-strip,
.bob-strip-tap,
.bob-grabber,
.bob-header,
.bob-reset-scrim {
    display: none;
}

@media (max-width: 576px) {

    /* ==== Layer 0 — the floor ==== */
    .main-container {
        position: relative;
        background: linear-gradient(to bottom, #062b4b, #04203a);
        overflow: hidden;
    }

    /* Un-hide the chat DOM (chat-styles.css and mobile-tab-view both hide
       it with !important) and re-dress it as Bob's pane. Its height
       TRACKS the sheet (152/430/full-minus-lip) so the composer is never
       painted behind the sheet. */
    .main-container .chat-container,
    .main-container.mobile-tab-view .chat-container {
        display: flex !important;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 152px;
        bottom: auto;
        flex-direction: column;
        padding: 0 18px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        z-index: 1;
        transition: height 300ms ease;
        overflow: hidden;
    }

    .main-container.bob-open .chat-container {
        height: 430px;
    }

    .main-container.bob-full .chat-container {
        height: calc(100% - 52px);
    }

    /* Desktop chat chrome with no place in the Bob pane. #reset-chat
       keeps its id + click handler as the reset entry point — Bob's "+"
       confirm dialog fires it (handoff: drop the "Start New" text button
       from the mobile composer). */
    .main-container .bfh-chat-header,
    .main-container .chat-disclaimer,
    .main-container #reset-chat {
        display: none !important;
    }

    /* ==== Bob's header row — the SAME at every position (her call
       2026-10-02: + and history must always be there). Above the strip's
       full-band tap target; clicks pass through to it except on the
       buttons, so tapping the mark/name still opens Bob. ==== */
    .main-container .bob-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        flex: none;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        position: relative;
        z-index: 4;
        pointer-events: none;
    }

    .main-container .bob-header .bob-header-btn {
        pointer-events: auto;
    }

    .main-container .bob-header-mark {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    .main-container .bob-header-title {
        font-size: 14px;
        font-weight: 600;
        color: #eaf3fb;
    }

    .main-container .bob-header-spacer {
        flex: 1;
    }

    .main-container .bob-header-btn {
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        border-radius: 10px;
        display: grid;
        place-items: center;
        font-size: 15px;
        color: rgba(255, 255, 255, .62);
        cursor: pointer;
    }

    .main-container .bob-header-btn:active,
    .main-container .bob-header-btn.active {
        background: rgba(255, 255, 255, .10);
    }

    /* ==== Recents panel (the clock's flyout) inside Bob's region ==== */
    .main-container .bfh-flyout {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 62px;
        width: auto;
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(4, 20, 38, .42);
        z-index: 6;
    }

    .main-container .bfh-flyout-item {
        padding: 11px 10px;
        border-radius: 9px;
        gap: 10px;
    }

    /* Touch: the row's close × is always visible and tall enough. */
    .main-container .bfh-item-close {
        opacity: 1 !important;
        visibility: visible !important;
        min-height: 44px;
    }

    .main-container .bfh-see-all,
    .main-container .bfh-clear-quick {
        padding: 13px 18px;
    }

    /* ==== Full history fills Bob's region (Bob forced to full) ==== */
    .main-container .bfh-modal-scrim {
        position: absolute;
        inset: 0;
        background: transparent;
        z-index: 7;
        display: block;
    }

    .main-container .bfh-modal-scrim[hidden] {
        display: none;
    }

    .main-container .bfh-modal {
        position: absolute;
        inset: 8px;
        width: auto;
        max-width: none;
        max-height: none;
        border-radius: 20px;
        box-shadow: 0 18px 40px rgba(4, 20, 38, .42);
    }

    .main-container .bfh-modal-close {
        min-width: 44px;
        min-height: 44px;
        font-size: 20px;
    }

    /* ==== Reset confirm (+ tapped): touch asks first ==== */
    .main-container .bob-reset-scrim {
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(4, 20, 38, .55);
        z-index: 8;
        padding: 24px;
    }

    .main-container .bob-reset-scrim[hidden] {
        display: none;
    }

    .main-container .bob-reset-card {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 22px;
        box-shadow: 0 20px 44px rgba(4, 20, 38, .4);
        padding: 20px 20px 16px;
    }

    .main-container .bob-reset-title {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--bf-text);
    }

    .main-container .bob-reset-body {
        font-size: 13px;
        line-height: 1.5;
        color: var(--bf-text-secondary);
        margin: 8px 0 0;
    }

    .main-container .bob-reset-actions {
        display: flex;
        gap: 10px;
        margin-top: 18px;
    }

    .main-container .bob-reset-actions button {
        flex: 1;
        padding: 13px 0;
        border: none;
        border-radius: 12px;
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
    }

    .main-container .bob-reset-keep {
        background: var(--bs-gray-100);
        color: var(--bf-text-secondary);
    }

    .main-container .bob-reset-go {
        background: var(--bs-primary-500);
        color: #fff;
    }

    /* ==== Strip teaser (position 1 only) — under the header now, so it
       takes the rest of the band; the header already carries Bob's mark
       and name, so the teaser's own copy is hidden (her call 2026-10-02).
       ==== */
    .main-container .bob-strip {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 2px;
    }

    .main-container .bob-strip-mark {
        display: none !important;
    }

    .main-container:not(.bob-loud) .bob-strip-eyebrow {
        display: none;
    }

    .main-container.bob-open .bob-strip,
    .main-container.bob-full .bob-strip {
        display: none;
    }

    .main-container .bob-strip-mark {
        width: 44px;
        height: 44px;
        object-fit: contain;
        flex: none;
    }

    .main-container .bob-strip-col {
        flex: 1 1 auto;
        min-width: 0;
    }

    .main-container .bob-strip-eyebrow {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .45);
        margin-bottom: 5px;
    }

    /* "Worth a look" badge — loud state only (no triggers wired yet). */
    .main-container .bob-strip-badge {
        display: none;
        align-items: center;
        gap: 5px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: none;
        color: #ffd9a8;
        background: rgba(255, 145, 77, .18);
        border: 1px solid rgba(255, 145, 77, .4);
        padding: 3px 9px;
        border-radius: var(--radius-full);
    }

    .main-container.bob-loud .bob-strip-badge {
        display: inline-flex;
    }

    .main-container .bob-strip-badge .fa-circle {
        font-size: 5px;
    }

    /* The END of Bob's latest message shows (her call 2026-10-03) — that
       is where his question sits. A three-line window anchored to its
       bottom: longer text overflows UPWARD and is cut at the top, on a
       line boundary (the window is exactly three line boxes). */
    .main-container .bob-strip-line {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        justify-content: unsafe flex-end;
        max-height: calc(1.45em * 3);
        overflow: hidden;
        font-size: 13.5px;
        line-height: 1.45;
        color: #eaf3fb;
        text-wrap: pretty;
    }

    .main-container.bob-loud .bob-strip-line {
        color: #fff;
    }

    .main-container .bob-strip-cue {
        flex: none;
        font-size: 13px;
        color: rgba(255, 255, 255, .35);
    }

    /* The entire collapsed navy band is one tap target. */
    .main-container .bob-strip-tap {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 152px;
        z-index: 3;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .main-container.bob-open .bob-strip-tap,
    .main-container.bob-full .bob-strip-tap {
        display: none;
    }

    /* ==== Thread (positions 2 + 3) ==== */
    /* The guest cap card stands in for the composer (guest.js), so it
       leaves with it — in the 152px band it crushed the strip line up
       into Bob's header. */
    .main-container:not(.bob-open):not(.bob-full) .chat-messages,
    .main-container:not(.bob-open):not(.bob-full) .input-area,
    .main-container:not(.bob-open):not(.bob-full) .guest-cap {
        display: none !important;
    }

    .main-container .chat-messages {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        margin-top: 14px;
        padding: 0 0 6px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: transparent;
        scrollbar-width: none;
    }

    .main-container .chat-messages::-webkit-scrollbar {
        display: none;
    }

    .main-container .chat-messages .message {
        margin: 0;
        padding: 0;
        display: flex;
        flex: none;
    }

    /* Both wrappers span the thread (her screenshot 2026-09-30: "a plate
       would be nice" broke onto two lines). In this column flexbox the
       desktop align-self/margin-left:auto shrink the wrapper to its text,
       and the bubble's 84% then resolved against that shrunk width —
       every short message wrapped. */
    .main-container .chat-messages .message.user-message {
        justify-content: flex-end;
        align-self: stretch;
        margin-left: 0;
    }

    .main-container .chat-messages .message.ai-message {
        justify-content: flex-start;
        align-self: stretch;
        padding-left: 0;
    }

    .main-container .chat-messages .message-content {
        max-width: 84%;
        padding: 11px 13px;
        font-size: 13.5px;
        line-height: 1.5;
    }

    /* Deliberately quiet (handoff update 2026-08-17): the user already
       knows what they asked — orange stays reserved for affordance
       (send button, active tab, CTAs). */
    .main-container .message.user-message .message-content {
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .20);
        color: rgba(234, 243, 251, .78);
        border-radius: 16px 16px 6px 16px;
    }

    .main-container .message.ai-message .message-content {
        background: rgba(255, 255, 255, .09);
        border: 1px solid rgba(255, 255, 255, .08);
        color: #eaf3fb;
        border-radius: 16px 16px 16px 6px;
    }

    .main-container .message.ai-message .message-content a {
        color: #8fc4ea;
    }

    /* ==== Composer (positions 2 + 3) ==== */
    .main-container .input-area {
        flex: none;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 8px 0 14px;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    /* Composer pill per her 1a spec (2026-08-18). */
    .main-container .input-area .input-box {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 11px 16px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 22px;
        box-shadow: none;
        transition: border-color 150ms ease;
    }
    .main-container .input-area .input-box:focus-within {
        border-color: rgba(255, 255, 255, 0.22);
    }
    /* "Ask Bob for recipes" (cookbook empty state, her call 2026-09-12):
       the composer lights up orange like the desktop focus ring for a
       moment — chat/index.js adds the class after opening the sheet and
       removes it again. The pill's own focus border stays white. */
    .main-container .input-area .input-box.bf-ask-glow {
        border-color: #f97316;
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.28);
        transition: border-color 150ms ease, box-shadow 150ms ease;
    }

    .main-container #user-input {
        width: 100%;
        background: transparent;
        border: none;
        outline: none;
        box-shadow: none;
        color: #fff;
        font-size: 13.5px;
        line-height: 1.4;
        padding: 0;
        min-height: 19px;
        max-height: 44px;
        resize: none;
    }

    .main-container #user-input::placeholder {
        color: rgba(255, 255, 255, .5);
    }

    .main-container .input-area .button-group {
        flex: none;
        display: flex;
        margin: 0;
        padding: 0;
    }

    /* Send — quiet dark disc with a soft light arrow (her screenshot
       2026-08-18, mobile only; the orange disc is dead). */
    .main-container #send-button {
        /* Stays ABSOLUTE (base sheet): the disc lives INSIDE the pill's
           right end — her explicit order 2026-08-18, do not float it out.
           Nudged up-left from the base 10/10 (her call). */
        bottom: 22px;
        right: 18px;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        color: rgba(255, 255, 255, 0.65);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 150ms ease, color 150ms ease;
    }
    .main-container #send-button:active {
        background: rgba(255, 255, 255, 0.14);
        color: rgba(255, 255, 255, 0.9);
    }
    .main-container #send-button:focus-visible {
        outline: none;
        background: rgba(255, 255, 255, 0.14);
    }

    .main-container #send-button svg {
        width: 13px;
        height: 13px;
    }

    .main-container #send-button svg path {
        fill: currentColor;
    }

    /* ==== Layer 1 — the app sheet ==== */
    .main-container .tab-container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 152px;
        width: auto;
        background: var(--bf-surface);
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -14px 34px rgba(4, 20, 38, .34);
        transition: top 300ms ease;
        z-index: 2;
    }

    .main-container.bob-open .tab-container {
        top: 430px;
    }

    .main-container.bob-full .tab-container {
        top: calc(100% - 52px);
        overflow: hidden;
    }

    /* ==== Grabber row — the three-position control ==== */
    .main-container .bob-grabber {
        position: sticky;
        top: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 5px 10px 7px;
        background: var(--bf-surface);
        border-radius: 24px 24px 0 0;
        -webkit-tap-highlight-color: transparent;
    }

    .main-container.bob-open .bob-grabber {
        border-bottom: 1px solid var(--bs-gray-100);
    }

    /* Labeled chevrons (handoff revision): each chevron is annotated with
       its destination, so direction never has to be inferred. */
    .main-container .bob-grab-btn {
        border: none;
        background: transparent;
        border-radius: 12px;
        display: none;
        align-items: center;
        gap: 7px;
        min-height: 44px;
        padding: 0 8px;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--bf-text-secondary);
        cursor: pointer;
    }

    .main-container .bob-grab-btn i {
        font-size: 15px;
    }

    .main-container .bob-grab-btn:active {
        background: var(--bs-gray-100);
    }

    .main-container.bob-open .bob-grab-btn {
        display: flex;
    }

    .main-container .bob-grab-collapse {
        margin-left: -8px;
        justify-self: start;
    }

    .main-container .bob-grab-expand {
        margin-right: -8px;
        justify-self: end;
    }

    .main-container .bob-grab-center {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 4px 0 2px;
        cursor: pointer;
    }

    .main-container .bob-grabber-bar {
        width: 40px;
        height: 5px;
        border-radius: var(--radius-full);
        background: var(--bs-gray-300);
    }

    .main-container.bob-loud .bob-grabber-bar {
        background: var(--bs-primary-400);
    }

    .main-container .bob-grabber-label {
        display: none;
        align-items: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 600;
        color: var(--bf-muted);
    }

    .main-container .bob-grabber-label i {
        font-size: 9px;
    }

    /* Which label shows follows the position (half = bar only; the open
       thread already says Bob is open). */
    .main-container:not(.bob-open):not(.bob-full) .bob-grabber-label-strip {
        display: inline-flex;
    }

    .main-container.bob-full .bob-grabber-label-full {
        display: inline-flex;
        font-weight: 700;
        font-size: 12px;
        color: var(--bf-text-secondary);
    }

    .main-container.bob-full .bob-grabber-label-full i {
        font-size: 15px;
    }

    /* ==== INTERIM: plate cohort stays Bob-less until the switch ====
       Chat is still muted server-side for cohort == plate_focus (403) —
       showing them the strip would invite sends that error. At the
       release every account is assigned to 'full' and this whole block
       dies with the cohort. */
    .main-container.plate-cohort .chat-container,
    .main-container.plate-cohort.mobile-tab-view .chat-container {
        display: none !important;
    }

    .main-container.plate-cohort .bob-grabber {
        display: none;
    }

    .main-container.plate-cohort .tab-container {
        top: 0;
        border-radius: 0;
        box-shadow: none;
        transition: none;
    }
}