/* ============================================================
 * Edlix AI — Mobile UI Patch v1.0
 * By Nagchetra Labs / Revant Sahu
 * Responsive fixes: topbar, YT fullscreen, tools dropdown,
 *   welcome screen, notes/quiz padding, bottom nav spacing
 * ============================================================ */

    /* ─────────────────────────────────────────────────────────────────────
   0. ROOT OVERRIDES — tighten vars on small screens
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      :root {
        --sidebar-w: 280px;
        /* stays 280 — fixed overlay, not flow */
        --radius: 12px;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   1. BODY — prevent horizontal scroll, allow main to fill properly
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      body {
        overflow: hidden !important;
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100vw;
        overscroll-behavior-y: none;
        /* Disable pull-to-refresh feel */
        -webkit-tap-highlight-color: transparent;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   2. SIDEBAR — fixed overlay, doesn't push #main at all
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {

      /* Sidebar is a fixed overlay — HIDDEN by default on mobile */
      #sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        bottom: 0 !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100dvh !important;
        z-index: 9999 !important;
        transform: none !important;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 1 !important;
        padding: 20px 16px !important;
        border-right-width: 1px !important;
        pointer-events: none !important;
      }

      /* Closed state: same as default — fully off-screen */
      #sidebar.closed {
        left: -280px !important;
        width: 280px !important;
        min-width: 280px !important;
        opacity: 1 !important;
        pointer-events: none !important;
        transform: none !important;
      }

      /* Open state when JS adds .mobile-open — slides in */
      #sidebar.mobile-open {
        left: 0 !important;
        pointer-events: auto !important;
        transform: none !important;
      }

      /* Backdrop dim layer */
      #mobile-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 499;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
      }

      #mobile-sidebar-backdrop.visible {
        display: block;
      }

      /* #main must ALWAYS be full width — sidebar is an overlay, not a sibling in flow */
      #main {
        width: 100% !important;
        max-width: 100vw !important;
        flex: 1 !important;
        min-width: 0 !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   3. TOPBAR — prevent overflow and crowding
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      #topbar {
        padding: 10px 12px !important;
        gap: 6px !important;
        flex-wrap: nowrap;
        min-height: 52px;
        flex-shrink: 0;
      }

      /* Topbar title: truncate if long */
      .topbar-title {
        font-size: 13px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
      }

      /* All topbar icon buttons: icon-only on mobile */
      .topbar-icon-btn {
        padding: 7px 8px !important;
        font-size: 12px !important;
        min-width: 34px;
        flex-shrink: 0;
      }

      .topbar-btn-label {
        display: none !important;
      }

      /* Tools trigger: shorter */
      #tools-trigger {
        padding: 7px 9px !important;
        font-size: 11px !important;
        flex-shrink: 0;
      }

      /* Tools dropdown: position properly and don't overflow viewport */
      #tools-menu {
        right: 0 !important;
        left: auto !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 180px !important;
      }

      /* Study timer button: shrink */
      #study-timer-trigger {
        font-size: 11px !important;
        padding: 6px 8px !important;
      }

      /* Study timer dropdown: fixed on mobile so topbar clipping doesn't hide it */
      #study-timer-dropdown {
        position: fixed !important;
        top: 64px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 99999 !important;
      }

      #study-timer-dropdown.open {
        display: flex !important;
      }

      /* Mode selector: hide in topbar on mobile */
      #topbar .mode-selector {
        display: none !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   4. CHAT AREA — correct padding + spacing above bottom nav
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      #chat-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        /* Leave room for bottom nav (60px) */
        padding-bottom: 0 !important;
      }

      #chat-area {
        padding: 14px 10px 8px !important;
        gap: 14px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Important: scrolls inside flex column, not body */
        flex: 1 !important;
        min-height: 0 !important;
        /* Bottom clearance: input bar height (~80px) + bottom nav (60px) */
        padding-bottom: 16px !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   5. MESSAGE BUBBLES — proper width constraints, no overflow
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      .message-row {
        max-width: 100% !important;
        width: 100% !important;
        gap: 8px !important;
      }

      /* Bot message: full width minus avatar */
      .message-row.bot {
        align-self: flex-start !important;
      }

      /* User message: right-aligned, limited width */
      .message-row.user {
        align-self: flex-end !important;
        width: auto !important;
        max-width: calc(100vw - 44px) !important;
      }

      .message-bubble {
        font-size: 13.5px !important;
        padding: 11px 13px !important;
        line-height: 1.65 !important;
        /* Critical: never wider than screen minus avatar+gap */
        max-width: calc(100vw - 66px) !important;
        width: auto !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
      }

      /* Bot bubble: can be wider since response needs space */
      .message-row.bot .message-bubble {
        max-width: calc(100vw - 66px) !important;
      }

      /* User bubble: keep it compact */
      .message-row.user .message-bubble {
        max-width: calc(100vw - 66px) !important;
        margin-left: 0 !important;
      }

      .message-avatar {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        font-size: 14px !important;
      }

      /* Code blocks inside bubbles: horizontal scroll, don't break layout */
      .message-bubble .code-wrapper {
        max-width: 100% !important;
        overflow-x: hidden !important;
      }

      .message-bubble .code-wrapper .code-block {
        overflow-x: auto !important;
        max-width: 100% !important;
        font-size: 12px !important;
      }

      /* Tables: horizontal scroll container */
      .message-bubble table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        font-size: 12px !important;
      }

      /* Message meta: smaller on mobile */
      .message-meta {
        font-size: 10px !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   6. INPUT BAR — sticky above bottom nav, full-width, proper sizing
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      #input-bar {
        position: sticky !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 140 !important;
        padding: 8px 10px 10px !important;
        background: var(--bg-deep) !important;
        border-top: 1px solid var(--border) !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      .input-wrapper {
        border-radius: 16px !important;
        padding: 10px 12px 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }

      #chat-input {
        font-size: 14px !important;
        min-height: 22px !important;
        max-height: 120px !important;
        width: 100% !important;
      }

      /* Bottom row: keep tools left, mic center, send right — but tighter */
      .input-bottom-row {
        margin-top: 6px !important;
        padding-top: 6px !important;
      }

      /* Left tools: smaller tap targets but still 44px minimum */
      .input-action-btn {
        padding: 7px !important;
        min-width: 34px !important;
        min-height: 34px !important;
      }

      /* Mic button */
      .mic-center-btn {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
      }

      /* Send button: icon-only on mobile */
      .send-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        min-width: 40px !important;
        min-height: 36px !important;
      }

      /* Hide "Send" text label, keep the SVG arrow icon */
      .send-btn span {
        display: none !important;
      }

      /* Input footer: smaller */
      .input-footer {
        margin-top: 4px !important;
      }

      .input-hints,
      .char-count {
        font-size: 10px !important;
      }

      /* Input bar skeleton */
      #input-bar-skeleton {
        padding: 10px 12px !important;
        bottom: 60px !important;
        position: sticky !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   8. WELCOME SCREEN — compact, centered, no overflow
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      #welcome-screen {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        padding: 20px 14px 14px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100% !important;
        /* Leave space for input */
        padding-bottom: 20px !important;
      }

      /* Hide side panels completely */
      .welcome-side-panel,
      .welcome-left-panel,
      .welcome-right-panel {
        display: none !important;
      }

      .welcome-center {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
      }

      /* Face: smaller so it fits without scrolling */
      #edlixFace1 {
        width: 160px !important;
        height: 160px !important;
        margin-top: 10px !important;
        overflow: visible !important;
      }

      .aura-ring-1,
      .aura-ring-2 {
        display: none !important;
      }

      .welcome-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
        text-align: center !important;
      }

      .welcome-sub {
        font-size: 13px !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 8px !important;
      }

      /* Quick prompts: 2-col grid */
      .quick-prompts {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
      }

      .quick-prompt {
        padding: 10px 10px !important;
      }

      .quick-prompt .qp-desc {
        display: none !important;
      }

      .quick-prompt .qp-title {
        font-size: 11px !important;
      }

      .quick-prompt .qp-icon {
        font-size: 16px !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   9. NOTES & QUIZ SECTIONS — proper mobile padding & layout
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      #notes-section {
        padding: 14px 12px !important;
        padding-bottom: 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }

      #notes-list {
        gap: 12px !important;
      }

      .note-item {
        flex: 1 1 100% !important;
        /* full width on mobile */
        min-height: 120px !important;
      }

      #quiz-section {
        padding: 14px 12px !important;
        padding-bottom: 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
      }

      .quiz-setup-form {
        flex-direction: column !important;
        gap: 8px !important;
      }

      .quiz-input,
      .quiz-select {
        width: 100% !important;
        box-sizing: border-box !important;
      }

      /* Flash cards: single col, shorter on mobile */
      .flash-card {
        height: 200px !important;
      }

      /* Box grids: always 1 col on mobile */
      .box-grid.cols-2,
      .box-grid.cols-3 {
        grid-template-columns: 1fr !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   10. GAMES SECTION — card row scrolls horizontally
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      #games-section {
        padding: 14px 12px !important;
        padding-bottom: 20px !important;
        overflow-y: auto !important;
      }

      /* Game card rows: horizontal scroll */
      #games-cards,
      #fun-games-cards {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        /* Scrollbar hidden but scrollable */
        scrollbar-width: none !important;
      }

      #games-cards::-webkit-scrollbar,
      #fun-games-cards::-webkit-scrollbar {
        display: none !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   11. SETTINGS PANEL — full-screen bottom sheet on mobile
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      #settings-overlay {
        align-items: flex-end !important;
      }

      #settings-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
        max-height: 90dvh !important;
        animation: slideUpMobileSettings 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
      }

      @keyframes slideUpMobileSettings {
        from {
          transform: translateY(100%);
          opacity: 0;
        }

        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   12. YOUTUBE FULLSCREEN PANEL — proper mobile stacked layout
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      #edlix-ytfs {
        flex-direction: column !important;
        overflow: hidden !important;
      }

      /* Left side (video): takes up top ~55% of screen */
      .ytfs-left {
        flex: 0 0 auto !important;
        height: 55dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
      }

      .ytfs-iframe-wrap {
        flex: 1 !important;
      }

      /* Video meta and controls: tighter */
      .ytfs-video-meta {
        padding: 8px 12px 6px !important;
      }

      .ytfs-video-title {
        font-size: 12px !important;
      }

      .ytfs-video-sub {
        font-size: 10px !important;
      }

      .ytfs-controls {
        padding: 6px 12px 8px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
      }

      .ytfs-ctrl {
        font-size: 10px !important;
        padding: 5px 10px !important;
      }

      /* Right side (chat): bottom panel, fixed height */
      .ytfs-right {
        width: 100% !important;
        min-width: 0 !important;
        height: 45dvh !important;
        flex: 0 0 auto !important;
        border-left: none !important;
        border-top: 1px solid var(--border-glow) !important;
        display: flex !important;
        flex-direction: column !important;
      }

      /* Collapsed state: just a sliver showing the tab */
      .ytfs-right.collapsed {
        height: 28px !important;
        width: 100% !important;
        overflow: hidden !important;
      }

      /* Chat tab: horizontal pill at top center */
      .ytfs-chat-tab {
        position: absolute !important;
        left: 50% !important;
        top: -18px !important;
        transform: translateX(-50%) !important;
        width: 48px !important;
        height: 18px !important;
        border-radius: 6px 6px 0 0 !important;
      }

      /* Chat messages: scrollable */
      .ytfs-msgs {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }

      /* Input row: tighter */
      .ytfs-input-row {
        padding: 8px !important;
        flex-shrink: 0 !important;
      }

      .ytfs-textarea {
        font-size: 13px !important;
        min-height: 34px !important;
      }

      /* YT video grid: 2 cols on mobile */
      .yt-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
      }

      /* YT panel inside chat */
      .edlix-yt-panel {
        margin: 6px 0 !important;
      }

      .yt-bar {
        padding: 8px 10px !important;
        gap: 6px !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   13. MISC PANELS — wiki, auth modal, voice overlay
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {

      /* EDX Wiki panel: bottom sheet on mobile — HIDDEN by default */
      #edx-wiki-panel {
        display: none !important;
        right: 0 !important;
        left: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 85dvh !important;
        max-height: 85dvh !important;
        border-radius: 20px 20px 0 0 !important;
        transform: translateY(105%) !important;
        transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
        z-index: 600 !important;
      }

      /* Only visible when explicitly opened */
      #edx-wiki-panel.open {
        display: block !important;
        transform: translateY(0%) !important;
      }

      /* Auth modal: full width */
      .auth-modal-inner {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 24px 18px !important;
        border-radius: 16px !important;
      }

      /* Voice overlay: safe area aware */
      #voice-overlay {
        padding-bottom: env(safe-area-inset-bottom, 20px) !important;
      }

      /* Image result: full width */
      .edlix-image-result {
        max-width: 100% !important;
      }

      /* Gallery grid: 2 cols on mobile */
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 14px !important;
        gap: 10px !important;
      }

      /* Diagram viewport: limit height on mobile */
      .sd-viewport {
        min-height: 200px !important;
        max-height: 280px !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   14. EXTRA-SMALL PHONES (≤ 390px)
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 390px) {
      #edlixFace1 {
        width: 130px !important;
        height: 130px !important;
      }

      .welcome-title {
        font-size: 17px !important;
      }

      .welcome-sub {
        font-size: 12px !important;
      }

      .quick-prompts {
        grid-template-columns: 1fr !important;
      }

      .message-bubble {
        font-size: 13px !important;
        padding: 10px 11px !important;
      }

      #topbar {
        padding: 8px 10px !important;
      }

      .ytfs-left {
        height: 50dvh !important;
      }

      .ytfs-right {
        height: 50dvh !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   15. SAFE AREA (iPhone notch / home bar)
───────────────────────────────────────────────────────────────────── */
    @supports (padding: max(0px)) {
      @media (max-width: 768px) {
        #input-bar {
          bottom: 0 !important;
          margin-bottom: env(safe-area-inset-bottom, 0px) !important;
        }

        #sidebar {
          padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        }
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   16. AMBIENT BOTTOM GLOW — Restore futuristic feel
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      body::after {
        content: '';
        position: fixed;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 140px;
        background: radial-gradient(ellipse at 50% 100%,
            color-mix(in srgb, var(--purple) 15%, transparent) 0%,
            color-mix(in srgb, var(--cyan) 8%, transparent) 40%,
            transparent 75%);
        pointer-events: none;
        z-index: 0;
        /* behind main content */
        opacity: 0.8;
      }

      #input-bar {
        box-shadow: 0 -10px 40px -10px color-mix(in srgb, var(--purple) 20%, transparent) !important;
      }

      /* ═══ MOBILE WIDGET FIXES ═══ */
      .edx-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 8px !important;
        margin: 8px 0 !important;
      }
      .edx-image-grid.count-2,
      .edx-image-grid.count-3 {
        grid-template-columns: 1fr 1fr !important;
      }
      .edx-img-item {
        border-radius: 8px !important;
      }
      .edx-img-caption {
        font-size: 10px !important;
        padding: 4px 6px !important;
      }

      /* Wiki/Tool panels */
      .wiki-panel, .tool-panel, .search-panel {
        padding: 12px !important;
        margin: 8px 0 !important;
        border-radius: 10px !important;
      }
      .wiki-panel img, .tool-panel img {
        max-width: 100% !important;
        height: auto !important;
      }

      /* Pre-built widgets */
      .pre-widget {
        padding: 12px !important;
        margin: 8px 0 !important;
        border-radius: 10px !important;
        overflow-x: hidden !important;
      }
      .pre-widget table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
      .pre-widget pre {
        font-size: 11px !important;
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
      }

      /* Chart containers */
      .chart-container, canvas {
        max-width: 100% !important;
        height: auto !important;
      }

      /* Search result cards */
      .search-card {
        padding: 10px !important;
        margin: 6px 0 !important;
      }
      .search-card img {
        width: 60px !important;
        height: 60px !important;
      }

      /* ═══ BOTTOM NAV ═══ */
      .bottom-nav {
        height: 56px !important;
        padding: 0 4px !important;
        gap: 0 !important;
        z-index: 200 !important;
      }
      .bottom-nav-item {
        font-size: 10px !important;
        padding: 6px 4px !important;
        min-width: 44px !important;
        gap: 2px !important;
      }
      .bottom-nav-item svg,
      .bottom-nav-item .nav-icon {
        width: 20px !important;
        height: 20px !important;
      }

      /* ═══ CONVERSATION LIST ═══ */
      .conv-item {
        padding: 12px 14px !important;
        gap: 10px !important;
        border-radius: 12px !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
      }
      .conv-title {
        font-size: 13px !important;
        line-height: 1.3 !important;
      }
      #conversation-list {
        gap: 4px !important;
        padding: 4px 0 !important;
      }

      /* ═══ FILE PROCESSING UI ═══ */
      .fp-file-card {
        padding: 10px !important;
        border-radius: 10px !important;
      }
      .fp-file-icon {
        font-size: 24px !important;
        width: 40px !important;
        height: 40px !important;
      }
      .fp-steps {
        gap: 4px !important;
      }
      .fp-step-pill {
        font-size: 10px !important;
        padding: 4px 8px !important;
      }

      /* ═══ SETTINGS PANEL ═══ */
      #settings-panel {
        padding: 16px !important;
      }
      .settings-tab-btn {
        font-size: 11px !important;
        padding: 8px 10px !important;
      }
      .settings-section {
        padding: 12px !important;
        border-radius: 12px !important;
      }

      /* ═══ POINTS / LEADERBOARD ═══ */
      .pts-lb-item {
        padding: 8px 10px !important;
        gap: 8px !important;
      }
      .pts-lb-name {
        font-size: 12px !important;
      }
      .pts-lb-coins {
        font-size: 11px !important;
      }

      /* ═══ MEDITATION UI ═══ */
      .med-container {
        padding: 12px !important;
      }
      .med-video-wrap {
        border-radius: 12px !important;
        max-height: 50dvh !important;
      }

      /* ═══ WIDGET GALLERY ═══ */
      .widget-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
      }

      /* ═══ TOUCH FEEDBACK ═══ */
      .conv-item:active,
      .quick-prompt:active,
      .mode-btn:active,
      .bottom-nav-item:active,
      .sidebar-action-btn:active {
        transform: scale(0.97) !important;
        opacity: 0.8 !important;
        transition: transform 0.1s !important;
      }

      /* ═══ GPU ACCELERATION ═══ */
      #sidebar,
      #settings-panel,
      #edx-wiki-panel,
      #voice-overlay {
        will-change: transform !important;
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
      }

      /* ═══ SMOOTH SCROLLING ═══ */
      #chat-area,
      #conversation-list,
      #notes-section,
      #quiz-section,
      #games-section {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
      }

      /* ═══ TEXT SELECTION ═══ */
      .message-bubble {
        -webkit-user-select: text !important;
        user-select: text !important;
        cursor: text !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   17. LANDSCAPE MOBILE
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) and (orientation: landscape) {
      #welcome-screen {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 10px 16px !important;
      }
      #edlixFace1 {
        width: 100px !important;
        height: 100px !important;
      }
      .welcome-title {
        font-size: 16px !important;
      }
      .quick-prompts {
        grid-template-columns: repeat(3, 1fr) !important;
      }
      .ytfs-left {
        height: 70dvh !important;
      }
      .ytfs-right {
        height: 30dvh !important;
      }
    }

    /* ─────────────────────────────────────────────────────────────────────
   18. FOCUS STYLES (accessibility)
───────────────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
      *:focus-visible {
        outline: 2px solid var(--purple) !important;
        outline-offset: 2px !important;
      }
      button:focus-visible {
        outline: 2px solid var(--purple) !important;
        outline-offset: 2px !important;
      }
    }
  </style>