/* Modal dialogs and the reusable dropdown (select with hover edit/remove + "add new…") */

.dlg-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,8,.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.dlg {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  width: 360px; max-width: 92vw;
  padding: 16px;
}
.dlg-title { font-weight: 650; font-size: 13.5px; margin-bottom: 10px; }
.dlg-body { font-size: 12.5px; }
.dlg-body p { color: var(--muted); line-height: 1.5; }
.dlg-field { display: block; margin-bottom: 10px; }
.dlg-field span {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
.dlg-field input, .dlg-field select {
  width: 100%; font: inherit; padding: 6px 9px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--ink);
}
.dlg-static { font-size: 12.5px; color: var(--ink); padding: 2px 0 1px; }
/* checkbox row (e.g. "apply auto-formatting" on save) */
.dlg-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; cursor: pointer; }
.dlg-check input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--accent); }
.dlg-check span { font-size: 12.5px; color: var(--ink); }
.dlg-note { color: var(--muted); font-size: 12px; line-height: 1.55; margin-bottom: 12px; }
.dlg-err { color: var(--danger); font-size: 11.5px; margin-top: 6px; }
.dlg-row { display: flex; gap: 8px; }
.dlg-row .dlg-field { flex: 1; min-width: 0; }
/* the printer form is denser than a plain confirm — give it more room so paired fields
   (width/height, margins) and the three per-font widths sit comfortably side by side */
.dlg.dlg-wide { width: 440px; }
/* per-font line widths (S14): ONE shared "Line width, chars" heading, then f0/f1/f2 side by
   side. Each cell = a short "fN" label, a number input, and an inline "auto" toggle. */
.pr-fw-row { display: flex; gap: 8px; }
.pr-fw-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-fw-label {
  font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .02em;
}
.pr-fw-cell input[type="number"] { width: 100%; min-width: 0; }
.pr-fw-auto { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.pr-fw-auto input { width: 14px; height: 14px; margin: 0; flex: none; accent-color: var(--accent); }
/* undo the uppercase/block .dlg-field span styling for the small inline "auto" caption */
.pr-fw-auto span {
  display: inline; margin: 0; font-size: 11px; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--muted);
}
.dlg-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dlg-opt {
  display: flex; gap: 9px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; cursor: pointer;
}
.dlg-opt:hover { border-color: var(--faint); }
.dlg-opt input { margin-top: 2px; accent-color: var(--accent); }
.dlg-opt .t { font-weight: 550; }
.dlg-opt .d { color: var(--muted); font-size: 11.5px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { filter: brightness(1.06); }

/* ---------- dropdown ---------- */
.dd { position: relative; }
.dd-btn {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; padding: 4px 9px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--ink);
  max-width: 250px;
}
.dd-btn:hover { border-color: var(--faint); }
.dd-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-arr { color: var(--faint); font-size: 10px; flex: none; }
.dd-pop.up { top: auto; bottom: calc(100% + 4px); }
.dd-pop {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 230px; max-width: 330px;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 9px;
  box-shadow: var(--shadow);
  padding: 4px;
  z-index: 50;
}
/* group header in a grouped dropdown (e.g. model maker: Claude / GPT / GLM) — a small,
   non-selectable caption above its models */
.dd-group {
  padding: 7px 9px 3px; font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
}
.dd-group:first-child { padding-top: 3px; }
.dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: 6px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
}
.dd-item:hover { background: var(--sel); }
.dd-item.on .dd-name { color: var(--accent-ink); font-weight: 600; }
/* unavailable model (e.g. subscription at its concurrent-use limit): greyed, not selectable */
.dd-item.dd-disabled { cursor: default; opacity: 0.45; }
.dd-item.dd-disabled:hover { background: none; }
.dd-item.dd-disabled .dd-meta { color: var(--warn, #c80); opacity: 0.9; }
.dd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.dd-meta { color: var(--faint); font-family: var(--mono); font-size: 10px; flex: none; }
.dd-acts { visibility: hidden; flex: none; display: inline-flex; gap: 2px; }
.dd-item:hover .dd-acts { visibility: visible; }
.dd-act {
  flex: none; width: 19px; height: 19px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.dd-edit:hover { background: var(--sel); color: var(--ink); }
.dd-rm:hover { background: var(--danger-soft); color: var(--danger); }
.dd-add { color: var(--accent-ink); border-top: 1px solid var(--border); border-radius: 0 0 6px 6px; margin-top: 4px; }

/* ---------- tabbed workspace settings (printify-style vertical nav) ---------- */
.dlg.dlg-tabs { width: 620px; }
.ws-set { display: flex; gap: 0; min-height: 260px; margin: 0 -16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ws-set-nav { width: 168px; flex: none; padding: 12px 0; border-right: 1px solid var(--border); background: var(--surface2); display: flex; flex-direction: column; }
/* danger zone sits apart at the bottom, in red */
.ws-set-nav button.ws-set-danger { margin-top: auto; color: var(--danger); }
.ws-set-nav button.ws-set-danger.on { color: var(--danger); border-left-color: var(--danger); background: var(--danger-soft); }
.ws-set-nav button {
  display: block; width: 100%; text-align: left;
  padding: 8px 14px; font: inherit; font-size: 12.5px; font-weight: 550;
  background: none; border: none; border-left: 3px solid transparent;
  color: var(--muted); cursor: pointer;
}
.ws-set-nav button:hover { color: var(--ink); background: var(--border); }
.ws-set-nav button.on { color: var(--ink); border-left-color: var(--accent); background: var(--accent-soft); }
.ws-set-body { flex: 1; padding: 14px 16px; min-width: 0; }
.ws-set-pane { display: none; }
.ws-set-pane.on { display: block; }
.ws-set-pane h3 { margin: 0 0 12px; font-size: 13px; font-weight: 650; }
.ws-set-hint { color: var(--muted); font-size: 11.5px; line-height: 1.5; margin-top: 8px; }
.dlg-tabs .dlg-foot { padding: 0; }

.ws-set-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12.5px; cursor: pointer; }
.ws-set-check input { accent-color: var(--accent); }
.ws-set-example { margin: 12px 0 4px; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; color: var(--muted); }
.ws-set-example b { color: var(--ink); font-weight: 650; }

/* admin panel: same settings-style layout (tabs left / content right), but a WIDER window so the
   workspace table fits comfortably, and a taller initial height. */
.dlg:has(.admin-set) { width: 760px; }
.admin-set { min-height: 420px; }   /* taller than the default ws-set (260px) */
/* The workspace table can hold hundreds of rows (eval runs mint workspaces), so the wrap IS
   the scroll container: bounded height + its own scrollbar, sticky thead (below) keeps the
   header visible. The role dropdown stays reachable inside the scrolling wrap because
   makeDropdown flips the popup upward near the bottom of its nearest scroll container. */
.admin-wrap { border: 1px solid var(--border); border-radius: 7px; max-height: min(56vh, 560px); overflow-y: auto; }
.admin-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.admin-tbl th, .admin-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.admin-tbl tr:last-child td { border-bottom: 0; }
.admin-tbl th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--surface2); z-index: 1; }
.admin-tbl .admin-c { text-align: center; width: 1%; white-space: nowrap; }
.admin-token { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); }
.admin-role-dd { width: 140px; }   /* the styled role picker (makeDropdown) */
/* ghost button like the engine/model picker — no box-in-a-box border, only on hover */
.admin-role-dd .dd-btn { border-color: transparent; background: none; max-width: none; }
.admin-role-dd .dd-btn:hover { background: var(--sel); border-color: transparent; }
.admin-role-dd .dd-arr { color: var(--muted); }
/* the role picker's popup is compact (2 items) and must not be clipped by the scroll wrap */
.admin-role-dd .dd-pop { min-width: 140px; max-width: 200px; }
.admin-tbl .admin-chat { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.admin-you { color: var(--muted); font-size: 11px; }
.admin-del {
  background: none; border: 0; padding: 4px; border-radius: 6px; cursor: pointer;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
}
.admin-del:hover { color: var(--danger); background: var(--danger-soft); }
.admin-note { margin-top: 10px; color: var(--accent); }