/* 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; }

.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(--aw-accent); 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(--aw-accent);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.aw-chip:hover { background: var(--myceo-surface-2); }

/* 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(--aw-accent);
  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(--aw-accent);
  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(--aw-accent); }
.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). 100dvh tracks the visual viewport, so
   the composer stays visible above the on-screen keyboard; safe-area
   insets cover notches and home bars. */
@media (max-width: 520px) {
  #analyst-widget-root .aw-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;      /* fallback */
    height: 100dvh;     /* shrinks with the keyboard */
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #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(--aw-accent); }
.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); }