/* ---- chat toggle (top-right) + collapsible drawer ---- */
  #toneWrap, #levelWrap, #voiceWrap {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: #758195;
  }
  #levelWrap { margin-left: auto; }
  #toneSelect, #levelSelect, #voiceModeSelect {
    font-family: inherit; font-size: 12px; font-weight: 700;
    padding: 8px 12px; border-radius: 999px;
    border: 1px solid #dce4ef; background: #fff; color: #1f2937;
    cursor: pointer;
  }
  #chatToggle, #notesBtn {
    margin-left: 4px;
    width: 38px; height: 38px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #64748b;
  }
  #chatToggle:hover, #notesBtn:hover { background: #f3f7fb; color: #3e9bfd; }
  #chatToggle svg, #notesBtn svg { width: 20px; height: 20px; }
  #notesBtn:disabled { opacity: 0.5; cursor: default; }

  #chatPanel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 340px;
    max-width: 85vw;
    background: #fff;
    border-left: 1px solid #e2dfd5;
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    display: flex;
    flex-direction: column;
    z-index: 40;
  }
  #chatPanel.open { transform: translateX(0); }
  #chatHeader {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2dfd5;
    font-size: 13px; font-weight: 600; color: #5f5e5a;
  }
  #chatClose {
    width: 28px; height: 28px; border-radius: 6px;
    font-size: 20px; line-height: 1; color: #888780;
  }
  #chatClose:hover { background: #f1efe8; }
  #transcript {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    font-size: 13px;
    line-height: 1.55;
  }
  #transcript:empty::before {
    content: "the conversation transcript will appear here.";
    color: #b4b2a9;
  }
  .msg { margin-bottom: 14px; }
  .who { font-size: 11px; font-weight: 600; color: #888780; display: block; margin-bottom: 2px; }
  .msg.teacher .who { color: #8b5cf6; }
  .msg.student .who { color: #3e9bfd; }

  /* design.md's "Mobile Design" spec calls for transcript/tools in a bottom
     drawer on the lesson screen, not a right-edge slide-in — covers phones
     and portrait tablets, matching the #lessonReel/#toolbar breakpoint. */
  #chatPanelScrim { display: none; }
  @media (max-width: 1024px) {
    #chatPanelScrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 39;
      background: rgba(6,13,28,0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }
    #chatPanelScrim.visible { opacity: 1; pointer-events: auto; }

    #chatPanel {
      position: fixed;
      inset: auto 0 0 0;
      top: auto;
      width: auto;
      max-width: none;
      height: auto;
      max-height: 78vh;
      border-left: none;
      border-top: 1px solid #e2dfd5;
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
      transform: translateY(100%);
      transition: transform 0.28s ease;
    }
    #chatPanel.open { transform: translateY(0); }

    /* drag-handle affordance for the sheet — decorative, not draggable */
    #chatHeader { position: relative; padding-top: 20px; }
    #chatHeader::before {
      content: "";
      position: absolute;
      top: 8px; left: 50%;
      transform: translateX(-50%);
      width: 38px; height: 4px;
      border-radius: 3px;
      background: #d8d5c9;
    }
  }