/* A calm classroom notebook: each voice has a soft, readable colour. */
[hidden] { display: none !important; }
.readonly-room-banner { display:flex; flex-wrap:wrap; gap:6px 16px; padding:12px 20px; background:#f1f5e9; border-bottom:1px solid #dbe5ca; color:#35543a; font-size:13px; line-height:1.5; }
.readonly-room-banner strong { white-space:nowrap; }
.action-btn:disabled,#settingsBtn:disabled,#sendBtn:disabled,#voiceBtn:disabled { cursor:not-allowed !important; opacity:.45 !important; }
#messageInput:disabled { background:#f1f3ee; color:#637166; cursor:default; }
.conversation-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid #e0e8e3; background:#fbfdf9; font-size:13px; }
.conversation-tools > span { font-weight:700; color:#28483e; overflow-wrap:anywhere; }
.conversation-tools a { margin-left:auto; color:#246657; text-underline-offset:3px; }
.conversation-tools button { padding:5px 9px; border:1px solid #b4cec2; border-radius:8px; background:#fff; color:#235b4e; cursor:pointer; }
.message:not(.message-ai) .message-text { background:var(--student-pastel,#e5f1e9) !important; color:#23332e !important; border:1px solid rgb(38 58 45 / 8%); }
.message .student-avatar-button { position:relative; overflow:visible; padding:0; border:0; cursor:pointer; background:transparent; flex-shrink:0; }
.message .student-avatar-button img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.message .student-author-button { padding:0; background:none; border:0; font:inherit; font-weight:700; color:inherit; cursor:pointer; text-align:inherit; }
.message.message-own .message-header { display:flex; justify-content:flex-end; }
.student-author-button:hover { text-decoration:underline; text-underline-offset:3px; }
.remaining-badge { position:absolute; z-index:2; top:-11px; left:50%; transform:translateX(-50%); min-width:23px; height:23px; padding:0 5px; display:flex; align-items:center; justify-content:center; border-radius:99px; border:2px solid #fff; background:#234f46; color:#fff; font-size:12px; line-height:1; font-weight:800; box-shadow:0 2px 5px #19352c20; }
.remaining-badge.goal-complete { background:#38765b; }
.participants-list .student-filter-button { width:100%; text-align:left; font:inherit; cursor:pointer; border:1px solid transparent; background:var(--student-pastel,#f3f8f5); margin-top:12px; }
.student-filter-button:hover { border-color:#608678; }
.student-filter-button .participant-avatar { position:relative; overflow:visible; }
.student-filter-button .participant-avatar img { border-radius:50%; }
.student-filter-button .participant-info { min-width:0; }
.student-filter-button .participant-name { overflow-wrap:anywhere; }
.participant-writing-count { font-size:12px; color:#496158; margin-top:5px; }
.participant-filter-hint { font-size:12px; color:#596d63; line-height:1.6; padding:10px 16px; }
.self-participation { margin:0 0 10px; padding:9px 12px; border-left:3px solid #416e5e; background:#eff6eb; border-radius:5px 10px 10px 5px; color:#244e3b; font-size:13px; font-weight:700; }
.self-participation.goal-complete { background:#eaf5f1; }
.teacher-settings { width:min(560px,calc(100vw - 28px)); max-height:85dvh; margin:auto; border:1px solid #c9d9ce; border-radius:22px; padding:28px; background:#fffefb; color:#263c32; box-shadow:0 24px 80px #132d3340; }
.teacher-settings::backdrop { background:#19332d70; backdrop-filter:blur(3px); }
.teacher-settings-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:-28px; z-index:5; margin:-28px -28px 0; padding:20px 28px 8px; background:#fffefb; border-bottom:1px solid #e4e9df; }
.settings-eyebrow { color:#65766a; font-size:12px; letter-spacing:.05em; }
.teacher-settings h2 { font-size:25px; margin:5px 0 12px; }
.teacher-settings-heading button { width:36px; height:36px; border:0; border-radius:50%; background:#edf1e9; font-size:18px; cursor:pointer; }
.settings-help { font-size:13px; line-height:1.65; color:#65746b; margin:8px 0 15px; }
.participation-switch { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; border:1px solid #c8dccb; border-radius:14px; background:#eff5e9; cursor:pointer; }
.participation-switch small { display:block; margin-top:5px; font-size:12px; color:#516447; }
.participation-switch input { appearance:none; -webkit-appearance:none; width:48px; height:28px; min-width:48px; padding:0; border:0; border-radius:99px; background:#98a49a; cursor:pointer; position:relative; transition:background .15s; }
.participation-switch input::after { content:''; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s; }
.participation-switch input:checked { background:#2f6f57; }
.participation-switch input:checked::after { transform:translateX(20px); }
.target-default-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; font-size:14px; font-weight:700; }
.teacher-settings input[type=number] { width:76px; padding:9px; border:1px solid #c8d3c9; border-radius:8px; background:#fff; color:#244336; font:inherit; }
.teacher-settings h3 { margin:23px 0 7px; font-size:16px; }
.teacher-settings h3 span { font-size:12px; color:#748074; font-weight:400; }
.student-target-list { max-height:225px; overflow:auto; margin-bottom:20px; border-block:1px solid #e4e9df; }
.student-target-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 3px; border-bottom:1px solid #edf0e9; }
.student-target-row > span { overflow-wrap:anywhere; min-width:0; font-size:14px; }
.student-target-row small { display:block; font-size:12px; color:#667a6c; margin-top:3px; }
.teacher-password-label { display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
#teacherSettingsPassword { width:100%; padding:12px; border:1px solid #c8d3c9; border-radius:9px; font:inherit; }
#teacherSettingsStatus { font-size:13px; color:#3c5748; min-height:20px; line-height:1.5; margin:10px 0; }
.save-teacher-settings { width:100%; padding:13px; background:#275c49; color:#fff; border:0; border-radius:10px; font:inherit; font-weight:700; cursor:pointer; }
.save-teacher-settings:disabled { opacity:.55; cursor:wait; }
.identity-settings { padding-top:15px; margin-top:18px; border-top:1px solid #e0e7dc; }
.identity-settings p { font-size:12px; line-height:1.6; color:#677669; }
.identity-settings button { margin-top:9px; border:0; background:none; padding:0; color:#386c56; font:inherit; font-size:13px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.teacher-settings :focus-visible,.student-filter-button:focus-visible,.student-avatar-button:focus-visible,.student-author-button:focus-visible { outline:3px solid #5f9078; outline-offset:3px; }
@media (max-width:600px) {
  .conversation-tools { padding:10px 12px; gap:8px; font-size:12px; }
  .conversation-tools a { margin-left:0; }
  .teacher-settings { padding:20px; border-radius:17px; }
  .teacher-settings-heading { top:-20px; margin:-20px -20px 0; padding:16px 20px 8px; }
  .room-header .header-content { gap:8px; }
  .room-header .header-actions { flex-shrink:0; }
  .room-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .self-participation { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .participation-switch input,.participation-switch input::after { transition:none; } }