:root {
    --mobile-nav-height: 64px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-app-nav { display: none; }

@media (max-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }
    body { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)); }

    .mobile-app-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 90000;
        height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
        padding: 7px 10px calc(7px + var(--mobile-safe-bottom));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        background: rgba(5, 5, 5, 0.97);
        border-top: 1px solid rgba(181, 140, 92, 0.28);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(18px);
    }

    .mobile-app-nav a {
        min-width: 0;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: #8d8d8d;
        text-decoration: none;
        font: 500 0.66rem/1.1 var(--font-sans, 'Inter', sans-serif);
        letter-spacing: 0;
        border-radius: 6px;
    }

    .mobile-app-nav a i { font-size: 1.05rem; }
    .mobile-app-nav a.active { color: var(--accent-gold, #b58c5c); background: rgba(181, 140, 92, 0.1); }
    .mobile-app-nav a:focus-visible { outline: 2px solid var(--accent-gold, #b58c5c); outline-offset: -2px; }

    body.calma-chat-page {
        padding-bottom: 0;
        height: 100dvh;
    }

    body.calma-chat-page #calma-terminal { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)); }
    body.calma-chat-page .workspace { height: calc(100dvh - 50px - var(--mobile-nav-height) - var(--mobile-safe-bottom)) !important; }
    body.calma-chat-page #chat-canvas {
        padding: 16px 12px 118px !important;
        scroll-padding-bottom: 118px;
    }
    body.calma-chat-page .input-deck {
        bottom: 0;
        padding: 8px 10px 6px !important;
    }
    body.calma-chat-page .surgical-footer { display: none !important; }
    body.calma-chat-page .bubble,
    body.calma-chat-page .bubble.ai,
    body.calma-chat-page .bubble.ai p,
    body.calma-chat-page #rich-editor {
        text-align: left !important;
        line-height: 1.58;
        font-size: 0.93rem;
        letter-spacing: 0;
    }
    body.calma-chat-page .bubble.ai { padding: 14px 12px; }
    body.calma-chat-page .bubble.user { max-width: 88%; }
    body.calma-chat-page #main-header .main-brand-title { font-size: 0.9rem; letter-spacing: 3px; white-space: nowrap; }
    body.calma-chat-page #btn-new-global {
        position: absolute;
        top: 6px;
        left: 10px;
        width: 92px;
        height: 44px;
        padding: 0 10px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        font-size: 0.62rem !important;
        line-height: 1.05;
        color: var(--accent-gold, #b58c5c) !important;
        text-align: left;
    }
    body.calma-chat-page #btn-new-global span { display: inline; letter-spacing: 0; text-transform: none; }
    body.calma-chat-page #btn-new-global i { display: block; font-size: 0.95rem; line-height: 1; color: inherit; }
    body.calma-chat-page #btn-new-global::before {
        content: none;
    }
    body.calma-chat-page #auth-zone {
        display: flex !important;
        position: absolute !important;
        top: 5px;
        right: 10px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }
    body.calma-chat-page #acc-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0 !important;
        border-radius: 6px;
        font-size: 0 !important;
        color: transparent !important;
        overflow: hidden;
        display: grid !important;
        place-items: center;
        line-height: 1 !important;
    }
    body.calma-chat-page #acc-btn::before {
        content: "\f2bd";
        color: var(--accent-gold, #b58c5c);
        font: 900 1.15rem/1 "Font Awesome 6 Free";
        display: block;
        width: 1.15rem;
        height: 1.15rem;
        text-align: center;
    }
    body.calma-chat-page #acc-profile { gap: 8px !important; }
    body.calma-chat-page #user-display,
    body.calma-chat-page #reg-bio-btn,
    body.calma-chat-page #acc-profile > .fa-search { display: none !important; }
    body.calma-chat-page #msg-input { min-height: 44px !important; height: 44px !important; font-size: 16px !important; }
    body.calma-chat-page #mic-btn-icon,
    body.calma-chat-page #mic-cancel-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
    body.calma-chat-page #mic-btn-icon.recording-active { background: rgba(255, 75, 75, 0.14); color: #ff6b6b !important; }
    body.calma-chat-page .thinking-card { width: min(100%, 330px); padding: 13px 14px !important; background: rgba(181, 140, 92, 0.09) !important; border: 1px solid rgba(181, 140, 92, 0.32) !important; border-radius: 7px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); }
    body.calma-chat-page .thinking-icon { color: var(--accent-gold, #b58c5c); font-size: 0.95rem; animation: pulse-text-subtle 1.4s infinite ease-in-out; }
    body.calma-chat-page .thinking-label { color: #f0e6da; font-size: 0.8rem; line-height: 1.35; font-style: normal; font-weight: 600; letter-spacing: 0; }
    body.calma-chat-page #audio-draft-card { min-width: 210px; border-color: rgba(181, 140, 92, 0.55); background: rgba(181, 140, 92, 0.1); }
    body.calma-chat-page #audio-draft-card .doc-meta { color: #d8c0a4; white-space: normal; line-height: 1.25; }
    body.calma-chat-page #artifacts-sidebar {
        height: calc(88dvh - var(--mobile-nav-height));
        max-height: 720px;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
        border-radius: 8px 8px 0 0;
        transform: translateY(calc(100% + var(--mobile-nav-height) + var(--mobile-safe-bottom)));
    }
    body.calma-chat-page #artifacts-sidebar.active { transform: translateY(0); }
    body.calma-chat-page #rich-editor { padding: 20px 16px; }
    body.calma-chat-page .draft-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
    body.calma-chat-page .draft-actions .btn-primary { min-height: 44px; font-size: 0.63rem; }

    body.calma-tool-page,
    body.calma-history-page {
        min-height: 100dvh;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    body.calma-tool-page .premium-container,
    body.calma-history-page main {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        min-height: 0;
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-bottom: calc(28px + var(--mobile-nav-height) + var(--mobile-safe-bottom)) !important;
        overflow: visible !important;
    }
    body.calma-tool-page header { min-height: auto; margin: 0 36px 14px; }
    body.calma-tool-page .calma-brand { font-size: clamp(1.55rem, 8vw, 2.15rem) !important; letter-spacing: 5px !important; }
    body.calma-tool-page h1 { font-size: 1rem !important; line-height: 1.25; letter-spacing: 2px !important; }
    body.calma-tool-page .back-btn,
    body.calma-tool-page .back-nav { top: 14px !important; left: 14px !important; width: 44px !important; height: 44px !important; }
    body.calma-tool-page .calc-grid,
    body.calma-tool-page .audit-grid,
    body.calma-tool-page .input-row,
    body.calma-tool-page .date-row,
    body.calma-tool-page .sal-row,
    body.calma-tool-page [style*="grid-template-columns: 1fr 1fr"],
    body.calma-tool-page [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    body.calma-tool-page .section-box,
    body.calma-tool-page .result-panel,
    body.calma-tool-page .results-panel {
        overflow: visible;
        padding: 16px 14px;
        gap: 12px;
    }
    body.calma-tool-page .epigraph { font-size: 0.9rem; line-height: 1.25; margin-top: 8px; }
    body.calma-tool-page .lbl { font-size: 0.72rem; line-height: 1.25; margin-bottom: 6px; }
    body.calma-tool-page input,
    body.calma-tool-page select,
    body.calma-tool-page textarea {
        min-height: 48px;
        font-size: 16px !important;
        width: 100%;
    }
    body.calma-tool-page button,
    body.calma-tool-page .btn-premium { min-height: 46px; }
    body.calma-tool-page .fine-print,
    body.calma-tool-page footer { line-height: 1.5; }
    body.calma-tool-page .grid { gap: 14px; }
    body.calma-tool-page .tool-card { min-height: 0; padding: 24px 18px; }

    body.calma-history-page header { height: 60px; }
    body.calma-history-page .brand { font-size: 1.15rem; letter-spacing: 4px; }
    body.calma-history-page main { padding-top: 20px !important; }
    body.calma-history-page .profile-grid { gap: 12px; }
    body.calma-history-page .item-card { text-align: left; padding: 16px; gap: 10px; }
    body.calma-history-page .date-col { text-align: left; border-right: 0; border-bottom: 1px solid var(--border-dim); padding: 0 0 10px; }
    body.calma-history-page .tabs { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    body.calma-history-page .tabs button,
    body.calma-history-page .tab-btn { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
}

@media (max-width: 380px) {
    .mobile-app-nav { padding-left: 4px; padding-right: 4px; }
    .mobile-app-nav a { font-size: 0.6rem; }
    body.calma-chat-page #main-header .main-brand-title { font-size: 0.78rem; letter-spacing: 2px; }
}