/* BarterPROMPT v3 — BarterFace design system (black + brand greens)
 * + the v2 chat-engine component styles (turns, thinking, tools, budget,
 *   banner, wall, handover chip, toasts, history rows).
 *
 * Bootstrap 5.3 is loaded from the jsDelivr CDN by the pages (family
 * baseline); this file is self-sufficient — the few Bootstrap utility /
 * form classes the pages use have fallbacks below, so the layout and the
 * dark theme hold even when the CDN is unreachable.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #000000;            /* page background (BarterFace token) */
  --bg-2: #0a0f0a;          /* card / raised surface */
  --bg-3: #101710;          /* inputs, wells */
  --fg: #ffffff;            /* body text (BarterFace token) */
  --muted: #9fb09f;
  --line: #006b02;          /* brand green (dark): borders, nav (BarterFace) */
  --accent: #00b503;        /* brand green (bright) (BarterFace) */
  --accent-2: #008c03;      /* hover green (BarterFace) */
  --ok: #00b503;
  --err: #e05b5b;           /* error state (kept — not a BarterFace token) */
  --warn: #d9a441;          /* amber budget state (kept) */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
}
/* Component rules set display (e.g. .banner flex) — keep the attribute honest. */
[hidden] { display: none !important; }

/* ------------------------------------------------- Bootstrap-less fallbacks
 * Only what the pages actually use; style.css loads after the CDN, so these
 * (and the theme overrides below) win when Bootstrap IS present. */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-md-row { flex-direction: row; }
@media (max-width: 767.98px) { .flex-md-row { flex-direction: column; } }
.flex-grow-1 { flex: 1 1 auto; }
.p-3 { padding: 1rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.gap-2 { gap: .5rem; }
.w-100 { width: 100%; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.lead { font-size: 1.05rem; color: var(--muted); }
.form-label { font-size: .95rem; color: var(--fg); }
@media (min-width: 768px) { .col-md-4 { flex: 0 0 40%; max-width: 40%; } .col-md-8 { flex: 1 1 0; } }

/* ----------------------------------------------------------------- frame */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
}

.page-header {
  background-color: var(--accent);   /* #00b503 — brand green (bright) */
  color: white;
  padding: 5px;
  min-height: 50px;
  display: flex;
  align-items: center;
}
/* Scales the title down on narrow screens instead of overflowing. */
.page-header h1 {
  margin: 0;
  font-size: clamp(1.25rem, 3vw + 0.9rem, 2.5rem);
}

.brand-icon {
  flex: 0 0 auto;
  width: clamp(30px, 5vw, 44px);
  height: auto;
  margin-right: 10px;
}

.content-row {
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: calc(100vh - 64px);
}
@media (min-width: 768px) {
  .content-row { flex-direction: row; }
}

/* ------------------------------------------------------------- sidebars */
.sidebar {
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (min-width: 768px) {
  .sidebar { flex: 0 0 240px; }
}

ul { list-style-type: none; padding: 0px; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.listitem {
  background-color: #006b02;
  border-radius: 10px;
  padding: 4px;
  margin: 2px;
  width: 100%;
  color: #fff;
}
.listitem:hover { background-color: #008c03; }

/* Active service in the primary nav. */
.listitem.is-active {
  background-color: var(--accent);
  font-weight: 600;
}

/* Separator row in sidebars. */
.listitem.divider {
  background-color: transparent;
  border-top: 2px solid #006b02;
  border-radius: 0;
  padding: 0;
}
.listitem.divider:hover { background-color: transparent; }

/* Linked nav items: the anchor fills the pill and inherits its color. */
.listitem .listlink {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Buttons inside a pill row (e.g. "Log out"). */
.listitem .listbtn {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: inherit;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

/* Group labels ("nodes", "conversations"). */
.side-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); padding: 8px 6px 4px;
}
.side-action { padding: 6px 2px; }
.side-foot { padding: 8px 6px 2px; margin-top: auto; }

/* Logged-in identity row (right sidebar). */
.user-chip {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px; margin: 2px;
  font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------ node/hist rows
 * The chat engine builds .node-item / .hist-item rows dynamically; give them
 * the same pill treatment as .listitem so both sidebars read as one system. */
.node-item, .hist-item {
  display: flex; align-items: center; gap: 8px;
  background-color: #006b02;
  border-radius: 10px;
  padding: 4px 8px;
  margin: 2px;
  cursor: pointer;
  color: #fff;
}
.node-item:hover, .hist-item:hover { background-color: #008c03; }
.node-item.offline .node-name { color: var(--muted); }
.node-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-item { position: relative; flex-wrap: wrap; }
.hist-item.active { background-color: var(--accent); }
.hist-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-meta { font-size: 11px; color: rgba(255,255,255,.75); width: 100%; padding-left: 2px; }
.hist-del {
  border: 0; background: transparent; color: rgba(255,255,255,.8); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 4px;
}
.hist-del:hover { color: var(--err); background: rgba(0,0,0,.25); }

/* #hist-list scrolls inside the (tall) right sidebar on desktop. */
#hist-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
@media (max-width: 767.98px) {
  #hist-list { max-height: 30vh; }
  #node-list { max-height: 30vh; overflow-y: auto; }
}

/* ----------------------------------------------------------------- main */
main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.post {
  border: 2px #006b02 solid;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-2);
}
.controls .ctrl-row { justify-content: flex-start; }

.ctrl { display: inline-flex; align-items: center; gap: 6px; }
.ctrl-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
}
.ctrl.check { gap: 7px; }

/* form controls (theme wins over Bootstrap's light defaults) */
.form-control, .form-select {
  background-color: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px; font-size: 13px;
  width: 100%;
}
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,181,3,.25);
  background-color: var(--bg-3); color: var(--fg);
}
.form-control::placeholder { color: var(--muted); }
.form-select:disabled, .form-control:disabled { opacity: .5; }
.sel { max-width: 220px; }

input { width: 100%; }
/* Checkboxes / radios keep their natural size. */
input[type="checkbox"], input[type="radio"] { width: auto; }
select { width: 100%; }
.login-card input { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
.listitem a, .listlink { color: inherit; }

/* ----------------------------------------------------------------- buttons
 * BarterFace brand buttons + the v2 .btn base the engine reuses. */
.btn {
  border: 1px solid var(--line); background: var(--bg-3); color: var(--fg);
  border-radius: 9px; padding: 8px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-brand {
  background-color: #00b503;
  border: 1px solid #00b503;
  color: white;
}
.btn-brand:hover, .btn-brand:focus {
  background-color: #008c03;
  border-color: #008c03;
  color: white;
}
.btn-brand:disabled { opacity: .45; cursor: not-allowed; }

.btn-brand-ghost {
  background-color: transparent;
  border: 1px solid #00b503;
  color: #00b503;
}
.btn-brand-ghost:hover, .btn-brand-ghost:focus {
  background-color: #008c03;
  border-color: #008c03;
  color: white;
}

/* Stop: destructive ghost. */
.btn-danger-ghost, .btn.danger {
  background: transparent;
  border: 1px solid var(--err);
  color: var(--err);
}
.btn-danger-ghost:hover, .btn.danger:hover { background: rgba(224,91,91,.12); }

/* Small inline buttons (banner / wall exits). */
.btn.tiny, .btn-tiny { padding: 4px 10px; font-size: 12px; border-radius: 7px; }

/* ------------------------------------------------------------- toggles */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.dot.off { background: var(--err); }

.tgl {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 18px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line);
  position: relative; cursor: pointer; flex: none;
  transition: background .15s, border-color .15s;
}
.tgl::after {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.tgl:checked { background: var(--accent-2); border-color: var(--accent); }
.tgl:checked::after { transform: translateX(16px); background: #fff; }
.tgl:focus { outline: none; }
.tgl:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.tgl-state { font-size: 11px; color: var(--muted); font-family: var(--mono); min-width: 20px; }

#cap-badges { display: inline-flex; gap: 6px; }
.badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--muted);
}

#mode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mode-btn {
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 14px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.mode-btn + .mode-btn { border-left: 1px solid var(--line); }
.mode-btn.is-active { background: var(--accent-2); color: #fff; }
.mode-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------- budget meter */
.budget {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px 3px 10px;
}
.budget-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.budget-track {
  width: 90px; height: 7px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); overflow: hidden;
}
.budget-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--accent); transition: width .25s, background .25s;
}
.budget-fill.amber { background: var(--warn); }
.budget-fill.wall { background: var(--err); }
.budget-text { font-size: 11px; color: var(--muted); font-family: var(--mono); min-width: 46px; }
@media (max-width: 720px) { .budget-track { width: 60px; } }

/* -------------------------------------------------------------- conversa */
#convo {
  flex: 1; overflow: auto; padding: 14px 4px;
  display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 767.98px) {
  #convo { height: 55vh; flex: none; }
}
.welcome { max-width: 560px; margin: auto; text-align: center; color: var(--fg); }
.welcome h1 { font-size: 26px; margin: 0 0 8px; }
.welcome p { color: var(--muted); }
.welcome code { font-family: var(--mono); background: var(--bg-3); padding: 1px 5px; border-radius: 5px; }

.conv { display: flex; flex-direction: column; gap: 14px; }
.turn {
  border: 2px #006b02 solid;   /* .post-family card border (BarterFace) */
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: 12px 14px;
}
.turn-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.turn-user { font-weight: 600; }
.turn-meta { font-size: 11px; color: var(--muted); font-family: var(--mono); }

.think { border: 1px dashed var(--line); border-radius: 8px; padding: 0 10px; margin-bottom: 8px; }
.think summary {
  cursor: pointer; font-size: 12px; color: var(--muted);
  padding: 6px 0; user-select: none;
}
.think[open] summary { margin-bottom: 4px; }
.think-body {
  font-size: 13px; color: var(--muted); white-space: pre-wrap;
  font-family: var(--mono); border-top: 1px solid var(--line); padding-top: 8px;
}

.tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip.tool {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line); font-family: var(--mono);
}
.chip.tool .chip-srv { color: var(--muted); }
.chip.tool .chip-status { color: var(--muted); }
.chip.tool.ok .chip-status { color: var(--ok); }
.chip.tool.error { border-color: var(--err); }
.chip.tool.error .chip-status { color: var(--err); }
.chip.tool.running .chip-status { color: var(--warn); }

.content { overflow-wrap: break-word; }
.content :is(p, ul, ol) { margin: .4em 0; }
.content pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; overflow: auto; font-family: var(--mono); font-size: 12.5px;
}
.content code { font-family: var(--mono); }
.content :not(pre) > code { background: var(--bg-3); padding: 1px 5px; border-radius: 5px; }
.content a { color: var(--accent); }
.content table { border-collapse: collapse; }
.content th, .content td { border: 1px solid var(--line); padding: 4px 8px; }

.working { color: var(--muted); font-size: 12px; }
.stats { font-size: 11.5px; color: var(--muted); font-family: var(--mono); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.turn-err { color: var(--err); font-size: 13px; margin-top: 6px; }

/* ------------------------------------------------------- banner / hint */
.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; font-size: 13px; margin-bottom: 10px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
}
.banner.amber { border-color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.banner-msg { flex: 1; }
.banner.amber .banner-msg { color: var(--warn); }

.hint { padding: 6px 10px; color: var(--warn); font-size: 12.5px; }

/* ------------------------------------------------------------ composer */
.composer { margin-top: auto; }
#input {
  resize: none; max-height: 180px; min-height: 44px;
  font-family: var(--sans); font-size: 14px; line-height: 1.4;
}
#input:focus { outline: none; border-color: var(--accent); }
#input:disabled { opacity: .5; }
.composer-actions { justify-content: flex-start; }

/* -------------------------------------------------------------- context wall */
.wall { margin-top: 8px; }
.wall-inner {
  border: 1px solid var(--err); border-radius: 8px;
  padding: 10px 12px; background: rgba(224,91,91,.06);
  display: flex; flex-direction: column; gap: 6px;
}
.wall-title { font-weight: 600; color: var(--err); }
.wall-body { font-size: 13px; }
.wall-exits { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* --------------------------------------------------- dual-lane accents */
.lane-badge {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); font-family: var(--mono);
}
.lane-badge.quick { color: var(--accent); border-color: var(--accent); }
.lane-badge.deep { color: #7dffb0; border-color: #7dffb0; }
.turn.lane-quick { border-left: 3px solid var(--accent); }
.turn.lane-deep { border-left: 3px solid var(--ok); }

/* ---------------------------------------------------------- handover chip */
.handover-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--accent);
  margin-bottom: 4px; align-self: flex-start;
}
.hc-ic { font-size: 13px; }
.hc-txt { color: var(--fg); font-family: var(--mono); font-size: 11.5px; }

/* ----------------------------------------------------------------- toasts */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg);
  padding: 9px 14px; border-radius: 9px; font-size: 13px; max-width: 360px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6); opacity: 1; transition: opacity .3s;
}
.toast.warn { border-color: var(--warn); }
.toast.out { opacity: 0; }

/* -------------------------------------------------------------------- misc */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.login-err { color: var(--err); font-size: 13px; min-height: 1.2em; }
code { font-family: var(--mono); }

/* ---------------------------------------------------------- BarterRECORD
 * /record page components (voice drop): queue status dots, live level meter,
 * timer, upload progress, editable transcript, recent-jobs table.
 * (.dot base / .badge / .form-control come from the sections above.) */
.state { font-size: 13px; color: var(--muted); }
.state b { color: var(--fg); }

.dot.queued { background: var(--warn); }
.dot.processing { background: var(--accent); animation: pulse 1.2s infinite; }
.dot.done { background: var(--ok); }
.dot.failed { background: var(--err); }
@keyframes pulse { 50% { opacity: .35; } }

.meter { flex: 1; height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; min-width: 120px; }
.meter > i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 60ms linear; }

#timer {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-size: 18px;
  color: var(--accent); min-width: 74px; text-align: right;
}

.prog { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.prog > i { display: block; height: 100%; width: 0%; background: var(--accent); }

#text { min-height: 260px; font-family: var(--mono); font-size: 14px; line-height: 1.5; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
tr.job { cursor: pointer; }
tr.job:hover { background: var(--bg-3); }

/* transcription-language select (cs/en) */
.lang-sel { width: auto; min-width: 70px; }

.keep { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); cursor: pointer; }
#filepick { display: none; }
.audio-link { font-size: 13px; }
.foot { color: var(--muted); font-size: 12px; margin-top: 16px; margin-bottom: 0; }