/* ==================== variables.css ==================== */

@media screen and (max-width: 768px) {
    body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================== layout.css ==================== */

@media screen and (max-width: 768px) {
    .app-container {
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .main-content {
        order: 1;
        flex: 1;
        width: 100%;
        height: calc(100dvh - var(--tab-bar-height) - var(--safe-bottom));
        overflow: hidden;
        position: relative;
    }

    .content-wrapper {
        padding: 0 12px;
        height: 100%;
        overflow: hidden;
    }

    .hero-section {
        padding: 0 8px;
        margin-bottom: 24px;
    }

    .greeting {
        font-size: clamp(20px, 6vw, 28px);
        line-height: 1.3;
        text-align: center;
    }

    .glow-bg {
        width: 90vw;
        height: 40vh;
    }

    .content-wrapper:not(.chat-active) {
        padding-bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 80px);
    }
}

@media screen and (max-width: 380px) {
    .greeting {
        font-size: 18px;
    }
}

/* ==================== sidebar.css ==================== */

@media screen and (max-width: 768px) {
    .sidebar {
        order: 3;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(56px + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding-left: 6px;
        padding-right: 6px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(229, 231, 235, 0.6);
        z-index: 100;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.06);
    }

    /* display:contents unwraps these two grouping divs so their buttons
       become direct flex children of .sidebar, letting its single
       justify-content: space-around evenly space all icons as one row
       instead of space-around'ing two separately-spaced sub-groups
       (which left an uneven gap where the groups met). */
    .top-icons, .bottom-icons {
        display: contents;
    }

    .top-icons, .bottom-icons {
        gap: 8px;
    }

    .icon-btn {
        padding: 8px;
        min-width: 40px;
        min-height: 40px;
    }

    .icon-btn i {
        width: 20px;
        height: 20px;
    }

    .profile-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .logo-btn i {
        width: 22px;
        height: 22px;
    }

    .sidebar .new-chat-btn,
    .sidebar #searchBtn,
    .sidebar #historyBtn,
    .sidebar #settingsBtn {
        display: none;
    }
}

@media screen and (max-width: 380px) {
    .sidebar {
        padding-left: 4px;
        padding-right: 4px;
    }

    .icon-btn {
        padding: 8px;
        min-width: 40px;
        min-height: 40px;
    }
}

/* ==================== topbar.css ==================== */

@media screen and (max-width: 768px) {
    .top-bar {
        top: 12px;
        left: 12px;
        right: 12px;
        justify-content: space-between;
        z-index: 80;
    }

    .hamburger-btn, .topbar-dropdown-btn {
        display: flex;
    }

    /* Popover instead of inline — anchored to .top-bar (position:fixed,
       so it's the nearest positioned ancestor) instead of sitting inline
       between the hamburger and dropdown triggers. */
    .topbar-actions {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--bg-primary, #fff);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        padding: 6px;
        display: none;
        min-width: 180px;
    }

    .topbar-actions.open {
        display: flex;
    }

    .topbar-actions .icon-btn {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        padding: 9px 10px;
        border-radius: 8px;
    }

    .topbar-action-label {
        display: inline;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
    }

    #topbarSettingsBtn {
        display: flex;
    }

    .hamburger-drawer {
        width: min(280px, calc(100vw - 48px));
    }
}

@media screen and (max-width: 380px) {
    .location-badge {
        padding: 5px 10px 5px 8px;
    }

    .pro-badge {
        font-size: 11px;
        padding: 3px 6px;
    }
}

/* ==================== chat.css ==================== */

@media screen and (max-width: 768px) {
    .chat-container {
        padding-top: 56px;
        /* .chat-container is flex:1 (chat.css) inside the column-flex
           .content-wrapper, so it always fills the full height above the
           sidebar — the fixed .input-container floats on top of its lower
           portion instead of pushing it up. Without this much bottom
           padding, the last message ends up scrolled underneath the input
           bar instead of above it. Covers the input's own height (~54px)
           + its 12px gap off the tab bar + headroom for it growing to a
           couple of lines. */
        padding-bottom: calc(var(--safe-bottom) + 140px);
        margin-bottom: 0;
        height: calc(100% - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .messages {
        gap: 14px;
        padding-bottom: 10px;
    }

    .message-content {
        max-width: 88%;
        padding: 12px 16px;
        font-size: 14px;
        line-height: 1.55;
    }

    .message.ai {
        padding-right: 10px;
    }

    .message.ai .message-content {
        max-width: min(88%, 520px);
        margin-right: 8px;
    }

    .input-container {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(56px + var(--safe-bottom) + 12px) !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        z-index: 50;
    }

    .content-wrapper.chat-active .input-container {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(56px + var(--safe-bottom) + 12px) !important;
        width: auto !important;
        transform: none !important;
    }

    .input-box {
        padding: 8px 10px;
        border-radius: 32px;
        background: #ffffff;
        box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
        border: 1px solid #e5e7eb;
        align-items: center;
        min-height: 54px;
    }

    .input-box:focus-within {
        box-shadow: 0 6px 28px rgba(59, 130, 246, 0.18);
        border-color: #bfdbfe;
    }

    #userInput {
        padding: 0 10px;
        font-size: 16px;
        min-height: 36px;
    }

    .mic-btn, .send-btn, .add-btn {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .model-dropdown {
        left: auto;
        right: 0;
        bottom: calc(100% + 8px);
        z-index: 200;
    }

    .message.ai .message-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 13px;
    }
}

/* ==================== history.css ==================== */

@media screen and (max-width: 768px) {
    .history-panel {
        position: fixed;
        top: 0;
        left: 0;
        height: calc(100dvh - var(--tab-bar-height) - var(--safe-bottom));
        z-index: 90;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
        background: rgba(255, 255, 255, 0.99);
        backdrop-filter: blur(10px);
        overflow: hidden;
        transition: width 0.3s ease;
    }

    .history-panel.open {
        width: 85%;
        max-width: 300px;
    }

    .history-header {
        padding: 14px;
    }

    .close-history-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .history-item {
        padding: 12px;
        min-height: 44px;
    }

    .history-item-title {
        font-size: 14px;
    }

    .history-item-date {
        font-size: 12px;
    }

    .delete-history-btn {
        opacity: 1;
        width: 36px;
        height: 36px;
    }
}

@media screen and (max-width: 380px) {
    .history-panel.open {
        width: 90%;
    }
}

/* ==================== charts.css ==================== */

@media screen and (max-width: 768px) {
    .chart-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px;
        margin-top: 12px;
        margin-bottom: 12px;
        border-radius: 6px;
    }

    .d3-axis text {
        font-size: 10px;
    }
}

@media screen and (max-width: 380px) {
    .chart-container {
        padding: 8px;
    }
}

/* ==================== settings.css ==================== */

@media (max-width: 480px) {
    .settings-modal {
        max-width: 95%;
    }

    .settings-modal-body {
        padding: 16px;
    }

    .language-btn,
    .theme-btn {
        min-width: 100%;
    }

    .language-options,
    .theme-options {
        flex-direction: column;
    }
}

/* ==================== suggestions.css ==================== */

@media (max-width: 480px) {
    .suggestion-item {
        font-size: 13px;
        padding: 9px 10px;
    }
}

/* ==================== related.css ==================== */

@media (max-width: 768px) {
    .related-panel {
        width: 100%;
    }
}

/* ==================== trace.css ==================== */

@media (max-width: 768px) {
    .trace-panel {
        width: 100%;
    }
}

/* ==================== avatar-widget.css ==================== */

@media (max-width: 768px) {
    /* Bubble was fixed at bottom:24px regardless of viewport, so it sat on
       top of both the bottom tab bar (sidebar.css) and the floating chat
       input box (chat.css: bottom = tab-bar + safe-bottom + 12px, ~54px
       tall) on mobile. Clear both by stacking above the input box instead. */
    .avatar-widget {
        bottom: calc(56px + var(--safe-bottom) + 12px + 54px + 14px);
        right: 16px;
    }

    .avatar-widget-panel {
        width: calc(100vw - 32px);
    }

    .avatar-widget-panel.docked {
        top: 56px !important;
        height: calc(100% - 56px) !important;
    }
}