/* Console layout and components. Colours come from tokens.css. */
* { box-sizing: border-box; }

/**
 * The `hidden` attribute must always win.
 *
 * The browser hides [hidden] elements with its own `display: none`, but *any*
 * author rule that sets `display` beats it. `.gate` sets `display: grid`, so
 * hiding it did nothing: the sign-in card stayed on screen, covering an app
 * that had already signed in successfully.
 *
 * This one line is why normalize.css has carried the same rule for years.
 */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
button, input, select, textarea { font: inherit; color: inherit; }

header {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
}
header h1 { font-size: 15px; margin: 0; letter-spacing: .2px; }
header h1 span { color: var(--muted); font-weight: 400; }
.spacer { flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.dot.on { background: var(--ok); }

main { display: grid; grid-template-columns: 260px 1fr; gap: 0; height: calc(100vh - 53px); }
@media (max-width: 860px) { main { grid-template-columns: 1fr; height: auto; } }

aside {
  border-right: 1px solid var(--line); background: var(--panel);
  padding: 14px; overflow-y: auto;
}
aside h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 18px 0 8px; }
aside h2:first-child { margin-top: 0; }

.target {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.target input { margin-top: 3px; accent-color: var(--accent); }
.target .meta { min-width: 0; }
.target .name { font-weight: 600; font-size: 13px; }
.target .sub { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { color: var(--muted); font-size: 12px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius); }

.job-row {
  padding: 7px 9px; border-radius: 8px; font-size: 12px; cursor: pointer;
  display: flex; gap: 7px; align-items: center; color: var(--muted);
}
.job-row:hover { background: var(--panel-2); }
.job-row .badge { font-size: 10px; }

section.work { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.composer { padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
textarea#prompt {
  width: 100%; min-height: 84px; resize: vertical; padding: 11px 13px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  outline: none;
}
textarea#prompt:focus { border-color: var(--accent); }
.controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
button.primary {
  background: var(--accent); color: #0b1020; border: 0; border-radius: 8px;
  padding: 8px 18px; font-weight: 650; cursor: pointer;
}
button.primary:disabled { opacity: .45; cursor: not-allowed; }
button.ghost {
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; color: var(--muted);
}
label.check { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }

.verdict { margin-top: 10px; padding: 9px 12px; border-radius: var(--radius); font-size: 12.5px; border: 1px solid; }
.verdict.allow { display: none; }
.verdict.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.verdict.mask { border-color: var(--mask); background: color-mix(in srgb, var(--mask) 12%, transparent); }
.verdict.block { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.verdict b { font-weight: 700; }
.verdict .tags { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2); font-family: var(--mono);
}

.results { flex: 1; overflow-y: auto; padding: 16px 18px; display: grid; gap: 14px; align-content: start; }
.results.cols { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.card header {
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2);
  display: flex; gap: 8px; align-items: center; font-size: 12px;
}
.card .who { font-weight: 700; }
.card .body { padding: 12px 14px; white-space: pre-wrap; word-break: break-word; min-height: 40px; }
.card .body.err { color: var(--bad); }
.card .sent {
  padding: 8px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: pre-wrap;
}
.badge { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 11px; }
.badge.streaming { color: var(--accent); border-color: var(--accent); }
.badge.done { color: var(--ok); border-color: var(--ok); }
.badge.error, .badge.blocked { color: var(--bad); border-color: var(--bad); }
.badge.queued, .badge.dispatched { color: var(--warn); border-color: var(--warn); }
.cursor { display: inline-block; width: 7px; height: 14px; background: var(--accent); animation: blink 1s steps(2) infinite; vertical-align: -2px; }
@keyframes blink { 50% { opacity: 0; } }
.hint { color: var(--muted); font-size: 12px; }
code { font-family: var(--mono); font-size: 12px; background: var(--panel-2); padding: 1px 5px; border-radius: 5px; }

/* ---- sign-in gate ---- */
.gate {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--bg); z-index: 20; padding: 20px;
}
.gate-card {
  width: 100%; max-width: 340px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 22px;
}
.gate-card h1 { font-size: 17px; margin: 0 0 4px; }
.gate-card h1 span { color: var(--muted); font-weight: 400; font-size: 13px; }
.gate-card label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 14px 0 4px; }
.gate-card input {
  width: 100%; padding: 9px 11px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; outline: none;
}
.gate-card input:focus { border-color: var(--accent); }
.gate-card button { width: 100%; margin-top: 18px; padding: 10px; }
.gate-error {
  margin-top: 12px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px;
  border: 1px solid var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent);
}
.gate-card .hint { margin: 10px 0 0; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 16px; font-size: 13px; z-index: 30; max-width: 80vw;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.toast.bad { border-color: var(--bad); }
.toast.good { border-color: var(--ok); }

.target .sub.warn { color: var(--warn); white-space: normal; }

.card .sent.warn { color: var(--warn); }

/* ---- rendered answers ---- */
.card .body > :first-child { margin-top: 0; }
.card .body > :last-child { margin-bottom: 0; }
.card .body p { margin: 0 0 10px; }
.card .body h1, .card .body h2, .card .body h3,
.card .body h4, .card .body h5, .card .body h6 {
  margin: 14px 0 8px; font-size: 14px; line-height: 1.35;
}
.card .body h1 { font-size: 17px; }
.card .body h2 { font-size: 15px; }
.card .body ul, .card .body ol { margin: 0 0 10px; padding-left: 22px; }
.card .body li { margin: 2px 0; }
.card .body pre {
  margin: 0 0 10px; padding: 10px 12px; overflow-x: auto;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
.card .body pre code { background: none; padding: 0; font-size: 12px; line-height: 1.5; }
.card .body pre[data-language]::before {
  content: attr(data-language); display: block; margin-bottom: 6px;
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted);
}
.card .body blockquote {
  margin: 0 0 10px; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--line); color: var(--muted);
}
.card .body table { border-collapse: collapse; margin: 0 0 10px; font-size: 12.5px; display: block; overflow-x: auto; }
.card .body th, .card .body td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
.card .body th { background: var(--panel-2); }
.card .body a { color: var(--accent); }
.card .body hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.card .body { white-space: normal; }
.card .body pre, .card .body code { white-space: pre-wrap; word-break: break-word; }

/* ---- live mirror of an AI tab ---- */
.mirror { border-bottom: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.mirror > header {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
/* The frame is sized to the *real* tab and scaled down, so this box only
   needs to clip whatever sticks out. */
/* ---- the mirror grid ----
   The layout picks itself from how many panes there are: one fills the space,
   two sit side by side, three or four make a square. Asking the user to choose
   a layout is work they did not come here to do. */
#mirror-grid { display: grid; gap: 1px; background: var(--line); max-height: 62vh; overflow: auto; }
#mirror-grid[data-panes="1"] { grid-template-columns: 1fr; }
#mirror-grid[data-panes="2"] { grid-template-columns: 1fr 1fr; }
#mirror-grid[data-panes="3"],
#mirror-grid[data-panes="4"] { grid-template-columns: 1fr 1fr; }

.mirror-pane { display: flex; flex-direction: column; background: var(--panel); min-width: 0; }
.mirror-pane > header {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted);
}
.mirror-pane .pane-title { font-weight: 700; color: var(--text); }
.mirror-pane .pane-subtitle {
  color: var(--text); opacity: .7; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}
.mirror-pane .pane-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }
.mirror-pane .warn { color: var(--warn); white-space: normal; }
.pane-stage { background: #fff; overflow: auto; position: relative; flex: 1; min-height: 180px; }
.pane-stage .mirror-frame { border: 0; display: block; }

/* A row can be picked for the mirror; an ordinary page has no tick box. */
.target { cursor: pointer; }
.target.mirroring { border-color: var(--accent); }
/* Deliberately not a box: a square next to a list of tick boxes reads as a
   tick box you are not allowed to tick. */
.target-mark {
  width: 13px; margin-top: 1px; flex: none;
  color: var(--muted); font-size: 10px; text-align: center;
}

/* ---- presets ---- */
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets .preset { display: inline-flex; align-items: stretch; }
.presets button { font-size: 12px; padding: 5px 9px; }
.presets .preset > button:first-child { border-radius: 8px 0 0 8px; border-right: 0; }
.presets .preset-remove {
  border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0;
  background: transparent; color: var(--muted); cursor: pointer; padding: 0 7px;
}
.presets .preset-remove:hover { color: var(--bad); }

/* History can be long; keep it from pushing the tab list off screen. */
.recents { max-height: 190px; overflow-y: auto; align-content: flex-start; }

.mirror-pane > header .ghost { padding: 2px 7px; font-size: 11px; }

/* ---- typing inside a mirror ----
   Sits above the copy, in the same place as the site's own message box. Its
   own surface and border, so it is visibly ours and not part of the page
   underneath. */
.typing-box {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--panel);
  box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
}
.typing-box[hidden] { display: none !important; }
.typing-input {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}
.typing-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.typing-actions { display: flex; align-items: center; gap: 8px; }
.typing-actions .hint { font-size: 11px; opacity: 0.7; }
.typing-box .verdict:empty { display: none; }

/* ---- a pane that is answering ----
   With four services on screen, which one is working is the thing a person
   wants to know at a glance. A pulse rather than a spinner: it has to be
   noticeable from the corner of the eye and ignorable the rest of the time. */
.pane-activity {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  animation: pane-pulse 1.2s ease-in-out infinite;
}
.pane-activity[hidden] { display: none; }
.mirror-pane.is-busy > header { border-bottom-color: var(--accent); }

@keyframes pane-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* Someone who has asked for less motion gets the dot without the pulse. */
@media (prefers-reduced-motion: reduce) {
  .pane-activity { animation: none; opacity: 1; }
}

/* ---- looking at one pane ----
   Four panes each render at about a third of full size. This is the editor's
   answer: the others stay open and in step, you just look at one. Hidden
   rather than closed, so nothing is rebuilt and no scroll position is lost. */
#mirror-grid.has-focus { grid-template-columns: 1fr; }
#mirror-grid.has-focus .mirror-pane:not(.is-focused) { display: none; }
.mirror-pane .pane-focus { font-size: 13px; line-height: 1; }

/* ---- the page a colleague is sent to ----
   Its own page rather than a panel in the console: someone arriving here has
   not got the extension yet, so there is nothing for a console to show them. */
.get-page { max-width: 820px; margin: 0 auto; padding: 24px 20px 64px; }
.get-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.get-download { margin: 24px 0 32px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.get-button { display: inline-block; padding: 10px 18px; border-radius: 10px; text-decoration: none; }
.get-meta { margin-top: 10px; font-size: 12px; color: var(--muted); }
.get-steps { margin: 14px 0 0; padding-left: 20px; line-height: 1.7; }
.get-steps code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.get-languages { display: flex; gap: 6px; margin-bottom: 14px; }
.get-languages .is-chosen { border-color: var(--accent); color: var(--text); }
.markdown { line-height: 1.65; }
.markdown h1 { font-size: 22px; margin-top: 28px; }
.markdown h2 { font-size: 18px; margin-top: 26px; }
.markdown h3 { font-size: 15px; margin-top: 20px; }
.markdown table { border-collapse: collapse; width: 100%; margin: 12px 0; display: block; overflow-x: auto; }
.markdown th, .markdown td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; font-size: 13px; }
.markdown pre, .markdown .code {
  background: var(--panel-2); padding: 10px 12px; border-radius: 8px; overflow-x: auto; font-size: 12.5px;
}
.markdown blockquote {
  margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--accent);
  background: var(--panel-2); border-radius: 0 8px 8px 0;
}