/* Shared Floppy product UI overrides for the learner and admin modules. */
:root {
  --floppy-blue: #147fd1;
  --floppy-blue-bright: #2d9cdb;
  --floppy-blue-pale: #eef8ff;
  --floppy-navy: #082453;
  --floppy-yellow: #f2c94c;
  --floppy-line: #d8e3ee;
  --floppy-muted: #607086;
  --floppy-shadow: 0 16px 44px rgba(25, 69, 112, .12);
}

body.lesson-app,
body.admin-app,
body.admin-login {
  font-family: "Manrope", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--floppy-navy);
  background: #f7fbff;
}

/* Learner module */
body.lesson-app { min-height: 100vh; display: block; padding: 0 28px 28px; background: #f7fbff; }
.lesson-app .container { width: min(100%, 1536px); max-width: none; }
.lesson-app .site-nav { min-height: 78px; margin: 0 -28px 20px; padding: 14px max(28px, calc((100vw - 1536px) / 2 + 28px)); border: 0; border-bottom: 1px solid var(--floppy-line); border-radius: 0; box-shadow: none; background: #fff; }
.lesson-app .site-nav-brand { color: var(--floppy-blue); font-size: 1.75rem; letter-spacing: -.04em; }
.lesson-app .site-nav-brand img { width: 45px; height: 45px; border: 0; }
.lesson-app .site-nav-link { color: var(--floppy-navy); background: transparent; border-radius: 10px; font-size: .95rem; }
.lesson-app .theme-toggle { border: 0; font: 700 .95rem Manrope, system-ui, sans-serif; cursor: pointer; }
.lesson-app .site-nav-link:hover { color: var(--floppy-blue); background: var(--floppy-blue-pale); }
.lesson-app .chat-container { height: calc(100vh - 162px); min-height: 640px; gap: 20px; overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.lesson-app .chat-left-panel { flex: 1; min-width: 0; overflow: hidden; border: 1px solid var(--floppy-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(25,69,112,.07); }
.lesson-app .chat-header { position: relative; min-height: 98px; display: flex; flex-direction: column; justify-content: center; padding: 24px 122px 22px 30px; color: var(--floppy-navy); background: #fff; border-bottom: 1px solid var(--floppy-line); }
.lesson-app .chat-header::before { content: ""; position: absolute; left: 30px; top: 27px; width: 46px; height: 46px; border-radius: 50%; background: var(--floppy-blue-pale); }
.lesson-app .chat-header::after { content: "📖"; position: absolute; left: 40px; top: 34px; font-size: 25px; }
.lesson-app .chat-header h2, .lesson-app .chat-header p { margin-left: 62px; color: var(--floppy-navy); }
.lesson-app .chat-header h2 { margin-bottom: 2px; font-size: 1.55rem; line-height: 1.2; }
.lesson-app .chat-header p { color: var(--floppy-muted); font-size: .9rem; opacity: 1; }
.lesson-progress { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); padding: 8px 14px; border-radius: 12px; color: var(--floppy-blue); background: var(--floppy-blue-pale); font-size: .9rem; font-weight: 800; }
.lesson-app .chat-messages-container { padding: 26px 28px 34px; background: #fbfdff; }
.lesson-app .message { margin-bottom: 20px; }
.lesson-app .avatar { width: 44px; height: 44px; margin-inline: 0 12px; border: 1px solid #e1e9f0; }
.lesson-app .message-bubble { width: auto; max-width: min(760px, calc(100% - 60px)); padding: 15px 18px; border-radius: 15px; box-shadow: none; font-family: inherit; font-size: .96rem; font-weight: 500; }
.lesson-app .message-bot .message-bubble { background: var(--floppy-blue-pale); border: 1px solid #e0edf6; border-top-left-radius: 5px; }
.lesson-app .message-user .message-bubble { background: #fff; border: 1px solid var(--floppy-line); border-top-right-radius: 5px; }
.lesson-app .lesson-options { gap: 9px; }
.lesson-app .option-btn { min-height: 48px; padding: 11px 45px 11px 16px; border: 1.5px solid var(--floppy-line); border-radius: 11px; color: var(--floppy-navy); background: #fff; font-family: inherit; font-size: .95rem; box-shadow: none; }
.lesson-app .option-btn:hover { transform: none; border-color: var(--floppy-blue); background: #f5fbff; box-shadow: none; }
.lesson-app .option-btn.correct { border-color: #36a852; color: #23883d; background: #f0fbf2; }
.lesson-app .option-btn.incorrect { border-color: #df5b52; color: #b83f37; background: #fff4f3; }
.lesson-app .lesson-feedback { padding: 12px 14px; border-radius: 11px; }
.lesson-app .input-answer input, .lesson-app .url-input { border: 1px solid var(--floppy-line); border-radius: 10px; font-family: inherit; }
.lesson-app .input-answer button, .lesson-app .url-btn { border-radius: 10px; color: #fff; background: var(--floppy-blue); font-family: inherit; }
.lesson-app .chat-right-panel { flex: 0 0 390px; min-width: 0; height: 100%; border: 1px solid #bfddf4; border-radius: 18px; background: var(--floppy-blue-pale); overflow: hidden; }
.lesson-app .right-panel-content { padding: 22px 24px; }
.lesson-app .owl-sidebar { min-height: 154px; display: grid; grid-template-columns: 116px 1fr; grid-template-rows: auto auto; align-items: center; gap: 3px 14px; padding: 0 0 18px; margin: 0; text-align: left; }
.lesson-app .owl-sidebar-image { grid-row: 1 / 3; width: 116px; height: 116px; margin: 0; border: 0; box-shadow: none; }
.lesson-app .owl-sidebar h3 { margin: 0; font-size: 1.18rem; }
.lesson-app .owl-hint { margin: 0; color: var(--floppy-muted); font-size: .8rem; }
.lesson-app .lesson-upload { padding: 18px 0; margin: 0; border-top: 1px solid #cce1f1; border-bottom: 1px solid #cce1f1; }
.lesson-app .upload-btn { min-height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 18px; margin-bottom: 17px; border: 2px dashed #7bbcec; border-radius: 14px; color: var(--floppy-blue); background: rgba(255,255,255,.72); font-size: .98rem; font-weight: 800; }
.lesson-app .upload-btn i { font-size: 1.75rem; }
.lesson-app .upload-btn small { display: block; max-width: 240px; color: var(--floppy-muted); font-size: .74rem; font-weight: 500; line-height: 1.45; }
.lesson-app .upload-btn.is-dragover { border-style: solid; background: #fff; transform: scale(1.01); }
.lesson-app .url-upload-container { margin-top: 0; }
.lesson-app .url-input-group { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.lesson-app .url-input { min-width: 0; padding: 11px 12px; font-size: .82rem; }
.lesson-app .url-btn { width: auto; padding: 11px 13px; font-size: .8rem; }
.lesson-app .saved-lessons-container { margin-top: 16px; }
.lesson-app .saved-lessons-container label { margin-bottom: 7px !important; color: var(--floppy-navy); font-size: .78rem; font-weight: 700; }
.lesson-app .scroll-settings { padding: 13px 0; margin: 0; border-top: 0; border-bottom: 1px solid #cce1f1; }
.lesson-app .scroll-toggle { justify-content: space-between; }
.lesson-app .scroll-toggle input[type="checkbox"] { order: 2; width: 39px; height: 22px; accent-color: var(--floppy-blue); }
.lesson-app .scroll-toggle label { font-family: inherit; font-size: .83rem; }
.lesson-app .lesson-controls { gap: 9px; margin-top: 15px; padding-top: 0; border: 0; }
.lesson-app .sidebar-btn { min-height: 49px; border: 1.5px solid var(--floppy-blue); border-radius: 11px; font-family: inherit; font-size: .9rem; font-weight: 800; }
.lesson-app .btn-accent { color: #fff; background: var(--floppy-blue); }
.lesson-app .btn-secondary { color: var(--floppy-blue); background: #fff; }
.lesson-app .lesson-image-card { border-radius: 13px; }

/* Lesson editor */
body.admin-app { min-height: 100vh; padding: 0 18px 28px; }
.admin-app .page { max-width: 1536px; display: grid; grid-template-columns: minmax(250px, .72fr) minmax(520px, 1.55fr) minmax(360px, .95fr); gap: 16px; margin: 0 auto; }
.admin-app .topbar { grid-column: 1 / -1; margin: 0 0 2px; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.admin-app .topbar-header { min-height: 76px; margin: 0 -18px; padding: 12px max(18px, calc((100vw - 1536px) / 2 + 18px)); color: var(--floppy-navy); background: #fff; border-bottom: 1px solid var(--floppy-line); flex-wrap: nowrap; }
.admin-brand { display: flex; align-items: center; gap: 13px; }
.admin-brand img { width: 50px; height: 50px; border-radius: 50%; }
.admin-app .topbar-header .ttl { color: var(--floppy-navy); font-size: 1.35rem; letter-spacing: -.025em; }
.admin-app .topbar-header .sub { color: var(--floppy-muted); opacity: 1; }
.admin-app .admin-nav { flex-wrap: nowrap; }
.admin-app .admin-nav .btn-on-blue { min-height: 42px; padding: 9px 12px; border: 0; border-left: 1px solid var(--floppy-line); border-radius: 0; color: var(--floppy-navy); background: transparent; }
.admin-app .admin-nav .btn-on-blue:hover { color: var(--floppy-blue); background: var(--floppy-blue-pale); transform: none; box-shadow: none; }
.admin-app .topbar-body { display: flex; flex-direction: column; padding: 16px 0 2px; }
.admin-app .ai-panel { order: 1; display: grid; grid-template-columns: 250px minmax(320px, 1fr) auto; align-items: center; gap: 10px 16px; margin: 0 0 12px; padding: 13px 16px; border: 1px solid #c5e0f5; border-radius: 13px; background: var(--floppy-blue-pale); }
.admin-app .ai-head { margin: 0; }
.admin-app .ai-title { color: var(--floppy-navy); font-size: 1rem; }
.admin-app .ai-sub { font-size: .72rem; }
.admin-app .ai-panel > label { display: none; }
.admin-app .ai-panel > textarea { min-height: 58px; grid-column: 2; grid-row: 1; }
.admin-app .ai-grid { grid-template-columns: 2fr 1fr 1fr; }
.admin-app .ai-actions { grid-column: 3; grid-row: 1; display: grid; justify-items: end; gap: 6px; margin: 0; }
.admin-app #btnGenerateLesson { margin-left: auto; }
.admin-app .ai-status { max-width: 250px; text-align: right; font-size: .65rem; }
.admin-app .ai-advanced { grid-column: 1 / -1; padding-top: 2px; }
.admin-app .ai-advanced summary { width: max-content; cursor: pointer; color: var(--floppy-blue); font-size: .73rem; font-weight: 800; }
.admin-app .ai-advanced[open] summary { margin-bottom: 8px; }
.admin-app .ai-advanced .ai-grid + .ai-grid { margin-top: 8px; }
.admin-app .grid-top { order: 2; grid-template-columns: .75fr 1.25fr; }
.admin-app .lesson-source { order: 3; }
.admin-app .toolbar { order: 4; padding: 12px 0 3px; border-top: 1px solid var(--floppy-line); }
.admin-app label { color: #53647b; font-size: .72rem; font-weight: 700; }
.admin-app input[type="text"], .admin-app input[type="url"], .admin-app input[type="password"], .admin-app input[type="number"], .admin-app textarea, .admin-app select { border: 1px solid #cfdbe6; border-radius: 10px; padding: 10px 11px; font-family: inherit; font-size: .82rem; }
.admin-app .btn { min-height: 40px; border-radius: 9px; padding: 10px 12px; font-family: inherit; font-size: .77rem; }
.admin-app .btn-primary { color: #fff; background: var(--floppy-blue); }
.admin-app .btn-accent { color: var(--floppy-navy); background: var(--floppy-yellow); }
.admin-app .btn-soft { color: var(--floppy-navy); background: #fff; border: 1px solid var(--floppy-line); }
.admin-app .btn-danger { border: 1px solid #ef6b61; color: #c13931; background: #fff; }
.admin-app .cols { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(500px, 1.45fr) minmax(350px, .9fr); gap: 16px; margin: 0; align-items: stretch; }
.admin-app .steps-wide { grid-column: 1; grid-row: 2; margin: 0; min-width: 0; }
.admin-app .panel { border: 1px solid var(--floppy-line); border-radius: 13px; box-shadow: 0 7px 20px rgba(25,69,112,.06); background: #fff; }
.admin-app .editor-panel { border: 1px solid var(--floppy-line); background: #fff; box-shadow: 0 7px 20px rgba(25,69,112,.06); }
.admin-app .editor-panel:hover { border-color: var(--floppy-line); }
.admin-app .panel-head, .admin-app .editor-panel .panel-head { min-height: 58px; padding: 13px 15px; color: var(--floppy-navy); background: #fff; border-bottom: 1px solid var(--floppy-line); }
.admin-app .panel-head .h { font-size: .94rem; }
.admin-app .panel-body { padding: 14px; }
.admin-app .step-editor-box { min-height: 536px; padding: 14px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.admin-app .steps-list { max-height: 660px; margin-top: 0; gap: 7px; }
.admin-app .step-card { padding: 10px; border: 1px solid var(--floppy-line); border-radius: 9px; box-shadow: none; }
.admin-app .step-card:hover { transform: none; border-color: #8fc7ef; box-shadow: none; }
.admin-app .step-card.active { border-color: var(--floppy-blue); color: var(--floppy-blue); background: var(--floppy-blue-pale); box-shadow: inset 3px 0 var(--floppy-blue); }
.admin-app .badge { padding: 4px 7px; border-radius: 6px; font-size: .58rem; }
.admin-app .icon-btn { min-height: 32px; padding: 6px 8px; border-radius: 7px; font-size: .68rem; }
.admin-app .preview-body { min-height: 594px; max-height: 660px; padding: 16px; background-color: var(--floppy-blue-pale); background-image: radial-gradient(circle at 18px 18px, rgba(45,156,219,.055) 2px, transparent 2px); background-size: 36px 36px; }
.admin-app .chat-bubble { max-width: 92%; padding: 12px 13px; border-radius: 12px; box-shadow: none; }
.admin-app .chat-bubble:hover { transform: none; box-shadow: none; }
.admin-app .chat-bubble.selected { outline: 2px solid rgba(45,156,219,.2); background: #fff; }
.admin-app .opt { padding: 8px 10px; border-radius: 8px; background: #fff; font-size: .75rem; }
.admin-app .divider { background: var(--floppy-line); }
.image-drop-zone { min-height: 150px; display: grid; place-items: center; gap: 8px; margin: 8px 0 12px; padding: 20px; border: 2px dashed #79bced; border-radius: 13px; color: var(--floppy-blue); background: var(--floppy-blue-pale); text-align: center; transition: .2s ease; }
.image-drop-zone.is-dragover { border-style: solid; background: #fff; transform: scale(1.01); }
.image-drop-zone .btn { margin: 0 auto; }
.image-drop-zone .form-sub { max-width: 330px; }
.admin-app dialog { border-radius: 16px; }

/* Admin login */
body.admin-login { padding: 24px; background: var(--floppy-blue-pale); }
.admin-login .login { border: 1px solid var(--floppy-line); border-radius: 20px; box-shadow: var(--floppy-shadow); }
.admin-login .brand { color: var(--floppy-blue); letter-spacing: -.03em; font-size: 1.3rem; }
.admin-login .mark { overflow: hidden; width: 54px; height: 54px; padding: 0; border-radius: 50%; background: #fff; }
.admin-login .mark img { width: 100%; height: 100%; object-fit: cover; }
.admin-login button { background: var(--floppy-blue); }

/* Admin lesson library */
body.library-app { margin: 0; min-height: 100vh; color: var(--floppy-navy); background: #f6f9fc; font-family: Manrope, system-ui, sans-serif; }
.library-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px max(22px, calc((100vw - 1420px) / 2)); border-bottom: 1px solid var(--floppy-line); background: #fff; }
.library-brand { display: flex; align-items: center; gap: 12px; color: var(--floppy-navy); text-decoration: none; font-size: 1.15rem; font-weight: 800; }
.library-brand img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.library-header nav { display: flex; align-items: center; gap: 6px; }
.library-header nav a { padding: 10px 12px; border-radius: 9px; color: #53647b; text-decoration: none; font-size: .78rem; font-weight: 800; }
.library-header nav a:hover, .library-header nav a.active { color: var(--floppy-blue); background: var(--floppy-blue-pale); }
.library-main { max-width: 1420px; margin: 0 auto; padding: 34px 22px 60px; }
.library-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.library-intro .eyebrow { margin: 0 0 5px; color: var(--floppy-blue); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.library-intro h1 { margin: 0; font-size: clamp(1.8rem,3vw,2.55rem); letter-spacing: -.045em; }
.library-intro p:not(.eyebrow) { max-width: 760px; margin: 8px 0 0; color: var(--floppy-muted); font-size: .92rem; line-height: 1.6; }
.library-primary, .group-create button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 16px; border: 0; border-radius: 10px; color: #fff; background: var(--floppy-blue); text-decoration: none; font: 800 .8rem Manrope,sans-serif; cursor: pointer; }
.library-layout { display: grid; grid-template-columns: minmax(500px,1fr) minmax(480px,1fr); align-items: start; gap: 18px; }
.library-panel { overflow: hidden; border: 1px solid var(--floppy-line); border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(25,69,112,.055); }
.library-panel-head { padding: 19px 20px 15px; border-bottom: 1px solid var(--floppy-line); }
.library-panel-head h2 { margin: 0; font-size: 1.08rem; }.library-panel-head h2 span { color: var(--floppy-blue); }
.library-panel-head p { margin: 4px 0 0; color: var(--floppy-muted); font-size: .72rem; }
.library-list, .group-list { display: grid; gap: 9px; padding: 14px; }
.lesson-row { display: grid; grid-template-columns: 34px minmax(160px,1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--floppy-line); border-radius: 11px; }
.lesson-order { display: grid; gap: 3px; }.lesson-order button, .lesson-actions button, .lesson-actions a, .group-head-actions button, .group-member button { min-height: 28px; padding: 5px 8px; border: 1px solid var(--floppy-line); border-radius: 7px; color: #53647b; background: #fff; text-decoration: none; font: 700 .66rem Manrope,sans-serif; cursor: pointer; }
button:disabled { opacity: .35; cursor: not-allowed; }.lesson-info h3 { margin: 0; font-size: .84rem; }.lesson-info p { margin: 3px 0 0; color: var(--floppy-muted); font-size: .66rem; }
.lesson-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }.lesson-actions a, .lesson-actions button { display: inline-flex; align-items: center; gap: 5px; }.danger { color: #bd3d35 !important; border-color: #f1c2bf !important; }
.group-create { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px; border-bottom: 1px solid var(--floppy-line); }.group-create input, .group-add select { min-width: 0; padding: 10px 11px; border: 1px solid #cfdbe6; border-radius: 9px; font: .78rem Manrope,sans-serif; }
.group-card { padding: 14px; border: 1px solid var(--floppy-line); border-radius: 12px; }.group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.group-head h3 { margin: 0; font-size: .9rem; }.group-head p { margin: 3px 0 0; color: var(--floppy-muted); font-size: .68rem; }.group-head-actions { display: flex; gap: 5px; }
.group-add { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin: 12px 0 9px; }.group-add button { border: 0; border-radius: 8px; color: #fff; background: var(--floppy-blue); font: 800 .7rem Manrope,sans-serif; cursor: pointer; }
.group-members { display: grid; gap: 5px; }.group-member { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border-radius: 8px; background: #f7fafc; font-size: .72rem; font-weight: 700; }.group-member>div { display: flex; gap: 3px; }
.library-empty { padding: 24px; border: 1px dashed #bfd7e9; border-radius: 10px; color: var(--floppy-muted); background: var(--floppy-blue-pale); text-align: center; font-size: .78rem; }.library-empty.small { padding: 13px; }
.library-toast { position: fixed; left: 50%; bottom: 22px; z-index: 20; transform: translate(-50%,12px); padding: 10px 14px; border-radius: 999px; color: #fff; background: #172033; font-size: .75rem; font-weight: 800; opacity: 0; pointer-events: none; transition: .2s; }.library-toast.show { opacity: 1; transform: translate(-50%,0); }
.drag-handle { display: inline-flex; align-items: center; justify-content: center; color: #8ca0b8; cursor: grab; }
.lesson-row[draggable="true"], .group-card[draggable="true"], .group-member[draggable="true"] { transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .18s ease; }
.is-dragging { opacity: .42; transform: scale(.985); }
.library-list.is-dragover, .group-list.is-dragover, .group-members.is-dragover { outline: 2px dashed var(--floppy-blue); outline-offset: -5px; border-radius: 12px; background: #f0f8ff; }
.group-title-wrap { display: flex; align-items: flex-start; gap: 9px; }
.group-member > span { display: inline-flex; align-items: center; gap: 7px; }
.group-member > span i { color: #9aacc0; cursor: grab; }
.assistant-switch { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; color: #53647b; font-size: .66rem; font-weight: 800; cursor: pointer; }
.assistant-switch input { width: 17px; height: 17px; margin: 0; accent-color: var(--floppy-blue); cursor: pointer; }
.assistant-switch.compact { margin: 0; white-space: nowrap; }
.group-member-controls { display: flex; align-items: center; gap: 8px; }

/* Controlled one-tap explanation for each lesson message. */
.lesson-app .message-bubble.has-lesson-help { padding-right: 54px; }
.lesson-help-trigger { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: inline-grid; place-items: center; margin: 0; padding: 0; border: 1px solid #9bcceb; border-radius: 50%; color: #12669d; background: #eef8ff; box-shadow: 0 5px 14px rgba(24,104,153,.1); font: 900 1rem/1 Inter,sans-serif; cursor: pointer; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.lesson-help-trigger:hover:not(:disabled) { transform: translateY(-1px) scale(1.04); border-color: #2d9cdb; background: #e1f3ff; }
.lesson-help-trigger:focus-visible { outline: 3px solid rgba(45,156,219,.25); outline-offset: 2px; }
.lesson-help-trigger.is-loading,.lesson-help-trigger.is-used { cursor: default; opacity: .72; }
.lesson-help-trigger.is-used { color: #218454; border-color: #9ed7b9; background: #ecfbf3; }
.lesson-help-panel { margin-top: 13px; padding: 15px; border: 1px solid #acd7ee; border-radius: 14px; color: #31455c; background: #f4fbff; box-shadow: inset 0 1px rgba(255,255,255,.65); }
.lesson-help-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #146c9f; font-size: .82rem; }
.lesson-help-panel > p { margin: 0 0 9px; color: #5b6f82; font-size: .78rem; }
.lesson-help-answer { color: #31455c; font-size: .82rem; line-height: 1.58; }
.lesson-help-answer p { margin: 0 0 9px; }
.lesson-help-answer p:last-child { margin-bottom: 0; }
.lesson-help-answer strong { color: #173d5c; font-weight: 900; }
.lesson-help-answer em { font-style: italic; }
.lesson-help-answer ul, .lesson-help-answer ol { display: grid; gap: 5px; margin: 7px 0 11px; padding-left: 21px; }
.lesson-help-answer li { padding-left: 2px; }
.lesson-help-answer h3, .lesson-help-answer h4 { margin: 10px 0 6px; color: #173d5c; font-size: .9rem; }
.lesson-help-answer blockquote { margin: 8px 0; padding: 8px 11px; border-left: 3px solid #78bce2; color: #48647b; background: rgba(255,255,255,.62); }
.lesson-help-answer code { padding: 1px 5px; border-radius: 5px; color: #155e8e; background: #e5f4fd; font: 700 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.lesson-help-answer-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.lesson-help-answer-actions button { min-height: 38px; padding: 8px 13px; border: 1px solid #b5ccdc; border-radius: 10px; color: #41586d; background: #fff; font: 800 .72rem Inter,sans-serif; cursor: pointer; }
.lesson-help-answer-actions .lesson-help-understood { color: #fff; border-color: #2487bd; background: #2487bd; }
.lesson-help-loading { display: flex; gap: 5px; padding: 7px 0 2px; }
.lesson-help-loading span { width: 7px; height: 7px; border-radius: 50%; background: #2d9cdb; animation: lessonHelpPulse .9s ease-in-out infinite alternate; }
.lesson-help-loading span:nth-child(2) { animation-delay: .16s; }.lesson-help-loading span:nth-child(3) { animation-delay: .32s; }
@keyframes lessonHelpPulse { to { opacity: .28; transform: translateY(-3px); } }

.step-ai-box { margin-top: 16px; padding: 14px; border: 1px solid #bcdcf3; border-radius: 12px; background: var(--floppy-blue-pale); }
.step-image-ai-box { margin-top: 16px; padding: 14px; border: 1px solid #dfc889; border-radius: 12px; background: #fffaf0; }
.step-image-ai-box textarea { min-height: 105px; background: #fff; }
.planned-image { margin: 10px 0; padding: 10px 12px; border: 1px dashed #d6b65e; border-radius: 10px; color: #80651c; background: #fffaf0; font-size: .75rem; font-weight: 800; }
.image-plan-state { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: #a06d00; font-size: .62rem; font-weight: 800; }.image-plan-state.ready { color: #21833b; }
.step-ai-box .step-ai-title { margin-bottom: 4px; color: var(--floppy-navy); font-size: .84rem; font-weight: 900; }.step-ai-box .step-ai-note { margin-bottom: 9px; color: var(--floppy-muted); font-size: .68rem; line-height: 1.45; }.step-ai-box textarea { min-height: 76px; background: #fff; }.step-ai-actions { display: flex; align-items: center; gap: 9px; margin-top: 8px; }.step-ai-status { color: var(--floppy-muted); font-size: .66rem; font-weight: 700; }

@media (max-width: 1180px) {
  .lesson-app .chat-right-panel { flex-basis: 340px; }
  .admin-app .page { grid-template-columns: 250px minmax(480px, 1fr); }
  .admin-app .ai-panel { grid-template-columns: 210px 1fr auto; }
  .admin-app .cols { grid-column: 2; grid-template-columns: 1fr; }
  .admin-app .preview-body { min-height: 420px; max-height: 500px; }
}
@media (max-width: 980px) {
  body.lesson-app { padding-inline: 14px; }
  .lesson-app .site-nav { margin-inline: -14px; padding-inline: 18px; }
  .lesson-app .chat-container { height: auto; min-height: 0; flex-direction: column; }
  .lesson-app .chat-left-panel { min-height: 660px; border-bottom: 1px solid var(--floppy-line); }
  .lesson-app .chat-right-panel { flex: none; width: 100%; height: auto; }
  .lesson-app .right-panel-content { max-height: none; }
  .admin-app .page { display: block; }
  .admin-app .topbar, .admin-app .cols, .admin-app .steps-wide { margin-bottom: 14px; }
  .admin-app .cols { grid-template-columns: 1fr; }
  .admin-app .steps-wide { grid-row: auto; }
  .admin-app .steps-list { max-height: 360px; }
  .library-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body.lesson-app { padding-bottom: 14px; }
  .lesson-app .site-nav { min-height: 68px; margin-bottom: 14px; }
  .lesson-app .site-nav-brand { font-size: 1.35rem; }.lesson-app .site-nav-brand img { width: 38px; height: 38px; }
  .lesson-app .site-nav-link { padding: 9px; }.lesson-app .site-nav-link i { margin: 0; }.lesson-app .site-nav-link { font-size: 0; }.lesson-app .site-nav-link i { font-size: 1rem; }
  .lesson-app .site-nav-link span { display: none; }.lesson-app .theme-toggle { width: 38px; font-size: 0; }
  .lesson-app .chat-left-panel { min-height: 620px; }
  .lesson-app .chat-header { min-height: 88px; padding: 18px 87px 17px 15px; }
  .lesson-app .chat-header::before { left: 15px; top: 23px; width: 40px; height: 40px; }.lesson-app .chat-header::after { left: 23px; top: 29px; font-size: 22px; }
  .lesson-app .chat-header h2, .lesson-app .chat-header p { margin-left: 51px; }.lesson-app .chat-header h2 { font-size: 1.18rem; }.lesson-app .chat-header p { max-width: 170px; font-size: .7rem; }
  .lesson-progress { right: 13px; padding: 6px 8px; font-size: .72rem; }
  .lesson-app .chat-messages-container { padding: 18px 12px 24px; }
  .lesson-app .message-bubble { max-width: calc(100% - 48px); padding: 12px; font-size: .86rem; }
  .lesson-app .avatar { width: 37px; height: 37px; margin-right: 8px; }
  .lesson-app .owl-sidebar { grid-template-columns: 90px 1fr; min-height: 120px; }.lesson-app .owl-sidebar-image { width: 90px; height: 90px; }
  .lesson-app .url-input-group { grid-template-columns: 1fr; }.lesson-app .url-btn { width: 100%; }
  .admin-app .topbar-header { flex-wrap: wrap; }.admin-app .admin-nav .nav-label { display: none; }.admin-app .ai-panel { grid-template-columns: 1fr; }.admin-app .ai-head, .admin-app .ai-panel > textarea, .admin-app .ai-actions { grid-column: 1; grid-row: auto; }.admin-app .ai-actions { justify-items: stretch; }.admin-app .ai-status { max-width: none; text-align: left; }.admin-app #btnGenerateLesson { width: 100%; margin: 0; }.admin-app .ai-grid, .admin-app .grid-top { grid-template-columns: 1fr; }
  .admin-app .toolbar .left, .admin-app .toolbar .right { width: 100%; }.admin-app .toolbar .btn { flex: 1; }
  .admin-app .step-editor-box { min-height: 0; }.admin-app .grid2 { grid-template-columns: 1fr; }
  .library-header { align-items: flex-start; flex-direction: column; }.library-header nav { width: 100%; overflow-x: auto; }.library-header nav a { flex: none; }.library-main { padding: 24px 12px 40px; }.library-intro { align-items: stretch; flex-direction: column; }.library-primary { width: 100%; }.lesson-row { grid-template-columns: 30px 1fr; }.lesson-actions { grid-column: 1 / -1; justify-content: flex-start; }.group-head { flex-direction: column; }.group-head-actions { width: 100%; }.group-create, .group-add { grid-template-columns: 1fr; }.group-create button, .group-add button { min-height: 40px; }
}

/* Magic-book learner theme — intentionally scoped so the admin stays unchanged. */
body.lesson-app[data-theme="dark"] {
  --lesson-night: #07142f;
  --lesson-navy: #0d1b3d;
  --lesson-surface: #102650;
  --lesson-surface-2: #183568;
  --lesson-cream: #fff3d0;
  --lesson-gold: #ffcc68;
  --lesson-coral: #ff6b5f;
  --lesson-aqua: #48d5df;
  --lesson-muted: #b7c4dd;
  --lesson-line: rgba(255, 224, 159, .19);
  min-height: 100vh;
  padding: 0 28px 28px;
  color: var(--lesson-cream);
  background-color: var(--lesson-night);
  background-image:
    radial-gradient(circle at 18% 18%, rgba(56, 94, 181, .24), transparent 32%),
    radial-gradient(circle at 87% 70%, rgba(105, 67, 181, .19), transparent 31%),
    radial-gradient(circle, rgba(255, 210, 117, .18) 1px, transparent 1.5px);
  background-size: auto, auto, 74px 74px;
  color-scheme: dark;
  transition: color .25s ease, background-color .25s ease;
}
.lesson-app[data-theme="dark"] .site-nav {
  min-height: 82px;
  margin: 0 -28px 20px;
  padding: 13px max(28px, calc((100vw - 1536px) / 2 + 28px));
  border-bottom: 1px solid var(--lesson-line);
  color: var(--lesson-cream);
  background: rgba(6, 17, 40, .76);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}
.lesson-app[data-theme="dark"] .site-nav-brand { color: var(--lesson-cream); font-size: 1.55rem; }
.lesson-app[data-theme="dark"] .site-nav-brand img { width: 50px; height: 50px; border: 1px solid rgba(255, 204, 104, .38); object-fit: cover; box-shadow: 0 0 26px rgba(255, 186, 63, .18); }
.lesson-app[data-theme="dark"] .site-nav-link { color: #dce5f4; border: 1px solid transparent; background: transparent; }
.lesson-app[data-theme="dark"] .site-nav-link:hover { color: var(--lesson-gold); border-color: var(--lesson-line); background: rgba(255, 204, 104, .07); }
.lesson-app[data-theme="dark"] .chat-container { height: calc(100vh - 130px); min-height: 690px; gap: 20px; }
.lesson-app[data-theme="dark"] .chat-left-panel { border: 1px solid var(--lesson-line); border-radius: 24px; background: var(--lesson-surface); box-shadow: 0 24px 68px rgba(0, 0, 0, .32); }
.lesson-app[data-theme="dark"] .chat-header { min-height: 106px; padding: 23px 132px 22px 32px; color: var(--lesson-cream); border-bottom: 1px solid var(--lesson-line); background: linear-gradient(135deg, rgba(24, 53, 104, .96), rgba(13, 30, 68, .98)); }
.lesson-app[data-theme="dark"] .chat-header::before { left: 30px; top: 29px; width: 50px; height: 50px; border: 1px solid rgba(255, 204, 104, .34); background: rgba(255, 204, 104, .1); box-shadow: 0 0 26px rgba(255, 184, 52, .12); }
.lesson-app[data-theme="dark"] .chat-header::after { content: "✦"; left: 45px; top: 37px; color: var(--lesson-gold); font-size: 25px; text-shadow: 0 0 16px rgba(255, 204, 104, .75); }
.lesson-app[data-theme="dark"] .chat-header h2, .lesson-app[data-theme="dark"] .chat-header p { margin-left: 66px; color: var(--lesson-cream); }
.lesson-app[data-theme="dark"] .chat-header h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.85rem; letter-spacing: -.025em; }
.lesson-app[data-theme="dark"] .chat-header p { color: var(--lesson-muted); font-size: .86rem; }
.lesson-app[data-theme="dark"] .lesson-progress { color: var(--lesson-gold); border: 1px solid rgba(255, 204, 104, .28); background: rgba(255, 204, 104, .08); box-shadow: inset 0 1px rgba(255, 255, 255, .07); }
.lesson-app[data-theme="dark"] .chat-messages-container {
  padding: 28px 30px 38px;
  background-color: #0b1d40;
  background-image: radial-gradient(circle, rgba(255, 213, 128, .13) 1px, transparent 1.5px);
  background-size: 56px 56px;
  scrollbar-color: rgba(255, 204, 104, .28) transparent;
}
.lesson-app[data-theme="dark"] .avatar { width: 46px; height: 46px; border: 1px solid rgba(255, 204, 104, .34); background: #0c1f46; box-shadow: 0 0 22px rgba(255, 187, 55, .12); }
.lesson-app[data-theme="dark"] .avatar img { object-fit: cover; }
.lesson-app[data-theme="dark"] .message-bubble { color: #f8f2df; border-radius: 18px; font-size: .95rem; box-shadow: 0 12px 28px rgba(0, 0, 0, .16); }
.lesson-app[data-theme="dark"] .message-bot .message-bubble { color: #f5f0e5; border: 1px solid rgba(255, 221, 155, .16); border-top-left-radius: 6px; background: linear-gradient(145deg, rgba(28, 60, 116, .96), rgba(20, 45, 91, .96)); }
.lesson-app[data-theme="dark"] .message-user .message-bubble { color: #061b30; border: 0; border-top-right-radius: 6px; background: linear-gradient(135deg, #77e2e5, #4bc5d7); }
.lesson-app[data-theme="dark"] .message-time { color: #8495b4; }
.lesson-app[data-theme="dark"] .lesson-options { gap: 10px; }
.lesson-app[data-theme="dark"] .option-btn { min-height: 50px; color: #f0eadc; border: 1px solid rgba(255, 231, 180, .19); border-radius: 14px; background: rgba(255, 255, 255, .055); box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.lesson-app[data-theme="dark"] .option-btn:hover { transform: translateY(-2px); color: var(--lesson-gold); border-color: rgba(255, 204, 104, .58); background: rgba(255, 204, 104, .08); }
.lesson-app[data-theme="dark"] .option-btn.correct { color: #d8ffe4; border-color: #55c77c; background: rgba(60, 173, 100, .2); }
.lesson-app[data-theme="dark"] .option-btn.incorrect { color: #ffd8d3; border-color: #e86e64; background: rgba(211, 74, 65, .18); }
.lesson-app[data-theme="dark"] .lesson-feedback { color: #f6ebcd; border: 1px solid var(--lesson-line); background: rgba(255, 204, 104, .08); }
.lesson-app[data-theme="dark"] .input-answer input, .lesson-app[data-theme="dark"] .url-input { color: #fff4d8; border: 1px solid rgba(255, 226, 164, .24); border-radius: 13px; background: rgba(5, 16, 39, .72); box-shadow: inset 0 2px 7px rgba(0, 0, 0, .22); }
.lesson-app[data-theme="dark"] .input-answer input::placeholder, .lesson-app[data-theme="dark"] .url-input::placeholder { color: #8291ad; }
.lesson-app[data-theme="dark"] .input-answer input:focus, .lesson-app[data-theme="dark"] .url-input:focus { border-color: var(--lesson-gold); box-shadow: 0 0 0 3px rgba(255, 204, 104, .12); }
.lesson-app[data-theme="dark"] .input-answer button, .lesson-app[data-theme="dark"] .url-btn { color: #fff; border: 0; border-radius: 13px; background: linear-gradient(135deg, #ff7863, #ef5754); box-shadow: 0 10px 22px rgba(255, 92, 82, .24); }
.lesson-app[data-theme="dark"] .chat-right-panel { flex-basis: 400px; border: 1px solid var(--lesson-line); border-radius: 24px; background: linear-gradient(165deg, rgba(21, 47, 97, .97), rgba(13, 27, 61, .98)); box-shadow: 0 24px 68px rgba(0, 0, 0, .3); }
.lesson-app[data-theme="dark"] .right-panel-content { padding: 22px 24px; }
.lesson-app[data-theme="dark"] .owl-sidebar { min-height: 177px; grid-template-columns: 142px 1fr; gap: 3px 15px; padding-bottom: 20px; }
.lesson-app[data-theme="dark"] .owl-sidebar-image { width: 142px; height: 142px; border: 1px solid rgba(255, 204, 104, .24); border-radius: 24px; background: #091a3c; box-shadow: 0 0 34px rgba(255, 181, 52, .13); }
.lesson-app[data-theme="dark"] .owl-sidebar-image img { width: 100%; height: 100%; border-radius: 23px; object-fit: cover; }
.lesson-app[data-theme="dark"] .owl-sidebar h3 { color: var(--lesson-cream); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.42rem; line-height: 1.05; }
.lesson-app[data-theme="dark"] .owl-hint { color: var(--lesson-muted); }
.lesson-app[data-theme="dark"] .lesson-upload { border-color: var(--lesson-line); }
.lesson-app[data-theme="dark"] .upload-btn { min-height: 138px; color: var(--lesson-gold); border: 1.5px dashed rgba(255, 204, 104, .5); border-radius: 18px; background: rgba(255, 204, 104, .055); box-shadow: inset 0 1px rgba(255, 255, 255, .04); }
.lesson-app[data-theme="dark"] .upload-btn small { color: var(--lesson-muted); }
.lesson-app[data-theme="dark"] .upload-btn:hover, .lesson-app[data-theme="dark"] .upload-btn.is-dragover { border-style: solid; background: rgba(255, 204, 104, .1); }
.lesson-app[data-theme="dark"] .saved-lessons-container label { color: var(--lesson-cream); }
.lesson-app[data-theme="dark"] .url-input option { color: #1b2541; background: #fff6dc; }
.lesson-app[data-theme="dark"] .scroll-settings { border-color: var(--lesson-line); }
.lesson-app[data-theme="dark"] .scroll-toggle label { color: var(--lesson-muted); }
.lesson-app[data-theme="dark"] .scroll-toggle input[type="checkbox"] { accent-color: var(--lesson-coral); }
.lesson-app[data-theme="dark"] .sidebar-btn { min-height: 51px; border-radius: 14px; }
.lesson-app[data-theme="dark"] .btn-accent { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff7863, #ef5754); box-shadow: 0 12px 28px rgba(255, 92, 82, .25); }
.lesson-app[data-theme="dark"] .btn-secondary { color: var(--lesson-gold); border-color: rgba(255, 204, 104, .32); background: rgba(255, 204, 104, .055); }
.lesson-app[data-theme="dark"] .lesson-image-card { border: 1px solid var(--lesson-line); border-radius: 18px; background: #0c2148; box-shadow: 0 18px 42px rgba(0, 0, 0, .25); }
.lesson-app[data-theme="dark"] .lesson-image-card img { border-radius: 17px; }
.lesson-app[data-theme="dark"] .video-container, .lesson-app[data-theme="dark"] .iframe-container { border: 1px solid var(--lesson-line); border-radius: 18px; background: #081831; }
.lesson-app[data-theme="dark"] .lesson-help-trigger { color: #ffe2a2; border-color: rgba(255,204,104,.36); background: rgba(255,204,104,.08); }
.lesson-app[data-theme="dark"] .lesson-help-trigger:hover { color: #fff3d0; border-color: rgba(255,204,104,.72); background: rgba(255,204,104,.14); }
.lesson-app[data-theme="dark"] .lesson-help-panel { color: #f5f0e5; border-color: rgba(255,221,155,.22); background: rgba(5,16,39,.55); }
.lesson-app[data-theme="dark"] .lesson-help-title { color: var(--lesson-gold); }
.lesson-app[data-theme="dark"] .lesson-help-panel > p { color: #c4d0e4; }
.lesson-app[data-theme="dark"] .lesson-help-answer { color: #f4ead4; }
.lesson-app[data-theme="dark"] .lesson-help-answer strong, .lesson-app[data-theme="dark"] .lesson-help-answer h3, .lesson-app[data-theme="dark"] .lesson-help-answer h4 { color: #fff3d0; }
.lesson-app[data-theme="dark"] .lesson-help-answer blockquote { color: #d7e0ef; border-left-color: var(--lesson-gold); background: rgba(255,255,255,.045); }
.lesson-app[data-theme="dark"] .lesson-help-answer code { color: #ffe2a2; background: rgba(255,204,104,.1); }
.lesson-app[data-theme="dark"] .lesson-help-answer-actions button { color: #f4ead4; border-color: rgba(255,226,164,.27); background: rgba(255,255,255,.07); }
.lesson-app[data-theme="dark"] .lesson-help-answer-actions .lesson-help-understood { color: #081a31; border-color: var(--lesson-gold); background: var(--lesson-gold); }
.lesson-app[data-theme="dark"] .lesson-help-trigger.is-used { color: #b9f4d1; border-color: rgba(113,220,157,.38); background: rgba(80,190,125,.12); }
.lesson-app[data-theme="dark"] .lesson-help-loading span { background: var(--lesson-gold); }

@media (max-width: 980px) {
  body.lesson-app[data-theme="dark"] { padding-inline: 14px; }
  .lesson-app[data-theme="dark"] .site-nav { margin-inline: -14px; padding-inline: 18px; }
  .lesson-app[data-theme="dark"] .chat-container { height: auto; }
  .lesson-app[data-theme="dark"] .chat-right-panel { width: 100%; }
}
@media (max-width: 700px) {
  .lesson-app[data-theme="dark"] .site-nav { min-height: 70px; }
  .lesson-app[data-theme="dark"] .chat-left-panel, .lesson-app[data-theme="dark"] .chat-right-panel { border-radius: 19px; }
  .lesson-app[data-theme="dark"] .chat-header { min-height: 94px; padding: 18px 86px 17px 14px; }
  .lesson-app[data-theme="dark"] .chat-header::before { left: 14px; top: 25px; width: 42px; height: 42px; }
  .lesson-app[data-theme="dark"] .chat-header::after { left: 27px; top: 31px; font-size: 22px; }
  .lesson-app[data-theme="dark"] .chat-header h2, .lesson-app[data-theme="dark"] .chat-header p { margin-left: 52px; }
  .lesson-app[data-theme="dark"] .chat-header h2 { font-size: 1.28rem; }
  .lesson-app[data-theme="dark"] .chat-messages-container { padding: 19px 12px 28px; }
  .lesson-app[data-theme="dark"] .owl-sidebar { grid-template-columns: 104px 1fr; }
  .lesson-app[data-theme="dark"] .owl-sidebar-image { width: 104px; height: 104px; border-radius: 19px; }
  .lesson-app[data-theme="dark"] .owl-sidebar-image img { border-radius: 18px; }
}