/* Cofacts MozFest demo film: 1080x1920 stage. Everything is positioned by JS as a pure function of t. */
:root {
  --v-bg: #232220;
  --v-fg: #ffffff;
  --v-muted: #bdb8ad;
  --v-amber: #ffb600;
  --v-track: #45433f;
  --font-text: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #111; }
body { font-family: var(--font-text); color: #fff; }
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }

/* ---------- stage ---------- */
#stage { width: 1080px; height: 1920px; position: relative; overflow: hidden; background: var(--v-bg); transform-origin: 0 0; display: flex; flex-direction: column; }
body.render { overflow: hidden; }
body.render #player-ui { display: none; }

/* progress bar (storyboard design, in px at 1080 wide: 1cqw = 10.8px) */
.pb { display: flex; gap: 5.4px; padding: 0; flex: none; }
.pb .grp { min-width: max-content; display: flex; flex-direction: column; }
.pb .loc { font-size: 19.4px; font-weight: 700; letter-spacing: .02em; padding: 7px 10px 6px; color: var(--v-bg); line-height: 1.05; height: 56px; display: flex; align-items: center; width: 0; min-width: 100%; overflow: hidden; }
.pb .stages { display: flex; gap: 5.4px; flex: 1; }
.pb .s { min-width: max-content; display: flex; flex-direction: column; background: #1a1918; }
.pb .t { height: 10.8px; background: var(--v-track); }
.pb .t i { display: block; height: 100%; background: var(--v-fg); }
.pb .l { font-size: 23.8px; font-weight: 700; padding: 8.6px 8px; color: var(--v-muted); white-space: nowrap; text-align: center; line-height: 1.2; }
.pb .s.cur .l { color: var(--v-fg); }
.pb .s.cur { background: #34322e; }

#main { flex: 1; position: relative; min-height: 0; }
.big { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 0 64.8px; }
.big .ti { font-size: 97.2px; line-height: 1.05; font-weight: 700; text-wrap: balance; }
.big .bo { font-size: 45.4px; color: var(--v-muted); line-height: 1.35; }
.big .url { font-size: 38.9px; color: var(--v-amber); font-weight: 700; }

#content { position: absolute; inset: 0; display: flex; flex-direction: column; }
#caps { position: relative; flex: none; }
.cap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 20px 54px 20px; display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.cap .ti { font-size: 67px; line-height: 1.1; font-weight: 700; text-wrap: balance; }
.cap .bo { font-size: 37.8px; line-height: 1.36; color: var(--v-muted); }
#screens { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #111; }
#phone { position: absolute; left: 0; top: 0; width: 400px; transform-origin: 0 0; overflow: hidden; background: #fff; }
.layer { position: absolute; inset: 0; background: #fff; overflow: hidden; will-change: transform, opacity; }

/* ---------- generic flow ---------- */
.fvp { position: absolute; overflow: hidden; }
.fc { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }

/* ---------- LINE ---------- */
.line { font-family: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; color: #111; -webkit-font-smoothing: antialiased; }
.line .hdr { position: absolute; top: 0; left: 0; right: 0; height: 48px; background: #fff; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid #e6e6e6; z-index: 3; }
.line .hdr .back { width: 26px; display: flex; }
.line .hdr .title { flex: 1; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.line .hdr .icons { display: flex; gap: 18px; }
.line .bg { position: absolute; inset: 48px 0 50px 0; background: #8CABD8; }
.line .fvp { top: 48px; bottom: 50px; left: 0; right: 0; }
.line .fc { padding: 8px 0 10px; display: flex; flex-direction: column; }
.line .inputbar { position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: #fff; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-top: 1px solid #e6e6e6; z-index: 3; }
.line .inputbar span { display: flex; }
.line .field { flex: 1; height: 34px; border-radius: 17px; background: #f0f0f0; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; color: #999; font-size: 16px; }
.line .chip { align-self: center; background: rgba(0,0,0,.28); color: #fff; font-size: 12px; padding: 3px 12px; border-radius: 12px; margin: 6px 0 12px; }
.line .msg { display: flex; margin: 0 10px 6px; align-items: flex-start; }
.line .msg.first { margin-top: 8px; }
.line .msg.in .avslot { width: 42px; flex: none; }
.line .av { width: 36px; height: 36px; border-radius: 50%; display: block; background: #fff; object-fit: cover; }
.line .av.ini { color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.line .mb { display: flex; flex-direction: column; min-width: 0; }
.line .nm { font-size: 12px; color: #fff; margin: 0 0 3px 2px; text-shadow: 0 0 1px rgba(0,0,0,.2); }
.line .ln { display: flex; align-items: flex-end; gap: 5px; }
.line .ts { font-size: 11px; color: rgba(255,255,255,.9); white-space: nowrap; flex: none; line-height: 1.25; }
.line .bubble { position: relative; background: #fff; border-radius: 18px; padding: 9px 13px; max-width: 282px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.38; font-size: 15px; }
.line .bubble.tail::before { content: ""; position: absolute; left: -7px; top: 10px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid #fff; }
.line .url { color: #42659a; text-decoration: underline; overflow-wrap: anywhere; }
.line .photo { display: block; width: 176px; border-radius: 16px; background: #fff; }
.line .msg.out { justify-content: flex-end; align-items: flex-end; margin-right: 14px; }
.line .out-ts { text-align: right; margin-right: 5px; font-size: 11px; color: rgba(255,255,255,.92); line-height: 1.25; flex: none; }
.line .out-ts span { display: block; }
.line .bubble.out-b { background: #8DE055; color: #111; }
.line .bubble.out-b.tail::before { left: auto; right: -7px; border-right: 0; border-left: 9px solid #8DE055; }
.line .dots { display: flex; gap: 6px; align-items: center; height: 18px; padding: 0 3px; }
.line .dots i { width: 8px; height: 8px; border-radius: 50%; background: #9a9a9a; display: block; }
.line .typing { display: flex; gap: 6px; align-items: center; padding: 14px 16px; border-radius: 18px; }
.line .typing i { width: 8px; height: 8px; border-radius: 50%; background: #9a9a9a; display: block; }
.line .para { display: block; }
.line .para + .para { margin-top: 1.38em; }
.line .para.lnk + .para.lnk { margin-top: 0; }
.line .flex { width: 298px; background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; flex: none; }
.line .fh { padding: 18px 18px 0; }
.line .fb { padding: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.line .fh + .fb { padding-top: 10px; }
.line .ff { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.line .fb:last-child { padding-bottom: 18px; }
.line .ft { font-size: 15px; line-height: 1.35; color: #111; overflow-wrap: anywhere; }
.line .big { position: static; display: block; padding: 0; font-size: 22px; font-weight: 700; line-height: 1.2; }
.line .big2 { font-size: 18px; font-weight: 700; line-height: 1.2; }
.line .sep { height: 1px; background: #e4e4e4; }
.line .frow { display: flex; gap: 8px; font-size: 15px; line-height: 1.35; align-items: flex-start; }
.line .frow .em { flex: none; }
.line .fbtn { position: relative; overflow: hidden; height: 44px; border-radius: 8px; color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center; flex: none; }
.line .flink { position: relative; overflow: hidden; height: 40px; font-size: 15px; display: flex; align-items: center; justify-content: center; flex: none; }
.line .ff .flink { margin-top: -10px; }
.line .pair { display: flex; gap: 8px; }
.line .pair .fbtn { flex: 1; }
.line .carw { margin: 0 0 10px 52px; overflow: hidden; }
.line .car { display: flex; gap: 8px; align-items: stretch; padding-right: 20px; will-change: transform; }
.line .car .flex { width: 250px; }
.line .ff:first-child { padding-top: 14px; }
.line .car .fh:only-child, .line .car .flex > .ff:not(:first-child) { margin-top: auto; }
.line.lock { background: linear-gradient(160deg, #2b3a67 0%, #6a4c93 45%, #f08a5d 100%); color: #fff; }
.line .lockhead { text-align: center; margin-top: 52px; }
.line .lockdate { font-size: 20px; font-weight: 600; opacity: .9; }
.line .locktime { font-size: 84px; font-weight: 600; line-height: 1.05; letter-spacing: -2px; }
.line .notif { position: absolute; left: 14px; right: 14px; top: 215px; background: rgba(235,235,240,.9); border-radius: 22px; padding: 14px; display: flex; gap: 12px; color: #111; box-shadow: 0 4px 20px rgba(0,0,0,.18); }
.line .appicon { width: 40px; height: 40px; border-radius: 10px; background: #06C755; color: #fff; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none; letter-spacing: .2px; }
.line .nbody { flex: 1; min-width: 0; }
.line .nrow { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 2px; }
.line .nrow span { font-size: 13px; color: #555; }
.line .ntext { font-size: 16px; line-height: 1.3; }
.line .lockfoot { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; }
.line .lockfoot i { width: 134px; height: 5px; border-radius: 3px; background: #fff; display: block; }
.rip { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; background: rgba(255,255,255,.55); width: 70px; height: 70px; left: 50%; top: 50%; margin: -35px 0 0 -35px; }
.rip.dark { background: rgba(0,0,0,.22); }

/* ---------- Cofacts website (mobile article page) ---------- */
.web { font-family: "Noto Sans", "Noto Sans TC", sans-serif; color: #333; background: #f5f5f5; }
.web .hdr { position: absolute; top: 0; left: 0; right: 0; height: 52px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 14px; z-index: 3; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.web .hdr img { height: 28px; display: block; }
.web .hdr .login { font-size: 14px; padding: 3px 14px; border-radius: 70px; border: 1px solid #333; }
.web .fvp { top: 52px; bottom: 0; left: 0; right: 0; }
.web .fc { padding: 0 0 20px; }
.web .card { background: #fff; border-radius: 8px; margin: 8px 8px 0; }
.web .ribbon-row { padding: 14px 16px 0; }
.web .ribbon { position: relative; left: -8px; background: #ffb600; color: #333; width: fit-content; padding: 4px 14px 4px 14px; font-size: 14px; font-weight: 500; line-height: 1.4; margin-bottom: 6px; }
.web .ribbon::before { content: ""; position: absolute; bottom: -8px; left: 0; border-top: 8px solid #ff9200; border-left: 8px solid transparent; }
.web .ribbon svg { position: absolute; left: 100%; top: 0; height: 100%; width: 14px; }
.web .ribbon svg path { fill: #ffb600; }
.web .infos { font-size: 13px; color: #858585; padding: 8px 0 2px; }
.web .attach { display: block; width: 100%; max-width: 600px; margin: 0; border-radius: 2px; }
.web .cc { margin: 0 16px; padding: 14px 0; word-break: break-word; }
.web .cc + .cc { border-top: 1px solid #d6d6d6; }
.web .btnrow { display: flex; align-items: center; gap: 0; margin-top: 4px; }
.web .btn-group { display: flex; width: 100%; border: 1px solid rgba(0,0,0,.23); border-radius: 30px; overflow: hidden; font-size: 14px; font-weight: 500; text-transform: none; }
.web .btn-group > div { flex: 1; text-align: center; padding: 7px 0; border-left: 1px solid rgba(0,0,0,.23); display: flex; align-items: center; justify-content: center; }
.web .btn-group > div:first-child { border-left: 0; }
.web .btn-group > div.more { flex: 0 0 44px; }
.web .btn-amber { background: #ffb600; color: #333; text-align: center; font-weight: 500; font-size: 16px; padding: 11px 0; border-radius: 0 0 8px 8px; position: relative; overflow: hidden; margin: 10px 0 0; }
.web .ch { margin: 0 16px; padding: 12px 0 8px; font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .25px; color: #333; border-bottom: 1px solid #333; }
.web .noreply { font-size: 15px; line-height: 1.5; }
.web .terms { font-size: 12.5px; color: #858585; margin: 14px 12px; line-height: 1.5; }
.web .rhead { display: flex; align-items: center; gap: 12px; }
.web .avatar { width: 42px; height: 42px; border-radius: 50%; background: #1b2a4a; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex: none; position: relative; overflow: hidden; }
.web .avatar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, #6d8cff 0, transparent 45%), radial-gradient(circle at 30% 75%, #7a2fd0 0, transparent 50%); opacity: .6; }
.web .avatar b { position: relative; z-index: 1; }
.web .rsum { font-weight: 700; font-size: 15px; line-height: 1.35; color: #fb5959; }
.web .rinfo { font-size: 13px; color: #858585; margin-top: 2px; }
.web .rinfo u { color: #2079f0; text-decoration: underline; }
.web .rtext { padding: 14px 0; border-bottom: 1px dashed #d6d6d6; font-size: 15px; line-height: 1.5; }
.web .rtext .clamp { overflow: hidden; }
.web .rtext p { margin: 0 0 1em; }
.web .rtext .toggle { text-align: right; color: #2079f0; font-size: 14px; }
.web .rref { padding: 14px 0 0; font-size: 15px; line-height: 1.5; }
.web .rref h3 { font-size: 15px; margin: 0 0 6px; font-weight: 700; }
.web .rref a { color: #2079f0; text-decoration: underline; word-break: break-all; }
.web .rref div + div { margin-top: 2px; }
.web .rfoot { display: flex; padding: 14px 0 6px; gap: 14px; color: #858585; font-size: 14px; align-items: center; }

/* ---------- cofacts.ai (mobile) ---------- */
.ai { font-family: "Noto Sans", "Noto Sans TC", sans-serif; color: #333; background: #fff; }
.ai .hdr { position: absolute; top: 0; left: 0; right: 0; height: 52px; background: #fff; border-bottom: 1px solid #e5e5e5; box-shadow: 0 1px 2px rgba(0,0,0,.05); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; z-index: 5; }
.ai .hdr .l { display: flex; align-items: center; gap: 12px; }
.ai .hdr .logo { display: flex; align-items: center; gap: 8px; }
.ai .cdot { width: 32px; height: 32px; border-radius: 50%; background: #ffb600; color: #fff; font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.ai .hdr .nm { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.ai .avatar { width: 34px; height: 34px; border-radius: 50%; background: #1b2a4a; overflow: hidden; position: relative; }
.ai .avatar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, #6d8cff 0, transparent 45%), radial-gradient(circle at 30% 75%, #7a2fd0 0, transparent 50%); opacity: .75; }
.ai .body { position: absolute; top: 52px; left: 0; right: 0; bottom: 0; background: #fff; }
.ai .welcome { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 26px 14px 0; }
.ai .hero { text-align: center; padding: 0 6px 18px; }
.ai .hero .circle { width: 56px; height: 56px; border-radius: 50%; background: #ffb600; color: #fff; font-weight: 700; font-size: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.ai .hero h1 { font-size: 24px; margin: 0 0 8px; font-weight: 700; color: #333; }
.ai .hero p { margin: 0; font-size: 15px; line-height: 1.45; color: #666; }
.ai .inbox { border: 1px solid #d1d5db; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); position: relative; }
.ai .inbox .ta { padding: 12px; min-height: 50px; font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; color: #333; position: relative; overflow: hidden; }
.ai .inbox .ta .ph { color: #9ca3af; }
.ai .inbox .row2 { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; }
.ai .inbox .clip { padding: 6px; color: #6b7280; display: flex; }
.ai .send { padding: 7px; background: #ffb600; color: #000; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.ai .foot { text-align: center; margin-top: 8px; font-size: 11px; color: #9ca3af; }
.ai .caret { display: inline-block; width: 1.5px; height: 16px; background: #333; vertical-align: -3px; margin-left: 1px; }
.ai .session { position: absolute; inset: 0; }
.ai .chatvp { left: 0; right: 0; top: 0; bottom: 64px; }
.ai .chatc { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.ai .inputw { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; padding: 8px 12px 10px; background: #fff; }
.ai .inputw .inbox { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; height: 46px; }
.ai .inputw .ph { color: #9ca3af; font-size: 14px; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.ai .u { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; max-width: 92%; }
.ai .u .bub { background: #f5f5f5; border: 1px solid #f0f0f0; padding: 12px 14px; border-radius: 16px 0 16px 16px; font-size: 14px; line-height: 21px; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow-wrap: anywhere; }
.ai .u .bub b { text-decoration: underline; }
.ai .u .you { font-size: 12px; color: #666; margin: 3px 4px 0 0; }
.ai .ah { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ai .ah .av { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,182,0,.2); display: flex; align-items: center; justify-content: center; color: #a16207; }
.ai .ah .av .material-symbols-outlined { font-size: 16px; }
.ai .ah span.n { font-size: 14px; font-weight: 600; color: #111827; }
.ai .tx { font-size: 14px; line-height: 22px; color: #333; overflow-wrap: anywhere; }
.ai .tx p { margin: 0; }
.ai .tx p + p { margin-top: 8px; }
.ai .tx ul { margin: 6px 0 0; padding-left: 4px; list-style: none; }
.ai .tx li { padding-left: 16px; position: relative; margin-top: 4px; }
.ai .tx li::before { content: "•"; position: absolute; left: 3px; }
.ai .tx b { font-weight: 700; }
.ai .tc { display: flex; align-items: center; gap: 6px; padding-left: 4px; min-height: 30px; }
.ai .tc .el { color: #d1d5db; font-size: 16px; }
.ai .badge { display: inline-flex; align-items: center; gap: 6px; background: #f5f5f5; border: 1px solid #e5e5e5; color: #666; padding: 2px 10px; border-radius: 9999px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 500; flex: none; }
.ai .badge .material-symbols-outlined { font-size: 15px; color: #6b7280; }
.ai .badge.focus { background: rgba(255,182,0,.12); border-color: rgba(255,182,0,.5); box-shadow: 0 0 0 1px rgba(255,182,0,.35); }
.ai .qp { flex: 1; min-width: 0; background: #1f1f1f; border-radius: 10px; padding: 3px; }
.ai .qp .in { display: flex; align-items: center; gap: 6px; background: #2e2e2e; border-radius: 9999px; padding: 3px 10px 3px 4px; overflow: hidden; color: #fff; font-size: 12.5px; }
.ai .qp .g { width: 18px; height: 18px; border-radius: 50%; background: #fff; flex: none; display: flex; align-items: center; justify-content: center; }
.ai .qp .qt { white-space: nowrap; will-change: transform; display: inline-block; }
.ai .qp .qw { overflow: hidden; flex: 1; min-width: 0; }

.ai .scrim { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 6; pointer-events: none; }
.ai .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 24px rgba(0,0,0,.22); z-index: 7; display: flex; flex-direction: column; overflow: hidden; will-change: transform; }
.ai .sheet .sh { flex: none; height: 50px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 16px; border-bottom: 1px solid #e5e5e5; background: #fff; position: relative; z-index: 2; }
.ai .sheet .sh::before { content: ""; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #d1d5db; }
.ai .sheet .sh h2 { flex: 1; margin: 6px 0 0; font-size: 15px; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai .sheet .sh .material-symbols-outlined { color: #9ca3af; font-size: 22px; margin-top: 6px; }
.ai .sheet .sb { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.ai .sheet .fc { padding: 16px 16px 24px; }
.ai .sheet.draftp .sb { background: #f8f8f5; }
.ai .lbl { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.ai section { margin-bottom: 16px; }
.ai .md { font-size: 14px; line-height: 21px; color: #1f2937; overflow-wrap: anywhere; }
.ai .md p { margin: 0 0 8px; }
.ai .md ul { margin: 4px 0 8px; padding-left: 18px; }
.ai .md li { margin: 3px 0; }
.ai .md h3 { font-size: 16px; margin: 14px 0 6px; font-weight: 700; color: #111827; }
.ai .md h3.big { font-size: 19px; }
.ai .claim { margin-bottom: 14px; }
.ai .claim .ct { font-size: 14px; line-height: 21px; color: #1f2937; }
.ai .claim .st { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 6px; margin: 5px 0 4px; }
.ai .claim .st.ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ai .claim .st.no { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.ai .claim .q { font-size: 13.5px; line-height: 20px; color: #4b5563; border-left: 3px solid #e5e7eb; padding-left: 10px; font-style: italic; }
.ai .claim .nt { font-size: 13.5px; line-height: 20px; color: #4b5563; margin-top: 3px; }
.ai .ref { display: block; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.ai .ref .dm { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #9ca3af; letter-spacing: .04em; }
.ai .ref .dm .material-symbols-outlined { font-size: 14px; color: #9ca3af; }
.ai .ref .ul { font-size: 12px; color: #4b5563; word-break: break-all; margin-top: 3px; line-height: 1.35; }
.ai .tabs { display: flex; gap: 4px; padding: 4px; background: #f3f4f6; border-radius: 8px; margin-bottom: 16px; }
.ai .tab { flex: 1; min-width: 0; padding: 7px 2px 6px; text-align: center; border-radius: 6px; border: 1px solid transparent; font-size: 11.5px; font-weight: 700; color: #9ca3af; line-height: 1.2; }
.ai .tab .material-symbols-outlined { display: block; font-size: 18px; margin: 0 auto 3px; opacity: .4; }
.ai .tab.sel { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ai .tab.sel .material-symbols-outlined { opacity: 1; }
.ai .tab.c-yellow .material-symbols-outlined { color: #eab308; }
.ai .tab.c-red .material-symbols-outlined { color: #ef4444; }
.ai .tab.c-green .material-symbols-outlined { color: #22c55e; }
.ai .tab.c-blue .material-symbols-outlined { color: #3b82f6; }
.ai .tab.sel.c-red { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.ai .dl { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.ai .dl .material-symbols-outlined { font-size: 14px; }
.ai .dl .cp { margin-left: auto; position: relative; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: visible; color: #9ca3af; }
.ai .dl .cp .material-symbols-outlined { font-size: 20px; }
.ai .dbox { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; font-size: 14px; line-height: 22px; color: #1f2937; overflow-wrap: anywhere; }
.ai .dbox p { margin: 0; }
.ai .dbox p + p { margin-top: 14px; }
.ai .dbox.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 19px; color: #374151; }
.ai .dbox.mono p + p { margin-top: 0; }
.ai .dsec { margin-bottom: 18px; }
.ai .toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 15px; padding: 9px 20px; border-radius: 9999px; z-index: 9; opacity: 0; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.ai .toast .material-symbols-outlined { font-size: 18px; color: #4ade80; }

/* ---------- player chrome: tap to play/pause, tap the top bar to seek ---------- */
#wrap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pb .s, .pb .grp { cursor: pointer; }
#pp-badge { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font: 34px/88px system-ui, sans-serif; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 5; }
#pp-badge.paused, #pp-badge.flash { opacity: 1; }
#pp-badge.flash { animation: ppfade .5s ease-out forwards; }
@keyframes ppfade { from { opacity: 1; } to { opacity: 0; } }