/* One learning workspace: stable controls and a shared canvas in both modes. */
body.learning-workspace-page {
  --workspace-rail-width: 360px;
  --workspace-toolbar-height: 68px;
  --workspace-frame-top: calc(var(--header-height, 64px) + var(--workspace-toolbar-height) + 14px);
  --workspace-frame-height: calc(var(--pniel-visual-viewport-height, 100dvh) - var(--header-height, 64px) - var(--workspace-toolbar-height) - 14px);
}
body.learning-workspace-page .workspace-viewport {
  width: 100%; max-width: none; padding: 14px clamp(12px, 1.2vw, 24px) 0;
}
/* Closed mobile overlays must not extend the document or remain keyboard targets. */
body.learning-workspace-page :is(#mobileDrawerRoadmap, #mobileSheetMaterials):not(.is-open) { display: none; }

body.learning-workspace-page #workspaceGridContainer { transition: none; gap: 16px; }
body.learning-workspace-page #workspaceToolbarHome {
  max-width: none; margin: 0; padding: 11px clamp(12px, 1.2vw, 24px);
}
body.learning-workspace-page #workspaceToolbarControls { max-width: none; min-width: 0; gap: 16px; }
body.learning-workspace-page #workspaceToolbarHome[hidden],
body.learning-workspace-page #pnielAiHeaderToolbar { display: none !important; }
body.learning-workspace-page #workspaceToolbarControls .workspace-course-selector-wrap { min-width: 0; max-width: 420px; }
body.learning-workspace-page #workspaceToolbarControls .workspace-course-btn {
  min-height: 44px; max-width: 100%; padding: 9px 16px; font-size: .96rem;
}
body.learning-workspace-page #workspaceToolbarControls .workspace-course-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: none;
}
body.learning-workspace-page #workspaceToolbarControls .workspace-bar-left-cluster { flex-shrink: 0; }
body.learning-workspace-page #workspaceToolbarControls .workspace-view-btn {
  min-height: 38px; padding: 8px 15px; font-size: .95rem; line-height: 1.25;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.learning-workspace-page #workspaceToolbarControls .workspace-nav-hamburger { width: 44px; height: 44px; font-size: 1.2rem; }
body.learning-workspace-page .workspace-course-dropdown {
  width: min(340px, calc(100vw - 32px)); max-height: min(420px, 55dvh);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-gutter: stable; touch-action: pan-y; background: var(--ws-bg-page) !important;
}
body.learning-workspace-page .workspace-dropdown-empty { margin: 8px; font-size: .84rem; line-height: 1.6; color: var(--ws-text-secondary); }
body.learning-workspace-page #workspaceCourseDropdown .workspace-dropdown-item:is(.is-active, :hover, :focus-visible) { color: var(--ws-text-primary) !important; }

/* Identical left rail width in the two views, including independent collapsed states. */
body.learning-workspace-page #workspaceGridContainer.mode-ai {
  grid-template-columns: minmax(0, 1fr) var(--workspace-rail-width); grid-template-areas: "center roadmap";
}
body.learning-workspace-page #workspaceGridContainer.mode-ai:is(.roadmap-collapsed, .focus-mode) {
  grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "center" !important;
}
body.learning-workspace-page #workspaceGridContainer.mode-content {
  grid-template-columns: 48px minmax(0, 1fr) var(--workspace-rail-width); grid-template-areas: "launcher reader materials";
}
body.learning-workspace-page #workspaceGridContainer.mode-content.materials-collapsed {
  grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "launcher reader";
}
body.learning-workspace-page #workspaceGridContainer.mode-content.ai-teach-open {
  grid-template-columns: clamp(340px, 26vw, 420px) minmax(0, 1fr) var(--workspace-rail-width); grid-template-areas: "tutor reader materials";
}
body.learning-workspace-page #workspaceGridContainer.mode-content.ai-teach-open.materials-collapsed {
  grid-template-columns: clamp(340px, 26vw, 420px) minmax(0, 1fr); grid-template-areas: "tutor reader";
}
body.learning-workspace-page #workspaceGridContainer.mode-ai :is(.slot-center, .slot-tutor, #workspaceTutorSlot, #workspaceOrientationBar) {
  width: 100%; max-width: none; min-width: 0; margin: 0;
}

/* The whole desktop learning canvas uses one height; content scrolls inside its surface. */
@media (min-width: 1025px) {
  body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace {
    height: var(--workspace-frame-height) !important; max-height: var(--workspace-frame-height) !important;
    min-height: 0 !important; overflow: visible !important;
  }
  body.learning-workspace-page #workspaceGridContainer :is(.slot-roadmap, .slot-materials) {
    width: 100%; min-height: 0; height: var(--workspace-frame-height);
    max-height: var(--workspace-frame-height); position: sticky; top: var(--workspace-frame-top); align-self: start;
  }
  body.learning-workspace-page #workspaceGridContainer :is(.roadmap-panel, .materials-panel) {
    height: 100%; max-height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    padding: 18px 16px; box-sizing: border-box;
  }
  body.learning-workspace-page #workspaceGridContainer :is(.roadmap-panel, .materials-panel) > :not(.roadmap-timeline, .materials-task-list) { flex-shrink: 0; }
  body.learning-workspace-page #workspaceGridContainer :is(.roadmap-timeline, .materials-task-list) {
    min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-gutter: stable;
  }
  body.learning-workspace-page #workspaceGridContainer.mode-content.ai-teach-open .slot-tutor {
    height: var(--workspace-frame-height) !important; max-height: var(--workspace-frame-height) !important;
    top: var(--workspace-frame-top) !important; min-height: 0 !important;
  }
  body.learning-workspace-page #workspaceGridContainer.mode-content .slot-reader {
    height: var(--workspace-frame-height); min-height: 0; overflow-y: auto; overscroll-behavior-y: contain;
    scrollbar-width: thin; scrollbar-gutter: stable;
  }
}
body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace > .pniel-ai-header { min-width: 0; }
body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-header-main {
  min-width: 0; width: 100%; flex-direction: column !important; align-items: flex-start !important;
}
body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-header-actions { display: none !important; }
body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-subtitle {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0;
  border: 0 !important; padding: 0 !important;
}
body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-messages {
  max-width: none !important; width: 100% !important; min-height: 0; margin: 0 !important;
  padding: 24px clamp(16px, 2.5vw, 40px) !important;
}
body.learning-workspace-page #workspaceGridContainer.mode-ai .pniel-ai-mode-stream { max-width: none; margin-inline: 0; align-items: stretch; text-align: right; }
body.learning-workspace-page #workspaceGridContainer.mode-ai .pniel-ai-message.tutor { width: 100% !important; max-width: 100% !important; }
body.learning-workspace-page #workspaceGridContainer.mode-ai .pniel-ai-message.user { max-width: min(760px, 80%) !important; }
body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-bottom-area {
  max-width: none !important; margin: 0 !important; padding: 16px clamp(16px, 2.5vw, 40px) 12px !important; border-top: none !important;
}
body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-composer-area {
  width: 100% !important; max-width: 960px !important; margin-inline: auto !important;
}
body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-quick-actions {
  width: 100% !important; max-width: none !important; margin-inline: 0 !important;
}
body.learning-workspace-page #workspaceGridContainer.mode-ai .pniel-ai-form { border-radius: 20px !important; }
@media (min-width: 1025px) and (max-width: 1280px) { body.learning-workspace-page { --workspace-rail-width: 320px; } }
@media (max-width: 768px) {
  body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-messages { padding: 16px 12px !important; }
  body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-bottom-area { padding: 12px !important; }
  body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-header-main { flex-direction: column !important; align-items: flex-start !important; }
  body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace .pniel-ai-subtitle { border: 0 !important; padding: 0 !important; }
}
@media (prefers-reduced-motion: reduce) { body.learning-workspace-page #workspaceToolbarControls .workspace-view-btn { transition: none; } }
html:has(body.learning-workspace-page) { scrollbar-gutter: stable; }
body.learning-workspace-page .workspace-mobile-options-toggle { display:none; }

/* Keep the desktop companion label legible in both color themes. */
@media (min-width:1025px) {
  body.learning-workspace-page #btnOpenAiTeach {
    background: #075985 !important;
    border-color: #0284c7 !important;
    color: #fff !important;
  }
  body.learning-workspace-page #btnOpenAiTeach:hover { background: #0c4a6e !important; }
  body.learning-workspace-page #btnOpenAiTeach .ai-teach-launcher-badge {
    color: #fff !important;
    background: transparent !important;
  }
}

/* Desktop refinements preserve the shared canvas and independent learning rails. */
@media (min-width:1025px) {
  body.learning-workspace-page #workspaceToolbarControls .workspace-bar-left-cluster { margin-inline-end:20px; }
}
body.learning-workspace-page :is(#workspaceGridContainer, #mobileDrawerRoadmap) .tag-developing { display:none; }
/* Phone: one compact course/mode row and a full-height conversation. */
@media (max-width:1024px) {
  body.learning-workspace-page {
    --workspace-frame-top:calc(var(--header-height,64px) + var(--workspace-toolbar-height));
    --workspace-frame-height:calc(var(--pniel-visual-viewport-height,100dvh) - var(--header-height,64px) - var(--workspace-toolbar-height));
  }
  body.learning-workspace-page #workspaceToolbarHome { padding:7px 12px; }
  body.learning-workspace-page #workspaceToolbarHome.mobile-options-ready { padding:0 12px; }
  body.learning-workspace-page #workspaceToolbarHome.mobile-options-ready:not(.mobile-options-open) {
    height:0; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; overflow:visible;
  }
  body.learning-workspace-page #workspaceToolbarHome.mobile-options-ready:not(.mobile-options-open) #workspaceToolbarControls { display:none; }
  body.learning-workspace-page #workspaceToolbarHome.mobile-options-ready.mobile-options-open #workspaceToolbarControls { padding-block:28px 7px; animation:workspace-options-reveal .18s ease-out; }
  body.learning-workspace-page .workspace-mobile-options-toggle {
    position:absolute; left:8px; top:0; z-index:2;
    display:flex; align-items:center; justify-content:center; width:44px; height:26px; padding:0;
    border:0; border-radius:0 0 12px 12px; background:transparent; color:var(--ws-text-secondary); cursor:pointer;
  }
  body.learning-workspace-page .workspace-mobile-options-toggle:hover { background:var(--ws-bg-card-hover); color:var(--ws-accent); }
  body.learning-workspace-page .workspace-mobile-options-toggle:focus-visible { outline:2px solid var(--ws-accent); outline-offset:-2px; }
  body.learning-workspace-page .workspace-options-chevron { width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
  body.learning-workspace-page .mobile-options-open .workspace-options-chevron { transform:translateY(2px) rotate(225deg); }
  @keyframes workspace-options-reveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  @media (prefers-reduced-motion:reduce) { body.learning-workspace-page #workspaceToolbarHome.mobile-options-ready.mobile-options-open #workspaceToolbarControls { animation:none; } }
  body.learning-workspace-page #workspaceToolbarControls { display:flex; flex-wrap:nowrap; gap:8px; }
  body.learning-workspace-page #workspaceToolbarControls .workspace-course-selector-wrap { flex:1; min-width:0; max-width:none; width:auto; }
  body.learning-workspace-page #workspaceToolbarControls .workspace-course-btn { width:100%; min-height:38px; padding:6px 8px; font-size:.82rem; gap:5px; }
  body.learning-workspace-page #workspaceToolbarControls .workspace-course-icon { display:none; }
  body.learning-workspace-page #workspaceToolbarControls .workspace-bar-left-cluster { gap:6px !important; margin:0; }
  body.learning-workspace-page #workspaceToolbarControls .workspace-view-btn { min-height:36px; padding:7px 8px; font-size:.82rem; gap:4px; }
  body.learning-workspace-page #workspaceToolbarControls .workspace-nav-hamburger { width:34px; height:38px; }
  body.learning-workspace-page .workspace-viewport { padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); }
  body.learning-workspace-page .workspace-viewport:has(#workspaceGridContainer.mode-ai) { padding:0; }
  body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace { height:var(--workspace-frame-height) !important; max-height:var(--workspace-frame-height) !important; border-radius:0; border-inline:0; }
  body.learning-workspace-page #workspaceGridContainer.mode-ai #pnielAiWorkspace > .pniel-ai-header { display:none !important; }
  body.learning-workspace-page:not(:has(#workspaceGridContainer.mode-content)) .workspace-mobile-bar { display:none; }
  body.learning-workspace-page #workspaceGridContainer.mode-content .slot-launcher { display:none !important; }
  /* Text entry only in mobile Teach, with a little more room for its conversation. */
  body.learning-workspace-page #workspaceGridContainer.mode-content #pnielAiQuickActions { display:none !important; }
  /* Teach shares the learning area with the reader; the main AI view stays full height. */
  body.learning-workspace-page #workspaceGridContainer.mode-content.ai-teach-open .slot-tutor {
    --workspace-teach-sheet-height:max(0px,calc(var(--workspace-frame-height) * .6667 - 48px));
    bottom:0 !important; padding-bottom:env(safe-area-inset-bottom,0px); box-sizing:border-box;
    height:var(--workspace-teach-sheet-height) !important; max-height:var(--workspace-teach-sheet-height) !important; min-height:0 !important;
  }
  body.learning-workspace-page:has(#workspaceGridContainer.mode-content.ai-teach-open) .workspace-mobile-bar { display:none; }
  body.learning-workspace-page .workspace-viewport:has(#workspaceGridContainer.mode-content.ai-teach-open) { padding-bottom:0; }
  body.learning-workspace-page .workspace-mobile-bar { padding-inline:12px; }
  body.learning-workspace-page:has(#workspaceGridContainer.mode-content:not(.ai-teach-open)) .workspace-mobile-bar { display:flex; }
  body.learning-workspace-page #btnMobileAiTeach {
    width:100%; min-height:40px; padding:0 20px; gap:10px;
    background:linear-gradient(135deg,#1e3a5f 0%,#0f233d 100%); color:#fff;
    border:1px solid rgba(212,175,55,.4); border-radius:9999px;
    font-family:var(--font-body,'Heebo',sans-serif); font-size:.95rem; font-weight:700;
    box-shadow:0 8px 24px -2px rgba(0,0,0,.35),0 0 16px rgba(212,175,55,.25);
    transition:box-shadow .2s ease,border-color .2s ease;
  }
  body.learning-workspace-page #btnMobileAiTeach:hover { border-color:rgba(212,175,55,.7); box-shadow:0 10px 25px -4px rgba(0,0,0,.45),0 0 20px rgba(212,175,55,.4); }
  body.learning-workspace-page #btnMobileAiTeach:focus-visible { outline:3px solid #38bdf8; outline-offset:3px; }
}

/* Keep the page stationary while a learning menu owns the scroll. */
html.workspace-overlay-open { overflow:hidden; overscroll-behavior:none; }
body.learning-workspace-page.workspace-overlay-open {
  position:fixed; top:var(--workspace-overlay-top,0px); left:0; right:0; width:100%; overflow:hidden;
}

/* Mobile learning menus share a bottom sheet and one internal scroll owner. */
@media (max-width:1024px) {
  body.learning-workspace-page #mobileDrawerRoadmap {
    top:auto; bottom:0; left:0; right:0; width:auto; max-width:none;
    border-inline-start:0; border-top:1px solid var(--ws-border); border-radius:20px 20px 0 0;
    padding:16px 20px calc(20px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -10px 35px rgba(0,0,0,.5); transform:translateY(100%);
  }
  body.learning-workspace-page #mobileDrawerRoadmap.is-open { transform:translateY(0); }
  body.learning-workspace-page :is(#mobileDrawerRoadmap,#mobileSheetMaterials).is-open {
    height:min(80dvh,calc(var(--pniel-visual-viewport-height,100dvh) - var(--header-height,64px) - 16px));
    max-height:calc(var(--pniel-visual-viewport-height,100dvh) - var(--header-height,64px) - 16px);
    overflow:hidden;
  }
  body.learning-workspace-page :is(#mobileDrawerRoadmap,#mobileSheetMaterials) :is(.sheet-drag-handle,.drawer-header) { flex-shrink:0; }
  body.learning-workspace-page :is(#mobileDrawerRoadmap,#mobileSheetMaterials) :is(.materials-task-list,.roadmap-timeline) {
    flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
    overscroll-behavior-y:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  body.learning-workspace-page :is(#mobileDrawerRoadmap,#mobileSheetMaterials) :is(.materials-task-item,.roadmap-step) { flex-shrink:0; }
  body.learning-workspace-page :is(#mobileDrawerRoadmap,#mobileSheetMaterials) :is(.materials-task-list,.roadmap-timeline):focus-visible { outline:2px solid var(--ws-accent); outline-offset:-2px; }
}

/* Give workbook paper the mobile width without changing its own layout. */
@media (max-width: 1024px) {
  body.learning-workspace-page .workspace-viewport:has(#workspaceGridContainer.mode-content) { padding-inline: 4px; }
  body.learning-workspace-page #workspaceGridContainer.mode-content .slot-reader { padding: 16px 6px; min-width: 0; box-sizing: border-box; }
  body.learning-workspace-page #workspaceGridContainer.mode-content .reader-header { padding-inline: 6px; }
}