/* Cresd Chat — Cresd Tools(base.css / site.css)と同じ配色・部品 */
:root{--bench:#e6e8ea;--panel:#fff;--plate:#27333e;--ink:#1e262d;--mute:#566370;--line:#c4cad1;--edge:#97a1ab;--field:#f4f5f6;--amber:#ffc72c;--blue:#1a4bd0;--bad:#b3261e;--ok:#1f7a4a;--readout:#1b242d;--ro-ink:#ffd45e;--ro-sub:#a9b6c3;--ro-line:#34424f;--w:960px;color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bench:#14181c;--panel:#1d2329;--plate:#0f1317;--ink:#e8ebee;--mute:#98a3ae;--line:#333c45;--edge:#0a0d0f;--field:#161b20;--blue:#8fb0ff;--bad:#ff9d94;--ok:#6fd49b;--readout:#0b0f12;--ro-line:#27323c}}
:root[data-theme="dark"]{--bench:#14181c;--panel:#1d2329;--plate:#0f1317;--ink:#e8ebee;--mute:#98a3ae;--line:#333c45;--edge:#0a0d0f;--field:#161b20;--blue:#8fb0ff;--bad:#ff9d94;--ok:#6fd49b;--readout:#0b0f12;--ro-line:#27323c;color-scheme:dark}
:root[data-theme="light"]{--bench:#e6e8ea;--panel:#fff;--plate:#27333e;--ink:#1e262d;--mute:#566370;--line:#c4cad1;--edge:#97a1ab;--field:#f4f5f6;--blue:#1a4bd0;--bad:#b3261e;--ok:#1f7a4a;--readout:#1b242d;--ro-line:#34424f;color-scheme:light}

*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--bench);color:var(--ink);font:16px/1.75 "BIZ UDPGothic","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.plate :focus-visible{outline-color:var(--amber)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:#1e262d;padding:8px 14px;font-weight:700}
.skip:focus{left:8px;top:8px}

/* ヘッダープレート */
.plate{background:var(--plate);color:#fff;border-bottom:4px solid var(--amber)}
.plate-in{max-width:var(--w);margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.mark{display:block;flex:none;line-height:0;color:#fff}
.mark svg{display:block;height:26px;width:auto}
.crumb{display:flex;flex-wrap:wrap;align-items:center;font-size:.86rem;line-height:1.5;color:#c3ccd5}
.crumb a{color:#fff;font-weight:700;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb>*+*::before{content:"/";margin:0 .6em;color:#6f7d8a}
.nx-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.nx-theme{margin:0;height:34px;padding:0 12px;border:1px solid #6f7d8a;border-radius:5px;background:transparent;color:#fff;font:inherit;font-size:.86rem;font-weight:700;white-space:nowrap;cursor:pointer}
.nx-theme:hover{background:rgba(255,255,255,.12)}
@media(max-width:640px){.nx-theme .nx-lbl{display:none}}

/* 本文 */
main{flex:1;width:100%;max-width:var(--w);margin:0 auto;padding:22px 20px 28px;display:flex;flex-direction:column;min-height:0}
h1{font-size:clamp(1.45rem,4vw,2rem);line-height:1.3;margin:.1em 0 .35em;letter-spacing:-.01em;font-weight:800;border-left:8px solid var(--amber);padding-left:14px}
.lede{color:var(--mute);margin:0 0 1.1em;max-width:40em;font-size:.95rem}

/* パネル */
.card{background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--edge);border-radius:6px;box-shadow:0 8px 16px -12px rgba(20,28,36,.45)}
.chat{flex:1;display:flex;flex-direction:column;min-height:420px;height:calc(100dvh - 330px);max-height:760px;overflow:hidden}
@media(max-width:640px){.chat{height:calc(100dvh - 300px)}}

/* 上部バー: 部屋の切替と人数(計器風の表示部) */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ro{display:flex;align-items:baseline;gap:8px;padding:5px 12px;background:var(--readout);border:1px solid var(--ro-line);border-radius:4px;color:var(--ro-sub);font-size:.8rem}
.ro b{font-size:1.15rem;font-weight:800;line-height:1.3;color:var(--ro-ink);font-variant-numeric:tabular-nums;word-break:break-all}
.ro .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#6f7d8a;align-self:center}
.ro .dot.on{background:#6fd49b}
.room-form{margin-left:auto;display:flex;gap:8px;align-items:center}
.room-form input{width:150px}

/* ログ */
.log{flex:1;overflow-y:auto;padding:16px;background:var(--field);box-shadow:inset 0 2px 4px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.empty{margin:auto;text-align:center;color:var(--mute)}
.m{max-width:min(82%,560px);display:flex;flex-direction:column;gap:3px}
.m.me{align-self:flex-end;align-items:flex-end}
.meta{font-size:.76rem;color:var(--mute);padding:0 3px;font-variant-numeric:tabular-nums}
.bub{background:var(--panel);border:1px solid var(--line);border-bottom:3px solid var(--edge);border-radius:6px;padding:7px 12px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;line-height:1.6}
.me .bub{background:var(--amber);border-color:#b88a00;color:#1e262d}

/* 入力部 */
.err{margin:0;padding:0 16px;min-height:1.5em;font-size:.86rem;font-weight:700;color:var(--bad)}
.compose{display:flex;gap:10px;align-items:flex-end;padding:12px 16px 14px;border-top:1px solid var(--line)}
.compose .nick{flex:none;width:150px}
.compose label{display:block;font-weight:700;font-size:.8rem;margin-bottom:4px}
.compose .msg{flex:1;min-width:0}
input,textarea{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--edge);border-top-color:var(--mute);border-radius:4px;background:var(--field);color:var(--ink);box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
input:focus,textarea:focus{border-color:var(--blue);background:var(--panel)}
textarea{resize:none;line-height:1.6;max-height:140px;display:block}
button{font:inherit;font-weight:700;padding:9px 18px;border:1px solid #b88a00;border-bottom-width:3px;border-radius:5px;background:var(--amber);color:#1e262d;cursor:pointer}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(2px);border-bottom-width:1px}
button:disabled{opacity:.5;cursor:default;filter:none;transform:none;border-bottom-width:3px}
button.sub{background:var(--panel);color:var(--ink);border-color:var(--edge)}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}
@media(max-width:640px){.compose{flex-wrap:wrap}.compose .nick{width:100%}.compose .msg{flex:1 1 60%}.room-form{margin-left:0;width:100%}.room-form input{flex:1;width:auto}}

/* フッター */
footer{max-width:var(--w);width:100%;margin:0 auto;padding:22px 20px 40px;border-top:2px solid var(--ink);color:var(--mute);font-size:.86rem;line-height:1.7}
footer p{margin:0 0 6px;max-width:46em}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px!important}
.foot-nav a{font-weight:700}