/* ============================================================================
 * vega-shell.css — Vega-specific shell styles
 *
 * The @mach33/ui package ships shell.css with the base layout primitives
 * (.m33-app grid, .m33-panel-left, .m33-panel-right, .m33-user, etc.).
 * THIS file is the Vega-specific layer on top — rail widths, chevrons,
 * scrollbars, modals, search bar, chat-message scoping, footer pills.
 *
 * Served from public/m33-static/ via the /m33 mount (framework-server.js
 * line 122). Link tag injected by lib/vega-shell-extras.js headExtras().
 *
 * If you're adding a new style:
 *   - One-off, scoped to one element → inline style="..." is fine
 *   - Repeated 2+ times, OR needs :hover/:focus/media-queries → put it here
 *   - Dynamic (depends on state) → keep the imperative cssText / classList
 *     toggle in JS, but add the class definition here
 * ========================================================================= */

/* ── Compact mode ──────────────────────────────────────────────────────────
 * When ?host=<known> or ?compact=1 (iframe embed), hide standalone shell
 * chrome so the chat panel fills the iframe cleanly. */
html[data-compact="1"], html[data-compact="1"] body { background: transparent !important; }
html[data-compact="1"] .m33-app { grid-template-columns: 0 1fr 0 !important; }
html[data-compact="1"] .m33-app.m33-left-collapsed { grid-template-columns: 0 1fr 0 !important; }
html[data-compact="1"] .m33-app.m33-right-collapsed { grid-template-columns: 0 1fr 0 !important; }
html[data-compact="1"] .m33-app > nav,
html[data-compact="1"] .m33-app > aside,
html[data-compact="1"] .m33-app > header,
html[data-compact="1"] .m33-rail-toggle,
html[data-compact="1"] .m33-rail-chev { display: none !important; }

/* ── Rail widths + footer row height (override @mach33/ui defaults) ───
 * Columns:
 *   Left  : 240px expanded / 56px collapsed (navigation rail)
 *   Right : 294px (team-chat rail — 30% reduction from the original
 *           420px per Brant's call; chat panel was too wide)
 * Rows:
 *   Header: 56px (package default — kept)
 *   Center: 1fr  (package default — kept)
 *   Footer: 64px (was 32px; Vega's status bar holds LLM chips + 36px
 *           roster avatars + env+SHA+fabric, which need real vertical
 *           room. Below 64px the contents overflow the grid row and
 *           get clipped at the viewport bottom — user reported
 *           "contents are 90% outside the footer"). */
.m33-app {
  grid-template-columns: 240px 1fr 294px !important;
  grid-template-rows: 56px 1fr 64px !important;
}
.m33-app.m33-left-collapsed {
  grid-template-columns: 56px 1fr 294px !important;
  grid-template-rows: 56px 1fr 64px !important;
}
.m33-app.m33-right-collapsed {
  grid-template-columns: 240px 1fr 0 !important;
  grid-template-rows: 56px 1fr 64px !important;
}
.m33-app.m33-left-collapsed.m33-right-collapsed {
  grid-template-columns: 56px 1fr 0 !important;
  grid-template-rows: 56px 1fr 64px !important;
}

/* Rail-chevron positioning vars — STARTING values only.
 * installRailChevrons() (lib/vega-shell-extras.js ~line 1675) writes the
 * live rail width into these on every layout / collapse via
 * style.setProperty, so the chevrons slide with the rail edge.
 * NO !important — that would beat the dynamic JS write and pin the
 * chevron at 240px even when the rail collapses to 56px. */
:root { --m33-rail-chev-left: 240px; --m33-rail-chev-right: 294px; }

/* ── Sidebar collapse chevrons ────────────────────────────────────────────
 * Default-styled <button> was a sub-pixel sliver that no one noticed.
 * Pill-shaped, semi-transparent at rest, full opacity on hover. */
.m33-rail-chevron {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 22px; height: 44px; padding: 0;
  background: var(--m33-panel, #1a1d2c);
  border: 1px solid var(--m33-border, rgba(255,255,255,0.18));
  color: var(--m33-text, #e1e4ed);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.55;
  transition: opacity .12s, background .12s, transform .18s;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30);
}
.m33-rail-chevron:hover { opacity: 1; background: rgba(99,102,241,0.18); }
.m33-rail-chevron-left  { left: var(--m33-rail-chev-left, 240px); }
.m33-rail-chevron-right { right: var(--m33-rail-chev-right, 294px); border-radius: 8px 0 0 8px; }
.m33-rail-chevron-right svg { transform: scaleX(-1); }
.m33-rail-chevron.m33-flip svg { transform: scaleX(-1); }
.m33-rail-chevron-right.m33-flip svg { transform: none; }

/* ── App footer ──────────────────────────────────────────────────────────
 * Single full-width row at the bottom of the page, mirroring the header.
 * The @mach33/ui shell template already provides the right DOM:
 *   <footer class="m33-panel m33-footer" id="m33-footer">
 *     <div class="m33-footer-left">   …LLM status…           </div>
 *     <div class="m33-footer-center"> …team-presence roster… </div>
 *     <div class="m33-footer-right">  …env + SHA + fabric…   </div>
 *   </footer>
 * vega-shell-extras populates the three slots on boot.
 *
 * Two overrides on top of the package CSS:
 *   1. The agent skin (every Vega page) hides .m33-footer-left and
 *      .m33-footer-right via `visibility:hidden`. We always want them
 *      shown — re-enable here.
 *   2. Make the footer the same visual weight as the header: nudge
 *      the height up slightly, give footer-center a brighter color
 *      (the roster avatars want full opacity, not the muted footer
 *      default), and align the slots horizontally with consistent gaps. */
body[data-skin="agent"] .m33-footer-left,
body[data-skin="agent"] .m33-footer-right { visibility: visible !important; }

#m33-footer {
  /* Real status-bar height — generous enough that the avatars look
   * intentional and the LLM chips have presence (was 48px which the
   * user called "cramped to short"). Items inside scale up too via
   * the scoped overrides below. */
  min-height: 64px;
  padding: 10px 20px;
  font-size: 12px;
  background: var(--m33-bg, #0d0f14);
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
/* Footer-scoped avatar sizing — chat-panel rail stays at 28px; in
 * the global footer they shrink to 24px so the TEAM pill reads as
 * dense and small, matching the LLM + BUILD pills' visual weight. */
#m33-footer .m33-roster-avatar { width: 24px; height: 24px; }
#m33-footer div.m33-roster-avatar { font-size: 9px; }
#m33-footer .m33-presence-dot { width: 7px; height: 7px; }

/* Relay tier-1 header — smaller MEMBERS avatars (22px) so the pill
 * reads as compact in the new sticky/blurred header layout. */
.m33-tier1-header .m33-roster-avatar { width: 22px; height: 22px; }
.m33-tier1-header div.m33-roster-avatar { font-size: 9px; }
.m33-tier1-header .m33-presence-dot { width: 7px; height: 7px; }

/* Kill the 20px padding the @mach33/ui shell.css drops at the top of
 * the center main panel — that gap sat the Relay chat header below
 * the global app header by an extra 20px ("MASSIVE gap" the user
 * called out 2026-06-21). The Relay surface owns its own header
 * spacing now via .m33-tier1-header, so this padding is dead weight. */
#m33-panel-center { padding-top: 0 !important; }

/* The Relay header is now position:absolute on top of the surface so
 * the chat scrolls UNDER it (same overlay behavior as the composer at
 * the bottom). Anchor against the surface; the messages container's
 * inline padding-top:76px clears the overlap, mask softens the edge. */
.m33-agent-surface { position: relative; }
#m33-footer .m33-footer-left,
#m33-footer .m33-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--m33-text-muted, rgba(255,255,255,0.55));
}
#m33-footer .m33-footer-center {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
  /* Center slot is reserved for full-color roster avatars, not muted
   * text — clear the framework's color override. */
  color: var(--m33-text, #e1e4ed);
}
/* Labeled group containers — each slot wraps its content in a
 * .vega-footer-group with a .vega-footer-label prefix. Same min-height
 * across all three so the LLM / TEAM / BUILD pills read as a row of
 * matched chips. */
/* Shared base pill recipe — used by both the global app footer
 * (.vega-footer-group) and the Relay chat-panel header
 * (.vega-header-group). Same look on both so the top and bottom of
 * the app read as the same visual language. */
.vega-footer-group,
.vega-header-group {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  /* Locked height — keeps each pill in a row visually aligned. min-height
   * let the TEAM pill grow 2px because the presence dot has bottom:-1px
   * which bled past the avatar. height + visible overflow keeps the
   * dot showing while pinning the pill at 36px exactly. */
  height: 36px;
  box-sizing: border-box;
  overflow: visible;
}
/* Footer pills are a touch taller — host the 24px roster avatars
 * comfortably. */
.vega-footer-group { height: 40px; }

.vega-footer-label,
.vega-header-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  padding-right: 10px;
  margin-right: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* LLM pill content lives inside footer-left; pill-style not needed
 * anymore since the footer itself is the container. Just style the
 * dot + label. */
.vega-llm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7dffaf;
  box-shadow: 0 0 4px rgba(125,255,175,0.6);
  flex: 0 0 auto;
  transition: background 200ms;
}
.vega-llm-label {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
}
.vega-fabric-stats {
  font-size: 9px;
  opacity: 0.55;
  letter-spacing: 0.01em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
/* ── Roster avatar nodes (used in both the channel-rail header + the
 *    global footer pill via ChannelRailView.syncRosterDOM) ───────────── */
.m33-roster-node {
  position: relative;
  display: inline-block;
}
.m33-roster-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  background: rgba(255,255,255,0.10);
  transition: opacity 200ms, box-shadow 200ms;
}
/* When the avatar is the initials-fallback <div> (no avatar_url), it
 * needs flex centering for the letters; <img> just uses object-fit. */
div.m33-roster-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}
.m33-presence-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--m33-bg, #0d0f14);
  transition: background 200ms;
}

/* ── Scrollbars ────────────────────────────────────────────────────────────
 * Browser-default scrollbars on dark UIs read as harsh light stripes. */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.10);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
*::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.10) transparent; }

/* ── Patton agent skin overrides ──────────────────────────────────────────
 * Bump chat-meta visibility on the Patton agent skin so author labels
 * (PATTEN / user name) stand out. Vega defaults to 10px / muted;
 * Patton gets 11.5px, slightly less muted, and the author name a
 * vivid accent so the eye lands on it. Scoped to data-app so Vega's
 * chat stays as-is. */
body[data-app="patton"][data-skin="agent"] .m33-chat-meta {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}
body[data-app="patton"][data-skin="agent"] .m33-chat-author {
  font-weight: 700;
  color: #b8c0ff;
}
body[data-app="patton"][data-skin="agent"] .m33-chat-row.m33-from-user .m33-chat-author {
  color: #ffd9a8;
}
body[data-app="patton"][data-skin="agent"] .m33-chat-time {
  opacity: 0.85;
  font-weight: 500;
}

/* ── Page transition flash guard ──────────────────────────────────────────
 * Hide body content until the overlay is shown opaque on the new page.
 * The overlay element lives at the end of <body>; this style keeps the
 * intervening flash out of the user's view. Removed by the body-end script
 * once the overlay has taken over. */
html[data-m33-transitioning="1"] body > *:not(.m33-transition) { visibility: hidden; }
html[data-m33-transitioning="1"] body { background: #000; }

/* ── Modal size variants ──────────────────────────────────────────────────
 * Override the package's 540px default when openModal() is called with
 * opts.size. The body still scrolls on overflow; the FRAME is the part
 * that's fixed-sized. */
.m33-modal[data-m33-size="large"] {
  max-width: 1100px;
  max-height: calc(100vh - 64px);
}
.m33-modal[data-m33-size="fixed"] {
  /* Admin Settings: don't let content shifts (switching tabs, expanding
   * tables) resize the whole modal. Width and height are clamped within
   * the viewport so small screens don't overflow, but on a desktop the
   * modal lands at the same size every time. */
  width: min(1200px, calc(100vw - 48px));
  max-width: min(1200px, calc(100vw - 48px));
  height: min(800px, calc(100vh - 64px));
  max-height: min(800px, calc(100vh - 64px));
}
.m33-modal[data-m33-size="fixed"] .m33-modal-body {
  flex: 1 1 auto;
  min-height: 0; /* allow inner scroll instead of pushing the modal taller */
}

/* ── Global search bar ────────────────────────────────────────────────── */
.m33-global-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
  z-index: 200;
}
.m33-search-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  padding: 0 8px;
  height: 26px;
  width: 140px;
  transition: width 200ms ease, border-color 200ms ease, background 200ms ease;
}
.m33-search-input-wrap:focus-within {
  width: 260px;
  border-color: rgba(125,138,255,0.45);
  background: rgba(125,138,255,0.08);
}
.m33-search-icon {
  flex-shrink: 0;
  opacity: 0.45;
}
.m33-search-input-wrap:focus-within .m33-search-icon { opacity: 0.7; }
.m33-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #e8eaff;
  font: 500 11px/1.4 -apple-system, system-ui, sans-serif;
  letter-spacing: 0.01em;
  padding: 0;
}
.m33-search-input::placeholder { color: rgba(255,255,255,0.30); }
.m33-search-clear {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.4);
  font: 500 14px/1 sans-serif;
  cursor: pointer;
  padding: 0 1px;
  transition: color 120ms;
}
.m33-search-clear:hover { color: rgba(255,255,255,0.8); }
.m33-search-kbd {
  flex-shrink: 0;
  font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 1px 3px;
}
.m33-search-input-wrap:focus-within .m33-search-kbd { display: none; }

/* Dropdown results panel */
.m33-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 360px;
  max-height: 380px;
  overflow-y: auto;
  background: rgba(14,16,28,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 4px;
  z-index: 210;
}
.m33-search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 100ms;
}
.m33-search-result:hover,
.m33-search-result.m33-active {
  background: rgba(125,138,255,0.14);
}
.m33-search-result-glyph {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 -apple-system, system-ui, sans-serif;
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.m33-search-result-text {
  flex: 1; min-width: 0;
}
.m33-search-result-label {
  font: 500 13px/1.3 -apple-system, system-ui, sans-serif;
  color: #e8eaff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m33-search-result-sub {
  font: 400 11px/1.3 -apple-system, system-ui, sans-serif;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m33-search-result-score {
  flex-shrink: 0;
  font: 400 10px/1 ui-monospace, SFMono-Regular, monospace;
  color: rgba(255,255,255,0.2);
}
.m33-search-empty {
  padding: 16px;
  text-align: center;
  color: rgba(255,255,255,0.35);
  font: 400 12px/1.4 -apple-system, system-ui, sans-serif;
}

/* Surface highlighting: canvas cards, chat rows, table rows */
.m33-card.m33-search-dimmed {
  opacity: 0.12 !important;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.m33-card.m33-search-highlighted {
  box-shadow: 0 0 0 2px rgba(125,138,255,0.55), 0 0 16px rgba(125,138,255,0.15) !important;
  z-index: 1;
  transition: box-shadow 300ms ease;
}
.m33-chat-row.m33-search-dimmed {
  opacity: 0.15;
  transition: opacity 300ms ease;
}

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes m33-sandbox-pulse {
  0%, 100% { border-color: rgba(240,200,80,0.85); box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 12px rgba(240,200,80,0.25); }
  50%      { border-color: rgba(240,200,80,1);    box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 24px rgba(240,200,80,0.45); }
}
@keyframes m33spin { to { transform: rotate(360deg); } }

/* ── Thinking-bubble animation ────────────────────────────────────────────
 * Two cases:
 *  1. .m33-chat-msg.m33-thinking-empty — assigned to an empty assistant
 *     bubble while we wait for the first delta. Shows three pulsing
 *     dots so the user has a visible signal that Vega is working.
 *  2. .m33-chat-msg-thinking — applied during a tool round-trip
 *     ("Searching…"). Adds an italic + soft pulse so the placeholder
 *     reads as in-progress rather than as the final answer. */
.m33-chat-msg.m33-thinking-empty:empty::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin: 6px 2px 6px 0;
  width: 24px;
  height: 8px;
  background:
    radial-gradient(circle 3px at  4px 4px, currentColor 100%, transparent 101%),
    radial-gradient(circle 3px at 12px 4px, currentColor 100%, transparent 101%),
    radial-gradient(circle 3px at 20px 4px, currentColor 100%, transparent 101%);
  opacity: 0.55;
  animation: m33-thinking-dots 1.4s ease-in-out infinite;
}
@keyframes m33-thinking-dots {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 0.85; }
}
.m33-chat-msg-thinking {
  font-style: italic;
  opacity: 0.7;
  animation: m33-thinking-pulse 1.6s ease-in-out infinite;
}
@keyframes m33-thinking-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}

/* ── Markdown rendering inside assistant bubbles ──────────────────────────
 * mdToHtmlEscaped produces <h1>..<h4>, <strong>, <em>, <code>, <ul>,
 * <ol>, <blockquote>, <p>. Without scoped styles those inherit the
 * surrounding chat font and end up too large / not enough spaced.
 * Tighten them to the bubble's reading scale. */
.m33-chat-msg h1, .m33-chat-msg h2, .m33-chat-msg h3, .m33-chat-msg h4 {
  margin: 12px 0 4px;
  font-weight: 600;
  line-height: 1.25;
}
.m33-chat-msg h1 { font-size: 1.25em; }
.m33-chat-msg h2 { font-size: 1.15em; }
.m33-chat-msg h3 { font-size: 1.05em; }
.m33-chat-msg h4 { font-size: 1em; opacity: 0.85; }
.m33-chat-msg h1:first-child, .m33-chat-msg h2:first-child,
.m33-chat-msg h3:first-child, .m33-chat-msg h4:first-child { margin-top: 0; }
.m33-chat-msg p { margin: 6px 0; }
.m33-chat-msg p:first-child { margin-top: 0; }
.m33-chat-msg p:last-child  { margin-bottom: 0; }
.m33-chat-msg ul, .m33-chat-msg ol { margin: 6px 0 6px 18px; padding: 0; }
.m33-chat-msg li { margin: 2px 0; }
.m33-chat-msg code {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
.m33-chat-msg strong { font-weight: 600; }
.m33-chat-msg blockquote {
  margin: 6px 0;
  padding: 2px 10px;
  border-left: 2px solid rgba(255,255,255,0.25);
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────
 * Modality picker + mute (Relay header — UI scaffolding)
 *
 * Three pills (Text / Audio / Video), exactly one active at a time.
 * Mute button appears only when modality is Audio or Video.
 * State-only today; actual call wiring lands when /api/chat/stream
 * routes through the Proto's turn() in a later phase.
 * ───────────────────────────────────────────────────────────── */
.m33-modality-group { gap: 8px; }
.m33-modality-btn {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  font-family: inherit;
}
.m33-modality-btn:hover:not(.m33-active):not(:disabled) {
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.85);
}
.m33-modality-btn.m33-active {
  background: rgba(99,179,237,0.12);
  border-color: rgba(99,179,237,0.35);
  color: rgba(160,200,240,0.95);
}
.m33-modality-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.m33-mute-btn {
  height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.80);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  font-family: inherit;
}
.m33-mute-btn:hover:not([data-muted="1"]):not(:disabled) {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,1);
}
.m33-mute-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: rgba(255,255,255,0.4);
}
.m33-mute-btn[data-muted="1"] {
  background: rgba(220,80,80,0.15);
  border-color: rgba(220,80,80,0.45);
  color: rgba(255,160,160,0.95);
}
.m33-mute-btn[data-muted="1"]:hover {
  background: rgba(220,80,80,0.20);
  border-color: rgba(220,80,80,0.60);
}
.m33-mute-icon { font-size: 13px; line-height: 1; }

/* ─────────────────────────────────────────────────────────────
 * Channel pill — split (label-toggle + ▾ arrow) + Tasks pill inside CHANNEL
 *
 * The channel pill is now two adjacent button zones rendered as one pill:
 *   .m33-tc-chan-toggle  — click name flips chat↔tasks
 *   .m33-tc-chan-arrow   — click ▾ opens channel/DM picker
 * Tasks pill (.m33-tier1-btn-tasks) lives INSIDE the CHANNEL group
 * alongside the channel pill — they are mutually-exclusive centre-panel views.
 * ───────────────────────────────────────────────────────────── */
.m33-tc-chan-split {
  /* Pill chrome moves to the wrap; inner buttons are flush. Mirrors the
   * existing .m33-tc-chan look (transparent + 14px radius active state). */
  border-radius: 14px;
  background: rgba(99,102,241,0.18);
  border: 1px solid var(--m33-accent, #6366f1);
}
.m33-tc-chan-split .m33-tc-chan-toggle:hover,
.m33-tc-chan-split .m33-tc-chan-arrow:hover {
  background: rgba(255,255,255,0.06);
}
.m33-tc-chan-split .m33-tc-chan-arrow:hover { opacity: 1; }

/* Tasks pill inside the CHANNEL group — match the modality pills' size + shape
 * so the two centre-panel pickers (channel chat / tasks) read as siblings. */
.m33-tier1-btn-tasks {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.m33-tier1-btn-tasks:hover:not(.m33-active) {
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.85);
}
.m33-tier1-btn-tasks.m33-active {
  background: rgba(99,179,237,0.12);
  border-color: rgba(99,179,237,0.35);
  color: rgba(160,200,240,0.95);
}

/* When tier-1 is "tasks", de-emphasise the channel pill so the user can
 * see at a glance which view is active. Keep it clickable — clicking the
 * channel label flips back to chat. */
.m33-agent-surface[data-tier1="tasks"] .m33-tc-chan-split {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}

/* ============================================================
 * Shared agent header — 3-box chrome (views · Relay · profile)
 * A "project/views" box, a "Relay" box (implanted agent), and a profile box,
 * all sharing the same blue rounded-rect outline; plus a header bottom edge
 * line and a soft chat-stream fade under the header and composer. Shared
 * across all agent skins; only box contents differ.
 * ============================================================ */
body[data-skin="agent"] .m33-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body[data-skin="agent"] .nw-research-box .nw-grp-label {
  font: 600 10px/1 inherit; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0 8px 0 4px; align-self: center; white-space: nowrap;
}
body[data-skin="agent"] .nw-relay-box { margin-left: 8px; }

/* Project/views group, Relay group, and profile group share the same blue
 * outline + rounded-rect shape (the Relay box keeps the shape, signalling the
 * implanted agent by content rather than a different border). */
body[data-skin="agent"] .nw-research-box,
body[data-skin="agent"] .nw-relay-box,
body[data-skin="agent"] .nw-profile-box {
  border: 1px solid rgba(125,138,255,0.55) !important;
  box-shadow: 0 0 0 1px rgba(125,138,255,0.12);
}
body[data-skin="agent"] .nw-profile-box {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px 3px 6px; border-radius: 8px;
}

/* Newton: the project dropdown IS the context control, so hide the older
 * session switcher. Vega/Patton reuse that switcher, moved into the views box
 * (so it stays visible there) — hence this hide stays Newton-only. */
body[data-app="newton"] .m33-ideation-switcher { display: none !important; }

/* Context dropdown — replaces the static "Research" label. Newton shows the
 * current project; Vega/Patton mount the session switcher into the slot. */
body[data-skin="agent"] .nw-proj-dd { position: relative; display: inline-flex; align-items: center; }
body[data-skin="agent"] .nw-proj-dd-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font: 600 11px/1 inherit; color: rgba(255,255,255,0.8);
  padding: 0 8px 0 6px; white-space: nowrap;
}
body[data-skin="agent"] .nw-proj-dd-btn:hover { color: #fff; }
body[data-skin="agent"] .nw-proj-dd-chev { font-size: 9px; opacity: 0.55; }
/* Fixed positioning so the menu escapes the fixed-height header's clip;
 * coordinates are set from the button's rect when it opens. */
body[data-skin="agent"] .nw-proj-dd-menu {
  position: fixed; min-width: 240px;
  background: #1a1d2c; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  padding: 6px; z-index: 4000;
}
body[data-skin="agent"] .nw-proj-dd-item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 8px 10px; border-radius: 7px; background: none; border: none;
  cursor: pointer; font: inherit; color: #dfe1f1; text-decoration: none;
}
body[data-skin="agent"] .nw-proj-dd-item:hover { background: rgba(125,138,255,0.12); }
body[data-skin="agent"] .nw-pdd-name { display: block; font: 600 12px/1.3 inherit; color: #fff; }
body[data-skin="agent"] .nw-pdd-sub { display: block; font: 11px/1.3 inherit; color: rgba(255,255,255,0.45); }
body[data-skin="agent"] .nw-pdd-all { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 4px; padding-top: 8px; }

/* Vega/Patton mount the session switcher into the views-box slot. The switcher
 * is an absolutely-positioned standalone banner by default — neutralise that
 * inside the slot so it flows inline within the group box. */
body[data-skin="agent"] .nw-session-slot .m33-ideation-switcher {
  position: static !important; inset: auto !important; transform: none !important;
  margin: 0 !important; display: inline-flex !important;
}

/* Chat stream fades under the header and composer (like Newton). */
body[data-skin="agent"] .m33-chat-stream {
  padding-top: 40px;
  padding-bottom: 40px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

/* In Relay (team) posture the right rail is expanded across the centre — the
 * persistent Relay panel takes the full width (see §5.1 grid-column 2/4). The
 * right collapse chevron then has nothing to collapse and fights the expand,
 * which reads as "the side panel is broken". Hide it in Relay; it returns in
 * the research views (Chat/Canvas/Graph) where the rail is a normal side panel.
 * The left nav chevron stays (collapsing the nav in Relay is still useful). */
body[data-manifold="team"] .m33-rail-chevron-right { display: none !important; }