/* ============ 班级聊天室 公共样式 ============ */
:root{
  --primary:#3d7eff; --primary-deep:#2a5fe0; --primary-bg:#eaf1ff;
  --teach:#ff5722; --teach-bg:#fff0ea;
  --bg:#eef3fb; --card:#ffffff; --txt:#20293f; --mut:#7c87a1;
  --line:#e3e9f5; --green:#16a34a; --amber:#f59e0b; --red:#e5484d;
  --r-lg:18px; --r-md:12px;
  --shadow:0 10px 30px rgba(31,53,110,.12);
  --shadow-sm:0 3px 10px rgba(31,53,110,.10);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif;
  background:var(--bg); color:var(--txt);
  font-size:16px; line-height:1.5;
}
button{font-family:inherit; cursor:pointer}
[hidden]{display:none !important}

/* ---------- 加入卡片 ---------- */
.join-wrap{
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:28px 16px 40px; gap:18px;
}
.join-card{
  width:min(430px,94vw); background:var(--card); border-radius:24px;
  padding:30px 28px 26px; box-shadow:var(--shadow); text-align:center;
}
.join-card-mini{width:min(560px,94vw)}
.join-logo{font-size:44px; line-height:1}
.join-card h1{margin:10px 0 4px; font-size:24px}
.join-sub{margin:0 0 18px; color:var(--mut); font-size:13.5px}
.lab{display:block; text-align:left; font-size:13px; color:var(--mut); margin:14px 0 6px; font-weight:600}
.inp{
  width:100%; padding:12px 14px; border:1.6px solid var(--line); border-radius:var(--r-md);
  font-size:16px; outline:none; background:#fbfcff; color:var(--txt); transition:border .15s, box-shadow .15s;
}
.inp:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(61,126,255,.16); background:#fff}
.inp-lg{font-size:19px; font-weight:600; text-align:center; letter-spacing:.5px}
.role-seg{display:flex; gap:8px}
.seg{
  flex:1; padding:11px 0; font-size:16px; font-weight:600; border-radius:var(--r-md);
  border:1.6px solid var(--line); background:#fff; color:var(--txt); transition:all .15s;
}
.seg.active{border-color:var(--primary); background:var(--primary-bg); color:var(--primary-deep)}
.seg[data-role=teacher].active{border-color:var(--teach); background:var(--teach-bg); color:var(--teach)}
.hint{font-size:12.5px; color:var(--mut); margin:8px 2px 0; text-align:left}
.err{color:var(--red); background:#fdecec; border:1px solid #f8c9c9; border-radius:var(--r-md);
  padding:9px 12px; font-size:14px; margin-top:12px; text-align:left}
.btn{border:none; border-radius:var(--r-md); font-size:15px; font-weight:600; transition:transform .06s, filter .15s}
.btn:active{transform:scale(.97)}
.btn-xl{width:100%; padding:14px; font-size:17px; margin-top:16px}
.btn-primary{background:linear-gradient(135deg,#4a8aff,#2b5fe0); color:#fff; box-shadow:0 6px 16px rgba(43,95,224,.32)}
.btn-primary:disabled{filter:grayscale(.5) brightness(.94); cursor:not-allowed}
.btn-send{width:92px; padding:0 6px; height:50px; font-size:17px; flex:none}
.btn-ghost{background:#fff; border:1.5px solid var(--line); color:var(--txt); padding:7px 12px; font-size:13.5px; border-radius:11px}
.btn-ghost:hover{border-color:var(--primary); color:var(--primary-deep)}
.btn-ghost.danger:hover{border-color:var(--red); color:var(--red)}
.btn-ghost.on{border-color:var(--primary); background:var(--primary-bg); color:var(--primary-deep)}
.join-tip{color:var(--mut); font-size:13px; text-align:center}
.join-tip code{background:#fff; border:1px dashed var(--line); border-radius:8px; padding:2px 8px; color:var(--primary-deep); user-select:all; font-size:14px}

/* ---------- 聊天布局 ---------- */
#chatView{height:100vh; height:100dvh; display:flex; flex-direction:column; max-width:960px; margin:0 auto; background:var(--card); box-shadow:0 0 40px rgba(31,53,110,.08)}
.top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); background:#fff}
.hd-name{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.hd-name b{font-size:19px}
.chip{background:var(--primary-bg); color:var(--primary-deep); border-radius:99px; padding:2px 11px; font-size:12.5px; font-weight:700}
.hd-sub{display:flex; gap:14px; margin-top:3px}
.conn{font-size:12.5px; color:var(--mut); display:inline-flex; align-items:center; gap:6px}
.conn i{width:8px; height:8px; border-radius:50%; background:#c3cbd9; display:inline-block}
.conn i.dot{background:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.conn.bad i{background:#f2a23a}
.hd-btns{display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end}

.members-strip{
  display:flex; gap:6px; overflow-x:auto; padding:8px 14px; border-bottom:1px solid var(--line);
  scrollbar-width:none; background:#fbfcff;
}
.members-strip::-webkit-scrollbar{display:none}
.m-chip{
  display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line);
  border-radius:99px; padding:3px 11px 3px 4px; font-size:12.5px; white-space:nowrap; color:#46506a;
}
.m-chip .av{width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700; flex:none}
.m-chip .off{opacity:.45}
.m-chip .b-t{background:var(--teach-bg); color:var(--teach); font-size:10.5px; font-weight:800; border-radius:5px; padding:1px 5px}

/* ---------- 消息区 ---------- */
.msgs{flex:1; overflow-y:auto; padding:16px 16px 8px; scroll-behavior:smooth;
  background:linear-gradient(180deg,#f4f7fd 0%, #eef3fb 100%)}
.msg{display:flex; gap:10px; margin-bottom:14px; animation:msgIn .18s ease}
@keyframes msgIn{from{opacity:0; transform:translateY(8px)} to{opacity:1}}
.msg .av{
  width:40px; height:40px; border-radius:50%; flex:none; color:#fff; font-size:17px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
  box-shadow:var(--shadow-sm);
}
.msg-body{max-width:min(76%,620px)}
.msg-meta{display:flex; align-items:baseline; gap:8px; margin:1px 0 4px}
.msg-meta .nm{font-weight:700; font-size:14.5px}
.msg-meta .tm{font-size:11.5px; color:var(--mut)}
.bubble{
  background:#fff; border-radius:4px 16px 16px 16px; padding:10px 14px; font-size:16px;
  box-shadow:var(--shadow-sm); word-break:break-word; white-space:pre-wrap; border:1px solid rgba(227,233,245,.8);
}
.bubble.notice{
  background:linear-gradient(135deg,#fff7ea,#ffefd8); border:1.5px solid #ffd9a3; border-radius:12px;
  font-weight:600;
}
.bubble.notice .ic{margin-right:4px}
.msg .sys{
  background:#e9eef9; color:#6b7590; border-radius:99px; font-size:12.5px; padding:3px 13px;
  box-shadow:none; border:none; display:inline-block;
}
.msg-mine{flex-direction:row-reverse}
.msg-mine .msg-meta{flex-direction:row-reverse}
.msg-mine .bubble{background:linear-gradient(135deg,#4a8aff,#2f6bff); color:#fff; border-radius:16px 4px 16px 16px; border:none}
.msg-mine .bubble.notice{background:linear-gradient(135deg,#ff8a50,#ff5722); color:#fff; border:none}
.msg-center{justify-content:center}
.msg-center .bubble{background:transparent; box-shadow:none; color:var(--mut); font-size:13px; border:none; padding:2px 0}
.day-pill{justify-content:center; margin:2px 0 10px}
.day-pill .bubble{background:transparent; border:none; box-shadow:none; color:#a0a9bf; font-size:11.5px}

/* ---------- 快捷短语 ---------- */
.composer{border-top:1px solid var(--line); background:#fff; padding:8px 12px 12px}
.quick-bar{
  display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none;
}
.quick-bar::-webkit-scrollbar{display:none}
.q-chip{
  flex:none; background:#f2f6ff; border:1px solid var(--line); border-radius:99px;
  padding:6px 13px; font-size:14px; color:#3a4a76; transition:all .12s;
}
.q-chip:hover{background:var(--primary-bg); border-color:var(--primary)}
.q-chip:active{transform:scale(.95)}
.q-chip.emoji{font-size:19px; padding:2px 9px}
.input-row{display:flex; gap:9px; align-items:stretch}
.msg-inp{flex:1; min-width:0; height:50px; padding:12px 15px; font-size:16px; border-radius:14px}
.notice-switch{display:flex; align-items:center; cursor:pointer}
.notice-switch input{display:none}
.notice-switch .sw{
  padding:9px 14px; border-radius:99px; font-size:14.5px; font-weight:700; color:#9c5d13;
  background:#fff7e8; border:1.6px solid #ffd9a3; white-space:nowrap; height:50px; display:flex; align-items:center;
}
.notice-switch input:checked + .sw{background:linear-gradient(135deg,#ff8a50,#ff5722); color:#fff; border-color:#ff5722}
.msg-inp.notice-on{border-color:var(--teach); background:#fffdf8}

/* 未读跳转 */
.jump-pill{
  position:fixed; left:50%; transform:translateX(-50%); bottom:132px; z-index:90;
  background:rgba(24,33,58,.85); color:#fff; border-radius:99px; padding:7px 16px; font-size:13.5px; cursor:pointer;
  box-shadow:var(--shadow); backdrop-filter:blur(4px); animation:msgIn .2s ease;
}

/* ---------- 全局弹窗提醒 ---------- */
.popups{
  position:fixed; top:14px; left:0; right:0; z-index:2000; display:flex; flex-direction:column;
  align-items:center; gap:10px; pointer-events:none; padding:0 10px;
}
.toast{
  pointer-events:auto; width:min(680px,96vw); background:#fff; border-radius:18px; box-shadow:0 16px 46px rgba(15,25,60,.28);
  display:flex; align-items:flex-start; gap:13px; padding:15px 18px; cursor:pointer;
  border-left:7px solid var(--primary); overflow:hidden; position:relative;
  animation:toastIn .34s cubic-bezier(.2,1.2,.35,1);
}
.toast.toast-out{transition:opacity .25s, transform .25s; opacity:0; transform:translateY(-24px) scale(.96)}
@keyframes toastIn{from{opacity:0; transform:translateY(-30px) scale(.92)}}
.toast .t-av{
  width:46px; height:46px; border-radius:50%; flex:none; color:#fff; font-weight:800; font-size:19px;
  display:flex; align-items:center; justify-content:center;
}
.toast .t-main{flex:1; min-width:0}
.toast .t-title{display:flex; align-items:center; gap:8px; margin-bottom:3px}
.toast .t-name{font-weight:800; font-size:15.5px}
.toast .t-tag{font-size:11px; font-weight:700; color:#b3541e; background:#ffe8d2; border-radius:5px; padding:1px 6px}
.toast .t-txt{font-size:18.5px; line-height:1.45; font-weight:600; word-break:break-word; color:#1b2340}
.toast.notice{background:linear-gradient(135deg,#fff8ea,#fff3dd); border-left-color:var(--amber)}
.toast.notice .t-tag{background:var(--teach); color:#fff}
.toast .t-x{margin-left:6px; color:#b8c0d4; font-size:18px; line-height:1; padding:2px}


/* ---------- 提示音量调节 ---------- */
.vol-row{display:inline-flex;align-items:center;gap:6px}
input[type=range].vol{width:64px; accent-color:var(--primary); cursor:pointer}
.volbox{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #c9d9f4;border-radius:10px;padding:4px 10px}
.volbox .vic{font-size:15px;width:18px;text-align:center}
.volbox input[type=range]{width:76px;accent-color:#2563eb;cursor:pointer}
@media (max-width:860px){ input[type=range].vol{width:44px} .volbox input[type=range]{width:56px} }

/* ============ 白板投屏页（浅色 · 醒目大字） ============ */
.board-body{
  background:linear-gradient(165deg,#fbfdff 0%,#ecf3ff 55%,#dde9fb 100%);
  color:#22304f; overflow:hidden;
}
.board-join{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px}
.board-top{
  position:fixed; top:0; left:0; right:0; z-index:30; display:flex; justify-content:space-between;
  align-items:center; gap:10px; padding:12px 20px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(160,185,230,.55);
}
.board-left{display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap}
.board-room{display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #cdddf6;
  border-radius:11px; padding:5px 12px; font-size:14px; color:#2b3c6b; box-shadow:0 2px 6px rgba(80,120,220,.10)}
.bdot{width:9px; height:9px; border-radius:50%; background:#c3cbdd; flex:none}
.bdot.ok{background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.7)}
.bdot.bad{background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.7)}
.board-name{font-size:18px; font-weight:800; letter-spacing:.5px; color:#1d2a4f}
.board-meta{font-size:12.5px; color:#7d8db5}
.board-right{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.b-btn{background:#fff; color:#33467a; border:1px solid #c9d9f4; border-radius:10px; padding:7px 12px;
  font-size:13px; transition:all .15s; box-shadow:0 1px 4px rgba(70,110,210,.08)}
.b-btn:hover{background:#eef4ff; border-color:#8fb0ec}
.b-btn.on{background:#22c55e; border-color:#22c55e; color:#fff}

.board-stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:64px 26px 92px}
.board-idle{text-align:center; user-select:none}
.idle-emoji{font-size:clamp(42px,7vh,80px); filter:drop-shadow(0 8px 16px rgba(90,130,220,.25))}
.idle-text{font-size:clamp(15px,2.4vh,24px); color:#5c6f9c; margin-top:8px; line-height:1.8; letter-spacing:.5px}
.idle-text span{color:#93a3c8; font-size:.82em}
.idle-clock{margin-top:26px; font-size:clamp(40px,10.5vh,118px); font-weight:600; letter-spacing:3px;
  color:#1e2f5e; text-shadow:0 4px 14px rgba(120,160,250,.30); font-variant-numeric:tabular-nums}
.idle-clock .sec{font-size:.45em; color:#6f83b4; margin-left:10px}

/* 中央大弹窗：深色高饱和卡片，与浅色背景形成最强对比 */
.board-sticky{position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  padding:56px 24px 92px; pointer-events:none}
.b-card{
  pointer-events:auto; position:relative; width:min(1180px,94vw); color:#fff;
  background:linear-gradient(135deg,#2f6bff 0%,#1e40af 68%,#1e3a8a 100%);
  border-radius:26px; padding:clamp(20px,5vh,46px) clamp(24px,5vw,60px);
  box-shadow:0 22px 60px rgba(30,64,175,.42);
  animation:bIn .42s cubic-bezier(.2,1.3,.35,1), glow .9s ease-out;
}
.b-card.notice{
  background:linear-gradient(135deg,#ff8f2b 0%,#f0560a 60%,#d92d20 100%);
  box-shadow:0 22px 60px rgba(234,88,12,.46);
  animation:bIn .42s cubic-bezier(.2,1.3,.35,1), glowAmber .9s ease-out;
}
.b-card.b-out{transition:opacity .26s, transform .26s; opacity:0; transform:translateY(-34px) scale(.95)}
@keyframes bIn{0%{opacity:0; transform:scale(.72) translateY(70px)} 55%{transform:scale(1.03) translateY(-5px)} 100%{opacity:1; transform:none}}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(47,107,255,.65),0 22px 60px rgba(30,64,175,.42)}
  100%{box-shadow:0 0 0 36px rgba(47,107,255,0),0 22px 60px rgba(30,64,175,.42)}}
@keyframes glowAmber{0%{box-shadow:0 0 0 0 rgba(255,143,43,.7),0 22px 60px rgba(234,88,12,.46)}
  100%{box-shadow:0 0 0 42px rgba(255,143,43,0),0 22px 60px rgba(234,88,12,.46)}}
.b-card .b-from{display:flex; align-items:center; gap:14px; margin-bottom:clamp(10px,2vh,20px)}
.b-card .b-av{width:clamp(38px,6.5vh,64px); height:clamp(38px,6.5vh,64px); border-radius:50%;
  background:rgba(255,255,255,.97); color:#1e2a52; font-weight:800; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:clamp(18px,3.4vh,34px);
  box-shadow:0 3px 10px rgba(0,0,0,.22)}
.b-card .b-name{font-size:clamp(17px,3.2vh,30px); font-weight:800}
.b-card .b-tag{font-size:clamp(11px,1.7vh,16px); font-weight:800; color:#fff;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.55); border-radius:8px;
  padding:2px 10px; vertical-align:middle}
.b-card .b-txt{font-size:clamp(26px,7vh,68px); font-weight:900; line-height:1.3; word-break:break-word;
  letter-spacing:1px; text-shadow:0 3px 12px rgba(0,0,0,.28)}
.b-card.notice .b-txt{font-size:clamp(34px,9.6vh,96px); text-align:center; line-height:1.26}
.b-card .b-close{position:absolute; top:14px; right:18px; color:rgba(255,255,255,.78); font-size:24px; cursor:pointer; line-height:1}
.b-card .b-close:hover{color:#fff}

/* 底部最近消息 */
.board-ticker{position:fixed; bottom:0; left:0; right:0; z-index:25; display:flex; flex-direction:column-reverse;
  gap:5px; padding:10px 22px 12px; background:linear-gradient(0deg,rgba(214,228,252,.9),transparent)}
.tk{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; max-width:76vw;
  background:rgba(255,255,255,.93); border:1px solid #cfddf4; border-radius:9px; padding:3px 11px;
  font-size:13px; color:#5a6c96; box-shadow:0 1px 4px rgba(80,120,220,.08)}
.tk b{color:#1d2a4f; font-weight:800}
.tk span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* 小窗口 / 窄屏适配（右下角小窗模式） */
@media (max-width:780px), (max-height:580px){
  .board-top{padding:8px 12px}
  .board-room{font-size:12px; padding:4px 9px}
  .board-name{font-size:14px}
  .board-meta{display:none}
  .b-btn{padding:5px 9px; font-size:12px}
  .volbox input[type=range]{width:52px}
  .board-stage{padding:52px 10px 64px}
  .board-idle{padding-top:6vh}
  .idle-clock{font-size:clamp(32px,10vh,60px)}
  .b-card{border-radius:18px; padding:14px 18px; width:min(97vw,660px)}
  .b-card .b-av{width:clamp(30px,8vh,46px); height:clamp(30px,8vh,46px); font-size:clamp(15px,4vh,24px)}
  .b-card .b-name{font-size:clamp(13px,3.2vh,19px)}
  .b-card .b-txt{font-size:clamp(20px,8.6vh,38px)}
  .b-card.notice .b-txt{font-size:clamp(25px,11.5vh,48px)}
  .b-card .b-close{font-size:18px; top:9px; right:12px}
  .board-ticker{padding:6px 10px 8px}
  .tk{max-width:94vw; font-size:11.5px}
}