/* ═══════════════════════════════════════════════════════════
   VIDATECH — responsive.css
   Rules are additive overrides only — desktop base styles
   live in index.html. Nothing here touches ≥ 768px layout.
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   LARGE MONITORS  ≥ 1600px
   ══════════════════════════════════════════════ */
@media (min-width: 1600px) {
  :root { --sidebar-w: 220px; }
  #hud-row { height: 80px; }
  .hud-value { font-size: 22px; }
  #chat-area { padding: 24px 32px; }
  .msg-row { max-width: min(1000px, 90%); }
  .msg-bubble { font-size: 14px; line-height: 1.6; }
  #img-gallery-inner { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .dash-chat-col  { width: 300px; }
  .dash-right-col { width: 320px; }
  .orb-container  { width: 300px; height: 300px; }
  .orb-ring-1     { width: 300px; height: 300px; }
  .orb-ring-2     { width: 255px; height: 255px; }
  .orb-ring-3     { width: 210px; height: 210px; }
  .orb-ring-4     { width: 165px; height: 165px; }
}

/* ══════════════════════════════════════════════
   STANDARD LAPTOP  1024px – 1599px
   ══════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1599px) {
  .msg-row    { max-width: min(860px, 90%); }
  .msg-bubble { font-size: 13px; }
}

/* ══════════════════════════════════════════════
   SMALL LAPTOP / LARGE TABLET  768px – 1023px
   ══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --sidebar-w: 56px; }
  .nav-item span       { display: none; }
  .topbar-logo-text    { display: none; }
  .dash-chat-col       { width: 200px; }
  .dash-right-col      { width: 200px; }
  .hud-value           { font-size: 15px; }
  #chat-area           { padding: 12px; }
  .msg-row             { max-width: 100%; }
}

/* ══════════════════════════════════════════════
   MOBILE  ≤ 767px
   Goal: everything desktop shows still shows,
   layout stacks vertically, sidebar becomes a
   slide-over drawer opened by the hamburger.
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── VIEWPORT FIX ── */
  html, body {
    height: var(--app-h, 100dvh);
    overflow: hidden;
  }

  #app-root {
    height: var(--app-h, 100dvh) !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }

  /* ── TOPBAR ── */
  #topbar {
    height: 48px !important;
    padding: 0 10px !important;
    gap: 6px;
    flex-shrink: 0;
  }

  /* Keep logo icon, hide text + center section to save space */
  .topbar-logo-text  { display: none !important; }
  .topbar-center     { display: none !important; }
  .topbar-subtitle   { display: none !important; }
  .jarvis-mode-btn   { display: none !important; }
  .win-btn           { display: none !important; }

  .topbar-right { gap: 4px; }

  /* Sidebar always visible — no hamburger needed */
  #sidebar-toggle { display: none !important; }

  /* ── HUD ROW ── */
  #hud-row {
    height: auto !important;
    padding: 4px 8px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  #hud-row::-webkit-scrollbar { display: none; }

  .hud-card {
    min-width: 80px;
    flex-shrink: 0;
    padding: 5px 8px !important;
  }
  .hud-label    { font-size: 7px !important; letter-spacing: 1px; margin-bottom: 1px; }
  .hud-value    { font-size: 13px !important; }
  .hud-sparkline { display: none !important; }

  /* ── MAIN ROW ── */
  #main {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 6px 8px 8px !important;
    gap: 6px !important;
    position: relative;
  }

  /* ── SIDEBAR — handled by body[data-active-panel] in index.html ── */
  .sidebar-user-card { display: none !important; }

  /* ── PANELS ── */
  #panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* ════════════════════════════════════════════
     DASHBOARD — everything visible, stacked
     ════════════════════════════════════════════ */
  #panel-dashboard {
    flex-direction: column !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding: 4px 0 8px !important;
    height: 100% !important;
  }

  /* Dashboard row — stays horizontal, full desktop widths, panel scrolls */
  .dash-row {
    flex-direction: row !important;
    flex: none !important;
    gap: 10px !important;
  }

  .dash-chat-col {
    display: flex !important;
    width: 270px !important;
    flex-shrink: 0 !important;
    min-height: 300px !important;
    max-height: unset !important;
  }

  .dash-orb-col {
    display: flex !important;
    width: 280px !important;
    flex-shrink: 0 !important;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 4px;
    min-height: unset !important;
  }

  .dash-right-col {
    display: flex !important;
    width: 285px !important;
    flex-shrink: 0 !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .orb-container {
    width: 180px !important;
    height: 180px !important;
  }
  .orb-ring-1 { width: 180px !important; height: 180px !important; }
  .orb-ring-2 { width: 153px !important; height: 153px !important; }
  .orb-ring-3 { width: 126px !important; height: 126px !important; }
  .orb-ring-4 { width: 100px !important; height: 100px !important; }
  .orb-ring-5 { width: 76px  !important; height: 76px  !important; }
  .orb-core   { width: 70px  !important; height: 70px  !important; }
  .orb-core svg { width: 28px !important; height: 28px !important; }
  .orb-core-label { font-size: 6px !important; letter-spacing: 1.5px; }
  .orb-floor  { width: 140px !important; }

  .orb-tagline { margin-top: 12px !important; }
  .orb-tagline h2 { font-size: 16px !important; letter-spacing: 3px; }
  .orb-tagline p  { font-size: 9px  !important; }

  /* Chat preview column */
  .dash-chat-col {
    flex-direction: column;
    min-height: 220px;
    max-height: 280px;
    flex-shrink: 0;
  }

  .dash-card { height: 100% !important; }

  .dc-bubble { max-width: calc(100vw - 100px) !important; }

  /* Right column: stack quick tools + memory */
  .dash-right-col {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Quick tools grid — 3 columns keeps icons readable */
  .quick-tools-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .qt-btn    { padding: 10px 6px !important; font-size: 10px !important; gap: 5px; }
  .qt-icon   { width: 34px !important; height: 34px !important; font-size: 14px !important; }

  /* Bottom row → stack */
  .dash-bottom {
    flex-direction: column !important;
    height: auto !important;
    gap: 8px !important;
    flex-shrink: 0;
  }

  /* Clock */
  .clock-card {
    width: 100% !important;
    padding: 8px 14px !important;
  }
  .clock-time { font-size: 20px !important; }

  /* Input bar */
  .input-bar-card {
    border-radius: 16px !important;
    padding: 6px 12px !important;
  }
  .input-mic-btn, .input-send-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
  }
  .input-chips { gap: 4px !important; flex-wrap: wrap !important; }
  .input-chip  { font-size: 9px !important; padding: 2px 8px !important; }

  /* Activity card — keep visible, compact */
  .activity-card {
    width: 100% !important;
    display: block !important;
  }

  /* Waveform */
  .waveform-bar { height: 20px !important; }

  /* ════════════════════════════════════════════
     CHAT PANEL
     ════════════════════════════════════════════ */
  #panel-chat {
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .chat-panel-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-sm) !important;
  }

  .chat-header {
    padding: 8px 10px !important;
    flex-wrap: wrap;
    gap: 4px;
  }

  .chat-header-actions {
    gap: 4px !important;
    flex-wrap: wrap !important;
    width: 100%;
  }

  .chat-hdr-btn {
    padding: 3px 8px !important;
    font-size: 9px !important;
  }

  .model-select {
    font-size: 9px !important;
    padding: 2px 4px !important;
    max-width: 110px;
  }

  #chat-area {
    flex: 1;
    min-height: 0;
    padding: 10px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .msg-row   { max-width: 100% !important; gap: 6px; margin-bottom: 8px; }
  .msg-avatar { width: 26px !important; height: 26px !important; font-size: 9px !important; }
  .msg-bubble { font-size: 13px !important; padding: 8px 10px !important; line-height: 1.5; }
  .msg-meta   { font-size: 9px !important; }

  .typing-bubble { padding: 8px 10px !important; }
  .typing-label  { font-size: 10px !important; }

  .chat-input-area {
    padding: 8px 10px !important;
    flex-shrink: 0;
  }

  .chat-input-chips { gap: 4px !important; margin-bottom: 6px; }

  .chat-input-row { gap: 6px !important; }

  #msg-input {
    font-size: 13px !important;
    padding: 8px 10px !important;
    min-height: 36px !important;
  }

  .chat-send-btn, .chat-mic-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    flex-shrink: 0;
  }

  #char-count         { font-size: 9px !important; }
  #voice-status-bar   { padding: 4px 10px !important; font-size: 10px !important; }

  /* ════════════════════════════════════════════
     IMAGES PANEL
     ════════════════════════════════════════════ */
  #panel-images { overflow-y: auto !important; }

  .img-gen-controls { padding: 10px !important; }

  .img-prompt-row {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .img-prompt-input { width: 100% !important; }
  .img-options-row  { flex-wrap: wrap !important; gap: 6px !important; }

  #img-gallery-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ════════════════════════════════════════════
     MEMORY PANEL
     ════════════════════════════════════════════ */
  .memory-add-row { flex-direction: column !important; gap: 6px !important; }
  .mem-input      { width: 100% !important; }

  /* ════════════════════════════════════════════
     SEARCH PANEL
     ════════════════════════════════════════════ */
  .search-input-row {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  .search-field { width: 100% !important; }

  /* ════════════════════════════════════════════
     PC / STATS / KEYS / DEVICES
     ════════════════════════════════════════════ */
  .stats-row      { flex-direction: column !important; gap: 6px !important; }
  .pc-quick-grid  { grid-template-columns: repeat(3, 1fr) !important; }

  /* ════════════════════════════════════════════
     SETTINGS
     ════════════════════════════════════════════ */
  .settings-input { width: 100% !important; }
  .settings-row   { flex-direction: column !important; align-items: flex-start !important; }

  /* ════════════════════════════════════════════
     VOICE PANEL
     ════════════════════════════════════════════ */
  .voice-panel-inner { padding: 20px !important; }
  .voice-orb-big     { width: 100px !important; height: 100px !important; font-size: 36px !important; }
  .voice-controls    { gap: 8px !important; }
  .voice-toggle-btn  { padding: 8px 14px !important; font-size: 10px !important; }

  /* ════════════════════════════════════════════
     MODAL
     ════════════════════════════════════════════ */
  #modal-box {
    min-width: unset !important;
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  /* ════════════════════════════════════════════
     TOASTS
     ════════════════════════════════════════════ */
  #toast-container {
    top: auto !important;
    bottom: 70px;
    right: 8px;
    left: 8px;
  }
  .toast {
    min-width: unset !important;
    max-width: 100% !important;
    font-size: 12px !important;
  }

  /* ════════════════════════════════════════════
     LIGHTBOX
     ════════════════════════════════════════════ */
  #lightbox    { padding: 8px !important; }
  #lightbox-img { max-width: 98vw !important; max-height: 80vh !important; }

  /* ════════════════════════════════════════════
     CODE BLOCKS
     ════════════════════════════════════════════ */
  pre      { overflow-x: auto !important; max-width: 100% !important; }
  pre code { font-size: 11px !important; white-space: pre !important; }

}

/* ══════════════════════════════════════════════
   VERY SMALL  ≤ 380px  (small Androids)
   ══════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hud-card    { min-width: 70px !important; }
  .hud-value   { font-size: 11px !important; }
  .msg-bubble  { font-size: 12px !important; }
  .orb-container { width: 150px !important; height: 150px !important; }
  .orb-ring-1  { width: 150px !important; height: 150px !important; }
  .orb-ring-2  { width: 127px !important; height: 127px !important; }
  .orb-ring-3  { width: 105px !important; height: 105px !important; }
  .orb-ring-4  { width: 83px  !important; height: 83px  !important; }
  .orb-ring-5  { width: 63px  !important; height: 63px  !important; }
  .orb-core    { width: 58px  !important; height: 58px  !important; }
  .quick-tools-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #img-gallery-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .voice-orb-big { width: 80px !important; height: 80px !important; font-size: 28px !important; }
  .clock-time  { font-size: 17px !important; }
}

/* ══════════════════════════════════════════════
   SAFE AREA  (Android notch / iOS Dynamic Island)
   ══════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .chat-input-area,
  #input-bar,
  #chat-input-bar {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

/* ══════════════════════════════════════════════
   SIDEBAR TOGGLE BUTTON
   ══════════════════════════════════════════════ */
#sidebar-toggle {
  display: none;
  background: none;
  border: 1px solid var(--blue-border, rgba(0,195,255,0.3));
  border-radius: 6px;
  color: var(--blue-core, #00c3ff);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1;
  -webkit-app-region: no-drag;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  /* sidebar-toggle visibility handled by data-active-panel rules */
}

/* ══════════════════════════════════════════════
   MARKDOWN LINKS
   ══════════════════════════════════════════════ */
.msg-bubble a,
.msg-bubble a.md-link {
  color: var(--blue-core, #00c3ff);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  transition: opacity .15s;
}
.msg-bubble a:hover,
.msg-bubble a.md-link:hover { opacity: 0.75; }

/* ══════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════ */
@media print {
  #sidebar, #topbar, #hud-row,
  .voice-controls, .chat-input-area,
  #input-bar, #camera-overlay, #lightbox,
  .chat-img-results-wrap { display: none !important; }
  #chat-area { overflow: visible !important; }
  .msg-bubble { box-shadow: none !important; border: 1px solid #ccc !important; }
}