feat: integrate pixel teacher presence and resilient classroom preview

src/pages/Chat/classroom-workspace.css

@@ -13,14 +13,13 @@
 .classroom-workspace .chat-composer-surface { border-color: #dddfd6; border-radius: 17px; box-shadow: 0 2px 8px #29392005; }
 .classroom-workspace [data-testid="coding-conversation-timeline"] { padding-top: 30px; }
 .classroom-work-view [data-testid="agent-browser-panel"] { border: 1px solid #e5e8de; border-radius: 12px; }
-.classroom-consultation-dock { border-color: #e3e7dc; max-width: min(45vw, 520px); }
+.classroom-consultation-dock { border-color: #e3e7dc; max-width: min(55vw, 640px); }
 .classroom-consultation-resizer { position: absolute; inset: 0 auto 0 -4px; width: 8px; z-index: 2; cursor: col-resize; }
 .classroom-consultation-resizer:hover, .classroom-consultation-resizer:focus-visible { background: #82986733; }
 .consultation-pane { background: #fafbf7; color: #434f3a; }
-.consultation-help-start { background: #e7eddc; color: #435836; }
-.consultation-help-start:hover:not(:disabled) { background: #dce6cd; }
-.consultation-help-again, .consultation-guided-help { color: #536747; }
-.consultation-help-again:hover:not(:disabled) { background: #edf2e5; }
+.consultation-help-prompt, .consultation-guided-help { color: #536747; }
+.consultation-help-prompt { background: #f1f5ea; border: 1px solid #dfe7d5; }
+.consultation-help-prompt:hover:not(:disabled) { background: #e6eedc; border-color: #bacba8; }
 .consultation-pane button:focus-visible { outline: 2px solid #71845f; outline-offset: 3px; }
 .consultation-suggestion { border-color: #e0e6d6; color: #718163; }
 .consultation-suggestion:hover { border-color: #bac9aa; background: #f4f7ee; }
@@ -35,7 +34,34 @@
 .consultation-friend .consultation-suggestion { color: #8b7657; }
 .consultation-friend .consultation-suggestion:hover, .consultation-friend .consult-icon:hover { background: #f4eddf; }
 .consultation-friend .consultation-send { background: #8c7858; }
-@media (max-width: 1100px) { .classroom-consultation-dock { max-width: 40vw; } .classroom-tabs { padding: 0 18px; } }
+@media (max-width: 1100px) { .classroom-tabs { padding: 0 18px; } }
 @media (max-width: 900px) { .classroom-consultation-dock { position: absolute; inset: 0 0 0 auto; z-index: 45; max-width: 100%; box-shadow: -12px 0 36px #24311b0d; } .classroom-consultation-resizer { display: none; } }
 @media (max-width: 600px) { .classroom-consultation-dock { width: 100%!important; } .classroom-workspace [data-testid="coding-message-composer"] { width: calc(100% - 24px); } }
 @media (prefers-reduced-motion: reduce) { .classroom-workspace *, .consultation-pane * { scroll-behavior: auto!important; } }
+
+/* The teacher speaks from the title bar without taking the student's focus. */
+.classroom-composer-view[hidden] { display: none; }
+.teacher-companion { position: relative; flex-shrink: 0; }
+.teacher-companion-person { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; border-radius: 8px; color: #747d6c; transition: background 150ms; }
+.teacher-companion-person:hover, .teacher-companion-person[aria-expanded="true"] { background: #eef1e8; color: #42543a; }
+.teacher-companion-avatar { position: relative; flex-shrink: 0; }
+.teacher-companion-person img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
+.teacher-companion-name { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.teacher-companion-unread { position: absolute; top: -2px; right: -3px; width: 7px; height: 7px; border: 1.5px solid white; border-radius: 50%; background: #789560; }
+.teacher-companion button:focus-visible { outline: 2px solid #71845f; outline-offset: 3px; }
+.teacher-companion-presence { position: absolute; top: calc(100% + 12px); right: 0; z-index: 90; display: flex; align-items: flex-start; gap: 8px; width: 288px; max-width: calc(100vw - 48px); }
+.teacher-companion-bubble { position: relative; flex: 1; min-width: 0; padding: 10px 12px 8px; border: 1px solid #e3e7db; border-radius: 12px; background: #fffefa; box-shadow: 0 5px 18px #34483212; }
+.teacher-companion-bubble::after { content: ''; position: absolute; top: 20px; right: -5px; width: 9px; height: 9px; transform: rotate(45deg); border-top: 1px solid #e3e7db; border-right: 1px solid #e3e7db; background: #fffefa; }
+.teacher-companion-bubble-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
+.teacher-companion-invitation-label { flex: 1; min-width: 0; color: #687163; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.teacher-companion-dismiss { display: grid; place-items: center; width: 24px; height: 24px; margin: -4px -5px -4px 0; border-radius: 5px; color: #687163; }
+.teacher-companion-dismiss:hover { background: #f2f5eb; }
+.teacher-companion-message { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.55; color: #27382b; }
+.teacher-companion-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
+.teacher-companion-actions button { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; color: #4d663c; font-size: 12px; font-weight: 500; }
+.teacher-companion-actions button:last-child { color: #79836f; font-weight: 400; }
+.teacher-companion-actions button:hover { text-decoration: underline; text-underline-offset: 4px; }
+.teacher-companion-speaker { flex-shrink: 0; width: 48px; height: 48px; margin-top: 5px; border-radius: 8px; }
+.teacher-companion-speaker img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 1px #33485820); }
+/* Native preview clearance is measured against the bubble, not the whole pane. */
+@media (max-height: 650px) { .teacher-companion-bubble { padding-top: 9px; } .teacher-companion-message { -webkit-line-clamp: 2; } }