/* ===== WM Copilot Styles v2 — Unified Browser + Network Panel ===== */

/* SURFACES IN THIS FILE READ TOKENS THAT EXIST. Until 2026-08-22 nine of them
   read `var(--bg-subtle, <light literal>)`, and NO stylesheet has ever defined
   `--bg-subtle` — so every one painted its hardcoded light fallback in BOTH
   themes. Four were live dark-mode defects, measured in chromium against the
   real <link> cascade before the swap:

     .wmc-net-detail-body            #ffffff  ink #e6e9f2  1.21:1   (a bare #fff,
                                                                    not a token)
     .wmc-net-detail                 #f5f5f7  ink #e6e9f2  1.11:1
     .wmc-msg-ai .wmc-msg-content code #f5f5f7 ink #e6e9f2 1.11:1
     .wmc-mini-header                #fafafa  ink #e6e9f2  1.16:1
     .wmc-mini-btn:hover             #f5f5f7  ink #a8adbd  2.06:1

   The other five only looked right because theme-luxe.css re-paints a
   HAND-LISTED set of these classes. That list is keyed by CLASS NAME, so a
   rename orphans the dark fix silently — which is exactly what happened when
   `.wmc-network-header` became `.wmc-pane-header` and the bar dropped to
   1.17:1. A rule that reads a token defined in both themes needs no list.

   Opaque subtle surface -> --bg-secondary (#f8f9fc / #1c212f).
   Real hover tint       -> --bg-hover (translucent; it LAYERS, so it must not
                            be used for a static surface).
   Composer fill         -> --bg-input, which is what theme-luxe already paints.
   Inset well            -> --bg-card, like-for-like with the old #fff.

   tests/test_dark_theme_chrome_contrast.js grades every one of these in the
   resolved cascade, and fails on ANY .wmc- rule whose dark background comes out
   opaque-and-light — including one orphaned by a rename. */

.wmc-wrapper {
  display: flex;
  flex-direction: column;
  /* The app header is no longer hidden on this screen — it goes compact (see
     "COMPACT HEADER" in app.css), so Tiva / Report a bug / notifications stay
     reachable from here. Subtract whatever height it is currently claiming;
     a flat 100vh would push the panels into a scrollbar. */
  height: calc(100vh - var(--header-height, 0px));
  overflow: hidden;
}

/* ---- Top: Browser + Network side-by-side ---- */
.wmc-top {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  border-bottom: none;
}

/* Browser panel — takes most of the space, fills fully */
.wmc-browser {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0f0f18;
  position: relative;
  overflow: hidden;
}

.wmc-browser-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--bg-secondary, #f8f9fc);
  border-bottom: 1px solid var(--border, #e2e4e9);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.wmc-browser-header .wmc-panel-icon { font-size: 14px; }

.wmc-browser-url {
  margin-left: 8px;
  font-weight: 400;
  font-size: 11px;
  /* --text-secondary, not --text-muted. On this header's near-white bar
     (rgba(250,250,254,0.85), theme-luxe) --text-muted #94a3b8 measures 2.46:1 —
     an AA failure on the URL that tells the tester WHERE the live browser is,
     i.e. the one line in this bar you actually have to read. --text-secondary
     is 5.39:1 light and 7.17:1 dark on the same bar. It stays visibly quieter
     than the panel title, which is the hierarchy the muted token was reaching
     for; the token was just too far. */
  color: var(--text-secondary, #676865);
  font-family: 'SF Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Trace chip — in the browser panel HEADER, beside the GUI/RF surface badge.
   It used to float over the live view, covering the one region a tester is
   actually watching. Here it is a peer of the surface badge, which is what it
   is: a fact about the session, not an annotation on the picture.

   Neutral badge tone (§5.6: dark ink on a light tint, never white on mid-tone),
   pill radius, mono for the id. The id ellipsises rather than wrapping — the
   header is one line and must stay one line — and the full value is in the
   title and on the clipboard. `hidden` until the first cp-trace-id arrives. */
.wmc-trace-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 240px;
  min-width: 0;
  padding: 1px 8px;
  border: 1px solid var(--border, #e2e4e9);
  border-radius: 999px;
  /* OUTLINE, not filled. Any fill token that reads as "subtle surface" is the
     same colour as this header bar in one theme or the other — --bg-secondary
     is exactly the dark bar — so a filled pill would vanish into it. The
     outline reads on both, and the guidelines' quiet-chip treatment is an
     outline anyway. Contrast is carried by the ink, which is themed. */
  background: transparent;
  color: var(--text-secondary, #374151);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  cursor: copy;
  user-select: none;
}

.wmc-trace-chip[hidden] { display: none; }

/* Distinguished by WEIGHT, not by fading. An opacity-dimmed label on this tint
   measured 2.4:1 — the guidelines require AA on everything, and "it's only a
   label" is exactly how unreadable text ships. --text-secondary on
   --bg-secondary is 5.1:1. */
.wmc-trace-chip .wmc-trace-label {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-secondary, #676865);
}

.wmc-trace-chip .wmc-trace-id {
  font-family: var(--mono, 'SF Mono', monospace);
  color: var(--text, #253378);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.wmc-trace-chip .wmc-trace-copy {
  flex-shrink: 0;
  color: var(--text-secondary, #676865);
}
.wmc-trace-chip:hover { border-color: var(--accent, #3566e0); }
.wmc-trace-chip:hover .wmc-trace-copy { opacity: 0.9; }

.wmc-browser-body {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #0f0f18;
}

.wmc-browser-body canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wmc-browser-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card, #fff);
  z-index: 1;
}
.wmc-browser-placeholder .wmc-placeholder-sub {
  font-size: 11px;
  opacity: 0.7;
}

/* ---- Side column: Network Calls + DOM Snapshot ----
   Two SEPARATE panes, not two tabs of one "Additional Info" panel, and both
   start closed so the live browser owns the full width (owner, 2026-08-22).
   The column, the seam beside it and the seam between the panes all disappear
   with them — a closed pane costs the browser nothing.

   `hidden` has to be spelled out for anything this file gives a `display` to:
   the UA's `[hidden] { display: none }` is (0,1,0) and loses to a class rule,
   so a plain `.wmc-pane { display: flex }` would keep painting a hidden pane. */
.wmc-side {
  width: 320px;
  min-width: 260px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border, #e2e4e9);
  background: var(--bg-card, #fff);
  overflow: hidden;
  flex-shrink: 0;
}
.wmc-side[hidden] { display: none; }
.wmc-splitter-v[hidden], .wmc-splitter-h[hidden] { display: none; }

.wmc-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.wmc-pane[hidden] { display: none; }

/* Padding is deliberately thin: Clear and the close button are normalised to
   the house 34px/30px geometry, so the row is already as tall as it needs to
   be and 5px of its own would stack two chunky headers down a 320px column. */
.wmc-pane-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 10px;
  /* --bg-secondary. This was the first rule in the file to use it; the nine
     `var(--bg-subtle, <light literal>)` sites the rest of the sheet carried
     have since followed (see the file header). */
  background: var(--bg-secondary, #f8f9fc);
  border-bottom: 1px solid var(--border, #e2e4e9);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.wmc-pane-header .wmc-panel-icon { font-size: 13px; }
.wmc-pane-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Only layout here — ui-normalize.js owns these two buttons' chrome (Clear is a
   neutral pill, the × classifies icon-only on its glyph). `margin` is not in
   its STRIP list and §14 does not set it, so the auto margin survives: the
   close button pushes right on its own, and drops the margin where Clear has
   already claimed it. */
.wmc-pane-act { margin-left: auto; }
.wmc-pane-close { margin-left: auto; flex-shrink: 0; }
.wmc-pane-act ~ .wmc-pane-close { margin-left: 0; }

.wmc-pane-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  position: relative;
}

.wmc-dom-view {
  padding: 8px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text, #1a1a2e);
  line-height: 1.5;
}

/* ---- The toggles that summon the panes (live-browser header) ----
   The BUTTONS are deliberately unstyled here. ui-normalize.js (§5.1, "the one
   button") classifies anything with `aria-pressed` as a toggle CHIP and
   design-review.css §14 dresses it — neutral at rest, filled accent while
   `aria-pressed="true"` — all with `!important`, so a local geometry or colour
   here would simply lose. Keeping `aria-pressed` in sync IS the styling; only
   the container and the badge are ours. */
.wmc-pane-toggles {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border, #e2e4e9);
  flex-shrink: 0;
}

/* Count of captured calls — the only signal, while the pane is shut, that
   there is anything in it worth opening. The normaliser strips inline styles
   from the BUTTON and never from its children, so a badge inside the chip is
   safe to style. It flips to a light pill on the filled active chip, where an
   accent-on-accent badge would vanish. */
.wmc-pane-count {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono, monospace);
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-fill, #3566e0);
  color: #fff;
  flex-shrink: 0;
}
.wmc-pane-count[hidden] { display: none; }
/* The count chip inverts on a pressed (accent-filled) toggle. --bg-card, not a
   literal #fff: light is byte-identical (--bg-card IS #ffffff there, 5.09:1
   against --accent #3566e0) and dark stops painting a white pill under the
   dark theme's lighter --accent #5398f6, which measured 2.92:1. 5.77:1 now. */
.wmc-pane-toggle[aria-pressed="true"] .wmc-pane-count {
  background: var(--bg-card, #ffffff);
  color: var(--accent, #253378);
}
.wmc-pane-header .wmc-pane-count { background: var(--border, #e2e4e9); color: var(--text-secondary, #6b7280); }

/* Network entries */
.wmc-net-entry {
  border-bottom: 1px solid var(--border, #e2e4e9);
  cursor: pointer;
  transition: background 0.1s;
}
.wmc-net-entry:hover { background: var(--bg-hover, rgba(83,152,246,0.04)); }

.wmc-net-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
}

.wmc-net-method {
  font-weight: 700;
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  min-width: 32px;
}
.wmc-net-method.post { color: #f59e0b; }
.wmc-net-method.get { color: #3b82f6; }

.wmc-net-path {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'SF Mono', monospace;
  color: var(--text-primary, #1a1a2e);
}

.wmc-net-status {
  font-weight: 600;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}
.wmc-net-status.ok { background: rgba(60,198,154,0.12); color: #3cc69a; }
.wmc-net-status.err { background: rgba(193,21,58,0.12); color: #c1153a; }

.wmc-net-time {
  font-size: 10px;
  color: var(--text-muted, #6b7280);
  min-width: 40px;
  text-align: right;
}

/* Expanded network detail */
.wmc-net-detail {
  display: none;
  padding: 6px 10px 10px;
  font-size: 11px;
  background: var(--bg-secondary, #f8f9fc);
  border-top: 1px solid var(--border, #e2e4e9);
}
.wmc-net-entry.expanded .wmc-net-detail { display: block; }

.wmc-net-detail-label {
  font-weight: 600;
  font-size: 10px;
  color: var(--text-secondary, #6b7280);
  margin: 4px 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wmc-net-detail-body {
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 150px;
  overflow-y: auto;
  background: var(--bg-card, #ffffff);
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border, #e2e4e9);
}

/* Validation entries (special styling) */
.wmc-net-entry.validation .wmc-net-summary {
  background: rgba(168,85,247,0.04);
}
.wmc-net-entry.validation .wmc-net-method {
  color: #a855f7;
}

/* Empty state */
.wmc-network-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 6px;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  padding: 20px;
  text-align: center;
}

/* ---- Chat Console ---- */
.wmc-chat {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-height: 45vh;
  min-height: 160px;
  height: 220px;
  background: var(--bg-card, #fff);
  resize: vertical;
  overflow: hidden;
  border-bottom: 2px solid var(--border, #e2e4e9);
}

.wmc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px;
  border-bottom: 1px solid var(--border, #e2e4e9);
  background: var(--bg-secondary, #f8f9fc);
  flex-shrink: 0;
}

.wmc-chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wmc-chat-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wmc-chat-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #1a1a2e); }

.wmc-ai-state { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-secondary, #6b7280); }
.wmc-step-progress {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft, #eef3ff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}
.wmc-state-dot { width: 7px; height: 7px; border-radius: 50%; }
.wmc-state-dot.idle { background: #9ca3af; }
.wmc-state-dot.thinking { background: #5398f6; animation: wmc-pulse 1s infinite; }
.wmc-state-dot.executing { background: #faa938; animation: wmc-pulse 0.8s infinite; }
.wmc-state-dot.waiting { background: #a855f7; animation: wmc-pulse 1.2s infinite; }

@keyframes wmc-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

/* --text-secondary, not --text-muted: this label sits on the chat header's
   --bg-secondary bar, where muted measures 4.12:1 in dark — under AA, and the
   one line that says whether the live session is connected. 7.17:1 now; light
   goes 4.67 -> 7.30. Measured in chromium against the real cascade. */
.wmc-conn-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary, #676865); }
.wmc-conn-dot { width: 6px; height: 6px; border-radius: 50%; }
.wmc-conn-dot.disconnected { background: #ef4444; }
.wmc-conn-dot.connecting { background: #faa938; animation: wmc-pulse 1s infinite; }
.wmc-conn-dot.connected, .wmc-conn-dot.ready { background: #3cc69a; }

.wmc-clear-btn { background:none; border:none; padding:4px; cursor:pointer; color:var(--text-tertiary,#9ca3af); border-radius:4px; display:flex; align-items:center; }
.wmc-clear-btn:hover { color:var(--text-secondary,#6b7280); background:var(--bg-hover,rgba(83,152,246,0.04)); }

/* Messages */
.wmc-chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wmc-welcome { display:flex; gap:10px; padding:8px 0; align-items:flex-start; color:var(--text-secondary,#6b7280); font-size:13px; line-height:1.5; }
.wmc-welcome-icon { font-size:20px; flex-shrink:0; }
.wmc-welcome-text strong { color:var(--text-primary,#1a1a2e); }

.wmc-msg { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5; }
.wmc-msg-user { flex-direction:row-reverse; }
.wmc-msg-user .wmc-msg-content { background:var(--accent-fill, #3566e0); color:#fff; border-radius:12px 12px 2px 12px; padding:6px 12px; max-width:70%; }
.wmc-msg-avatar { font-size:11px; font-weight:600; flex-shrink:0; min-width:24px; text-align:center; padding-top:2px; }
.wmc-msg-ai .wmc-msg-content { color:var(--text-primary,#1a1a2e); max-width:85%; }
.wmc-msg-ai .wmc-msg-content code { background:var(--bg-secondary,#f8f9fc); padding:1px 4px; border-radius:3px; font-size:11px; font-family:'SF Mono',monospace; }
.wmc-msg-action { gap:6px; padding:1px 0; align-items:center; }
.wmc-msg-surface-tag { font-size:10px; font-weight:600; padding:1px 7px; border-radius:4px; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:3px; line-height:1.6; }
.wmc-msg-action-text { font-size:12px; color:var(--text-secondary,#6b7280); font-family:'SF Mono','Menlo',monospace; }

/* Composing indicator — "Copilot is typing…", shown while a response is in flight */
.wmc-composing-row { opacity: 0.85; }
.wmc-composing { display:flex; align-items:center; gap:7px; color:var(--text-secondary,#6b7280); font-size:12px; font-style:italic; }
.wmc-composing-dots { display:inline-flex; align-items:center; gap:3px; }
.wmc-composing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary, #9ca3af);
  animation: wmc-typing-bounce 1.1s infinite ease-in-out;
}
.wmc-composing-dots span:nth-child(2) { animation-delay: 0.15s; }
.wmc-composing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes wmc-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Input */
.wmc-chat-input-area { padding:6px 16px 8px; border-top:1px solid var(--border,#e2e4e9); flex-shrink:0; }
.wmc-input-wrap { display:flex; align-items:flex-end; gap:8px; background:var(--bg-input,#f8f9fc); border:1px solid var(--border,#e2e4e9); border-radius:12px; padding:5px 5px 5px 14px; transition:border-color 0.15s; }
.wmc-input-wrap:focus-within { border-color:var(--accent,#253378); box-shadow:0 0 0 3px rgba(37,51,120,0.08); }
.wmc-chat-input { flex:1; border:none; background:none; outline:none; font-size:13px; font-family:inherit; line-height:1.5; resize:none; max-height:120px; min-height:22px; padding:3px 0; color:var(--text-primary,#1a1a2e); }
.wmc-chat-input::placeholder { color:var(--text-tertiary,#9ca3af); }
.wmc-send-btn,.wmc-stop-btn { width:30px; height:30px; border-radius:8px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; }
.wmc-send-btn { background:var(--accent-fill, #3566e0); color:#fff; }
.wmc-send-btn:hover { background:#1a2660; }
.wmc-stop-btn { background:#ef4444; color:#fff; }
.wmc-stop-btn:hover { background:#dc2626; }

/* Responsive */
@media (max-width: 900px) {
  .wmc-side { width: 240px; min-width: 200px; }
}
@media (max-width: 700px) {
  /* Too narrow to split with the live browser at all. */
  .wmc-side, .wmc-splitter-v { display: none; }
}

/* ---- Resizable panel splitters ---- */
.wmc-splitter-h {
  height: 5px;
  cursor: row-resize;
  background: var(--border, #e2e4e9);
  flex-shrink: 0;
  transition: background 0.15s;
  touch-action: none;
}
.wmc-splitter-h:hover { background: var(--accent, #474ecb); }
.wmc-splitter-v {
  width: 5px;
  cursor: col-resize;
  background: var(--border, #e2e4e9);
  flex-shrink: 0;
  transition: background 0.15s;
  touch-action: none;
}
.wmc-splitter-v:hover { background: var(--accent, #474ecb); }

/* ---- Docked mini chat panel (item 0ee2dee2) ---- */
/* A chat-only Co-Pilot surface any screen can pop up (e.g. Requirements) so
   the user can ask a question without leaving the page. Reuses the same
   .wmc-chat-messages / .wmc-chat-input-area chrome as the full page. */
.wmc-mini-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 360px;
  height: 460px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e2e4e9);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  z-index: 500;
  overflow: hidden;
}
.wmc-mini-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border, #e2e4e9);
  background: var(--bg-secondary, #f8f9fc);
  flex-shrink: 0;
}
.wmc-mini-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #1a1a2e); }
.wmc-mini-header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.wmc-mini-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 4px 7px;
  border-radius: 6px;
  color: var(--text-muted, #6b7280);
}
.wmc-mini-btn:hover { color: var(--text-secondary, #6b7280); background: var(--bg-hover, rgba(83,152,246,0.04)); }
.wmc-mini-messages { flex: 1 1 0; }

@media (max-width: 480px) {
  .wmc-mini-panel { right: 10px; left: 10px; bottom: 10px; width: auto; }
}