[hidden]{display:none!important}*{box-sizing:border-box}:root{color-scheme:dark;--bg:#111;--panel:#181818;--panel2:#202020;--line:#343434;--text:#f7f7f7;--muted:#aaa;--accent:#f3c431;--danger:#b83a3a}html,body{margin:0;width:100%;height:100%;min-height:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}.chat-shell{width:100%;height:100%;min-height:0;max-width:760px;margin:0 auto;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}#roomApp{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}.chat-header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);background:#151515}.brand{font-size:.7rem;letter-spacing:.13em;font-weight:800;color:var(--accent);margin-bottom:3px}.room-line{display:flex;align-items:center;gap:9px}.presence{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:.78rem}#presenceDot{width:7px;height:7px;border-radius:50%;background:#777}#presenceDot.live{background:#62c47c}.header-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;min-width:0}.ghost-button,.danger-button{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:7px 10px;border-radius:8px}.danger-button{border-color:#6d2929;background:#2b1717;color:#ffb4b4}.primary,.join-row button,.composer button{border:0;border-radius:8px;background:var(--accent);color:#111;font-weight:800;padding:8px 12px}.big{padding:13px 18px}.create-panel{padding:26px 20px}.create-panel h1{margin:5px 0 8px}.create-panel p{color:var(--muted);line-height:1.45}.fine{font-size:.78rem;margin-top:18px}.join-panel{padding:20px 16px}.join-panel h1{margin:0 0 6px;font-size:1.18rem}.join-panel p{margin:0 0 14px;color:var(--muted)}.join-panel label,.share-panel label{display:block;margin-bottom:6px;font-size:.82rem}.join-row,.copy-row{display:flex;gap:8px}.join-row input,.copy-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;background:#101010;color:var(--text);padding:10px}.host-panel,.share-panel{padding:8px 12px;border-bottom:1px solid var(--line);background:#1c1c1c}.host-panel{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem}.host-panel>div{display:flex;gap:6px}.share-panel p{font-size:.75rem;color:var(--muted);margin:7px 0 1px}.chat-panel{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;overflow:hidden}.messages{flex:1 1 auto;height:auto;min-height:0;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}.message{border-bottom:1px solid #292929;padding-bottom:7px}.message:last-child{border-bottom:0}.message-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}.message-name{font-weight:800;font-size:.88rem}.message-time{color:#777;font-size:.7rem}.message-body{font-size:.93rem;line-height:1.32;overflow-wrap:anywhere}.empty{margin:auto;color:#777;text-align:center;padding:24px}.composer{margin-top:auto;padding:8px;border-top:1px solid var(--line);background:#151515}.composer textarea{width:100%;resize:none;border:1px solid var(--line);border-radius:9px;background:#0f0f0f;color:var(--text);padding:8px 10px;line-height:1.25}.composer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}#statusText{font-size:.72rem;color:#888}@media(max-width:520px){
.chat-shell{border-left:0;border-right:0}
.chat-header>div:first-child{flex:1 1 180px;min-width:0}
.header-actions{flex:1 1 auto}
.header-actions button{padding:7px 8px}
.room-line{flex-wrap:wrap}
.messages{height:auto;min-height:0;flex:1 1 auto}
.join-row{flex-direction:column}
.join-row button{min-height:42px}
.composer button{min-width:72px;min-height:40px}
.host-panel{align-items:flex-start;flex-direction:column}
}


/* 0.2.5 — The Bob Release */
.host-app,
#classroomApp{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.host-dashboard{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
}

.host-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.host-label{
  display:block;
  color:var(--muted);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:4px;
}

.roster-wrap{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:12px 0;
}

.participant-roster{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.participant-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel2);
  color:var(--text);
  font-size:.82rem;
}

.host-share{
  display:block !important;
  border:0 !important;
  padding:0 !important;
}

.host-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.you-badge{
  display:inline-block;
  margin-left:5px;
  padding:1px 5px;
  border-radius:999px;
  background:var(--accent);
  color:#111;
  font-size:.62rem;
  font-weight:800;
  vertical-align:1px;
}

@media(max-width:520px){
  .host-dashboard{padding:10px;gap:10px}
  .host-status{align-items:flex-start}
  .participant-chip{font-size:.78rem}
}


/* 0.2.7 inline participant rename */
.rename-panel{
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  background:#151515;
}

.rename-panel label{
  display:block;
  margin-bottom:5px;
  font-size:.76rem;
  color:var(--muted);
}

.rename-row{
  display:flex;
  gap:6px;
  align-items:center;
}

.rename-row input{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:#0f0f0f;
  color:var(--text);
  padding:8px 9px;
}

.rename-row button{
  border:0;
  border-radius:8px;
  background:var(--accent);
  color:#111;
  font-weight:800;
  padding:8px 10px;
}

.rename-row .ghost-button{
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
}

@media(max-width:420px){
  .rename-row{flex-wrap:wrap}
  .rename-row input{flex-basis:100%}
}


/* 0.2.8 name collision notice */
.name-notice{
  margin:8px 0 0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel2);
  color:var(--text);
  font-size:.82rem;
  line-height:1.3;
}

/* 0.2.9 host session recovery */
.resume-panel{
  width:100%; margin:0 0 12px; padding:12px;
  border:1px solid var(--line); border-radius:10px;
  background:var(--panel2); display:flex; align-items:center;
  justify-content:space-between; gap:12px; text-align:left;
}
.resume-panel[hidden]{display:none}
.host-private-note{margin-top:-6px}
@media(max-width:520px){
  .resume-panel{align-items:stretch;flex-direction:column}
}


/* 0.3.0 multi-session recovery */
.resume-list-panel{
  width:100%;
  margin:0 0 14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
  text-align:left;
}

.resume-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}

.resume-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.resume-session-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#151515;
}

.resume-session-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.resume-session-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media(max-width:520px){
  .resume-session-row{
    align-items:stretch;
    flex-direction:column;
  }
  .resume-session-actions{
    justify-content:flex-start;
  }
}


/* 0.3.1 — reusable G-Chat channel */
.saved-channel-panel,
.channel-card,
.session-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel2);
  padding:12px;
}

.saved-channel-panel{margin:14px 0}
.saved-actions,.host-actions,.code-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.saved-actions{margin-top:10px}

.channel-card p,.session-card p{color:var(--muted);line-height:1.35}
.compact{margin:6px 0 0}

.session-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.session-card h2{
  margin:0;
  font-size:1.15rem;
}

.session-card label{
  font-size:.8rem;
  color:var(--muted);
}

.session-card input{
  width:100%;
  border:1px solid var(--line);
  border-radius:9px;
  background:#101010;
  color:var(--text);
  padding:10px;
}

.live-pill{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  background:#18381f;
  color:#8bea9f;
  font-size:.74rem;
  letter-spacing:.08em;
}

.code-card{
  border:1px solid var(--line);
  border-radius:10px;
  background:#131313;
  padding:11px;
}

#joinCodeText{
  font-size:2rem;
  letter-spacing:.14em;
  color:var(--accent);
}

.idle-classroom{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px 18px;
}

.idle-classroom h1{
  margin:6px 0 8px;
  font-size:1.18rem;
}

.idle-classroom p{
  max-width:520px;
  margin:0;
  color:var(--muted);
  line-height:1.4;
}

.idle-icon{
  font-size:1.2rem;
  color:#666;
}

.session-code-input{
  width:100%;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#101010;
  color:var(--text);
  padding:10px;
  font-size:1.15rem;
  letter-spacing:.12em;
}

.session-banner{
  padding:6px 10px;
  border-bottom:1px solid var(--line);
  background:#1c1c1c;
  color:var(--muted);
  font-size:.76rem;
  font-weight:700;
}

#hostPresenceDot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#777;
}
#hostPresenceDot.live{background:#62c47c}

@media(max-width:520px){
  #joinCodeText{font-size:1.7rem}
}


/* 0.3.2 — compact embed + pause/resume */
.chat-shell{
  min-height:0 !important;
}

#classroomApp{
  min-height:0 !important;
}

.idle-classroom{
  min-height:220px !important;
  padding:18px 16px !important;
}

.join-panel{
  padding:12px !important;
}

.join-panel h1{
  margin:0 0 6px !important;
  font-size:1.05rem !important;
}

.join-panel p{
  margin:0 0 10px !important;
}

.session-code-input{
  margin-bottom:8px !important;
}

.chat-panel{
  min-height:0 !important;
  height:460px;
  max-height:70vh;
}

.messages{
  min-height:0 !important;
  flex:1 1 auto;
  overflow:auto;
}

.composer{
  flex:0 0 auto;
}

@media(max-width:520px){
  .chat-panel{
    height:430px;
    max-height:68vh;
  }

  .idle-classroom{
    min-height:190px !important;
  }
}


/* 0.3.3 — recoverable end polish */
.secondary-danger{
  opacity:.9;
}

/* 0.3.5 compact embed + student pop-out */
html,body{min-height:0!important;height:auto!important}
body{overflow-x:hidden}
.chat-shell,#classroomApp{min-height:0!important;height:auto!important}
.chat-header{min-height:46px!important;padding-top:6px!important;padding-bottom:6px!important}
.header-actions{display:flex;gap:6px;align-items:center}
#popoutButton{white-space:nowrap}
.idle-classroom{min-height:135px!important;padding:10px 14px!important}
.idle-classroom h1{margin:2px 0 4px!important}
.idle-classroom p{line-height:1.25!important}
.compact-join{padding:8px 12px!important}
.compact-join h1{margin:0 0 2px!important;line-height:1.1!important}
.compact-join .join-help{margin:0 0 5px!important;line-height:1.15!important}
.compact-join label{display:block;margin:3px 0 2px!important}
.compact-join .session-code-input{min-height:34px!important;padding:6px 8px!important;margin:0 0 4px!important}
.compact-join .join-row{gap:6px!important}
.compact-join .join-row input,.compact-join .join-row button{min-height:34px!important;padding-top:6px!important;padding-bottom:6px!important}
.name-notice{margin:4px 0 0!important}
.chat-panel{height:360px!important;max-height:360px!important;min-height:280px!important;overflow:hidden!important}
.messages{min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain}
.composer{position:relative!important;flex:0 0 auto!important}
@media (min-height:600px){.chat-panel{height:calc(100vh - 48px)!important;max-height:none!important}}
@media(max-width:520px){
 .chat-header{min-height:42px!important}
 #popoutButton{font-size:.72rem;padding-left:7px!important;padding-right:7px!important}
 .idle-classroom{min-height:125px!important}
 .chat-panel{height:340px!important;max-height:340px!important;min-height:260px!important}
 @media (min-height:600px){.chat-panel{height:calc(100vh - 44px)!important;max-height:none!important}}
}


/* 0.3.6 — predictable embed footprint */
#classroomApp .chat-panel{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  height:330px !important;
  min-height:330px !important;
  max-height:330px !important;
  overflow:hidden !important;
}

#classroomApp .session-banner{grid-row:1}
#classroomApp .messages{
  grid-row:2;
  min-height:0 !important;
  overflow-y:auto !important;
}
#classroomApp .composer{
  grid-row:3;
  position:relative !important;
  inset:auto !important;
  flex:none !important;
  width:100%;
  z-index:2;
  background:var(--panel);
}

@media (min-height:600px){
  html:not(.popout-mode) #classroomApp .chat-panel{
    height:330px !important;
    min-height:330px !important;
    max-height:330px !important;
  }
}

@media(max-width:520px){
  #classroomApp .chat-panel{
    height:310px !important;
    min-height:310px !important;
    max-height:310px !important;
  }

  @media (min-height:600px){
    html:not(.popout-mode) #classroomApp .chat-panel{
      height:310px !important;
      min-height:310px !important;
      max-height:310px !important;
    }
  }
}

html.popout-mode,
html.popout-mode body{
  height:100% !important;
  min-height:100% !important;
  overflow:hidden !important;
}

html.popout-mode .chat-shell,
html.popout-mode #classroomApp{
  height:100dvh !important;
  min-height:0 !important;
  display:flex;
  flex-direction:column;
}

html.popout-mode #classroomApp .chat-header{
  flex:0 0 auto;
}

html.popout-mode #classroomApp .chat-panel{
  flex:1 1 auto;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
}

html.popout-mode #classroomApp .idle-classroom,
html.popout-mode #classroomApp .join-panel{
  flex:1 1 auto;
  min-height:0 !important;
  overflow:auto;
}


/* 0.3.7 — iframe-aware sizing
   Never let the chat exceed the actual iframe viewport. */
html:not(.popout-mode),
html:not(.popout-mode) body{
  max-height:100dvh !important;
  overflow:hidden !important;
}

html:not(.popout-mode) .chat-shell,
html:not(.popout-mode) #classroomApp{
  max-height:100dvh !important;
  min-height:0 !important;
  overflow:hidden !important;
}

html:not(.popout-mode) #classroomApp{
  display:flex;
  flex-direction:column;
}

html:not(.popout-mode) #classroomApp .chat-header{
  flex:0 0 auto;
}

html:not(.popout-mode) #classroomApp .chat-panel{
  flex:0 1 auto;
  height:min(330px, calc(100dvh - 46px)) !important;
  min-height:0 !important;
  max-height:min(330px, calc(100dvh - 46px)) !important;
  overflow:hidden !important;
}

html:not(.popout-mode) #classroomApp .messages{
  min-height:0 !important;
  overflow-y:auto !important;
  scrollbar-gutter:stable;
}

/* Join/idle states scroll internally if an instructor makes the iframe absurdly short. */
html:not(.popout-mode) #classroomApp .join-panel,
html:not(.popout-mode) #classroomApp .idle-classroom,
html:not(.popout-mode) #classroomApp .rename-panel{
  max-height:calc(100dvh - 46px) !important;
  overflow-y:auto !important;
}

@media(max-width:520px){
  html:not(.popout-mode) #classroomApp .chat-panel{
    height:min(310px, calc(100dvh - 42px)) !important;
    max-height:min(310px, calc(100dvh - 42px)) !important;
  }

  html:not(.popout-mode) #classroomApp .join-panel,
  html:not(.popout-mode) #classroomApp .idle-classroom,
  html:not(.popout-mode) #classroomApp .rename-panel{
    max-height:calc(100dvh - 42px) !important;
  }
}


/* 0.3.8 — simplified iframe-first layout
   The iframe owns the height. G-Chat fills it. Only messages scroll. */

html,
body{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.chat-shell{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  overflow:hidden !important;
}

#classroomApp{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#classroomApp .chat-header{
  flex:0 0 auto !important;
  min-height:0 !important;
}

#classroomApp .chat-panel{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

#classroomApp .session-banner{
  flex:0 0 auto !important;
}

#classroomApp .messages{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
}

#classroomApp .composer{
  flex:0 0 auto !important;
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  min-height:0 !important;
  max-height:none !important;
}

/* Non-chat states fill the available iframe and scroll only if truly necessary. */
#classroomApp .idle-classroom,
#classroomApp .join-panel,
#classroomApp .rename-panel{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Pop-out uses the exact same structure, just with the browser window as the viewport. */
html.popout-mode,
html.popout-mode body,
html.popout-mode .chat-shell,
html.popout-mode #classroomApp{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
}

/* Kill all prior fixed/live-height sizing in narrow layouts too. */
@media(max-width:520px){
  #classroomApp .chat-panel{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }

  #classroomApp .idle-classroom,
  #classroomApp .join-panel,
  #classroomApp .rename-panel{
    min-height:0 !important;
    max-height:none !important;
  }
}

@media(min-height:600px){
  #classroomApp .chat-panel{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
}

/* 0.3.9 classroom signals */
.signal-button{border:1px solid var(--line);border-radius:8px;background:#171717;color:var(--text);min-width:32px;min-height:30px;padding:4px 6px;cursor:pointer;line-height:1;font-size:.95rem}
.signal-button.active{background:#3b3214;border-color:#8b7528}
.tech-signal.active{background:#4a1f1f;border-color:#a84a4a}
.signal-dashboard{border:1px solid var(--line);border-radius:10px;padding:9px;background:#131313}
.signal-summary{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.toggle-row{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}
.compact-join{padding:5px 9px!important}
.compact-join h1{font-size:.92rem!important;margin:0 0 1px!important}
.compact-join .join-help{font-size:.69rem!important;margin:0 0 2px!important}
.compact-join label{font-size:.66rem!important;margin:1px 0!important}
.compact-join .session-code-input{height:28px!important;min-height:28px!important;margin:0 0 2px!important;padding:3px 6px!important}
.compact-join .join-row input,.compact-join .join-row button{height:28px!important;min-height:28px!important;padding:3px 6px!important}
@media(max-width:520px){.header-actions{gap:3px!important}.signal-button{min-width:28px;min-height:26px;padding:3px 4px;font-size:.85rem}}


/* 0.4.0 — state visibility + compact join + popout identity handoff */

/* Previous display:flex !important rules accidentally overrode [hidden].
   Hidden state is authoritative everywhere. */
[hidden]{
  display:none !important;
}

/* The essential join controls stay above the fold in a very small iframe. */
.compact-join{
  flex:0 0 auto !important;
  padding:5px 7px !important;
  overflow:visible !important;
}

.join-session-label{
  margin:0 0 4px;
  font-size:.72rem;
  line-height:1.1;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.quick-join-row{
  display:grid;
  grid-template-columns:minmax(58px,72px) minmax(90px,1fr) auto;
  gap:5px;
  align-items:center;
}

.quick-join-row .session-code-input,
.quick-join-row #displayName,
.quick-join-row button{
  width:100% !important;
  height:32px !important;
  min-height:32px !important;
  margin:0 !important;
  padding:5px 7px !important;
  box-sizing:border-box;
}

.quick-join-row .session-code-input{
  letter-spacing:.08em;
}

.quick-join-row button{
  width:auto !important;
  min-width:50px;
  white-space:nowrap;
}

.compact-join .name-notice{
  margin:4px 0 0 !important;
  font-size:.69rem !important;
  line-height:1.15 !important;
}

/* Idle/paused/ended never leak the composer/chat underneath. */
#idleClassroomPanel:not([hidden]) ~ #chatPanel,
#joinPanel:not([hidden]) ~ #chatPanel{
  display:none !important;
}

@media(max-width:360px){
  .quick-join-row{
    grid-template-columns:62px minmax(72px,1fr) 48px;
    gap:3px;
  }

  .quick-join-row .session-code-input,
  .quick-join-row #displayName,
  .quick-join-row button{
    height:30px !important;
    min-height:30px !important;
    padding:4px 5px !important;
    font-size:.78rem !important;
  }
}


/* 0.4.0d — surgical view separation + instructor classroom.
   No iframe sizing or centering changes in this patch. */
#createPanel[hidden],
#hostApp[hidden],
#classroomApp[hidden],
#idleClassroomPanel[hidden],
#joinPanel[hidden],
#chatPanel[hidden],
#renamePanel[hidden],
#instructorMonitor[hidden],
#monitorDetail[hidden]{
  display:none !important;
}

.instructor-monitor{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:auto;
  white-space:nowrap;
}
.monitor-live{font-size:.66rem;font-weight:800;letter-spacing:.04em}
.monitor-chip{
  border:1px solid var(--line);
  border-radius:7px;
  background:#171717;
  color:var(--text);
  min-height:28px;
  padding:3px 6px;
  font-size:.74rem;
  cursor:pointer;
}
.monitor-chip.attention{background:#3b3214;border-color:#8b7528}
.monitor-chip.alarm{background:#4a1f1f;border-color:#a84a4a}
.monitor-detail{
  padding:5px 9px;
  border-bottom:1px solid var(--line);
  background:#111;
  font-size:.72rem;
  line-height:1.2;
}
@media(max-width:620px){
  .instructor-monitor{width:100%;margin-left:0;justify-content:flex-start}
  .monitor-chip{min-height:25px;padding:2px 5px;font-size:.69rem}
}


/* 0.4.0f — presentation-only polish. No session/WebSocket/layout-height changes. */

.instructor-view-badge{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:2px 6px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.07em;
  line-height:1.2;
  color:var(--muted);
}

/* Conservative horizontal centering only.
   Width/height/flex behavior is intentionally unchanged. */
#createPanel,
#hostApp,
#classroomApp{
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:620px){
  .instructor-view-badge{
    margin-left:4px;
    padding:2px 5px;
    font-size:.52rem;
  }
}