/* The presentation, floating video and conversation share one teaching stage. */
.teaching-studio{grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.teaching-studio .video-panel{background:#fff;border:1px solid #e0e8f2;border-radius:14px;box-shadow:0 8px 30px #254e940b}
.teaching-studio .video-top{height:48px;color:#627591;padding:0 18px}
.teaching-studio .video-top strong{color:#2356a8;font-size:16px}
.teaching-studio .video-top i{background:#d4deeb}
.teaching-studio .video-motto{color:#7b8da5}
.teaching-studio .video-stage{margin:0;border-radius:0;background:#eaf0fc;isolation:isolate}
.teaching-studio #demo-video{object-fit:contain}
.presenter{position:absolute;width:22%;height:58%;right:2%;bottom:10%;z-index:3;isolation:isolate;background:transparent;transition:none;user-select:none;touch-action:none;cursor:grab}
.presenter:focus-within,.presenter:hover,.presenter.is-dragging{outline:1px dashed #6590fa;outline-offset:2px}
.video-stage #presenter-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#presenter-canvas,#presenter-poster{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#presenter-canvas[hidden],#presenter-poster[hidden]{display:none}
.presenter-drag{position:absolute;top:-22px;left:50%;transform:translateX(-50%);height:23px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #d9e6fa;border-radius:5px;background:#fffffff0;color:#5677a9;font-size:10px;cursor:grab;touch-action:none;white-space:nowrap;transition:opacity .15s;opacity:0;padding:0 7px}
.presenter-drag>span{font-size:17px;line-height:1}
.presenter:hover .presenter-drag,.presenter:focus-within .presenter-drag,.presenter.is-dragging .presenter-drag{opacity:1}
.presenter.is-dragging{cursor:grabbing}
.presenter-resize{position:absolute;right:-6px;bottom:-6px;width:23px;height:23px;padding:3px;border:2px solid #fff;border-radius:6px;background:#3975ed;box-shadow:0 2px 8px #153c7220;color:#fff;cursor:nwse-resize;touch-action:none;transition:opacity .15s;opacity:0}
.presenter-resize svg{width:14px;height:14px}
.presenter:hover .presenter-resize,.presenter:focus-within .presenter-resize,.presenter.is-dragging .presenter-resize{opacity:1}
.teaching-studio .video-caption{flex:none;color:#7e8da5;font-size:10px;padding:9px 17px;min-height:41px;gap:8px;align-items:center;background:#fff}
.teaching-studio .video-caption>span{line-height:1.6}
.teaching-studio .video-caption button{white-space:nowrap;color:#6989b3}
.video-caption-actions{display:flex;align-items:center;gap:9px}
.teaching-studio .assistant-panel{height:var(--studio-height,594px);min-height:510px;border:1px solid #e0e8f2;border-radius:14px;box-shadow:0 8px 30px #254e940b;align-self:start}
.assistant-header{display:flex;align-items:center;padding:18px 16px;gap:10px;border-bottom:1px solid #eef2f8;flex-shrink:0}
.assistant-avatar{width:35px;height:35px;display:grid;place-items:center;background:linear-gradient(135deg,#367aef,#86aefa);color:#fff;border:3px solid #eaf1ff;border-radius:11px;font-size:15px;font-weight:600;flex-shrink:0}
.assistant-header h2{font-size:15px;margin:0 0 5px;font-weight:650;letter-spacing:-.2px}
.assistant-header p{font-size:10px;color:#8b99ae;margin:0}
.assistant-mode{font-size:9px;padding:4px 6px;background:#f0f5fc;border:1px solid #e7eef8;color:#7590b2;border-radius:4px;white-space:nowrap;margin-left:auto}
.teaching-studio .conversation{position:static;inset:auto;min-height:0;flex:1;background:#fff;z-index:auto;overflow:hidden}
.teaching-studio .chat-messages{flex:1;padding:17px 15px;gap:14px;scrollbar-width:thin;scrollbar-color:#dbe5f3 transparent}
.teaching-studio .message{flex:0 0 auto;overflow-wrap:anywhere;min-width:0;font-size:12px;padding:12px 13px;max-width:100%;line-height:1.8}
.teaching-studio .message.assistant{background:#f5f8fd;border:1px solid #edf2fb;border-radius:0 12px 12px 12px;color:#4d6484}
.teaching-studio .message.user{max-width:93%;padding:9px 13px}
.welcome-message p{margin:8px 0 0}
.message-eyebrow{font-size:11px;font-weight:600;color:#3b72d6;display:block}
.teaching-studio .chat-action{padding:6px 8px;background:#e8f0ff;white-space:normal;text-align:left;line-height:1.5}
.teaching-studio .assistant-controls{padding:12px 15px 10px;z-index:auto;flex-shrink:0;border-top:1px solid #f3f6fa}
.suggestion-label{font-size:10px;color:#99a7bb;margin-bottom:7px}
.teaching-studio .suggestions{flex-direction:column;gap:6px;margin-bottom:12px}
.teaching-studio .suggestions button{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e4ecf7;border-radius:7px;padding:7px 10px;font-size:11px;color:#687e9c;text-align:left;white-space:normal;line-height:1.4;flex:none}
.teaching-studio .suggestions button:hover{color:#2563eb;background:#f3f7ff;border-color:#c6d8f9}
.teaching-studio .suggestions span{color:#a7bada}
.teaching-studio .chat-input{position:relative;display:block;border:1px solid #d5e2f2;border-radius:10px;background:#fbfdff;overflow:hidden}
.teaching-studio .chat-input:focus-within{border-color:#84a9f1;box-shadow:0 0 0 3px #edf3ff}
.teaching-studio .chat-input textarea{resize:none;border:0;outline:0;background:none;display:block;width:100%;min-height:76px;max-height:120px;padding:12px 46px 12px 12px;font-size:12px;line-height:1.7;color:#254161;box-sizing:border-box}
.teaching-studio .chat-input textarea::placeholder{color:#9baabe}
.teaching-studio .chat-input button{position:absolute;bottom:10px;right:10px;width:30px;height:30px;border-radius:8px}
.teaching-studio .chat-input button svg{width:16px;height:16px}
.chat-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.chat-footer .sound-button{position:static;font-size:10px;background:transparent;border:0;padding:3px 0}
#chat-clear{background:none;border:0;padding:3px;color:#8b9bb1;font-size:10px}
.teaching-studio .demo-hint{text-align:left;font-size:9px;color:#a0adbf;line-height:1.6;padding-top:6px}

/* The quiet first view uses the same portrait; messages appear after a question. */
.teaching-studio .assistant-panel{min-height:490px}
.assistant-idle{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);flex:1;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,#fff,#eff6ff 78%)}
.idle-copy{padding:23px 22px 7px;min-width:0}
.idle-copy>span{font-size:11px;color:#6b91c7;letter-spacing:1px;line-height:1.6}
.idle-copy h2{font-size:24px;line-height:1.35;letter-spacing:-.4px;margin:8px 0 10px;color:#23426c}
.idle-copy p{font-size:12px;color:#829cc1;line-height:1.8;margin:0;overflow-wrap:anywhere}
.idle-portrait{position:relative;min-width:0;min-height:0;margin:0 12px;overflow:hidden}
.idle-portrait img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none}
.teaching-studio .assistant-header,.teaching-studio .conversation{display:none}
.teaching-studio .assistant-panel.is-chatting .assistant-idle{display:none}
.teaching-studio .assistant-panel.is-chatting .assistant-header{display:flex}
.teaching-studio .assistant-panel.is-chatting .conversation{display:flex}
.assistant-back{display:grid;place-items:center;margin-left:auto;border:0;background:#f2f6fd;color:#8a9bb3;width:25px;height:25px;border-radius:6px}
.assistant-back svg{width:14px;height:14px}
.teaching-studio .suggestions{flex-direction:row;gap:6px}
.teaching-studio .suggestions button{flex:1;font-size:10px;padding:8px 7px;justify-content:center}
.teaching-studio .suggestions span{display:none}
.teaching-studio .assistant-controls{padding:12px 15px 9px}
.teaching-studio .chat-input textarea{min-height:66px}
.teaching-studio .demo-hint{text-align:right;padding-top:4px;font-size:9px}
.suggestion-label{display:none}
@media(min-width:1600px){.teaching-studio{grid-template-columns:minmax(0,1fr) 360px}}
@media(max-width:1200px){.teaching-studio{grid-template-columns:minmax(0,1fr) 310px;gap:13px}.teaching-studio .assistant-panel{min-height:470px}.assistant-header{padding:16px 12px;gap:7px}.assistant-header h2{font-size:14px}.idle-copy{padding:21px 19px 6px}.idle-copy h2{font-size:22px}}
@media(max-width:1000px){.teaching-studio{grid-template-columns:minmax(0,1fr) 280px}.teaching-studio .video-panel{justify-content:flex-start}.teaching-studio .video-top{padding:0 12px}.teaching-studio .video-motto{display:none}.teaching-studio .assistant-panel{min-height:440px}.teaching-studio .video-caption{padding:8px 11px}.teaching-studio .video-caption>span{font-size:9px}.assistant-header h2{font-size:13px}.idle-copy h2{font-size:20px}.video-caption-actions{gap:3px}}
@media(max-width:780px){.teaching-studio{grid-template-columns:1fr;gap:16px}.teaching-studio .assistant-panel{height:510px;min-height:0}.teaching-studio .video-motto{display:block}.assistant-header{padding:16px}.assistant-header h2{font-size:15px}.teaching-studio .assistant-controls{padding:12px 16px}.teaching-studio .suggestions button{font-size:11px}.teaching-studio .chat-messages{padding:16px}.presenter-resize{width:28px;height:28px;right:-8px;bottom:-8px}.idle-copy{padding:22px 23px 6px}.idle-copy h2{font-size:24px}}
@media(max-width:440px){.teaching-studio .video-top{height:43px;font-size:10px}.teaching-studio .video-top strong{font-size:14px}.teaching-studio .video-top>span:first-child{gap:8px}.teaching-studio .video-motto{font-size:9px;letter-spacing:0}.presenter-drag{height:23px;font-size:8px;gap:2px}.presenter-drag>span{font-size:15px}.teaching-studio .video-caption{gap:2px;font-size:9px;padding:8px 10px}.teaching-studio .video-caption button{font-size:9px}.teaching-studio .assistant-panel{height:490px}.teaching-studio .suggestions button{padding:7px 8px;font-size:10px}.idle-copy h2{font-size:23px}.idle-copy{padding:20px 22px 6px}}
@media(hover:none){.presenter-resize{opacity:.7}.presenter-drag{opacity:.8}}