.teacher-timetable{max-width:none;margin:0 0 40px;padding:28px;background:#132934;border:1px solid #d0b57b65;border-radius:12px;text-align:left;color:#f6eddc;font:14px/1.5 system-ui}.teacher-timetable header{display:flex;justify-content:space-between;align-items:center;gap:16px}.teacher-timetable h2{font:36px Georgia,serif;margin:4px 0}.timetable-kicker{font:11px system-ui;letter-spacing:.16em;color:#e5c78a;margin:0}.teacher-timetable nav{display:flex;gap:8px;flex-wrap:wrap}.teacher-timetable button{font:13px system-ui;padding:9px 12px;min-height:38px;border-radius:5px}.timetable-note{color:#c2cccd;margin:14px 0 22px}.timetable-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;border:1px solid #d5c7ab;background:#d5c7ab;border-radius:8px;overflow:hidden}.week-day{margin:0;max-width:none;min-height:370px;background:#f4efe5;text-align:left;color:#173342;padding:8px}.week-day h3{font:600 13px system-ui;margin:4px 0 18px;min-height:30px}.week-day.today{background:#fff8df}.week-class{display:flex;flex-direction:column;gap:5px;width:100%;margin:0 0 10px;text-align:left;background:#d5e5e5!important;border:0!important;color:#173342!important;overflow-wrap:anywhere}.week-class strong{font-size:14px}.week-class small{font-size:10px}.week-class.tone-1{background:#e5ddf0!important}.week-class.tone-2{background:#f1dbcf!important}.week-class.tone-3{background:#dce7c9!important}.week-class:hover{outline:2px solid #92743c;outline-offset:-2px}.day-empty{font:12px system-ui;color:#7d8583;margin:20px 0}.week-details{padding:20px;background:#f4efe5;color:#173342;border-radius:8px;min-width:0}.week-details .timetable-kicker{color:#7a6339}.week-details h3{font:28px Georgia;margin:15px 0}.week-details a{display:block;text-decoration:none;background:#153746;color:#fff0d7;padding:12px;margin-top:12px;border-radius:4px;font:600 13px system-ui}.week-details a:first-of-type{background:#ac8743;color:#fff}.timetable-students{margin-top:20px}.timetable-students a{color:#f0d399;padding:7px 10px;text-decoration:none;border:1px solid #d0b57b50;border-radius:4px}.class-scheduler progress{width:100%;height:12px;accent-color:#d6b46d}.lesson-steps{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0 26px}.lesson-steps span{min-width:36px;height:38px;padding:7px;text-align:center;border:1px solid #bfac8560;border-radius:5px;color:#c7cbd0;font:14px system-ui}.lesson-steps .finished{background:#24505c;color:#e8eedb}.lesson-steps .next{background:#e5c789;color:#132934;border:2px solid #fff0ce}.class-scheduler details{margin:22px 0}.class-scheduler summary{cursor:pointer;color:#e5c789}.class-scheduler>p:first-child{font:11px system-ui;letter-spacing:.16em;color:#e5c789}.class-scheduler h2{font-size:32px}.class-scheduler article{background:#1c3039;padding:16px;margin:12px 0;border-radius:5px}.class-scheduler{scroll-margin-top:20px}#schedule-class{scroll-margin-top:20px}@media(max-width:1100px){.timetable-layout{grid-template-columns:1fr}.week-details{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.week-details p,.week-details h3{margin:4px}.week-details a{margin:0}.week-grid{overflow-x:auto;grid-template-columns:repeat(7,minmax(125px,1fr))}}@media(max-width:650px){.teacher-timetable{padding:16px}.teacher-timetable header{display:block}.teacher-timetable h2{font-size:28px;margin-bottom:16px}.week-day{min-height:270px}.week-details{display:block}.week-details a{margin-top:10px}}
.profile-ready:not(.roster-page) #student-world{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:0 32px;max-width:none!important;padding-left:0!important}.profile-ready:not(.roster-page) .profile-page{max-width:1320px!important}.profile-ready:not(.roster-page) #profile-picture-area{position:static!important;grid-column:1;grid-row:1;margin:0 0 22px!important}.profile-ready:not(.roster-page) #profile-chat{grid-column:2;grid-row:1 / span 7;align-self:start;position:sticky;top:24px;margin:0!important;width:100%;box-sizing:border-box;text-align:left}.profile-ready:not(.roster-page) #student-world>*:not(#profile-chat){grid-column:1}.profile-ready:not(.roster-page) .class-scheduler{max-width:none}.profile-ready:not(.roster-page) #schedule-heading{margin-top:0}.profile-ready:not(.roster-page) #profile-chat form{display:block}.profile-ready:not(.roster-page) #profile-chat textarea{width:100%;box-sizing:border-box}.profile-ready:not(.roster-page) #profile-chat form button{width:100%;margin-top:10px}.profile-ready:not(.roster-page) #chat-messages{min-height:220px;max-height:390px}@media(max-width:850px){.profile-ready:not(.roster-page) #student-world{display:flex;flex-direction:column}.profile-ready:not(.roster-page) #profile-picture-area{order:0}.profile-ready:not(.roster-page) #profile-chat{position:static;order:1;margin:0 0 28px!important}.profile-ready:not(.roster-page) #student-world>*:not(#profile-picture-area):not(#profile-chat){order:2}}
.profile-ready:not(.roster-page) #student-world>#lesson-journey{grid-column:1 / -1;grid-row:8;margin-top:32px;width:100%;box-sizing:border-box}.profile-ready:not(.roster-page) #student-world>#profile-chat{position:static}.profile-ready:not(.roster-page) #student-world>#all-students{grid-row:9}.profile-ready:not(.roster-page) #student-world>#forget-device{grid-row:10}@media(max-width:850px){.profile-ready:not(.roster-page) #student-world>#lesson-journey{order:3;margin-top:24px}.profile-ready:not(.roster-page) #student-world>#all-students,.profile-ready:not(.roster-page) #student-world>#forget-device{order:4}}
body.next-classes-profile .profile-page{max-width:760px!important;margin-top:32px}body.next-classes-profile #student-world{display:flex!important;flex-direction:column;gap:0}body.next-classes-profile #greeting{font-size:44px;margin-bottom:26px}body.next-classes-profile #profile-picture-area{order:0!important;margin-bottom:22px!important}body.next-classes-profile #profile-picture{width:76px;height:76px;float:left;margin-right:18px}body.next-classes-profile #build-character{font-size:13px;min-height:36px;padding:8px 12px}body.next-classes-profile #next-classes{order:1!important;max-width:none;margin:0;width:100%;text-align:left;background:#f7f1e5;color:#17303c;border:1px solid #d4b87b;border-radius:10px;padding:20px;box-sizing:border-box}body.next-classes-profile #next-classes h2{color:#17303c;margin:0 0 16px;font:30px Georgia,serif}.next-class-list{max-height:590px;overflow-y:auto;scrollbar-gutter:stable;padding-right:8px}.next-class-card{padding:18px;margin-bottom:12px;background:#fffaf0;border:1px solid #ded6c5;border-radius:8px;font:17px/1.5 system-ui}.next-class-card h3{font:700 19px system-ui;margin:0 0 8px}.next-class-card>span{color:#277749;font:600 13px system-ui}.next-class-card p{margin:7px 0 0}.next-class-card small{display:block;font:14px/1.5 system-ui;color:#586269}.next-class-card button,.next-class-join{display:block;width:100%;box-sizing:border-box;text-align:center;border:0;border-radius:6px;padding:12px;margin:13px 0 7px;font:700 17px system-ui;text-decoration:none}.next-class-join{background:#26864a;color:white}.next-class-card button:disabled{background:#e0e3e6;color:#53606b;opacity:1;cursor:default}body.next-classes-profile #profile-chat{order:2!important;position:static!important;margin:18px 0!important;max-width:none;width:100%}body.next-classes-profile #schedule-heading,body.next-classes-profile #schedule,body.next-classes-profile #go-class,body.next-classes-profile #class-closed{display:none!important}body.next-classes-profile #lesson-journey{display:none!important}body.next-classes-profile #lesson-journey.teacher-schedule-controls{display:block!important;order:3!important;margin-top:12px}body.next-classes-profile #lesson-journey>h2,body.next-classes-profile #lesson-journey>progress,body.next-classes-profile #lesson-journey>.lesson-steps,body.next-classes-profile #lesson-journey>p:first-child{display:none}body.next-classes-profile #all-students,body.next-classes-profile #forget-device{order:4!important}@media(max-width:550px){body.next-classes-profile #greeting{font-size:32px}body.next-classes-profile #next-classes{padding:14px}.next-class-card{padding:14px}.next-class-card h3{font-size:17px}}
body.next-classes-profile.profile-ready:not(.roster-page) .profile-page{width:100%;max-width:520px!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}body.next-classes-profile.profile-ready:not(.roster-page) #student-world{width:100%;max-width:520px!important;margin-left:auto;margin-right:auto}body.next-classes-profile.profile-ready:not(.roster-page) #profile-chat,body.next-classes-profile.profile-ready:not(.roster-page) #next-classes{width:100%;max-width:520px!important;box-sizing:border-box}body.next-classes-profile #greeting{font-size:36px}body.next-classes-profile.profile-ready:not(.roster-page) #chat-messages{min-height:100px;max-height:200px}body.next-classes-profile #profile-chat{padding:18px}body.next-classes-profile .next-class-list{max-height:530px}
body.next-classes-profile.profile-ready:not(.roster-page) .profile-page{margin-left:0!important;margin-right:auto!important;text-align:left}body.next-classes-profile.profile-ready:not(.roster-page) #student-world{margin-left:0;margin-right:auto;text-align:left}body.next-classes-profile #next-classes,body.next-classes-profile #profile-chat{text-align:left}
/* Fedora: character and messages side by side, dated classes below. */
body.next-classes-profile.profile-ready:not(.roster-page) .profile-page{max-width:1040px!important}
body.next-classes-profile.profile-ready:not(.roster-page) #student-world{display:grid!important;grid-template-columns:minmax(240px,0.85fr) minmax(300px,1.15fr);gap:20px;max-width:1040px!important;align-items:start}
body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#profile-picture-area{grid-column:1;grid-row:1;order:0!important;margin:0!important;padding:24px;min-width:0;box-sizing:border-box;background:#14232b;border:1px solid #cbb27d45;border-radius:10px}
body.next-classes-profile #profile-picture-area #greeting{font:32px/1.15 Georgia,serif;margin:0 0 24px;text-align:left}
body.next-classes-profile #profile-picture{float:none;display:block;width:100px;height:100px;margin:0 0 20px}
body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#profile-chat{grid-column:2;grid-row:1;order:0!important;margin:0!important;max-width:none!important;border-radius:10px;min-width:0}
body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#next-classes{grid-column:1 / -1;grid-row:2;max-width:none!important;margin:0!important}
body.next-classes-profile .next-class-card{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:20px}.next-classes-profile .next-class-card h3{grid-column:1}.next-classes-profile .next-class-card>span{grid-column:2;grid-row:1;text-align:right}.next-classes-profile .next-class-card>p,.next-classes-profile .next-class-card>small{grid-column:1}.next-classes-profile .next-class-card>.next-class-join,.next-classes-profile .next-class-card>button{grid-column:2;grid-row:2 / span 2;align-self:center;margin:0}.next-classes-profile .next-class-card>button+small{grid-column:2;text-align:center}
body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#lesson-journey{grid-column:1 / -1;grid-row:3;margin:0!important}
body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#all-students{grid-column:1;grid-row:4}body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#forget-device{grid-column:1;grid-row:5}
@media(max-width:650px){body.next-classes-profile.profile-ready:not(.roster-page) #student-world{grid-template-columns:minmax(0,1fr)}body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#profile-chat{grid-column:1;grid-row:2}body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#next-classes{grid-row:3}body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#lesson-journey{grid-row:4}body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#all-students{grid-row:5}body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#forget-device{grid-row:6}body.next-classes-profile .next-class-card{display:block}.next-classes-profile .next-class-card>button,.next-classes-profile .next-class-card>.next-class-join{margin:12px 0}}
/* Equal-height personal corner and conversation, with room to grow. */
body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#profile-picture-area,
body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#profile-chat{align-self:stretch;min-height:680px}
body.next-classes-profile #profile-picture{width:180px;height:180px;max-width:100%;object-fit:contain;margin-bottom:14px}
body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#profile-chat{display:flex;flex-direction:column}
body.next-classes-profile.profile-ready:not(.roster-page) #chat-messages{flex:1;min-height:360px;max-height:none;height:0;overflow-y:auto}
body.next-classes-profile #profile-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;text-align:left}
body.next-classes-profile #profile-details label{display:flex;flex-direction:column;gap:6px;font:13px/1.4 system-ui;color:#f6eddc;min-width:0}
body.next-classes-profile #profile-details label:first-child,body.next-classes-profile #profile-details label:nth-child(4){grid-column:1 / -1}
body.next-classes-profile #profile-details input,body.next-classes-profile #profile-details textarea{width:100%;box-sizing:border-box;min-width:0;margin:0;padding:9px 10px;border:1px solid #cbb27d55;border-radius:5px;background:#0b171e;color:#f6eddc;font:14px/1.4 system-ui}
body.next-classes-profile #profile-details textarea{resize:vertical;min-height:76px}
body.next-classes-profile #profile-details button{font:600 13px system-ui;padding:10px;min-height:38px;margin:0}
body.next-classes-profile #profile-details [role=status]{align-self:center;font:13px system-ui;color:#edc98c}
@media(max-width:650px){body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#profile-picture-area{min-height:0}body.next-classes-profile.profile-ready:not(.roster-page) #student-world>#profile-chat{min-height:580px}body.next-classes-profile #profile-picture{width:160px;height:160px}}
body.next-classes-profile #next-classes .previous-classes-heading{margin:26px 0 8px;padding-top:24px;border-top:1px solid #ded6c5}
.previous-classes-note{margin:0 0 14px;color:#586269;font:13px system-ui}
.previous-class-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;margin-bottom:12px;background:#eee9df;border:1px solid #ded6c5;border-radius:8px}
.previous-class-card h3{margin:0;font:600 18px/1.4 system-ui}
.previous-class-card span{color:#586269;font:13px system-ui;white-space:nowrap}
/* Keep each speaker beside their side of the profile, regardless of viewer. */
#profile-chat .chat-bubble.from-student{margin-left:0;margin-right:auto}
#profile-chat .chat-bubble.from-kenny{margin-left:auto;margin-right:0}
#upload-profile-photo{font:600 14px system-ui;padding:10px 16px;min-height:44px;margin:0 0 8px}
#photo-editor{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow-y:auto;border:1px solid #cbb27d80;border-radius:14px;padding:24px;background:#14232b;color:#f6eddc;text-align:left}
#photo-editor::backdrop{background:#000b}
#photo-editor h2{font:28px Georgia,serif;margin:0 0 10px}
#photo-editor p{font:14px/1.5 system-ui;margin:8px 0 16px}
#photo-editor .photo-pick{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #edc98c;border-radius:6px;font:600 14px system-ui;cursor:pointer}
#photo-editor .photo-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
#photo-editor canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;margin:20px auto;touch-action:none;cursor:grab;background:#0b141c;outline:2px solid #edc98c}
#photo-editor canvas[hidden]{display:none}
#photo-editor canvas:active{cursor:grabbing}
#photo-editor .photo-zoom{display:flex;align-items:center;gap:14px;font:14px system-ui}
#photo-editor input[type=range]{flex:1;min-width:0;min-height:44px;accent-color:#edc98c;padding:0;margin:0}
#photo-editor .photo-actions{display:flex;gap:12px;justify-content:flex-end}
#photo-editor button{min-height:44px;padding:10px 18px;font:600 14px system-ui;margin:0;border-radius:6px}
#photo-editor [data-cancel]{background:transparent;color:#edc98c;border:1px solid #cbb27d80}
#photo-editor .photo-feedback{min-height:42px}
#photo-editor canvas{width:min(100%,40dvh);max-width:360px}
#profile-invitation{grid-column:1 / -1;background:#e5f0e9;color:#173342;border:2px solid #39805a;border-radius:8px;padding:20px;margin:0 0 24px;text-align:left}
#profile-invitation h2{color:#173342!important;margin:0 0 10px!important;font:26px Georgia,serif}
#profile-invitation p{font:16px/1.5 system-ui}
#profile-invitation .next-class-join{display:block;background:#26864a;color:white;text-decoration:none;text-align:center;padding:14px;border-radius:6px;font:700 18px system-ui}
/* Put the invitation immediately beside the student's photo. */
#profile-photo-invite{display:flex;align-items:center;gap:16px;min-width:0;margin-bottom:14px}
body.next-classes-profile #profile-photo-invite #profile-picture{width:clamp(100px,13vw,180px);height:auto;aspect-ratio:1;flex-shrink:0;margin:0;float:none}
#profile-photo-invite #profile-invitation{flex:1;min-width:0;margin:0;padding:12px;box-sizing:border-box}
#profile-photo-invite #profile-invitation h2{font:700 18px/1.25 system-ui!important;margin:0 0 10px!important}
#profile-photo-invite #profile-invitation p{display:none}
#profile-photo-invite #profile-invitation .next-class-join{margin:0;padding:12px 8px;font-size:16px}
#profile-photo-invite{display:grid;grid-template-columns:minmax(100px,45%) minmax(0,1fr);gap:12px 16px}
body.next-classes-profile #profile-photo-invite #profile-picture{grid-column:1;grid-row:1;width:100%;max-width:180px}
#profile-photo-invite #upload-profile-photo{grid-column:1;grid-row:2;justify-self:start;margin:0;max-width:100%}
#profile-photo-invite #profile-invitation{grid-column:2;grid-row:1 / span 2;align-self:center;width:100%}

#upcoming-class-list > [hidden]{display:none!important}

.week-class.selected{outline:4px solid #a96f08!important;outline-offset:-4px;box-shadow:0 0 0 2px #fff4bd,0 6px 16px #0005!important;transform:translateY(-1px)}
.timetable-manage{margin-top:14px;border-top:1px solid #c7b991;padding-top:12px}.timetable-manage summary{cursor:pointer;font-weight:700}.timetable-manage form,.timetable-manage label,#weekly-class-times form{display:grid;gap:7px}.timetable-manage input,#weekly-class-times input,#weekly-class-times select{box-sizing:border-box;width:100%;padding:8px}#weekly-class-times{scroll-margin-top:20px;border:1px solid #cbb27d45;border-radius:8px;padding:16px;margin:20px 0}#weekly-class-times form{grid-template-columns:repeat(3,minmax(110px,1fr)) auto auto;align-items:end;margin:12px 0;padding:12px;background:#172a33;border-radius:6px}#weekly-class-times label{display:grid;gap:5px}@media(max-width:700px){#weekly-class-times form{grid-template-columns:1fr}}
.timetable-manage input,.timetable-manage select{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:9px;background:#fff;color:#173342;border:1px solid #ad8b4c;border-radius:5px;font:16px system-ui}

.week-details>button,.week-details details button{display:inline-block;min-height:44px;margin:6px 6px 6px 0;padding:10px 14px;font:600 14px system-ui;border:1px solid #b6924b;border-radius:8px;background:#ead8b2;color:#173342;cursor:pointer}
.week-details details{margin:10px 0}.week-details summary{min-height:44px;padding:10px 0;font:600 15px system-ui;cursor:pointer}.week-details details input,.week-details details select{display:block;box-sizing:border-box;width:100%;min-height:48px;margin:7px 0;padding:9px;font:17px system-ui;border:1px solid #9bb7b7;border-radius:7px;background:#102630;color:#f9eed8}.week-details details option{background:#102630;color:#f9eed8}.week-details details input[type=date]{color-scheme:dark}
.timetable-awaiting,.timetable-renewal{margin-top:18px;padding:18px;border:1px solid #c2a46e;border-radius:10px;background:#1d3945}.timetable-awaiting h3,.timetable-renewal h3{margin:0 0 10px;font:22px Georgia}.timetable-awaiting a,.timetable-renewal a{display:inline-block;margin:4px 12px 4px 0;padding:10px 14px;border-radius:7px;background:#f4e8cf;color:#173342;text-decoration:none;font:600 14px system-ui}

/* Compact weekly roster: just the student's name, Thai time and lesson. */
body.roster-page .profile-page{margin:8px auto 28px!important;grid-template-columns:1fr}
body.roster-page #greeting{display:none}
.teacher-timetable nav .timetable-go-class{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 12px;margin:0;white-space:nowrap;border-radius:5px;background:#087c80;color:#fff;border:1px solid #8ce6dc;font:600 13px system-ui,sans-serif;text-decoration:none}
.week-class{gap:7px}
.week-class strong:first-child{font-size:14px}
.week-class span{font-size:13px}
.week-class small{font-size:12px;font-weight:650;color:#31515a}
@media(max-width:700px){.teacher-timetable header{gap:12px}.teacher-timetable nav .timetable-go-class{min-height:38px}}

/* Keep taught classes visible in Week at a glance and label them clearly. */
.week-class.is-completed{opacity:.88;outline:1px solid #537d62!important}
.week-class-status,.week-detail-status{display:inline-flex;align-self:flex-start;align-items:center;width:max-content;padding:3px 8px;border-radius:999px;background:#315e47;color:#fff;font:700 10px/1.2 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.week-details .week-detail-status{font-size:11px}