/* ========================================
   PLATFORM MOCK WINDOW (Course Library Demo)
   ======================================== */
.platform-mock-window {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    margin: 0 auto 8px;
}

/* Title bar */
.pmw-titlebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.pmw-dots { display: flex; gap: 4px; }
.pmw-dots span {
    width: 7px; height: 7px;
    border-radius: 50%; display: block;
}
.pmw-dots span:nth-child(1) { background: #ef4444; }
.pmw-dots span:nth-child(2) { background: #eab308; }
.pmw-dots span:nth-child(3) { background: #22c55e; }
.pmw-url {
    font-size: 9px; color: #9ca3af;
    background: #fff; padding: 2px 10px;
    border-radius: 4px; border: 1px solid #e5e7eb;
    flex: 1; text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Main content area */
.pmw-body {
    display: flex;
    height: 240px;
}

/* Sidebar */
.pmw-sidebar {
    width: 36px;
    background: #111827;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 6px;
    flex-shrink: 0;
}
.pmw-sidebar-logo {
    width: 20px; height: 20px;
    background: linear-gradient(135deg, #10b981, #3b82f6);
    border-radius: 5px;
    margin-bottom: 4px;
}
.pmw-sidebar-icon {
    width: 18px; height: 18px;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
}
.pmw-sidebar-icon.active { background: rgba(255,255,255,0.12); }
.pmw-sidebar-icon svg { width: 12px; height: 12px; }

/* Main panel */
.pmw-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f9fafb;
}

/* Explore header */
.pmw-explore-header {
    padding: 10px 12px 6px;
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.pmw-explore-title {
    font-size: 12px;
    font-weight: 400;
    color: #111827;
    margin-bottom: 6px;
}
.pmw-explore-title span {
    font-weight: 600;
    background: linear-gradient(to right, #10b981, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Search bar */
.pmw-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    margin-bottom: 6px;
}
.pmw-search svg {
    width: 10px; height: 10px;
    color: #9ca3af; flex-shrink: 0;
}
.pmw-search span {
    font-size: 9px; color: #9ca3af;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Filter chips */
.pmw-filters {
    display: flex;
    gap: 4px;
    overflow: hidden;
}
.pmw-chip {
    padding: 2px 6px;
    border-radius: 99px;
    font-size: 8px;
    font-weight: 500;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pmw-chip.active {
    background: #111827;
    color: #fff;
}
.pmw-chip:not(.active) {
    background: #f3f4f6;
    color: #6b7280;
}

/* Scroll container */
.pmw-scroll-container {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.pmw-scroll-container::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(transparent, #f9fafb);
    pointer-events: none;
    z-index: 1;
}

.pmw-scroll-track {
    animation: pmw-autoscroll 18s linear infinite;
}
.platform-mock-window:hover .pmw-scroll-track {
    animation-play-state: paused;
}

@keyframes pmw-autoscroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* Course card grid */
.pmw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
}

/* Individual course card */
.pmw-card {
    background: #fff;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pmw-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Card thumbnail */
.pmw-card-thumb {
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
}
.pmw-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Card body */
.pmw-card-body {
    padding: 4px 5px 5px;
}
.pmw-card-title {
    font-size: 8px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pmw-card-inst {
    font-size: 7px;
    color: #6b7280;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pmw-card-inst-dot {
    width: 7px; height: 7px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Card footer with badges */
.pmw-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding-top: 3px;
    border-top: 1px solid #f3f4f6;
}
.pmw-badge {
    padding: 1px 4px;
    border-radius: 99px;
    font-size: 6.5px;
    font-weight: 600;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Level badges */
.pmw-lvl-hs { background: #dbeafe; color: #1e40af; }
.pmw-lvl-col { background: #f3e8ff; color: #6b21a8; }
.pmw-lvl-pro { background: #d1fae5; color: #065f46; }

/* Subject badges */
.pmw-subj-math { background: #dbeafe; color: #1e40af; }
.pmw-subj-chem { background: #fce7f3; color: #9d174d; }
.pmw-subj-bio { background: #dcfce7; color: #166534; }
.pmw-subj-phys { background: #f3e8ff; color: #6b21a8; }
.pmw-subj-cs { background: #e0e7ff; color: #3730a3; }
.pmw-subj-econ { background: #fef3c7; color: #92400e; }
.pmw-subj-eng { background: #ccfbf1; color: #115e59; }
.pmw-subj-tech { background: #e0e7ff; color: #3730a3; }
.pmw-subj-fin { background: #fef3c7; color: #92400e; }

/* Override branch-icon defaults for platform demos.
   Width is inherited from the flex parent (hiw-branch flex:1 min-width:0)
   so both mocks always get exactly equal width. No max-width needed here. */
.hiw-branch-icon.pmw-container,
.hiw-mode-icon.pmw-container {
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: hidden;
    background: none;
}

/* Responsive heights and content adjustments */
@media (max-width: 1100px) {
    .pmw-body { height: 220px; }
}
/* 899px + 600px heights for .pmw-body are set in the phone-frame section at end of file */
@media (max-width: 600px) {
    .pmw-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 6px; }
    .pmw-sidebar { width: 28px; }
    .pmw-sidebar-logo { width: 16px; height: 16px; }
    .pmw-explore-header { padding: 6px 8px 4px; }
    .pmw-explore-title { font-size: 10px; }
}

/* ========================================
   PLATFORM MOCK: CREATE COURSE (3-frame animation)
   ======================================== */

/* Frame system - 3 scenes stacked, cross-fading. 22s total cycle:
   Frame 1 (Upload):    0-4s visible
   Frame 2 (Generate):  4-10s visible
   Frame 3 (Detail):    10-20s visible (long pause)
   20-22s: cross-fade back to frame 1 */
.pmw-create-wrap {
    position: relative;
    background: #f9fafb;
    overflow: hidden;
}
.pmw-create-frame {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 22s cycle: Type(0-3s) → FilePicker(3-6s) → Generate(6.5-12s) → Detail(13-19s) → loop */
.pmw-frame-upload   { animation: pmw-f1 22s ease infinite; }
.pmw-frame-generate { animation: pmw-f2 22s ease infinite; }
.pmw-frame-detail   { animation: pmw-f3 22s ease infinite; }
.pmw-fe-overlay     { animation: pmw-fe 22s ease infinite; }

@keyframes pmw-f1 {
    0%    { opacity: 1; }
    27%   { opacity: 1; }   /* visible 0-6s (typing + file picker on top) */
    30%   { opacity: 0; }
    100%  { opacity: 0; }   /* stays hidden, appears fresh at 0% next loop */
}
@keyframes pmw-fe {
    0%, 13% { opacity: 0; transform: scale(0.92); }
    16%     { opacity: 1; transform: scale(1); }     /* pop in ~3.5s */
    25%     { opacity: 1; transform: scale(1); }     /* visible until ~5.5s */
    28%     { opacity: 0; transform: scale(0.95); }  /* close */
    100%    { opacity: 0; transform: scale(0.95); }
}
@keyframes pmw-f2 {
    0%, 27%  { opacity: 0; }
    30%      { opacity: 1; }   /* fade in ~6.6s */
    55%      { opacity: 1; }   /* visible until ~12s */
    59%      { opacity: 0; }
    100%     { opacity: 0; }
}
@keyframes pmw-f3 {
    0%, 55%  { opacity: 0; }
    59%      { opacity: 1; }   /* fade in ~13s */
    95%      { opacity: 1; }   /* visible until end */
    100%     { opacity: 0; }   /* fade out right at loop boundary */
}

/* Shared modal styles */
.pmw-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
}
.pmw-modal {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 88%;
    max-height: 94%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pmw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 8px 5px;
}
.pmw-modal-header span:first-child {
    font-size: 9px;
    font-weight: 700;
    color: #111827;
}
.pmw-modal-x {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #9ca3af;
    border-radius: 3px;
}
.pmw-modal-content {
    padding: 0 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    flex: 1;
}
.pmw-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 5px 8px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

/* Form fields */
.pmw-field-label {
    font-size: 7px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 2px;
}
.pmw-field-label .pmw-req { color: #ef4444; }
.pmw-field-label .pmw-opt { color: #9ca3af; font-weight: 400; }

/* Module name input */
.pmw-input-mock {
    width: 100%;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    font-size: 7.5px;
    color: #111827;
    background: #fff;
    overflow: hidden;
    white-space: nowrap;
}
.pmw-input-mock.focused {
    border-color: #10b981;
    box-shadow: 0 0 0 1.5px rgba(16,185,129,0.2);
}

/* Typing animation (only in frame 1) — "Organic Chemistry 1" = 21 chars */
.pmw-typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1.5px solid #111827;
    animation: pmw-typewriter 22s steps(21, end) infinite, pmw-blink 0.6s step-end infinite;
    max-width: 0;
}
/* Synced to 22s cycle — type during 3%-12% (~0.7s to 2.6s) */
@keyframes pmw-typewriter {
    0%, 3%  { max-width: 0; }
    12%     { max-width: 200px; }
    100%    { max-width: 200px; }
}
@keyframes pmw-blink {
    50% { border-color: transparent; }
}

/* Tutor selection */
.pmw-tutors {
    display: flex;
    gap: 3px;
    overflow: hidden;
}
.pmw-tutor-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 2px 3px;
    border-radius: 6px;
    border: 1.5px solid #e5e7eb;
    min-width: 30px;
    background: #fff;
    flex-shrink: 0;
}
.pmw-tutor-btn.selected {
    border-color: #ec4899;
    background: #fdf2f8;
}
.pmw-tutor-btn img {
    width: auto; height: 22px;
    border-radius: 0;
    object-fit: contain;
}
.pmw-tutor-btn span {
    font-size: 5.5px;
    font-weight: 500;
    color: #374151;
    line-height: 1;
}

/* Upload area (dashed box) */
.pmw-upload-area {
    width: 100%;
    padding: 8px 6px;
    border-radius: 6px;
    border: 1.5px dashed #d1d5db;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.pmw-upload-icon { width: 12px; height: 12px; color: #9ca3af; }
.pmw-upload-text { font-size: 6.5px; font-weight: 500; color: #4b5563; }
.pmw-upload-sub { font-size: 5.5px; color: #9ca3af; }

/* ========================================
   FILE EXPLORER MOCK (OS file picker)
   ======================================== */
.pmw-fe-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.18);
    opacity: 0;
    pointer-events: none;
}
.pmw-fe-window {
    width: 82%;
    max-height: 88%;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pmw-fe-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}
.pmw-fe-bar-dots { display: flex; gap: 3px; }
.pmw-fe-bar-dots span {
    width: 5px; height: 5px;
    border-radius: 50%; display: block;
}
.pmw-fe-bar-dots span:nth-child(1) { background: #ef4444; }
.pmw-fe-bar-dots span:nth-child(2) { background: #eab308; }
.pmw-fe-bar-dots span:nth-child(3) { background: #22c55e; }
.pmw-fe-bar-title {
    flex: 1;
    text-align: center;
    font-size: 7px;
    font-weight: 600;
    color: #333;
}
.pmw-fe-content {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.pmw-fe-sidebar {
    width: 32%;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.pmw-fe-section {
    font-size: 5px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 5px;
}
.pmw-fe-loc {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    font-size: 6px;
    color: #374151;
    border-radius: 3px;
    margin: 0 3px;
}
.pmw-fe-loc svg { width: 7px; height: 7px; flex-shrink: 0; }
.pmw-fe-loc.active {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
}
.pmw-fe-files {
    flex: 1;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}
.pmw-fe-file {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 6px;
    color: #374151;
}
.pmw-fe-file svg { width: 8px; height: 8px; color: #9ca3af; flex-shrink: 0; }
.pmw-fe-file.selected {
    background: #2563eb;
    color: #fff;
}
.pmw-fe-file.selected svg { color: #93c5fd; }
.pmw-fe-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    gap: 4px;
}
.pmw-fe-filename {
    flex: 1;
    font-size: 5.5px;
    color: #111827;
    padding: 2px 4px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pmw-fe-actions {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.pmw-fe-btn-cancel {
    padding: 2px 5px;
    font-size: 5.5px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 3px;
}
.pmw-fe-btn-open {
    padding: 2px 5px;
    font-size: 5.5px;
    font-weight: 600;
    color: #fff;
    background: #2563eb;
    border-radius: 3px;
}

/* Uploaded file display */
.pmw-file-uploaded {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 6px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}
.pmw-file-icon { width: 10px; height: 10px; color: #059669; }
.pmw-file-name { font-size: 6.5px; font-weight: 500; color: #047857; flex: 1; }
.pmw-file-x { font-size: 8px; color: #9ca3af; }

/* Generation progress */
.pmw-gen-status {
    padding: 5px 6px;
    border-radius: 6px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pmw-gen-row {
    display: flex;
    align-items: center;
    gap: 3px;
}
.pmw-gen-spinner {
    width: 8px; height: 8px;
    border: 1.5px solid #a7f3d0;
    border-top-color: #059669;
    border-radius: 50%;
    animation: pmw-spin 0.8s linear infinite;
}
@keyframes pmw-spin { to { transform: rotate(360deg); } }
.pmw-gen-label { font-size: 6.5px; font-weight: 500; color: #047857; }
.pmw-gen-bar {
    height: 3px;
    background: #a7f3d0;
    border-radius: 99px;
    overflow: hidden;
    margin-left: 11px;
}
.pmw-gen-bar-fill {
    height: 100%;
    background: #10b981;
    border-radius: 99px;
    animation: pmw-progress 22s ease-out infinite;
}
/* Synced to 22s cycle — Frame 2 visible 30%-55% */
@keyframes pmw-progress {
    0%, 30% { width: 0; }
    36%     { width: 20%; }
    42%     { width: 45%; }
    48%     { width: 72%; }
    53%     { width: 92%; }
    55%     { width: 100%; }
    59%, 100% { width: 0; }
}
.pmw-gen-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-left: 11px;
}
.pmw-gen-stage {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 3px;
    border-radius: 99px;
    font-size: 5.5px;
    font-weight: 500;
}
.pmw-gen-stage.done { background: #d1fae5; color: #047857; }
.pmw-gen-stage.active {
    background: #ecfdf5;
    color: #059669;
    animation: pmw-pulse 1.5s ease-in-out infinite;
}
@keyframes pmw-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Buttons */
.pmw-btn-cancel {
    padding: 3px 8px;
    font-size: 7px;
    font-weight: 500;
    color: #6b7280;
    border-radius: 6px;
}
.pmw-btn-create {
    padding: 3px 8px;
    font-size: 7px;
    font-weight: 600;
    color: #fff;
    background: #059669;
    border-radius: 6px;
}
.pmw-btn-create.disabled { opacity: 0.5; }

/* ========================================
   FRAME 3: Module Detail Page
   ======================================== */
.pmw-detail-page {
    width: 100%;
    height: 100%;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* Detail header */
.pmw-detail-topbar {
    padding: 5px 8px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.pmw-detail-back {
    width: 10px; height: 10px; color: #6b7280;
}
.pmw-detail-info {
    flex: 1; min-width: 0;
}
.pmw-detail-title {
    font-size: 8px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pmw-detail-meta {
    font-size: 5.5px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 2px;
}
.pmw-detail-meta img {
    width: auto; height: 10px;
    border-radius: 0;
    object-fit: contain;
}
.pmw-private-badge {
    display: inline-block;
    padding: 0 2px;
    border-radius: 2px;
    font-size: 5px;
    font-weight: 600;
    background: #f3f4f6;
    color: #6b7280;
}

/* Header actions: toggle pill + start button */
.pmw-detail-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.pmw-toggle-pill {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
    background: #f3f4f6;
}
.pmw-toggle-opt {
    padding: 2px 5px;
    font-size: 5.5px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pmw-toggle-opt.active {
    background: #7c3aed;
    color: #fff;
    border-radius: 99px;
}
.pmw-start-btn {
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 5.5px;
    font-weight: 600;
    color: #fff;
    background: #7c3aed;
    white-space: nowrap;
}

/* Two-column body: chapter list left, detail panel right */
.pmw-detail-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Chapter list (left column) */
.pmw-chapter-list {
    width: 42%;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}

/* Chapter card */
.pmw-chapter-list .pmw-chapter-row {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pmw-chapter-list .pmw-chapter-row:hover {
    border-color: #c4b5fd;
    background: #faf5ff;
}
.pmw-chapter-list .pmw-chapter-row.active {
    border-color: #8b5cf6;
    background: #faf5ff;
}

/* Grip dots (2 cols x 3 rows) */
.pmw-ch-grip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    flex-shrink: 0;
    width: 5px;
    opacity: 0.35;
}
.pmw-ch-grip span {
    width: 1.5px; height: 1.5px;
    border-radius: 50%;
    background: #9ca3af;
    display: block;
}
.pmw-chapter-list .pmw-chapter-row:hover .pmw-ch-grip {
    opacity: 0.6;
}

/* Circle indicator */
.pmw-ch-circle {
    width: 13px; height: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #d1d5db;
    background: #fff;
    transition: all 0.15s ease;
}
.pmw-ch-circle span {
    font-size: 5px;
    font-weight: 600;
    color: #6b7280;
    line-height: 1;
}
.pmw-ch-circle.selected {
    border-color: #7c3aed;
    background: #fff;
}
.pmw-ch-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #7c3aed;
    display: block;
}
.pmw-chapter-list .pmw-chapter-row:hover .pmw-ch-circle {
    border-color: #a78bfa;
}

/* Chapter body */
.pmw-chapter-list .pmw-chapter-body { flex: 1; min-width: 0; }
.pmw-chapter-list .pmw-chapter-name {
    font-size: 6px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}
.pmw-chapter-list .pmw-chapter-row:hover .pmw-chapter-name,
.pmw-chapter-list .pmw-chapter-row.active .pmw-chapter-name {
    color: #7c3aed;
}
.pmw-chapter-list .pmw-chapter-desc {
    font-size: 4.5px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.5px;
}

/* Right side: file icon + count + chevron */
.pmw-chapter-right {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}
.pmw-ch-file-icon {
    width: 6px; height: 6px;
    color: #9ca3af;
    flex-shrink: 0;
}
.pmw-chapter-count {
    font-size: 5px;
    color: #9ca3af;
    font-weight: 500;
}
.pmw-ch-chevron {
    width: 6px; height: 6px;
    color: #d1d5db;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
.pmw-chapter-list .pmw-chapter-row:hover .pmw-ch-chevron,
.pmw-chapter-list .pmw-chapter-row.active .pmw-ch-chevron {
    color: #8b5cf6;
}

/* ---- Detail panels (right column) ---- */
.pmw-detail-panels {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
}
.pmw-detail-panel {
    display: none;
    position: absolute;
    inset: 0;
    border-left: 1px solid #e5e7eb;
    background: #fff;
    padding: 6px;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.pmw-detail-panel.active {
    display: flex;
}
.pmw-panel-label {
    font-size: 5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #7c3aed;
}
.pmw-panel-title {
    font-size: 7.5px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.pmw-panel-desc {
    font-size: 5px;
    color: #6b7280;
    line-height: 1.3;
}
.pmw-panel-concepts-label {
    font-size: 5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #374151;
    margin-top: 2px;
}
.pmw-panel-concepts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.pmw-concept-item {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    padding: 2px 3px;
    background: #f9fafb;
    border-radius: 4px;
}
.pmw-concept-num {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #7c3aed;
    color: #fff;
    font-size: 5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.pmw-concept-info { flex: 1; min-width: 0; }
.pmw-concept-name {
    font-size: 5.5px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}
.pmw-concept-desc {
    font-size: 4.5px;
    color: #6b7280;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 600px) {
    .pmw-tutors { gap: 2px; }
    .pmw-tutor-btn { min-width: 24px; padding: 2px; }
    .pmw-tutor-btn img { width: auto; height: 18px; }
    .pmw-tutor-btn span { font-size: 5px; }
    .pmw-toggle-pill { display: none; }
    .pmw-start-btn { font-size: 5px; padding: 2px 4px; }
    .pmw-chapter-list { width: 38%; }
}

/* ========================================
   PLATFORM MODE MOCKS (Learn & Practice)
   Full 3-panel layout: Nav | Canvas | Chat
   ======================================== */

/* Mode body — contains the 3-panel session layout */
.pmw-mode-body {
    height: 240px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.pmw-mode-body,
.pmw-mode-body * {
    box-sizing: border-box;
}

/* Frame wrap & animation containers */
.pmw-learn-wrap,
.pmw-practice-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.pmw-mode-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* ---------- 3-PANEL SESSION LAYOUT ---------- */
.pmw-session {
    display: flex;
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #ffffff;
    text-align: left;
}

/* Left: Concept/Question nav sidebar */
.pmw-snav {
    width: 22%;
    background: #ffffff;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

/* Clean sidebar implementation (no utility-class soup) */
.pmw-snav-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #eceae8;
}

.pmw-snav-top {
    height: 22px;
    padding: 3px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.pmw-snav-scroll {
    flex: 1;
    overflow: hidden;
    padding: 4px 0;
}

.pmw-chapter {
    margin-bottom: 3px;
}

.pmw-chapter-hdr {
    margin: 0 4px;
    padding: 3px 3px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #111827;
    font-size: 5.5px;
    font-weight: 600;
    background: #ffffff;
}

.pmw-chapter-num {
    width: 10px;
    flex-shrink: 0;
    color: #9ca3af;
    font-weight: 700;
}

.pmw-chapter-items {
    margin-left: 9px;
    border-left: 1px solid #f3f4f6;
    padding: 2px 0;
}

.pmw-item {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    padding: 2px 4px;
    font-size: 5px;
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #ffffff;
}

.pmw-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    flex-shrink: 0;
}

.pmw-item.active {
    color: #047857;
    font-weight: 600;
}

.pmw-item.active .pmw-item-dot {
    background: #10b981;
    border-color: #10b981;
}

.pmw-snav-footer {
    border-top: 1px solid #f3f4f6;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.pmw-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 5px;
    color: #4b5563;
}

.pmw-toggle {
    width: 16px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.10);
    position: relative;
    flex-shrink: 0;
}

.pmw-toggle::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.10);
}

.pmw-gen-btn {
    width: 100%;
    text-align: center;
    padding: 3px 4px;
    border-radius: 6px;
    background: #10b981;
    color: #ffffff;
    font-size: 5.5px;
    font-weight: 700;
}

.pmw-exit-btn {
    width: 100%;
    text-align: left;
    padding: 3px 4px;
    border-radius: 6px;
    background: #ffffff;
    color: #dc2626;
    font-size: 5.5px;
    font-weight: 700;
    border: 1px solid #f3f4f6;
}

.pmw-snav-item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 3px;
    border-radius: 3px;
    font-size: 5px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmw-snav-item.active {
    background: #f0fdf4;
    color: #111827;
    font-weight: 600;
}

.pmw-snav-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pmw-snav-dot.gray    { background: #d1d5db; }
.pmw-snav-dot.green   { background: #10b981; }
.pmw-snav-dot.orange  { background: #f59e0b; }
.pmw-snav-dot.red     { background: #ef4444; }
.pmw-snav-dot.filled  { background: #8b5cf6; }

/* Center: Canvas area */
.pmw-scanvas {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    display: block;
}

.pmw-scanvas-scroll {
    overflow-y: hidden;
}

.pmw-scanvas-center {
    align-items: center;
    justify-content: center;
}

/* ---------- CANVAS REALISTIC PRACTICE CARD ---------- */
.pmw-canvas-background {
    width: 100%;
    height: 100%;
    max-width: 100%;
    position: relative;
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 0% 0%, #e6e2de 1px, transparent 1.6px),
        radial-gradient(circle at 100% 0%, #e6e2de 1px, transparent 1.6px),
        radial-gradient(circle at 0% 100%, #e6e2de 1px, transparent 1.6px),
        radial-gradient(circle at 100% 100%, #e6e2de 1px, transparent 1.6px),
        linear-gradient(to right, #f0eeeb 1px, transparent 1px),
        linear-gradient(to bottom, #f0eeeb 1px, transparent 1px);
    background-size: 26px 26px;
    overflow: hidden;
}

.pmw-canvas-stage {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: 2px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pmw-canvas-line {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
}

.pmw-canvas-line::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #a7f3d0;
}

.pmw-canvas-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-size: 5px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.12);
}

.pmw-pill-icon {
    width: 8px;
    height: 8px;
    color: #10b981;
}

.pmw-practice-shell {
    width: 92%;
    min-width: 130px;
    max-width: 100%;
    padding: 4px 6px;
    text-align: left;
}

.pmw-practice-shell .progress-bar {
    margin-bottom: 4px;
}

.pmw-practice-shell .options-container button {
    border-width: 1px;
    padding: 3px 5px;
}

.pmw-practice-shell .options-container .rounded-full {
    width: 10px;
    height: 10px;
}

.pmw-practice-shell .options-container .text-xs {
    font-size: 5px;
}

.pmw-practice-shell .question-text {
    margin-bottom: 4px;
}

.pmw-practice-shell .mt-3 {
    margin-top: 5px;
}

.pmw-option-line {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 5px;
    color: #374151;
}

.pmw-option-letter {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 3.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pmw-option-text { flex: 1; }
.pmw-option-check { margin-left: auto; font-weight: 700; color: #10b981; font-size: 6px; }

.pmw-option-line.selected {
    border-color: #10b981;
    background: #ecfdf5;
}

.pmw-option-line.correct {
    border-color: #10b981;
    background: #ecfdf5;
}

.pmw-option-line.wrong {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}



.pmw-practice-feedback {
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 5.5px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pmw-learn-card {
    width: 78%;
    min-width: 120px;
    max-width: 100%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.pmw-learn-title {
    font-size: 6.5px;
    font-weight: 700;
    color: #111827;
    text-align: center;
}

.pmw-learn-sub {
    margin-top: 2px;
    font-size: 5px;
    color: #9ca3af;
    text-align: center;
}

.pmw-learn-question {
    margin: 6px 0 5px;
    font-size: 6px;
    font-weight: 600;
    color: #1f2937;
}

.pmw-learn-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pmw-learn-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 5.5px;
    color: #374151;
}

.pmw-learn-letter {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pmw-learn-text { flex: 1; }

.pmw-learn-option.selected {
    border-color: #10b981;
    background: #ecfdf5;
}

.pmw-learn-option.correct {
    border-color: #10b981;
    background: #ecfdf5;
}

.pmw-learn-check {
    margin-left: auto;
    font-weight: 700;
    color: #10b981;
    font-size: 6px;
}

.pmw-learn-btn {
    margin-top: 6px;
    padding: 4px 6px;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    background: #f7f7f7;
    font-size: 5.5px;
    color: #9ca3af;
    text-align: center;
}

.pmw-learn-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.pmw-learn-feedback {
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 5.5px;
    font-weight: 600;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Canvas cards (practice questions) */
.pmw-card-wrap {
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 6px;
    padding: 5px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.pmw-card-compact {
    padding: 4px 5px;
    margin-bottom: 3px;
}

.pmw-card-hdr {
    font-size: 5px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}

.pmw-card-qtext {
    font-size: 7px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 4px;
}

/* Answer options */
.pmw-card-opts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pmw-opts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.pmw-card-opt {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    font-size: 5.5px;
    color: #374151;
    background: #fff;
}

.pmw-card-ltr {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5px;
    font-weight: 700;
    color: #6b7280;
    flex-shrink: 0;
}

.pmw-card-opt.selected {
    background: #ecfdf5;
    border-color: #10b981;
}

.pmw-card-opt.selected .pmw-card-ltr {
    background: #10b981;
    color: #fff;
}

.pmw-card-opt.correct {
    background: #ecfdf5;
    border-color: #10b981;
}

.pmw-card-opt.correct .pmw-card-ltr {
    background: #10b981;
    color: #fff;
}

.pmw-card-chk {
    margin-left: auto;
    font-size: 6px;
    color: #10b981;
    font-weight: 700;
}

/* Text input for questions */
.pmw-card-input {
    height: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    background: #f9fafb;
    font-size: 5.5px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    color: #9ca3af;
}

.pmw-card-input.filled {
    color: #111827;
    background: #fff;
    border-color: #10b981;
}

/* Card action buttons */
.pmw-card-btn {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 5.5px;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
}

.pmw-card-btn.disabled {
    background: #f3f4f6;
    color: #9ca3af;
}

.pmw-card-btn.active {
    background: #059669;
    color: #fff;
}

/* Card feedback badge */
.pmw-card-feedback {
    margin-top: 4px;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 5.5px;
    font-weight: 600;
}

.pmw-card-feedback.correct {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.pmw-card-feedback-icon {
    font-weight: 700;
}

/* Practice submit button (inside canvas) */
.pmw-practice-submit {
    width: 100%;
    padding: 3px 6px;
    border-radius: 4px;
    border: none;
    font-size: 5.5px;
    font-weight: 600;
    text-align: center;
    background: #7c3aed;
    color: #fff;
    margin-top: 2px;
}

/* Results card (inside canvas) */
.pmw-results-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    width: 90%;
    max-width: 160px;
}

.pmw-results-title {
    font-size: 6px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 3px;
}

.pmw-score-big {
    font-size: 16px;
    font-weight: 800;
    color: #10b981;
    line-height: 1;
}

.pmw-score-pct {
    font-size: 7px;
    color: #6b7280;
    margin-bottom: 4px;
}

.pmw-results-dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-bottom: 4px;
}

.pmw-rdot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5px;
    font-weight: 700;
    color: #fff;
}

.pmw-rdot.correct { background: #10b981; }
.pmw-rdot.wrong   { background: #ef4444; }

.pmw-results-action {
    font-size: 5.5px;
    font-weight: 600;
    color: #7c3aed;
    margin-top: 2px;
}

/* ---------- RIGHT: CHAT PANEL ---------- */
.pmw-schat {
    width: 24%;
    border-left: 1px solid #e5e7eb;
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.pmw-schat-hdr {
    padding: 2px 4px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-size: 4px;
    font-weight: 600;
    color: #111827;
}

.pmw-schat-avatar {
    width: 6px;
    height: 6px;
    max-width: 6px;
    max-height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Chat messages area */
.pmw-schat-msgs {
    flex: 1;
    padding: 2px 3px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    overflow: hidden;
}

.pmw-msg {
    padding: 2px 3px;
    border-radius: 3px;
    font-size: 4px;
    line-height: 1.35;
    max-width: 92%;
}

.pmw-msg strong {
    font-weight: 700;
}

.pmw-msg.ai {
    background: #f3f4f6;
    color: #374151;
    align-self: flex-start;
    border-bottom-left-radius: 1px;
}

.pmw-msg.user {
    background: #2563eb;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 1px;
}

/* Typing indicator */
.pmw-msg.typing {
    padding: 4px 8px;
}

.pmw-typing-dots {
    display: flex;
    gap: 2px;
    align-items: center;
}

.pmw-typing-dots span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #9ca3af;
    animation: pmw-typing 1.2s ease-in-out infinite;
}

.pmw-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.pmw-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pmw-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}

/* Quick reply buttons */
.pmw-quick-replies {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 1px;
}

.pmw-quick-btn {
    padding: 1px 3px;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    font-size: 3.5px;
    color: #374151;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chat input area */
.pmw-schat-input {
    padding: 2px 3px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.pmw-input-field {
    flex: 1;
    height: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 2px;
    background: #f9fafb;
    font-size: 3.5px;
    color: #9ca3af;
    padding: 0 2px;
    display: flex;
    align-items: center;
}

.pmw-send-btn {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pmw-send-btn svg {
    width: 4px;
    height: 4px;
}

/* ---------- EMBEDDED FRONTEND CHAT UTILITIES (sidebar is clean pmw-*) ---------- */
.pmw-real-chat {
    font-size: 3px;
    line-height: 1.55;
    color: #374151;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Remove default UA button borders (they show up as harsh black outlines at this scale). */
.pmw-mode-body button {
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}
.pmw-mode-body button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Mock cleanup: remove "boxy" look from imported utility-heavy markup at tiny scales */
.pmw-real-chat * {
    box-shadow: none !important;
    outline: none !important;
}

/* Thin down Lucide strokes (they look overly bold once we shrink everything) */
.pmw-real-chat svg * {
    stroke-width: 1.2 !important;
}

/* Strip extra UI chrome from the mock (icons create heavy outlines at tiny scale) */
.pmw-real-chat .lucide-settings,
.pmw-real-chat .lucide-volume-x,
.pmw-real-chat .lucide-thumbs-up,
.pmw-real-chat .lucide-thumbs-down {
    display: none !important;
}

.pmw-real-chat button[title="Voice"],
.pmw-real-chat button[title="Good answer"],
.pmw-real-chat button[title="Needs work"],
.pmw-real-chat button[title="Settings"] {
    display: none !important;
}

/* Borders read like heavy black outlines at 3px type; keep separators, drop button outlines */
.pmw-real-chat button.border {
    border-width: 0 !important;
}

.pmw-real-chat .border,
.pmw-real-chat .border-t,
.pmw-real-chat .border-b,
.pmw-real-chat .border-l,
.pmw-real-chat .border-r {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Mock cleanup: remove default browser focus outlines/rings that look like black boxes at this scale */
.pmw-real-chat button:focus,
.pmw-real-chat button:focus-visible,
.pmw-real-chat textarea:focus,
.pmw-real-chat textarea:focus-visible,
.pmw-real-chat input:focus,
.pmw-real-chat input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Mock cleanup: tone down borders/shadows on embedded Frontend-like controls */
.pmw-real-chat .shadow-sm,
.pmw-real-chat .shadow-md {
    box-shadow: none !important;
}

.pmw-real-chat .border {
    border-color: rgba(0, 0, 0, 0.10) !important;
}

/* Utility-class overrides inside the embedded chat.
   The mock includes Frontend-like utility classes (e.g. text-[13px]) that otherwise win on specificity. */
.pmw-real-chat .text-\[13px\],
.pmw-real-chat .text-\[12px\],
.pmw-real-chat .text-\[11px\],
.pmw-real-chat .text-\[9px\],
.pmw-real-chat .text-xs,
.pmw-real-chat .text-sm,
.pmw-real-chat .text-lg {
    font-size: 3px !important;
    line-height: 1.55 !important;
}

.pmw-real-chat button,
.pmw-real-chat textarea,
.pmw-real-chat input {
    font-size: 3px !important;
    line-height: 1.35 !important;
}

.pmw-real-chat textarea {
    overflow-x: hidden !important;
}

.pmw-real-chat .prose {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 3px;
    line-height: 1.6;
}

/* Some imported markup uses max-w-none which can create horizontal overflow */
.pmw-real-chat .max-w-none { max-width: 100% !important; }

/* Prevent any child from forcing horizontal scroll in the embedded mock */
.pmw-real-chat * {
    max-width: 100%;
    min-width: 0;
}

.pmw-real-chat img {
    display: block;
    object-fit: contain;
}

.pmw-real-chat svg {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
}

/* Make the tutor avatar and header controls much smaller so chat has room */
.pmw-real-chat .w-8 { width: 8px !important; }
.pmw-real-chat .h-8 { height: 8px !important; }
.pmw-real-chat .w-6 { width: 10px !important; }
.pmw-real-chat .h-6 { height: 10px !important; }

/* Tighten header + message padding inside the embedded chat */
.pmw-real-chat .hidden.md\\:flex {
    padding: 2px 2px !important;
    gap: 3px !important;
}

.pmw-real-chat .overflow-y-auto {
    padding: 2px !important;
    overflow-x: hidden !important;
}

.pmw-real-chat .px-4 { padding-left: 4px !important; padding-right: 4px !important; }
.pmw-real-chat .px-3 { padding-left: 3px !important; padding-right: 3px !important; }
.pmw-real-chat .py-2 { padding-top: 2px !important; padding-bottom: 2px !important; }
.pmw-real-chat .gap-3 { gap: 4px !important; }

/* Shrink input bar height so it doesn't dominate the panel */
.pmw-real-chat .min-h-\[40px\] { min-height: 8px !important; }
.pmw-real-chat .max-h-\[120px\] { max-height: 14px !important; }
.pmw-real-chat .h-9 { height: 8px !important; }

/* Force compact form row: textarea + send button */
.pmw-real-chat form {
    align-items: center !important;
    gap: 2px !important;
}
.pmw-real-chat form textarea {
    height: 8px !important;
    min-height: 8px !important;
    max-height: 10px !important;
    padding: 1px 3px !important;
}
.pmw-real-chat form button[type="submit"] {
    height: 8px !important;
    max-height: 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    padding: 1px !important;
    flex-shrink: 0 !important;
}
.pmw-real-chat form button[type="submit"] svg {
    width: 5px !important;
    height: 5px !important;
}

/* Compact the form wrapper and quick-reply row inside the chat */
.pmw-real-chat [data-tutorial="chat-input"] .border-t { padding: 2px 3px !important; }

/* Quick replies (Start / Challenge / Practice) must fit on one line in the mock */
.pmw-real-chat [data-tutorial="quick-replies"] {
    flex-wrap: nowrap !important;
    gap: 1px !important;
    padding: 1px 3px !important;
    overflow: hidden;
}

.pmw-real-chat [data-tutorial="quick-replies"] button {
    padding: 1px 2px !important;
    font-size: 3px !important;
    line-height: 1.1 !important;
    gap: 1px !important;
}

.pmw-real-chat [data-tutorial="quick-replies"] svg {
    width: 5px !important;
    height: 5px !important;
}

.pmw-mode-body .flex { display: flex; }
.pmw-mode-body .inline-flex { display: inline-flex; }
.pmw-mode-body .md\:flex { display: flex; }
.pmw-mode-body .overflow-hidden { overflow: hidden; }
.pmw-mode-body .overflow-visible { overflow: visible; }
.pmw-mode-body .flex-col { flex-direction: column; }
.pmw-mode-body .flex-wrap { flex-wrap: wrap; }
.pmw-mode-body .items-center { align-items: center; }
.pmw-mode-body .justify-between { justify-content: space-between; }
.pmw-mode-body .justify-center { justify-content: center; }
.pmw-mode-body .justify-start { justify-content: flex-start; }
.pmw-mode-body .gap-0\.5 { gap: 1.5px; }
.pmw-mode-body .gap-1 { gap: 2px; }
.pmw-mode-body .gap-1\.5 { gap: 2.5px; }
.pmw-mode-body .gap-2 { gap: 3px; }
.pmw-mode-body .gap-3 { gap: 4px; }
.pmw-mode-body .space-y-4 > * + * { margin-top: 5px; }
.pmw-mode-body .space-y-2 > * + * { margin-top: 3px; }
.pmw-mode-body .space-y-3 > * + * { margin-top: 4px; }

.pmw-mode-body .p-1 { padding: 2px; }
.pmw-mode-body .p-2 { padding: 3px; }
.pmw-mode-body .p-3 { padding: 4px; }
.pmw-mode-body .p-4 { padding: 5px; }
.pmw-mode-body .px-2 { padding-left: 3px; padding-right: 3px; }
.pmw-mode-body .px-3 { padding-left: 4px; padding-right: 4px; }
.pmw-mode-body .px-4 { padding-left: 5px; padding-right: 5px; }
.pmw-mode-body .py-1 { padding-top: 2px; padding-bottom: 2px; }
.pmw-mode-body .py-0\.5 { padding-top: 1px; padding-bottom: 1px; }
.pmw-mode-body .py-1\.5 { padding-top: 2.5px; padding-bottom: 2.5px; }
.pmw-mode-body .py-2 { padding-top: 3px; padding-bottom: 3px; }
.pmw-mode-body .py-2\.5 { padding-top: 3.5px; padding-bottom: 3.5px; }
.pmw-mode-body .py-3 { padding-top: 4px; padding-bottom: 4px; }
.pmw-mode-body .mb-1 { margin-bottom: 2px; }
.pmw-mode-body .mb-4 { margin-bottom: 6px; }
.pmw-mode-body .mt-3 { margin-top: 5px; }
.pmw-mode-body .mt-1 { margin-top: 2px; }
.pmw-mode-body .ml-4 { margin-left: 6px; }
.pmw-mode-body .pb-2 { padding-bottom: 3px; }
.pmw-mode-body .px-3\.5 { padding-left: 5px; padding-right: 5px; }

.pmw-mode-body .w-full { width: 100%; }
.pmw-mode-body .h-full { height: 100%; }
.pmw-mode-body .w-1 { width: 2px; }
.pmw-mode-body .h-1 { height: 2px; }
.pmw-mode-body .w-2 { width: 4px; }
.pmw-mode-body .h-2 { height: 4px; }
.pmw-mode-body .w-2\.5 { width: 5px; }
.pmw-mode-body .h-2\.5 { height: 5px; }
.pmw-mode-body .w-3 { width: 6px; }
.pmw-mode-body .h-3 { height: 6px; }
.pmw-mode-body .w-3\.5 { width: 7px; }
.pmw-mode-body .h-3\.5 { height: 7px; }
.pmw-mode-body .w-4 { width: 8px; }
.pmw-mode-body .h-4 { height: 8px; }
.pmw-mode-body .w-5 { width: 10px; }
.pmw-mode-body .h-5 { height: 10px; }
.pmw-mode-body .w-6 { width: 12px; }
.pmw-mode-body .h-6 { height: 12px; }
.pmw-mode-body .w-8 { width: 16px; }
.pmw-mode-body .h-8 { height: 16px; }
.pmw-mode-body .w-10 { width: 20px; }
.pmw-mode-body .h-9 { height: 18px; }
.pmw-mode-body .h-12 { height: 24px; }
.pmw-mode-body .min-h-\[40px\] { min-height: 20px; }
.pmw-mode-body .max-h-\[120px\] { max-height: 60px; }

.pmw-mode-body .flex-1 { flex: 1 1 0%; }
.pmw-mode-body .flex-shrink-0 { flex-shrink: 0; }
.pmw-mode-body .min-w-0 { min-width: 0; }
.pmw-mode-body .min-h-0 { min-height: 0; }

.pmw-mode-body .text-\[13px\] { font-size: 6px; }
.pmw-mode-body .text-\[12px\] { font-size: 5.5px; }
.pmw-mode-body .text-\[11px\] { font-size: 5px; }
.pmw-mode-body .text-\[9px\] { font-size: 4px; }
.pmw-mode-body .text-lg { font-size: 7px; }
.pmw-mode-body .text-xs { font-size: 5.5px; }
.pmw-mode-body .text-sm { font-size: 6px; }
.pmw-mode-body .font-semibold { font-weight: 600; }
.pmw-mode-body .font-medium { font-weight: 600; }
.pmw-mode-body .font-bold { font-weight: 700; }
.pmw-mode-body .text-left { text-align: left; }
.pmw-mode-body .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmw-mode-body .max-w-none { max-width: none; }
.pmw-mode-body .uppercase { text-transform: uppercase; }
.pmw-mode-body .tracking-widest { letter-spacing: 0.2em; }

.pmw-mode-body .text-gray-700 { color: #374151; }
.pmw-mode-body .text-gray-600 { color: #4b5563; }
.pmw-mode-body .text-gray-500 { color: #6b7280; }
.pmw-mode-body .text-gray-400 { color: #9ca3af; }
.pmw-mode-body .text-gray-300 { color: #d1d5db; }
.pmw-mode-body .text-gray-900 { color: #111827; }
.pmw-mode-body .text-emerald-700 { color: #047857; }
.pmw-mode-body .text-emerald-600 { color: #059669; }
.pmw-mode-body .text-emerald-500 { color: #10b981; }
.pmw-mode-body .text-red-600 { color: #dc2626; }
.pmw-mode-body .text-stone-700 { color: #44403c; }
.pmw-mode-body .text-amber-600 { color: #d97706; }
.pmw-mode-body .text-white { color: #ffffff; }
.pmw-mode-body .text-text-tertiary { color: #9ca3af; }

.pmw-mode-body .bg-white { background-color: #ffffff; }
.pmw-mode-body .bg-white\\/95 { background-color: #ffffff; }
.pmw-mode-body .bg-gray-50 { background-color: #ffffff; }
.pmw-mode-body .bg-gray-100 { background-color: #ffffff; }
.pmw-mode-body .bg-gray-200 { background-color: #ffffff; }
.pmw-mode-body .bg-stone-50 { background-color: #ffffff; }
.pmw-mode-body .bg-stone-100 { background-color: #ffffff; }
.pmw-mode-body .bg-stone-200 { background-color: #ffffff; }
.pmw-mode-body .bg-stone-300 { background-color: #d6d3d1; }
.pmw-mode-body .bg-emerald-50 { background-color: #ecfdf5; }
.pmw-mode-body .bg-emerald-200 { background-color: #a7f3d0; }
.pmw-mode-body .bg-emerald-500 { background-color: #10b981; }
.pmw-mode-body .bg-emerald-600 { background-color: #059669; }
.pmw-mode-body .bg-amber-500 { background-color: #f59e0b; }
.pmw-mode-body .bg-red-50 { background-color: #fef2f2; }
.pmw-mode-body .bg-background { background-color: #ffffff; }
.pmw-mode-body .bg-primary { background-color: #10b981; }
.pmw-mode-body .bg-primary-hover { background-color: #059669; }

.pmw-mode-body .border { border-width: 1px; border-style: solid; border-color: #eceae8; }
.pmw-mode-body .border-2 { border-width: 1px; border-style: solid; }
.pmw-mode-body .border-r { border-right-width: 1px; border-style: solid; border-color: #eceae8; }
.pmw-mode-body .border-l { border-left-width: 1px; border-style: solid; border-color: #eceae8; }
.pmw-mode-body .border-b { border-bottom-width: 1px; border-style: solid; border-color: #eceae8; }
.pmw-mode-body .border-t { border-top-width: 1px; border-style: solid; border-color: #eceae8; }
.pmw-mode-body .border-gray-100 { border-color: #f4f3f1; }
.pmw-mode-body .border-gray-200 { border-color: #eceae8; }
.pmw-mode-body .border-gray-300 { border-color: #d1d5db; }
.pmw-mode-body .border-emerald-200 { border-color: #a7f3d0; }
.pmw-mode-body .border-emerald-400 { border-color: #34d399; }
.pmw-mode-body .border-emerald-500 { border-color: #10b981; }
.pmw-mode-body .border-stone-200 { border-color: #e7e5e4; }
.pmw-mode-body .border-border { border-color: #e5e7eb; }

.pmw-mode-body .rounded { border-radius: 3px; }
.pmw-mode-body .rounded-md { border-radius: 4px; }
.pmw-mode-body .rounded-b-md { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.pmw-mode-body .rounded-lg { border-radius: 5px; }
.pmw-mode-body .rounded-3xl { border-radius: 12px; }
.pmw-mode-body .rounded-full { border-radius: 999px; }
.pmw-mode-body .rounded-base { border-radius: 5px; }
.pmw-mode-body .rounded-small { border-radius: 4px; }

.pmw-mode-body .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.pmw-mode-body .shadow-md { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.pmw-mode-body .transition-shadow { transition: box-shadow 0.2s ease; }
.pmw-mode-body .backdrop-blur-sm { backdrop-filter: blur(4px); }

.pmw-mode-body .overflow-y-auto { overflow-y: auto; }
.pmw-mode-body .resize-none { resize: none; }
.pmw-mode-body .cursor-pointer { cursor: pointer; }

.pmw-mode-body .transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.pmw-mode-body .transition-all { transition: all 0.2s ease; }
.pmw-mode-body .transition-transform { transition: transform 0.2s ease; }
.pmw-mode-body .duration-150 { transition-duration: 150ms; }
.pmw-mode-body .duration-200 { transition-duration: 200ms; }
.pmw-mode-body .duration-300 { transition-duration: 300ms; }
.pmw-mode-body .ease-out { transition-timing-function: ease-out; }

.pmw-mode-body .opacity-100 { opacity: 1; }
.pmw-mode-body .translate-x-0 { transform: translateX(0); }
.pmw-mode-body .translate-y-0 { transform: translateY(0); }
.pmw-mode-body .-translate-x-1\\/2 { transform: translateX(-50%); }
.pmw-mode-body .rotate-180 { transform: rotate(180deg); }
.pmw-mode-body .rotate-0 { transform: rotate(0deg); }

.pmw-mode-body .relative { position: relative; }
.pmw-mode-body .absolute { position: absolute; }
.pmw-mode-body .top-0 { top: 0; }
.pmw-mode-body .top-0\.5 { top: 1px; }
.pmw-mode-body .left-0\.5 { left: 1px; }
.pmw-mode-body .left-1\\/2 { left: 50%; }

.pmw-mode-body .prose { color: #1f2937; }
.pmw-mode-body .prose-sm { line-height: 1.45; }
.pmw-mode-body .sidebar-scrollbar { scrollbar-width: none; }
.pmw-mode-body .sidebar-scrollbar::-webkit-scrollbar { display: none; }
.pmw-mode-body .animate-pulse { animation: pmw-pulse 1.5s ease-in-out infinite; }
.pmw-mode-body .placeholder\:text-text-tertiary::placeholder { color: #9ca3af; }

/* ---------- LEARN ANIMATED FRAME (16s cycle, step-end) ---------- */

/* Single animated frame stays visible */
.lfa-frame { opacity: 1 !important; }

/* Remove gap — spacing handled per-message via margin */
.lfa-frame .pmw-schat-msgs { gap: 0; justify-content: flex-start; }

/* Canvas cards — stacked vertically, card 2 appears below then scrolls into view */
.lfa-cards {
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: lfa-scroll 16s step-end infinite;
}

@keyframes lfa-scroll {
    0%  { transform: translateY(0); }
    60% { transform: translateY(-120px); }
}

/* Card 2 starts collapsed, expands at 58% */
.lfa-card2 { animation: lfa-c2 16s step-end infinite; overflow: hidden; }

@keyframes lfa-c2 {
    0%  { max-height: 0; opacity: 0; padding: 0; border-width: 0; box-shadow: none; margin: 0; }
    58% { max-height: 300px; opacity: 1; padding: 4px 6px; border-width: 1px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin: 0; }
}

/* ---- Option G selection highlight (instant snap to blue) ---- */
.lfa-optG { animation: lfa-sG 16s step-end infinite; }
@keyframes lfa-sG {
    0%  { border-color: #e5e7eb; background: #fff; }
    71% { border-color: #3b82f6; background: #eff6ff; }
}

.lfa-ltrG { animation: lfa-lG 16s step-end infinite; }
@keyframes lfa-lG {
    0%  { background: #f3f4f6; color: #6b7280; }
    71% { background: #3b82f6; color: #fff; }
}

/* ---- Chat message animations (step-end = instant show/hide) ---- */

/* m1: AI intro — visible from start */
.lfa-m1 { animation: lfa-m1 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m1 {
    0% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* m2: User "ok" — appears at 9% */
.lfa-m2 { animation: lfa-m2 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m2 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    9%  { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* d1: visible 11→16% */
.lfa-d1 { animation: lfa-d1 16s step-end infinite; overflow: hidden; }
@keyframes lfa-d1 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    11% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    16% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* m3: AI explains Vocabulary in Context — appears at 16% */
.lfa-m3 { animation: lfa-m3 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m3 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    16% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* m4: User "What clues should I look for?" — appears at 31% */
.lfa-m4 { animation: lfa-m4 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m4 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    31% { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* d2: visible 33→38% */
.lfa-d2 { animation: lfa-d2 16s step-end infinite; overflow: hidden; }
@keyframes lfa-d2 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    33% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    38% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* m5: AI explains 3 types of clues — appears at 38% */
.lfa-m5 { animation: lfa-m5 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m5 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    38% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* m6: User "Continue" — appears at 52% */
.lfa-m6 { animation: lfa-m6 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m6 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    52% { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* d3: visible 54→58% */
.lfa-d3 { animation: lfa-d3 16s step-end infinite; overflow: hidden; }
@keyframes lfa-d3 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    54% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    58% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* m7: AI presents practice question — appears at 58% */
.lfa-m7 { animation: lfa-m7 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m7 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    58% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* m8: User "G" — appears at 71% */
.lfa-m8 { animation: lfa-m8 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m8 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    71% { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* d4: visible 73→78% */
.lfa-d4 { animation: lfa-d4 16s step-end infinite; overflow: hidden; }
@keyframes lfa-d4 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    73% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    78% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* m9: AI confirms correct — appears at 78% */
.lfa-m9 { animation: lfa-m9 16s step-end infinite; overflow: hidden; }
@keyframes lfa-m9 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    78% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* ---- Input field typing animations (one per user message) ---- */

/* Placeholder hides during each typing burst */
.lfa-placeholder { animation: lfa-ph 16s step-end infinite; }
@keyframes lfa-ph {
    0%  { opacity: 1; }
    5%  { opacity: 0; }
    9%  { opacity: 1; }
    26% { opacity: 0; }
    31% { opacity: 1; }
    48% { opacity: 0; }
    52% { opacity: 1; }
    68% { opacity: 0; }
    71% { opacity: 1; }
}

/* Shared styles for all input text spans */
.lfa-input-t1, .lfa-input-t2, .lfa-input-t3, .lfa-input-t4 {
    position: absolute;
    top: 0;
    left: 2px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    color: #111827;
    font-size: 3.5px;
}

/* "ok" — types 5-8%, sends at 9% */
.lfa-input-t1 { animation: lfa-t1 16s step-end infinite; }
@keyframes lfa-t1 {
    0%  { max-width: 0; }
    5%  { max-width: 1ch; }
    7%  { max-width: 2ch; }
    9%  { max-width: 0; }
}

/* "What clues should I look for?" — types 26-30%, sends at 31% */
.lfa-input-t2 { animation: lfa-t2 16s step-end infinite; }
@keyframes lfa-t2 {
    0%  { max-width: 0; }
    26% { max-width: 8ch; }
    27% { max-width: 16ch; }
    29% { max-width: 24ch; }
    30% { max-width: 40ch; }
    31% { max-width: 0; }
}

/* "Continue" — types 48-51%, sends at 52% */
.lfa-input-t3 { animation: lfa-t3 16s step-end infinite; }
@keyframes lfa-t3 {
    0%  { max-width: 0; }
    48% { max-width: 3ch; }
    49% { max-width: 6ch; }
    51% { max-width: 10ch; }
    52% { max-width: 0; }
}

/* "G" — types 68-70%, sends at 71% */
.lfa-input-t4 { animation: lfa-t4 16s step-end infinite; }
@keyframes lfa-t4 {
    0%  { max-width: 0; }
    68% { max-width: 1ch; }
    71% { max-width: 0; }
}

/* ---------- PRACTICE ANIMATED FRAME (28s cinematic cycle) ---------- */

/* Single animated frame stays visible */
.pfa-frame { opacity: 1 !important; }

/* Remove gap — spacing handled per-message via margin */
.pfa-frame .pmw-schat-msgs { gap: 0; justify-content: flex-start; }

/* Stacked canvas cards wrapper */
.pfa-cards { position: relative; }
.pfa-card2, .pfa-card3, .pfa-card4 { position: absolute; top: 0; left: 0; right: 0; }

/* ---- Canvas card visibility (step-end = instant transitions) ---- */
/* Card 1: Q1 blank (0→19%), Card 2: Q1 correct (19→31%), Card 3: Q2 blank (31→74%), Card 4: Q2 correct (74→loop) */
.pfa-card1 { animation: pfa-c1 28s step-end infinite; }
.pfa-card2 { animation: pfa-c2 28s step-end infinite; }
.pfa-card3 { animation: pfa-c3 28s step-end infinite; }
.pfa-card4 { animation: pfa-c4 28s step-end infinite; }

@keyframes pfa-c1 {
    0%   { opacity: 1; }
    19%  { opacity: 0; }
}
@keyframes pfa-c2 {
    0%   { opacity: 0; }
    19%  { opacity: 1; }
    31%  { opacity: 0; }
}
@keyframes pfa-c3 {
    0%   { opacity: 0; }
    31%  { opacity: 1; }
    74%  { opacity: 0; }
}
@keyframes pfa-c4 {
    0%   { opacity: 0; }
    74%  { opacity: 1; }
}

/* ---- Option selection highlights (synced with chat at 10%/40%) ---- */
.pfa-opt1d { animation: pfa-s1d 28s step-end infinite; }
@keyframes pfa-s1d {
    0%  { border-color: #e5e7eb; background: #fff; }
    10% { border-color: #3b82f6; background: #eff6ff; }
}

.pfa-ltr1d { animation: pfa-l1d 28s step-end infinite; }
@keyframes pfa-l1d {
    0%  { background: #f3f4f6; color: #6b7280; }
    10% { background: #3b82f6; color: #fff; }
}

.pfa-opt3a { animation: pfa-s3a 28s step-end infinite; }
@keyframes pfa-s3a {
    0%  { border-color: #e5e7eb; background: #fff; }
    40% { border-color: #3b82f6; background: #eff6ff; }
}

.pfa-ltr3a { animation: pfa-l3a 28s step-end infinite; }
@keyframes pfa-l3a {
    0%  { background: #f3f4f6; color: #6b7280; }
    40% { background: #3b82f6; color: #fff; }
}

/* ---- Submit button: active → hover → press → release ---- */
.pfa-sub1 { animation: pfa-sb1 28s step-end infinite; }
@keyframes pfa-sb1 {
    0%  { background: #e5e7eb; color: #9ca3af; transform: scale(1); box-shadow: none; }
    10% { background: #3b82f6; color: #fff; transform: scale(1); box-shadow: none; }
    12% { background: #60a5fa; color: #fff; transform: scale(1); box-shadow: 0 0 3px rgba(59,130,246,0.5); }
    13% { background: #2563eb; color: #fff; transform: scale(0.92); box-shadow: none; }
    14% { background: #3b82f6; color: #fff; transform: scale(1); box-shadow: none; }
}

.pfa-sub3 { animation: pfa-sb3 28s step-end infinite; }
@keyframes pfa-sb3 {
    0%  { background: #e5e7eb; color: #9ca3af; transform: scale(1); box-shadow: none; }
    40% { background: #3b82f6; color: #fff; transform: scale(1); box-shadow: none; }
    42% { background: #60a5fa; color: #fff; transform: scale(1); box-shadow: 0 0 3px rgba(59,130,246,0.5); }
    43% { background: #2563eb; color: #fff; transform: scale(0.92); box-shadow: none; }
    44% { background: #3b82f6; color: #fff; transform: scale(1); box-shadow: none; }
}

/* ---- Chat message animations (step-end = instant show/hide, no slide) ---- */

/* msg1: AI greeting — visible from start */
.pfa-m1 { animation: pfa-m1 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m1 {
    0%  { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* msg2: User "D" — appears at 10% */
.pfa-m2 { animation: pfa-m2 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m2 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    10% { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* dots1: visible 14→17% (after submit press) */
.pfa-d1 { animation: pfa-d1 28s step-end infinite; overflow: hidden; }
@keyframes pfa-d1 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    14% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    17% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* msg3: AI reply 1 — appears at 17% */
.pfa-m3 { animation: pfa-m3 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m3 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    17% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* msg10: User "explain this simply to me" — appears at 23% */
.pfa-m10 { animation: pfa-m10 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m10 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    23% { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* dots5: visible 25→28% */
.pfa-d5 { animation: pfa-d5 28s step-end infinite; overflow: hidden; }
@keyframes pfa-d5 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    25% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    28% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* msg11: AI simple explanation — appears at 28% */
.pfa-m11 { animation: pfa-m11 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m11 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    28% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* msg4: User "A" — appears at 40% */
.pfa-m4 { animation: pfa-m4 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m4 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    40% { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* dots2: visible 44→47% (after submit press) */
.pfa-d2 { animation: pfa-d2 28s step-end infinite; overflow: hidden; }
@keyframes pfa-d2 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    44% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    47% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* msg5: AI reply 2 — appears at 47% */
.pfa-m5 { animation: pfa-m5 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m5 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    47% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* msg6: User "D" (2nd wrong) — appears at 57% */
.pfa-m6 { animation: pfa-m6 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m6 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    57% { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* dots3: visible 59→64% */
.pfa-d3 { animation: pfa-d3 28s step-end infinite; overflow: hidden; }
@keyframes pfa-d3 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    59% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    64% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* msg7: AI full explanation — appears at 64% */
.pfa-m7 { animation: pfa-m7 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m7 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    64% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* msg8: User "C" (correct) — appears at 74% */
.pfa-m8 { animation: pfa-m8 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m8 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    74% { opacity: 1; max-height: 20px; padding: 2px 3px; margin-bottom: 2px; }
}

/* dots4: visible 76→80% */
.pfa-d4 { animation: pfa-d4 28s step-end infinite; overflow: hidden; }
@keyframes pfa-d4 {
    0%  { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
    76% { opacity: 1; max-height: 15px; padding: 3px 4px; margin-bottom: 2px; }
    80% { opacity: 0; max-height: 0; padding: 0; margin-bottom: 0; }
}

/* msg9: AI confirms correct — appears at 80% */
.pfa-m9 { animation: pfa-m9 28s step-end infinite; overflow: hidden; }
@keyframes pfa-m9 {
    0%  { opacity: 0; max-height: 0; padding: 0 3px; margin-bottom: 0; }
    80% { opacity: 1; max-height: 50px; padding: 2px 3px; margin-bottom: 2px; }
}

/* ---- Placeholder hides during all typing phases ---- */
.pfa-placeholder { animation: pfa-ph 28s step-end infinite; }
@keyframes pfa-ph {
    0%  { opacity: 1; }
    8%  { opacity: 0; }
    10% { opacity: 1; }
    19% { opacity: 0; }
    23% { opacity: 1; }
    38% { opacity: 0; }
    40% { opacity: 1; }
    55% { opacity: 0; }
    57% { opacity: 1; }
    72% { opacity: 0; }
    74% { opacity: 1; }
}

/* Base style for all input text spans (no animation here) */
.pfa-input-text {
    position: absolute;
    top: 0;
    left: 2px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    max-width: 0;
    color: #111827;
    font-size: 3.5px;
}

/* t1: "D" — typed 8→10%, sent at 10% */
.pfa-t1 { animation: pfa-t1 28s step-end infinite; }
@keyframes pfa-t1 {
    0%  { max-width: 0; }
    8%  { max-width: 1ch; }
    10% { max-width: 0; }
}

/* t2: "explain this simply to me" (25 chars) — typewriter 19→22.5%, sent at 23% */
.pfa-t2 { animation: pfa-t2 28s step-end infinite; }
@keyframes pfa-t2 {
    0%     { max-width: 0; }
    19%    { max-width: 0; animation-timing-function: steps(25, end); }
    22.5%  { max-width: 25ch; }
    23%    { max-width: 0; }
}

/* t3: "A" — typed 38→40%, sent at 40% */
.pfa-t3 { animation: pfa-t3 28s step-end infinite; }
@keyframes pfa-t3 {
    0%  { max-width: 0; }
    38% { max-width: 1ch; }
    40% { max-width: 0; }
}

/* t4: "D" — typed 55→57%, sent at 57% */
.pfa-t4 { animation: pfa-t4 28s step-end infinite; }
@keyframes pfa-t4 {
    0%  { max-width: 0; }
    55% { max-width: 1ch; }
    57% { max-width: 0; }
}

/* t5: "C" — typed 72→74%, sent at 74% */
.pfa-t5 { animation: pfa-t5 28s step-end infinite; }
@keyframes pfa-t5 {
    0%  { max-width: 0; }
    72% { max-width: 1ch; }
    74% { max-width: 0; }
}

/* ---------- MODE MOCK RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .pmw-mode-body { height: 220px; }
}
/* 899px + 600px heights for .pmw-mode-body are set in the phone-frame section at end of file.
   Sidebar/chat layout is also handled there (snav hidden, schat compacted). */
@media (max-width: 600px) {
    .pmw-msg { font-size: 4.5px; }
    .pmw-card-qtext { font-size: 6px; }
    .pmw-card-opt { font-size: 5px; }
    .pmw-card-ltr { width: 9px; height: 9px; font-size: 4px; }
    .pmw-opts-grid { grid-template-columns: 1fr; }
}

/* Categories responsive - mobile */
@media (max-width: 768px) {
    .categories-header {
        padding: 0 20px 20px;
    }

    .categories-grid-wrapper {
        padding: 0 20px;
    }

    .course-categories {
        padding: 0.5rem 0 var(--space-lg);
    }

    .categories-grid {
        grid-template-columns: repeat(6, 65vw);
    }

    .category-image-card {
        aspect-ratio: 16/10;
    }

    .category-image-overlay {
        padding: var(--space-xl) var(--space-xl);
        background: rgba(0,0,0,0.45);
    }

    .category-image-title {
        font-size: 1.5rem;
    }

    .category-image-subtitle {
        font-size: 1rem;
    }

    .categories-nav-btn {
        width: 40px;
        height: 40px;
    }

    .categories-nav-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ========================================
   DEMO SECTION HEADER
   ======================================== */
.demo-section-header {
    text-align: center;
    padding: 0 20px 30px;
    margin-top: -30px;
    background: white;
}

.demo-section-title {
    font-family: var(--font-family);
    font-size: clamp(2rem, 5vw, 54px);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.demo-section-subtitle {
    font-family: var(--font-family);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--text-secondary);
    margin: 0;
    font-weight: 400;
}

@media (max-width: 768px) {
    .demo-section-header {
        padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
    }

    .demo-section-title {
        font-size: 2rem;
    }

    .demo-section-subtitle {
        font-size: 1rem;
    }
}

/* ========================================
   BOTTOM NAV BAR (Learn & Practice modes)
   Hidden on desktop, shown on mobile
   ======================================== */
.pmw-bottomnav {
    display: none;
}
.pmw-bottomnav,
.pmw-bottomnav * {
    box-sizing: border-box;
}

/* ========================================
   MOBILE PHONE FRAME (≤ 899px)
   Transforms Mac browser chrome into iPhone-style frame
   ======================================== */
@media (max-width: 899px) {

    /* --- Phone bezel --- */
    .platform-mock-window {
        max-width: 320px;
        border-radius: 32px;
        border: 3px solid #1a1a2e;
        box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
        position: relative;
        padding-bottom: 14px;       /* room for home indicator */
        overflow: visible;          /* let pseudo-elements show */
    }

    /* --- Taller body for phone proportions --- */
    .pmw-body,
    .pmw-mode-body {
        height: 280px;
    }

    /* --- Hide Mac chrome elements --- */
    .pmw-dots,
    .pmw-url {
        display: none;
    }

    /* --- Titlebar becomes iOS status bar --- */
    .pmw-titlebar {
        background: #fff;
        border-bottom: none;
        padding: 8px 16px 4px;
        justify-content: center;
        position: relative;
        border-radius: 29px 29px 0 0;  /* match inner edge of bezel */
    }

    /* Dynamic Island (centered pill) */
    .pmw-titlebar::before {
        content: '';
        display: block;
        width: 72px;
        height: 16px;
        background: #1a1a2e;
        border-radius: 10px;
    }

    /* "9:41" time display (left side) */
    .pmw-titlebar::after {
        content: '9:41';
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 9px;
        font-weight: 600;
        color: #1a1a2e;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    }

    /* --- Home indicator bar (bottom of phone) --- */
    .platform-mock-window::after {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 96px;
        height: 3px;
        background: #1a1a2e;
        border-radius: 3px;
    }

    /* Keep content clipped inside the rounded bezel */
    .pmw-body,
    .pmw-mode-body,
    .pmw-create-wrap {
        overflow: hidden;
    }

    /* --- Learn & Practice: Hide nav sidebar, reflow to column --- */
    .pmw-session {
        flex-direction: column;
    }
    .pmw-snav {
        display: none;
    }
    .pmw-scanvas {
        width: 100%;
        flex: 1;
        min-height: 0;
    }

    /* Chat panel becomes compact bottom strip */
    .pmw-schat {
        width: 100%;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        height: 52px;
        max-height: 52px;
        flex-shrink: 0;
    }
    .pmw-schat-hdr {
        display: none;
    }
    .pmw-schat-msgs {
        padding: 2px 4px;
        gap: 2px;
        overflow-y: auto;
        overflow-x: hidden;
        justify-content: flex-start;
    }
    .pmw-schat-msgs .pmw-msg {
        flex-shrink: 0;
    }
    .pmw-schat-input {
        display: none;
    }

    /* Bottom nav bar */
    .pmw-bottomnav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        height: 22px;
        background: #fff;
        border-top: 1px solid #e5e7eb;
        padding: 0 2px;
        flex-shrink: 0;
    }
    .pmw-bnav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        flex: 1;
        padding: 2px 0;
    }
    .pmw-bnav-btn svg {
        width: 7px;
        height: 7px;
        flex-shrink: 0;
    }
    .pmw-bnav-btn span {
        font-size: 3px;
        font-weight: 500;
        color: #111827;
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* Center mic button (raised circle) */
    .pmw-bnav-center {
        padding: 0;
    }
    .pmw-bnav-mic-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fffbeb;
    }
    .pmw-bnav-mic-circle svg {
        width: 7px;
        height: 7px;
    }
}

/* ========================================
   NARROWER PHONE FRAME (≤ 600px)
   ======================================== */
@media (max-width: 600px) {

    .platform-mock-window {
        max-width: 280px;
        border-radius: 28px;
        padding-bottom: 12px;
    }

    .pmw-titlebar {
        padding: 6px 14px 3px;
        border-radius: 25px 25px 0 0;
    }

    /* Smaller Dynamic Island */
    .pmw-titlebar::before {
        width: 60px;
        height: 14px;
        border-radius: 8px;
    }

    /* Smaller time */
    .pmw-titlebar::after {
        font-size: 8px;
        left: 16px;
    }

    /* Smaller home indicator */
    .platform-mock-window::after {
        width: 80px;
        height: 3px;
        bottom: 4px;
    }

    .pmw-body,
    .pmw-mode-body {
        height: 240px;
    }

    /* Smaller bottom nav */
    .pmw-bottomnav {
        height: 18px;
    }
    .pmw-bnav-btn svg {
        width: 6px;
        height: 6px;
    }
    .pmw-bnav-btn span {
        font-size: 2.5px;
    }
    .pmw-bnav-mic-circle {
        width: 12px;
        height: 12px;
    }
    .pmw-bnav-mic-circle svg {
        width: 6px;
        height: 6px;
    }

    /* Smaller chat strip */
    .pmw-schat {
        height: 42px;
        max-height: 42px;
    }
}