/* ═══════════════════════════════════════════════════════
   मराठीकोड IDE — style.css
   ═══════════════════════════════════════════════════════ */

:root {
  --c-bg:          #12141a;
  --c-surface:     #191c24;
  --c-raised:      #1f2330;
  --c-overlay:     #252a38;
  --c-hover:       #2a3040;
  --c-border:      #2d3245;
  --c-border-soft: #232738;
  --c-text-1:      #e8ecf4;
  --c-text-2:      #8f97b2;
  --c-text-3:      #525d78;
  --c-text-4:      #333c55;
  --c-accent:      #ff7518;
  --c-accent-dim:  rgba(255,117,24,.12);
  --c-accent-glow: rgba(255,117,24,.35);
  --c-accent-2:    #ff9a52;
  --c-green:  #4ade80;
  --c-red:    #f87171;
  --c-yellow: #fbbf24;
  --c-blue:   #60a5fa;
  --c-purple: #c084fc;
  --c-cyan:   #34d399;
  --syn-kw:      #ff8a80;
  --syn-str:     #a5d6ff;
  --syn-num:     #ffb86c;
  --syn-cmt:     #4a5272;
  --syn-fn:      #c084fc;
  --syn-builtin: #ff9a52;
  --syn-op:      #89ddff;
  --syn-bool:    #ff8a80;
  --syn-self:    #f07178;
  --titlebar-h:  44px;
  --tabbar-h:    38px;
  --statusbar-h: 24px;
  --actbar-w:    48px;
  --sidepanel-w: 230px;
  --output-h:    220px;
  --font-mono: 'JetBrains Mono','Fira Code',monospace;
  --font-ui:   'Outfit',system-ui,sans-serif;
  --font-dev:  'Tiro Devanagari Marathi',serif;
  --r:    6px;
  --r-sm: 4px;
  --r-lg: 10px;
  --trans: .15s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --c-bg:#f4f5f9;--c-surface:#fff;--c-raised:#f0f1f5;--c-overlay:#e8eaf0;
  --c-hover:#e0e3ec;--c-border:#d4d8e8;--c-border-soft:#eaecf4;
  --c-text-1:#1a1f35;--c-text-2:#4a5272;--c-text-3:#8f97b2;--c-text-4:#c4c9dc;
  --syn-kw:#d63965;--syn-str:#0e7490;--syn-num:#b45309;--syn-cmt:#94a3b8;
  --syn-fn:#7c3aed;--syn-builtin:#c2410c;--syn-op:#0891b2;--syn-bool:#d63965;--syn-self:#be185d;
}
[data-theme="saffron"] {
  --c-bg:#120800;--c-surface:#1a0e00;--c-raised:#231400;--c-overlay:#2e1a00;
  --c-hover:#3a2200;--c-border:#4d2e00;--c-border-soft:#3a2200;
  --c-text-1:#fff0d9;--c-text-2:#cc9060;--c-text-3:#7a5030;--c-text-4:#4a3020;
  --c-accent:#ff9c2e;--c-accent-dim:rgba(255,156,46,.12);--c-accent-glow:rgba(255,156,46,.35);
  --syn-kw:#ff7043;--syn-str:#ffe57f;--syn-num:#ffb74d;--syn-cmt:#7a5030;
  --syn-fn:#ffcc80;--syn-builtin:#ff8a65;--syn-op:#ffd54f;--syn-bool:#ff7043;--syn-self:#ff8a65;
}
[data-theme="midnight"] {
  --c-bg:#090b10;--c-surface:#0d1018;--c-raised:#111520;--c-overlay:#161b28;
  --c-hover:#1c2235;--c-border:#232a40;--c-border-soft:#171e30;
  --c-text-1:#ccd6f6;--c-text-2:#6b7aab;--c-text-3:#3d4a70;--c-text-4:#252f50;
  --c-accent:#64ffda;--c-accent-dim:rgba(100,255,218,.1);--c-accent-glow:rgba(100,255,218,.3);--c-accent-2:#a0ffe8;
  --syn-kw:#ff79c6;--syn-str:#f1fa8c;--syn-num:#bd93f9;--syn-cmt:#44475a;
  --syn-fn:#8be9fd;--syn-builtin:#ffb86c;--syn-op:#ff79c6;--syn-bool:#ff79c6;--syn-self:#ffb86c;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-ui);background:var(--c-bg);color:var(--c-text-1);font-size:13px;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
button{cursor:pointer;font-family:var(--font-ui)}
input,textarea{font-family:inherit}
svg{display:block;flex-shrink:0}

/* ── TITLEBAR ── */
.titlebar{height:var(--titlebar-h);background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;align-items:center;padding:0 12px 0 10px;flex-shrink:0;position:relative;z-index:200}
.titlebar-left{display:flex;align-items:center;gap:6px;min-width:var(--sidepanel-w)}
.titlebar-center{flex:1;display:flex;justify-content:center;overflow:hidden;padding:0 8px}
.titlebar-right{display:flex;align-items:center;gap:6px;min-width:var(--sidepanel-w);justify-content:flex-end}
.app-logo{display:flex;align-items:center;gap:10px;user-select:none;flex-shrink:0}
.logo-mark{width:28px;height:28px;border-radius:7px;flex-shrink:0}
.app-name{display:flex;flex-direction:column;line-height:1.1}
.app-name-main{font-family:var(--font-dev);font-size:15px;font-weight:700;color:var(--c-text-1);white-space:nowrap}
.app-name-sub{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-3)}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--c-text-2);background:var(--c-raised);padding:5px 12px;border-radius:var(--r);border:1px solid var(--c-border-soft);overflow:hidden;white-space:nowrap;max-width:100%}
.breadcrumb svg{width:13px;height:13px;flex-shrink:0}
.bc-sep{color:var(--c-text-4)}
.tb-icon-btn{width:30px;height:30px;background:transparent;border:none;border-radius:var(--r-sm);color:var(--c-text-2);display:flex;align-items:center;justify-content:center;transition:background var(--trans),color var(--trans);flex-shrink:0}
.tb-icon-btn svg{width:16px;height:16px}
.tb-icon-btn:hover{background:var(--c-hover);color:var(--c-text-1)}
.tb-divider{width:1px;height:20px;background:var(--c-border);margin:0 6px;flex-shrink:0}
.run-btn{display:flex;align-items:center;gap:7px;padding:0 16px;height:32px;background:var(--c-accent);border:none;border-radius:var(--r);color:white;font-size:13px;font-weight:600;transition:filter var(--trans),transform var(--trans),box-shadow var(--trans);box-shadow:0 2px 12px var(--c-accent-glow);white-space:nowrap;flex-shrink:0}
.run-btn svg{width:14px;height:14px}
.run-btn kbd{font-size:10px;font-family:var(--font-mono);background:rgba(0,0,0,.2);border-radius:3px;padding:1px 5px;opacity:.8}
.run-btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 20px var(--c-accent-glow)}
.run-btn:active{transform:translateY(0);filter:brightness(.97)}
.run-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.mobile-menu-btn{display:none;width:32px;height:32px;background:transparent;border:none;border-radius:var(--r-sm);color:var(--c-text-2);align-items:center;justify-content:center;flex-shrink:0;transition:background var(--trans),color var(--trans)}
.mobile-menu-btn svg{width:20px;height:20px}
.mobile-menu-btn:hover{background:var(--c-hover);color:var(--c-text-1)}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:298;backdrop-filter:blur(2px)}
.sidebar-overlay.visible{display:block}

/* ── APP BODY ── */
.app-body{flex:1;display:flex;overflow:hidden;height:calc(100vh - var(--titlebar-h) - var(--statusbar-h))}

/* ── ACTIVITY BAR ── */
.activity-bar{width:var(--actbar-w);background:var(--c-surface);border-right:1px solid var(--c-border);display:flex;flex-direction:column;justify-content:space-between;padding:8px 0;flex-shrink:0;z-index:10}
.activity-top,.activity-bottom{display:flex;flex-direction:column;align-items:center;gap:2px}
.act-btn{width:38px;height:38px;background:transparent;border:none;border-radius:var(--r);color:var(--c-text-3);display:flex;align-items:center;justify-content:center;transition:color var(--trans),background var(--trans);position:relative}
.act-btn svg{width:18px;height:18px}
.act-btn:hover{color:var(--c-text-1);background:var(--c-hover)}
.act-btn.active{color:var(--c-accent);background:var(--c-accent-dim)}
.act-btn.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2.5px;height:20px;background:var(--c-accent);border-radius:0 3px 3px 0}

/* ── SIDE PANEL ── */
.side-panel{width:var(--sidepanel-w);background:var(--c-surface);border-right:1px solid var(--c-border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;z-index:299;transition:transform .28s cubic-bezier(.4,0,.2,1)}

/* ── MOBILE NAV STRIP — lives inside the drawer, hidden on desktop ── */
.mobile-nav-strip{
  display:none; /* shown only via media query */
  align-items:stretch;
  background:var(--c-raised);
  border-bottom:1px solid var(--c-border);
  flex-shrink:0;
}
.mnav-btn{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:8px 4px;
  background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--c-text-3);font-size:9px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;
  transition:color var(--trans),background var(--trans),border-color var(--trans);
}
.mnav-btn svg{width:16px;height:16px}
.mnav-btn:hover{color:var(--c-text-1);background:var(--c-hover)}
.mnav-btn.active{color:var(--c-accent);border-bottom-color:var(--c-accent);background:var(--c-accent-dim)}

.panel-view{display:none;flex-direction:column;height:100%;overflow:hidden}
.panel-view.active{display:flex}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;flex-shrink:0}
.panel-title{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-3)}
.panel-icon-btn{width:22px;height:22px;background:transparent;border:none;border-radius:var(--r-sm);color:var(--c-text-3);display:flex;align-items:center;justify-content:center;transition:color var(--trans),background var(--trans)}
.panel-icon-btn svg{width:14px;height:14px}
.panel-icon-btn:hover{color:var(--c-text-1);background:var(--c-hover)}
.panel-section-label{padding:2px 14px 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-4)}
.file-tree{overflow-y:auto;padding:0 6px}
.file-item{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--r-sm);font-size:12.5px;color:var(--c-text-2);cursor:pointer;transition:background var(--trans),color var(--trans)}
.file-item svg{width:14px;height:14px;color:var(--c-text-3);flex-shrink:0}
.file-item span:first-of-type{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item:hover{background:var(--c-hover);color:var(--c-text-1)}
.file-item.active{background:var(--c-accent-dim);color:var(--c-accent)}
.file-item.active svg{color:var(--c-accent)}
.file-lang-tag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;background:var(--c-overlay);color:var(--c-text-3)}
.tool-btns{padding:0 8px;display:flex;flex-direction:column;gap:3px}
.tool-btn{display:flex;align-items:center;gap:8px;padding:7px 10px;background:transparent;border:none;border-radius:var(--r-sm);color:var(--c-text-2);font-size:12px;text-align:left;width:100%;transition:background var(--trans),color var(--trans)}
.tool-btn svg{width:13px;height:13px;flex-shrink:0}
.tool-btn:hover{background:var(--c-hover);color:var(--c-text-1)}
.search-wrap{padding:0 10px;overflow-y:auto;flex:1}
.search-input-wrap{display:flex;align-items:center;gap:8px;background:var(--c-raised);border:1px solid var(--c-border);border-radius:var(--r);padding:6px 10px;transition:border-color var(--trans)}
.search-input-wrap:focus-within{border-color:var(--c-accent)}
.search-input-wrap svg{width:13px;height:13px;color:var(--c-text-3);flex-shrink:0}
.search-input-wrap input{flex:1;background:transparent;border:none;outline:none;color:var(--c-text-1);font-size:12px;font-family:var(--font-mono)}
.search-input-wrap input::placeholder{color:var(--c-text-3)}
.search-results{margin-top:10px;font-size:11.5px;color:var(--c-text-2)}
.examples-list{overflow-y:auto;padding:4px 8px 8px;flex:1;display:flex;flex-direction:column;gap:4px}
.ex-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;transition:background var(--trans),border-color var(--trans)}
.ex-item:hover{background:var(--c-hover);border-color:var(--c-border)}
.ex-item-icon{width:28px;height:28px;border-radius:var(--r-sm);background:var(--c-accent-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ex-item-icon svg{width:14px;height:14px;color:var(--c-accent)}
.ex-item-body{flex:1;overflow:hidden}
.ex-item-title{font-size:12.5px;font-weight:500;color:var(--c-text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-item-desc{font-size:10.5px;color:var(--c-text-3);margin-top:1px}
.ex-badge{font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:10px;background:var(--c-accent-dim);color:var(--c-accent);flex-shrink:0}
.docs-scroll{overflow-y:auto;flex:1;padding:0 10px 12px}
.docs-group{margin-bottom:14px}
.docs-group-label{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-text-4);padding:8px 4px 5px;border-top:1px solid var(--c-border-soft)}
.docs-table{width:100%;border-collapse:collapse;font-size:11.5px}
.docs-table tr{border-bottom:1px solid var(--c-border-soft)}
.docs-table tr:hover td{background:var(--c-hover)}
.docs-table td{padding:5px 6px;color:var(--c-text-2)}
.docs-table td:last-child{color:var(--c-text-3)}
.docs-table code{font-family:var(--font-mono);color:var(--syn-builtin);background:var(--c-overlay);padding:1px 5px;border-radius:3px;font-size:11px}
.settings-scroll{overflow-y:auto;flex:1;padding:0 10px 12px}
.theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:4px 2px}
.theme-tile{background:transparent;border:1.5px solid var(--c-border);border-radius:var(--r);padding:8px 6px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center;font-size:11px;color:var(--c-text-2);transition:border-color var(--trans),color var(--trans)}
.theme-tile:hover{border-color:var(--c-accent);color:var(--c-text-1)}
.theme-tile.active{border-color:var(--c-accent);color:var(--c-accent);background:var(--c-accent-dim)}
.theme-preview{width:100%;height:28px;border-radius:4px}
.tp-dark{background:linear-gradient(135deg,#12141a 50%,#ff7518 50%)}
.tp-light{background:linear-gradient(135deg,#f4f5f9 50%,#ff7518 50%)}
.tp-saffron{background:linear-gradient(135deg,#120800 50%,#ff9c2e 50%)}
.tp-midnight{background:linear-gradient(135deg,#090b10 50%,#64ffda 50%)}
.font-size-row{display:flex;align-items:center;gap:10px;padding:4px 2px}
.font-size-row .tool-btn{flex:1;justify-content:center;border:1px solid var(--c-border);border-radius:var(--r)}
#fsValue{font-family:var(--font-mono);font-size:12px;color:var(--c-text-2);min-width:36px;text-align:center}

/* ── RESIZE HANDLE ── */
.resize-handle{width:4px;cursor:col-resize;background:transparent;transition:background var(--trans);flex-shrink:0}
.resize-handle:hover,.resize-handle.dragging{background:var(--c-accent)}

/* ── EDITOR COLUMN ── */
.editor-column{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ── TAB BAR ── */
.tab-bar{height:var(--tabbar-h);background:var(--c-bg);border-bottom:1px solid var(--c-border);display:flex;align-items:stretch;flex-shrink:0;overflow:hidden}
.editor-tabs{display:flex;align-items:stretch;flex:1;overflow-x:auto;overflow-y:hidden}
.editor-tabs::-webkit-scrollbar{height:2px}
.editor-tabs::-webkit-scrollbar-thumb{background:var(--c-border)}
.editor-tab{display:flex;align-items:center;gap:7px;padding:0 12px 0 14px;min-width:100px;max-width:200px;background:transparent;border:none;border-right:1px solid var(--c-border);color:var(--c-text-3);font-size:12.5px;cursor:pointer;position:relative;transition:background var(--trans),color var(--trans);white-space:nowrap;user-select:none}
.editor-tab svg:first-child{width:13px;height:13px;flex-shrink:0}
.editor-tab span{flex:1;overflow:hidden;text-overflow:ellipsis}
.editor-tab:hover{background:var(--c-raised);color:var(--c-text-2)}
.editor-tab.active{background:var(--c-surface);color:var(--c-text-1);border-bottom:2px solid var(--c-accent)}
.editor-tab.active::after{content:'';position:absolute;inset:0;border-top:1px solid var(--c-accent);opacity:.3;pointer-events:none}
.tab-close{width:16px;height:16px;background:transparent;border:none;border-radius:3px;color:inherit;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--trans),background var(--trans);flex-shrink:0}
.tab-close svg{width:10px;height:10px}
.editor-tab:hover .tab-close{opacity:.5}
.tab-close:hover{opacity:1!important;background:var(--c-overlay)}
.tab-bar-actions{display:flex;align-items:center;padding:0 6px}

/* ── EDITOR PANE ── */
.editor-pane{flex:1;display:flex;overflow:hidden;background:var(--c-bg);min-height:0}
.gutter{width:48px;flex-shrink:0;padding:16px 10px 16px 0;text-align:right;font-family:var(--font-mono);font-size:12px;line-height:1.72;color:var(--c-text-4);background:var(--c-bg);border-right:1px solid var(--c-border-soft);overflow:hidden;white-space:pre;user-select:none}

/* ═══════════════════════════════════════════════════
   EDITOR OVERLAY — CSS Grid stacks pre + textarea
   ═══════════════════════════════════════════════════
   KEY FIX: textarea has height:100% (not min-height)
   so it IS constrained to the grid cell and DOES scroll.
   min-height:100% makes it grow to content → no scroll.
   ═══════════════════════════════════════════════════ */
.code-wrap{
  flex:1;display:grid;overflow:hidden;background:var(--c-bg);min-width:0;min-height:0;
}

/* Shared typography — must be identical on both */
#highlightLayer,
#codeEditor {
  grid-area: 1 / 1;
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.72;
  white-space: pre;
  tab-size: 4;
  letter-spacing: .015em;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: none;
  outline: none;
   overflow: auto;
}

/* Highlight pre — behind textarea, scrolled by JS */
#highlightLayer{
  color:var(--c-text-1);
  background:transparent;
  pointer-events:none;
  overflow:hidden;       /* JS sets scrollTop/Left to mirror textarea */
  z-index:0;
  word-wrap:normal;
  min-height:100%;       /* pre CAN grow taller than its cell */
  align-self:start;
  
}
#highlightLayer .hl-kw     {color:var(--syn-kw);font-weight:500}
#highlightLayer .hl-fn     {color:var(--syn-fn);font-style:italic}
#highlightLayer .hl-builtin{color:var(--syn-builtin)}
#highlightLayer .hl-str    {color:var(--syn-str)}
#highlightLayer .hl-num    {color:var(--syn-num)}
#highlightLayer .hl-cmt    {color:var(--syn-cmt);font-style:italic}
#highlightLayer .hl-op     {color:var(--syn-op)}
#highlightLayer .hl-bool   {color:var(--syn-bool);font-weight:500}
#highlightLayer .hl-self   {color:var(--syn-self)}
#highlightLayer .hl-class  {color:var(--c-yellow);font-weight:600}
#highlightLayer .hl-paren  {color:var(--c-text-2)}

/* Textarea — on top, transparent text, SCROLLS ITSELF */
#codeEditor{
  color:transparent;
  caret-color:var(--c-accent);
  background:transparent;
  resize:none;
  word-wrap:normal;
  overflow:auto;         /* textarea manages its own scroll */
  height:100%;           /* ← CRITICAL: constrained to grid cell → enables scroll */
  z-index:1;
}
#codeEditor::placeholder{color:var(--c-text-4);font-style:italic}
#codeEditor::selection{background:rgba(255,117,24,.22)}
#codeEditor::-webkit-scrollbar{width:10px;height:10px}
#codeEditor::-webkit-scrollbar-track{background:transparent}
#codeEditor::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:5px;border:2px solid var(--c-bg)}
#codeEditor::-webkit-scrollbar-thumb:hover{background:var(--c-text-4)}

/* ── OUTPUT PANE ── */
.output-pane{height:var(--output-h);display:flex;flex-direction:column;background:var(--c-surface);border-top:1px solid var(--c-border);flex-shrink:0;min-height:44px;max-height:70vh}
.output-drag{height:4px;cursor:row-resize;flex-shrink:0;background:transparent;transition:background var(--trans)}
.output-drag:hover,.output-drag.dragging{background:var(--c-accent)}
.output-titlebar{display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 0;border-bottom:1px solid var(--c-border);flex-shrink:0}
.output-tabs{display:flex}
.out-tab{display:flex;align-items:center;gap:6px;padding:8px 14px;background:transparent;border:none;font-size:12px;font-weight:500;color:var(--c-text-3);cursor:pointer;border-bottom:2px solid transparent;transition:color var(--trans),border-color var(--trans)}
.out-tab svg{width:13px;height:13px}
.out-tab:hover{color:var(--c-text-2)}
.out-tab.active{color:var(--c-text-1);border-bottom-color:var(--c-accent)}
.output-actions{display:flex;align-items:center;gap:2px}
.run-status{display:flex;align-items:center;gap:6px;padding:0 10px;font-size:11.5px;color:var(--c-text-3)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--c-text-4);transition:background .3s}
.status-dot.running{background:var(--c-accent);animation:blink 1s infinite}
.status-dot.success{background:var(--c-green)}
.status-dot.error{background:var(--c-red)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.out-view{display:none;flex:1;flex-direction:column;overflow:hidden}
.out-view.active{display:flex}
.output-body{flex:1;overflow-y:auto;padding:10px 16px;font-family:var(--font-mono);font-size:12.5px;line-height:1.65}
.output-body::-webkit-scrollbar{width:8px}
.output-body::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}
.output-welcome{display:flex;align-items:center;justify-content:center;height:100%;gap:10px;color:var(--c-text-3);flex-wrap:wrap;text-align:center;padding:8px}
.welcome-icon-svg{width:18px;height:18px}
.output-welcome p{font-size:12.5px}
.output-welcome kbd{font-size:10px;font-family:var(--font-mono);background:var(--c-raised);border:1px solid var(--c-border);border-radius:3px;padding:1px 5px;color:var(--c-text-2)}
.output-line{margin-bottom:1px;color:var(--c-text-1);white-space:pre-wrap;word-break:break-word}
.output-line.err{color:var(--c-red);padding:6px 10px;background:rgba(248,113,113,.08);border-left:2px solid var(--c-red);border-radius:0 4px 4px 0;margin:4px 0}
.output-line.ok{color:var(--c-green);font-size:11.5px;margin-top:6px;opacity:.75}
.output-line.echo{color:var(--c-yellow);font-style:italic}

.inline-input-row{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--c-raised);border-top:1px solid var(--c-accent);flex-shrink:0}
.inline-input-row svg{width:14px;height:14px;color:var(--c-accent);flex-shrink:0}
.inline-prompt{font-family:var(--font-mono);font-size:12px;color:var(--c-accent);white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis}
.inline-input-box{flex:1;background:var(--c-overlay);border:1px solid var(--c-border);border-radius:var(--r-sm);padding:5px 9px;color:var(--c-text-1);font-family:var(--font-mono);font-size:12px;outline:none;transition:border-color var(--trans)}
.inline-input-box:focus{border-color:var(--c-accent)}
.inline-input-box::placeholder{color:var(--c-text-4)}
.inline-send-btn{width:28px;height:28px;background:var(--c-accent);border:none;border-radius:var(--r-sm);color:white;display:flex;align-items:center;justify-content:center;transition:filter var(--trans);flex-shrink:0}
.inline-send-btn svg{width:14px;height:14px}
.inline-send-btn:hover{filter:brightness(1.1)}

/* ── STATUS BAR ── */
.statusbar{height:var(--statusbar-h);background:var(--c-accent);display:flex;align-items:center;justify-content:space-between;padding:0 12px;flex-shrink:0;color:rgba(255,255,255,.9);overflow:hidden}
.sb-left,.sb-right{display:flex;align-items:center;gap:1px;flex-shrink:0}
.sb-item{display:flex;align-items:center;gap:5px;padding:0 7px;height:100%;font-size:11.5px;font-weight:500;color:rgba(255,255,255,.85);border-radius:2px;transition:background var(--trans),color var(--trans);white-space:nowrap}
.sb-item svg{width:12px;height:12px}
.sb-item:hover{background:rgba(0,0,0,.15);color:white}
.sb-lang{background:rgba(0,0,0,.15);border-radius:3px}

/* ── LOADING ── */
.loading-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;gap:14px;flex-direction:column}
.loading-overlay.visible{display:flex}
.spinner svg{width:40px;height:40px;color:var(--c-accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay span{font-size:13px;color:var(--c-text-2)}

::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-4)}

/* ── MODAL ── */
.mc-modal-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.mc-modal-overlay.open{opacity:1;pointer-events:all}
.mc-modal{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--c-border-soft),0 24px 60px rgba(0,0,0,.5);width:380px;max-width:100%;overflow:hidden;transform:scale(.94) translateY(8px);transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.mc-modal-overlay.open .mc-modal{transform:scale(1) translateY(0)}
.mc-modal-stripe{height:3px}
.mc-modal--alert .mc-modal-stripe{background:var(--c-accent)}
.mc-modal--confirm .mc-modal-stripe{background:var(--c-yellow)}
.mc-modal--prompt .mc-modal-stripe{background:var(--c-blue)}
.mc-modal--error .mc-modal-stripe{background:var(--c-red)}
.mc-modal-header{display:flex;align-items:center;gap:10px;padding:18px 20px 0}
.mc-modal-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mc-modal-icon svg{width:18px;height:18px}
.mc-modal--alert .mc-modal-icon{background:var(--c-accent-dim);color:var(--c-accent)}
.mc-modal--confirm .mc-modal-icon{background:rgba(251,191,36,.12);color:var(--c-yellow)}
.mc-modal--prompt .mc-modal-icon{background:rgba(96,165,250,.12);color:var(--c-blue)}
.mc-modal--error .mc-modal-icon{background:rgba(248,113,113,.12);color:var(--c-red)}
.mc-modal-title{font-size:14px;font-weight:700;color:var(--c-text-1)}
.mc-modal--alert .mc-modal-title{color:var(--c-accent-2)}
.mc-modal--confirm .mc-modal-title{color:var(--c-yellow)}
.mc-modal--prompt .mc-modal-title{color:var(--c-blue)}
.mc-modal--error .mc-modal-title{color:var(--c-red)}
.mc-modal-body{padding:14px 20px 20px}
.mc-modal-message{font-size:13px;line-height:1.6;color:var(--c-text-2)}
.mc-modal-input{margin-top:14px}
.mc-modal-input input{width:100%;background:var(--c-raised);border:1.5px solid var(--c-border);border-radius:var(--r);padding:8px 12px;color:var(--c-text-1);font-size:13px;font-family:var(--font-mono);outline:none;transition:border-color var(--trans)}
.mc-modal-input input:focus{border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(96,165,250,.12)}
.mc-modal-input input::placeholder{color:var(--c-text-4)}
.mc-modal-footer-divider{height:1px;background:var(--c-border-soft);margin:0 20px 14px}
.mc-modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:0 20px 18px;flex-wrap:wrap}
.mc-btn{display:inline-flex;align-items:center;padding:7px 18px;border-radius:var(--r);font-size:12.5px;font-weight:600;border:1.5px solid transparent;transition:filter var(--trans),transform var(--trans);cursor:pointer;font-family:var(--font-ui);min-height:34px}
.mc-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.mc-btn:active{transform:translateY(0);filter:brightness(.96)}
.mc-btn-cancel{background:var(--c-raised);border-color:var(--c-border);color:var(--c-text-2)}
.mc-btn-cancel:hover{background:var(--c-hover);color:var(--c-text-1);filter:none}
.mc-btn-ok-alert{background:var(--c-accent);color:white;box-shadow:0 2px 10px var(--c-accent-glow)}
.mc-btn-ok-confirm{background:var(--c-yellow);color:#1a1206}
.mc-btn-ok-prompt{background:var(--c-blue);color:#0c1830}
.mc-btn-ok-error{background:var(--c-red);color:white}

/* ── MOBILE BOTTOM BAR ── */
.mobile-bottom-bar{display:none;background:var(--c-surface);border-top:1px solid var(--c-border);padding:6px 10px;gap:8px;align-items:center;flex-shrink:0}
.mobile-bottom-bar .run-btn{flex:1;justify-content:center;height:40px;font-size:14px}
.mobile-bottom-bar .tb-icon-btn{width:40px;height:40px}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤900px
   ═══════════════════════════════════════════════════ */
@media(max-width:900px){
  :root{--sidepanel-w:200px}
  .breadcrumb{padding:4px 8px;font-size:11px}
  .titlebar-left,.titlebar-right{min-width:auto}
  .run-btn kbd{display:none}
  .gutter{width:38px;font-size:11px;padding:16px 6px 16px 0}
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤680px
   ═══════════════════════════════════════════════════ */
@media(max-width:680px){
  :root{--titlebar-h:48px;--tabbar-h:36px;--statusbar-h:22px;--output-h:170px}

  .titlebar{padding:0 8px;gap:4px}
  .titlebar-center{display:none}
  .titlebar-left,.titlebar-right{min-width:auto}
  
  .titlebar-right{gap:4px;justify-content:flex-end}
  .app-name-sub{display:none}
  .tb-divider{display:none}
.titlebar .run-btn span,
.titlebar .run-btn kbd{display:none}        /* hide text+kbd, keep icon */
.titlebar .run-btn{
  width:32px;height:32px;padding:0;
  justify-content:center;
  border-radius:var(--r-sm);
  box-shadow:none;
}
.mobile-bottom-bar .run-btn{display:none}   /* remove from bottom bar */             /* moved to bottom bar */
  .mobile-menu-btn{display:flex}

  /* Desktop sidebar/actbar hidden */
  .activity-bar{display:none}
  .resize-handle{display:none}

  /* ── Off-canvas drawer ── */
  .side-panel{
    position:fixed!important;
    top:0;left:0;bottom:0;
    width:min(300px,88vw)!important;
    transform:translateX(-110%);
    border-right:1px solid var(--c-border);
    box-shadow:6px 0 30px rgba(0,0,0,.45);
    z-index:300;
  }
  .side-panel.mobile-open{transform:translateX(0)}

  /* Show the in-drawer nav strip */
  .mobile-nav-strip{display:flex}

  /* Tab bar */
  .editor-tab{min-width:80px;font-size:11.5px;padding:0 8px 0 10px}
  .tab-bar-actions{display:none}
  .tab-close{opacity:.55}

  /* Gutter */
  .gutter{width:30px;font-size:10px;padding:12px 4px 12px 0}

  /* Editor fonts */
  #codeEditor,#highlightLayer{font-size:12px;padding:12px 12px}

  /* Output */
  .out-tab{padding:6px 10px;font-size:11px}
  .output-body{font-size:11.5px;padding:8px 10px}
  .run-status{display:none}

  /* Mobile bottom bar */
  .mobile-bottom-bar{display:flex}

  /* Status bar */
  .statusbar{padding:0 6px}
  #lineCount,#sbErrors{display:none}
  .sb-item{padding:0 4px;font-size:10.5px}

  /* Inline input */
  .inline-input-row{padding:6px 8px;gap:6px}
  .inline-prompt{max-width:28%;font-size:11px}
  .inline-input-box{font-size:13px;padding:7px 8px}
  .inline-send-btn{width:36px;height:36px}
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — SMALL PHONE ≤420px
   ═══════════════════════════════════════════════════ */
@media(max-width:420px){
  .app-name-main{font-size:13px}
  .logo-mark{width:24px;height:24px}
  #codeEditor,#highlightLayer{font-size:11.5px;padding:10px}
  .gutter{width:26px;font-size:9.5px;padding:10px 3px 10px 0}
  :root{--output-h:140px}
  #cursorPos{display:none}
}

/* ── Touch: larger tap targets ── */
@media(hover:none)and(pointer:coarse){
  .tab-close{opacity:.6}
  .act-btn{width:44px;height:44px}
  .tool-btn{padding:10px 10px;min-height:40px}
  .file-item{padding:10px 8px}
  .ex-item{padding:12px 10px}
  .inline-send-btn{width:40px;height:40px}
  .out-tab{padding:10px 12px}
  .mnav-btn{padding:10px 4px}
}
/* ───────── CODE EDITOR FIX ───────── */

/* Wrapper */
.code-wrap {
  position: relative;
  height: 100%;
}

/* BOTH must be identical */
#codeEditor,
#highlightLayer {
  width: 100%;
  height: 100%;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Highlight layer (background text) */
#highlightLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden; /* important */
}

/* Textarea (actual typing layer) */


/* Optional: smooth scroll */
#codeEditor {
  scroll-behavior: smooth;
}