/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════ */

/* ── Tablet & Below (< 900px) ── */
@media (max-width: 900px) {
  :root {
    --sidebar-w: 220px;
    --panel-w: 240px;
  }

  #algo-header { padding: 0 var(--sp-4); height: 50px; }
  #algo-title { font-size: 14px; }
}

/* ── Mobile (< 700px) ── */
@media (max-width: 700px) {
  :root {
    --sidebar-w: 260px;
    --panel-w: 100%;
    --topbar-h: 48px;
    --controls-h: 56px;
  }

  /* ── Topbar ── */
  #topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .badge-tag { display: none; }

  /* ── Sidebar: slide-in drawer ── */
  #sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-h);
    bottom: 0;
    z-index: 150;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
    border-right: 1px solid var(--border-strong);
  }
  #sidebar.open {
    transform: translateX(0);
  }
  #btn-menu-toggle { display: flex; }

  /* ── Right panel: bottom sheet ── */
  #right-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--statusbar-h);
    height: 0;
    z-index: 100;
    border-left: none;
    border-top: 1px solid var(--border-strong);
    transition: height var(--t-slow) var(--ease);
    overflow: hidden;
  }
  #right-panel.open {
    height: 55vh;
  }

  /* Panel toggle button (floating) */
  #btn-panel-toggle {
    position: fixed;
    bottom: calc(var(--statusbar-h) + 12px);
    right: 12px;
    z-index: 101;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: all var(--t-fast);
  }
  #btn-panel-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
  #btn-panel-toggle.open { background: var(--accent-purple-dim); color: var(--text-accent); border-color: var(--border-accent); }

  /* ── Main area ── */
  #main { flex: 1; }

  /* ── Controls: simplified ── */
  #controls {
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
    height: var(--controls-h);
    overflow-x: auto;
    scrollbar-width: none;
  }
  #controls::-webkit-scrollbar { display: none; }

  /* ── Algo header ── */
  #algo-header { padding: 0 var(--sp-3); height: 46px; }
  #algo-title { font-size: 13px; }
  #algo-subtitle { display: none; }
  .cmplx-best { display: none; }

  /* ── Hide decorative elements ── */
  .hide-mobile { display: none !important; }

  /* ── Status bar ── */
  .status-right { display: none; }

  /* ── Modals: full screen on mobile ── */
  .modal { padding: 0; align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 90vh;
    animation: modalSlideUp 0.3s var(--spring) both;
  }
  @keyframes modalSlideUp {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  /* ── Canvas hint ── */
  .canvas-hint { font-size: 11px; padding: 4px 10px; }

  /* ── Canvas toolbar ── */
  .canvas-toolbar { top: 8px; }
  .canvas-tool-btn { padding: 4px 8px; font-size: 10px; }

  /* Progress bar always visible on mobile */
  .progress-bar-container { display: block; }
}

/* ── Very small screens ── */
@media (max-width: 380px) {
  :root { --sidebar-w: 240px; }
  .logo-text { font-size: 14px; }
  .ctrl-play { width: 38px; height: 38px; }
}

/* ── Desktop ── */
@media (min-width: 701px) {
  #btn-menu-toggle { display: none; }
  #btn-panel-toggle { display: none; }
  #sidebar-overlay { display: none !important; }
  .progress-bar-container { display: none; }
}

/* ── Large screens: wider panels ── */
@media (min-width: 1400px) {
  :root {
    --sidebar-w: 260px;
    --panel-w: 300px;
  }
}

/* ── Touch device optimizations ── */
@media (hover: none) {
  .algo-item { padding: 9px var(--sp-3); }
  .ctrl-btn  { width: 38px; height: 38px; }
  .ctrl-play { width: 46px; height: 46px; }
}

/* ── Landscape mobile ── */
@media (max-width: 700px) and (orientation: landscape) {
  :root {
    --topbar-h: 44px;
    --controls-h: 50px;
  }
  #right-panel.open { height: 100%; }
}