/* Home screen layout (mockup v4): Brea is the hero (~72% height), mic + Dashboard pill low in the black,
   frosted conversation ribbon at the bottom. */

.home { min-height: 100vh; min-height: 100dvh; }

.hero {
  position: fixed; top: 0; left: 0; right: 0; height: 72vh; height: 72dvh;
  display: grid; place-items: center;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  pointer-events: none;
}
.aura {
  position: absolute; width: min(110vw, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, rgba(201, 154, 30, 0.10) 38%, transparent 68%);
  animation: aura 6s ease-in-out infinite;
}
:root[data-theme="cream_gold"] .aura { display: none; }  /* on cream the light hugs the letters; no cloud behind */
@keyframes aura { 0%, 100% { transform: scale(0.94); opacity: 0.75; } 50% { transform: scale(1.04); opacity: 1; } }

/* Until the MetaHuman connects (Milestone 4), the hero shows the breathing gold name. */
.hero-name {
  position: relative; font-size: clamp(64px, 22vw, 132px);
}
.hero-img { position: relative; max-height: 100%; max-width: 100%; object-fit: contain;
  animation: heroBreathe 5s ease-in-out infinite; }
@keyframes heroBreathe { 0%, 100% { transform: scale(0.985); opacity: 0.9; } 50% { transform: scale(1.015); opacity: 1; } }

/* ── Her live picture (avatar step 2: AS1, AS2, AS17; Dee 2026-10-22: every screen shape, no seams) ──
   Her picture covers the WHOLE screen on every shape (upright, near-square, sideways, tablet, desktop), behind the
   header, the mic, the Dashboard pill and the chat bar: no edge of it ever shows, never letterboxed, never stretched.
   Nothing fades across her; the gold name and the aura step aside while she shows (0.4 s cross-fade). Epic's viewer
   sets its own inline size on the video, hence !important; the box has the class "fixed-size", else the viewer
   rewrites the box's own size to fill the page (VideoPlayer resizePlayerStyle), which stretched her upright. */
.avatar-box {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none;
  container-type: size;                                  /* cq units below = the box = the screen */
  opacity: 0; transition: opacity 0.4s ease;
}
.avatar-on .avatar-box { opacity: 1; }
/* Framing anchored on HER (frame 1920x1080: her centre x 983, her face hair-to-chin x 745-1060, y 280-625).
   --v is her width on screen: just enough at her own 16:9 to cover both the screen's width and its height.
   Across: centred on x 983, never so far that a video edge shows, and on narrow screens never trimming past her face
   (x 745 / 1920 = 0.38802, x 1060 / 1920 = 0.55208, x 983 / 1920 = 0.51198) — the outer shoulders and arms go first.
   Up and down: when the screen is wider than 16:9 the spare height is trimmed above her head first, but never so much
   that her head top (y 280 = 0.14583 of her width) goes up behind the header or the "own device" card's band at the
   top (176 px + the safe area: the card at 8 px, about 150 px tall, then a gap); the rest comes off below her. */
.avatar-box video {
  --v: max(100cqw, 177.778cqh);
  position: absolute !important; display: block; pointer-events: none !important; background: transparent;
  object-fit: cover;                                     /* her own 16:9 always; never stretched to the element */
  width: var(--v) !important; height: max(56.25cqw, 100cqh) !important;   /* = --v at 16:9, exact to the edge */
  left: clamp(100cqw - var(--v),
              clamp(-0.38802 * var(--v), 50cqw - 0.51198 * var(--v), 100cqw - 0.55208 * var(--v)), 0px);
  top: min(0px, max(100cqh - 0.5625 * var(--v), env(safe-area-inset-top, 0px) + 176px - 0.14583 * var(--v)));
}
.avatar-box img { display: none; }                       /* the viewer's freeze-frame image is never shown */
.avatar-on .hero { -webkit-mask-image: none; mask-image: none; }
.hero { transition: opacity 0.4s ease; }
.avatar-on .hero { opacity: 0; }                         /* the gold name and the aura, together */
.avatar-on .hero-name, .avatar-on .aura { animation: none; }   /* nothing breathing unseen, costing battery (open point 4) */

/* ── "Is this your own device?": a small card under the top bar, above the hero, never over the mic or the strip ── */
.mine-card {
  position: fixed; z-index: 22; left: 16px; right: 16px; margin: 0 auto; max-width: 440px;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  padding: 14px 16px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.mine-card[hidden] { display: none; }
/* While her picture shows, the card never covers her hair or face (AS3): it moves up into the top band, over the
   BREA name row, above her head on every screen (Dee, 2026-10-22, with Variant A; her head top is about 26% down
   upright). Never over the mic, the strip or the composer. */
.avatar-on .mine-card { top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 31; }
.mine-text { margin: 0 0 4px; font-size: 16px; color: var(--text); }
.mine-help { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.mine-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mine-btns[hidden] { display: none; }
.mine-btns .btn { flex: 1 1 140px; }

/* ── Mic + Dashboard pill: low, just above the ribbon ── */
.controls {
  position: fixed; left: 0; right: 0; z-index: 20;
  bottom: calc(var(--ribbon-h) + env(safe-area-inset-bottom, 0px) + 14px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mic {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  animation: micGlow 3.2s ease-in-out infinite;
}
.mic img { width: 100%; height: 100%; object-fit: contain; }
@keyframes micGlow {
  0%, 100% { box-shadow: 0 0 10px 0 var(--glow); }
  50% { box-shadow: 0 0 26px 6px var(--glow); }
}
.pill {
  height: 34px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12px; letter-spacing: 0.16em; color: var(--muted);
}

/* ── Conversation ribbon ── */
:root { --ribbon-h: 96px; }
.ribbon {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  height: calc(var(--ribbon-h) + env(safe-area-inset-bottom, 0px));
  background: var(--glass); border-top: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column;
  transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ribbon.expanded { height: 72vh; height: 72dvh; z-index: 40; overflow: hidden; }
.composer { flex-shrink: 0; }
.ribbon-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; text-align: left; width: 100%;
}
.chip-rings { position: relative; width: 30px; height: 30px; flex-shrink: 0; }
.ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--gold);
  animation: ring 2.6s ease-out infinite; opacity: 0;
}
.ring:nth-child(2) { animation-delay: 0.85s; }
.ring:nth-child(3) { animation-delay: 1.7s; }
.chip-core { position: absolute; inset: 9px; border-radius: 50%; }
@keyframes ring { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(1.15); opacity: 0; } }
.chip-label { font-size: 14px; color: var(--muted); line-height: 1.35; }
.chip-label strong { color: var(--text); font-weight: normal; display: block; font-size: 15px; }

.chat { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 16px 10px;
  display: none; flex-direction: column; gap: 10px; }   /* min-height 0: a long thread scrolls, never pushes the composer off */
.ribbon.expanded .chat { display: flex; }
.bubble { max-width: 82%; padding: 10px 16px; border-radius: 20px; font-size: 15px; line-height: 1.5; }
.bubble.dee { align-self: flex-end; border-bottom-right-radius: 6px; }
.bubble.brea { align-self: flex-start; background: var(--bubble-brea); border-left: 2px solid var(--gold);
  border-bottom-left-radius: 6px; }
.note { align-self: center; text-align: center; font-size: 13px; color: var(--muted); max-width: 90%; line-height: 1.5; }

.composer { display: none; gap: 8px; align-items: flex-end; padding: 8px 12px 12px; border-top: 1px solid var(--hairline); }
.ribbon.expanded .composer { display: flex; }
.attach { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); font-size: 22px; flex-shrink: 0; }
.composer textarea {
  flex: 1; min-height: 44px; max-height: 120px; resize: none; border-radius: 22px; padding: 11px 16px;
  background: var(--card); color: var(--text); border: 1px solid var(--hairline); outline: none;
}
.composer textarea::placeholder { color: var(--muted); }

/* ── Dashboard tiles ── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 6px 14px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--hairline);
  font-size: 13px; letter-spacing: 0.02em;
}
.tile img { width: 56px; height: 56px; object-fit: contain; }
.panel-msg { padding: 28px 8px 18px; text-align: center; color: var(--muted); line-height: 1.6; font-size: 15px; }
.panel-msg img { width: 72px; height: 72px; display: block; margin: 0 auto 14px; }

/* ── Chat thread (Milestone 2): send times on every bubble, day dividers (B7) ── */
.bubble .body { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; }
.bubble .body .li { display: block; padding-left: 14px; position: relative; }
.bubble .body .li::before { content: "•"; position: absolute; left: 2px; }
.bubble .meta { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 11px; opacity: 0.62; }
.bubble.brea .meta { justify-content: flex-start; }
.bubble.pending .body:empty::after { content: "…"; letter-spacing: 0.2em; opacity: 0.7; }
.bubble .retry { margin-top: 8px; height: 32px; padding: 0 14px; font-size: 13px; }
.day { align-self: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  margin: 6px 0 2px; }

/* ── Her voice: the gold speaker on each of her messages; "out loud or on your screen?" ── */
.speak { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--hairline); opacity: 0.9; }
.speak img { width: 18px; height: 18px; }
.speak.on { border-color: var(--gold); box-shadow: 0 0 10px 0 var(--glow); }
.ask { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ask p { margin-bottom: 8px; }
.ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ask-btns .btn { height: 38px; font-size: 14px; }
.voice-note { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ── Hearing Dee: the mic glows brighter while it's open ── */
.mic.listening { animation: micListen 1.1s ease-in-out infinite; }
@keyframes micListen {
  0%, 100% { box-shadow: 0 0 14px 2px var(--glow); transform: scale(1); }
  50% { box-shadow: 0 0 34px 12px var(--glow); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .mic.listening { animation: none; box-shadow: 0 0 24px 8px var(--glow); } }
.cmic { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  border: 1px solid var(--hairline); }
.cmic img { width: 30px; height: 30px; object-fit: contain; }
.cmic.listening { border-color: var(--gold); animation: micListen 1.1s ease-in-out infinite; }

/* ── Talking keeps the ribbon small (Home Screen note, Dee 2026-10-17) ──
   Collapsed, the ribbon is a live strip: her state, Dee's words as heard, a one-line snippet of Brea's reply.
   It never grows past --ribbon-h, so the hero (the MetaHuman, M4) stays clear. */
.ribbon:not(.expanded) { max-height: calc(var(--ribbon-h) + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.chip-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chip-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.chip-top strong { flex-shrink: 0; }
.chip-top #chipHint { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ribbon.has-live .chip-top #chipHint { display: none; }
.live { display: block; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--muted); }
.live.you { color: var(--text); opacity: 0.85; }
.live.brea { color: var(--gold-hi); }
:root[data-theme="cream_gold"] .live.brea { color: var(--gold-core); }
.ribbon.expanded .live, .ribbon.expanded .strip-ask { display: none; }
.ribbon.expanded.has-live .chip-top #chipHint { display: inline; }
.strip-ask { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px 10px 60px; }
.strip-ask[hidden] { display: none; }
.strip-ask .btn { height: 32px; font-size: 13px; }
.ribbon.asking .live { display: none; }

/* Closing the chat: a tap anywhere above it, a swipe down, or the top bar. */
.ribbon-scrim { position: fixed; inset: 0; z-index: 35; background: transparent; }
.grab { display: none; height: 22px; place-items: center; touch-action: none; cursor: grab; }
.grab span { width: 40px; height: 5px; border-radius: 3px; background: var(--hairline); }
.ribbon.expanded .grab { display: grid; }
.ribbon.expanded .ribbon-head { padding-top: 4px; }

/* ── The strip follows her voice (Dee 2026-10-17): her words build up sentence by sentence, newest at the bottom;
   older words scroll off the top. A small state tag stays the whole time and never replaces the words. When there
   are no words yet, the state leads at full size. All inside --ribbon-h. ── */
.ribbon:not(.expanded) .ribbon-head { padding: 12px 18px 8px; }
.ribbon.has-brea #chipState { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  line-height: 16px; }
.chip-top #chipHint { font-size: 12px; color: var(--muted); }   /* full strength: passes 4.5 (Dee, 2026-10-20) */
.live.brea { white-space: normal; text-overflow: clip; max-height: calc(2 * 1.3em); line-height: 1.3;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }

/* M3 "Hey Brea": the wake shimmer (HF-13) and the dimmed standby / always-on screen (HF-12, HF-19). A web page can't
   lower the phone's brightness, so "dimmed" is Brea's own near-black screen. A tap anywhere on it wakes her (C2). */
.wake-shimmer .aura { animation: wakeAura 1.4s ease-out 1; }
.wake-shimmer .mic { animation: wakeGlow 1.4s ease-out 1; }
@keyframes wakeAura { 0% { transform: scale(0.9); opacity: 0.6; } 35% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 0.8; } }
@keyframes wakeGlow { 0% { box-shadow: 0 0 10px 0 var(--glow); } 35% { box-shadow: 0 0 44px 16px var(--glow); } 100% { box-shadow: 0 0 12px 2px var(--glow); } }
.standby-shade {
  position: fixed; inset: 0; z-index: 90; border: 0; padding: 0 16px; margin: 0;
  background: #050403; color: rgba(214, 178, 94, 0.55); display: grid; place-items: center;
  font: inherit; font-size: 15px; letter-spacing: 0.04em; cursor: pointer;
}
/* the warm dark look's shade (Dee, 2026-10-20); cream keeps the one above */
:root:not([data-theme="cream_gold"]) .standby-shade { background: #0A0807; color: rgba(226, 190, 104, 0.58); }
.standby-shade span { animation: shadeBreath 5s ease-in-out infinite; }
@keyframes shadeBreath { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .wake-shimmer .aura, .wake-shimmer .mic, .standby-shade span { animation: none; }
}
/* Quiet / hold on (QH5): a small, clear label on every screen while she's held or quiet. A tap on it brings her back. */
.hold-label {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 64px);
  z-index: 95; max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px; margin: 0;
  border: 1px solid var(--gold); background: var(--glass); color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer; -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.hold-label[hidden] { display: none; }

/* Documents 1A: files waiting in the message box, thumbnails in the chat, the full-size viewer, the drawer screen.
   Never a code or a number: a photo shows itself, a PDF / Word file shows a file-type tile with its name. */
.attach-tray { display: none; flex-shrink: 0; padding: 8px 12px 0; border-top: 1px solid var(--hairline); }
.ribbon.expanded .attach-tray:not([hidden]) { display: block; }
.tray-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.tray-tile { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--hairline); background: var(--card); display: grid; place-items: center; }
.tray-tile img { width: 100%; height: 100%; object-fit: cover; }
.tray-tile.failed { border-color: #c0504d; }
.tray-page { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; text-align: center; padding: 1px 0;
  background: var(--glass); color: var(--text); }
.tray-busy { position: absolute; inset: 0; display: grid; place-items: center; background: var(--glass); color: var(--gold); }
.tray-x { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; padding: 0;
  font-size: 15px; line-height: 20px; background: var(--glass); color: var(--text); border: 1px solid var(--hairline); }
.tray-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0 8px; font-size: 14px;
  color: var(--muted); }
.tray-choice .btn { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.tray-note { font-size: 13px; color: var(--muted); padding-bottom: 6px; }
.doc-tiles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.doc-tile { position: relative; width: 96px; height: 96px; padding: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--hairline); background: var(--card); color: var(--text); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.doc-tile .doc-thumb { width: 100%; height: 100%; object-fit: cover; }
.doc-badge { font-size: 13px; letter-spacing: 0.1em; color: var(--gold); font-weight: 600; }
.doc-name { font-size: 11px; line-height: 1.25; padding: 0 6px; text-align: center; max-height: 2.6em; overflow: hidden;
  overflow-wrap: anywhere; color: var(--muted); }
.doc-pages { position: absolute; right: 4px; bottom: 4px; font-size: 11px; padding: 1px 6px; border-radius: 999px;
  background: var(--glass); color: var(--text); }
.doc-tile.doc-hidden { width: auto; min-width: 150px; height: auto; padding: 10px; cursor: default; }
.docview { position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; }
.docview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px; color: #f4eee1; }
.docview-close svg { stroke: #f4eee1; }
.docview-pages { flex: 1; overflow-y: auto; padding: 0 16px 24px; display: flex; flex-direction: column; gap: 16px;
  align-items: center; }
.docview-page { margin: 0; width: 100%; max-width: 1100px; text-align: center; }
.docview-page img { width: 100%; height: auto; border-radius: 6px; background: #fff; }
.docview-page figcaption { font-size: 13px; color: rgba(244, 238, 225, 0.7); margin-top: 6px; }
.docview-body { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.docview-body figcaption { font-size: 13px; color: rgba(244, 238, 225, 0.7); }
.docview-pdf { width: 100%; height: auto; border-radius: 6px; background: #fff; }
.docview-words { width: 100%; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; background: #fff;
  color: #1c1a17; border-radius: 6px; padding: 20px 18px; font-size: 16px; line-height: 1.55; }
.docview-note { font-size: 15px; line-height: 1.5; color: #f4eee1; padding: 24px 8px; }
.drawer { max-width: 640px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 80px) 16px 48px; }
.drawer-group { background: var(--card); border: 1px solid var(--hairline); border-radius: 22px; padding: 18px; }
.drawer-group h2 { font-family: 'Cinzel', serif; font-weight: 500; font-size: 15px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.drawer-help { font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: 12px; }
.drawer-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.drawer-row:first-child { border-top: none; }
.drawer-row .doc-tile { width: 72px; height: 72px; flex-shrink: 0; }
.drawer-text { display: flex; flex-direction: column; gap: 2px; cursor: pointer; font-size: 15px; }
.drawer-text span { font-size: 13px; color: var(--muted); }