/* boot/mobile.css — [dcp-0040] the 380px layer.
 
   Loaded after app.css so it wins without editing the desktop rules. The
   product is the same product on a phone; this narrows it, it does not build a
   second UI.
 
   THE ONE INVARIANT: nothing scrolls the page sideways at 380px. Horizontal
   scroll on a phone is not a cosmetic issue — it hides content behind an edge
   users do not think to drag, and it makes every tap target move. So anything
   that can be wider than the screen (tables, code, diagrams, long tokens)
   scrolls INSIDE its own box, and the body never does. */

@media (max-width: 480px) {

  /* ---- the invariant, stated once ------------------------------------- */
  html, body {
    max-width: 100%;
    overflow-x: hidden;      /* the page itself never scrolls sideways */
  }
  * { min-width: 0; }        /* flex/grid children default to min-content and
                                otherwise refuse to shrink — this is the single
                                most common cause of a sideways page */

  /* #modelpop is the one desktop rule with a hard min-width above 380px. */
  #modelpop { min-width: 0; width: calc(100vw - 24px); left: 12px; right: 12px; }

  /* ---- wide content scrolls INSIDE its own box ------------------------- */
  .msg table, .msg pre, .dashv, .brsv, #wfp-stages, .wfp-builder,
  .wfp-runform, .wf-card, .set-page, .rv3-table, .rv3-wide {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .msg, #inputwrap, #composebar, #ctxpill, .placeholder, .empty-sub {
    width: auto;
    max-width: 100%;
  }
  /* An unbroken token (a hash, a URL, a base64 blob) is the other classic
     cause of a sideways page. */
  .msg, .msg p, .msg li, .msg td, .rv3-cell {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* ---- room for the tab bar -------------------------------------------- */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* ---- bottom tabs ------------------------------------------------------ */
  .mtabs { display: flex; }

  /* THE DESKTOP CHROME. Measured in a real browser at 380px: #rail (52px) +
     #convpanel (236px) + #convsplit (6px) = 294px, leaving the chat area 86px
     wide. An earlier version of this file hid "#sidebar", which does not exist
     in this DOM — so it hid nothing and the app was unusable on a phone while
     every static check passed. The bottom tabs replace this chrome. */
  #rail, #convpanel, #convsplit, .desktop-only { display: none !important; }
  #shell { display: block; }
  #stage { width: 100%; min-width: 0; }

  /* The composer toolbar row: keep + and model dropdown on a single row, hide hint */
  #composebar { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  #composebar > * { flex: 0 0 auto; }
  #composebar > .compose-left { flex: 1 1 auto; min-width: 0; }
  .compose-hint { display: none !important; }
  .modeltag-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* The tab bar is hidden ABOVE the breakpoint rather than not rendered, so the
   same DOM serves both and there is no second template to keep in sync.
   This is a min-width query on purpose: a bare `.mtabs { display: none }` sits
   later in the file than the max-width block and has equal specificity, so it
   won and the bar stayed invisible on the phone it was written for. */
@media (min-width: 481px) {
  .mtabs { display: none; }
}

.mtabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* [LT1 light-mode-fix] was #14161c / #23262f — a dark bar on the light page. */
  background: var(--tb-surface); border-top: 1px solid var(--tb-border);
  align-items: stretch;
}
.mtab {
  flex: 1 1 0; min-width: 0;              /* five tabs share 380px evenly */
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  background: none; border: 0; color: var(--tb-text-muted);   /* [LT1] */
  font-size: 10px; line-height: 1.2; cursor: pointer;
  /* 44px is the smallest reliably tappable target; below it people miss. */
  min-height: 44px;
}
.mtab .mtab-ico { font-size: 18px; line-height: 1; }
.mtab[aria-selected="true"] { color: var(--tb-text); }   /* [LT1 light-mode-fix] */
.mtab .mtab-label {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mtab-dot {
  position: absolute; transform: translate(12px, -10px);
  width: 7px; height: 7px; border-radius: 50%; background: #d98a3d;
}