/* Phone layouts share the existing account and dialogue state. */
@media(max-width:760px){
  html,body{max-width:100%;overscroll-behavior-y:none}
  body:has(.workspace){height:min(100dvh,var(--mobile-height,100dvh));overflow:hidden;display:flex;flex-direction:column}
  .topbar{height:auto;min-height:74px;flex-shrink:0;padding:9px 12px;gap:8px}
  .brand.team-brand strong{font-size:17px}.brand.team-brand>.brand-team{font-size:10px}
  .top-actions{gap:5px;justify-content:flex-end;flex-wrap:wrap;min-width:0}
  #session-user{display:none}.top-actions .connection{flex-basis:100%;justify-content:flex-end;order:3;font-size:10px}
  .top-actions .button{min-height:36px;font-size:11px;padding:6px 8px;text-decoration:none}
  .workspace{display:flex;flex:1;min-height:0;height:auto;margin:0 8px 8px;border-radius:15px}
  .stage{height:clamp(166px,27dvh,250px);min-height:0;flex-shrink:0}
  .stage-intro,.plant,.avatar-name,.stage-footnote{display:none}
  .avatar-choice{top:9px;left:10px;right:10px;max-width:none;flex-wrap:nowrap;overflow-x:auto;width:max-content;max-width:calc(100% - 20px);padding:3px}
  .avatar-choice button{font-size:10px;padding:7px 9px;min-height:32px;flex-shrink:0}
  .avatar-state{left:12px;bottom:12px;top:auto;right:auto;font-size:10px;padding:7px 9px}
  .camera-tile{left:10px;bottom:45px;width:94px;height:83px;border-radius:10px}
  .camera-tile video,.camera-tile canvas{height:56px}.camera-label{height:27px;padding:0 5px}.camera-label button{min-height:27px;padding:3px;font-size:10px}
  .camera-placeholder{bottom:27px}.camera-placeholder>span,.camera-placeholder small{display:none}.camera-placeholder p{font-size:9px}
  #avatar{inset:20px -4% -16% 15%}
  html[data-avatar=human] #avatar{inset:0}
  #avatar .human-portrait{right:15%;bottom:3%;height:83%;max-height:83%;width:auto;max-width:58%;border-radius:28% 28% 14px 14px}
  .human-disclosure{right:5px;bottom:5px;top:auto;font-size:8px;padding:3px 6px}
  .caption{display:none} /* Full current prompt and transcript remain below the portrait. */
  .conversation{min-height:0;max-height:none;flex:1;overflow:hidden}
  .conversation-heading{margin:0 14px;padding:7px 0;min-height:42px;flex-shrink:0}
  .conversation-heading .eyebrow{display:none}.conversation-heading h2{font-size:15px;margin:0}.conversation-heading .icon-button{height:34px;width:34px}
  #assessment-bar{padding:5px 14px;font-size:10px;flex-shrink:0}
  .conversation .messages{min-height:55px;max-height:none;padding:12px 14px;overscroll-behavior:contain}
  .date-label{margin-bottom:12px}.message{margin-bottom:12px;gap:8px}.message p{font-size:14px;padding:10px 12px;line-height:1.75}.message>div{min-width:0;max-width:90%}
  #assessment-question{flex-shrink:0;padding:8px 14px;max-height:23dvh;overflow-y:auto}
  #assessment-question p{font-size:14px;line-height:1.7;margin:7px 0}.assessment-question-heading button{min-height:36px;padding:7px 10px}
  .assessment-choice{min-height:38px;padding:7px 10px}#assessment-question small{font-size:10px}
  .composer{padding:10px 12px max(10px,env(safe-area-inset-bottom));flex-shrink:0}
  .input-row{padding:5px 7px 5px 12px}.input-row textarea{font-size:16px;min-height:32px;line-height:28px}.send-button{width:42px;height:42px}
  .composer-actions{margin-top:8px;gap:6px}.composer-actions .button{min-height:44px;font-size:12px;padding:9px}
  .composer-note{display:none}.mic-feedback{margin-bottom:8px;font-size:11px}.mic-send{min-height:36px}
  .settings{width:min(370px,100vw);height:var(--mobile-height,100dvh);bottom:auto}.settings-content{padding-bottom:max(30px,env(safe-area-inset-bottom))}.settings select{font-size:16px}
  .keyboard-open .stage{height:85px}.keyboard-open .avatar-choice,.keyboard-open .camera-tile,.keyboard-open .human-disclosure{display:none}
  .keyboard-open #assessment-question{max-height:90px}.keyboard-open .composer-actions{display:none}
  #assessment-panel{max-height:var(--mobile-height,100dvh);padding:18px 12px max(30px,env(safe-area-inset-bottom));overscroll-behavior:contain}
  .assessment-top{gap:8px;flex-wrap:wrap}.assessment-top a{font-size:12px}.assessment-steps{gap:4px;margin-bottom:22px}
  .assessment-title h1{font-size:23px}.assessment-title p{font-size:14px}.assessment-fields input,.assessment-fields select{font-size:16px;min-height:46px}
  .assessment-options{gap:8px}.assessment-options label{flex:1;min-width:100px;min-height:46px}.assessment-options span{font-size:13px}
  .assessment-actions .button{min-height:44px}.assessment-card{overflow-wrap:anywhere}.assessment-table-wrap{max-width:100%}
}
@media(max-width:760px) and (max-height:710px){
  .stage{height:130px}.camera-tile{width:83px;height:61px;bottom:28px}.camera-tile video,.camera-tile canvas{height:34px}.camera-placeholder p{display:none}.avatar-state{font-size:9px;bottom:6px;padding:5px 7px}
  .avatar-choice{top:5px}.avatar-choice button{min-height:28px;padding:5px 8px}
  #assessment-question{max-height:150px}.conversation-heading{min-height:34px;padding:3px 0}
  .conversation .messages{min-height:42px}.composer{padding-top:7px;padding-bottom:max(7px,env(safe-area-inset-bottom))}
}
@media(max-width:700px){
  body:has(.auth),body:has(.student),body:has(.layout){overflow-x:hidden}
  .auth{min-height:0;margin:12px}.auth-body{padding:24px 20px}.auth-intro{padding:20px}.auth input,.auth select,.form-stack input,.form-stack select,.filters input,.filters select{font-size:16px;min-height:46px}
  .student-top{padding:12px 16px;gap:12px}.identity{flex-wrap:wrap}.student{padding:20px 14px max(30px,env(safe-area-inset-bottom))}
  .welcome{padding:23px}.welcome h1{font-size:25px}.task-card{padding:20px}.task-card .actions{flex-wrap:wrap}
  .content,.main,.panel,.table-wrap{min-width:0}.panel{padding:18px}.table-wrap{max-width:100%;overscroll-behavior:contain}
  .nav a,button,.button{min-height:44px}.student-top .button{padding:9px 12px}.filters{gap:10px}
  .dialog-head{padding:18px;gap:10px}.dialog-body{padding:18px}dialog{max-height:calc(100dvh - 24px)}
}