/* Fonts: system stack — no network fetch, works fully offline */

  :root{
    --board:#16302A;
    --board-dark:#0F221D;
    --chalk:#F5F1E6;
    --paper:#FBF8F0;
    --rule:#C9CFE0;
    --margin:#B5432E;
    --marigold:#E8A33D;
    --marigold-deep:#C97F1E;
    --ink:#2B2620;
    --ink-soft:#5B5346;
    --shadow-sm:0 2px 6px rgba(15,34,29,0.12);
    --shadow-md:0 8px 24px rgba(15,34,29,0.16);
    --shadow-lg:0 20px 50px rgba(0,0,0,0.4);
    --r-sm:6px;
    --r-md:10px;
    --r-lg:16px;
    --ease:cubic-bezier(.2,.7,.3,1);
    --font-ui:'Aptos','Segoe UI Variable','Segoe UI',Roboto,'Noto Sans',Arial,sans-serif;
    --font-display:'Aptos Display','Aptos','Segoe UI Variable Display','Segoe UI Variable','Segoe UI',Roboto,'Noto Sans',Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:var(--font-ui);
    background:var(--board);
    color:var(--ink);
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
    overflow:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  /* Header — chalkboard */
  header{
    background:linear-gradient(180deg, var(--board) 0%, var(--board-dark) 100%);
    color:var(--chalk);
    padding:14px 24px;
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
    border-bottom:3px solid var(--marigold);
    box-shadow:var(--shadow-md);
    position:relative;
    z-index:5;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .brand-logo-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:16px;
    background:rgba(255,255,255,0.96);
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
  }
  .brand-logo{
    display:block;
    height:56px;
    width:auto;
    max-width:min(340px, 48vw);
  }
  .brand-text{display:none;}
  header h1{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.35rem;
    margin:0;
    letter-spacing:0.01em;
  }
  header .sub{
    font-size:0.76rem;
    color:#A9C2B4;
    font-family:var(--font-ui);
    letter-spacing:0.02em;
  }
  .curriculum-chip{font-size:0.68rem;color:#DCE8E0;border:1px solid rgba(220,232,224,.25);background:rgba(255,255,255,.05);padding:5px 9px;border-radius:999px;white-space:nowrap;}
  .curriculum-chip.ok{color:#CFEBCF;border-color:rgba(170,220,170,.42);}
  .curriculum-chip.warn{color:#FFE2A8;border-color:rgba(232,163,61,.55);}
  @media(max-width:760px){.curriculum-chip{display:none;}}
  header .header-actions{
    margin-left:auto;
    display:flex;
    gap:8px;
  }
  header .reset, header .browse{
    background:rgba(245,241,230,0.06);
    border:1px solid rgba(245,241,230,0.22);
    color:var(--chalk);
    font-family:var(--font-ui);
    font-weight:500;
    font-size:0.76rem;
    padding:8px 13px;
    border-radius:var(--r-sm);
    cursor:pointer;
    transition:background 0.15s var(--ease), transform 0.15s var(--ease), border-color 0.15s;
    white-space:nowrap;
  }
  header .browse{
    background:rgba(232,163,61,0.18);
    border-color:rgba(232,163,61,0.6);
    font-weight:600;
  }
  header .reset:hover, header .browse:hover{
    background:rgba(245,241,230,0.14);
    transform:translateY(-1px);
    border-color:rgba(245,241,230,0.4);
  }
  header .browse:hover{background:rgba(232,163,61,0.3); border-color:var(--marigold);}
  @media (max-width:640px){
    header{padding:12px 14px; gap:8px; padding-top:calc(12px + env(safe-area-inset-top));}
    header .sub{display:none;}
    header h1{font-size:1.15rem;}
    header .reset, header .browse{padding:7px 9px; font-size:0.68rem;}
    .brand-logo{height:44px; max-width:min(250px, 44vw);}
    .brand-logo-wrap{padding:5px 8px; border-radius:14px;}
    .composer textarea{font-size:16px;}
  }

  /* Onboarding */
  .onboarding-overlay{
    position:fixed;
    inset:0;
    background:linear-gradient(160deg, var(--board) 0%, var(--board-dark) 100%);
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .onboarding-overlay.hidden{display:none;}
  .onboarding-card{
    background:var(--paper);
    width:100%;
    max-width:380px;
    border-radius:var(--r-lg);
    padding:28px 26px;
    box-shadow:var(--shadow-lg);
    text-align:center;
    animation:pop 0.25s var(--ease);
  }
  .onboarding-mark{
    width:100%;
    max-width:280px;
    margin:0 auto 16px;
  }
  .onboarding-logo{
    display:block;
    width:100%;
    height:auto;
  }
  .onboarding-card h2{
    font-family:var(--font-display);
    font-size:1.35rem;
    margin:0 0 8px;
    color:var(--ink);
  }
  .onboarding-card p{
    font-size:0.85rem;
    color:var(--ink-soft);
    margin:0 0 18px;
    line-height:1.5;
  }
  .onboarding-card label{
    display:block;
    text-align:left;
    font-size:0.76rem;
    font-weight:600;
    color:var(--ink-soft);
    margin-bottom:5px;
  }
  .onboarding-card input, .onboarding-card select{
    width:100%;
    padding:11px 13px;
    border:1px solid var(--rule);
    border-radius:var(--r-sm);
    font-family:var(--font-ui);
    font-size:0.95rem;
    color:var(--ink);
    background:#fff;
    margin-bottom:16px;
  }
  .onboarding-card input:focus, .onboarding-card select:focus{
    outline:none;
    border-color:var(--marigold);
    box-shadow:0 0 0 3px rgba(232,163,61,0.22);
  }
  .onboarding-card button{
    width:100%;
    background:linear-gradient(135deg, var(--marigold) 0%, var(--marigold-deep) 100%);
    color:#3A2408;
    border:none;
    font-family:var(--font-ui);
    font-weight:700;
    font-size:0.95rem;
    padding:13px;
    border-radius:24px;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:transform 0.15s var(--ease), filter 0.15s;
  }
  .onboarding-card button:hover:not(:disabled){filter:brightness(1.06); transform:translateY(-1px);}
  .onboarding-card button:disabled{opacity:0.5; cursor:not-allowed;}
  .data-summary{
    background:#F1ECDD;
    border:1px solid var(--rule);
    border-radius:var(--r-sm);
    padding:10px 12px;
    font-size:0.8rem;
    line-height:1.6;
    margin-bottom:6px;
  }
  .privacy-actions{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px;}
  .pa-btn{
    font-family:var(--font-ui);
    font-size:0.8rem;
    font-weight:600;
    padding:9px 14px;
    border-radius:16px;
    cursor:pointer;
    border:1px solid var(--rule);
    background:#F1ECDD;
    color:var(--ink);
  }
  .pa-btn:hover{background:#E8E1CC;}
  .pa-btn.danger{background:#FBEAE6; border-color:#E8B79A; color:var(--margin);}
  .pa-btn.danger:hover{background:#F6DDD6;}
  .offline-promise{
    background:#E9F3EA;
    border:1px solid #BFE0C4;
    border-radius:var(--r-sm);
    padding:9px 12px;
    font-size:0.78rem !important;
    color:#2F6B3A !important;
    line-height:1.45;
    margin-bottom:16px !important;
  }
  .optional-tag{    font-weight:400;
    color:#9A9078;
    font-style:italic;
  }
  .onboarding-note{    font-size:0.7rem !important;
    color:#9A9078 !important;
    font-style:italic;
    margin:12px 0 0 !important;
  }

  /* Chapter-end nudge & break reminder */
  .nudge-banner{
    display:none;
    align-items:center;
    gap:12px;
    background:#FBEFE0;
    border-bottom:1px solid #EBCDA0;
    padding:10px 24px;
    font-size:0.82rem;
    color:var(--ink);
    flex-shrink:0;
    flex-wrap:wrap;
  }
  .nudge-banner.show{display:flex;}
  .nudge-banner .nudge-actions{display:flex; gap:8px; margin-left:auto;}
  .nudge-banner button{
    font-family:var(--font-ui);
    font-size:0.78rem;
    font-weight:600;
    padding:6px 12px;
    border-radius:14px;
    cursor:pointer;
    border:1px solid transparent;
  }
  .nudge-banner .btn-primary{background:var(--marigold-deep); color:#fff;}
  .nudge-banner .btn-secondary{background:none; border-color:var(--ink-soft); color:var(--ink-soft);}
  /* Chapter-first suggestion, offered in the conversation rather than as page
     chrome, because study mode removes the chrome. */
  .sequence-choice{
    background:var(--paper); border:1px solid var(--rule);
    border-radius:var(--r-md); padding:14px 16px; margin-bottom:16px;
    max-width:76%; box-shadow:var(--shadow-sm);
  }
  .sequence-choice p{margin:0; font-size:0.88rem; line-height:1.6;}
  .sequence-choice-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
  @media (max-width:640px){ .sequence-choice{max-width:100%;} }

  .break-toast{
    position:absolute;
    top:16px;
    left:50%;
    transform:translateX(-50%) translateY(-14px);
    background:var(--board-dark);
    color:var(--chalk);
    border:1px solid var(--marigold);
    border-radius:var(--r-md);
    padding:12px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:0.82rem;
    box-shadow:var(--shadow-lg);
    z-index:15;
    max-width:88%;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .break-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
    pointer-events:auto;
  }
  .break-toast button{
    background:var(--marigold);
    color:#3A2408;
    border:none;
    font-weight:700;
    font-size:0.75rem;
    padding:6px 12px;
    border-radius:14px;
    cursor:pointer;
    flex-shrink:0;
    white-space:nowrap;
  }
  @media (max-width:640px){
    .nudge-banner{padding:9px 14px;}
    .onboarding-card{padding:24px 20px;}
  }
  .breadcrumb{
    display:none;
    align-items:center;
    gap:10px;
    background:var(--board-dark);
    color:var(--chalk);
    font-size:0.78rem;
    padding:9px 24px;
    border-bottom:1px solid rgba(232,163,61,0.25);
    flex-shrink:0;
  }
  .breadcrumb.active{display:flex;}
  .breadcrumb .tag{
    font-family:var(--font-display);
    font-style:italic;
    color:var(--marigold);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .breadcrumb .nav-group{
    display:flex;
    gap:6px;
    margin-left:auto;
    flex-shrink:0;
  }
  .breadcrumb .nav-btn{
    background:rgba(245,241,230,0.08);
    border:1px solid rgba(245,241,230,0.25);
    color:var(--chalk);
    font-family:var(--font-ui);
    font-size:0.72rem;
    font-weight:600;
    padding:6px 11px;
    border-radius:14px;
    cursor:pointer;
    transition:background 0.15s var(--ease), transform 0.15s var(--ease);
    white-space:nowrap;
  }
  .breadcrumb .nav-btn:hover:not(:disabled){background:rgba(232,163,61,0.24); transform:translateY(-1px);}
  .breadcrumb .nav-btn:disabled{opacity:0.35; cursor:not-allowed;}
  .breadcrumb button.exit{
    background:none;
    border:none;
    color:#A9C2B4;
    font-size:0.72rem;
    cursor:pointer;
    text-decoration:underline;
    padding:0;
    flex-shrink:0;
  }
  .breadcrumb button.exit:hover{color:var(--chalk);}
  @media (max-width:640px){
    .breadcrumb{padding:8px 12px; flex-wrap:wrap;}
    .breadcrumb .tag{max-width:150px;}
    .breadcrumb .nav-btn{padding:8px 10px; min-height:36px;}
  }

  /* Chapter browser modal */
  .modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,34,29,0.72);
    backdrop-filter:blur(2px);
    z-index:50;
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .modal-overlay.open{display:flex; animation:fadeIn 0.18s var(--ease);}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  .modal{
    background:var(--paper);
    width:100%;
    max-width:640px;
    max-height:82vh;
    border-radius:var(--r-lg);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow-lg);
    animation:pop 0.2s var(--ease);
  }
  @keyframes pop{from{opacity:0; transform:scale(0.97) translateY(6px);} to{opacity:1; transform:scale(1) translateY(0);}}
  .modal-head{
    background:var(--board);
    color:var(--chalk);
    padding:14px 20px;
    display:flex;
    align-items:center;
    border-bottom:3px solid var(--marigold);
  }
  .modal-head h2{
    font-family:var(--font-display);
    font-size:1.1rem;
    margin:0;
    font-weight:600;
  }
  .modal-head .close-x{
    margin-left:auto;
    background:none;
    border:none;
    color:var(--chalk);
    font-size:1.2rem;
    cursor:pointer;
    line-height:1;
  }
  .modal-body{
    display:flex;
    overflow:hidden;
    flex:1;
  }
  .class-rail{
    width:110px;
    flex-shrink:0;
    background:#F1ECDD;
    overflow-y:auto;
    border-right:1px solid var(--rule);
  }
  .class-rail button{
    display:block;
    width:100%;
    text-align:left;
    padding:11px 14px;
    background:none;
    border:none;
    border-bottom:1px solid var(--rule);
    font-family:var(--font-ui);
    font-size:0.82rem;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .class-rail button:hover{background:rgba(232,163,61,0.12);}
  .class-rail button.active{
    background:var(--paper);
    color:var(--margin);
    font-weight:700;
    border-right:3px solid var(--margin);
    margin-right:-1px;
  }
  .chapter-list{
    flex:1;
    overflow-y:auto;
    padding:6px 0;
  }
  .chapter-list button{
    display:flex;
    align-items:baseline;
    gap:10px;
    width:100%;
    text-align:left;
    padding:11px 20px;
    background:none;
    border:none;
    border-bottom:1px dashed var(--rule);
    font-family:var(--font-ui);
    font-size:0.88rem;
    color:var(--ink);
    cursor:pointer;
  }
  .chapter-list button:hover{background:rgba(232,163,61,0.10);}
  .chapter-list .num{
    font-family:var(--font-display);
    font-style:italic;
    color:var(--margin);
    font-size:0.78rem;
    flex-shrink:0;
    width:18px;
  }
  .status-badge{
    margin:8px 16px 4px;
    padding:9px 12px;
    border-radius:5px;
    font-size:0.74rem;
    line-height:1.4;
    color:var(--ink-soft);
  }
  .status-badge.confirmed{background:#E9F3EA; border:1px solid #BFE0C4;}
  .status-badge.legacy{background:#FBEFE0; border:1px solid #EBCDA0;}
  .status-badge.approx{background:#EAF0FF; border:1px solid #CFDCF7;}
  .class-rail button .dot{
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    margin-right:6px;
  }
  .rail-heading{
    font-family:var(--font-display);
    font-style:italic;
    font-size:0.68rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink-soft);
    background:#E8E1CC;
    padding:6px 14px;
    border-bottom:1px solid var(--rule);
  }
  @media (max-width:640px){
    .modal-overlay{padding:0;}
    .modal{
      max-width:100%;
      max-height:100%;
      height:100%;
      border-radius:0;
      animation:none;
    }
    .modal-body{flex-direction:column;}
    .class-rail{
      width:100%;
      max-height:150px;
      display:flex;
      flex-wrap:nowrap;
      overflow-x:auto;
      border-right:none;
      border-bottom:1px solid var(--rule);
    }
    .class-rail .rail-heading{
      display:flex;
      align-items:center;
      flex-shrink:0;
      border-bottom:none;
      border-right:1px solid var(--rule);
      writing-mode:vertical-rl;
      padding:6px 4px;
    }
    .class-rail button{
      flex-shrink:0;
      width:auto;
      white-space:nowrap;
      border-bottom:none;
      border-right:1px solid var(--rule);
      padding:11px 16px;
    }
    .class-rail button.active{border-right-color:var(--margin); margin-right:0; border-bottom:3px solid var(--margin);}
    .chapter-list button, .composer button, .composer textarea, header .browse, header .reset{
      min-height:44px;
    }
  }
  .legend{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    padding:8px 20px;
    background:#F1ECDD;
    border-bottom:1px solid var(--rule);
    font-size:0.68rem;
    color:var(--ink-soft);
  }
  .legend span{display:flex; align-items:center;}
  .legend .dot{
    display:inline-block;
    width:6px; height:6px;
    border-radius:50%;
    margin-right:5px;
  }
  .about-body{
    padding:16px 22px 20px;
    overflow-y:auto;
    font-size:0.85rem;
    line-height:1.55;
    color:var(--ink);
  }
  .about-body h3{
    font-family:var(--font-display);
    font-size:0.95rem;
    color:var(--margin);
    margin:14px 0 8px;
  }
  .about-body h3:first-child{margin-top:0;}
  .about-body ul{margin:0; padding-left:20px;}
  .about-body li{margin-bottom:8px;}
  .about-body p{margin:8px 0;}
  .about-body .fine{
    font-size:0.76rem;
    color:var(--ink-soft);
    font-style:italic;
    border-top:1px dashed var(--rule);
    padding-top:10px;
    margin-top:14px;
  }
  .about-body a{color:var(--margin);}

  .modal-body.single-col{flex-direction:column;}
  .modal-body.single-col .chapter-list{width:100%;}

  .exam-body{
    padding:16px 22px 20px;
    font-size:0.87rem;
    line-height:1.5;
    color:var(--ink);
  }
  .exam-body > p{margin:0 0 14px;}
  .exam-paper-list{display:flex; flex-direction:column; gap:10px;}
  .exam-paper-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:#F1ECDD;
    border:1px solid var(--rule);
    border-radius:var(--r-md);
    padding:12px 16px;
  }
  .exam-paper-card .paper-info strong{display:block; font-family:var(--font-display); font-size:0.95rem; color:var(--ink);}
  .exam-paper-card .paper-info span{font-size:0.76rem; color:var(--ink-soft);}
  .exam-paper-card button{
    background:linear-gradient(135deg, var(--marigold) 0%, var(--marigold-deep) 100%);
    color:#3A2408;
    border:none;
    font-weight:700;
    font-size:0.78rem;
    padding:9px 14px;
    border-radius:16px;
    cursor:pointer;
    flex-shrink:0;
    white-space:nowrap;
  }
  .exam-paper-card button:hover{filter:brightness(1.07);}

  /* Timer bar */
  .timer-bar{
    display:none;
    align-items:center;
    gap:10px;
    background:var(--board-dark);
    color:var(--chalk);
    border-bottom:2px solid var(--marigold);
    padding:8px 24px;
    font-size:0.8rem;
    flex-shrink:0;
    flex-wrap:wrap;
  }
  .timer-bar.show{display:flex;}
  .timer-bar.urgent{border-bottom-color:var(--margin); background:#3A1712;}
  .timer-bar.done{border-bottom-color:#4C9A57; background:#12281F;}
  .timer-clock{
    font-family:var(--font-display);
    font-weight:700;
    font-size:0.95rem;
    color:var(--marigold);
    letter-spacing:0.02em;
  }
  .timer-bar.urgent .timer-clock{color:#FF9A80;}
  .timer-label{color:#C7D6CE; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .timer-pen{margin-left:auto; font-size:0.76rem; color:#A9C2B4; white-space:nowrap;}
  .timer-bar button{
    background:none;
    border:none;
    color:#A9C2B4;
    cursor:pointer;
    font-size:0.85rem;
    flex-shrink:0;
  }
  .timer-bar button:hover{color:var(--chalk);}
  @media (max-width:640px){
    .timer-bar{padding:8px 12px; font-size:0.74rem;}
    .timer-pen{display:none;}
    .exam-paper-card{flex-direction:column; align-items:flex-start;}
  }

  /* Notebook page */
  .page-wrap{
    flex:1;
    overflow:hidden;
    position:relative;
    background:var(--paper);
    box-shadow:inset 0 6px 14px -10px rgba(0,0,0,0.3);
  }
  .page-wrap::before{
    /* ruled lines */
    content:"";
    position:absolute;
    inset:0;
    background-image:repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 37px,
      var(--rule) 37px,
      var(--rule) 38px
    );
    opacity:0.55;
    pointer-events:none;
  }
  .page-wrap::after{
    /* red margin line */
    content:"";
    position:absolute;
    top:0; bottom:0;
    left:56px;
    width:2px;
    background:var(--margin);
    opacity:0.55;
    pointer-events:none;
  }
  #chat{
    position:relative;
    height:100%;
    overflow-y:auto;
    padding:26px 28px 26px 72px;
    scroll-behavior:smooth;
  }

  .msg{
    max-width:76%;
    margin-bottom:20px;
    line-height:1.6;
    font-size:0.98rem;
    position:relative;
    animation:rise 0.32s var(--ease);
    display:flex;
    gap:10px;
  }
  @keyframes rise{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }
  .avatar{
    width:30px; height:30px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    font-weight:700;
    font-family:var(--font-display);
    margin-top:2px;
  }
  .content-col{
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  .msg.student .content-col{align-items:flex-end;}
  .msg.tutor{
    margin-right:auto;
    flex-direction:row;
  }
  .msg.tutor .avatar{
    background:linear-gradient(135deg, var(--marigold) 0%, var(--marigold-deep) 100%);
    color:#3A2408;
    box-shadow:0 2px 6px rgba(232,163,61,0.4);
  }
  .msg.tutor .bubble{
    background:var(--paper);
    border-radius:var(--r-md);
    border-top-left-radius:4px;
    padding:12px 16px;
    position:relative;
    box-shadow:var(--shadow-sm);
    border-left:3px solid var(--marigold);
  }
  .msg.tutor .label{
    font-family:var(--font-display);
    font-style:italic;
    font-weight:600;
    color:var(--margin);
    font-size:0.76rem;
    display:block;
    margin-bottom:4px;
  }
  .msg.student{
    margin-left:auto;
    flex-direction:row-reverse;
    text-align:right;
  }
  .msg.student .avatar{
    background:#4A5B8C;
    color:#EAF0FF;
  }
  .msg.student .bubble{
    background:#EAF0FF;
    border-radius:var(--r-md);
    border-top-right-radius:4px;
    padding:12px 16px;
    display:inline-block;
    text-align:left;
    box-shadow:var(--shadow-sm);
  }
  .msg.student .label{
    font-family:var(--font-display);
    font-weight:600;
    color:#4A5B8C;
    font-size:0.76rem;
    display:block;
    margin-bottom:4px;
  }
  .bubble p{margin:0 0 8px 0;}
  .bubble p:last-child{margin-bottom:0;}
  .bubble strong{color:var(--ink);}

  .bubble.collapsed{
    max-height:210px;
    overflow:hidden;
    position:relative;
  }
  .bubble.collapsed::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:52px;
    background:linear-gradient(to bottom, rgba(251,248,240,0) 0%, var(--paper) 92%);
    pointer-events:none;
  }
  .msg.student .bubble.collapsed::after{
    background:linear-gradient(to bottom, rgba(234,240,255,0) 0%, #EAF0FF 92%);
  }
  .expand-toggle{
    display:inline-block;
    margin-top:8px;
    background:none;
    border:none;
    color:var(--margin);
    font-family:var(--font-ui);
    font-weight:600;
    font-size:0.78rem;
    cursor:pointer;
    padding:4px 0;
    text-decoration:underline;
  }

  .load-earlier-wrap{
    text-align:center;
    margin-bottom:18px;
  }
  .load-earlier-wrap button{
    background:var(--paper);
    border:1px solid var(--rule);
    color:var(--ink-soft);
    font-family:var(--font-ui);
    font-size:0.78rem;
    font-weight:600;
    padding:8px 16px;
    border-radius:20px;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:background 0.15s;
  }
  .load-earlier-wrap button:hover{background:#F1ECDD;}

  .scroll-bottom-btn{
    position:absolute;
    right:22px;
    bottom:22px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--board-dark);
    color:var(--chalk);
    border:2px solid var(--marigold);
    display:none;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:1rem;
    box-shadow:var(--shadow-md);
    z-index:10;
    transition:transform 0.15s var(--ease);
  }
  .scroll-bottom-btn.show{display:flex;}
  .scroll-bottom-btn:hover{transform:translateY(-2px);}
  @media (max-width:640px){
    .scroll-bottom-btn{right:14px; bottom:14px; width:40px; height:40px;}
    .bubble.collapsed{max-height:170px;}
  }
  @media (max-width:640px){
    #chat{padding:18px 14px 18px 44px;}
    .msg{max-width:88%;}
    .avatar{width:26px; height:26px; font-size:0.75rem;}
  }

  .typing{
    display:inline-flex;
    gap:4px;
    padding:12px 16px;
  }
  .typing span{
    width:6px; height:6px; border-radius:50%;
    background:var(--marigold);
    animation:pulse 1.1s infinite ease-in-out;
  }
  .typing span:nth-child(2){animation-delay:0.15s;}
  .typing span:nth-child(3){animation-delay:0.3s;}
  @keyframes pulse{
    0%,80%,100%{opacity:0.25; transform:scale(0.8);}
    40%{opacity:1; transform:scale(1);}
  }

  /* Composer */
  .composer{
    flex-shrink:0;
    background:var(--board-dark);
    padding:14px 20px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    display:flex;
    gap:10px;
    align-items:flex-end;
    border-top:1px solid rgba(232,163,61,0.25);
  }
  .composer textarea{
    flex:1;
    resize:none;
    border:1px solid transparent;
    border-radius:20px;
    padding:12px 18px;
    font-family:var(--font-ui);
    font-size:0.95rem;
    background:var(--paper);
    color:var(--ink);
    max-height:120px;
    line-height:1.4;
    transition:box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
  }
  .composer textarea:focus{
    outline:none;
    border-color:var(--marigold);
    box-shadow:0 0 0 3px rgba(232,163,61,0.22);
  }
  .composer button{
    background:linear-gradient(135deg, var(--marigold) 0%, var(--marigold-deep) 100%);
    color:#3A2408;
    border:none;
    font-family:var(--font-ui);
    font-weight:700;
    font-size:0.9rem;
    width:44px;
    height:44px;
    border-radius:50%;
    cursor:pointer;
    transition:transform 0.15s var(--ease), filter 0.15s;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-sm);
  }
  .composer button:hover:not(:disabled){filter:brightness(1.08); transform:translateY(-1px) scale(1.03);}
  .composer button:active:not(:disabled){transform:translateY(0) scale(0.97);}
  .composer button:disabled{opacity:0.5; cursor:not-allowed;}
  .composer button:focus-visible, .composer textarea:focus-visible, .reset:focus-visible{
    outline:2px solid var(--marigold);
  }

  .hint{
    text-align:center;
    color:#8A9A92;
    font-size:0.72rem;
    padding:5px 0 0;
    background:var(--board-dark);
  }
  .app-footer{
    text-align:center;
    color:#5E6E67;
    font-size:0.65rem;
    padding:3px 0 calc(8px + env(safe-area-inset-bottom));
    background:var(--board-dark);
    letter-spacing:0.02em;
  }


  /* ---------- Local practice panel ---------- */
  .practice-card{
    background:var(--paper);
    border:1px solid var(--rule);
    border-left:3px solid var(--marigold);
    border-radius:var(--r-md);
    padding:14px 16px;
    margin-bottom:16px;
    box-shadow:var(--shadow-sm);
    max-width:76%;
  }
  .practice-head{
    display:flex; align-items:center; gap:8px;
    font-size:0.72rem; color:var(--ink-soft);
    margin-bottom:8px; flex-wrap:wrap;
  }
  .practice-head .qnum{
    font-family:var(--font-display); font-weight:700;
    color:var(--margin); font-size:0.85rem;
  }
  .offline-chip{
    background:#E9F3EA; border:1px solid #BFE0C4; color:#2F6B3A;
    border-radius:10px; padding:2px 8px; font-size:0.66rem; font-weight:600;
  }
  .coverage-chip{
    background:#EAF0FF; border:1px solid #CFDCF7; color:#3F5688;
    border-radius:10px; padding:2px 8px; font-size:0.66rem;
  }
  .coverage-chip.general{background:#FBEFE0; border-color:#EBCDA0; color:#8A5A1E;}
  .practice-q{font-size:1rem; line-height:1.55; margin-bottom:12px; color:var(--ink);}
  .practice-answer-row{display:flex; gap:8px; flex-wrap:wrap;}
  .practice-answer-row input{
    flex:1; min-width:130px;
    padding:10px 13px; border:1px solid var(--rule);
    border-radius:20px; font-family:var(--font-ui); font-size:0.95rem;
    background:#fff; color:var(--ink);
  }
  .practice-answer-row input:focus{
    outline:none; border-color:var(--marigold);
    box-shadow:0 0 0 3px rgba(232,163,61,0.22);
  }
  .practice-answer-row button{
    background:linear-gradient(135deg,var(--marigold) 0%,var(--marigold-deep) 100%);
    color:#3A2408; border:none; font-weight:700; font-size:0.85rem;
    padding:10px 18px; border-radius:20px; cursor:pointer; flex-shrink:0;
  }
  .practice-answer-row button.ghost{
    background:none; border:1px solid var(--rule); color:var(--ink-soft); font-weight:600;
  }
  .feedback{
    margin-top:12px; padding:11px 13px; border-radius:var(--r-sm);
    font-size:0.88rem; line-height:1.55;
  }
  .feedback.correct{background:#E9F3EA; border:1px solid #BFE0C4;}
  .feedback.diagnosed{background:#FBEFE0; border:1px solid #EBCDA0;}
  .feedback.unknown{background:#EAF0FF; border:1px solid #CFDCF7;}
  .feedback .fb-title{font-weight:700; display:block; margin-bottom:4px;}
  .feedback .fb-ask{
    display:block; margin-top:7px; padding-top:7px;
    border-top:1px dashed rgba(0,0,0,0.14); font-style:italic;
  }
  .practice-progress{
    font-size:0.72rem; color:var(--ink-soft);
    margin-bottom:10px; padding-left:2px;
  }
  .session-summary{
    background:var(--paper); border:1px solid var(--rule);
    border-radius:var(--r-md); padding:14px 16px; margin-bottom:16px;
    max-width:76%; box-shadow:var(--shadow-sm);
  }
  .session-summary h4{
    font-family:var(--font-display); margin:0 0 8px; color:var(--margin); font-size:1rem;
  }
  .session-summary .score{font-size:1.5rem; font-weight:700; color:var(--ink);}
  .session-summary ul{margin:8px 0 0; padding-left:18px; font-size:0.84rem; line-height:1.6;}
  /* What to practise next, set apart from the score because it is the part
     worth reading. */
  .skill-focus{
    margin:14px -16px -14px; padding:13px 16px 14px;
    border-top:1px solid var(--rule); border-radius:0 0 var(--r-md) var(--r-md);
    background:var(--paper-warm, rgba(0,0,0,.02));
  }
  .skill-focus-lead{margin:0; font-size:0.86rem; line-height:1.6;}
  .skill-focus-pattern{margin:6px 0 0; font-size:0.82rem; line-height:1.6; color:var(--ink-soft);}
  .skill-focus-source{display:inline-block; margin-top:7px; font-size:0.74rem; font-weight:650;}
  .skill-focus-actions{margin-top:11px;}
  @media (max-width:640px){
    .practice-card, .session-summary{max-width:100%;}
  }


  /* ---------- Construction tasks (self-assessed) ---------- */
  .construction-card{
    background:var(--paper);
    border:1px solid var(--rule);
    border-left:3px solid #6B84C4;
    border-radius:var(--r-md);
    padding:14px 16px;
    margin-bottom:16px;
    box-shadow:var(--shadow-sm);
    max-width:76%;
  }
  .construction-head{
    display:flex; align-items:center; gap:8px;
    flex-wrap:wrap; margin-bottom:6px;
  }
  .construction-head h4{
    font-family:var(--font-display);
    margin:0; font-size:1rem; color:var(--ink);
  }
  .selfcheck-chip{
    background:#EAF0FF; border:1px solid #CFDCF7; color:#3F5688;
    border-radius:10px; padding:2px 8px; font-size:0.66rem; font-weight:600;
  }
  .construction-tools{
    font-size:0.75rem; color:var(--ink-soft);
    margin-bottom:10px; font-style:italic;
  }
  .construction-disclaimer{
    background:#FBEFE0;
    border:1px solid #EBCDA0;
    border-radius:var(--r-sm);
    padding:9px 11px;
    font-size:0.76rem;
    line-height:1.45;
    color:#7A5320;
    margin-bottom:12px;
  }
  .construction-steps{
    list-style:none; margin:0 0 12px; padding:0;
  }
  .construction-steps li{
    display:flex; align-items:flex-start; gap:9px;
    padding:8px 0; border-bottom:1px dashed var(--rule);
    font-size:0.9rem; line-height:1.5;
  }
  .construction-steps li:last-child{border-bottom:none;}
  .construction-steps input[type=checkbox]{
    margin-top:3px; flex-shrink:0;
    width:16px; height:16px;
    accent-color:#6B84C4; cursor:pointer;
  }
  .construction-steps li.done span{
    text-decoration:line-through; color:var(--ink-soft);
  }
  .construction-verify{
    background:#E9F3EA; border:1px solid #BFE0C4;
    border-radius:var(--r-sm); padding:10px 12px;
    font-size:0.84rem; line-height:1.5; color:#2F6B3A;
  }
  .construction-verify strong{display:block; margin-bottom:3px;}
  .construction-nav{
    display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
  }
  .construction-nav button{
    font-family:var(--font-ui);
    font-size:0.8rem; font-weight:600;
    padding:9px 14px; border-radius:16px; cursor:pointer;
    border:1px solid var(--rule); background:#F1ECDD; color:var(--ink);
  }
  .construction-nav button.primary{
    background:linear-gradient(135deg,var(--marigold) 0%,var(--marigold-deep) 100%);
    color:#3A2408; border:none;
  }
  .construction-nav button:disabled{opacity:0.45; cursor:not-allowed;}
  @media (max-width:640px){ .construction-card{max-width:100%;} }


  /* ---------- Concept notes ---------- */
  .concept-card{
    background:var(--paper);
    border:1px solid var(--rule);
    border-left:3px solid #4C9A57;
    border-radius:var(--r-md);
    padding:16px 18px;
    margin-bottom:16px;
    box-shadow:var(--shadow-sm);
    max-width:76%;
  }
  .concept-card h4{
    font-family:var(--font-display);
    margin:0 0 4px; font-size:1.1rem; color:var(--ink);
  }
  .concept-written-chip{
    background:#F1ECDD; border:1px solid var(--rule); color:var(--ink-soft);
    border-radius:10px; padding:2px 8px; font-size:0.64rem; font-weight:600;
    display:inline-block; margin-bottom:10px;
  }
  .concept-idea{
    font-size:0.95rem; line-height:1.6; margin:0 0 12px;
    padding:10px 12px; background:#E9F3EA; border-radius:var(--r-sm);
    border:1px solid #BFE0C4;
  }
  .concept-section{margin-bottom:12px;}
  .concept-section h5{
    font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--margin); margin:0 0 6px; font-weight:700;
  }
  .concept-section ul{margin:0; padding-left:18px; font-size:0.9rem; line-height:1.6;}
  .concept-section li{margin-bottom:5px;}
  .concept-formulae{
    background:#F1ECDD; border:1px solid var(--rule);
    border-radius:var(--r-sm); padding:10px 12px;
    font-size:0.95rem; line-height:1.9;
  }
  .concept-pitfall{
    background:#FBEFE0; border:1px solid #EBCDA0;
    border-radius:var(--r-sm); padding:10px 12px;
    font-size:0.88rem; line-height:1.5; color:#7A5320;
  }
  .concept-example{
    background:#EAF0FF; border:1px solid #CFDCF7;
    border-radius:var(--r-sm); padding:10px 12px;
    font-size:0.9rem; line-height:1.6;
  }
  .concept-example .ex-q{font-weight:600; margin-bottom:4px;}
  .concept-ncert{
    font-size:0.8rem; color:var(--ink-soft); font-style:italic;
    border-top:1px dashed var(--rule); padding-top:9px; margin-top:12px;
  }
  .concept-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
  .concept-actions button{
    font-family:var(--font-ui);
    font-size:0.82rem; font-weight:700;
    padding:10px 16px; border-radius:18px; cursor:pointer; border:none;
    background:linear-gradient(135deg,var(--marigold) 0%,var(--marigold-deep) 100%);
    color:#3A2408;
  }
  @media (max-width:640px){ .concept-card{max-width:100%;} }


  .narrate-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px}
  .narrate-btn,.voice-control{
    border:1px solid #D7C8A5;background:#FFFDF7;color:#56462F;border-radius:999px;
    padding:6px 10px;font:600 .72rem var(--font-ui);cursor:pointer
  }
  .narrate-btn:hover,.voice-control:hover{background:#FFF7E5}
  .narrate-btn.is-narrating{background:#5b473d;color:#fff;border-color:#5b473d}
  .narrate-btn[disabled],.voice-control[disabled]{opacity:.45;cursor:not-allowed}
  .voice-speed-wrap{font:600 .7rem var(--font-ui);color:#5B503E;display:flex;align-items:center;gap:4px}
  .voice-speed-wrap select{border:1px solid #D7C8A5;border-radius:12px;background:#fff;padding:5px;font:inherit}
  .science-diagram{margin:12px 0;padding:10px;border:1px solid #E4DCC8;border-radius:12px;background:#fff;text-align:center;overflow:auto}
  .science-diagram svg{max-width:100%;height:auto}
  .science-diagram .diagram-note{font-size:.68rem;color:#776B58;margin-top:5px}

  .error-msg{
    color:var(--margin);
    font-size:0.85rem;
    font-style:italic;
    padding:8px 16px;
  }

  ::-webkit-scrollbar{width:9px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:#D8CDB4; border-radius:5px;}


/* Production R1: compact, scroll-safe onboarding and explicit session choices. */
.onboarding-overlay{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(8px,2vh,18px);
}
.onboarding-card{
  max-width:430px;
  max-height:calc(100dvh - 16px);
  overflow-y:auto;
  padding:clamp(16px,2.6vh,24px) 24px;
  scrollbar-width:thin;
}
.onboarding-mark{max-width:290px;margin:0 auto 10px;}
.onboarding-card h2{font-size:1.28rem;margin-bottom:5px;}
.onboarding-card p.onboarding-intro{margin-bottom:9px;font-size:.82rem;}
.onboarding-card .offline-promise{margin-bottom:11px!important;padding:7px 10px;font-size:.73rem!important;}
.onboarding-card input,.onboarding-card select{padding:10px 12px;margin-bottom:10px;font-size:.9rem;}
.field-note{font-size:.65rem!important;color:#8d846f!important;text-align:left;margin:-5px 0 9px!important;}
.onboarding-card label{margin-bottom:4px;}
.onboarding-view.hidden{display:none;}
.resume-summary{display:flex;flex-direction:column;gap:5px;background:#f3eee2;border:1px solid #ded4bf;border-radius:10px;padding:11px 12px;margin:8px 0 14px!important;text-align:left;}
.resume-summary strong{font-size:.84rem;color:#2c463d;}
.resume-summary span{font-size:.76rem;color:#6c6457;}
.resume-actions{display:grid;gap:8px;}
.onboarding-card button.onboarding-secondary{background:#fff!important;color:#3d463f!important;border:1px solid #cfc8b9!important;box-shadow:none!important;}
.onboarding-card button.onboarding-link{background:transparent!important;color:#385d50!important;border:0!important;box-shadow:none!important;text-decoration:underline;text-underline-offset:3px;padding:8px!important;font-size:.78rem!important;}
.onboarding-card .adult-entry{margin-top:6px!important;}
@media(max-height:760px){
  .onboarding-overlay{align-items:flex-start;}
  .onboarding-card{margin:auto 0;padding:14px 20px;}
  .onboarding-mark{max-width:205px;margin-bottom:6px;}
  .onboarding-card h2{font-size:1.14rem;}
  .onboarding-card p.onboarding-intro{margin-bottom:6px;}
  .onboarding-card .offline-promise{margin-bottom:7px!important;padding:6px 9px;}
  .onboarding-card input,.onboarding-card select{padding:8px 10px;margin-bottom:7px;}
  .field-note{margin:-3px 0 6px!important;}
  .onboarding-card button{padding:10px;}
}
@media(max-width:480px){
  .onboarding-overlay{padding:7px;align-items:flex-start;}
  .onboarding-card{margin:auto 0;max-height:calc(100dvh - 14px);padding:15px 16px;border-radius:13px;}
  .onboarding-mark{max-width:230px;}
}

/* VidyutLearn™ brand integrity */
.onboarding-logo{display:block!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;}
.footer-subjects{font-weight:650;color:#b4c8bf;white-space:nowrap;}
.footer-subjects span{color:var(--marigold);padding:0 3px;}


/* PC2.2 trust-safe onboarding: clearer hierarchy, contrast and touch targets. */
.onboarding-overlay{background:linear-gradient(145deg,#102f2a 0%,#173f37 55%,#0c2924 100%);padding:clamp(14px,3vw,28px);}
.onboarding-card{max-width:520px;max-height:calc(100dvh - 28px);padding:30px 32px 28px;border:1px solid rgba(255,255,255,.34);border-radius:24px;background:#fffdf8;box-shadow:0 24px 70px rgba(0,0,0,.28);text-align:left;}
.onboarding-mark{max-width:300px;margin:0 auto 18px;}
.onboarding-card h2{font-family:var(--font-ui);font-size:1.7rem;line-height:1.15;font-weight:780;letter-spacing:-.025em;text-align:center;color:#153c34;margin:2px 0 16px;}
.onboarding-card p{font-size:.98rem;line-height:1.55;color:#4e574f;}
.resume-summary{position:relative;display:flex;flex-direction:column;gap:7px;background:#f8f4ea;border:1px solid #ded5c3;border-radius:16px;padding:16px 17px;margin:0 0 18px!important;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.65);}
.resume-summary strong{font-size:1rem;line-height:1.35;color:#18463b;font-weight:760;}
.resume-summary span{font-size:.91rem;line-height:1.45;color:#5d5a51;}
.resume-summary .resume-chapter{font-size:1.02rem;color:#2a322e;font-weight:650;}
.resume-summary .resume-status{align-self:flex-start;display:inline-flex;width:auto;border-radius:999px;padding:5px 9px;font-size:.75rem;font-weight:760;letter-spacing:.01em;}
.resume-summary .resume-status.ready{background:#e5f3ea;border:1px solid #c5dfcf;color:#285f43;}
.resume-summary .resume-status.review{background:#fff3d9;border:1px solid #efd7a0;color:#765315;}
.resume-summary .resume-place{color:#706b61;font-size:.84rem;}
.resume-actions{gap:10px;}
.onboarding-card button{min-height:50px;border-radius:14px;font-size:1rem;line-height:1.25;padding:13px 16px;box-shadow:0 5px 14px rgba(102,66,10,.12);}
.onboarding-card button.onboarding-secondary{border-radius:14px!important;border-color:#d7d0c3!important;color:#273d36!important;background:#fff!important;}
.onboarding-card button.onboarding-link{font-size:.9rem!important;color:#255a4c!important;min-height:42px;padding:10px!important;}
.onboarding-card .adult-entry{font-size:.88rem!important;color:#405b52!important;min-height:42px;margin-top:4px!important;}
@media(max-width:560px){
  .onboarding-overlay{padding:10px;align-items:center;}
  .onboarding-card{max-height:calc(100dvh - 20px);padding:24px 20px 22px;border-radius:20px;}
  .onboarding-mark{max-width:265px;margin-bottom:14px;}
  .onboarding-card h2{font-size:1.48rem;margin-bottom:14px;}
  .resume-summary{padding:14px 15px;border-radius:14px;}
}
@media(max-height:700px){
  .onboarding-card{padding-top:18px;padding-bottom:18px;}
  .onboarding-mark{max-width:220px;margin-bottom:8px;}
  .onboarding-card h2{font-size:1.35rem;margin-bottom:10px;}
  .resume-summary{padding:12px 14px;margin-bottom:12px!important;gap:4px;}
  .onboarding-card button{min-height:46px;padding:11px 14px;}
}

/* Trust-gate status cards. */
.pending-status{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;margin:4px 0 8px;font:760 .75rem/1.15 var(--font-ui);}
.pending-status.quality-review{background:#fff3d9;border:1px solid #efd7a0;color:#765315;}
.pending-status.source-gap{background:#f5ece8;border:1px solid #e1c8bd;color:#7a4030;}
.pending-status.integrity-failure{background:#fbe7e5;border:1px solid #e5b5b0;color:#7d332e;}
.courseware-pending-card .pending-lead{font-size:1.05rem;line-height:1.6;color:#30423b;max-width:72ch;}
.courseware-pending-card .pending-note{font-size:.93rem;line-height:1.6;color:#675f53;max-width:76ch;}
.courseware-pending-card .pending-outline{background:#faf7f0;border-color:#e5dccb;}