/* Loomylingo — conversation room
   Reuses landing.css for tokens/type; this file only adds the room.

   WRITTEN MOBILE-FIRST, ON PURPOSE.
   The phone is the product: this room gets used standing in a kitchen, on the bus,
   with a thumb, on a 4.7" iPhone and on a 6.9" Max, iOS and Android. So the base
   rules below are the SMALL-SCREEN rules, and the media queries only ever add space
   as the viewport grows. Nothing is designed desktop-first and then squeezed.

   The invariants, true at every size:
   - no horizontal scrolling, ever (long names ellipsis, grids never exceed 100%)
   - every tappable thing is at least 44px tall (Apple's floor) and 48px preferred
   - form fields are 16px, because iOS Safari zooms the page if they are smaller
   - the face, the scrollable teacher list, and the call button are all reachable
     without a magnifying glass
   - safe-area insets are respected (notch, Dynamic Island, home indicator, rounded
     corners in landscape)
   - 100dvh, not 100vh, so the collapsing address bar cannot crop the layout
*/

body.room{
  /* room for the pinned call bar, or the last row of faces hides behind it */
  padding-bottom:calc(132px + env(safe-area-inset-bottom));
  min-height:100vh;              /* fallback for old engines */
  min-height:100dvh;             /* the real one: dynamic viewport */
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

/* landing.css gives every <section> 92px of vertical padding for page rhythm. The room
   has no page rhythm — its sections are layout boxes and accordion rows, so that
   padding made each collapsed row 230px tall. Neutralise it here, once. */
body.room section{padding:0}

/* --------------------------------- top bar -------------------------------- */
.room-bar{
  max-width:1180px;margin:0 auto;
  padding:14px max(16px, env(safe-area-inset-left)) 14px max(16px, env(safe-area-inset-right));
  padding-top:max(14px, env(safe-area-inset-top));
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:20;
  background:rgba(7,7,10,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.room-bar .brand{flex:0 0 auto}
.room-meta{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);flex-wrap:nowrap;
  min-width:0;
}
.room-meta #roomTeacher{
  color:var(--text);
  max-width:34vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.room-meta #roomLevel{
  color:var(--muted);
  max-width:30vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dot-sep{opacity:.4;flex:0 0 auto}
.room-clock{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:#cfcabd;
}
.room-clock.live{border-color:rgba(224,189,106,.45);color:var(--gold)}

/* --------------------------------- layout --------------------------------- */
/* ONE column by default. The face comes first, because that is the thing being
   talked to; the teacher list and the settings follow. */
.room-main{
  max-width:1180px;margin:0 auto;
  padding:16px max(14px, env(safe-area-inset-left)) 8px max(14px, env(safe-area-inset-right));
  display:grid;grid-template-columns:1fr;
  gap:16px;align-items:start;
}
.stage-wrap{order:-1}

/* ---------------------------------- stage --------------------------------- */
.stage-wrap{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  position:static;
  min-width:0;
}

.stage-frame.talk{
  position:relative;
  /* 3:4 art must stay 3:4 — so the WIDTH is what gets capped, by viewport height.
     0.75 * 46dvh keeps the face inside roughly the top half of any phone.
     The min() means: never wider than the column, never taller than the budget. */
  width:100%;
  max-width:min(100%, 34.5dvh, 430px);
  aspect-ratio:3/4;
  border-radius:20px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 30px 70px -35px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  isolation:isolate;
  flex:0 0 auto;
}
.stage-frame.talk .stage-img{object-position:50% 8%}
.stage-frame.talk .stage-active{opacity:0}
.stage-frame.talk.speaking .stage-active{opacity:1}
.stage-frame.talk.speaking #teacherIdle{opacity:0}

.stage-top{font-size:11.5px!important;padding:8px 10px!important;gap:6px!important}
.stage-hint{
  margin:0;font-size:12px;color:var(--muted-2);text-align:center;
  padding:0 6px;line-height:1.4;
}

/* caption: sits on the bottom of the face, never over the eyes, never more than
   three short lines on a phone */
.caption{
  position:absolute;left:9px;right:9px;bottom:9px;z-index:4;
  font-size:12.5px;line-height:1.4;color:#efece3;
  padding:8px 10px;border-radius:10px;
  background:rgba(7,7,10,.74);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);
  display:none;
  max-height:5.2em;overflow:hidden;
}
.caption.show{display:block}

/* --------------------------------- setup ---------------------------------- */
.setup{display:flex;flex-direction:column;gap:9px;min-width:0}

/* ----------------------------- teacher shelf ------------------------------ */
/* The teacher accordion is the only one open on load, so its body has to breathe:
   a capped scroll area, never a viewport-tall wall of faces. The cap is in dvh so a
   small phone does not spend its whole screen on faces. */
#accTeacher .acc-body{padding-top:2px}
#accTeacher .teacher-scroll{max-height:min(42dvh, 340px)}

/* ------------------------------- accordion -------------------------------- */
.acc{
  border:1px solid var(--line-soft);border-radius:13px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  transition:border-color .16s;
  min-width:0;
}
.acc.open{border-color:rgba(255,255,255,.14)}
.acc-head{
  width:100%;display:flex;align-items:center;gap:10px;
  min-height:48px;                     /* thumb floor, not 44 — these are often hit */
  padding:12px 14px;
  background:transparent;border:0;cursor:pointer;
  font-family:inherit;text-align:left;color:var(--text);
  touch-action:manipulation;
}
.acc-head:active{background:rgba(255,255,255,.05)}
.acc-title{font-size:13.5px;font-weight:500;letter-spacing:-.005em;flex:0 1 auto;min-width:0}
.acc-value{
  margin-left:auto;font-size:12.5px;color:var(--muted);
  max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;text-align:right;
}
.acc-value.set{color:var(--gold)}
.acc-chev{
  flex:0 0 auto;width:8px;height:8px;margin-left:2px;
  border-right:1.6px solid var(--muted-2);border-bottom:1.6px solid var(--muted-2);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.acc.open .acc-chev{transform:rotate(-135deg) translateY(-1px)}
.acc-body{display:none;padding:2px 14px 14px;flex-direction:column;gap:9px;min-width:0}
.acc.open .acc-body{display:flex}
.mini-title{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);font-weight:500;margin:0 0 5px;
}
.setup-block{display:flex;flex-direction:column;gap:10px}
.setup-title{
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-2);font-weight:500;
}
/* level + language: stacked on a narrow phone, side by side once there is room */
.two-up{display:grid;grid-template-columns:1fr;gap:10px}

/* EVERY teacher is here, not the first few: the shelf scrolls instead of cutting the
   list. A viewport-tall wall of faces would push the controls off the screen, so it
   is capped and scrolls inside itself. */
.teacher-scroll{
  max-height:340px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:4px;border-radius:12px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
.teacher-scroll::-webkit-scrollbar{width:6px}
.teacher-scroll::-webkit-scrollbar-track{background:transparent}
.teacher-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);border-radius:99px;
}
@media (hover:hover){ .teacher-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)} }
.teacher-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.count{color:var(--muted-2);letter-spacing:.05em}

/* ------------------------- form controls (locked) ------------------------- */
/* LOCKED RULE: every <select> is centered, always, no matter what. */
select.field{ text-align:center }
select.field option{ text-align:center }

.field{
  width:100%;min-height:48px;                 /* thumb, and no iOS zoom */
  padding:12px 14px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--text);font-family:inherit;
  font-size:16px;                             /* below 16px iOS zooms on focus */
  -webkit-appearance:none;appearance:none;
  outline:none;transition:border-color .16s, background .16s;
}
.field:focus{border-color:rgba(224,189,106,.55);background:rgba(224,189,106,.06)}
.field:disabled{opacity:.5;cursor:not-allowed}
.field:disabled:hover{border-color:var(--line)}
input.field::placeholder{color:var(--muted-2)}
select.field{
  /* the arrow has to be drawn, appearance:none removed the native one */
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
  text-overflow:ellipsis;
}
.field-note{margin:0;font-size:12px;color:var(--muted-2);line-height:1.4}

/* ---------------------------- connect control ----------------------------- */
/* Loomis's rule: ONE big button at the very BOTTOM of the surface, full width,
   red when disconnected, green when connected. Nothing else connects.

   On a phone it is STICKY to the bottom of the viewport: the settings can be long,
   and the button must never be a scroll-hunt away. It floats above a blur so text
   passing underneath stays readable. */
.connect-wrap{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  margin-top:4px;
  padding:10px max(14px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
  background:linear-gradient(180deg, rgba(7,7,10,0) 0%, rgba(7,7,10,.88) 34%, rgba(7,7,10,.98) 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:8px;
  max-width:1180px;margin:0 auto;
}
.connect-btn{
  width:100%;min-height:56px;padding:16px 18px;
  border-radius:14px;border:1px solid transparent;
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .14s ease, box-shadow .2s ease, background .2s;
}
.connect-btn:active{transform:scale(.994)}
.connect-btn.is-off{
  background:linear-gradient(180deg,#d94f4f,#b83b3b);color:#fff;
  box-shadow:0 14px 34px -18px rgba(217,79,79,.9);
}
.connect-btn.is-on{
  background:linear-gradient(180deg,#3fbf72,#2c9a58);color:#06210f;
  box-shadow:0 14px 34px -18px rgba(63,191,114,.9);
}
.connect-btn:disabled{opacity:.55;cursor:progress;filter:none}
.connect-note{margin:0;font-size:11.5px;color:var(--muted-2);text-align:center;line-height:1.35}

/* in-call extras: mute */
.call-extras{display:none;gap:9px}
.call-extras.show{display:flex}
.ghost-btn{
  flex:1;min-height:48px;padding:11px 14px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.02);border:1px solid var(--line);color:var(--muted);
  font-family:inherit;font-size:14px;transition:.16s;
  touch-action:manipulation;
}
.ghost-btn:active{background:rgba(255,255,255,.06)}
.ghost-btn.is-muted{background:rgba(217,79,79,.14);border-color:rgba(217,79,79,.5);color:#ffb3b3}

/* hover-only affordances: a phone has no hover, so they must never be the only cue */
@media (hover:hover){
  .acc-head:hover{background:rgba(255,255,255,.025)}
  .field:hover{border-color:rgba(255,255,255,.18)}
  .ghost-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
  .connect-btn.is-off:hover{filter:brightness(1.07)}
  .connect-btn.is-on:hover{filter:brightness(1.05)}
}

/* ═══════════════════════════════ WIDER PHONES ════════════════════════════════ */
/* 390px and up: the common modern phone. A little more air, four faces per row. */
@media (min-width:390px){
  .room-main{padding-top:18px;gap:18px}
  .teacher-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .caption{font-size:13px;left:11px;right:11px;bottom:11px}
}

/* A small tablet or a large phone held sideways: level and language can share a row. */
@media (min-width:480px){
  .two-up{grid-template-columns:1fr 1fr;gap:12px}
  .teacher-strip{grid-template-columns:repeat(5,minmax(0,1fr))}
  .room-meta #roomTeacher{max-width:40vw}
}

/* ═════════════════════════════════ TABLET ═══════════════════════════════════ */
@media (min-width:700px){
  .room-bar{padding:16px 22px}
  .room-main{padding:24px 22px 30px;gap:24px}
  .stage-frame.talk{max-width:min(100%, 40dvh, 430px)}
  .stage-top{font-size:12px!important;padding:10px 13px!important}
  .stage-hint{font-size:12.5px}
  .caption{font-size:13.5px;padding:10px 13px;left:14px;right:14px;bottom:14px}
  .teacher-strip{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  #accTeacher .teacher-scroll{max-height:min(48dvh,392px)}
  .acc-head{padding:13px 15px}
  .acc-body{padding:2px 15px 15px}
  .acc-title{font-size:14px}
  .acc-value{font-size:13px}
}

/* ═══════════════════════════════ TWO COLUMNS ════════════════════════════════ */
/* Room for the face and the settings side by side. The face sticks while the
   settings scroll. */
@media (min-width:980px){
  .room-main{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:42px;padding:34px 26px 60px;
  }
  .stage-wrap{position:sticky;top:88px;order:0}
  .stage-frame.talk{max-width:min(100%, 430px);max-width:none;width:100%}
  .stage-hint{font-size:13px}
  .connect-wrap{position:static;background:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:none}
  .connect-btn{min-height:58px;font-size:16.5px}
  body.room{padding-bottom:0}
  .acc-body{padding:2px 16px 16px}
  .acc-head{padding:14px 16px}
  .teacher-strip{grid-template-columns:repeat(5,minmax(0,1fr))}
  #accTeacher .teacher-scroll{max-height:min(52vh,392px)}
}

/* ═══════════════════════ SHORT SCREENS / LANDSCAPE ══════════════════════════ */
/* A phone on its side (or a very short window) has almost no vertical room. The
   face must shrink, and the two columns come back immediately. */
@media (max-height:560px) and (orientation:landscape){
  .room-bar{padding-top:8px;padding-bottom:8px}
  .room-main{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:18px;padding-top:10px;align-items:start;
  }
  .stage-wrap{position:sticky;top:56px;order:0}
  .stage-frame.talk{width:100%;max-width:min(100%, 58dvh);border-radius:16px}
  .stage-hint{display:none}
  .caption{font-size:12px;max-height:4.4em}
  .connect-btn{min-height:48px;padding:12px 16px}
  .acc-head{min-height:44px;padding:10px 12px}
  .teacher-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  #accTeacher .teacher-scroll{max-height:34vh}
}

/* Very short portrait (old iPhone SE, 320x568): tighten everything, keep the face
   at roughly 40% of the screen and two faces per row. */
@media (max-width:359px){
  .room-main{padding-left:10px;padding-right:10px;gap:12px}
  .stage-frame.talk{max-width:min(100%, 32dvh)}
  .teacher-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .acc-head{padding:11px 12px;gap:8px}
  .acc-value{max-width:44%;font-size:12px}
  .field{padding:11px 12px;font-size:16px}
  .connect-btn{font-size:15px;min-height:52px}
  .room-meta #roomLevel{display:none}          /* the clock and the name matter more */
  .caption{font-size:12px}
}

/* Respect the user's motion preference: the face flip and the chevrons stop moving. */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}