/* ============================================================
   LUMEN FIXES — Opera GX + rail + mobile safety
   Loaded LAST (after core-styles-02.css). Every rule is scoped
   or !important so it wins over every earlier conflicting one.
   ============================================================ */

/* ---------- 1. THE RAIL — one authoritative definition ----------
   The repo previously defined .rail as 78px / 60px / 72px / 52px in
   separate blocks; the last one (52px) won and clipped the labels.
   This reset forces one width and guarantees labels never truncate. */
.rail{
  width:84px !important;
  min-width:84px !important;
  max-width:84px !important;
  align-items:stretch !important;
  flex:0 0 84px !important;
  padding:8px 4px !important;
  gap:3px !important;
}
.rail button{
  width:100% !important;
  height:auto !important;
  min-height:52px !important;
  max-height:none !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:9px 2px !important;
  border-radius:10px !important;
  flex:none !important;
}
.rail button svg,
.rail button i[data-lucide],
.rail button > svg{
  width:19px !important;
  height:19px !important;
  flex:none !important;
}
.rail button span{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  text-align:center !important;
  font:600 9.5px/1 var(--mono,monospace) !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  color:inherit !important;
  padding:0 2px !important;
}
.rail button.on{
  background:color-mix(in srgb,var(--accent) 12%,transparent) !important;
  color:var(--accent) !important;
  box-shadow:none !important;
}
.rail button.on::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:12px !important;
  bottom:12px !important;
  width:3px !important;
  border-radius:0 3px 3px 0 !important;
  background:var(--accent) !important;
  transform:none !important;
}

/* ---------- 2. OPERA GX / low-power sweep ---------- */
html.opr-gx .tool-nav,
html.opr-gx .tool-head,
html.opr-gx .vbar,
html.opr-gx .rail,
html.opr-gx .composer,
html.opr-gx .home-search,
html.opr-gx .chat-nav,
html.opr-gx .pop,
html.opr-gx dialog,
html.opr-gx .toast,
html.opr-gx .chat-nav-shell,
html.opr-gx .wb-chat,
html.opr-gx .calc-panel{
  background:var(--surface,var(--bg)) !important;
  box-shadow:0 1px 0 var(--border,transparent) inset !important;
}
html.opr-gx #space-canvas{ display:none !important; }

/* ---------- 3. TOOL-CARD HOT PATH ----------
   content-visibility:auto only when the compositor is trusted. */
html.opr-gx #view-home .tool-card{
  content-visibility:visible !important;
  contain:none !important;
}
@media (min-width:1100px) and (pointer:fine){
  #view-home .tool-card{
    content-visibility:auto;
    contain-intrinsic-size:120px 96px;
    contain:layout style paint;
  }
}
@media (max-width:1099px), (pointer:coarse){
  #view-home .tool-card{
    content-visibility:visible !important;
    contain:none !important;
  }
}

/* ---------- 4. MOBILE / TOUCH SAFETY ---------- */
@media (pointer:coarse){
  .rail button:hover,
  .rail button:active{ transform:none !important; }
  .tool-card:hover{ transform:none !important; }
  .tool-card:hover .tc-icon{ transform:none !important; }
  .btn:hover,
  .ibtn:hover{ transform:none !important; }
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
  textarea,
  select{ font-size:16px !important; }
  #pages,
  .msgs,
  .vbody,
  .library-grid,
  .guide-wrap{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
}

/* Collapse the rail on phones — the content is reachable via
   in-view navigation and the study rail's secondary buttons. */
@media (max-width:720px){
  .rail{ width:64px !important; min-width:64px !important; max-width:64px !important; flex-basis:64px !important; }
  .rail button{ min-height:48px !important; padding:8px 2px !important; }
  .rail button span{ font-size:8px !important; }
}

/* ---------- 5. SAFE AREA + STUDY DESK MOBILE ---------- */
#studyMain, #view-study .shell{ padding-bottom:env(safe-area-inset-bottom,0px); }
@media (max-width:720px){
  #homeDesk{ margin:14px 12px 4px; border-radius:12px; }
  #homeDesk .desk-toggle{ padding:11px 14px; }
  #homeDesk .desk-toggle .desk-hint{ display:none; }
  #homeDesk .dash-qa{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:12px 14px 0; }
  #homeDesk .dash-qa::-webkit-scrollbar{ display:none; }
  #homeDesk .dash-qa .btn{ flex:none; }
  #homeDeskGrid.dash-grid{ grid-template-columns:1fr; gap:10px; padding:12px 14px 14px; }
  #view-home .pt-10{ padding-top:1.75rem; }
  #view-home .hero-title{ font-size:clamp(38px,12vw,52px); }
  #view-home .hero-note{ font-size:9px; margin-top:12px; }
  #view-home .home-search{ margin-top:20px; padding:10px 12px; }
}

/* ---------- 6. STARFIELD — kill on reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #space-canvas{ display:none !important; }
}

/* ============================================================
   RAIL — FINAL. Loaded last. Nothing after this touches .rail
   ============================================================ */

/* Desktop: 96px — one-word labels fit without any ellipsis logic. */
.rail{
  width:96px !important;
  min-width:96px !important;
  max-width:96px !important;
  flex:0 0 96px !important;
  padding:8px 6px !important;
  gap:2px !important;
  /* Scrolls rather than clipping. Ten destinations plus the calendar footer
     overflow a short viewport, and `visible` pushed the tail out of reach
     with no way to get to it. The bar looks identical because the scrollbar
     is transparent until the rail is hovered. */
  overflow-x:hidden !important;
  overflow-y:auto !important;
  min-height:0 !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
  background:var(--surface);
}
.rail:hover{scrollbar-color:var(--line2) transparent}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
.rail:hover::-webkit-scrollbar-thumb{background:var(--line2)}
.rail button{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  width:100% !important;
  height:auto !important;
  min-height:54px !important;
  padding:9px 4px !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--soft) !important;
  cursor:pointer !important;
  flex:none !important;
  overflow:visible !important;
}
.rail button > svg,
.rail button > i[data-lucide],
.rail button > i{
  width:20px !important;
  height:20px !important;
  flex:none !important;
  color:inherit !important;
}
.rail button > span{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font:600 10px/1.1 var(--mono,ui-monospace,monospace) !important;
  letter-spacing:0 !important;
  text-transform:uppercase !important;
  color:inherit !important;
  text-align:center !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
.rail button:hover{
  color:var(--fg) !important;
  background:color-mix(in srgb,var(--accent) 8%,transparent) !important;
  border-color:color-mix(in srgb,var(--accent) 32%,transparent) !important;
  transform:none !important;
}
.rail button.on{
  color:var(--accent) !important;
  background:color-mix(in srgb,var(--accent) 12%,transparent) !important;
  border-color:color-mix(in srgb,var(--accent) 38%,transparent) !important;
  box-shadow:none !important;
}
.rail button.on::before{
  content:'' !important;
  position:absolute !important;
  left:-6px !important; top:12px !important; bottom:12px !important;
  width:3px !important; border-radius:0 3px 3px 0 !important;
  background:var(--accent) !important;
  transform:none !important;
}

/* ── Tablet / phone: 84px is enough for a 6-char label at 10px ── */
@media (max-width:900px){
  .rail{
    width:84px !important; min-width:84px !important; max-width:84px !important;
    flex-basis:84px !important;
    padding:6px 4px !important;
  }
  .rail button{ min-height:50px !important; padding:8px 3px !important; gap:4px !important; }
  .rail button > span{ font-size:9.5px !important; }
  .rail button > svg,
  .rail button > i[data-lucide]{ width:18px !important; height:18px !important; }
}

/* ── Very narrow phone: drop the label entirely, icon-only ── */
@media (max-width:520px){
  .rail{
    width:60px !important; min-width:60px !important; max-width:60px !important;
    flex-basis:60px !important;
    padding:6px 4px !important;
  }
  .rail button{ min-height:46px !important; padding:8px 2px !important; gap:0 !important; }
  .rail button > span{ display:none !important; }
  .rail button > svg,
  .rail button > i[data-lucide]{ width:22px !important; height:22px !important; }
  .rail button.on::before{ left:-4px !important; }
}

/* ============================================================
   CHAT VIEW — defensive sizing for shrunken/zoomed viewports
   ============================================================ */
#view-study .vbar .seg{ flex:0 0 auto !important; }
#view-study .vbar .seg button{ padding:6px 12px !important; font-size:11px !important; }
#view-study .vbar .btn{ padding:7px 12px !important; font-size:12px !important; }
#chatMsgs .sugs .btn{ max-width:280px !important; margin:0 auto !important; }
.composer{ flex:0 0 auto !important; max-height:44vh !important; }
#chatIn{ min-height:44px !important; max-height:150px !important; }