/* ==========================================================================
   Application shell: frame, menu bar, main toolbar, navigation bar,
   tool-window stripes, tool windows, splitters, status bar, scrollbars.
   ========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
::selection { background: var(--bg-sel); }

/* ---------------------------------------------------------------- scrollbars */
.sb, .tree, .tw-body, .list, .popup-list, .table-scroll, .settings-tree, .settings-pane {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 6px;
  min-height: 28px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------------------------------------------------------------- ide frame */
#ide {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg-app);
}
#ide.dragging, #ide.dragging * { cursor: inherit !important; user-select: none !important; }
#ide.col-resize, #ide.col-resize * { cursor: col-resize !important; }
#ide.row-resize, #ide.row-resize * { cursor: row-resize !important; }

/* ---------------------------------------------------------------- menu bar */
.menubar {
  height: var(--h-menubar);
  min-height: var(--h-menubar);
  display: flex;
  align-items: center;
  padding: 0 4px 0 6px;
  background: var(--bg-toolbar);
  border-bottom: 1px solid transparent;
  gap: 0;
  position: relative;
  z-index: 30;
}
.menubar .app-mark {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 2px; margin-right: 2px;
  font-weight: 600; letter-spacing: 0.2px; color: var(--fg-dim);
}
.menubar .app-mark svg { width: 15px; height: 15px; }
.menu-item {
  padding: 4px 9px;
  border-radius: var(--radius-s);
  color: var(--fg);
  white-space: nowrap;
  transition: background 80ms var(--ease);
}
.menu-item:hover, .menu-item.open { background: var(--bg-hover); }
.menu-item.open { background: var(--bg-pressed); }
.menubar-spacer { flex: 1; }

/* ---------------------------------------------------------------- main toolbar */
.toolbar {
  height: var(--h-toolbar);
  min-height: var(--h-toolbar);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  background: var(--bg-toolbar);
  position: relative;
  z-index: 25;
}
.tb-sep { width: 1px; height: 16px; background: var(--bd-soft); margin: 0 5px; flex: none; }
.tb-spacer { flex: 1; min-width: 4px; }

.tb-btn {
  height: 26px;
  min-width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  border: none;
  background: transparent;
  color: var(--fg);
  border-radius: var(--radius-m);
  cursor: default;
  transition: background 90ms var(--ease);
  white-space: nowrap;
  flex: none;
}
.tb-btn:hover:not(.disabled) { background: var(--bg-hover); }
.tb-btn:active:not(.disabled) { background: var(--bg-pressed); }
.tb-btn.disabled { opacity: 0.42; }
.tb-btn.on { background: var(--bg-pressed); }
.tb-btn svg { width: 16px; height: 16px; opacity: var(--icon-op); flex: none; }
.tb-btn.run svg { color: var(--run-green); opacity: 1; }
.tb-btn.stop svg { color: var(--stop-red); opacity: 1; }

.tb-project {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px; border-radius: var(--radius-m);
  background: transparent; font-weight: 500;
}
.tb-project:hover { background: var(--bg-hover); }
.tb-project .proj-badge {
  width: 18px; height: 18px; border-radius: var(--radius-s);
  display: grid; place-items: center;
  background: linear-gradient(135deg, #f97a12 0%, #b07bd8 48%, #21d789 100%);
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: -0.4px;
}
.tb-runcfg {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 6px 0 7px; border-radius: var(--radius-m);
  max-width: 230px;
}
.tb-runcfg:hover { background: var(--bg-hover); }
.tb-runcfg .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-runcfg .chev { opacity: 0.55; }

.tb-search {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px; border-radius: var(--radius-m);
  color: var(--fg-muted);
}
.tb-search:hover { background: var(--bg-hover); color: var(--fg); }
.tb-search kbd { font-size: 10px; }

kbd {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--fg-muted);
  background: transparent;
  padding: 0;
  letter-spacing: 0.2px;
}

/* ---------------------------------------------------------------- nav bar */
.navbar {
  height: var(--h-navbar);
  min-height: var(--h-navbar);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 0;
  background: var(--bg-app);
  overflow: hidden;
  position: relative;
  z-index: 22;
}
.nb-crumb {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 5px; border-radius: var(--radius-s);
  color: var(--fg-dim); white-space: nowrap;
  max-width: 220px;
}
.nb-crumb .label { overflow: hidden; text-overflow: ellipsis; }
.nb-crumb:hover, .nb-crumb.active { background: var(--bg-hover); color: var(--fg); }
.nb-crumb svg { width: 14px; height: 14px; flex: none; }
.nb-sep { opacity: 0.4; padding: 0 1px; display: flex; align-items: center; }
.nb-sep svg { width: 11px; height: 11px; }

/* ---------------------------------------------------------------- body */
.ide-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.ide-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.workarea { flex: 1; display: flex; min-height: 0; min-width: 0; }
.center-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ---------------------------------------------------------------- stripes */
.stripe {
  background: var(--bg-stripe);
  display: flex;
  flex: none;
  z-index: var(--z-toolwindow);
  position: relative;
}
.stripe-left, .stripe-right {
  width: var(--w-stripe);
  flex-direction: column;
  align-items: center;
  padding: 3px 0;
  gap: 1px;
}
.stripe-left { border-right: 1px solid var(--bd); }
.stripe-right { border-left: 1px solid var(--bd); }
.stripe-bottom {
  height: var(--h-stripe);
  flex-direction: row;
  align-items: center;
  padding: 0 3px;
  gap: 1px;
  border-top: 1px solid var(--bd);
}
.stripe-spacer { flex: 1; }

.stripe-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-dim);
  border-radius: var(--radius-s);
  white-space: nowrap;
  transition: background 90ms var(--ease), color 90ms var(--ease);
  position: relative;
  flex: none;
  font-size: var(--fs-ui-s);
}
.stripe-btn svg { width: 15px; height: 15px; opacity: var(--icon-op); flex: none; }
.stripe-left .stripe-btn, .stripe-right .stripe-btn {
  writing-mode: vertical-rl;
  padding: 6px 3px;
  min-height: 19px;
}
.stripe-left .stripe-btn svg, .stripe-right .stripe-btn svg { writing-mode: horizontal-tb; }
.stripe-right .stripe-btn { transform: rotate(180deg); }
.stripe-bottom .stripe-btn { padding: 3px 7px; min-width: 19px; }
.stripe-btn:hover { background: var(--bg-hover); color: var(--fg); }
.stripe-btn.active { background: var(--bg-pressed); color: var(--fg); }
.stripe-btn .badge {
  position: absolute; right: 1px; bottom: 1px;
  min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 7px; background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 600; line-height: 13px; text-align: center;
  writing-mode: horizontal-tb;
}
.stripe-left .stripe-btn .badge, .stripe-right .stripe-btn .badge { right: -2px; bottom: auto; top: 1px; }
.stripe-btn .label { writing-mode: inherit; }

/* ---------------------------------------------------------------- tool windows */
.tw {
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
/* The anchor slot hosts the active tool window's own panel element. */
.tw > .tw { flex: 1 1 auto; min-height: 0; min-width: 0; border: 0; }
.tw-left { border-right: 1px solid var(--bd); }
.tw-right { border-left: 1px solid var(--bd); }
.tw-bottom { border-top: 1px solid var(--bd); }
.tw.hidden { display: none; }

/* Tool windows slide in from their own edge, the way the real ones do. The
   panel box is already laid out at its final size, so only the contents move —
   no reflow, and the splitter never jumps. */
.tw.anim-open > * { animation: twSlide 145ms var(--ease) both; }
.tw-left.anim-open > * { --tw-from: -14px; --tw-axis: X; }
.tw-right.anim-open > * { --tw-from: 14px; --tw-axis: X; }
.tw-bottom.anim-open > * { --tw-from: 16px; --tw-axis: Y; }
@keyframes twSlide {
  from { opacity: 0; transform: translate(var(--tw-dx, 0), var(--tw-dy, 0)); }
  to { opacity: 1; transform: none; }
}
.tw-left.anim-open > *, .tw-right.anim-open > * { --tw-dx: var(--tw-from); --tw-dy: 0; }
.tw-bottom.anim-open > * { --tw-dx: 0; --tw-dy: var(--tw-from); }
.tw.anim-open { overflow: hidden; }

.tw-header {
  height: var(--h-tw-header);
  min-height: var(--h-tw-header);
  display: flex;
  align-items: center;
  padding: 0 3px 0 8px;
  gap: 3px;
  background: var(--bg-panel);
  border-bottom: 1px solid transparent;
  flex: none;
}
.tw-title {
  font-weight: 600;
  font-size: var(--fs-ui-s);
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tw-subtitle { color: var(--fg-muted); font-size: var(--fs-ui-s); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.tw-header .spacer { flex: 1; min-width: 6px; }
.tw-act {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-s);
  color: var(--fg-dim);
  transition: background 90ms var(--ease);
}
.tw-act:hover { background: var(--bg-hover); color: var(--fg); }
.tw-act.on { background: var(--bg-pressed); color: var(--fg); }
.tw-act svg { width: 15px; height: 15px; opacity: var(--icon-op); }
.tw-act.disabled { opacity: 0.35; pointer-events: none; }

.tw-tabs { display: flex; align-items: center; gap: 2px; padding: 0 4px; height: 24px; flex: none; border-bottom: 1px solid var(--bd-soft); }
.tw-tab { padding: 2px 8px; border-radius: var(--radius-s); color: var(--fg-dim); white-space: nowrap; }
.tw-tab:hover { background: var(--bg-hover); }
.tw-tab.active { background: var(--bg-pressed); color: var(--fg); }

.tw-body { flex: 1; overflow: auto; min-height: 0; position: relative; }
.tw-toolbar-left { display: flex; flex-direction: column; width: 26px; flex: none; padding: 3px 0; gap: 1px; align-items: center; border-right: 1px solid var(--bd-soft); }
.tw-split { display: flex; flex: 1; min-height: 0; }

.tw-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 8px; color: var(--fg-muted); text-align: center; padding: 20px;
}
.tw-empty svg { width: 28px; height: 28px; opacity: 0.35; }
.tw-empty .hint { font-size: var(--fs-ui-s); max-width: 260px; line-height: 1.6; }
.tw-empty .hint kbd { color: var(--fg-dim); }

/* ---------------------------------------------------------------- splitters */
.splitter { flex: none; position: relative; background: transparent; z-index: 5; }
.splitter.v { width: 1px; cursor: col-resize; background: var(--bd); }
.splitter.h { height: 1px; cursor: row-resize; background: var(--bd); }
.splitter::after { content: ''; position: absolute; inset: 0; }
.splitter.v::after { left: -3px; right: -3px; }
.splitter.h::after { top: -3px; bottom: -3px; }
.splitter:hover, .splitter.active { background: var(--accent); transition: background 120ms var(--ease) 90ms; }

/* ---------------------------------------------------------------- status bar */
.statusbar {
  height: var(--h-status);
  min-height: var(--h-status);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 4px 0 8px;
  background: var(--bg-toolbar);
  border-top: 1px solid var(--bd);
  font-size: var(--fs-ui-s);
  color: var(--fg-dim);
  position: relative;
  z-index: 30;
}
.sb-item {
  padding: 3px 7px;
  border-radius: var(--radius-s);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 90ms var(--ease);
}
.sb-item:hover { background: var(--bg-hover); color: var(--fg); }
.sb-item.static:hover { background: transparent; color: var(--fg-dim); }
.sb-item svg { width: 13px; height: 13px; opacity: var(--icon-op); }
.sb-spacer { flex: 1; min-width: 8px; }
.sb-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; padding-left: 2px; }
.sb-inspections { display: inline-flex; align-items: center; gap: 4px; }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; }
.sb-progress { display: inline-flex; align-items: center; gap: 6px; }
.sb-progress .bar { width: 88px; height: 4px; border-radius: 2px; background: var(--bd-soft); overflow: hidden; }
.sb-progress .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 140ms linear; }
.sb-progress.indet .bar > i { width: 34% !important; animation: indet 1.05s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
.sb-memory { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- generic bits */
.hidden { display: none !important; }
.icon { width: 16px; height: 16px; flex: none; opacity: var(--icon-op); }
.icon-14 { width: 14px; height: 14px; flex: none; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim { color: var(--fg-muted); }
.mono { font-family: var(--font-mono); }
.row { display: flex; align-items: center; }

.spinner {
  width: 13px; height: 13px; flex: none;
  border: 1.6px solid var(--bd-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* focus ring used by dialogs/inputs */
.focusable:focus-visible { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent); }

/* ---------------------------------------------------------------- responsive */
/* Nothing in the chrome may wrap: a wrapped toolbar changes every row height
   below it and the whole layout loses its density. */
.menubar, .toolbar, .navbar, .statusbar { flex-wrap: nowrap; }
.menubar > *, .toolbar > *, .statusbar > * { flex-shrink: 0; }
.tb-project .label, .tb-runcfg .label { white-space: nowrap; }
.tb-search { white-space: nowrap; }

body.narrow .menubar .menu-item.opt { display: none; }
body.narrow .tb-runcfg { max-width: 130px; }
body.narrow .tb-search kbd { display: none; }
body.narrow .tb-btn[data-action='RunWithCoverage'] { display: none; }

body.tiny .navbar { display: none; }
body.tiny .stripe-left .stripe-btn .label,
body.tiny .stripe-right .stripe-btn .label,
body.tiny .stripe-bottom .stripe-btn .label { display: none; }
body.tiny { --w-stripe: 22px; --h-stripe: 22px; --h-toolbar: 32px; }
body.tiny .sb-optional { display: none; }
body.tiny .tb-project .label { display: none; }
body.tiny .tb-search span:not(:first-child) { display: none; }
body.tiny .tb-runcfg { max-width: 92px; }
body.tiny .menubar .app-mark { display: none; }
body.tiny .menubar .menu-item { padding: 4px 6px; }
body.tiny .menubar .menu-item.dim { display: none; }
body.tiny .tabs { --h-tab: 28px; }
body.tiny .breadcrumbs { display: none; }
body.tiny .tb-btn[data-action='Undo'],
body.tiny .tb-btn[data-action='Redo'],
body.tiny .tb-btn[data-action='GitFetch'],
body.tiny .tb-btn[data-action='ToggleTheme'] { display: none; }

/* Below this the desktop layout genuinely stops working; collapse the menu bar
   into a single button rather than letting it wrap. */
.menubar .compact-menu { display: none; align-items: center; gap: 5px; }
@media (max-width: 620px) {
  .menubar .menu-item:not(.compact-menu) { display: none; }
  .menubar .compact-menu { display: flex; }
  .tw-left, .tw-right { max-width: 62vw; }
}