/* 生徒用画面。Twitch のチャット欄と同じ「縦長・下から積む・下端に入力欄」。 */
:root{
  --bg:#0b0f1a; --panel:#141b2d; --panel2:#1b2438; --line:#2a3452;
  --ink:#eef2ff; --sub:#98a3c4; --accent:#37e6c4; --accent2:#ff5da2;
  --warn:#ffb454; --bad:#ff6b6b;
  --sans:'Hiragino Sans','Noto Sans JP',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.7;
  overflow:hidden;
  background-image:radial-gradient(circle at 15% -10%,rgba(55,230,196,.10),transparent 55%),
                   radial-gradient(circle at 90% 0%,rgba(255,93,162,.08),transparent 45%);
}

/* ===== 参加登録 ===== */
.join{height:100dvh;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:20px}
.join-inner{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px;width:100%;max-width:420px}
h1{font-size:20px;margin-bottom:6px}
.lead{color:var(--sub);font-size:14px;margin-bottom:18px}
.lbl{display:block;font-size:12px;color:var(--sub);margin:14px 0 6px;letter-spacing:.04em}
input[type=text],select{width:100%;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);padding:14px;border-radius:11px;font-size:16px;font-family:var(--sans)}
input[type=text]:focus,select:focus{outline:none;border-color:var(--accent)}

.btn{width:100%;margin-top:16px;padding:15px;border:none;border-radius:11px;cursor:pointer;
  background:var(--accent);color:#06231d;font-weight:800;font-size:16px;font-family:var(--sans)}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ===== チャット画面の骨組み =====
   高さを 100dvh に固定して、伸び縮みするのは中央のコメント欄だけにする。
   こうするとスマホで入力欄が常に下端に残る。 */
.app{height:100dvh;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom)}
/* PCでは横に伸びきらないよう、チャットらしい縦長の列に収める */
@media(min-width:700px){
  .app{max-width:520px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
}

.hd{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(11,15,26,.85)}
.hd-title{font-size:13px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hd-title span{color:var(--accent)}
.me{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--sub);
  border-radius:20px;padding:5px 13px;font-size:12px;font-family:var(--sans);cursor:pointer;
  max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== 上にピン留めするアンケート =====
   選択肢は必ず全部見えるようにする（スクロールさせない）。
   選択肢の数と画面の高さに合わせて、下の変数を app.js が縮める。 */
.pinned{
  --opt-h:44px; --opt-fs:15px; --gap:9px; --q-fs:17px; --btn-h:46px; --box:21px;
  flex:0 0 auto;overflow:hidden;
  margin:10px 12px 0;padding:14px 16px;background:var(--panel);
  border:1px solid rgba(55,230,196,.35);border-radius:14px}
.pin-tag{display:inline-block;background:rgba(55,230,196,.14);color:var(--accent);
  border:1px solid rgba(55,230,196,.4);border-radius:20px;
  padding:2px 11px;font-size:10px;font-weight:700;margin-bottom:6px;letter-spacing:.06em}
.pinned h2{font-size:var(--q-fs);margin-bottom:var(--gap);line-height:1.4}

.options{display:flex;flex-direction:column;gap:var(--gap)}
.opt{display:flex;align-items:center;gap:11px;background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:0 13px;cursor:pointer;
  height:var(--opt-h);font-size:var(--opt-fs);line-height:1.25;transition:.12s}
.opt:active{transform:scale(.995)}
.opt.on{border-color:var(--accent);background:rgba(55,230,196,.11)}
.opt .box{width:var(--box);height:var(--box);flex:0 0 var(--box);border:2px solid var(--line);
  border-radius:5px;display:grid;place-items:center;font-size:calc(var(--box) * .6);color:#06231d}
.opt.on .box{background:var(--accent);border-color:var(--accent)}
.opt.on .box::after{content:'✓';font-weight:800}

/* 回答ボタンもまとめて縮める */
.pinned .btn{margin-top:var(--gap);padding:0;height:var(--btn-h);font-size:var(--opt-fs)}

/* 回答後のライブ集計 */
.bars{display:flex;flex-direction:column;gap:var(--gap)}
.bar{position:relative;background:var(--panel2);border-radius:9px;overflow:hidden;height:var(--opt-h)}
.bar.mine{outline:1px solid rgba(55,230,196,.55)}
.bar-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(55,230,196,.75),rgba(55,230,196,.35));
  transition:width .6s cubic-bezier(.22,1,.36,1)}
.bar-row{position:relative;height:100%;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:0 13px}
.bar-label{font-size:var(--opt-fs);font-weight:700;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.bar-num{flex:0 0 auto;font-size:calc(var(--opt-fs) * .92);font-weight:800;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.bar-num .pct{color:var(--sub);margin-left:7px;font-size:calc(var(--opt-fs) * .78)}
.live-foot{display:flex;align-items:center;gap:10px;margin-top:var(--gap);
  color:var(--sub);font-size:calc(var(--opt-fs) * .82)}
.live-foot span{color:var(--accent);font-weight:800;font-size:var(--opt-fs)}
.link{margin-left:auto;background:none;border:none;color:var(--sub);font-size:12px;
  font-family:var(--sans);text-decoration:underline;cursor:pointer;padding:0}

/* ===== コメントが流れるところ ===== */
.chat{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.chat-topic{flex:0 0 auto;padding:10px 16px 8px;font-size:13px;font-weight:800;
  color:var(--accent);border-bottom:1px solid var(--line)}
.chat-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 14px 16px;display:flex;flex-direction:column;gap:7px}

.msg{font-size:15px;line-height:1.55;word-break:break-word;
  animation:slide .3s cubic-bezier(.22,1,.36,1)}
@keyframes slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .who{font-weight:800;margin-right:7px}
.msg .who::after{content:':';color:var(--sub);margin-left:2px;font-weight:400}
.msg.self{background:rgba(55,230,196,.08);border-left:2px solid var(--accent);
  border-radius:0 8px 8px 0;padding:3px 9px;margin-left:-2px}

/* 会場ごとに名前の色を変える（投影画面と同じ配色） */
.v-tokyo    .who{color:#5fd0ff}
.v-kobe     .who{color:#37e6c4}
.v-fukuoka  .who{color:#ffb454}
.v-shizuoka .who{color:#c792ea}
.v-online   .who{color:#ff5da2}

/* 上に遡っているときだけ出る「新しいコメント」ボタン */
.jump{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  background:var(--accent);color:#06231d;border:none;border-radius:20px;
  padding:7px 16px;font-size:12px;font-weight:800;font-family:var(--sans);
  cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.45)}

/* 待機中 */
.idle{margin:auto;text-align:center;color:var(--sub);padding:30px 20px}
.idle p{font-size:14px;margin-top:14px}
.idle-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);
  margin:0 auto;animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ===== 入力欄（常に下端） ===== */
.composer{flex:0 0 auto;display:flex;gap:8px;padding:10px 12px;
  border-top:1px solid var(--line);background:rgba(11,15,26,.9)}
.composer input{flex:1;min-width:0;padding:12px 14px}
.composer input:disabled{opacity:.5}
.send{flex:0 0 auto;padding:12px 18px;border:none;border-radius:11px;cursor:pointer;
  background:var(--accent);color:#06231d;font-weight:800;font-size:14px;font-family:var(--sans)}
.send:disabled{opacity:.4;cursor:not-allowed}

.result{font-size:14px;border-radius:11px}
.result.ok,.result.ng{padding:11px 14px;margin-top:10px}
.result.ok{background:rgba(55,230,196,.10);border:1px solid rgba(55,230,196,.4);color:#b8fff0}
.result.ng{background:rgba(255,107,107,.10);border:1px solid rgba(255,107,107,.4);color:#ffd3d3}
/* 入力欄の下に出るぶんは、余白が出ないよう詰める */
.result.foot{flex:0 0 auto;margin:0;font-size:13px}
.result.foot.ok,.result.foot.ng{margin:0 12px 10px}