/* layout.css - Page structure: top bar, activity bar, side panel, tabs, editor/output split and the bottom bar (with the DragOn Studio menu). */

/* ══════════════════════════════════════
   TOPBAR — green brand bar, MINIMAL
   Only logo + Run + Settings + Help + Profile
══════════════════════════════════════ */
.topbar{
  background:var(--brand);
  height:72px;display:flex;align-items:center;
  padding:0 18px;gap:12px;flex-shrink:0;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo img{height:62px;width:auto;display:block}

.tb-spacer{flex:1}

.tb-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ══════════════════════════════════════
   MAIN APP LAYOUT — sidebar + workspace
══════════════════════════════════════ */
.app-body{display:flex;flex:1;overflow:hidden;min-height:0}

/* ── LEFT ACTIVITY BAR (always visible, icons only) ── */
.activity-bar{
  width:54px;flex-shrink:0;background:var(--panel2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;
  padding:8px 0;gap:4px;
}
.act-btn{
  width:42px;height:42px;border-radius:8px;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:17px;transition:all .15s;
  position:relative;
}
.act-btn:hover{background:var(--border);color:var(--text)}
.act-btn.active{background:var(--brand-light);color:var(--brand-dk)}
.act-btn.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--brand-dk);border-radius:0 3px 3px 0;
}
.act-btn .badge{
  position:absolute;top:5px;right:5px;
  background:var(--brand-dk);color:#FFF;font-size:8px;font-weight:700;
  padding:1px 4px;border-radius:8px;line-height:1;
}
.act-spacer{flex:1}

/* tooltip on activity buttons */
.act-btn[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  background:#1E1E1E;color:#FFF;font-size:11px;font-weight:500;
  padding:4px 9px;border-radius:5px;white-space:nowrap;z-index:10000;
  pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* ── SIDE PANEL (collapsible, holds Examples, History, etc.) ── */
.side-panel{
  width:0;flex-shrink:0;background:var(--panel);
  border-right:1px solid var(--border);
  overflow:hidden;transition:width .22s ease;
  display:flex;flex-direction:column;
}
.side-panel.open{width:280px}
.side-inner{width:280px;height:100%;display:flex;flex-direction:column;overflow:hidden}
.side-head{
  padding:14px 16px 10px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;border-bottom:1px solid var(--border);
}
.side-title{
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
  display:flex;align-items:center;gap:7px;
}
.side-title i{color:var(--brand-dk);font-size:12px}
.side-close{
  background:none;border:none;color:var(--muted);cursor:pointer;
  width:22px;height:22px;border-radius:5px;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.side-close:hover{background:var(--border);color:var(--text)}
.side-body{flex:1;overflow-y:auto;padding:10px 12px}
.side-body::-webkit-scrollbar{width:4px}
.side-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* Generic side-panel list items */
.side-grp{
  font-size:9.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
  padding:10px 6px 5px;
}
.side-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;font-size:13px;color:var(--text);
  background:none;border:none;width:100%;text-align:left;
  font-family:inherit;cursor:pointer;border-radius:6px;
  transition:background .12s;
}
.side-item:hover{background:var(--brand-light);color:var(--brand-dk)}
.side-item .ex-ico{font-size:14px;width:20px;text-align:center;flex-shrink:0}

/* ── WORKSPACE (tabs + editor + output) ── */
.workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* TAB BAR */
.tab-bar{
  background:var(--panel2);border-bottom:1px solid var(--border);
  padding:0 8px;display:flex;align-items:center;gap:2px;
  height:36px;flex-shrink:0;overflow-x:auto;
}
.tab-bar::-webkit-scrollbar{height:2px}
.tab-bar::-webkit-scrollbar-thumb{background:var(--border2)}
.tab{
  display:flex;align-items:center;gap:6px;padding:6px 14px;
  font-size:12px;color:var(--text2);
  cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;
  white-space:nowrap;flex-shrink:0;font-weight:500;
  height:36px;
}
.tab:hover{color:var(--text);background:var(--panel)}
.tab.active{color:var(--brand-dk);border-bottom-color:var(--brand-dk);background:var(--bg);font-weight:600}
.tc{opacity:0;font-size:9px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all .1s;background:none;border:none;cursor:pointer;color:inherit;padding:0;margin-left:2px}
.tab:hover .tc,.tab.active .tc{opacity:.55}
.tc:hover{opacity:1!important;background:rgba(0,0,0,.12)!important}
.tab-add{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:var(--muted);cursor:pointer;font-size:16px;transition:all .15s;flex-shrink:0;user-select:none}
.tab-add:hover{color:var(--brand-dk);background:var(--border)}

/* MAIN SPLIT (editor | output) */
.main{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow:hidden;min-height:0}
.editor-panel{display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden;min-height:0}
.out-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.phdr{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--panel2);border-bottom:1px solid var(--border);flex-shrink:0;height:34px}
.ptitle{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.ptitle i{color:var(--brand-dk);font-size:10px}
.pacts{display:flex;gap:4px;align-items:center}
.editor-wrap{flex:1;overflow:hidden;min-height:0;position:relative}

.pbtn{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 9px;background:transparent;border:1px solid transparent;
  border-radius:6px;color:var(--text2);font-size:11.5px;font-weight:500;
  cursor:pointer;transition:all .12s;white-space:nowrap;flex-shrink:0;font-family:inherit;
}
.pbtn:hover{background:var(--border);color:var(--text)}

/* BOTTOM STATUS BAR */
.btmbar{background:var(--brand-dk);color:#FFF;padding:4px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;font-size:10.5px;font-weight:500}
.btm-l{display:flex;align-items:center;gap:14px}
.btm-l span{display:flex;align-items:center;gap:4px;opacity:.95}
.btm-r{display:flex;align-items:center;gap:14px}
.btm-r span{display:flex;align-items:center;gap:4px}

/* status indicator in bottom bar — visible white pill on green with state dot */
.btm-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 11px 2px 9px;border-radius:100px;
  background:rgba(255,255,255,.95);color:var(--ink);
  font-weight:700;font-size:10.5px;letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.btm-status .sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#9CA3AF}
.btm-status .sdot.loading{background:#9CA3AF;animation:pu 1s ease-in-out infinite}
.btm-status .sdot.ready{background:#22C55E;box-shadow:0 0 5px rgba(34,197,94,.7)}
.btm-status .sdot.running{background:#F59E0B;animation:pu .6s ease-in-out infinite}
.btm-status .sdot.error{background:#EF4444;box-shadow:0 0 5px rgba(239,68,68,.6)}
.btm-status.state-running{background:#FEF3C7;color:#92400E}
.btm-status.state-error{background:#FEE2E2;color:#991B1B}
.btm-status.state-ready{color:#15803D}

/* Back button in bottom status bar */
.btm-back{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 13px;border-radius:100px;
  background:#FFF;color:var(--ink);text-decoration:none;
  font-size:11px;font-weight:700;
  transition:all .15s;
  border:1px solid #FFF;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.btm-back:hover{background:var(--ink);color:#FFF;border-color:var(--ink)}

/* DragOn Studio menu (bottom bar) */
.studio-wrap{position:relative}
button.btm-back{cursor:pointer;font-family:inherit}
.studio-menu{position:absolute;bottom:calc(100% + 8px);right:0;background:#FFF;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.22);min-width:190px;padding:6px 0;z-index:9999;display:none}
.studio-menu.open{display:block}
.studio-item{display:flex;align-items:center;gap:9px;padding:9px 16px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:600;transition:background .12s}
.studio-item i{color:var(--brand-dk);width:16px;text-align:center}
.studio-item:hover{background:var(--brand-light);color:var(--brand-dk)}