/* ============================================
   CREATIVE IDE — Design System & Styles v2
   Professional Dark Theme + Debug Sidebar +
   Modals + Data Visualizer
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --bg-base: #1e1e1e;
  --bg-surface: #252526;
  --bg-elevated: #2d2d30;
  --bg-panel: #333333;
  --bg-hover: #3c3c3c;
  --bg-input: #3c3c3c;
  --accent-blue: #0078d4;
  --accent-light-blue: #4fc1ff;
  --accent-green: #4ec9b0;
  --accent-yellow: #dcdcaa;
  --accent-orange: #ce9178;
  --accent-red: #f14c4c;
  --accent-purple: #c586c0;
  --text-primary: #cccccc;
  --text-bright: #e0e0e0;
  --text-secondary: #858585;
  --text-muted: #5a5a5a;
  --text-accent: #569cd6;
  --border-subtle: #3c3c3c;
  --border-medium: #4a4a4a;
  --border-focus: #0078d4;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --transition-fast: 120ms var(--ease-out);
  --transition-medium: 200ms var(--ease-out);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%; overflow:hidden;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg-base); color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
}

#app { display:flex; flex-direction:column; width:100%; height:100vh; }

/* ── Header ── */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-md); background:var(--bg-surface);
  border-bottom:1px solid var(--border-subtle); height:44px; z-index:100;
}
.logo { display:flex; align-items:center; gap:var(--space-sm); }
.logo-icon {
  width:26px; height:26px; background:var(--accent-blue); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:11px; color:white;
}
.logo-text { font-weight:600; font-size:13px; color:var(--text-bright); letter-spacing:-0.3px; }
.logo-badge {
  font-size:9px; font-weight:600; padding:1px 6px; border-radius:3px;
  background:var(--bg-elevated); border:1px solid var(--border-subtle); color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:0.5px;
}

/* ── Language Tabs ── */
.lang-tabs { display:flex; align-items:center; height:100%; }
.lang-tab {
  display:flex; align-items:center; gap:5px; padding:0 14px; height:100%;
  border:none; background:transparent; color:var(--text-secondary);
  font-family:'Inter',sans-serif; font-size:12px; font-weight:400; cursor:pointer;
  transition:color var(--transition-fast),background var(--transition-fast);
  position:relative; border-right:1px solid var(--border-subtle);
}
.lang-tab:first-child { border-left:1px solid var(--border-subtle); }
.lang-tab:hover { color:var(--text-bright); background:var(--bg-hover); }
.lang-tab.active { color:var(--text-bright); background:var(--bg-base); }
.lang-tab.active::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent-blue);
}
.lang-tab .tab-icon { font-size:13px; }

/* ── Header Actions ── */
.header-actions { display:flex; align-items:center; gap:var(--space-sm); }
.user-area { display:flex; align-items:center; gap:var(--space-sm); }
.user-avatar {
  width:24px; height:24px; border-radius:50%; background:var(--accent-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:white; text-transform:uppercase;
}
.user-name { font-size:11px; color:var(--text-primary); font-weight:500; }
.btn-text {
  background:none; border:none; color:var(--text-secondary); font-size:11px;
  cursor:pointer; padding:2px 6px; font-family:'Inter',sans-serif;
}
.btn-text:hover { color:var(--text-bright); }

/* ── Toolbar ── */
.toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-xs) var(--space-md); background:var(--bg-surface);
  border-bottom:1px solid var(--border-subtle); height:38px; gap:var(--space-sm);
}
.toolbar-left,.toolbar-center,.toolbar-right { display:flex; align-items:center; gap:var(--space-xs); }
.toolbar-right { gap:var(--space-sm); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:3px 10px; border:1px solid var(--border-medium); border-radius:var(--radius-sm);
  background:var(--bg-elevated); color:var(--text-primary);
  font-family:'Inter',sans-serif; font-size:11px; font-weight:500;
  cursor:pointer; transition:background var(--transition-fast); white-space:nowrap; height:26px;
}
.btn:hover { background:var(--bg-hover); border-color:var(--border-focus); }
.btn:active { background:var(--bg-panel); }
.btn:disabled { opacity:0.35; cursor:not-allowed; }
.btn-primary { background:var(--accent-blue); border-color:var(--accent-blue); color:white; font-weight:600; }
.btn-primary:hover { background:#1a85db; border-color:#1a85db; }
.btn-danger { border-color:rgba(241,76,76,0.4); color:var(--accent-red); }
.btn-danger:hover { background:rgba(241,76,76,0.1); border-color:var(--accent-red); }
.btn-icon { width:26px; height:26px; padding:0; font-size:13px; }

/* ── Speed/Step ── */
.speed-control { display:flex; align-items:center; gap:5px; }
.speed-label { font-size:10px; color:var(--text-secondary); font-weight:500; }
.speed-slider {
  -webkit-appearance:none; appearance:none; width:70px; height:3px;
  border-radius:2px; background:var(--bg-panel); outline:none; cursor:pointer;
}
.speed-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--accent-blue); cursor:pointer;
}
.speed-slider::-moz-range-thumb {
  width:11px; height:11px; border-radius:50%; background:var(--accent-blue); border:none;
}
.speed-value {
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-secondary);
  min-width:38px; text-align:center; padding:1px 4px;
  background:var(--bg-elevated); border-radius:var(--radius-sm); border:1px solid var(--border-subtle);
}
.step-counter {
  display:flex; align-items:center; gap:3px;
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-secondary);
  padding:2px 8px; background:var(--bg-elevated); border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle);
}
.step-counter .step-current { color:var(--accent-light-blue); font-weight:600; }
.step-counter .step-total { color:var(--text-muted); }

/* ── Status ── */
.status-indicator { display:flex; align-items:center; gap:5px; font-size:10px; font-weight:500; color:var(--text-secondary); }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--text-muted); transition:all var(--transition-fast); }
.status-dot.ready { background:var(--accent-green); }
.status-dot.running { background:var(--accent-light-blue); animation:pulse-dot 1.2s ease-in-out infinite; }
.status-dot.paused { background:#e2b93d; }
.status-dot.error { background:var(--accent-red); }
.status-dot.simulated { background:var(--accent-purple); animation:pulse-dot 1.2s ease-in-out infinite; }
.simulated-badge {
  display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:3px;
  background:rgba(197,134,192,0.12); border:1px solid rgba(197,134,192,0.3);
  color:var(--accent-purple); font-size:9px; font-weight:600; text-transform:uppercase;
}

/* ══ Main Content: Editor + Debug Sidebar ══ */
.panels { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.editor-row {
  flex:1; display:flex; overflow:hidden; min-height:0;
}

.editor-panel { flex:1; position:relative; min-height:0; min-width:0; }
#editor-container { width:100%; height:100%; }

/* ── Debug Sidebar (right) ── */
.debug-sidebar {
  width:0; overflow:hidden; background:var(--bg-surface);
  border-left:1px solid var(--border-subtle); display:flex; flex-direction:column;
  transition:width var(--transition-medium); flex-shrink:0;
}
.debug-sidebar.open { width:280px; }

.debug-section {
  border-bottom:1px solid var(--border-subtle); display:flex; flex-direction:column;
}
.debug-section-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 10px; cursor:pointer; background:var(--bg-surface); min-height:28px;
  user-select:none;
}
.debug-section-header:hover { background:var(--bg-hover); }
.debug-section-title {
  font-size:10px; font-weight:600; color:var(--text-secondary);
  text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; gap:5px;
}
.debug-section-title .chevron {
  font-size:10px; transition:transform var(--transition-fast); display:inline-block;
}
.debug-section.collapsed .chevron { transform:rotate(-90deg); }
.debug-section-body {
  padding:6px 10px; overflow-y:auto; max-height:250px;
  font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.5;
}
.debug-section.collapsed .debug-section-body { display:none; }

/* Variable Inspector */
.var-table { width:100%; border-collapse:collapse; }
.var-table td {
  padding:2px 4px; border-bottom:1px solid var(--border-subtle); vertical-align:top;
}
.var-name { color:var(--accent-light-blue); font-weight:500; white-space:nowrap; }
.var-value { color:var(--accent-green); word-break:break-all; }
.var-changed { background:rgba(78,201,176,0.1); }
.var-type { color:var(--text-muted); font-size:9px; }

/* Call Stack */
.stack-frame {
  padding:3px 6px; border-radius:var(--radius-sm); margin-bottom:2px;
  display:flex; justify-content:space-between; align-items:center;
}
.stack-frame.current { background:rgba(0,120,212,0.15); }
.stack-func { color:var(--accent-yellow); }
.stack-line { color:var(--text-muted); font-size:10px; }

/* Data Visualizer */
.visualizer-canvas {
  width:100%; height:120px; display:block; background:var(--bg-base); border-radius:var(--radius-sm);
}

.debug-empty {
  color:var(--text-muted); font-style:italic; font-size:10px; padding:6px 0;
  font-family:'Inter',sans-serif;
}

/* ── Resize Handle ── */
.resize-handle {
  height:4px; background:var(--bg-surface); cursor:ns-resize;
  border-top:1px solid var(--border-subtle);
  transition:background var(--transition-fast);
}
.resize-handle:hover { background:var(--accent-blue); }

/* ── Terminal Panel ── */
.terminal-panel {
  height:180px; min-height:60px; display:flex; flex-direction:column; background:#1b1b1b;
}
.terminal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-md); background:var(--bg-surface);
  border-bottom:1px solid var(--border-subtle); height:30px;
}
.terminal-title {
  display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600;
  color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px;
}
.terminal-actions { display:flex; align-items:center; gap:var(--space-xs); }
.terminal-body {
  flex:1; padding:6px var(--space-md); overflow-y:auto;
  font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.6; color:var(--text-secondary);
}
.terminal-body::-webkit-scrollbar { width:5px; }
.terminal-body::-webkit-scrollbar-track { background:transparent; }
.terminal-body::-webkit-scrollbar-thumb { background:var(--border-medium); border-radius:3px; }
.terminal-line { white-space:pre-wrap; word-break:break-all; }
.terminal-line.output { color:var(--text-bright); }
.terminal-line.error { color:var(--accent-red); }
.terminal-line.info { color:var(--accent-light-blue); }
.terminal-line.success { color:var(--accent-green); }
.terminal-line.warning { color:#e2b93d; }
.terminal-line.system { color:var(--text-muted); }

/* ── Error Block (structured) ── */
.error-block {
  margin:4px 0; padding:8px; border-radius:var(--radius-sm);
  background:rgba(241,76,76,0.08); border-left:3px solid var(--accent-red);
}
.error-block .error-type {
  font-weight:700; color:var(--accent-red); font-size:12px; margin-bottom:3px;
}
.error-block .error-msg { color:var(--accent-orange); font-size:11px; margin-bottom:4px; }
.error-block .error-line-info { color:var(--text-secondary); font-size:10px; }
.error-block .error-traceback {
  color:var(--text-muted); font-size:10px; margin-top:4px;
  border-top:1px solid rgba(241,76,76,0.15); padding-top:4px; white-space:pre-wrap;
}

/* Monaco error decoration */
.error-line-highlight { background:rgba(241,76,76,0.12)!important; border-left:3px solid var(--accent-red)!important; }
.error-line-highlight-margin { background:var(--accent-red)!important; border-radius:50%; margin-left:4px; width:8px!important; height:8px!important; }

/* ── Loading Overlay ── */
.loading-overlay {
  position:fixed; inset:0; background:rgba(30,30,30,0.92); backdrop-filter:blur(4px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-md); z-index:10000; transition:opacity var(--transition-medium);
}
.loading-overlay.hidden { opacity:0; pointer-events:none; }
.loading-spinner {
  width:32px; height:32px; border-radius:50%; border:2px solid var(--border-medium);
  border-top-color:var(--accent-blue); animation:spin 0.7s linear infinite;
}
.loading-text { font-size:13px; color:var(--text-primary); font-weight:500; }
.loading-subtext { font-size:11px; color:var(--text-secondary); }

/* ══ Modals ══ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9000;
  display:none; align-items:center; justify-content:center;
}
.modal-backdrop.open { display:flex; }
.modal {
  background:var(--bg-surface); border:1px solid var(--border-medium);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:420px; max-width:90vw; max-height:85vh; overflow-y:auto;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border-subtle);
}
.modal-title { font-size:14px; font-weight:600; color:var(--text-bright); }
.modal-close {
  background:none; border:none; color:var(--text-secondary); cursor:pointer;
  font-size:16px; padding:2px 6px; border-radius:var(--radius-sm);
}
.modal-close:hover { background:var(--bg-hover); color:var(--text-bright); }
.modal-body { padding:16px; }
.modal-footer {
  padding:12px 16px; border-top:1px solid var(--border-subtle);
  display:flex; justify-content:flex-end; gap:var(--space-sm);
}

/* Form elements */
.form-group { margin-bottom:12px; }
.form-label { display:block; font-size:11px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; }
.form-input {
  width:100%; padding:7px 10px; background:var(--bg-input); border:1px solid var(--border-medium);
  border-radius:var(--radius-sm); color:var(--text-primary);
  font-family:'Inter',sans-serif; font-size:12px; outline:none;
}
.form-input:focus { border-color:var(--accent-blue); }
.form-error { color:var(--accent-red); font-size:11px; margin-top:4px; }
.form-input-mono {
  font-family:'JetBrains Mono',monospace; font-size:11px;
}

/* Tabs inside modals */
.modal-tabs { display:flex; border-bottom:1px solid var(--border-subtle); margin-bottom:12px; }
.modal-tab {
  padding:6px 14px; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--text-secondary); font-size:12px; cursor:pointer; font-family:'Inter',sans-serif;
}
.modal-tab.active { color:var(--accent-blue); border-bottom-color:var(--accent-blue); }

/* Share link */
.share-url-box {
  display:flex; gap:var(--space-sm); margin-top:8px;
}
.share-url-input {
  flex:1; padding:6px 8px; background:var(--bg-base); border:1px solid var(--border-medium);
  border-radius:var(--radius-sm); color:var(--accent-light-blue);
  font-family:'JetBrains Mono',monospace; font-size:10px; outline:none;
}

/* Snippet list */
.snippet-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  margin-bottom:6px; cursor:pointer; transition:background var(--transition-fast);
}
.snippet-item:hover { background:var(--bg-hover); }
.snippet-name { font-size:12px; color:var(--text-bright); font-weight:500; }
.snippet-meta { font-size:10px; color:var(--text-muted); }
.snippet-lang {
  font-size:9px; padding:1px 5px; border-radius:3px;
  background:var(--bg-elevated); color:var(--text-secondary); text-transform:uppercase;
}
.snippet-delete {
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:14px; padding:2px 4px; border-radius:var(--radius-sm);
}
.snippet-delete:hover { color:var(--accent-red); background:rgba(241,76,76,0.1); }

/* Stdin input list */
.stdin-input-item {
  display:flex; align-items:center; gap:var(--space-sm); margin-bottom:8px;
}
.stdin-input-item label {
  font-size:11px; color:var(--text-secondary); min-width:80px; flex-shrink:0;
}

/* Toast notification */
.toast {
  position:fixed; bottom:20px; right:20px; padding:8px 16px;
  background:var(--bg-panel); border:1px solid var(--border-medium);
  border-radius:var(--radius-md); color:var(--text-bright); font-size:12px;
  box-shadow:var(--shadow-lg); z-index:11000;
  animation:fade-in-up 0.2s ease-out;
  transition:opacity 0.3s;
}
.toast.success { border-left:3px solid var(--accent-green); }
.toast.error { border-left:3px solid var(--accent-red); }

/* ── Animations ── */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
@keyframes fade-in { from{opacity:0;} to{opacity:1;} }
@keyframes fade-in-up { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
@keyframes glow-line {
  0%{background-color:rgba(0,120,212,0.06);border-left-color:rgba(0,120,212,0.3);}
  50%{background-color:rgba(0,120,212,0.15);border-left-color:rgba(0,120,212,0.9);}
  100%{background-color:rgba(0,120,212,0.06);border-left-color:rgba(0,120,212,0.3);}
}

/* ── Monaco decorations ── */
.current-line-highlight {
  background:rgba(0,120,212,0.12)!important; border-left:3px solid var(--accent-blue)!important;
  animation:glow-line 1s ease-in-out infinite!important;
}
.current-line-highlight-margin { background:var(--accent-blue)!important; border-radius:2px; margin-left:2px; }
.visited-line-highlight { background:rgba(78,201,176,0.06)!important; border-left:2px solid rgba(78,201,176,0.2)!important; }
.visited-line-highlight-margin { background:rgba(78,201,176,0.25)!important; border-radius:2px; margin-left:2px; }

/* ── Tooltip ── */
.tooltip { position:relative; }
.tooltip::after {
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%) scale(0.96); padding:3px 8px; background:#3c3c3c;
  border:1px solid var(--border-medium); border-radius:var(--radius-sm);
  font-size:10px; color:var(--text-bright); white-space:nowrap;
  opacity:0; pointer-events:none; transition:all var(--transition-fast); z-index:1000;
}
.tooltip:hover::after { opacity:1; transform:translateX(-50%) scale(1); }

/* ── Mobile Overflow Menu ── */
.mobile-menu-wrapper { position:relative; display:none; }
.mobile-menu-btn { font-size:16px !important; font-weight:700; letter-spacing:2px; }
.mobile-menu-dropdown {
  display:none; position:absolute; top:100%; right:0; margin-top:4px;
  background:var(--bg-surface); border:1px solid var(--border-medium);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  min-width:140px; z-index:600; overflow:hidden;
}
.mobile-menu-dropdown.open { display:block; }
.mobile-menu-item {
  display:block; width:100%; padding:10px 14px; border:none;
  background:transparent; color:var(--text-primary);
  font-family:'Inter',sans-serif; font-size:12px; text-align:left;
  cursor:pointer; transition:background var(--transition-fast);
  -webkit-tap-highlight-color:transparent;
}
.mobile-menu-item:hover, .mobile-menu-item:active { background:var(--bg-hover); }

/* ── Responsive: Tablet (≤ 768px) ── */
@media (max-width:768px) {
  .header { padding:0 var(--space-sm); }
  .logo-badge { display:none; }
  .logo-text { font-size:12px; }
  .debug-sidebar.open { width:220px; }
  .toolbar { flex-wrap:wrap; height:auto; padding:4px var(--space-sm); gap:4px; }
  .toolbar-left, .toolbar-right { flex-wrap:wrap; }
  .toolbar-center { order:3; width:100%; justify-content:center; margin-top:2px; }
  .modal { width:95vw; }
  .terminal-panel { height:140px; }
  .speed-control { display:none; }
}

/* ── Responsive: Mobile (≤ 480px) ── */
@media (max-width:480px) {
  /* Viewport handling */
  html, body { overflow:hidden; overscroll-behavior:none; }
  #app { height:100vh; height:100dvh; }

  /* Header: compact single row */
  .header {
    height:40px; padding:0 var(--space-xs);
    gap:2px;
  }
  .logo { gap:4px; }
  .logo-icon { width:22px; height:22px; font-size:9px; }
  .logo-text { font-size:11px; }
  .logo-badge { display:none; }

  /* Language tabs: compact */
  .lang-tabs { height:100%; }
  .lang-tab {
    padding:0 10px; font-size:11px; gap:3px;
    min-height:40px; /* touch target */
  }
  .lang-tab .tab-icon { font-size:12px; }

  /* Header actions: hide login text on very small screens */
  .header-actions { gap:4px; }
  .status-indicator { gap:3px; font-size:9px; }
  .user-name { display:none; }

  /* Toolbar: wrap into 2 rows */
  .toolbar {
    flex-wrap:wrap; height:auto; padding:4px var(--space-xs);
    gap:3px; min-height:36px;
  }
  .toolbar-left {
    display:flex; flex-wrap:wrap; gap:3px;
    order:1;
  }
  .toolbar-center {
    order:3; width:100%; justify-content:center;
    padding-top:2px;
  }
  .toolbar-right {
    order:2; margin-left:auto;
    display:flex; flex-wrap:wrap; gap:3px;
  }

  /* Buttons: larger touch targets */
  .btn {
    min-height:32px; min-width:32px; padding:4px 8px;
    font-size:11px;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .btn-icon { width:32px; height:32px; font-size:14px; }
  .btn-primary { padding:4px 12px; }

  /* Hide less-important toolbar items on mobile, show overflow menu */
  .speed-control { display:none; }
  #btn-share, #btn-save, #btn-snippets { display:none; }
  .toolbar-right .speed-control { display:none; }
  .mobile-menu-wrapper { display:block; }

  /* Step counter */
  .step-counter { font-size:9px; padding:2px 6px; }

  /* Editor panel: fill remaining space */
  .panels { flex:1; min-height:0; }
  .editor-row { flex:1; min-height:0; flex-direction:column; }
  .editor-panel { flex:1; min-height:0; }

  /* Debug sidebar: overlay as bottom sheet */
  .debug-sidebar {
    position:fixed;
    bottom:0; left:0; right:0;
    width:100% !important;
    height:0;
    max-height:55vh;
    z-index:500;
    border-left:none;
    border-top:2px solid var(--accent-blue);
    border-radius:12px 12px 0 0;
    transition:height var(--transition-medium);
    overflow-y:auto;
    box-shadow:0 -4px 20px rgba(0,0,0,0.5);
  }
  .debug-sidebar.open {
    height:45vh;
    width:100% !important;
  }

  .debug-section-header { min-height:36px; padding:6px 12px; }
  .debug-section-title { font-size:11px; }
  .debug-section-body { padding:8px 12px; font-size:12px; max-height:200px; }

  /* Terminal panel: shorter on mobile */
  .terminal-panel { height:100px; min-height:50px; }
  .terminal-header { height:26px; padding:0 var(--space-xs); }
  .terminal-title { font-size:9px; }
  .terminal-body { font-size:10px; padding:4px var(--space-xs); line-height:1.5; }

  /* Resize handle: bigger for touch */
  .resize-handle { height:8px; }

  /* Modals: full screen on mobile */
  .modal-backdrop { padding:0; align-items:flex-end; }
  .modal {
    width:100vw; max-width:100vw;
    max-height:90vh;
    border-radius:12px 12px 0 0;
    border:none;
  }
  .modal-header { padding:14px 16px; }
  .modal-title { font-size:15px; }
  .modal-close { font-size:18px; padding:4px 8px; min-height:36px; min-width:36px; }
  .modal-body { padding:16px; }
  .form-input { padding:10px 12px; font-size:14px; min-height:40px; }
  .modal-footer { padding:14px 16px; }
  .modal-footer .btn { min-height:36px; padding:6px 16px; font-size:12px; }

  /* Toast: bottom center on mobile */
  .toast {
    left:10px; right:10px; bottom:10px;
    text-align:center; font-size:13px;
  }

  /* Scrollbars: wider on touch */
  ::-webkit-scrollbar { width:4px; height:4px; }
}

/* ── Responsive: Very small phones (≤ 360px) ── */
@media (max-width:360px) {
  .header { height:36px; }
  .logo-text { display:none; }
  .lang-tab { padding:0 8px; font-size:10px; }
  .btn { min-height:30px; min-width:30px; font-size:10px; padding:3px 6px; }
  .btn-icon { width:30px; height:30px; }
  .terminal-panel { height:80px; }
  #btn-toggle-debug { font-size:10px; padding:3px 6px; }
}

/* ── Landscape phone (short height) ── */
@media (max-height:500px) and (max-width:768px) {
  .header { height:32px; }
  .toolbar { padding:2px var(--space-xs); min-height:28px; }
  .btn { min-height:26px; }
  .btn-icon { width:26px; height:26px; }
  .terminal-panel { height:60px; min-height:40px; }
  .debug-sidebar.open { max-height:40vh; }
}

/* ── Scrollbar global ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-medium); border-radius:3px; }