/* ═══════════════════════════════════════════════════════════════
   VYOMA UI OVERRIDES v3.0 — Clean Single-Model Mode

   Hides:
   1. Legacy model switcher elements
   2. Legacy file upload buttons & drag-drop
   3. Sidebar AGENTS section (logic stays, UI hidden)
   
   Adds:
   4. Comprehensive mobile responsiveness
   5. Agent panel mobile sheet behavior

   All overlay elements remain in DOM for internal use.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. HIDE LEGACY MODEL SWITCHER ──────────────────────────── */
#gemini-mode-switcher,
.gemini-mode-switcher,
.gemini-mode-btn,
#gemini-mode-dropdown,
.gemini-mode-dropdown,
#gemini-mode-backdrop,
.gemini-mode-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ─── 2. HIDE LEGACY FILE UPLOAD BUTTONS ──────────────────────── */
.akira-upload-btn,
.akira-file-btn,
.akira-image-btn,
.akira-upload-zone,
.akira-dropzone,
.file-upload-trigger,
[class*="upload-btn"],
[class*="file-btn"],
[class*="image-btn"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.akira-drop-overlay,
.akira-drop-active,
[class*="drop-overlay"],
[class*="drag-active"] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.akira-preview-bar:empty {
    display: none !important;
}

/* ─── 3. HIDE SIDEBAR AGENTS SECTION ──────────────────────────── */
/* Logic in agents.js is preserved; only the sidebar dropdown is hidden */
#va-agents-section,
.va-agents-section {
    display: none !important;
}

/* ─── 4. KEEP CHAT TITLE after removing mode switcher ──────── */
.header-left .chat-title {
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   5. COMPREHENSIVE MOBILE RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════ */

/* ─── Mobile < 768px ──────────────────────────────────────── */
@media (max-width: 768px) {

    /* Chat header sticky + compact */
    .main-header {
        position: sticky !important;
        top: 0;
        z-index: 100;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .chat-title {
        font-size: 0.88rem !important;
    }

    .header-right {
        gap: 4px !important;
    }

    /* Messages area — full width, proper spacing */
    .messages {
        padding: 12px 10px 120px !important;
    }

    .message {
        max-width: 92% !important;
        margin-bottom: 6px !important;
    }

    .user-message {
        margin-left: auto !important;
    }

    .assistant-message {
        margin-right: auto !important;
    }

    /* Input bar — stretch to full width, fixed bottom */
    .input-bar {
        padding: 8px 10px !important;
        border-radius: 14px !important;
        margin: 0 8px 8px !important;
    }

    .input-wrapper textarea {
        font-size: 0.88rem !important;
        min-height: 40px !important;
    }

    /* Agent Panel — full-screen mobile sheet */
    .agent-panel-overlay {
        align-items: flex-end !important;
    }

    .agent-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: 90vh !important;
        max-height: 90vh !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom: none !important;
    }

    /* Agent Studio popup — full-screen on mobile */
    .agent-studio-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 92vh !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .agent-studio-grid {
        grid-template-columns: 1fr !important;
    }

    /* Agents Page — single column */
    .agents-page-grid {
        grid-template-columns: 1fr !important;
    }

    .agents-page {
        padding: 24px 16px 60px !important;
    }

    .agents-page-hero h1 {
        font-size: 1.3rem !important;
    }

    .agents-page-hero p {
        font-size: 0.82rem !important;
    }

    /* Agent Studio cards — bigger tap targets */
    .agent-studio-card {
        padding: 20px 18px !important;
    }

    .agent-card-btn {
        padding: 12px !important;
        font-size: 0.82rem !important;
    }

    .agent-showcase-btn {
        padding: 12px 20px !important;
        font-size: 0.82rem !important;
    }

    /* Floating button — smaller on mobile */
    .agent-studio-float-btn {
        bottom: 16px !important;
        right: 16px !important;
        padding: 12px 18px !important;
        font-size: 0.78rem !important;
        border-radius: 14px !important;
    }

    /* Sidebar footer buttons */
    .sidebar-footer .settings-btn {
        padding: 8px 12px !important;
    }

    /* Gmail/Drive/Calendar command cards */
    .gc-card,
    .dc-card,
    .cc-card {
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* ─── Small phones < 480px ────────────────────────────────── */
@media (max-width: 480px) {
    .main-header {
        padding: 8px 10px !important;
    }

    .chat-title {
        font-size: 0.82rem !important;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .messages {
        padding: 8px 6px 110px !important;
    }

    .message {
        max-width: 96% !important;
        font-size: 0.84rem !important;
    }

    .input-bar {
        margin: 0 6px 6px !important;
        padding: 6px 8px !important;
    }

    /* Agent Showcase cards — extra padding */
    .agent-showcase-card {
        padding: 22px 18px !important;
    }

    .agent-showcase-name {
        font-size: 0.95rem !important;
    }

    .agent-showcase-features li {
        font-size: 0.78rem !important;
        padding: 6px 0 !important;
    }

    .agent-showcase-btn {
        padding: 14px 22px !important;
        font-size: 0.84rem !important;
    }

    /* Agent card icons bigger */
    .agent-card-icon-wrap,
    .agent-showcase-icon {
        width: 52px !important;
        height: 52px !important;
    }

    .agent-card-icon-wrap svg,
    .agent-showcase-icon svg {
        width: 24px !important;
        height: 24px !important;
    }

    .agents-page-hero h1 {
        font-size: 1.15rem !important;
    }

    .agents-page-hero p {
        font-size: 0.78rem !important;
    }
}

/* ─── Very small phones < 400px ───────────────────────────── */
@media (max-width: 400px) {
    .agents-page {
        padding: 20px 12px 50px !important;
    }

    .agent-showcase-card {
        border-radius: 18px !important;
        padding: 20px 16px !important;
    }

    .agent-studio-card {
        border-radius: 14px !important;
    }

    .agent-studio-header {
        padding: 18px 16px 14px !important;
    }
}

/* ─── Landscape phones ────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {

    .agent-studio-modal,
    .agent-panel,
    .agents-page-overlay {
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    .agents-page-hero {
        margin-bottom: 20px !important;
    }

    .agents-page-hero-icon {
        width: 48px !important;
        height: 48px !important;
    }
}

/* ─── Safe area (notch phones) ────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .input-bar {
            padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        }

        .agent-studio-modal,
        .agent-panel {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }
    }
}