/* AI 眾議院 — 視覺照搬原型色票，並補上手機響應式（HANDOFF §8） */
:root{
  --bg:#f1efe9; --ink:#16181d; --ink2:#33323b; --muted:#8b897f; --muted2:#6b6a64;
  --card:#ffffff; --guest:#fbfaf7; --line:#efede8; --line2:#e9e7e0;
  --blue:#2a6fdb; --blue-bg:#e3edfb; --green:#1f8a5b; --green-bg:#e4f4ec;
  --orange:#c26a45; --orange-bg:#f8ece5; --dark:#1c2532; --shadow:0 1px 3px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);font-family:"Noto Sans TC",system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-text-size-adjust:100%}
a{color:var(--blue)}
button{font-family:inherit}
textarea,input,select{font-family:inherit}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:14px 16px calc(20px + env(safe-area-inset-bottom));max-width:1280px;margin:0 auto}

/* Header */
.header{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:32px;height:32px;border-radius:8px;background:#16181d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.brand .name{font-weight:900;font-size:17px}
.tabs{display:flex;align-items:center;gap:4px}
.tab{font-size:14px;font-weight:400;color:var(--muted2);background:transparent;padding:8px 16px;border-radius:9px;cursor:pointer;border:none;user-select:none}
.tab.active{font-weight:700;color:var(--blue);background:var(--blue-bg)}
.header .note{margin-left:auto;font-size:12.5px;color:var(--muted)}
.badge-mock{margin-left:auto;font-size:11.5px;color:var(--orange);background:var(--orange-bg);padding:4px 10px;border-radius:6px;font-weight:500}

/* Session */
.section{display:flex;flex-direction:column;gap:14px;padding:14px 0 20px}
.qrow{display:flex;gap:12px;flex-wrap:wrap}
.modeswitch{display:flex;background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:4px;gap:4px;flex:none}
.modebtn{border:none;background:transparent;padding:12px 20px;border-radius:9px;font-size:14.5px;color:var(--muted2);cursor:pointer;font-weight:500;white-space:nowrap}
.modebtn.active{background:#16181d;color:#fff;font-weight:700}
.qinput{flex:1;min-width:200px;background:var(--card);border:none;border-radius:12px;box-shadow:var(--shadow);padding:16px 20px;font-size:15.5px;color:var(--ink);outline:none}
.qbtn{background:#16181d;color:#fff;border-radius:12px;padding:16px 26px;font-size:15.5px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;border:none;white-space:nowrap}
.qbtn:hover{background:#2c2f38}
.qbtn:disabled{opacity:.5;cursor:default}

.qcard{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:13px 18px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.qcard .tag{font-size:11.5px;font-weight:700;color:var(--blue);background:var(--blue-bg);padding:4px 9px;border-radius:6px;flex:none}
.qcard .qtext{font-size:15px;font-weight:700;line-height:1.6}
.qcard .prog{margin-left:auto;font-size:12.5px;color:var(--muted)}

.rowlabel{display:flex;align-items:baseline;gap:8px;padding:2px 4px 0}
.rowlabel .t{font-size:12.5px;font-weight:900;letter-spacing:2px}
.rowlabel .t.guest{color:var(--muted2)}
.rowlabel .s{font-size:11.5px;color:var(--muted)}

.grid-standing{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.grid-guest{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}

.mcard{background:var(--card);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-height:200px}
.mcard.guest{background:var(--guest);border:1px solid var(--line2);box-shadow:none;min-height:150px}
.mhead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.mcard.guest .mhead{gap:8px;padding:11px 14px}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.mcard.guest .avatar{width:27px;height:27px;font-size:11.5px}
.avatar img{width:60%;height:60%;object-fit:contain;display:block}
.modal .mh .av img{width:60%;height:60%;object-fit:contain;display:block}
.mname{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard.guest .mname{font-size:13px}
.mbadge{margin-left:auto;font-size:12px;font-weight:500;padding:5px 11px;border-radius:7px;flex:none;white-space:nowrap}
.mcard.guest .mbadge{font-size:11px;padding:4px 9px}
.mbadge.done{color:var(--green);background:var(--green-bg)}
.mbadge.answering{color:var(--orange);background:var(--orange-bg)}
.mbadge.waiting{color:var(--muted);background:var(--line)}
.mbadge.error{color:#c2453f;background:#fbe7e6}
.mbody{padding:15px 18px;font-size:14px;line-height:1.9;color:var(--ink2);flex:1;word-break:break-word;white-space:pre-wrap;position:relative}
.mcard.guest .mbody{padding:12px 14px;font-size:12.5px;line-height:1.85;color:#44434d}
.r2label{margin:12px 0 6px;font-size:11.5px;font-weight:700;color:#7a5cc9;letter-spacing:1.5px;border-top:1px dashed var(--line2);padding-top:10px}
/* 代打揭露：必須醒目，讓使用者知道這席換人、視角可能也變了 */
.subnote{background:var(--orange-bg);border:1px solid #ecd3c6;border-radius:8px;padding:8px 11px;margin-bottom:10px;font-size:12px;line-height:1.7;color:#8a4a2a}
.subnote b{font-weight:700}
.subtag{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;color:#fff;background:var(--orange);padding:2px 7px;border-radius:5px;vertical-align:1px}
.mbody.collapsed{max-height:190px;overflow:hidden}
.mbody.collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,var(--card))}
.mcard.guest .mbody.collapsed::after{background:linear-gradient(transparent,var(--guest))}
.expandbtn{border:none;background:none;color:var(--blue);font-size:12.5px;font-weight:500;cursor:pointer;padding:2px 18px 10px;text-align:left}
.mcard.guest .expandbtn{padding:2px 14px 8px;font-size:12px}
.cursor{display:inline-block;width:9px;height:16px;background:var(--blue);vertical-align:-2px;animation:blink 1s step-end infinite}
.mcard.guest .cursor{width:8px;height:14px}
.mfoot{padding:0 18px 16px}
.mcard.guest .mfoot{padding:0 14px 13px}
.chatbtn{display:inline-block;font-size:13.5px;font-weight:500;color:var(--blue);border:1px solid #bcd2f3;border-radius:9px;padding:9px 16px;cursor:pointer;user-select:none;background:none}
.mcard.guest .chatbtn{font-size:12px;padding:7px 12px;border-radius:8px}
.chatbtn:disabled{color:#b5b3ac;border-color:var(--line2);cursor:default}
.skipbtn{display:inline-block;margin-left:8px;font-size:13.5px;font-weight:500;color:var(--orange);border:1px solid #ecd3c6;border-radius:9px;padding:9px 16px;cursor:pointer;user-select:none;background:none}
.skipbtn:hover{background:var(--orange-bg)}
.skipbtn:disabled{color:#b5b3ac;border-color:var(--line2);cursor:default;background:none}
.mcard.guest .skipbtn{font-size:12px;padding:7px 12px;border-radius:8px;margin-left:6px}

/* Chairman */
.chair-think{background:var(--dark);border-radius:14px;padding:22px 24px;display:flex;align-items:center;gap:12px}
.chair-think .av{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.chair-think .txt{color:rgba(255,255,255,.85);font-size:14.5px}
.chair-think .cur{display:inline-block;width:9px;height:16px;background:#7fa8e8;animation:blink 1s step-end infinite}

.summary{background:var(--card);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:220px 1fr 1fr 1fr;animation:fadeUp .4s ease}
.summary .side{background:var(--dark);padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.summary .side .av{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.summary .side .title{color:#fff;font-size:16px;font-weight:900;margin-top:4px}
.summary .side .meta{color:rgba(255,255,255,.55);font-size:13px}
.summary .side .v2{font-size:11.5px;color:#6fc79a;background:rgba(111,199,154,.15);padding:4px 10px;border-radius:6px}
.resum{margin-top:8px;font-size:13.5px;padding:9px 18px;border-radius:9px;align-self:stretch;text-align:center;cursor:pointer;user-select:none;border:none;background:var(--blue);color:#fff}
.resum:disabled{background:rgba(255,255,255,.14);color:rgba(255,255,255,.75);cursor:default}
.summary .side .hint{color:rgba(255,255,255,.4);font-size:11.5px;line-height:1.6}
.summary .cell{padding:20px;border-right:1px solid var(--line)}
.summary .cell .h{font-size:13.5px;font-weight:700;margin-bottom:9px}
.summary .cell .h.consensus{color:var(--green)}
.summary .cell .h.divergence{color:var(--orange)}
.summary .cell .h.conclusion{color:var(--blue)}
.summary .cell .c{font-size:14px;line-height:1.9;color:var(--ink2)}
.summary .cell:last-child{border-right:none}

/* History */
.narrow{max-width:760px}
.hitem{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.hitem:hover{box-shadow:0 3px 10px rgba(0,0,0,.09)}
.hitem .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.delbtn{margin-left:auto;border:none;background:var(--line);color:var(--muted2);border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer;flex:none;align-self:center}
.delbtn:hover{background:#e3e1da}
.delbtn.armed{background:#c2453f;color:#fff;font-weight:700}
.addr{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.addr code{background:var(--guest);border:1px solid var(--line2);padding:6px 10px;border-radius:8px;font-size:13px;user-select:all;word-break:break-all}
.hitem .date{font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.hitem .q{font-size:15px;font-weight:700;line-height:1.5}
.hitem .conc{font-size:13px;line-height:1.7;color:var(--muted2)}
.hitem .tags{display:flex;gap:6px;flex-wrap:wrap}
.pill{font-size:11.5px;padding:3px 9px;border-radius:5px}
.pill.green{color:var(--green);background:var(--green-bg)}
.pill.blue{color:var(--blue);background:var(--blue-bg)}
.pill.purple{color:#7a5cc9;background:#efe9fb}
.pill.gray{color:var(--muted2);background:var(--line)}
.muted-line{font-size:13px;color:var(--muted);padding:0 4px}
.empty{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:26px 18px;text-align:center;color:var(--muted);font-size:14px}

/* Settings */
.panel{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.panel .ph{font-size:15px;font-weight:900;margin-bottom:2px}
.panel .pd{font-size:13px;line-height:1.9;color:var(--muted2)}
.subhead{display:flex;align-items:baseline;gap:8px}
.subhead .a{font-size:14px;font-weight:900}
.subhead .b{font-size:12px;color:var(--muted)}
.seatgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.seatgrid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
.seat{border:1px solid var(--line2);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:8px;background:var(--guest)}
.seat .row{display:flex;align-items:center;gap:8px}
.seat .sl{width:24px;height:24px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.seat .cap{font-size:12px;color:var(--muted)}
select{width:100%;border:1px solid #d8d5cc;border-radius:8px;padding:9px 10px;font-size:13px;color:var(--ink);background:#fff;outline:none;cursor:pointer}
.divider{height:1px;background:var(--line)}
.promptcard{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.promptcard .row{display:flex;align-items:center;gap:9px}
.promptcard .pi{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.promptcard .pl{font-size:14px;font-weight:700}
.promptcard .ps{font-size:12px;color:var(--muted)}
textarea{width:100%;border:1px solid #e3e1da;border-radius:9px;padding:11px 13px;font-size:13.5px;line-height:1.8;color:var(--ink2);resize:vertical;outline:none;background:var(--guest);min-height:72px}
.saverow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* border 用 transparent 而非 none：ghost 變體有實線邊框，兩者並排時盒模型必須一致，
   否則會差 1px 高度而看起來沒對齊。 */
.savebtn{background:#16181d;color:#fff;border-radius:10px;padding:12px 26px;font-size:14px;font-weight:700;cursor:pointer;user-select:none;border:1px solid transparent}
/* 次要／破壞性動作（恢復初始設定）：與「儲存設定」並列，但視覺份量刻意較輕，
   避免使用者把「還原」誤按成「儲存」。hover 才轉為警示色，明示這是會覆蓋現況的操作。 */
.savebtn.ghost{background:transparent;color:var(--muted);border:1px solid #d9d6cc;font-weight:600}
.savebtn.ghost:hover{background:#fdf0ee;color:#b4453a;border-color:#e8b4ad}
.toast{font-size:13px;color:var(--green);animation:fadeUp .3s ease}

/* Deep chat overlay */
.overlay{position:fixed;inset:0;background:rgba(22,24,29,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:#f6f5f0;border-radius:16px;width:520px;max-width:100%;height:640px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:fadeUp .25s ease}
.modal .mh{background:#fff;padding:14px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.modal .mh .av{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.modal .mh .t1{font-size:15px;font-weight:700}
.modal .mh .t2{font-size:12px;color:var(--muted)}
.modal .mh .x{margin-left:auto;width:32px;height:32px;border-radius:8px;background:var(--line);color:#44434d;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;user-select:none;border:none}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.msg{display:flex}
.msg.mine{justify-content:flex-end}
.msg.bot{justify-content:flex-start}
.bubble{max-width:78%;padding:11px 15px;font-size:13.5px;line-height:1.85;white-space:pre-wrap;word-break:break-word}
.msg.mine .bubble{background:var(--blue);color:#fff;border-radius:12px 12px 4px 12px}
.msg.bot .bubble{background:#fff;color:var(--ink2);border-radius:12px 12px 12px 4px}
.typing{background:#fff;border-radius:12px 12px 12px 4px;padding:11px 15px;font-size:13.5px;color:var(--muted)}
.modal .foot{background:#fff;padding:12px 14px;display:flex;gap:9px;border-top:1px solid var(--line)}
.cinput{flex:1;background:var(--bg);border:none;border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--ink);outline:none}
.csend{background:var(--blue);color:#fff;border-radius:10px;padding:12px 18px;font-size:13.5px;font-weight:700;display:flex;align-items:center;cursor:pointer;user-select:none;border:none}

/* ───────── 手機版（<720px）：單欄 + 全螢幕深聊 ───────── */
@media (max-width:720px){
  .wrap{padding:10px 12px calc(16px + env(safe-area-inset-bottom))}
  .header{padding:11px 14px;gap:10px}
  .brand .name{font-size:16px}
  .tabs{order:3;width:100%}
  .tab{flex:1;text-align:center;padding:9px 8px}
  .header .note{display:none}
  .badge-mock{order:2;margin-left:auto}
  .modeswitch{width:100%}
  .modebtn{flex:1;text-align:center}
  .qbtn{flex:1}
  .grid-standing,.grid-guest{grid-template-columns:1fr}
  .mcard{min-height:auto}
  .mcard.guest{min-height:auto}
  .summary{grid-template-columns:1fr}
  .summary .cell{border-right:none;border-bottom:1px solid var(--line)}
  .summary .cell:last-child{border-bottom:none}
  .seatgrid3,.seatgrid4{grid-template-columns:1fr 1fr}
  .overlay{padding:0}
  .modal{width:100%;height:100%;height:100dvh;max-width:100%;border-radius:0}
}
@media (max-width:420px){
  .seatgrid3,.seatgrid4{grid-template-columns:1fr}
}

/* 個人背景檔（設定頁） */
.ptext{width:100%;box-sizing:border-box;font:13px/1.7 ui-monospace,"Menlo",monospace;padding:10px 12px;
  border:1px solid #d8dee7;border-radius:8px;background:#fcfdff;color:#1c2532;resize:vertical}
.ptext:focus{outline:none;border-color:#2a6fdb;background:#fff}
.prow{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.ptoggle{display:flex;align-items:center;gap:6px;font-size:13px;color:#3c4757;cursor:pointer;user-select:none}
.ptoggle input{width:15px;height:15px;cursor:pointer}
.pill.green{background:#e6f5ec;color:#2b7a4b}