/* 既読の向こう — a messenger-like UI (fictional app 「ことづて」). Phone-first; on a PC the phone sits in a
   frame with an info column beside it. Light / dark follow the OS unless set in 設定. */
:root {
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --hand: "Yomogi", "Klee One", "Hiragino Maru Gothic ProN", cursive;
  --mono: "SFMono-Regular", "Consolas", "Menlo", monospace;
  --fs: 15px;
  --brand: #20b35a;
  --brand-ink: #fff;
  --page: #e9ecef;
  --phone: #ffffff;
  --ink: #111417;
  --ink2: #5f6670;
  --ink3: #8b929b;
  --line: #e4e7ea;
  --badge: #20b35a;
  --head: #263142;
  --head-ink: #ffffff;
  --chat-bg: #8ba4c6;
  --them: #ffffff;
  --them-ink: #111417;
  --me: #93df73;
  --me-ink: #111417;
  --meta: rgba(20, 30, 45, 0.62);
  --pill: rgba(36, 48, 66, 0.32);
  --pill-ink: #fff;
  --card: #ffffff;
  --chip: #ffffff;
  --chip-ink: #111417;
  --sheet: #ffffff;
  --shadow: 0 10px 40px rgba(20, 30, 50, 0.18);
  --sup-bg: #e9eef3;
  --board-bg: #f4f2ec;
  --board-card: #fffdf8;
  --board-ink: #22201b;
  --board-head: #4a4235;
  --stream-bg: #111214;
  --stream-ink: #e9e9ea;
  --feed-bg: #f1f2f4;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0c0e11; --phone: #16191e; --ink: #eceef1; --ink2: #a6adb7; --ink3: #7c838d; --line: #262b33;
    --head: #1b2130; --chat-bg: #1d2533; --them: #2c333f; --them-ink: #eceef1; --me: #2f8a45; --me-ink: #f4fff2;
    --meta: rgba(220, 228, 240, 0.55); --pill: rgba(255, 255, 255, 0.12); --card: #20252d; --chip: #262c35; --chip-ink: #eceef1;
    --sheet: #1b1f26; --shadow: 0 10px 40px rgba(0, 0, 0, 0.5); --sup-bg: #171b21; --board-bg: #17171a; --board-card: #1f1f23;
    --board-ink: #e6e3dc; --board-head: #2b2822; --feed-bg: #121418; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0c0e11; --phone: #16191e; --ink: #eceef1; --ink2: #a6adb7; --ink3: #7c838d; --line: #262b33;
  --head: #1b2130; --chat-bg: #1d2533; --them: #2c333f; --them-ink: #eceef1; --me: #2f8a45; --me-ink: #f4fff2;
  --meta: rgba(220, 228, 240, 0.55); --pill: rgba(255, 255, 255, 0.12); --card: #20252d; --chip: #262c35; --chip-ink: #eceef1;
  --sheet: #1b1f26; --shadow: 0 10px 40px rgba(0, 0, 0, 0.5); --sup-bg: #171b21; --board-bg: #17171a; --board-card: #1f1f23;
  --board-ink: #e6e3dc; --board-head: #2b2822; --feed-bg: #121418; color-scheme: dark;
}
:root[data-size="s"] { --fs: 13.5px; }
:root[data-size="l"] { --fs: 17px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--page); color: var(--ink); font-family: var(--font); font-size: var(--fs); line-height: 1.5;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- layout: phone + side */
.wrap { height: 100%; display: flex; justify-content: center; align-items: stretch; gap: 32px; }
.phone { position: relative; width: 100%; max-width: 100%; height: 100%; background: var(--phone); display: flex; flex-direction: column; overflow: hidden; overflow: clip; }
.side { display: none; }
@media (min-width: 760px) {
  body { overflow: auto; }
  .wrap { min-height: 100%; height: auto; padding: 24px; align-items: flex-start; }
  .phone { width: 410px; height: min(880px, calc(100vh - 48px)); border-radius: 28px; box-shadow: var(--shadow), 0 0 0 8px #1d2128; position: sticky; top: 24px; }
}
@media (min-width: 1040px) {
  .side { display: block; width: 360px; padding-top: 8px; color: var(--ink); }
}
.side h1 { font-size: 22px; margin: 6px 0 4px; line-height: 1.35; }
.side h2 { font-size: 15px; margin: 22px 0 8px; color: var(--ink2); }
.side p, .side li { font-size: 14px; color: var(--ink2); }
.side ul { padding-left: 1.2em; margin: 6px 0; }
.side .kicker { font-size: 12px; color: var(--brand); font-weight: 700; letter-spacing: 0.08em; margin: 0; }
.side .box { background: var(--phone); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 14px 0; }
.side .ends { list-style: none; padding: 0; }
.side .ends li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.side .ends li b { color: var(--ink); }
.side small { color: var(--ink3); }
.side .back { display: inline-block; margin-top: 8px; color: var(--brand); text-decoration: none; font-weight: 700; }

/* ---------------------------------------------------------------- avatars */
.av { flex: none; width: 36px; height: 36px; border-radius: 40%; background: var(--c, #7b8796); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; background-size: cover; background-position: center; }
.av.bot { border-radius: 10px; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- home (talk list) */
.home-head { padding: 14px 16px 6px; display: flex; align-items: center; gap: 10px; }
.home-head h1 { font-size: 22px; margin: 0; flex: 1; letter-spacing: 0.02em; }
.home-head .app { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); }
.logo { width: 26px; height: 26px; border-radius: 8px; background: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.logo svg { width: 18px; height: 18px; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: inherit; }
.icon-btn:hover { background: rgba(127, 127, 127, 0.12); }
.icon-btn svg { width: 22px; height: 22px; }
.search { margin: 4px 16px 8px; display: flex; align-items: center; gap: 8px; background: rgba(127, 127, 127, 0.12); border-radius: 10px; padding: 7px 10px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; outline: none; }
.search svg { width: 16px; height: 16px; color: var(--ink3); }
.tabs { display: flex; gap: 6px; padding: 2px 16px 8px; overflow-x: auto; scrollbar-width: none; }
.tabs button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; white-space: nowrap; color: var(--ink2); }
.tabs button.on { background: var(--ink); color: var(--phone); border-color: var(--ink); }
.home-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.hero { margin: 4px 12px 10px; border-radius: 16px; padding: 14px 16px; background: linear-gradient(135deg, #1e2633, #2d3a4f); color: #eef2f7; position: relative; overflow: hidden; }
.hero h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: 0.02em; }
.hero p { margin: 0; font-size: 12.5px; color: #c2cad6; }
.hero .stat { margin-top: 10px; display: flex; gap: 14px; font-size: 12px; color: #c2cad6; }
.hero .stat b { color: #fff; font-size: 15px; }
.hero .bar { height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.hero .bar i { display: block; height: 100%; background: var(--brand); width: 0; }
.sec { padding: 12px 16px 4px; font-size: 12px; color: var(--ink3); font-weight: 700; }
.rows { list-style: none; margin: 0; padding: 0; }
.row > a, .row > div { display: flex; align-items: center; gap: 12px; padding: 9px 16px; text-decoration: none; color: inherit; min-width: 0; }
.row > a:hover { background: rgba(127, 127, 127, 0.07); }
.row .av { width: 50px; height: 50px; font-size: 18px; }
.row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row .name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .name small { font-weight: 400; color: var(--ink3); margin-left: 4px; font-size: 12px; }
.row .prev { font-size: 13px; color: var(--ink2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; word-break: break-all; }
.row .side2 { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 42px; }
.row time { font-size: 11px; color: var(--ink3); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--badge); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.prog { font-size: 10.5px; color: var(--ink3); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.prog.full { color: var(--brand); border-color: var(--brand); }
.row.soon { opacity: 0.55; }
.row.soon .av { background: #9aa3ad; }
.row.soon .prev { color: var(--ink3); }
.home-foot { padding: 18px 16px 28px; font-size: 11.5px; color: var(--ink3); }
.home-foot a { color: var(--ink2); }
.empty { padding: 30px 16px; text-align: center; color: var(--ink3); font-size: 13px; }

.app { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ---------------------------------------------------------------- talk header */
.hd { flex: none; display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 6px; background: var(--head); color: var(--head-ink); position: relative; z-index: 3; }
.hd .back { display: inline-flex; align-items: center; gap: 2px; padding: 6px; text-decoration: none; color: inherit; font-size: 15px; }
.hd .back svg { width: 22px; height: 22px; }
.hd .back .badge { background: rgba(255, 255, 255, 0.22); }
.hd .ttl { flex: 1; min-width: 0; text-align: left; padding: 4px 6px; display: flex; flex-direction: column; line-height: 1.25; }
.hd .ttl b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd .ttl small { font-size: 11px; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd .ttl .off { display: inline-block; font-size: 10px; font-weight: 700; background: var(--brand); color: #fff; border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 2px; }
.hd .icon-btn { color: inherit; width: 38px; height: 38px; }
.hd .spd { font-size: 11px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; padding: 1px 6px; margin-right: 2px; white-space: nowrap; }
.app.skin-support .hd { --head: #fff; --head-ink: #111; border-bottom: 1px solid var(--line); }
.app.skin-support .hd .back .badge { background: #e8ebee; color: #333; }
.app.skin-support .hd .spd { border-color: #bbb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app.skin-support .hd { --head: #1b2027; --head-ink: #eee; } }
:root[data-theme="dark"] .app.skin-support .hd { --head: #1b2027; --head-ink: #eee; }
.app.skin-board .hd { --head: var(--board-head); }
.app.skin-stream .hd { --head: #000; }
.app.skin-feed .hd { --head: #2f3640; }

/* ---------------------------------------------------------------- rooms */
.rooms { flex: 1; position: relative; overflow: hidden; }
.room { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--chat-bg); }
.room.off { visibility: hidden; }
.room.in { animation: roomIn 0.28s ease-out; }
@keyframes roomIn { from { transform: translateX(14%); opacity: 0.2; } to { transform: none; opacity: 1; } }
.log { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 18px; overscroll-behavior: contain; scroll-behavior: auto; }
.room.skin-support { background: var(--sup-bg); }
.room.skin-board { background: var(--board-bg); }
.room.skin-stream { background: var(--stream-bg); color: var(--stream-ink); }
.room.skin-feed { background: var(--feed-bg); }

/* chat lines */
.date { text-align: center; margin: 10px 0; }
.date span, .sys span { display: inline-block; background: var(--pill); color: var(--pill-ink); font-size: 11.5px; border-radius: 999px; padding: 2px 12px; max-width: 92%; }
.sys { text-align: center; margin: 8px 0; }
.sys span { border-radius: 12px; line-height: 1.45; padding: 4px 12px; }
.sys time { display: block; font-size: 10px; color: var(--meta); margin-top: 2px; }
.room.skin-support .sys span, .room.skin-feed .sys span { background: rgba(60, 70, 85, 0.12); color: var(--ink2); }
.msg { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0; max-width: 100%; }
.msg.first { margin-top: 10px; }
.msg .av { margin-top: 2px; }
.msg.cont .av { visibility: hidden; height: 0; }
.msg .col { min-width: 0; display: flex; flex-direction: column; max-width: calc(100% - 44px); }
.msg .who { font-size: 11.5px; color: var(--meta); margin: 0 0 2px 2px; }
.msg.cont .who { display: none; }
.msg .line { display: flex; align-items: flex-end; gap: 5px; min-width: 0; }
.bub { position: relative; background: var(--them); color: var(--them-ink); border-radius: 17px; padding: 7px 12px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.msg.first:not(.me) .bub::before { content: ""; position: absolute; left: -5px; top: 9px; border: 6px solid transparent; border-right-color: var(--them); border-left: 0; }
.meta { flex: none; font-size: 10px; color: var(--meta); line-height: 1.25; white-space: nowrap; display: flex; flex-direction: column; }
.msg.me { justify-content: flex-end; }
.msg.me .col { align-items: flex-end; max-width: 82%; }
.msg.me .line { flex-direction: row-reverse; }
.msg.me .bub { background: var(--me); color: var(--me-ink); }
.msg.me.first .bub::after { content: ""; position: absolute; right: -5px; top: 9px; border: 6px solid transparent; border-left-color: var(--me); border-right: 0; }
.msg.me .meta { text-align: right; align-items: flex-end; }
.msg.bot .who::after { content: "公式"; font-size: 9px; background: var(--brand); color: #fff; border-radius: 3px; padding: 0 3px; margin-left: 4px; vertical-align: 1px; }
.room.skin-support .msg:not(.me) .bub { background: var(--card); border: 1px solid var(--line); }
.room.skin-support .msg.first:not(.me) .bub::before { display: none; }
.msg.new .bub, .msg.new .ph, .msg.new .card { animation: pop 0.22s ease-out; }
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.typing .bub { padding: 9px 12px; display: inline-flex; gap: 4px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); opacity: 0.5; animation: dot 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-3px); opacity: 1; } }
.deleted .bub { font-style: italic; color: var(--ink3); background: transparent; border: 1px dashed var(--ink3); }

/* a notification card (memo updates, app notices) */
.ncard { margin: 10px auto; max-width: 88%; background: var(--card); color: var(--ink); border-radius: 14px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); display: flex; gap: 10px; align-items: flex-start; }
.ncard .av { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; }
.ncard b { font-size: 12px; color: var(--ink2); display: block; }
.ncard p { margin: 0; font-size: 0.95em; white-space: pre-wrap; word-break: break-word; }
.ncard time { font-size: 10px; color: var(--ink3); margin-left: auto; flex: none; }

/* photos */
.ph { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #333; container-type: inline-size; cursor: zoom-in; display: block; width: min(232px, 62vw); }
.ph img { display: block; width: 100%; height: auto; }
.ph .ov { position: absolute; inset: 0; pointer-events: none; }
.ph .ot { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); white-space: pre; line-height: 1.15; font-size: calc(var(--s) * 1cqw); }
.ph .ot.left { transform: translate(0, -50%) rotate(var(--r, 0deg)); }
.ph .ob { position: absolute; }
.ph .ot.hand { font-family: var(--hand); }
.ph .ot.mono { font-family: var(--mono); letter-spacing: 0.02em; }
.ph .ot.sans { font-family: var(--font); font-weight: 700; }
.ph .ot.serif { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.ph .ot.plate { font-family: var(--font); font-weight: 700; letter-spacing: 0.06em; border-radius: 2px; }
.ph .html { width: 100%; }
.ph.doc { cursor: zoom-in; background: #fff; }
.ph .missing { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 12px; padding: 10px; text-align: center; }
.msg .ph + .cap { font-size: 11px; color: var(--meta); margin-top: 3px; max-width: min(232px, 62vw); }
.card { background: var(--them); color: var(--them-ink); border-radius: 14px; padding: 9px 12px; min-width: 180px; max-width: 100%; display: flex; gap: 10px; align-items: center; }
.msg.me .card { background: var(--me); color: var(--me-ink); }
.card .ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.12); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 14px; }
.card small { display: block; font-size: 10.5px; opacity: 0.7; }
.card .tx { min-width: 0; word-break: break-word; font-size: 0.93em; }
.card.video .ic { border-radius: 8px; background: #111; color: #fff; }
.stamp { font-size: 30px; line-height: 1.2; padding: 4px 6px; font-weight: 700; color: var(--them-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); white-space: pre-wrap; }

/* board (thread) */
.room.skin-board .log { padding: 0 0 18px; }
.thread-title { position: sticky; top: 0; z-index: 1; background: var(--board-card); border-bottom: 1px solid var(--line); padding: 10px 14px; font-weight: 700; font-size: 0.98em; color: var(--board-ink); }
.thread-title small { display: block; font-weight: 400; font-size: 11px; color: var(--ink3); }
.post { background: var(--board-card); color: var(--board-ink); border-bottom: 1px solid var(--line); padding: 8px 14px 10px; }
.post .ph-head { font-size: 11.5px; color: var(--ink3); display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.post .no { color: var(--ink2); font-weight: 700; }
.post .nm { color: #3f7d4a; font-weight: 700; }
.post.me { box-shadow: inset 3px 0 0 var(--brand); }
.post.me .nm::after { content: "あなた"; font-size: 9.5px; font-weight: 700; background: var(--brand); color: #fff; border-radius: 3px; padding: 0 4px; margin-left: 5px; vertical-align: 1px; }
.post .tx { white-space: pre-wrap; word-break: break-word; margin-top: 3px; }
.post .ph { margin-top: 6px; }
.post.deleted .tx { color: var(--ink3); font-style: italic; }
.post.new { animation: fadein 0.3s ease-out; }
.post.sysp { background: transparent; color: var(--ink2); font-size: 0.86em; text-align: center; border: 0; padding: 8px 14px; }
.post.sysp .tx { display: inline-block; background: rgba(120, 110, 90, 0.14); border-radius: 8px; padding: 3px 10px; }
.post.typing-post { color: var(--ink3); font-size: 12px; background: transparent; border: 0; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* stream (live comments) */
.room.skin-stream .log { padding: 6px 12px 16px; }
.screen { flex: none; position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; color: #fff; }
.screen .live { position: absolute; left: 10px; top: 10px; background: #d33; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 4px; }
.screen .view { position: absolute; left: 58px; top: 10px; font-size: 11px; background: rgba(0, 0, 0, 0.5); padding: 1px 7px; border-radius: 4px; }
.screen .stitle { position: absolute; left: 10px; right: 10px; bottom: 8px; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.cm { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 0.93em; }
.cm .av { width: 24px; height: 24px; font-size: 11px; border-radius: 50%; }
.cm .nm { color: #9fb1c6; margin-right: 6px; font-weight: 700; }
.cm .tx { word-break: break-word; white-space: pre-wrap; }
.cm.me .nm { color: #7fdc8f; }
.cm.host .nm { color: #ffcf5a; }
.cm.sysc { color: #ffd76a; font-size: 0.85em; justify-content: center; text-align: center; }
.cm.new { animation: fadein 0.25s; }
.cm .ph { margin-top: 4px; width: min(200px, 52vw); }

/* feed (memo / form / notifications) */
.room.skin-feed .log { padding: 10px 12px 18px; }
.fd { background: var(--card); border-radius: 14px; padding: 10px 12px; margin: 8px 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); display: flex; gap: 10px; }
.fd .av { width: 30px; height: 30px; font-size: 12px; border-radius: 9px; }
.fd .bd { min-width: 0; flex: 1; }
.fd .hd2 { display: flex; gap: 8px; font-size: 12px; color: var(--ink2); }
.fd .hd2 b { color: var(--ink); }
.fd .hd2 time { margin-left: auto; color: var(--ink3); }
.fd .tx { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }
.fd.me { box-shadow: inset 3px 0 0 var(--brand), 0 1px 2px rgba(0, 0, 0, 0.08); }
.fd.new { animation: pop 0.22s ease-out; }

/* ---------------------------------------------------------------- input bar + choices */
.bar { flex: none; background: var(--phone); border-top: 1px solid var(--line); position: relative; z-index: 2; padding-bottom: env(safe-area-inset-bottom); }
.chips { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 2px; max-height: 46vh; overflow-y: auto; }
.chips .prompt { font-size: 11.5px; color: var(--ink3); padding: 0 2px; }
.chip { flex: none; text-align: left; background: var(--chip); color: var(--chip-ink); border: 1.5px solid var(--brand); border-radius: 18px; padding: 8px 14px; font-size: 0.95em; line-height: 1.4; animation: chipIn 0.25s ease-out both; }
.chip:hover, .chip:focus-visible { background: rgba(32, 179, 90, 0.1); outline: none; }
.chip.act { border-style: dashed; color: var(--ink2); }
.chip:disabled { opacity: 0.4; }
@keyframes chipIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.inbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; }
.inbar .icon-btn { width: 34px; height: 34px; color: var(--ink2); }
.field { flex: 1; min-width: 0; min-height: 36px; border-radius: 18px; background: rgba(127, 127, 127, 0.13); padding: 7px 14px; color: var(--ink3); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field.typed { color: var(--ink); }
.send { width: 36px; height: 36px; border-radius: 50%; color: var(--ink3); display: inline-flex; align-items: center; justify-content: center; }
.send.on { color: var(--brand); }
.send svg { width: 22px; height: 22px; }
.endbar { display: flex; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
.endbar button, .btn { flex: 1; min-width: 0; padding: 10px 10px; border-radius: 12px; background: rgba(127, 127, 127, 0.13); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.btn.primary, .endbar .primary { background: var(--brand); color: #fff; }
.endbar .primary { flex: 1 1 100%; white-space: normal; overflow: hidden; text-overflow: ellipsis; }
.endbar button { overflow: hidden; text-overflow: ellipsis; }
.tapnote { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); font-size: 11px; background: rgba(0, 0, 0, 0.55); color: #fff; padding: 2px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap; transition: opacity 0.4s; }

/* ---------------------------------------------------------------- banner, sheet, viewer, toast */
.banner { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 20; background: rgba(250, 251, 252, 0.97); color: #111; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 9px 12px; display: flex; gap: 10px; align-items: center; transform: translateY(-130%); transition: transform 0.28s ease; cursor: pointer; }
.banner.show { transform: none; }
.banner .logo { width: 30px; height: 30px; flex: none; }
.banner .bt { min-width: 0; flex: 1; }
.banner b { font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner span { font-size: 12.5px; color: #444; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner small { font-size: 10.5px; color: #888; flex: none; align-self: flex-start; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner { background: rgba(40, 44, 52, 0.97); color: #eee; } :root:not([data-theme="light"]) .banner span { color: #bbb; } }
:root[data-theme="dark"] .banner { background: rgba(40, 44, 52, 0.97); color: #eee; }

.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.42); z-index: 30; opacity: 0; transition: opacity 0.2s; }
.scrim.show { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--sheet); color: var(--ink); border-radius: 20px 20px 0 0; max-height: 88%; overflow-y: auto;
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.26s ease; overscroll-behavior: contain; }
.sheet.show { transform: none; }
.sheet.gone { visibility: hidden; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 10px; }
.sheet h2 { font-size: 17px; margin: 4px 0 12px; }
.sheet h3 { font-size: 13px; color: var(--ink2); margin: 16px 0 6px; }
.sheet .close { position: absolute; right: 10px; top: 8px; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list button, .menu-list a { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); text-align: left; text-decoration: none; font-size: 15px; }
.menu-list small { color: var(--ink3); margin-left: auto; font-size: 12px; text-align: right; }
.menu-list .av { width: 34px; height: 34px; font-size: 13px; }
.menu-list .mt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.menu-list .mt span { font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.seg button { padding: 6px 11px; font-size: 13px; }
.seg button.on { background: var(--brand); color: #fff; }
.ending { text-align: center; padding: 6px 0 4px; }
.ending .tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; border-radius: 4px; padding: 1px 8px; color: #fff; background: #59616b; }
.tag.bad { background: #8b2d2d; } .tag.cost { background: #8a6420; } .tag.true { background: #2b6d8f; } .tag.canon { background: #4a5260; }
.ending h2 { font-size: 22px; margin: 10px 0 2px; }
.ending .no { font-size: 12px; color: var(--ink3); }
.ending p.ep { text-align: left; font-size: 14.5px; line-height: 1.8; margin: 14px 0; padding: 12px 14px; background: rgba(127, 127, 127, 0.08); border-radius: 12px; }
.elist { list-style: none; padding: 0; margin: 0; }
.elist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.elist li .tag { flex: none; margin-top: 2px; }
.elist li.lock { color: var(--ink3); }
.elist li small { display: block; color: var(--ink3); font-size: 12px; }
.btns { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.btns .btn { flex: 1 1 40%; text-align: center; text-decoration: none; }
.share-text { font-size: 12.5px; background: rgba(127, 127, 127, 0.08); border-radius: 10px; padding: 8px 10px; text-align: left; }
.share-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 8px 0 4px; }
.share-buttons button { padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line); font-size: 12.5px; }
.share-buttons .share-x { background: #000; color: #fff; border-color: #000; }
.share-buttons .share-fb { background: #1b4f9a; color: #fff; border-color: #1b4f9a; }
.share-buttons .share-line { background: #06a04a; color: #fff; border-color: #06a04a; }
.share-buttons .share-ig { background: linear-gradient(45deg, #f2a43a, #d9406a, #7a46c8); color: #fff; border: 0; }
.share-note { min-height: 1.2em; color: var(--ink2); font-size: 12px; }

.viewer { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity 0.18s; }
.viewer.show { opacity: 1; }
.viewer .ph { width: min(92vw, 720px, calc((100vh - 140px) * var(--ar, 1.3))); max-width: 100%; border-radius: 6px; cursor: zoom-out; }
.viewer .vc { color: #ddd; font-size: 13px; margin-top: 10px; max-width: 640px; text-align: center; }
.viewer .vx { position: absolute; right: 12px; top: 10px; color: #fff; font-size: 28px; width: 44px; height: 44px; }
.toast { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 40; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; white-space: nowrap; animation: fadein 0.2s; pointer-events: none; }

/* invitation (story start) */
.invite { position: absolute; inset: 0; z-index: 25; background: var(--phone); overflow-y: auto; display: flex; flex-direction: column; }
.invite .cover { height: 210px; background: #222 center / cover no-repeat; position: relative; flex: none; }
.invite .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55)); }
.invite .cover .back { position: absolute; left: 8px; top: 8px; z-index: 1; color: #fff; }
.invite .body { padding: 0 20px 24px; margin-top: -44px; position: relative; z-index: 1; text-align: center; }
.invite .gav { width: 88px; height: 88px; border-radius: 30px; border: 4px solid var(--phone); font-size: 30px; margin: 0 auto; }
.invite h1 { font-size: 20px; margin: 10px 0 2px; line-height: 1.35; }
.invite .fmt { font-size: 12.5px; color: var(--ink2); margin: 0; }
.invite .members { display: flex; justify-content: center; gap: 6px; margin: 14px 0 6px; flex-wrap: wrap; }
.invite .members .m { display: flex; flex-direction: column; align-items: center; width: 64px; font-size: 11px; color: var(--ink2); }
.invite .members .m .av { width: 40px; height: 40px; margin-bottom: 3px; }
.invite .members .m.you b { color: var(--brand); }
.invite .desc { text-align: left; font-size: 14px; line-height: 1.75; color: var(--ink); margin: 12px 0; }
.invite .facts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); margin: 0 0 14px; }
.invite .facts span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.invite .btn { display: block; width: 100%; margin: 8px 0; padding: 13px; font-size: 15px; }
.invite .note { font-size: 11.5px; color: var(--ink3); text-align: left; margin-top: 14px; line-height: 1.6; }
.invite .saved { font-size: 12px; color: var(--ink2); margin: 2px 0 6px; }

/* effects */
.fx-shake { animation: shake 0.45s; }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.fx-flicker { animation: flicker 0.9s; }
@keyframes flicker { 10%, 30%, 55% { opacity: 0.35; } 20%, 45%, 70% { opacity: 1; } }
.fx-dim .rooms::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); pointer-events: none; transition: background 2s; }
.fx-glitch { animation: glitch 0.6s steps(2) 2; }
@keyframes glitch { 0% { transform: translate(0); filter: none; } 50% { transform: translate(2px, -1px) skewX(-6deg); filter: hue-rotate(90deg); } 100% { transform: translate(-1px, 1px); } }
.calm .fx-shake, .calm .fx-flicker, .calm .fx-glitch { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .fx-shake, .fx-flicker, .fx-glitch, .room.in, .chip { animation: none !important; } .banner, .sheet { transition: none; } }
noscript p { padding: 16px; }

/* menu icons: fixed size (an unsized inline SVG fills the sheet) */
.menu-list svg { width: 22px; height: 22px; flex: none; color: var(--ink2); }
.menu-list .av { flex: none; }

/* the talks of this story, as tabs under the header */
.rtabs { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px; background: var(--phone); border-bottom: 1px solid var(--line); scrollbar-width: none; position: relative; z-index: 2; }
.rtabs::-webkit-scrollbar { display: none; }
.rtabs[hidden] { display: none; }
.rtabs button { flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 62%; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); color: var(--chip-ink); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.rtabs .badge { font-style: normal; }

/* ---------------------------------------------------------------- messenger details (talkui.js / home.js) */
.field { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 14px; cursor: text; }
.field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; padding: 6px 0; text-overflow: ellipsis; }
.field input::placeholder { color: var(--ink3); }
.field input:disabled { color: var(--ink3); }
.field.typed input { color: var(--ink); }
.field .stk { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink3); }
.field .stk svg { width: 21px; height: 21px; }
.inbar .icon-btn:focus-visible, .send:focus-visible, .field .stk:focus-visible, .field:focus-within { outline: 2px solid rgba(32, 179, 90, 0.55); outline-offset: 1px; }
.chips.nudge { animation: nudge 0.5s; }
@keyframes nudge { 25% { transform: translateY(-3px); } 50% { transform: none; } 75% { transform: translateY(-2px); } }
.chips.nudge .chip { box-shadow: 0 0 0 3px rgba(32, 179, 90, 0.25); }
.hd .hcall[hidden] { display: none; }
/* phones: the call button lives in トーク情報 / profiles so the talk name keeps its room */
@media (max-width: 399px) { .hd .hcall { display: none; } }
@media (max-width: 359px) { .hd .spd { padding: 1px 4px; } .hd .hsearch { display: none; } }

/* search in the talk */
.tsearch { flex: none; display: flex; align-items: center; gap: 2px; padding: 5px 6px 5px 10px; background: var(--phone); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.tsearch[hidden] { display: none; }
.tsearch input { flex: 1; min-width: 0; border: 0; border-radius: 9px; background: rgba(127, 127, 127, 0.13); font: inherit; font-size: 16px; color: var(--ink); padding: 5px 10px; outline: none; }
.tsearch .cnt { font-size: 11.5px; color: var(--ink3); min-width: 36px; text-align: center; white-space: nowrap; }
.tsearch .icon-btn { width: 32px; height: 32px; color: var(--ink2); }
.tsearch .icon-btn svg { width: 20px; height: 20px; }
.tsearch .txt { font-size: 13px; color: var(--brand); font-weight: 700; padding: 4px 6px; white-space: nowrap; }
.hit .bub, .hit .tx, .hit.sys span, .hit > p { box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.75); }
.hit.cur .bub, .hit.cur .tx, .hit.cur.sys span, .hit.cur > p { box-shadow: 0 0 0 3px #ffb300; }
.post.hit, .fd.hit, .cm.hit, .ncard.hit { background-image: linear-gradient(rgba(255, 196, 0, 0.14), rgba(255, 196, 0, 0.14)); }
.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 60% { background: rgba(255, 196, 0, 0.3); } 100% { background: transparent; } }

/* jump to the latest message, the reply (quote) strip */
.jumpwrap { position: relative; height: 0; z-index: 3; }
.jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; background: var(--phone); color: var(--ink); border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 12px; font-weight: 700; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22); white-space: nowrap; }
.jump[hidden] { display: none; }
.jump svg { width: 18px; height: 18px; color: var(--brand); }
.qbar { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: var(--phone); border-top: 1px solid var(--line); }
.qbar[hidden] { display: none; }
.qbar > svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.qbar .qt { flex: 1; min-width: 0; }
.qbar .icon-btn { width: 30px; height: 30px; color: var(--ink3); }
.qbar .icon-btn svg { width: 18px; height: 18px; }
.qt { display: block; border-left: 3px solid var(--brand); padding: 1px 0 1px 8px; font-size: 12px; line-height: 1.35; min-width: 0; }
.qt b { display: block; font-size: 11px; color: var(--ink2); }
.qt span { display: block; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bub .qt { margin: 1px 0 5px; border-left-color: rgba(0, 0, 0, 0.3); cursor: pointer; max-width: 220px; }
.bub .qt b, .bub .qt span { color: inherit; opacity: 0.75; }
.post .qt { margin: 4px 0 2px; cursor: pointer; }

/* bubbles: long-press menu target, reactions, unsent */
.msg .bub, .msg .media, .post, .cm, .fd, .ncard { -webkit-touch-callout: none; }
.msg .av, .ncard .av, .cm .av, .fd .av { cursor: pointer; }
.rx { align-self: flex-start; margin: 2px 0 0 4px; font-size: 11.5px; font-weight: 700; background: var(--phone); color: #d0455a; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; line-height: 1.6; }
.msg.me .rx { align-self: flex-end; margin: 2px 4px 0 0; }
.fd .rx, .post .rx, .cm .rx { display: inline-block; margin-top: 4px; }
.unsent .bub, .unsent .media, .unsent .stk-sent { opacity: 0.72; }
.unsent .meta { align-items: flex-end; gap: 1px; color: #d0455a; }
.unsent .fail { width: 18px; height: 18px; border-radius: 50%; background: #d0455a; color: #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; padding: 0; }
.unsent .fail.again { animation: shake 0.45s; }
.post.unsent .fail, .cm.unsent .fail { width: auto; height: auto; border-radius: 4px; padding: 0 5px; font-size: 10.5px; line-height: 1.6; cursor: pointer; }
.unsent .sending { color: var(--meta); }
.stk-sent svg { width: 120px; height: 120px; display: block; }

/* sheets: tiles (＋), photo grid, stickers, bubble menu, profile */
.sheet .note { font-size: 12.5px; color: var(--ink3); margin: 8px 0; line-height: 1.6; }
.sheet .h2s { font-size: 12px; font-weight: 400; color: var(--ink3); margin-left: 6px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tiles button, .camtile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 4px; border-radius: 14px; background: rgba(127, 127, 127, 0.1); font-size: 12px; color: var(--ink2); }
.tiles button svg, .camtile svg { width: 26px; height: 26px; color: var(--ink2); }
.tiles button.on { box-shadow: inset 0 0 0 2px var(--brand); }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pgrid > button { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #2a2d33; position: relative; padding: 0; }
.pgrid > .camtile { background: rgba(127, 127, 127, 0.1); }
.pgrid .ph.thumb { width: 100%; height: 100%; border-radius: 0; cursor: pointer; }
.pgrid .ph.thumb img { width: 100%; height: 100%; object-fit: cover; }
.pgrid .ph.thumb .ov { display: none; }
.stks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stks button { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 12px; font-size: 10.5px; color: var(--ink3); }
.stks button:hover, .stks button:focus-visible { background: rgba(127, 127, 127, 0.1); outline: none; }
.stks svg { width: 100%; max-width: 72px; height: auto; }
.bm-prev { background: rgba(127, 127, 127, 0.09); border-radius: 12px; padding: 8px 12px; margin: 0 34px 10px 0; font-size: 13px; }
.bm-prev b { display: block; font-size: 11.5px; color: var(--ink3); }
.bm-prev span { white-space: pre-wrap; word-break: break-word; }
.reacts { display: flex; justify-content: space-between; gap: 4px; margin: 0 0 6px; }
.reacts button { flex: 1; height: 42px; border-radius: 12px; background: rgba(127, 127, 127, 0.1); font-weight: 700; font-size: 15px; color: #d0455a; }
.reacts button.on { background: rgba(208, 69, 90, 0.16); box-shadow: inset 0 0 0 2px #d0455a; }
.menu-list button:disabled { cursor: default; }
.menu-list button:disabled b { color: var(--ink3); }
.menu-list button:disabled svg { opacity: 0.45; }
.menu-list .you { font-style: normal; font-size: 10px; font-weight: 700; background: var(--brand); color: #fff; border-radius: 4px; padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
.prof { text-align: center; padding: 6px 0 2px; }
.prof .av.big { width: 84px; height: 84px; font-size: 32px; border-radius: 34%; }
.prof h2 { margin: 10px 0 2px; }
.prof .st { margin: 0; font-size: 13px; color: var(--ink2); }
.pstat { display: flex; justify-content: center; gap: 22px; margin: 12px 0 4px; font-size: 11px; color: var(--ink3); }
.pstat span { display: flex; flex-direction: column; align-items: center; }
.pstat b { font-size: 18px; color: var(--ink); }
.pact { display: flex; justify-content: center; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }
.pact button, .pact a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 8px 6px; border-radius: 12px; font-size: 11.5px; color: var(--ink2); text-decoration: none; }
.pact button:hover, .pact a:hover { background: rgba(127, 127, 127, 0.1); }
.pact svg { width: 24px; height: 24px; color: var(--ink); }

/* a call that nobody answers */
.callscr { position: absolute; inset: 0; z-index: 50; background: linear-gradient(180deg, #1c2430, #0d1117); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 90px 20px 30px; opacity: 0; transition: opacity 0.2s; text-align: center; }
.callscr.show { opacity: 1; }
.callscr .av.big { width: 104px; height: 104px; font-size: 40px; border-radius: 50%; animation: ringpulse 1.6s infinite; }
.callscr.over .av.big { animation: none; filter: grayscale(0.6); }
.callscr h2 { margin: 18px 0 4px; font-size: 21px; }
.callscr .cs { margin: 0; color: #b8c2cf; font-size: 14px; }
.callscr .cb { margin-top: auto; }
.callscr .end { width: 64px; height: 64px; border-radius: 50%; background: #e0464e; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.callscr .end svg { width: 28px; height: 28px; transform: rotate(135deg); }
.callscr .cn { font-size: 11px; color: #7d8794; margin: 18px 0 0; }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28); } 100% { box-shadow: 0 0 0 26px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .callscr .av.big, .chips.nudge, .flash { animation: none !important; } }

/* home: views + bottom navigation, pinned / muted rows, typing in a row */
body[data-page="home"] .phone > .view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body[data-page="home"] .phone > .view[hidden] { display: none; }
.bnav { flex: none; display: flex; border-top: 1px solid var(--line); background: var(--phone); padding-bottom: env(safe-area-inset-bottom); }
.bnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px; font-size: 10.5px; color: var(--ink3); position: relative; }
.bnav button svg { width: 24px; height: 24px; }
.bnav button.on { color: var(--ink); font-weight: 700; }
.bnav .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
.row .name .ic { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--ink3); }
.row .name .ic svg { width: 14px; height: 14px; }
.row.muted .badge { background: #a3abb5; }
.row .prev.typing { color: var(--brand); font-weight: 700; }
.row > a, .row > div { -webkit-touch-callout: none; }
.row.soon > div { cursor: pointer; }
.rec-head { margin: 8px 12px 6px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(127, 127, 127, 0.08); }
.rec-head .av { width: 54px; height: 54px; font-size: 22px; border-radius: 50%; }
.rec-head b { font-size: 16px; display: block; }
.rec-head small { color: var(--ink2); font-size: 12px; }
.rec { margin: 0 12px 10px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.rec h3 { margin: 0 0 4px; font-size: 14px; display: flex; gap: 8px; align-items: center; }
.rec h3 a { color: inherit; text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec ul { list-style: none; margin: 0; padding: 0; }
.rec li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 3px 0; border-top: 1px dashed var(--line); }
.rec li .tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; border-radius: 4px; padding: 0 6px; color: #fff; background: #59616b; }
.rec li.lock { color: var(--ink3); }
.rec li.lock .tag { background: transparent; color: var(--ink3); border: 1px solid var(--line); }
.fsec { padding: 12px 16px 4px; font-size: 12px; color: var(--ink3); font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.fsec a { color: var(--brand); text-decoration: none; font-weight: 700; white-space: nowrap; }
.frow { display: flex; width: 100%; align-items: center; gap: 12px; padding: 7px 16px; text-align: left; }
.frow:hover { background: rgba(127, 127, 127, 0.07); }
.frow .av { width: 42px; height: 42px; font-size: 16px; }
.frow .mt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.frow .mt b { font-size: 14.5px; }
.frow .mt span { font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the ending button waits for the reader (no dialog over the last lines) */
.endbar .primary.glow { animation: endglow 1.8s ease-in-out 1.2s infinite; }
@keyframes endglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(32, 179, 90, 0); } 50% { box-shadow: 0 0 0 6px rgba(32, 179, 90, 0.28); } }
.endbar .newtag { font-style: normal; font-size: 10.5px; font-weight: 800; background: #fff; color: var(--brand); border-radius: 4px; padding: 0 5px; margin-right: 6px; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) { .endbar .primary.glow { animation: none; } }