/* mobile_ux.css — islanded mobile/touch UX layer.
   Loaded after the main inline styles so these rules win the cascade.
   Three sections: (1) Second Opinion chip + picker (all widths),
   (2) touch hit-target floor (coarse pointers, any width),
   (3) phone composer capsule + mode chips (<=768px only).
   Geometry only where possible — theme colors are inherited untouched. */

/* ---------- 1. Second Opinion chip + expert picker (all widths) ---------- */

.so-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    margin-right: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.35);
    background: rgba(37, 99, 235, 0.10);
    color: inherit;
    font: 500 12px 'Inter', sans-serif;
    cursor: pointer;
    line-height: 1.2;
}
.so-chip:hover { background: rgba(37, 99, 235, 0.20); }
.so-chip:active { transform: scale(0.97); }

.so-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9000;
}
.so-sheet {
    position: fixed;
    z-index: 9001;
    background: #ffffff;
    color: #0f172a;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 92vw);
    max-height: min(560px, 80vh);
}
@media (max-width: 768px) {
    .so-sheet {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: auto;
        border-radius: 16px 16px 0 0;
        max-height: 70dvh;
        padding-bottom: env(safe-area-inset-bottom);
    }
}
.so-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    font: 600 14px 'Inter', sans-serif;
}
.so-sheet-close {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
}
.so-sheet-close:hover { background: rgba(127, 127, 127, 0.15); }
.so-sheet-list {
    overflow-y: auto;
    padding: 4px 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.so-sheet-item {
    border: 1px solid rgba(127, 127, 127, 0.25);
    background: transparent;
    color: inherit;
    border-radius: 10px;
    padding: 10px 10px;
    font: 500 13px 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
}
.so-sheet-item:hover { background: rgba(37, 99, 235, 0.10); }

body.dark-mode .so-sheet, body.simpledark-mode .so-sheet, body.gothic-mode .so-sheet,
body.deepsea-mode .so-sheet, body.synthwave-mode .so-sheet, body.tech-mode .so-sheet {
    background: #16162a;
    color: #e2e8f0;
}

/* ---------- 1b. Dock panels: labeled collapsed pills + calendar slot (all widths) ---------- */

/* Collapsed Tasks/Coupons panels become labeled pills instead of bare icons */
#todoPanel.collapsed, #dealsPanel.collapsed {
    width: auto;
    max-width: none;
    border-radius: 999px;
    padding: 0 18px;
}
#todoPanel.collapsed .todo-toggle-icon::after { content: "My Tasks"; }
#dealsPanel.collapsed .deals-toggle-icon::after { content: "Daily Coupons"; }
#todoPanel.collapsed .todo-toggle-icon::after,
#dealsPanel.collapsed .deals-toggle-icon::after {
    font: 700 12px 'Cinzel', serif;
    letter-spacing: 0.5px;
    margin-left: 8px;
    white-space: nowrap;
}

/* The My Calendar link relocated below the coupons panel (moved by mobile_ux.js) */
.right-side-dock > #todoCalendarLink {
    text-align: center;
    padding: 10px 16px;
    border-radius: 999px;
    font: 700 12px 'Cinzel', serif;
    letter-spacing: 0.5px;
}

/* Button caption spans (injected by mobile_ux.js). Desktop: inline like the
   original "icon label" text. Mobile overrides below stack them. */
.mux-ico { margin-right: 6px; }
.mux-extra { margin-left: 4px; }

/* Header hamburger — desktop never sees it */
#muxMenuBtn { display: none; }

/* Second Opinion picker lives on reply bubbles now — hide the composer dropdown everywhere */
#force-section { display: none !important; }

/* ---------- 2. Touch hit-target floor (coarse pointers, any width) ---------- */

@media (hover: none) and (pointer: coarse) {
    #sidebarToggle {
        width: 40px;
        min-height: 64px;
        font-size: 16px;
    }
    #silenceBtn, .input-footer-btn {
        min-height: 36px;
        position: relative;
    }
    #silenceBtn::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
    .todo-collapse-btn {
        min-width: 32px;
        min-height: 32px;
    }
    #todoCompleteBtn, #todoAddBtn, #todoApptBtn, #todoCalendarLink {
        min-height: 40px;
    }
    .tools-dropdown-trigger { min-height: 44px; }
    .emoji-picker button { min-width: 40px; min-height: 40px; }
    .so-chip { min-height: 34px; }
}

/* ---------- 3. Phone layout: composer capsule + mode chips (<=768px) ---------- */

@media (max-width: 768px) {

    /* Pin the composer to the viewport bottom while #app is in view.
       The base mobile styles flip #composer to flex-column, so the grid
       must be re-asserted with display:grid. */
    #composer {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 90;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 56px;
        grid-template-areas:
            "attachments attachments"
            "input controls"
            "counter counter";
        gap: 4px;
        margin-top: 8px;
        align-items: start;
    }
    #composer .doc-attach-row {
        grid-area: attachments;
        padding: 0 0 2px;
    }
    #composer textarea#input {
        grid-area: input;
        min-height: 120px;
        max-height: 28dvh;
        align-self: start;
    }
    #composer .input-footer { grid-area: counter; }

    /* The right-hand column: tools bolt + talk + send as 48px circles.
       Geometry only — every theme's colors/gradients carry through. */
    #composer .controls-wrapper {
        grid-area: controls;
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: auto;
        padding-top: 0;
    }
    #composer .floating-btn-row {
        display: flex !important;
        grid-template-columns: none;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        width: auto;
    }
    #toolsDropdownBtn {
        width: 56px;
        min-width: 56px;
        min-height: 56px;
        border-radius: 16px;
        padding: 6px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        white-space: normal;
    }

    #composer .controls {
        flex-direction: column;
        flex-wrap: nowrap;
        width: auto;
        gap: 8px;
    }
    #composer .controls button,
    #composer .controls #sendBtn {
        flex: 0 0 auto !important;
        width: 56px;
        min-width: 56px;
        height: auto;
        min-height: 56px;
        border-radius: 16px;
        padding: 6px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        order: 0;
        white-space: normal;
    }
    #composer .controls button::before { display: none; }

    /* Icon over caption inside each capsule button */
    #composer .controls .mux-ico,
    #toolsDropdownBtn .mux-ico {
        font-size: 20px;
        line-height: 1;
        margin: 0;
    }
    #composer .controls .mux-cap,
    #toolsDropdownBtn .mux-cap {
        font-size: 9px;
        line-height: 1;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    #toolsDropdownBtn .mux-extra { display: none; }

    /* Stop only materializes while a reply is streaming */
    #stopBtn[disabled] { display: none !important; }

    /* Thumb order: Tools bolt on top, Send in the middle, STT mic at the bottom */
    #composer .controls-wrapper > .floating-btn-row { order: 0; }
    #composer .controls-wrapper > .controls { order: 1; }
    #composer .controls #sendBtn { order: 0 !important; }
    #composer .controls #stopBtn { order: 1; }
    #composer .controls #talkBtn { order: 2; }

    /* Header: everything except logo + user badge collapses behind a hamburger */
    #muxMenuBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-area: badge;
        justify-self: end;
        margin-right: 52px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid currentColor;
        background: transparent;
        color: inherit;
        font-size: 18px;
        cursor: pointer;
        padding: 0;
    }
    header .button-group,
    header .button-group.button-grid,
    header #ctaButton,
    header #batteryIndicator {
        display: none !important;
    }
    header.mux-menu-open .button-group,
    header.mux-menu-open .button-group.button-grid { display: flex !important; }
    header.mux-menu-open #ctaButton {
        display: inline-flex !important;
        max-width: none;
        white-space: normal;
        line-height: 1.25;
        text-align: left;
    }
    header.mux-menu-open #batteryIndicator { display: block !important; }

    /* Mode toggles collapse into one swipeable chip row */
    .toggle-controls-outer {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        gap: 8px;
        padding: 6px 4px;
        margin: 6px 0;
        scrollbar-width: none;
    }
    .toggle-controls-outer::-webkit-scrollbar { display: none; }
    .toggle-controls-outer .toggle-item { flex: 0 0 auto; width: auto; }
    .toggle-controls-outer .toggle-switch {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }
    .toggle-controls-outer .toggle-label {
        border: 1px solid rgba(37, 99, 235, 0.35);
        border-radius: 999px;
        padding: 8px 14px;
        font-size: 13px;
        white-space: nowrap;
        min-height: 36px;
    }
    .toggle-controls-outer .toggle-switch:checked + .toggle-label {
        background: rgba(37, 99, 235, 0.18);
        border-color: #2563eb;
        font-weight: 700;
    }

    /* Compact the footer row (emoji / TTS / dyslexia / counter) */
    .input-footer { gap: 6px; }
    .input-footer .toggle-text { font-size: 11px; }
    .char-counter { font-size: 11px; }
}