/* ============================================================
   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;
    overflow: hidden !important;
    background: var(--surface) !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 ---------- */
  dialog{ width: min(560px, 96vw) !important; max-height: 92vh !important; }
  .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);
}