/* assets/css/features/analyst_widget.css
   VERITAS-27: floating AI analyst widget. All rules scoped under aw-. */

#analyst-widget-root { --aw-accent: #2c5f8a; --aw-accent-dark: #214a6d; }

/* Published by the widget from window.visualViewport (see
   analyst_widget_feature.js). Declared here so the panel has sane geometry
   before that runs, and on any browser that lacks the API. 100vh rather than
   100dvh as the floor: universally supported, and only ever a fallback. */
:root {
  --aw-vvh: 100vh;        /* height of the VISIBLE viewport, keyboard excluded */
  --aw-vvtop: 0px;        /* how far the visual viewport has scrolled down */
  --aw-bottom-bar: 0px;   /* a vertical's permanent fixed notice bar, measured */
}

.aw-hidden { display: none !important; }

/* ── floating action button ─────────────────────────────────────── */
.aw-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9500;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--aw-accent);
  background: var(--myceo-surface-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aw-fab img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}
.aw-fab:hover { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.aw-fab-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #4cd964;
  border: 2px solid var(--myceo-border-mid);
}
.aw-header-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: var(--myceo-surface-1);
}

/* ── panel ───────────────────────────────────────────────────────── */
.aw-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 9500;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 600px;
  max-height: calc(100vh - 120px);
  background: var(--myceo-surface-1);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
}

.aw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--aw-accent);
  /* Pinned, NOT --myceo-text-primary: this header keeps its accent fill in
     both themes, so following the theme's ink turns it near-black on blue
     (2.77:1) the moment light mode is on. */
  color: #F2F7FB;
  flex-shrink: 0;
}
.aw-title { display: flex; align-items: center; gap: 8px; }
.aw-status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6ee76e;
  box-shadow: 0 0 6px #6ee76e;
}
.aw-name { font-weight: 700; font-size: 15px; }
.aw-subtitle { opacity: 0.85; font-size: 12px; }
.aw-header-actions { display: flex; gap: 4px; }
.aw-icon-btn {
  /* These sit ON the accent header, which keeps its fill in both themes, so
     they inherit its ink rather than the theme's - the same reason .aw-header
     pins its colour. Following --myceo-text-primary put near-black icons on
     blue (2.77:1) the moment light mode was switched on. */
  background: transparent; border: none; color: inherit;
  width: 28px; height: 28px; border-radius: 6px;
  cursor: pointer; font-size: 15px; line-height: 1;
}
.aw-icon-btn:hover { background: rgba(255, 255, 255, 0.18); }

/* ── body / messages ─────────────────────────────────────────────── */
.aw-body { flex: 1; min-height: 0; display: flex; }
.aw-messages, .aw-history {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--myceo-surface-1);
}

.aw-msg { display: flex; gap: 8px; max-width: 100%; }
.aw-msg-user { justify-content: flex-end; }
.aw-msg-user .aw-bubble {
  background: var(--aw-accent);
  color: var(--myceo-text-primary);
  border-radius: 14px 14px 4px 14px;
}
.aw-msg-assistant .aw-bubble {
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 14px 14px 14px 4px;
}
.aw-bubble {
  padding: 10px 12px;
  max-width: 85%;
  min-width: 0;
  line-height: 1.45;
  word-wrap: break-word;
}
.aw-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: flex-end;
}
.aw-avatar img { width: 100%; height: 100%; display: block; }
.aw-text { white-space: normal; }
.aw-error { color: var(--myceo-ink-critical); }   /* rose-400: 7.14:1 here, where status-critical is 4.09 */

/* thinking dots */
.aw-thinking { display: inline-flex; gap: 4px; margin-right: 8px; }
.aw-thinking span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #9db3c8;
  animation: aw-bounce 1.2s infinite ease-in-out;
}
.aw-thinking span:nth-child(2) { animation-delay: 0.15s; }
.aw-thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aw-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.5; }
  35% { transform: translateY(-5px); opacity: 1; }
}
.aw-thinking-label { color: #7a8ba0; font-size: 12px; }

/* chart */
.aw-chart-box {
  margin-top: 10px;
  height: 220px;
  background: var(--myceo-surface-1);
  position: relative;
}
.aw-png-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  padding: 2px 7px;
  opacity: 0.65;
}
.aw-png-btn:hover { opacity: 1; }
.aw-chart-types {
  position: absolute;
  top: 2px;
  left: 2px;
  display: inline-flex;
  gap: 2px;
}
.aw-chart-type {
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  color: #7a8ba0;
  border-radius: 6px;
  font-size: 9px;
  padding: 2px 6px;
  cursor: pointer;
  opacity: 0.75;
}
.aw-chart-type:hover { opacity: 1; }
.aw-chart-type-active { border-color: var(--aw-accent); color: var(--myceo-accent-blue); font-weight: 700; opacity: 1; }

/* inline results table (backlog #4) */
.aw-table { margin-top: 8px; font-size: 12px; }
.aw-table summary { cursor: pointer; color: #6b8dab; font-size: 12px; user-select: none; }
.aw-table-scroll { overflow-x: auto; margin-top: 6px; border: 1px solid var(--myceo-border-mid); border-radius: 6px; }
.aw-table table { border-collapse: collapse; width: 100%; font-size: 11px; }
.aw-table th, .aw-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--myceo-border-mid);
  text-align: left;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aw-table th { background: var(--myceo-surface-2); color: var(--myceo-text-primary); font-weight: 600; position: sticky; top: 0; }
.aw-table tr:last-child td { border-bottom: none; }
.aw-table .aw-num { text-align: right; font-variant-numeric: tabular-nums; }
.aw-table-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 6px; color: #7a8ba0; font-size: 11px;
}
.aw-table-nav .aw-chip[disabled] { opacity: 0.35; cursor: default; }

/* SQL toggle */
.aw-sql { margin-top: 8px; font-size: 12px; }
.aw-sql summary { cursor: pointer; color: #6b8dab; user-select: none; }
.aw-sql pre {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--myceo-surface-2);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* meta row: freshness + feedback */
.aw-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #8896a6;
}
.aw-fresh-stale { color: #b3812f; }
.aw-fresh-late { color: var(--myceo-ink-critical); font-weight: 700; }   /* see .aw-error */
.aw-feedback { display: inline-flex; gap: 2px; }
.aw-fb {
  background: transparent; border: none; cursor: pointer;
  font-size: 13px; padding: 2px 4px; border-radius: 4px;
  filter: grayscale(1); opacity: 0.55;
}
.aw-fb:hover { filter: none; opacity: 1; background: var(--myceo-surface-2); }
.aw-fb-done { color: #59a14f; font-size: 11px; }

/* clarify / followup chips */
.aw-followups { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.aw-chip {
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  color: var(--myceo-accent-blue);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.aw-chip:hover { background: var(--myceo-surface-2); }

/* End-of-demo call to action. NOT an .aw-chip: chips are auto-wired to send
   their data-q to Scarlett, and this one opens the beta funnel instead. A
   filled accent button so the last thing a prospect sees reads as the next
   step, not another suggestion. */
.aw-demo-finished .aw-book {
  display: inline-block;
  margin-top: 4px;
  background: var(--myceo-accent-blue);
  color: var(--myceo-bg-core);
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.aw-demo-finished .aw-book:hover { filter: brightness(1.06); }

/* history */
.aw-hist-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}
.aw-hist-item:hover { border-color: var(--aw-accent); }
.aw-hist-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.aw-hist-date { color: #8896a6; font-size: 11px; flex-shrink: 0; }
.aw-hist-empty { color: #8896a6; text-align: center; padding: 24px 0; }

/* meta actions (save + feedback) */
.aw-meta-actions { display: inline-flex; align-items: center; gap: 6px; }
.aw-save-btn {
  background: transparent;
  border: 1px solid var(--myceo-border-mid);
  color: var(--myceo-accent-blue);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  cursor: pointer;
}
.aw-save-btn:hover { background: var(--myceo-surface-1); }

/* saved requests view */
.aw-saved-item {
  background: var(--myceo-surface-1);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aw-saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.aw-saved-actions { display: inline-flex; gap: 4px; flex-shrink: 0; }
.aw-sched-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--myceo-text-secondary);
  background: var(--myceo-surface-1);
  border-radius: 8px;
  padding: 6px 8px;
}
.aw-sched-off { opacity: 0.45; text-decoration: line-through; }
.aw-sched-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.aw-sched-form select,
.aw-sched-form input {
  border: 1px solid var(--myceo-border-mid);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 12px;
  background: var(--myceo-surface-1);
}
.aw-sched-form input[name="dayOfMonth"] { width: 58px; }

/* threshold alerts (backlog #5) */
.aw-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--myceo-accent-blue);
  text-transform: uppercase;
  margin-top: 6px;
}
.aw-alert-form { margin-top: 8px; }
.aw-enable-row { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

/* anomaly heads-up (backlog #8) */
.aw-anomaly-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--myceo-status-warning);
}

/* investigation card */
.aw-invest-list { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }
.aw-invest-list li { margin: 3px 0; }
.aw-invest-ruled { color: #8896a6; }
.aw-invest-step { margin-top: 6px; font-size: 11px; }

/* drafted ticket proposal */
.aw-ticket {
  margin-top: 10px;
  border-top: 1px dashed var(--myceo-border-mid);
  padding-top: 8px;
}
.aw-ticket-summary { font-size: 12px; font-weight: 600; color: var(--myceo-accent-blue); margin: 4px 0; }

/* customer 360 card (backlog #9) */
.aw-c360 {
  margin-top: 10px;
  border: 1px solid var(--myceo-border-mid);
  border-radius: 10px;
  padding: 12px;
  background: var(--myceo-surface-2);
}
.aw-c360-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.aw-c360-name { font-weight: 700; font-size: 14px; color: var(--myceo-accent-blue); }
.aw-c360-sub { font-size: 11px; color: #7a8ba0; }
.aw-c360-segment {
  background: var(--myceo-surface-1); border: 1px solid var(--myceo-border-mid); color: var(--myceo-accent-blue);
  border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.aw-c360-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 10px; text-align: center;
}
.aw-c360-v { display: block; font-weight: 700; font-size: 13px; color: var(--myceo-accent-blue); }
.aw-c360-l { display: block; font-size: 10px; color: #8896a6; text-transform: uppercase; }
.aw-c360-years {
  display: flex; align-items: flex-end; gap: 6px;
  margin-top: 12px; height: 60px;
}
.aw-c360-year { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.aw-c360-year span { font-size: 9px; color: #8896a6; }
.aw-c360-bar { width: 100%; max-width: 26px; background: #7fa8cc; border-radius: 3px 3px 0 0; }
.aw-c360-sec { margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--myceo-accent-blue); text-transform: uppercase; }
.aw-c360-item { cursor: default; }
.aw-c360-orders { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.aw-c360-orders td { padding: 3px 6px; border-bottom: 1px solid var(--myceo-border-mid); }

/* composer */
.aw-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--myceo-border-mid);
  background: var(--myceo-surface-1);
  flex-shrink: 0;
}
.aw-composer textarea {
  flex: 1;
  resize: none;
  /* Both stated explicitly. Neither was set, so the textarea took the
     browser's default white field and INHERITED its ink from the panel -
     near-white text on white, 1.18:1, while you type. A form control that
     sets one without the other is a coin flip about which theme it lands in;
     the same fault in mirror image as a select with no ink in dark mode. */
  background: var(--myceo-surface-2);
  color: var(--myceo-text-primary);
  border: 1px solid var(--myceo-border-mid);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  max-height: 120px;
  outline: none;
}
.aw-composer textarea::placeholder { color: var(--myceo-text-dim); }
.aw-composer textarea:focus { border-color: var(--aw-accent); }
.aw-send {
  width: 38px; height: 38px;
  border: none; border-radius: 10px;
  background: var(--aw-accent); color: var(--myceo-text-primary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aw-send:hover { background: var(--aw-accent-dark); }
.aw-send:disabled { opacity: 0.5; cursor: default; }
.aw-mic { background: var(--myceo-surface-1); color: var(--myceo-accent-blue); }
.aw-mic:hover { background: var(--myceo-surface-2); }
.aw-mic-live { background: #C81E3A;   /* was #e15759: 3.11:1 under white, now 4.8 */ color: var(--myceo-text-primary); animation: aw-pulse 1.2s infinite; }
@keyframes aw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(225, 87, 89, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(225, 87, 89, 0); }
}

/* ── Phones (VERITAS-102 phase 4) ────────────────────────────────────
   Chat takes the whole screen. Selectors are scoped under the root ID
   so they outrank the engineer-panel offsets defined further down
   (which otherwise win by cascade order and push Sebastian's panel
   off the top of the screen).

   ── The composer used to be invisible on a phone (MYC-90) ───────────
   This block used to say that 100dvh keeps the composer above the
   on-screen keyboard. IT DOES NOT, and the claim cost a demo rehearsal.
   Dynamic viewport units track the browser's OWN collapsing chrome (the
   URL bar). The software keyboard is drawn OVER the page and changes
   neither vh nor dvh, so a 100dvh panel keeps its full height and puts
   the composer underneath the keyboard: you can type, and you cannot see
   what you are typing.

   window.visualViewport IS keyboard-aware, so the panel is sized from
   that instead, via --aw-vvh / --aw-vvtop. The panel is anchored to the
   TOP and translated down by the visual viewport's own offset, because
   `position: fixed` resolves against the LAYOUT viewport, which does not
   move when iOS scrolls the visual one to reveal a focused field.

   The second cause was the vertical's permanent notice bar: fixed to the
   bottom at z-index 100000 against this panel's 9500, so it painted over
   the composer. It must stay on top and visible in every screenshot
   (MYC-88 D3), so the composer keeps clear of it rather than fighting
   it - by its MEASURED height, since it wraps to two lines on a narrow
   phone. */
@media (max-width: 520px) {
  #analyst-widget-root .aw-panel {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;              /* floor, for anything without the custom property */
    height: var(--aw-vvh);      /* keyboard-aware; published by the widget */
    max-height: none;
    transform: translateY(var(--aw-vvtop));
    border-radius: 0;
    padding-bottom: 0;
    /* Override the desktop resize block defined further down. Without these
       a viewport shorter than 320px (landscape, keyboard up) makes the panel
       overflow its own box and scroll, which hides the composer a third
       way. */
    overflow: hidden;
    min-height: 0;
  }
  /* Clear of the home bar AND of any permanent fixed notice bar above it. */
  #analyst-widget-root .aw-composer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom) + var(--aw-bottom-bar));
  }
  #analyst-widget-root .aw-header {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  /* 16px stops iOS zooming the page when the composer gets focus */
  #analyst-widget-root .aw-composer textarea { font-size: 16px; }
  /* Anything rendered into the thread (charts, cards) fits the panel */
  #analyst-widget-root .aw-messages canvas,
  #analyst-widget-root .aw-messages img { max-width: 100%; }

  #analyst-widget-root .aw-fab {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  }
  #analyst-widget-root .aw-fab-engineer {
    bottom: calc(max(16px, env(safe-area-inset-bottom) + 8px) + 70px);
  }
  #analyst-widget-root .aw-fab-engineer.aw-fab-solo {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  }
}

/* ── Sebastian, the AI Engineer (VERITAS-96) ─────────────────────────
   Matching avatar treatment for both agents: circular photo in a
   colored identity ring — Scarlett blue (analyst), Sebastian slate
   (engineer). Sebastian stacks above Scarlett bottom-right. */
.aw-fab img { object-fit: cover; }
#aw-fab { border: 3px solid var(--myceo-accent-blue); }
.aw-fab-engineer { bottom: 94px; border: 3px solid #4a4f57; }
/* Sebastian's dot uses the shared freshness colors (VERITAS-106) */
/* Sebastian-only grant: no Scarlett FAB below him, use the base slot */
.aw-fab-engineer.aw-fab-solo { bottom: 24px; }
.aw-fab-solo + .aw-panel-engineer, .aw-fab-solo ~ .aw-panel-engineer { bottom: 92px; }
.aw-panel-engineer { bottom: 162px; }
.aw-header-engineer { background: linear-gradient(135deg, #23272e 0%, #4a4f57 100%); }
#se-tickets .aw-saved-item { margin: 8px 12px; }
#se-tickets .aw-hist-title a { color: var(--myceo-accent-blue); text-decoration: none; font-weight: 600; }

/* Engineer chat panel (VERITAS-96 v2) */
.aw-panel-engineer .aw-composer { border-top: 1px solid var(--myceo-border-mid); }

/* ── Light markdown in assistant bubbles (VERITAS-105) ─────────────── */
.aw-text code {
  background: var(--myceo-border-mid);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.92em;
}
.aw-text a { color: var(--myceo-accent-blue); }
.aw-text a:hover { text-decoration: underline; }

/* ── Availability status dots (VERITAS-106) ──────────────────────────
   Applied by _refreshStatusDots() to both agents' FAB + header dots,
   from the caller's daily token budget: default green = available;
   yellow = within 50K tokens of the daily ceiling; red = over it. */
.aw-fab-dot.aw-dot-stale, .aw-status-dot.aw-dot-stale { background: var(--myceo-accent-blue); box-shadow: 0 0 6px #ffc107; }
.aw-fab-dot.aw-dot-late,  .aw-status-dot.aw-dot-late  { background: #e15759; box-shadow: 0 0 6px #e15759; }

/* ── Movable and resizable panel (MYC-39) ──────────────────────────────────
   The header is the drag handle, so text inside the conversation can still be
   selected. `resize` needs a non-visible overflow to show its grip. */
.aw-panel {
  resize: both;
  overflow: auto;
  min-width: 320px;
  min-height: 320px;
}

.aw-panel .aw-header {
  cursor: grab;
  touch-action: none;   /* or a touch drag scrolls the page instead */
}

.aw-panel.aw-dragging .aw-header { cursor: grabbing; }

/* No animation while dragging: a transition on position makes the panel lag
   the pointer, which reads as the drag being broken. */
.aw-panel.aw-dragging { transition: none; }

/* Full-screen below the breakpoint, where moving it means nothing. */
@media (max-width: 640px) {
  .aw-panel { resize: none; }
  .aw-panel .aw-header { cursor: default; }
}

/* ── Seth, monitoring / operations / security (MYC-24) ───────────────
   Third identity ring in the same treatment as the other two: Scarlett
   accent-blue (analyst), Sebastian slate (engineer), Seth teal-green —
   the colour already used for "good" everywhere else, because his
   resting state is the one you want to see.

   Stacking, bottom-right, from the base slot upward:
     Scarlett   24px   Sebastian   94px   Seth  164px
   with .aw-fab-solo (only agent) and .aw-fab-second (one other agent)
   collapsing him down as the slots below him go unused. Without those
   two, a Seth-only admin gets a button floating in the gap where two
   buttons would have been. */
.aw-fab-seth { bottom: 164px; border: 3px solid #34D399; }
.aw-fab-seth.aw-fab-second { bottom: 94px; }
.aw-fab-seth.aw-fab-solo { bottom: 24px; }
.aw-panel-seth { bottom: 232px; }
.aw-fab-seth.aw-fab-second ~ .aw-panel-seth { bottom: 162px; }
.aw-fab-seth.aw-fab-solo ~ .aw-panel-seth { bottom: 92px; }
.aw-header-seth { background: linear-gradient(135deg, #12263A 0%, #1E5F52 100%); }
/* A mark, not a photo — contain rather than the cover used for headshots,
   or the shield gets cropped. */
.aw-fab-seth img, .aw-panel-seth .aw-header-avatar,
.aw-panel-seth .aw-avatar img { object-fit: contain; }

/* The report card. */
.aw-ops {
  margin-top: 10px;
  border: 1px solid var(--myceo-border, #2A3441);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}
/* Severity is carried by the WORD as well as the colour — nobody has to
   distinguish these by hue to read the answer. */
.aw-ops-ok       { border-left-color: #34D399; }
.aw-ops-watch    { border-left-color: #7DD3FC; }
.aw-ops-degraded { border-left-color: #EA580C; }
.aw-ops-critical { border-left-color: #E11D48; }
.aw-ops-sev {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aw-ops-ok .aw-ops-sev       { color: #34D399; }
.aw-ops-watch .aw-ops-sev    { color: #7DD3FC; }
.aw-ops-degraded .aw-ops-sev { color: #EA580C; }
.aw-ops-critical .aw-ops-sev { color: #FB7185; }

.aw-ops-findings { list-style: none; margin: 8px 0 0; padding: 0; }
.aw-ops-findings li { margin-bottom: 8px; }
.aw-ops-findings li:last-child { margin-bottom: 0; }
.aw-ops-what { font-size: 13px; }
.aw-ops-evidence {
  font-size: 11px;
  color: var(--myceo-text-dim);
  /* Evidence is usually an alarm name, a metric or a log line. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
  margin-top: 2px;
}
.aw-ops-action { font-size: 12px; margin-top: 3px; }

/* What he could NOT see. Styled to be read, not tucked away: the gap
   between "nothing is wrong" and "nothing that I can see is wrong" is
   the whole difference, and burying it collapses the second into the
   first. */
.aw-ops-gap {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--myceo-border, #2A3441);
}
.aw-ops-gap-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--myceo-text-dim);
}
.aw-ops-gap ul { margin: 4px 0 0; padding-left: 16px; }
.aw-ops-gap li { font-size: 11px; color: var(--myceo-text-dim); }