/* ============================================================
   LUMEN MOBILE ,  single authoritative block. Load LAST.
   ============================================================ */

html, body, html *{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

html{
  background-color: var(--surface, #15151a) !important;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: border-box;
}
body{
  background: var(--bg);
  background-attachment: fixed;
}

/* ============================================================
   NAV HEIGHT ,  one variable, three uses, always in sync.
   The nav, the .view offset and #pxStudio all read --nav-h,
   so a gap between them is now impossible.
   ============================================================ */
:root{
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Desktop default ,  matches the fixed 56px in core-styles-01.css */
  --nav-h: calc(56px + var(--safe-t));
}
/* Mobile only: the nav shrinks to 48px. */
@media (max-width: 820px){
  :root{ --nav-h: calc(42px + var(--safe-t)); }
}

.top-nav{
  height: var(--nav-h) !important;
  padding-top: var(--safe-t) !important;
  padding-bottom: 0 !important;
  padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  background: var(--surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.view{
  padding-top: calc(var(--nav-h) + var(--banner-h, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
/* The brand is 56px tall in the base stylesheet; on a 48px mobile nav
   let it grow with the row instead of overflowing upward. */
.brand{ height: auto !important; align-self: center !important; }

@media (max-width: 820px){

  /* ---------- Top nav internals ---------- */
  .brand{ font-size: 20px !important; height: auto !important; }
  .top-nav .ibtn{
    width: 34px !important; height: 34px !important;
    min-width: 34px !important; min-height: 34px !important;
    border-radius: 9px !important;
  }
  .top-nav .ibtn svg{ width: 15px !important; height: 15px !important; }
  .ai-model-select{
    flex: 1 1 40px !important; min-width: 0 !important;
    max-width: 130px !important;
    font-size: 11px !important; padding: 5px 8px !important;
    border-radius: 9px !important;
  }
  .net-badge{ padding: 4px 6px !important; min-width: 30px !important; }
  .net-badge .net-text{ display: none !important; }

  /* ---------- Study rail: icon-only, 54px ---------- */
  .rail{
    width: 54px !important; min-width: 54px !important; max-width: 54px !important;
    flex: 0 0 54px !important;
    padding: 5px 3px !important;
    gap: 1px !important;
    /* The rail scrolls. It did not: the overflow was clipped, so on a phone
       with ten destinations in a column taller than the screen the last of
       them - the calendar - could not be reached at all, and there was no
       way to know it was there. The bar looks the same; it just moves now. */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    background: var(--surface) !important;
  }
  .rail::-webkit-scrollbar{ display: none !important; }
  .rail button{
    width: 100% !important; height: auto !important;
    min-height: 40px !important;
    flex-direction: column !important;
    padding: 7px 0 !important;
    gap: 0 !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    flex: none !important;
  }
  .rail button > svg,
  .rail button > i[data-lucide]{ width: 18px !important; height: 18px !important; }
  .rail button > span{ display: none !important; }
  .rail button.on{
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 38%, transparent) !important;
    color: var(--accent) !important;
  }
  .rail button.on::before{ display: none !important; }

  /* ---------- Study topbar: single scrollable row ---------- */
  #view-study .topbar{
    gap: 4px !important;
    padding: 0 6px !important;
    min-height: 34px !important;
    max-height: 38px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    background: var(--surface) !important;
    backdrop-filter: none !important;
  }
  #view-study .topbar::-webkit-scrollbar{ display: none !important; }
  #view-study .topbar > *{ flex: 0 0 auto !important; }
  #view-study .brand{ font-size: 15px !important; }
  #view-study .brand .scrawl{ display: none !important; }
  .top-actions{ gap: 4px !important; flex-wrap: nowrap !important; margin-left: 0 !important; }
  .top-actions .btn{ padding: 5px 9px !important; font-size: 11px !important; }
  .top-actions .ibtn{
    width: 30px !important; height: 30px !important;
    min-width: 30px !important; min-height: 30px !important;
  }
  .top-actions .ibtn svg{ width: 13px !important; height: 13px !important; }
  .top-actions .chip{
    padding: 4px 8px !important; font-size: 10px !important;
    max-width: 110px !important;
  }
  .top-actions .chip .ellip{ max-width: 75px !important; }
  #nbSaveChip .nb-text{ display: none !important; }

  /* ---------- Generic vbar / tool-head ---------- */
  .vbar{ padding: 3px 8px !important; gap: 4px !important; min-height: 30px !important; max-height: 34px !important; }
  .vbar .vtitle{ font-size: 14px !important; }
  .vbar .rname{ max-width: 100px !important; font-size: 10px !important; }
  .vbar .btn{ padding: 5px 9px !important; font-size: 11px !important; }

  .tool-head{
    padding: 5px 8px !important; gap: 5px !important;
    min-height: 44px !important;
    background: var(--surface) !important;
  }
  .tool-head .tool-title{ font-size: 17px !important; }
  .tool-head .tool-sub{ display: none !important; }

  /* ---------- Home ---------- */
  #view-home > div{
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 30px !important;
  }
  #view-home .pt-10{ padding-top: 1rem !important; }
  .hero-title{ font-size: clamp(34px, 11vw, 46px) !important; }
  .hero-sub{ font-size: 12px !important; margin-top: 8px !important; }
  .hero-note{ font-size: 8.5px !important; margin-top: 10px !important; padding: 3px 8px !important; }
  .home-search{
    margin: 14px auto 0 !important;
    padding: 8px 12px !important;
    background: var(--surface) !important;
  }
  .home-search input{ font-size: 14px !important; }
  .home-search kbd{ display: none !important; }
  .cat-label{ margin-top: 16px !important; margin-bottom: 6px !important; font-size: 10px !important; }
  .fallback-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .tool-card{ padding: 9px !important; gap: 8px !important; }
  .tool-card .tc-icon{ width: 30px !important; height: 30px !important; }
  .tool-card .tc-icon svg{ width: 15px !important; height: 15px !important; }
  .tool-card h3{ font-size: 11.5px !important; white-space: normal !important; }
  .tool-card p{
    font-size: 9.5px !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  /* ---------- iOS zoom guard ---------- */
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
  textarea, select{ font-size: 16px !important; }

  /* ---------- Dialogs ---------- */
  /* The width and the cap are gone; the full-screen rule further down owns the
     box now. Leaving "max-height: 92vh" here meant the settings panel stopped
     8% short of the bottom of the screen and showed a band of the page under
     itself - the black bar at the foot of the settings on a phone. */
  .dlg-head{ padding: 12px 14px 10px !important; }
  .dlg-title{ font-size: 17px !important; }
  .dlg-body{ padding: 12px 14px !important; gap: 10px !important; }
  .dlg-foot{ padding: 12px 14px !important; }
}

@media (max-width: 400px){
  .rail{ width: 48px !important; min-width: 48px !important; max-width: 48px !important; flex-basis: 48px !important; }
  .rail button > svg, .rail button > i[data-lucide]{ width: 16px !important; height: 16px !important; }
  .hero-title{ font-size: clamp(30px, 10vw, 40px) !important; }
  .tool-card p{ display: none !important; }
  .tool-card h3{ font-size: 11px !important; }
}

@media (pointer: coarse){
  .tool-card:hover{ transform: none !important; }
  .tool-card:hover .tc-icon{ transform: none !important; }
  .btn:hover{ transform: none !important; }
  .ibtn:hover{ transform: none !important; }
}

/* ============================================================
   Brand: force the dot inline, never wrap
   ============================================================ */
.brand{
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.brand > span{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  white-space: nowrap !important;
}
.brand em{
  display: inline !important;
  margin-left: 0 !important;
  animation: none !important;   /* the pulsing scale was fighting the layout */
}
.brand .brand-back{
  align-self: center !important;
  margin-right: 6px !important;
}

@media (max-width: 720px){
  .brand{ font-size: 20px !important; }
  .top-nav .brand{ font-size: 19px !important; }
}

/* ============================================================
   Chat composer: tighter so it never dominates the screen
   ============================================================ */
@media (max-width: 720px){
  /* Textarea shrinks to a single line by default */
  #chatIn{
    min-height: 38px !important;
    max-height: 100px !important;
    padding: 9px 12px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    line-height: 1.35 !important;
  }

  /* Send button matches the textarea height */
  #chatSend, #chatStop{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 10px !important;
  }
  #chatSend svg{ width: 16px !important; height: 16px !important; }

  /* The whole composer block loses its padding and gaps */
  .composer{
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
  }
  .inputrow{ gap: 6px !important; }
  .ctxrow{
    margin-bottom: 5px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .ctxrow .sw{ font-size: 11px !important; }
  .ctxrow .sw .knob{ width: 24px !important; height: 14px !important; }
  .ctxrow .sw .knob::after{ width: 8px !important; height: 8px !important; top: 2px !important; left: 2px !important; }
  .ctxrow .sw input:checked + .knob::after{ left: 12px !important; }
  .ctxrow .seg button{ padding: 3px 8px !important; font-size: 10px !important; }
  .ctxrow .chip{ padding: 3px 7px !important; font-size: 10px !important; }
  .sysdet summary{ padding: 2px 0 !important; font-size: 9px !important; }

  /* Message bubbles also shrink */
  .msgs{ padding: 10px 10px !important; }
  .msg{ margin-bottom: 12px !important; max-width: 100% !important; }
  .msg .bubble{ font-size: 14px !important; line-height: 1.5 !important; }
  .msg.user .bubble{ padding: 8px 11px !important; }
  .msg.ai .bubble{ padding: 2px 3px 2px 9px !important; }
}

/* ============================================================
   Mobile pass 4 ,  chat composer, Study Desk, home tool cards.
   Placed last so it always wins the cascade on phones.
   ============================================================ */
@media (max-width: 820px){

  /* ---- Chat composer: MUCH thinner ---- */
  .study-view[data-view="chat"] .vbar{
    padding: 2px 8px !important;
    min-height: 34px !important;
    gap: 4px !important;
  }
  .study-view[data-view="chat"] .vbar .vtitle{
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-family: var(--sans) !important;
  }
  .study-view[data-view="chat"] .vbar > .hint{ display: none !important; }

  /* Composer: hard-cap its height */
  .composer{
    padding: 5px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 130px !important;
    gap: 0 !important;
  }
  .sysdet{ margin-bottom: 2px !important; }
  .sysdet summary{ padding: 1px 0 !important; font-size: 9px !important; }
  .ctxrow{
    margin-bottom: 4px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .ctxrow::-webkit-scrollbar{ display: none !important; }
  .ctxrow > *{ flex: 0 0 auto !important; }
  .ctxrow .sw{ font-size: 10.5px !important; }
  .ctxrow .seg button{ padding: 2px 7px !important; font-size: 9.5px !important; }
  .ctxrow .chip{ padding: 2px 6px !important; font-size: 9.5px !important; max-width: 130px !important; }

  /* The textarea itself: single line by default */
  #chatIn{
    min-height: 34px !important;
    max-height: 48px !important;
    height: 34px !important;
    padding: 7px 10px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    border-radius: 10px !important;
    overflow-y: auto !important;
  }
  #chatSend, #chatStop{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 9px !important;
  }
  #chatSend svg{ width: 15px !important; height: 15px !important; }
  .inputrow{ gap: 5px !important; align-items: flex-end !important; }

  /* ---- Study Desk action buttons: scrollable row, no overflow ---- */
  #homeDesk .dash-qa{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding: 10px 12px 0 !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #homeDesk .dash-qa::-webkit-scrollbar{ display: none !important; }
  #homeDesk .dash-qa .btn{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-width: auto !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    min-height: 34px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-indent: 0 !important;
    line-height: 1.15 !important;
  }
  #homeDesk .dash-qa .btn.primary{ color: var(--accent-ink) !important; }

  /* ---- Home tool cards: bigger tap targets, less cramped ---- */
  .fallback-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .tool-card{
    padding: 12px 11px !important;
    gap: 10px !important;
    min-height: 66px !important;
  }
  .tool-card .tc-icon{
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  .tool-card .tc-icon svg{ width: 19px !important; height: 19px !important; }
  .tool-card h3{ font-size: 13px !important; line-height: 1.25 !important; }
  .tool-card p{ font-size: 10.5px !important; }
}

/* ============================================================
   TOOL-CARD BADGES ,  small pills for "new" and "smart" tools
   ============================================================ */
.tool-card .tc-new{
  position:absolute;
  top:10px; right:10px;
  z-index:2;
  font:700 8.5px var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:99px;
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 2px 8px -2px color-mix(in srgb,var(--accent) 55%,transparent);
  pointer-events:none;
}
[data-skin="paper"] .tool-card .tc-new,
[data-skin="comfy"] .tool-card .tc-new{
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--accent) 45%,transparent);
}
/* ============================================================
   MOBILE USABILITY PASS (appended)
   ============================================================ */
@media (max-width: 820px){
  html, body { overflow-x: hidden !important; }
  * { max-width: 100vw; }
  img, canvas, video, svg { max-width: 100% !important; height: auto; }

  /* Touch targets */
  @media (pointer: coarse){
    .btn, .ibtn, button { min-height: 44px !important; min-width: 44px !important; }
  }

  /* Full-screen dialogs on phones

     The panel is meant to be the whole screen, and it was not: the box was
     given a height in viewport units, and the units it used were dropped by
     any browser that does not know them - so the box fell back to being only
     as tall as its content, and the settings stopped short of the bottom of
     the screen with a black band of the page showing underneath.

     The box is now pinned to the four edges and given no height of its own.
     That makes it exactly the screen whatever the viewport units mean, and
     the body inside it scrolls instead of deciding how tall the panel is. */
  dialog, .modal, .dlg, .overlay-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    inset: 0 !important;
    padding: 0 !important;
  }
  /* The body of a full-screen panel takes the room the head leaves and
     scrolls inside it. Without this the body keeps its own cap - 66vh for
     the settings - and the panel is still shorter than the screen. */
  dialog > .dlg-body,
  dialog > .pref-body,
  .overlay-card > .dlg-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Workspace panels become bottom sheets */
  .ws-win, [class*="ws-win"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 88vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* Dock: horizontal scroll, no overlap */
  .lsw-dock, .dock {
    left: 0 !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Prevent fixed elements covering content */
  .view { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width: 480px){
  .fallback-grid { grid-template-columns: 1fr !important; }
  .tool-card { min-height: 56px !important; }
}

/* ============================================================
   MOBILE OPTIMISATIONS & USABILITY (appended)
   ============================================================ */
@media (max-width: 820px){
  /* Smooth, momentum scrolling everywhere */
  * { -webkit-overflow-scrolling: touch; }

  /* Prevent long content overflow

     `anywhere` breaks a word in the middle to make it fit. That is a last
     resort for a single very long word - a URL, an identifier - and it is
     what turned the whiteboard's settings into "Expor / t PNG" and "Temp /
     lates": the words were not too long for the screen, they were too long
     for the column they had been squeezed into, and `anywhere` made them
     break rather than the column give way.

     `break-word` only breaks a word that cannot fit the line at all, and
     the panels below keep their width, so the words stay whole. */
  body, .view, .panel, .card, .bubble { word-wrap: break-word; overflow-wrap: break-word; }

  /* Scrollable tables / code blocks instead of page overflow */
  table, pre, code, .code-block { display: block; overflow-x: auto; max-width: 100%; }

  /* Larger tap targets for lists and links */
  li, a, .list-row, .item { min-height: 44px; display: flex; align-items: center; }

  /* Hide non-essential decorative chrome on phones */
  .starfield, .bg-glow, .hero-note { display: none !important; }

  /* Bottom safe-area padding for fixed bars */
  .top-nav, .composer, .dock { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }

  /* Inputs: bigger, no zoom */
  input, textarea, select { font-size: 16px !important; padding: 10px 12px !important; }
  /* A box is not a field. The field's padding around a checkbox is padding
     around a mark drawn in a box, and it is what made every checkbox in the
     whiteboard's settings look like an empty field of its own. */
  input[type="checkbox"], input[type="radio"] {
    padding: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: inherit !important;
  }

  /* Images responsive */
  img { max-width: 100% !important; height: auto !important; }
}

/* Performance: reduce paint on low-end devices */
@media (prefers-reduced-motion: reduce), (max-width: 820px){
  .backdrop-blur, [class*="blur"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* LaTeX view mobile pass */
@media (max-width: 720px) {
  #view-latex-pdf .tp-tools { flex-wrap: wrap; gap: 6px; }
  #view-latex-pdf .lt-live { font-size: 12px; }
  #view-latex-pdf #ltSrc { min-height: 320px !important; font-size: 12.5px; }
  #view-latex-pdf .ltgal-grid { grid-template-columns: 1fr; }
  .lt-ai-card { width: 96vw; max-height: 92vh; }
  .lt-ai-diff { max-height: 180px; }
}