/* ==========================================================================
   agent-mobile.css — Mobile responsive overrides for the agent platform.
   Loaded after agent.css. Delete the <link> tag in agent.html to fully revert.
   ========================================================================== */

/* --- Global: Viewport Height Fix ---
   100vh on mobile browsers includes area behind the address bar/toolbar.
   dvh (dynamic viewport height) tracks the actual visible area.
   Fallback chain: 100vh → -webkit-fill-available → 100dvh              */

.agent-container {
    height: 100vh;                    /* fallback for old browsers */
    height: -webkit-fill-available;   /* Safari iOS */
    height: 100dvh;                   /* modern browsers — wins last */
}

/* Same fix for modals/popups that use vh for max-height */
.account-popup {
    max-height: calc(100dvh - 50px);
}
.soul-wizard-modal {
    max-height: 85dvh;
}
.achievements-modal {
    max-height: 85dvh;
}

/* --- Global: Prevent iOS auto-zoom on input focus ---
   iOS Safari zooms in when font-size < 16px on focused inputs.
   Force 16px on all text inputs to prevent this.            */

@media screen and (max-width: 768px) {
    .input-wrapper textarea,
    .ach-search,
    .editable-textarea,
    .wizard-textarea,
    .chat-search-input,
    input[type="text"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* --- Global: Touch & Scroll Improvements --- */

.messages-area,
.canvas-renderer,
.context-dropdown-list,
.tool-history-list,
.file-browser-tree,
.achievements-body {
    -webkit-overflow-scrolling: touch;
}

.header-btn,
.context-bar-btn,
.canvas-action-btn,
.send-btn,
.canvas-tab .tab-close,
.tool-history-header,
.tool-badge,
.usecase-item {
    touch-action: manipulation;
}

.tool-history-divider {
    touch-action: none;
}


/* ==========================================================================
   768px — Tablet / Large Phone
   Builds on agent.css 768px breakpoint (padding reductions, 85% user msgs)
   ========================================================================== */

@media (max-width: 768px) {

    /* -- Canvas Panel — keep below header, above status bar --
       On mobile the canvas is position:fixed and off-screen by default
       (translateX(100%)). Both the default state and .hidden state block
       touches because the invisible overlay sits at z-index:100. Only
       .visible (on-screen) should accept pointer events. */
    .canvas-panel {
        top: 48px;
        bottom: 30px;
        height: auto;
        pointer-events: none;
    }
    .canvas-panel.visible {
        pointer-events: auto;
    }

    /* -- Status Bar — above canvas panel overlay -- */
    .status-bar {
        position: relative;
        z-index: 101;
    }

    /* -- Input Area -- */
    .input-wrapper {
        max-width: 100%;
    }
    .input-area {
        padding: 10px;
    }

    /* -- Header — 44px minimum touch targets (Apple HIG) -- */
    .header-btn {
        width: 44px;
        height: 44px;
    }
    .header-status {
        gap: 0;
    }
    #status-text {
        display: none;
    }

    /* -- Context Bar -- */
    .context-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 10px;
    }
    .context-bar-divider {
        display: none;
    }
    .context-bar-btn {
        padding: 10px 14px;
    }

    /* -- Context Dropdown -- */
    .context-dropdown {
        width: calc(100vw - 32px);
        max-width: 300px;
    }

    /* -- Popups — viewport constrained -- */
    .account-popup {
        min-width: unset;
        width: calc(100vw - 24px);
        max-width: 340px;
    }
    .model-popup {
        min-width: unset;
        width: calc(100vw - 24px);
    }
    .resource-monitor {
        width: calc(100vw - 24px);
        max-width: 300px;
    }

    /* -- Welcome -- */
    .welcome {
        padding: 20px 16px;
    }

    /* -- Tool History -- */
    .tool-history {
        max-height: 140px;
    }

    /* -- Tool History Divider — touch-friendly drag handle -- */
    .tool-history-divider {
        height: 20px;
    }

    /* -- Canvas Toolbar -- */
    .canvas-toolbar {
        overflow-x: auto;
        gap: 8px;
    }
    .canvas-toolbar-actions {
        flex-shrink: 0;
    }

    /* -- Canvas Tab Close — bigger touch target -- */
    .canvas-tab .tab-close {
        padding: 8px 10px;
        margin: -6px -6px -6px 0;
    }

    /* -- File Browser -- */
    .file-browser {
        max-height: 40%;
        height: 150px;
    }

    /* -- File Browser Divider — touch-friendly drag handle -- */
    .file-browser-divider {
        height: 20px;
        touch-action: none;
    }
    .file-browser-divider::after {
        opacity: 0.6;
        width: 28px;
        height: 2px;
        box-shadow: 0 5px 0 var(--text-muted);
    }
    .file-browser-divider:active::after {
        opacity: 1;
    }

    /* -- Toasts — viewport constrained -- */
    .achievement-toast {
        min-width: unset;
        max-width: calc(100vw - 40px);
    }
    .achievement-toast-container {
        right: 12px;
    }
    .error-toast {
        right: 12px;
        left: 12px;
        max-width: calc(100vw - 24px);
    }

    /* -- Status Bar -- */
    .status-bar {
        gap: 8px;
        font-size: 0.68rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* -- Plan Execution Bar -- */
    .plan-execution-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px 10px;
    }
    .plan-execution-info {
        font-size: 0.78rem;
    }

    /* -- Tool Cards & Thinking — full width -- */
    .tool-call-card {
        max-width: 100%;
    }
    .thinking-block {
        max-width: 100%;
    }
}


/* ==========================================================================
   600px — Phone Portrait
   ========================================================================== */

@media (max-width: 600px) {

    /* -- Header — tighter -- */
    .agent-header {
        padding: 8px 10px;
    }
    .agent-header h1 {
        font-size: 0.88rem;
        gap: 6px;
    }
    .agent-header h1 .beta-badge {
        font-size: 0.58rem;
        padding: 1px 4px;
    }
    .header-actions {
        gap: 4px;
    }

    /* -- Messages — tighter -- */
    .messages-area {
        padding: 10px 8px;
    }
    .message.user .message-content {
        max-width: 90%;
    }

    /* -- Welcome — compact -- */
    .welcome h2 {
        font-size: 1.2rem;
    }
    .welcome p {
        font-size: 0.85rem;
        max-width: 100%;
    }
    .welcome-capabilities,
    .welcome-usecases {
        max-width: 100%;
    }

    /* -- Code Blocks — constrained width, horizontal scroll -- */
    .agent-code-block {
        max-width: calc(100vw - 20px);
    }
    .agent-code-block pre {
        font-size: 0.78rem;
    }
    .message.assistant .message-content pre {
        padding: 10px 12px;
        font-size: 0.78rem;
    }

    /* -- Tables — horizontal scroll -- */
    .message.assistant .message-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* -- Tool Cards -- */
    .tool-call-card {
        padding: 10px 12px;
        gap: 8px;
        font-size: 0.82rem;
    }

    /* -- Thinking Block -- */
    .thinking-block {
        padding: 10px 12px;
        font-size: 0.78rem;
    }

    /* -- Canvas Toolbar — touch-friendly buttons -- */
    .canvas-action-btn {
        padding: 8px 10px;
        font-size: 0.75rem;
        min-height: 36px;
    }
    .canvas-filename {
        font-size: 0.78rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .canvas-revision {
        display: none;
    }

    /* -- Chat Bar — compact -- */
    .chat-bar {
        padding: 0 8px;
        height: 32px;
    }
    .chat-bar-title {
        font-size: 0.78rem;
    }

    /* -- Renderers — tighter padding -- */
    .renderer-markdown {
        padding: 14px 12px;
        font-size: 0.88rem;
    }
    .renderer-code pre {
        padding: 10px;
        font-size: 0.78rem;
    }
    .renderer-plaintext,
    .renderer-json {
        padding: 10px;
        font-size: 0.8rem;
    }

    /* -- Modals — fit viewport -- */
    .soul-wizard-modal {
        max-width: 95vw;
        max-height: 90vh;
    }
    .soul-wizard-body {
        padding: 16px;
    }
    .soul-wizard-footer {
        padding: 12px 16px;
    }
    .achievements-modal {
        max-width: 98vw;
        max-height: 90vh;
        border-radius: 12px;
    }
    .achievements-header {
        padding: 14px 16px 0;
    }
    .achievements-body {
        padding: 12px 16px 16px;
    }
    .achievements-filters {
        flex-wrap: wrap;
    }
    .ach-search {
        min-width: 100%;
    }

    /* -- Settings Menu -- */
    .settings-menu {
        max-width: calc(100vw - 20px);
    }

    /* -- Plan Steps Card -- */
    .plan-steps-card {
        padding: 8px 10px;
        font-size: 0.78rem;
    }
}


/* ==========================================================================
   480px — Small Phone (320px-480px)
   ========================================================================== */

@media (max-width: 480px) {

    /* -- Header — ultra-compact -- */
    .agent-header {
        padding: 6px 8px;
    }
    .agent-header h1 {
        font-size: 0.82rem;
    }
    .agent-header h1 .beta-badge {
        display: none;
    }

    /* -- Header Buttons — 44px touch targets (Apple HIG) -- */
    .header-btn {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    /* -- Input — maximum compact -- */
    .input-area {
        padding: 8px;
    }
    .input-wrapper {
        gap: 6px;
    }
    .input-wrapper textarea {
        padding: 10px 12px;
        font-size: 0.88rem;
        border-radius: 10px;
        min-height: 40px;
    }
    .send-btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    /* -- Context Bar — full-width buttons -- */
    .context-bar {
        gap: 6px;
        padding: 6px 8px;
    }
    .context-bar-btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }
    .context-bar-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* -- Context Dropdown — centered modal overlay -- */
    .context-dropdown {
        position: fixed;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100vw - 20px);
        max-width: none;
        max-height: 70vh;
        border-radius: 12px;
    }

    /* -- Welcome — ultra-compact -- */
    .welcome {
        padding: 16px 10px;
    }
    .welcome h2 {
        font-size: 1.05rem;
    }
    .welcome p {
        font-size: 0.82rem;
    }
    .welcome .tool-badge {
        padding: 4px 8px;
        font-size: 0.72rem;
    }
    .usecase-item {
        padding: 10px 12px;
        gap: 8px;
    }
    .usecase-text {
        font-size: 0.78rem;
    }
    .usecase-complexity {
        font-size: 0.6rem;
    }

    /* -- Message Typography -- */
    .message.assistant .message-content {
        font-size: 0.88rem;
        line-height: 1.55;
    }
    .message.assistant .message-content h1 {
        font-size: 1.1rem;
    }
    .message.assistant .message-content h2 {
        font-size: 1rem;
    }
    .message.assistant .message-content h3 {
        font-size: 0.92rem;
    }

    /* -- Popups → Bottom Sheets -- */
    .account-popup {
        bottom: 28px;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        padding: 14px 16px;
    }
    .model-popup {
        bottom: 28px;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
    }
    .resource-monitor {
        bottom: 28px;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 12px 12px 0 0;
    }

    /* -- Status Bar — ultra-compact -- */
    .status-bar {
        gap: 6px;
        padding: 3px 8px;
        font-size: 0.65rem;
    }

    /* -- Tool History — compact -- */
    .tool-history {
        max-height: 100px;
    }
    .tool-history-header {
        padding: 4px 10px;
        font-size: 0.78rem;
    }
    .tool-history-item {
        padding: 8px 10px;
        font-size: 0.75rem;
    }

    /* -- Canvas Tabs -- */
    .canvas-tabs {
        height: 36px;
    }
    .canvas-tab {
        padding: 0 12px;
        font-size: 0.75rem;
    }

    /* -- Canvas Toolbar -- */
    .canvas-toolbar {
        padding: 4px 8px;
        gap: 6px;
    }
    .canvas-action-btn {
        padding: 8px 8px;
        font-size: 0.68rem;
    }

    /* -- File Browser — smaller -- */
    .file-browser {
        height: 120px;
        max-height: 35%;
    }
    .file-browser-header {
        padding: 4px 10px;
        font-size: 0.72rem;
    }

    /* -- Confirm Modal — full width -- */
    .confirm-modal {
        max-width: 95vw;
        padding: 20px 16px 16px;
    }
    .confirm-modal-title {
        font-size: 15px;
    }
    .confirm-modal-text {
        font-size: 12px;
    }
}


/* ==========================================================================
   Quick Nav Arrow — mobile chat ↔ canvas toggle
   ========================================================================== */

.quick-nav-arrow {
    display: none;
}

@media (max-width: 768px) {
    .quick-nav-arrow {
        display: none;
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 56px;
        border: none;
        border-radius: 8px 0 0 8px;
        background: var(--accent);
        opacity: 0.5;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        z-index: 1000;
        touch-action: manipulation;
        transition: opacity 0.2s;
        padding: 0;
    }
    .quick-nav-arrow.visible {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .quick-nav-arrow:active {
        opacity: 0.7;
    }
    /* Chevron via CSS borders — no icon font needed */
    .quick-nav-arrow::after {
        content: '';
        width: 8px;
        height: 8px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }
    .quick-nav-arrow.pointing-right::after {
        transform: rotate(45deg);
        margin-left: -2px;
    }
    .quick-nav-arrow.pointing-left::after {
        transform: rotate(-135deg);
        margin-right: -2px;
    }
}