/* ============================================================
   LUMEN ,  mobile chrome compression
   ------------------------------------------------------------
   Goals on phones (≤720 px):
     · one top bar, not three
     · no clipped empty-state text
     · floating pills re-anchored into the column
     · composer reachable without hunting
   ============================================================ */

@media (max-width: 720px) {

  /* ---------- 1. One top row, on every device ---------- */

  /* The contextual bar lives inside the global top row, so that row has to
     stay. Hiding it here is what left the study workspace and Praxis with no
     controls at all on a phone ,  the bar was laid out inside a display:none
     container, so every button in it was unclickable and every dropdown dead.
     What is redundant on a phone is each view's *own* header, not the shared
     row, so that is what goes instead. */
  body.study-mode > nav.top-nav,
  body.praxis-mode > nav.top-nav { display: flex !important; }

  /* The per-view headers duplicate the shared row: their controls have already
     been adopted into it, so on a phone they are a second, near-empty strip
     below it. The pieces that are genuinely their own (the rail toggle and the
     notebook status) move into the chrome sheet on phones. */
  #view-study > .topbar { display: none !important; }
  #view-praxis > .px-topbar { display: none !important; }

  /* ---------- 2. Single compact study topbar ------------------- */

  #view-study > .topbar {
    padding: 6px 10px !important;
    gap: 6px !important;
    min-height: 44px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #view-study > .topbar::-webkit-scrollbar { display: none; }

  #view-study > .topbar .brand {
    font-size: 15px;
    flex: none;
  }
  /* Hide the decorative scrawl on phones ,  it eats 40 px. */
  #view-study > .topbar .brand .scrawl { display: none; }

  #view-study > .topbar > .btn { padding: 6px 9px; font-size: 12px; flex: none; }
  #view-study > .topbar .top-actions { gap: 4px; flex: none; }
  #view-study > .topbar .chip { max-width: 140px; }

  /* ---------- 3. vbar wraps instead of squeezing --------------- */

  .study-view > .vbar {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
    padding: 8px 10px;
    align-items: center;
  }
  .study-view > .vbar .vtitle { flex: none; font-size: 14px; }
  .study-view > .vbar .hint {
    flex-basis: 100%;
    order: 99;
    font-size: 11.5px;
    line-height: 1.4;
    opacity: .75;
    margin: 0;
  }
  /* Chat's history / memory buttons were orphaned ,  bring them home. */
  .study-view[data-view="chat"] > .vbar button {
    flex: none;
    padding: 6px 10px;
    font-size: 12px;
  }
  .study-view[data-view="chat"] > .vbar .spacer { display: none; }

  /* ---------- 4. Empty-state that no longer clips -------------- */

  .chat-empty,
  .study-view .empty {
    max-width: 100% !important;
    padding: 18px 16px !important;
    box-sizing: border-box;
  }
  .chat-empty h2,
  .study-view .empty h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em;
    word-break: normal;
    hyphens: auto;
  }
  .chat-empty p,
  .study-view .empty p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 42ch;
    margin-inline: auto;
  }

  /* ---------- 5. Suggestions stack full width ------------------ */

  .sugs {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 480px;
    margin-inline: auto;
  }
  .sugs .btn {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    text-align: center !important;
    justify-content: center;
  }

  /* ---------- 6. Stranded floating pills ----------------------- */

  /* The AI/Web segmented control and any right-floated chips that
     normally sit inline must not float off-column on phones. */
  .composer > .ctxrow,
  .composer .inputrow {
    flex-wrap: wrap;
    gap: 6px;
  }
  .composer .seg#chatModeSeg {
    flex: none;
    order: 20;
    margin-left: auto;
  }
  .composer .chip#provChip {
    order: 21;
    flex-basis: 100%;
    max-width: 100%;
    margin-top: 4px;
  }

  /* The "what to do" hint widget on the right of the chat header
     should collapse ,  it duplicates the empty-state text. */
  .study-view[data-view="chat"] .kbd-hint,
  .study-view[data-view="chat"] .hint-pill { display: none !important; }

  /* ---------- 7. Composer sits above the keyboard safely ------- */

  .composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .composer .inputrow textarea { font-size: 15px; padding: 10px 12px; min-height: 40px; }
  .composer .inputrow .btn { padding: 10px 12px; }

  /* ---------- 8. Rail (left icon strip) narrower ---------------- */

  #view-study .shell .rail {
    width: 54px !important;
    flex-basis: 54px !important;
  }
  #view-study .shell .rail button {
    padding: 10px 0 !important;
    justify-content: center !important;
  }
  #view-study .shell .rail button span:not(.badge) { display: none !important; }
  #view-study .shell .rail button i,
  #view-study .shell .rail button svg { margin: 0 !important; }
}

/* Very small phones ,  400px and below */
@media (max-width: 400px) {
  #view-study > .topbar { padding: 4px 8px !important; }
  #view-study > .topbar .brand { font-size: 14px; }
  .chat-empty h2 { font-size: 20px !important; }
  .chat-empty p  { font-size: 12.5px !important; }
  .sugs .btn     { font-size: 12.5px !important; padding: 11px 12px !important; }
}