.lesson-layout--companion { grid-template-columns: minmax(0, 1fr); }
/* --nova-display-size lives on the root so the launcher and the gutter it reserves read one
   value. The launcher publishes --nova-size when the student resizes it. */
:root { --nova-display-size: min(var(--nova-size, 80px), 24dvh); --nova-gutter: calc(var(--nova-display-size) + 56px); }
/* The launcher is fixed to the bottom-right corner, so whatever sits at the end of the reading
   column would end up underneath it. Reserve a gutter: room to its right, so the column never
   runs under the mascot at any scroll depth. */
html:has(.nova-companion) { --nova-content-gutter: var(--nova-gutter); }
.app-main:has(.nova-companion), body:has(> .nova-companion) .app-main { padding-bottom: var(--nova-gutter); }
body:has(.nova-companion) .lesson-toolbar { padding-right: var(--nova-content-gutter); }
body:has(.nova-companion) .lesson-content { margin-right: var(--nova-content-gutter); }
/* The width of the gutter while the panel is open is decided by the controller, which measures
   where the panel actually landed. It publishes --nova-content-gutter, and either widens it to
   clear the panel or drops it to zero and makes the content behind the panel inert. */
.nova-companion { --nova-size: 80px; position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 40; color: var(--ink); }
.nova-companion-trigger { display: flex; flex-direction: column; align-items: center; cursor: pointer; list-style: none; border-radius: 16px; }
.nova-companion-trigger::-webkit-details-marker { display: none; }
.nova-companion-trigger > img { width: var(--nova-display-size); height: var(--nova-display-size); }
.nova-companion-trigger:active { transform: scale(.97); }
/* Bounded to the viewport on both axes and scrollable inside, so an open panel cannot grow over
   the lesson text or the primary controls above it. */
.nova-companion-panel { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: calc(var(--nova-display-size) + max(24px, env(safe-area-inset-bottom)) + 16px); display: flex; flex-direction: column; width: min(380px, calc(100vw - 48px)); max-height: calc(100dvh - var(--nova-display-size) - 72px - max(24px, env(safe-area-inset-bottom))); border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 6px 8px rgba(16, 26, 53, .14); }
.nova-companion-panel::after { content: ""; position: absolute; right: 32px; bottom: -7px; width: 12px; height: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; transform: rotate(45deg); }
.nova-companion-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); }
.nova-companion-panel h2 { font-size: 1.2rem; letter-spacing: -.04em; }
.nova-companion-panel p, .nova-companion-panel label { font-size: .85rem; line-height: 1.6; }
.nova-companion-panel header p { color: var(--muted); margin-top: 4px; }
.nova-companion-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--sidebar-background); color: var(--ink); cursor: pointer; font-size: 1.5rem; }
.nova-companion-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; }
.nova-companion-content > .button { margin-top: 16px; }
.nova-lesson-context summary { padding-block: 8px; cursor: pointer; font-size: .8rem; color: var(--muted); }
.nova-lesson-context label { display: block; margin-block: 8px 4px; }
.nova-companion-panel > footer { display: flex; align-items: center; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--line); }
.nova-companion-panel footer label { white-space: nowrap; }
.nova-companion-panel input[type="range"] { width: 100%; min-height: 28px; padding: 0; accent-color: var(--primary); }
@media (max-width: 600px) {
  .nova-companion { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  /* On a phone the gutter would eat the reading column, so keep the horizontal reservation and
     give up the top edge instead: the panel stops short of the lesson toolbar. */
  :root { --nova-gutter: calc(var(--nova-display-size) + 32px); }
  .nova-companion-panel { right: max(16px, env(safe-area-inset-right)); width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - var(--nova-display-size) - 96px - env(safe-area-inset-bottom)); }
}
@media print { .nova-companion { display: none !important; } }

.nova-companion-panel > footer details { width: 100%; }
.nova-companion-panel > footer summary { cursor: pointer; font-size: .75rem; color: var(--muted); }
.nova-companion-panel footer label { display: none; }
.nova-selected-passage { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--lesson-blue); background: var(--lesson-mist); font-size: .85rem; line-height: 1.6; max-height: 9rem; overflow-y: auto; white-space: pre-wrap; }
.nova-companion-content textarea { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; }