/* wow lane: conv. STRIDE "own light" in Conversations (2026-09-26).
   Colour means people, ember means now. A DM is lit by the other person, a
   channel's floor by its two latest speakers, the thread pane by the parent
   author, and Scout's ember floor + mark glow only while it works.
   Driven by stride-wow-conv.js (classes/data on #scoutPrivatePane and
   #chatContextRail). Motion: opacity and transform ONLY. */

#chatTool #scoutPrivatePane.wow-conv {
  --wow-floor: .5;
  --wow-head-h: 64px;
  position: relative;
  isolation: isolate;
}
:root[data-theme="light"] #chatTool #scoutPrivatePane.wow-conv { --wow-floor: .6; }
#chatTool #scoutPrivatePane.wow-conv[data-wow-conv="dm"] { --wow-floor: .62; }
:root[data-theme="light"] #chatTool #scoutPrivatePane.wow-conv[data-wow-conv="dm"] { --wow-floor: .9; }

/* ---------- DM ground: the other person's tile ground, full pane ---------- */
#chatTool #scoutPrivatePane.wow-conv[data-wow-conv="dm"] {
  background: color-mix(in oklab, var(--tint) 7%, var(--bg-app)) !important;
}
:root[data-theme="light"] #chatTool #scoutPrivatePane.wow-conv[data-wow-conv="dm"] {
  background: color-mix(in oklab, var(--tint) 7%, var(--bg-app)) !important;
}
:root[data-theme="light"] #chatTool #scoutPrivatePane.wow-conv[data-wow-conv="dm"] .scout-chat-msg--user .scout-chat-text {
  background: color-mix(in srgb, var(--text-1, #1D1916) 7%, transparent);
}

/* The header no longer paints its own slab (it would cut the ground and the
   floor); the timeline is MASKED under it instead, so no message pixel is
   visible behind the header (DESIGN.md: content fades under the header). */
#chatTool #scoutPrivatePane.wow-conv .chat-convo-head {
  background: transparent !important;
}
#chatTool #scoutPrivatePane.wow-conv .chat-convo-head::after,
#chatTool #scoutPrivatePane.wow-conv::after {
  display: none !important;
}
#chatTool #scoutPrivatePane.wow-conv #scoutChatThread {
  padding-top: calc(var(--wow-head-h) + 56px) !important;
  -webkit-mask-image: linear-gradient(transparent 0, transparent calc(var(--wow-head-h) + 32px), #000 calc(var(--wow-head-h) + 44px), #000 calc(100% - var(--wow-mask-bottom, 88px)), transparent calc(100% - var(--wow-mask-bottom-end, 40px)));
  mask-image: linear-gradient(transparent 0, transparent calc(var(--wow-head-h) + 32px), #000 calc(var(--wow-head-h) + 44px), #000 calc(100% - var(--wow-mask-bottom, 88px)), transparent calc(100% - var(--wow-mask-bottom-end, 40px)));
}
/* phone: the header is in flow above the timeline; content only needs a short
   fade at its top edge so it never collides with the header */
#chatTool #scoutPrivatePane.wow-conv.wow-conv--flowhead #scoutChatThread {
  padding-top: 30px !important;
  -webkit-mask-image: linear-gradient(transparent 0, transparent 6px, #000 30px, #000 calc(100% - var(--wow-mask-bottom, 16px)), transparent 100%);
  mask-image: linear-gradient(transparent 0, transparent 6px, #000 30px, #000 calc(100% - var(--wow-mask-bottom, 16px)), transparent 100%);
}
/* the lights sit at z -1 inside the pane's own stacking context (isolation),
   so the app's header/menus/composer keep their exact stacking untouched */

/* ---------- the floor: pools of the latest speakers along the bottom ---------- */
.wow-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  pointer-events: none; z-index: -1; overflow: hidden;
  border-radius: inherit;
  opacity: var(--wow-floor, .5);
}
#chatTool #scoutPrivatePane.wow-conv[data-wow-conv="dm"] > .wow-floor { height: 78%; }
.wow-floor > i {
  position: absolute; bottom: -38%; width: 96%; height: 100%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--glow) 80%, transparent) 0%,
    color-mix(in oklab, var(--glow) 28%, transparent) 55%,
    transparent 100%);
  opacity: .62;
  animation: wow-conv-pool-in 900ms cubic-bezier(.37, 0, .63, 1) 1 both;
}
:root[data-theme="light"] .wow-floor > i {
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--glow) 55%, transparent) 0%,
    color-mix(in oklab, var(--glow) 18%, transparent) 55%,
    transparent 100%);
}
.wow-floor[data-count="1"] > i { width: 130%; }
.wow-floor > i.is-flare { animation: wow-conv-flare 2.2s cubic-bezier(.37, 0, .63, 1) 1 both; }
@keyframes wow-conv-pool-in { from { opacity: 0; } to { opacity: .62; } }
/* one brightening pulse in the sender's own light (2.2s, opacity + transform) */
@keyframes wow-conv-flare {
  0% { opacity: .62; transform: translateX(-50%) scale(1); }
  22% { opacity: 1; transform: translateX(-50%) scale(1.06); }
  100% { opacity: .62; transform: translateX(-50%) scale(1); }
}

/* ---------- Scout: ember floor + mark glow while it works ---------- */
.wow-scoutfloor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  pointer-events: none; z-index: -1;
  opacity: 0;
  transition: opacity 640ms cubic-bezier(.2, 0, 0, 1);
}
.wow-scoutfloor > i {
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 50% 112%, rgb(255 106 43 / .20), rgb(255 106 43 / .06) 50%, transparent 72%);
  animation: wow-conv-breathe 2.4s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
:root[data-theme="light"] .wow-scoutfloor > i {
  background: radial-gradient(70% 90% at 50% 112%, rgb(255 90 25 / .15), rgb(255 90 25 / .05) 50%, transparent 72%);
}
.wow-scoutfloor.is-working { opacity: 1; }
@keyframes wow-conv-breathe { from { opacity: .45; } to { opacity: 1; } }

/* the 3x glow behind Scout's mark (message badge / thinking flame) */
.wow-scout-mark { position: relative; isolation: isolate; overflow: visible !important; }
.wow-scout-glow {
  position: absolute; inset: -150%; border-radius: 50%; z-index: -1; pointer-events: none;
  opacity: 0;
  transition: opacity 640ms cubic-bezier(.2, 0, 0, 1), transform 640ms cubic-bezier(.2, 0, 0, 1);
}
.wow-scout-glow > i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 106 43 / .30), rgb(255 106 43 / .10) 50%, transparent);
  animation: wow-conv-breathe 2.4s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
:root[data-theme="light"] .wow-scout-glow > i {
  background: radial-gradient(closest-side, rgb(255 90 25 / .22), rgb(255 90 25 / .07) 50%, transparent);
}
.wow-scout-glow.is-working { opacity: 1; }
.wow-scout-glow.is-landed { opacity: 0; transform: scale(1.3); }

/* source chips fly in on spring.flight; the cited chip takes Selected fill */
#chatTool :is(.desktop-chat-source, .bp-chip).wow-chip-slot { opacity: 0; animation: none !important; }
#chatTool :is(.desktop-chat-source, .bp-chip).wow-chip-cited,
#chatTool .desktop-chat-source:hover {
  background: var(--selected, var(--surface-3)) !important;
}
:root[data-theme="dark"] #chatTool :is(.desktop-chat-source, .bp-chip).wow-chip-cited { background: #2E2F34 !important; }
/* Daybreak: chips already sit on the putty inset, so Selected is one step deeper */
:root[data-theme="light"] #chatTool :is(.desktop-chat-source, .bp-chip).wow-chip-cited { background: color-mix(in oklab, #1D1916 9%, #EEE7DF) !important; }
.wow-chip-ghost { animation: none !important; }

/* ---------- fresh Scout chat: recent Scout threads fill the quiet top ---------- */
/* A Scout turn is top-anchored (the question never moves while the answer
   streams, pinned by TestScoutStreamStabilityRendered), so a short chat's
   quiet space is below it: the real recent Scout threads sit there, above
   the composer, visually last (order) without shifting the turn. */
.wow-scout-recent {
  margin: 28px auto 0; padding: 0; flex: none; text-align: left;
  width: min(760px, calc(100% - 48px)); min-width: 0; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  animation: wow-conv-fade 220ms cubic-bezier(.2, 0, 0, 1) 1 both;
}
.wow-scout-recent__label {
  font: 500 12px/1.2 var(--font-sans); color: var(--ink-3, var(--text-3));
  padding: 0 12px 6px;
}
.wow-scout-recent__row {
  min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 40px;
  padding: 0 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-1, var(--text-1));
  font: 400 15px/1.3 var(--font-sans); text-align: left; cursor: pointer;
}
.wow-scout-recent__row:hover { background: var(--well, var(--surface-3)); }
.wow-scout-recent__row:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.wow-scout-recent__row svg { flex: none; color: var(--ink-3, var(--text-3)); }
.wow-scout-recent__title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wow-scout-recent__when { flex: none; font: 500 12px/1 var(--font-sans); color: var(--ink-3, var(--text-3)); }
@keyframes wow-conv-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- DM header: "In <room>" in ember while they're in a call ---------- */
#chatTool #scoutPrivatePane.wow-conv[data-wow-incall] #chatConvoMeta { display: none !important; }
.wow-conv-status {
  display: block; font: 400 13px/1.3 var(--font-sans);
  color: var(--ember-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wow-conv-status[hidden] { display: none !important; }
.wow-conv-join {
  display: inline-flex; align-items: center; gap: 8px;
}
.wow-conv-join[hidden] { display: none !important; }
#chatTool #scoutPrivatePane.wow-conv[data-wow-incall] #chatConvoCall { display: none !important; }

/* ---------- presence: in-call only (ember dot), never a green online dot ---------- */
.wow-incall-dot {
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--signal, #FF6A2B);
  box-shadow: 0 0 0 2px var(--bg-app);
  pointer-events: none;
}
.chat-thread-item .chat-thread-item__icon { position: relative; }

/* the live-room row in the (phone) conversation list, only while a room is live */
.wow-conv-liverow {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 16px);
  margin: 4px 8px 8px; min-height: 56px; padding: 8px 12px;
  border: 0; border-radius: 16px; background: transparent;
  color: var(--ink-1, var(--text-1)); text-align: left; cursor: pointer;
  font: inherit;
}
.wow-conv-liverow:hover { background: var(--well, var(--surface-3)); }
.wow-conv-liverow:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.wow-conv-liverow[hidden] { display: none !important; }
.wow-conv-liverow__faces { display: inline-flex; flex: none; }
.wow-conv-liverow__face {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  overflow: hidden; box-shadow: 0 0 0 2px var(--bg-app);
  font: 600 11px/1 var(--font-sans); color: #fff; background: var(--well, var(--surface-3));
}
.wow-conv-liverow__face + .wow-conv-liverow__face { margin-left: -7px; }
.wow-conv-liverow__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wow-conv-liverow__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wow-conv-liverow__name { font: 600 16px/1.2 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wow-conv-liverow__live { font: 500 13px/1.2 var(--font-sans); color: var(--ember-text); }
@media (min-width: 768px) { .wow-conv-liverow { display: none !important; } }

/* ---------- thread pane: its own light (the parent author's floor) ---------- */
#chatTool #chatContextRail.wow-conv-pane { isolation: isolate; }
/* the parent author's floor at channel-pool strength (the rail's glass would
   otherwise swallow it) */
#chatTool #chatContextRail.wow-conv-pane > .wow-floor { --wow-floor: .8; height: 62%; }
:root[data-theme="light"] #chatTool #chatContextRail.wow-conv-pane > .wow-floor { --wow-floor: .9; }
#chatTool #chatContextRail.wow-conv-pane > .wow-floor[data-count="1"] > i { width: 150%; }
#chatTool #chatContextRail.wow-conv-pane #chatContextParent[data-wow-replies] { padding-bottom: 6px; }
#chatTool #chatContextRail.wow-conv-pane #chatContextParent[data-wow-replies]::after {
  content: attr(data-wow-replies); display: flex; align-items: center; gap: 12px;
  margin: 14px 20px 2px; font: 500 12px/1.2 var(--font-sans); color: var(--ink-3, var(--text-3));
  background: linear-gradient(var(--line, color-mix(in srgb, currentColor 18%, transparent)), var(--line, color-mix(in srgb, currentColor 18%, transparent))) no-repeat right center / calc(100% - 7.5em) 1px;
}
:root[data-theme="light"] #chatTool #chatContextRail.wow-conv-pane:not(.is-phone-sheet) {
  box-shadow: 0 16px 40px #5A2D0F29, 0 2px 6px #5A2D0F14;
}

/* ---------- attachments: lit object cards (primitive: stride-wow-drive .wow-obj) ---------- */
#chatTool .scout-chat-files .wow-obj-host.wow-conv-att {
  display: block !important; width: min(380px, 100%) !important; max-width: 100%; min-height: 0 !important; height: auto !important;
  padding: 0 !important; overflow: hidden; aspect-ratio: auto !important;
  border: 0 !important; border-radius: 16px !important; background: var(--surface-2, var(--surface));
  color: inherit; text-align: left; text-decoration: none;
}
:root[data-theme="light"] #chatTool .scout-chat-files .wow-obj-host.wow-conv-att { background: #fff; box-shadow: 0 8px 24px rgb(90 45 15 / .10), 0 1px 3px rgb(90 45 15 / .06); }
:root[data-theme="dark"] #chatTool .scout-chat-files .wow-obj-host.wow-conv-att { background: #141417; }
#chatTool .scout-chat-files:has(> .wow-conv-att) { width: min(380px, 100%) !important; max-width: 100%; }
#chatTool #scoutPrivatePane.wow-conv--flowhead .wow-conv-join__label { display: none; }
#chatTool .wow-conv-att > .wow-obj { width: 100%; border-radius: 0; }
#chatTool .wow-conv-att > .wow-obj:not(.is-calm) { --wow-obj-h: 188px; }
/* no render yet: the compact lit object carries the name inside its light */
#chatTool .wow-conv-att:has(> .wow-obj.is-calm) .wow-conv-att__meta { display: none; }
#chatTool .wow-conv-att > :not(.wow-obj):not(.wow-conv-att__meta) { display: none !important; }
.wow-conv-att__meta { display: grid; gap: 2px; padding: 10px 14px 12px; min-width: 0; }
.wow-conv-att__name { font: 600 14px/1.3 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-1, var(--text-1)); }
.wow-conv-att__kind { font: 400 12px/1.3 var(--font-sans); color: var(--ink-3, var(--text-3)); }
.wow-conv-att__size { font: 500 11px/1 var(--font-mono); letter-spacing: 0; white-space: nowrap; }

/* ---------- Reduce Motion: glows held static, no flare, crossfades only ---------- */
@media (prefers-reduced-motion: reduce) {
  .wow-floor > i, .wow-floor > i.is-flare, .wow-scoutfloor > i, .wow-scout-glow > i, .wow-scout-recent { animation: none !important; }
  .wow-floor > i { opacity: .62; }
  .wow-scoutfloor > i, .wow-scout-glow > i { opacity: .6; }
  .wow-scout-glow.is-landed { transform: none; }
}
:root[data-motion="reduce"] .wow-floor > i,
:root[data-motion="reduce"] .wow-scoutfloor > i,
:root[data-motion="reduce"] .wow-scout-glow > i { animation: none !important; }

/* ---------- phone DM/group header: the members button shows its people ----------
   (it rendered as an empty glass disc: the face stack is display:none on phone) */
@media (max-width: 767px) {
  #chatTool #scoutPrivatePane.wow-conv .chat-convo-head__tool--faces {
    background: transparent !important; width: auto !important; min-width: 40px; padding: 0 2px !important;
  }
  #chatTool #scoutPrivatePane.wow-conv .chat-convo-head__tool--faces .chat-convo-head__facestack {
    display: inline-flex !important; align-items: center;
  }
  #chatTool #scoutPrivatePane.wow-conv .chat-convo-head__tool--faces .chat-convo-head__face {
    width: 30px !important; height: 30px !important; font-size: 12px;
  }
  #chatTool #scoutPrivatePane.wow-conv[data-wow-conv="dm"] .chat-convo-head__tool--faces .chat-convo-head__face--more { display: none !important; }
}

/* composer glass: fill + shadow only, never a stroke (the inset 1px ring read as a border) */
#chatTool #scoutPrivatePane.wow-conv #scoutChatForm,
#chatTool #scoutPrivatePane.wow-conv #scoutChatForm:focus-within {
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 8px 24px rgb(0 0 0 / .22) !important;
  border-color: transparent !important;
}
:root[data-theme="light"] #chatTool #scoutPrivatePane.wow-conv #scoutChatForm,
:root[data-theme="light"] #chatTool #scoutPrivatePane.wow-conv #scoutChatForm:focus-within {
  box-shadow: 0 1px 2px rgb(90 45 15 / .08), 0 8px 24px rgb(90 45 15 / .22) !important;
}

/* thread pane: the count lives once, on the rule between parent and replies */
#chatTool #chatContextRail.wow-conv-pane:has(#chatContextParent[data-wow-replies]) #chatContextMeta { display: none !important; }