/* セマンティックトークン（設計_画面_v0.1.md §10。ライト既定＋ダーク） */
:root{
  color-scheme: light;
  --bg:#F6F7F6; --surface:#FFFFFF; --surface-2:#EEF1F2; --border:#D6DDE1;
  --ink:#1B242B; --ink-muted:#54646E;
  --accent:#0B6B5D; --accent-ink:#FFFFFF; --accent-weak:#E3F0ED;
  --confirm-fg:#1E6B3C; --confirm-bg:#E7F3EB;
  --infer-fg:#7A5410;   --infer-bg:#FBF1DC;
  --danger-fg:#9E2F26;  --danger-bg:#FBEAE8;
  --neutral-fg:#5A6B76; --neutral-bg:#EDF0F2;
  --flag-fg:#8A4D00;    --flag-bg:#FFF1DE;
  --wm-color:#0B2A26;   --wm-opacity:.055;
  --mono:"SFMono-Regular",Consolas,"Courier New",monospace;
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#141a21; --surface:#1b232c; --surface-2:#212b36; --border:#2c3846;
  --ink:#e6edf3; --ink-muted:#93a6b6;
  --accent:#17786B; --accent-ink:#EAFBF7; --accent-weak:#122b28;
  --confirm-fg:#6BD495; --confirm-bg:#16281D;
  --infer-fg:#E0A83D;   --infer-bg:#2A2113;
  --danger-fg:#E88379;  --danger-bg:#2B1614;
  --neutral-fg:#9FB0BD; --neutral-bg:#20272E;
  --flag-fg:#E7B15A;    --flag-bg:#2F2412;
  --wm-color:#FFFFFF;   --wm-opacity:.05;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Segoe UI",Meiryo,system-ui,sans-serif;background:var(--bg);color:var(--ink);
  font-size:14.5px;line-height:1.6;height:100vh;display:flex;flex-direction:column;overflow:hidden}
#root{flex:1;display:flex;flex-direction:column;min-height:0}
button{font-family:inherit}
a{color:var(--accent)}

#watermark{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.wm{position:absolute;color:var(--wm-color);opacity:var(--wm-opacity);font-size:15px;white-space:nowrap;
  transform:rotate(-28deg);font-weight:700;letter-spacing:.5px}

.mocknote{background:var(--infer-bg);color:var(--infer-fg);text-align:center;padding:4px;font-size:12px;border-bottom:1px solid var(--border)}

/* 額縁クロム */
.casebar{display:flex;align-items:center;gap:12px;background:var(--accent);color:var(--accent-ink);padding:9px 14px}
.casebar .mode{background:var(--accent-ink);color:var(--accent);font-weight:800;padding:3px 10px;border-radius:4px;font-size:12px}
.casebar .who{font-weight:800}
.casebar .meta{opacity:.92;font-size:12px}
.casebar .spacer{margin-left:auto}
.casebar .expire{border:1px solid var(--accent-ink);padding:3px 9px;border-radius:4px;font-size:12px}
.casebar select{background:transparent;color:var(--accent-ink);border:1px solid var(--accent-ink);border-radius:4px;padding:3px 6px;font-size:12px}
.casebar select option{color:#111}

.tabs{display:flex;gap:2px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 8px}
.tab{padding:9px 14px;cursor:pointer;color:var(--ink-muted);border-bottom:2px solid transparent;font-size:13px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}

.body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}

.foot{display:flex;align-items:center;gap:9px;background:var(--accent);color:var(--accent-ink);padding:7px 14px;font-size:12.5px}
.rec{width:9px;height:9px;border-radius:50%;background:#ff5b52;box-shadow:0 0 9px #ff5b52}
.foot .aud{margin-left:auto;font-family:var(--mono);opacity:.9}
.noinput{color:var(--ink-muted);font-style:italic;text-align:center;padding:8px;font-size:12.5px;border-top:1px dashed var(--border);background:var(--surface)}

/* 3ペイン（Per_User_View） */
.cols{flex:1;display:grid;grid-template-columns:270px 1fr 320px;min-height:0;border-left:3px solid var(--accent);border-right:3px solid var(--accent)}
.pane{overflow:auto;min-height:0}
.left{background:var(--surface);border-right:1px solid var(--border)}
.center{background:var(--bg)}
.right{background:var(--surface);border-left:1px solid var(--border)}
.paneHead{padding:10px 12px;color:var(--ink-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.center .paneHead{background:var(--bg)}

.grp{padding:10px 12px 4px;color:var(--ink-muted);font-size:11px}
.conv{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer}
.conv:hover{background:var(--surface-2)}
.conv.active{background:var(--accent-weak);box-shadow:inset 3px 0 var(--accent)}
.conv .nm{flex:1}
.badge{font-size:11px;padding:1px 8px;border-radius:10px;font-weight:600}
.b-confirm{color:var(--confirm-fg);background:var(--confirm-bg);border:1px solid var(--confirm-fg)}
.b-infer{color:var(--infer-fg);background:var(--infer-bg);border:1px dashed var(--infer-fg)}
.b-dm{color:var(--neutral-fg);background:var(--neutral-bg);border:1px solid var(--border)}

.tl{max-width:820px;margin:0 auto;padding:10px 18px 60px}
.daysep{text-align:center;color:var(--ink-muted);margin:16px 0 8px;font-size:12px}
.msg{display:flex;gap:11px;padding:8px 10px;border-radius:8px;cursor:pointer;border:2px solid transparent}
.msg:hover{background:var(--surface)}
.msg.selected{border-color:var(--accent);background:var(--surface)}
.av{width:36px;height:36px;border-radius:7px;background:var(--surface-2);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;border:1px solid var(--border)}
.msg .row1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.msg .au{font-weight:800}
.msg .ts{color:var(--ink-muted);font-size:12px;font-family:var(--mono)}
.txt{margin-top:1px;white-space:pre-wrap}
.tag{font-size:11px;padding:1px 7px;border-radius:5px;font-weight:600}
.t-flag{background:var(--flag-bg);color:var(--flag-fg);border:1px solid var(--flag-fg)}
.t-edit{background:var(--neutral-bg);color:var(--neutral-fg);border:1px solid var(--neutral-fg)}
.t-del{background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger-fg)}
.t-miss{background:var(--neutral-bg);color:var(--neutral-fg);border:1px dashed var(--neutral-fg)}
.msg.flagged{box-shadow:inset 4px 0 var(--flag-fg)}
.msg.deleted .txt{color:var(--danger-fg);text-decoration:line-through}
.msg.missing .txt{color:var(--neutral-fg);font-style:italic}

.ctx{padding:14px}
.ctx h4{margin:0 0 4px;font-size:14px}
.ctx .sub{color:var(--ink-muted);font-size:12px;margin-bottom:10px}
.ctx .k{color:var(--ink-muted);font-size:11px;letter-spacing:.4px;margin-top:12px;text-transform:uppercase}
.ctx .v{font-size:13.5px}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;margin:2px 2px 0 0;border:1px solid var(--border);color:var(--ink-muted)}
.state-line{display:inline-block;padding:2px 9px;border-radius:6px;font-size:12.5px;font-weight:600}

/* 汎用 */
.wrap{max-width:900px;margin:0 auto;padding:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:12px}
.btn{background:var(--accent);color:var(--accent-ink);border:none;border-radius:7px;padding:8px 14px;font-size:13px;cursor:pointer}
.btn.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.listitem{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;background:var(--surface)}
.listitem:hover{border-color:var(--accent)}
.muted{color:var(--ink-muted);font-size:12.5px}
.h1{font-size:18px;font-weight:800;margin:0 0 12px}
.searchbar{display:flex;gap:8px;margin-bottom:12px}
.searchbar input{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--ink)}
.gapband{margin:14px 0;padding:10px 12px;border:1px solid var(--border);border-radius:8px;color:var(--ink-muted);font-size:12px;text-align:center;
  background:repeating-linear-gradient(45deg,var(--neutral-bg),var(--neutral-bg) 9px,transparent 9px,transparent 18px)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:500}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;max-width:520px}
.cin{width:100%;padding:7px 9px;margin:4px 0;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:13px}
.filter{padding:8px 10px;border-bottom:1px solid var(--border)}
.filter input{width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--ink)}
.chainok{color:var(--confirm-fg);font-weight:700}
.chainng{color:var(--danger-fg);font-weight:700}
table.audit{width:100%;border-collapse:collapse;font-size:12.5px}
table.audit th,table.audit td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left}
table.audit td.mono{font-family:var(--mono);color:var(--ink-muted)}