/* ============================================================
   Arte console UI kit — component styles
   (loads after ../../colors_and_type.css)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* The shell must fill the viewport and never scroll at the document level —
   only the frosted-glass panel inside a view scrolls. 100vh/100vw include the
   scrollbar gutter, so any inner overflow can cascade into an outer scrollbar;
   pinning html/body to 100%+hidden and sizing .app off that (not vh/vw) avoids it. */
/* #root needs an explicit height too — a percentage height only resolves
   against a parent with a *definite* height, and without this, #root
   defaults to auto (shrink-to-fit), which then makes .app's height:100%
   resolve to auto as well, letting .app collapse to its content's height
   instead of filling the viewport. */
html, body, #root { height: 100%; width: 100%; overflow: hidden; }
body { font-family: var(--font-ui); color: var(--fg); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8d8dd; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c2c2cb; background-clip: content-box; }

/* ---- App shell ----
   A soft full-bleed vignette sits behind everything; the nav bar floats
   directly on it, and each view's content sits in its own translucent
   rounded panel inset by --shell-inset — see Figma's "v4 30/8" frames,
   where nav/content/composer are each separately inset from the viewport
   edge rather than one flush full-bleed console.
   --shell-inset governs the sides/bottom (panel-to-viewport-sides, and
   the bottom composer row's own inset via --shell-gap) and is untouched
   by the panel's top edge. --shell-top-margin is the separate, smaller
   pair for the top: top-of-navbar-to-viewport-top (.app's padding-top)
   and top-of-panel-to-bottom-of-navbar (.app's gap) — shrinking it moves
   the nav bar up and lets the panel grow upward into the freed space,
   without touching the sides or bottom. */
:root { --shell-inset: 8px; --shell-gap: 8px; --shell-top-margin: 4px;
  --bottom-row-h: 40px; --shell-avatar-size: 34px; }
.app { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden;
  background: url("/workbench/static/assets/bg-vignette.jpg") center / cover no-repeat fixed, #f5f6fb;
  padding: var(--shell-top-margin) var(--shell-inset) var(--shell-inset) var(--shell-inset);
  gap: var(--shell-top-margin); }
.console { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: transparent; margin: 0; }

/* ---- Content area (generic; a couple of Settings dialogs still use these) ---- */
.content { flex: 1; display: flex; min-height: 0; }
.main { flex: 1; overflow-y: auto; padding: 20px; min-width: 0; }
.search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--border-strong);
          border-radius: 6px; background: #fff; min-width: 240px; color: var(--fg-subtle); font-size: 14px; }
.search input { border: none; outline: none; font-size: 14px; font-family: inherit; color: var(--fg); width: 100%; background: none; }
.spacer { flex: 1; }

/* ---- Tags / badges (Knowledge Base tool rows, integration status) ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-muted); }

/* ---- Buttons ---- */
.btn { font-size: 14px; line-height: 20px; border-radius: 4px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; transition: .12s; }
.btn.primary { background: var(--purple-500); color: #fff; }
.btn.primary:hover { background: var(--purple-700); }
.btn.primary:active { background: var(--purple-900); }
.btn.secondary { background: #fff; border: 1px solid var(--border-strong); color: var(--fg-muted); }
.btn.secondary:hover { border-color: var(--purple-400); color: var(--purple-500); background: #f6f8ff; }
.btn.done { background: var(--good-bg); color: var(--good-2); }

/* ---- Modal ---- */
.scrim { position: fixed; inset: 0; background: rgba(20,18,40,.32); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { width: 720px; max-width: 92vw; background: #fff; border-radius: 12px; box-shadow: var(--shadow-pop); overflow: hidden; }
.modal-hd { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.modal-hd b { font-size: 15px; font-weight: 600; color: var(--fg-strong); }
.modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.modal-left { padding: 18px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--border); }
.modal-left .field .k { font-size: 12px; color: var(--fg-muted); margin-bottom: 5px; }
.modal-left .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--purple-active-bg); color: var(--purple-600); font-size: 13px; padding: 3px 9px; border-radius: 6px; }
.modal-left input { width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; padding: 7px 10px; font-size: 14px; font-family: inherit; outline: none; }
.modal-left input:focus { border-color: var(--purple-400); }
.code { background: #14131f; color: #d7d5e6; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; padding: 16px; min-height: 100%; }
.code .key { color: #b3aef0; } .code .str { color: #8fd6a8; }
.modal-foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

.hidden { display: none !important; }