/* ================================================================
   family.css — 「一家人」共用樣式（完整版 full.html、精簡版 short.html）
   聊天畫面：仿手機通訊軟體群組的熟悉版面（2026-09-16 Jun 定調）。
   界線：不使用任何品牌名稱、標誌、官方貼圖與角色；貼圖一律為原創文字貼圖。
   蓋版（選人設、結局）維持本專案深夜藍 × 暖燈黃。
================================================================ */
:root{
  /* 聊天畫面 */
  --chat-bg:#8eabd8; --chat-ink:#111; --chat-name:#2e3b52; --chat-meta:#415273;
  --bub-in:#fff; --bub-out:#a4e28f; --pill:rgba(64,88,130,.42);
  --bar-ink:#111; --composer:#fff; --field:#f1f2f4; --quick:#1f9f4e;
  /* 蓋版 */
  --night:#131a2c; --panel:#1c2540; --panel-2:#232e4f;
  --lamp:#f0b450; --milk:#f3ede2; --dim:#9aa3ba; --red:#e06a5a; --green:#8fbb84;
  --line:rgba(243,237,226,.14);
  --serif:'Noto Serif TC',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:#1a1f2b;color:var(--chat-ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  display:flex;justify-content:center;-webkit-font-smoothing:antialiased}
#app{width:100%;max-width:430px;height:100vh;height:100dvh;display:flex;flex-direction:column;
  position:relative;overflow:hidden;background:var(--chat-bg)}
@media(min-width:500px){
  body{align-items:center;padding:16px 0}
  #app{height:min(860px,calc(100vh - 32px));height:min(860px,calc(100dvh - 32px));
    border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.55)}
}

/* ————— 頂列：返回、群組名(人數)、功能圖示 ————— */
#bar{flex:none;display:flex;align-items:center;gap:6px;height:54px;padding:0 10px 0 6px;background:var(--chat-bg);color:var(--bar-ink)}
#bar svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#bar .back{width:26px;height:26px}
.thread-btn{flex:1;min-width:0;text-align:left;background:none;border:none;padding:0;color:inherit;font-family:inherit;cursor:pointer}
#thread-name{display:block;font-weight:700;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bar .icons{display:flex;align-items:center;gap:16px}
.icon-btn{background:none;border:none;padding:0;color:inherit;cursor:pointer;display:flex}

/* 公告列：群組氣氛（狀態，不是分數；只留文字標籤，跨級時改用聊天室系統膠囊提示） */
#notice{flex:none;margin:0 10px 4px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);
  border-radius:10px;padding:6px 12px;font-size:12px;color:#333;box-shadow:0 1px 2px rgba(0,0,0,.08)}
#notice svg{width:16px;height:16px;stroke:#4a5568;fill:none;stroke-width:1.8;flex:none}
#mood-lab{flex:none}

/* ————— 訊息 ————— */
#log{flex:1;overflow-y:auto;padding:6px 10px 10px;min-height:0}
.div{text-align:center;margin:12px 0 8px}
.div span{display:inline-block;background:var(--pill);color:#fff;font-size:12px;border-radius:999px;padding:3px 14px}
/* 章節分隔（日期）：不用膠囊，靠字級與細線撐出層次；底色偏淺，文字用深藍才讀得清楚 */
.div.chapter{margin:28px 0 16px;color:#1f3a68}
.div.chapter span{display:block;background:none;padding:0;border-radius:0;color:inherit}
.div.chapter .ch-yr{font-size:12px;letter-spacing:.1em;opacity:.72;margin-bottom:3px}
.div.chapter .ch-row{display:flex;align-items:center;justify-content:center;gap:14px}
.div.chapter .ch-row::before,.div.chapter .ch-row::after{content:'';flex:1;max-width:88px;height:1px;background:currentColor;opacity:.35}
.div.chapter .ch-ssn{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:.14em;flex:none}
.msg{display:flex;gap:8px;margin:8px 0;align-items:flex-start;animation:lineIn .2s ease}
.av{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#2b2b2b}
.col{min-width:0;max-width:78%}
.name{font-size:12px;color:var(--chat-name);margin:0 0 3px 4px}
.line{display:flex;align-items:flex-end;gap:5px}
.meta{font-size:10px;color:var(--chat-meta);line-height:1.35;flex:none;white-space:nowrap}
.bub{position:relative;background:var(--bub-in);color:var(--chat-ink);border-radius:18px;padding:8px 13px;
  font-size:15.5px;line-height:1.5;word-break:break-word}
/* 泡泡尾巴：靠尾巴那一角改小圓角，三角形伸進泡泡內 5px 與泡泡重疊，避免圓角與三角形之間露出缺角 */
.msg.in .bub{border-top-left-radius:4px}
.msg.in .bub::before{content:'';position:absolute;top:0;left:-7px;width:12px;height:12px;background:var(--bub-in);
  clip-path:polygon(100% 0,0 0,100% 100%)}
.msg.out{justify-content:flex-end}
.msg.out .line{max-width:82%}
.msg.out .meta{text-align:right}
.msg.out .bub{background:var(--bub-out);border-top-right-radius:4px}
.msg.out .bub::after{content:'';position:absolute;top:0;right:-7px;width:12px;height:12px;background:var(--bub-out);
  clip-path:polygon(0 0,100% 0,0 100%)}
.msg.bare .bub{background:transparent;padding:0}
.msg.bare .bub::before,.msg.bare .bub::after{display:none}
.msg.sys{justify-content:center}
.msg.sys .bub{background:var(--pill);color:#fff;font-size:12px;border-radius:999px;padding:3px 14px;text-align:center;max-width:90%}
.msg.sys .bub::before{display:none}
/* 旁白：劇情敘述，跟日期／系統通知的深色膠囊分開——暖色淺底、字大一級、上下多留白 */
.msg.sys.narr{margin:12px 0}
.msg.sys.narr .bub{background:rgba(255,247,230,.95);color:#3a3226;font-size:14px;line-height:1.6;
  border-radius:12px;padding:7px 16px;max-width:86%;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.typing .bub{color:#999;letter-spacing:.2em}

/* 原創文字貼圖（不使用任何官方貼圖角色） */
.stk{display:inline-block;font-weight:900;font-size:24px;color:#3b2f1e;background:#fff3c4;border:3px solid #3b2f1e;
  border-radius:20px;padding:10px 18px;transform:rotate(-4deg);box-shadow:3px 4px 0 rgba(0,0,0,.18)}
.msg.out .stk{transform:rotate(4deg);background:#dff5d3}
/* 圖片貼圖：不套文字貼圖的外框與傾斜，真實貼圖就是一張透明去背圖 */
.stk-img{display:inline-block;line-height:0}
.stk-img img{width:132px;height:auto;display:block}
.img{width:200px;max-width:100%;border-radius:14px;padding:26px 12px;text-align:center;color:#5a6472;font-size:13px;
  background:linear-gradient(135deg,#fdf6e3,#e8eef8);border:1px solid rgba(0,0,0,.06)}
.img-wrap{position:relative;width:200px;max-width:100%;border-radius:14px;overflow:hidden;flex:none;background:rgba(255,255,255,.4)}
.img-real{display:block;width:100%;height:auto}
.img-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 12px 10px;text-align:center;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  color:#fff;font-family:var(--serif);font-size:14px;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.fwd small{display:block;font-size:11px;color:#8a8f98;margin-bottom:3px}
.link,.rev{background:#fff;border-radius:14px;padding:10px 13px;box-shadow:0 1px 2px rgba(0,0,0,.08);max-width:260px}
.link .tag{font-size:10px;letter-spacing:.16em;color:#c0392b}
.link .big{font-weight:800;font-size:17px;line-height:1.35}
.rev{border-left:4px solid #1f3a68}
.rev .big{font-weight:800;font-size:19px;color:#1f3a68;line-height:1.35}
.body{font-size:13px;margin-top:4px;color:#333}
.src{font-size:11px;color:#7a818c;margin-top:6px;line-height:1.5}

/* ————— 回覆選項（快速回覆）與輸入列 ————— */
/* 選項改為一列一個（2026-09-25 Jun）：原本橫排換行會把後面的選項擠成兩行、高度不齊，看起來像破圖。
   一列一個之後每個選項都有整個寬度，長句才不會被擠斷；代價是選項區塊變高，屬預期。 */
#chips{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding:6px 10px 8px;min-height:48px}
.chip{font-family:var(--sans);font-size:14px;color:var(--quick);background:#fff;border:1px solid rgba(31,159,78,.55);
  border-radius:999px;padding:7px 14px;cursor:pointer;animation:lineIn .2s ease;line-height:1.4;text-align:left;
  box-shadow:0 1px 2px rgba(0,0,0,.08);max-width:100%}
/* 窄螢幕（360px 級）最長的 23 字選項單行會差幾個像素，縮一點內距與字距換取不斷行 */
@media (max-width:380px){ .chip{padding:7px 11px;font-size:13.5px} }
.chip:focus-visible{outline:2px solid var(--quick)}
#composer{flex:none;display:flex;align-items:center;gap:14px;background:var(--composer);
  padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
#composer svg{width:24px;height:24px;stroke:#222;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#composer .field{flex:1;display:flex;align-items:center;justify-content:flex-end;background:var(--field);
  border-radius:999px;height:36px;padding:0 10px}
.skip-btn{flex:none;display:flex;align-items:center;gap:4px;font-family:var(--sans);font-size:13px;color:var(--dim);
  background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:999px;padding:6px 12px;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.08)}
.skip-btn svg{width:16px;height:16px;stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip-btn:active{background:var(--field)}
.skip-btn:focus-visible{outline:2px solid var(--quick)}
#composer .field svg{width:20px;height:20px;stroke:#777}

/* ————— 蓋版（選人設、結局） ————— */
.cover{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;color:var(--milk);
  justify-content:center;text-align:center;padding:32px 22px;overflow-y:auto;transition:opacity .4s;line-height:1.7;
  background:linear-gradient(180deg,#0d1322,#131a2c 55%,#1a2036)}
.cover.hide{opacity:0;pointer-events:none}
#cover-end{justify-content:flex-start}
.kicker{font-size:11px;letter-spacing:.42em;color:var(--lamp);margin-bottom:12px}
.title{font-family:var(--serif);font-weight:900;font-size:clamp(34px,11vw,44px);line-height:1.2;letter-spacing:.06em}
.sub{color:var(--dim);font-size:14px;margin-top:12px}
.pick-q{font-size:15px;margin-top:24px}
#personas{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.persona{text-align:left;font-family:var(--sans);color:var(--milk);border:1px solid rgba(240,180,80,.45);
  border-radius:14px;padding:13px 16px;background:rgba(28,37,64,.65);cursor:pointer;position:relative}
.persona b{display:block;font-family:var(--serif);font-weight:900;font-size:21px;color:var(--lamp)}
.persona span{font-size:13px;color:var(--dim)}
.persona em{position:absolute;top:12px;right:14px;font-style:normal;font-size:11px;color:var(--dim)}
.persona.soon{opacity:.45;cursor:default}
.persona:focus-visible{outline:2px solid var(--lamp)}
.note{font-size:11px;color:var(--dim);margin-top:18px;max-width:36ch;line-height:1.8;text-align:center}
.btn{display:block;width:100%;max-width:330px;margin-top:10px;font-family:var(--sans);font-size:15px;font-weight:700;
  letter-spacing:.1em;color:#131a2c;background:var(--lamp);border:none;border-radius:999px;
  padding:12px 20px;cursor:pointer;flex:none}
.btn.ghost{background:transparent;color:var(--lamp);border:1px solid rgba(240,180,80,.55)}
.btn[disabled]{opacity:.45;cursor:default}
.btn:focus-visible{outline:2px solid var(--milk);outline-offset:3px}
.end-card{width:100%;max-width:330px;border:1px solid rgba(240,180,80,.4);border-radius:14px;
  background:rgba(28,37,64,.65);padding:16px 18px;text-align:left;flex:none}
.end-who{font-size:11px;letter-spacing:.2em;color:var(--lamp)}
.end-title{font-family:var(--serif);font-weight:900;font-size:25px;margin-top:4px;line-height:1.35}
.end-cap{font-size:13px;color:var(--dim);margin-top:6px;line-height:1.8}
.end-meta{font-size:11px;color:var(--lamp);margin-top:10px;min-height:1.4em}
.end-btns{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:16px;flex:none}
#e-hint{font-size:12px;color:var(--green);min-height:1.5em;margin-top:8px;max-width:32ch;white-space:pre-line}
.share-img{width:100%;max-width:330px;margin-top:10px;border-radius:12px;flex:none;aspect-ratio:1080/1350;
  background:rgba(243,237,226,.05);outline:1px solid var(--line)}
.attrib{width:100%;max-width:330px;margin-top:12px;text-align:left;flex:none}
.attrib-q{font-size:14px}
.attrib-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.attrib-opts button:disabled{opacity:.55}
.attrib-opts button.on:disabled{opacity:1}
.attrib-ack{font-size:13px;color:var(--lamp);margin:10px 0 0}
.attrib-opts button{font-family:var(--sans);font-size:13px;color:var(--milk);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer}
.attrib-opts button.on{border-color:var(--lamp);color:var(--lamp)}
.srcs{width:100%;max-width:330px;margin-top:16px;text-align:left;font-size:12px;color:var(--dim);flex:none}
.srcs summary{cursor:pointer}
.srcs ol{padding-left:1.4em;margin-top:6px;line-height:1.7}
.reads{width:100%;max-width:330px;margin-top:16px;text-align:left;font-size:12px;flex:none}
.reads-title{color:var(--dim)}
.reads ul{padding-left:1.4em;margin-top:6px;line-height:1.9}
.reads a{color:var(--lamp)}
/* ————— 私訊小視窗：從底部滑出，蓋住（不取代）目前的群組畫面 ————— */
.dm-scrim{position:absolute;inset:0;z-index:40;background:rgba(10,14,24,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.dm-scrim.show{opacity:1;pointer-events:auto}
.dm-sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;max-height:62%;display:flex;flex-direction:column;
  background:var(--chat-bg);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.35);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.16,.84,.44,1)}
.dm-sheet.show{transform:translateY(0)}
.dm-head{flex:none;display:flex;align-items:center;gap:8px;padding:12px 14px 8px;font-weight:700;font-size:15px;color:var(--bar-ink)}
.dm-tag{background:var(--pill);color:#fff;font-size:11px;font-weight:400;border-radius:999px;padding:2px 10px}
.dm-log{flex:1;overflow-y:auto;padding:4px 10px 8px;min-height:0}
.dm-chips{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom))}

/* ————— 通用小視窗：選單／成員／相關報導共用，樣式沿用私訊小視窗但內容是靜態清單 ————— */
.panel-scrim{position:absolute;inset:0;z-index:40;background:rgba(10,14,24,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.panel-scrim.show{opacity:1;pointer-events:auto}
.panel-sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;max-height:70%;display:flex;flex-direction:column;
  background:var(--chat-bg);border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.35);
  transform:translateY(100%);transition:transform .26s cubic-bezier(.16,.84,.44,1)}
.panel-sheet.show{transform:translateY(0)}
.panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;font-weight:700;font-size:15px;color:var(--bar-ink)}
.panel-close{background:none;border:none;font-size:16px;color:var(--dim);cursor:pointer;padding:4px}
.panel-body{flex:1;overflow-y:auto;padding:4px 14px calc(14px + env(safe-area-inset-bottom));min-height:0}
.panel-item{display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid rgba(0,0,0,.12);
  padding:14px 2px;font-family:inherit;font-size:15px;color:var(--bar-ink);cursor:pointer}
.panel-item:first-child{border-top:none}
.panel-team{font-size:12px;color:var(--bar-ink);line-height:2;margin-top:16px;padding-top:12px;border-top:1px solid rgba(0,0,0,.12)}
/* 職稱欄固定寬，右邊的名字才會對齊成一直線 */
.panel-team span{display:inline-block;min-width:5.2em;color:var(--chat-meta)}
/* .panel-credits：2026-09-30 Jun 決定選單底部只放製作團隊，製作說明整段不顯示；樣式留著備用 */
.panel-credits{font-size:11px;color:var(--chat-meta);line-height:1.8;margin-top:16px;padding-top:12px;border-top:1px solid rgba(0,0,0,.12)}
.member-list{display:flex;flex-direction:column;gap:14px;padding:6px 0}
.member-row{display:flex;align-items:center;gap:12px}
.member-info b{display:block;font-size:15px;color:var(--bar-ink)}
.member-info span{display:block;font-size:12px;color:var(--chat-meta);margin-top:2px}
.news-list{padding-left:0;list-style:none}
.news-list li{border-top:1px solid rgba(0,0,0,.12)}
.news-list li:first-child{border-top:none}
.news-list a{display:block;padding:14px 2px;font-size:14px;color:var(--bar-ink);text-decoration:none}
.news-empty{font-size:13px;color:var(--chat-meta);padding:10px 2px 4px}
.cal-list{padding:2px 0 4px}
.cal-date{font-size:11px;letter-spacing:.06em;color:var(--chat-meta);margin-top:16px}
.cal-date:first-child{margin-top:0}
.cal-line{font-size:14px;color:var(--bar-ink);margin-top:6px;line-height:1.6}
.cal-empty{font-size:13px;color:var(--chat-meta);padding:10px 2px 4px}

/* ————— 結局揭曉：搬進結局蓋版播放，沿用蓋版暗色調（別人的泡泡才會出現，不含 .msg.out） ————— */
.reveal-log{width:100%;max-width:340px;display:flex;flex-direction:column;gap:8px;margin:18px 0;flex:none}
.reveal-log .bub{background:var(--panel-2);color:var(--milk)}
.reveal-log .msg.in .bub::before{background:var(--panel-2)}
.reveal-log .name,.reveal-log .meta{color:var(--dim)}
.reveal-log .rev{background:rgba(28,37,64,.65);border-left-color:var(--lamp)}
.reveal-log .rev .big{color:var(--lamp)}
.reveal-log .body{color:var(--milk)}
.reveal-log .src{color:var(--dim)}
.reveal-sub{color:var(--dim);font-size:13px;margin-top:-4px;margin-bottom:4px}
.reveal-chips{flex:none}
.reveal-chips .chip{background:var(--lamp);color:#131a2c;border:none}

/* ————— 通話揭曉試作：純視覺，畫面改通話介面配色，沿用結局蓋版的深色底 ————— */
.call-screen{width:100%;display:flex;flex-direction:column;align-items:center;padding-top:8px}
.call-names{font-family:var(--serif);font-weight:900;font-size:20px;color:var(--milk)}
.call-link{color:var(--lamp);font-weight:400;font-family:var(--sans)}
.call-status{font-size:13px;color:var(--dim);margin-top:8px}
.call-avatars{display:flex;gap:16px;margin-top:22px}
.call-av{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:#1a1f2b;flex:none}
.call-captions{width:100%;max-width:340px;margin-top:28px;display:flex;flex-direction:column;gap:18px;flex:none}
.call-cap{text-align:center}
.call-cap b{display:block;font-size:11px;letter-spacing:.1em;color:var(--lamp);font-weight:700}
.call-cap p{font-size:16px;color:var(--milk);margin-top:4px;line-height:1.6}
.call-cap .dots{display:block;font-size:16px;color:var(--dim);margin-top:4px}
.call-data{width:100%;text-align:left;background:rgba(28,37,64,.65);border-left:4px solid var(--lamp);
  border-radius:0 14px 14px 0;padding:12px 14px;margin-top:6px}
.call-data .big{color:var(--lamp);font-weight:700;font-size:15px}
.call-data .body{color:var(--milk);font-size:13px;margin-top:4px;line-height:1.7}
.call-data .src{color:var(--dim);font-size:11px;margin-top:6px}

@keyframes lineIn{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}