/* =============================================================================
   教师端 · 布局层（应用外壳 / 我的教室 / 对话 / 摄像头 / 认证页）
   -----------------------------------------------------------------------------
   为什么要"外壳"：原先只有一条顶栏 + 居中卡片，1440 屏上 2/3 是空的，看起来像
   一张表单而不是一个应用。现在是**左侧栏 + 右侧内容区**的常规控制台布局，
   与教室端（桌面应用）的观感对齐。
   ============================================================================= */

/* ---------------------------------------------------------------- 应用外壳 */
.shell{display:grid;grid-template-columns:var(--side-w) 1fr;height:100%}

.side{
  display:flex;flex-direction:column;gap:var(--s5);
  padding:var(--s5) var(--s4);
  background:var(--bg-2); border-right:1px solid var(--border);
}
.side__brand{display:flex;align-items:center;gap:var(--s3);color:var(--text);font-weight:650;font-size:var(--fs)}
.side__brand:hover{text-decoration:none}
.side__mark{
  flex:none;width:32px;height:32px;border-radius:var(--r);display:inline-flex;align-items:center;
  justify-content:center;background:var(--primary);color:var(--text-inv);font-size:15px;font-weight:700;
}
.side__nav{display:flex;flex-direction:column;gap:2px}
.side__nav a{
  display:flex;align-items:center;gap:var(--s3);
  min-height:38px; padding:0 var(--s3); border-radius:var(--r);
  color:var(--text-2); font-size:var(--fs-sm); font-weight:550;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side__nav a:hover{background:var(--surface);color:var(--text);text-decoration:none}
.side__nav a.is-active{background:var(--surface);color:var(--primary);border:1px solid var(--border)}
.side__nav a .ico{width:18px;text-align:center;font-size:15px;line-height:1}
.side__foot{margin-top:auto;display:flex;align-items:center;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--border)}
.brand__user{font-size:var(--fs-sm);color:var(--text-2);font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.view{overflow:auto;padding:var(--s7) var(--s8)}
.view>*{max-width:1040px;margin-left:auto;margin-right:auto}

/* 未登录（登录页）：隐藏整个外壳，卡片独占一屏并居中 —— 不要让侧栏出现在登录页旁边 */
body:not(.is-authed) .side{display:none}
body:not(.is-authed) .shell{grid-template-columns:1fr}
body:not(.is-authed) .view{
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--primary-weak), transparent 70%),
    var(--bg);
}
body:not(.is-authed) .view>*{max-width:420px;margin:0;width:100%}
.page-head{margin-bottom:var(--s6)}
.page-head p{color:var(--text-3);font-size:var(--fs-sm);margin:0}

/* ---------------------------------------------------------------- 我的教室 */
.rooms{display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:1000px){.rooms{grid-template-columns:1fr 1fr}.rooms>.card:first-child{grid-column:1/-1}}
.empty{color:var(--text-3);font-size:var(--fs-sm)}

/* ---------------------------------------------------------------- 对话 */
.chat{display:grid;grid-template-columns:236px 1fr;gap:var(--s4);height:calc(100vh - 2 * var(--s7))}
.chat__rooms{display:flex;flex-direction:column;gap:var(--s2);overflow:auto;padding-right:2px}
.room{
  appearance:none;display:flex;align-items:center;gap:var(--s3);text-align:left;
  border:1px solid var(--border);background:var(--surface);border-radius:var(--r);
  padding:var(--s3);font:inherit;color:var(--text);cursor:pointer;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.room:hover{border-color:var(--border-2);background:var(--bg)}
.room.is-active{border-color:var(--primary);background:var(--primary-weak)}
.room__name{font-weight:600;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room__sub{font-size:var(--fs-xs);color:var(--text-3)}

.chat__main{
  display:flex;flex-direction:column;min-width:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow-1);overflow:hidden;
}
.chat__head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.chat__title{font-weight:640;font-size:var(--fs-lg)}
.msgs-wrap{flex:1;overflow:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);background:var(--bg)}
.load-more{align-self:center}
.msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s5)}

/* 气泡：短消息（如"111"）必须有最小宽度与合适内距，否则会塌成一个小方块 —— 这是原版的真实缺陷 */
.msg{display:flex;flex-direction:column;gap:5px;align-items:flex-end;max-width:100%}
.msg--in{align-items:flex-start}
.bubble{
  max-width:min(560px,80%);
  min-width:56px;
  padding:10px 14px;
  border-radius:16px 16px 6px 16px;
  background:var(--primary); color:var(--text-inv);
  font-size:var(--fs); line-height:1.55;
  word-break:break-word;
}
.bubble--in{
  background:var(--surface); color:var(--text);
  border:1px solid var(--border);
  border-radius:16px 16px 16px 6px;
}
.bubble__text{white-space:pre-wrap}
.bubble__media{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.bubble__media a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bubble audio{max-width:260px}
.msg--urgent .bubble{background:var(--danger);color:#fff;border-color:transparent}
.msg--urgent .bubble::before{content:"紧急广播";display:block;font-size:var(--fs-xs);font-weight:700;opacity:.9;margin-bottom:4px}

/* 气泡内的 chip 在深色底/浅色底上各有一套配色 */
.bubble .chip{background:rgba(255,255,255,.22);color:inherit}
.bubble--in .chip{background:var(--bg-2);color:var(--text-2)}

.msg .meta{display:flex;align-items:center;gap:var(--s3);padding:0 4px;font-size:var(--fs-xs);color:var(--text-3)}
.msg--out .meta{justify-content:flex-end}
.meta__who{font-weight:600;color:var(--text-2)}
.ack--ok{color:var(--ok)}
.ack--err{color:var(--danger)}

.composer{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--border);background:var(--surface)}
.composer input{flex:1;margin-top:0;border-radius:var(--r-pill);padding:11px 16px}

/* ---------------------------------------------------------------- 摄像头 */
.camera{display:flex;flex-direction:column;gap:var(--s4);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--s5)}
.camera__head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.camera__head .spacer{flex:1}
.stream-state{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--text-3)}
.stream-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--border-2)}
.stream-state[data-state="live"]{color:var(--ok)}
.stream-state[data-state="live"]::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-weak)}
.stream-state[data-state="waiting"],.stream-state[data-state="requesting"]{color:var(--warn)}
.stream-state[data-state="waiting"]::before,.stream-state[data-state="requesting"]::before{background:var(--warn)}
.stream-state[data-state="error"]{color:var(--danger)}
.stream-state[data-state="error"]::before{background:var(--danger)}
.camera video{width:100%;aspect-ratio:16/9;background:#0b0b0d;border-radius:var(--r);border:1px solid var(--border)}
.camera__note{margin:0;font-size:var(--fs-sm);color:var(--text-3)}
.camera__log{list-style:none;margin:0;padding:var(--s3) var(--s4);max-height:200px;overflow:auto;
  background:var(--bg-2);border-radius:var(--r);font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-2)}
.camera__log li{padding:3px 0;border-top:1px dashed var(--border)}
.camera__log li:first-child{border-top:0}

/* ---------------------------------------------------------------- 认证页 / 设置 */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s5);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--primary-weak), transparent 70%),
    var(--bg)}
.auth .card{width:100%;margin:0}
.auth__brand{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6)}
.auth__name{font-weight:650;font-size:var(--fs);line-height:1.3}
.auth__tag{font-size:var(--fs-xs);color:var(--text-3)}
.card--auth h1{font-size:var(--fs-xl);margin-bottom:var(--s5)}
.card--auth .btn[type="submit"]{width:100%;min-height:44px;margin-top:var(--s2)}
.card--auth .hint{display:block;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border);line-height:1.6}
.settings-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-top:1px solid var(--border)}
.settings-row:first-of-type{border-top:0}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{
    flex-direction:row;align-items:center;gap:var(--s4);
    padding:var(--s3) var(--s4);border-right:0;border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:20;
  }
  .side__brand span:not(.side__mark){display:none}
  .side__nav{flex-direction:row;gap:var(--s1);overflow-x:auto}
  .side__nav a{min-height:34px;padding:0 var(--s3)}
  .side__nav a .ico{display:none}
  .side__foot{margin-top:0;padding-top:0;border-top:0;margin-left:auto}
  .view{padding:var(--s5) var(--s4)}
  .chat{grid-template-columns:1fr;height:auto}
  .chat__rooms{flex-direction:row;overflow-x:auto;padding-bottom:var(--s1)}
  .room{flex:none}
  .msgs-wrap{max-height:58vh}
}
@media (max-width:560px){
  .row-actions{width:100%;margin-left:0}
  .list>li{flex-wrap:wrap}
  .card{padding:var(--s5)}
  .chat__main{border-radius:var(--r)}
  .brand__user{display:none}
}