/*
 * Phones. The stage (the 3D place) is the page; the panels are a sheet that rises over its lower part.
 *
 *   portrait   a bottom sheet with three heights: peek (tabs only), half (the default: the place above, the conversation below, the composer
 *              always in reach) and full (the sheet fills the page). One grabber moves it: tap to step, drag to go the way the finger goes.
 *   landscape  the sheet becomes a column on the right; the place keeps the left.
 *   keyboard   the visible viewport is the page (`--vv-h`, set by mobile.js): the sheet takes it all and the composer stays above the keys.
 *
 * Nothing here applies on a desktop browser: it is all keyed on body.is-phone, which mobile.js sets for narrow windows and for coarse-pointer
 * windows that are short. Loaded last. Sizes in the sheet are thumb sizes: 44px at least, and 16px text in fields so a phone does not zoom.
 */

.sheet-grabber { display: none; }
.desktop-hint { display: none; }

body.shell-on.is-phone {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --vh: var(--vv-h, 100dvh);
  --bar: calc(var(--cognition-space, 3.4rem));
  --sheet-w: min(46vw, 24rem);
}

/* ---- the page is the visible viewport -------------------------------------------------------------------------------------------------- */
body.shell-on.is-phone .shell { inset: 0 0 auto 0; height: var(--vh); }
body.shell-on.is-phone { overflow: hidden; overscroll-behavior: none; }

/* ---- portrait: the sheet ------------------------------------------------------------------------------------------------------------- */
body.shell-on.is-phone { --sheet-h: calc(var(--vh) * 0.46); }
/* peek shows exactly the grabber row and the tab row: two 44px rows, the tab row's 1px rule and the sheet's 1px top border.
   #stage subtracts the same --sheet-h, so the place and the sheet meet without a gap or an overlap. */
body.shell-on.is-phone { --grabber-h: 44px; --tabs-row-h: 45px; }
body.shell-on.is-phone[data-sheet="peek"] { --sheet-h: calc(var(--grabber-h) + var(--tabs-row-h) + 1px); }
body.shell-on.is-phone[data-sheet="full"] { --sheet-h: calc(var(--vh) - var(--bar) - var(--safe-b) - var(--safe-t) - 3.4rem); }
body.shell-on.is-phone[data-keyboard="open"] { --sheet-h: calc(var(--vh) - var(--safe-t) - 3rem); --bar: 0px; --safe-b: 0px; }

body.shell-on.is-phone #stage { top: 0; bottom: auto; height: calc(var(--vh) - var(--sheet-h) - var(--bar) - var(--safe-b)); }
body.shell-on.is-phone[data-keyboard="open"] #stage { height: 3rem; }
body.shell-on.is-phone .shell .dock {
  top: auto; left: 0; right: 0; width: auto; height: var(--sheet-h);
  bottom: calc(var(--bar) + var(--safe-b));
  border: 0; border-top: 1px solid var(--line-strong); border-radius: 1.1rem 1.1rem 0 0;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.4);
  padding-left: var(--safe-l); padding-right: var(--safe-r);
  transition: height 0.22s var(--ease);
  overflow: hidden;
}
body.shell-on.is-phone[data-keyboard="open"] .shell .observatory-dock { display: none; }
body.shell-on.is-phone .shell .observatory-dock { padding-bottom: var(--safe-b); }
body.shell-on.is-phone .shell .dock .sheet-grabber {
  display: flex; flex: none; align-items: center; justify-content: center; width: 100%; height: var(--grabber-h); min-height: var(--grabber-h); padding: 0; margin: 0;
  background: none; border: 0; border-radius: 1.1rem 1.1rem 0 0; touch-action: none; cursor: grab;
}
body.shell-on.is-phone .sheet-grabber-bar { width: 2.6rem; height: 4px; border-radius: 999px; background: var(--line-strong); }
body.shell-on.is-phone .sheet-grabber:active .sheet-grabber-bar { background: var(--text-dim); }
body.shell-on.is-phone[data-sheet="peek"] .shell .dock .dock-panels, body.shell-on.is-phone[data-sheet="peek"] .shell .dock .dockline { display: none; }

/* the tabs: one row, every panel reachable, each a thumb */
body.shell-on.is-phone .shell .panel-navigation { display: block; flex: none; }
body.shell-on.is-phone .shell .panel-navigation .mobile-more { display: none; }
body.shell-on.is-phone .shell .panel-navigation[data-expanded="false"] .tab:nth-child(n+3):not([aria-selected="true"]) { display: inline-flex; }
body.shell-on.is-phone .shell .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 0 0.5rem; gap: 0.15rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
body.shell-on.is-phone .shell .tab { flex: none; min-height: 44px; padding: 0 0.85em; scroll-snap-align: start; }
body.shell-on.is-phone .shell .tab .icon { display: inline-block; }
body.shell-on.is-phone .shell .dockline { flex: none; min-height: 44px; }
body.shell-on.is-phone .shell .dock-panels { flex: 1 1 auto; min-height: 0; }

/* ---- the top of the stage: who, and the camera ---------------------------------------------------------------------------------------------- */
body.shell-on.is-phone .shell .presence { top: calc(var(--safe-t) + 0.5rem); left: calc(var(--safe-l) + 0.6rem); max-width: calc(100% - 9.5rem - var(--safe-l)); flex-wrap: nowrap; gap: 0.35rem; }
body.shell-on.is-phone .shell .presence-main { gap: 0.55rem; padding: 0.25rem 0.8rem 0.25rem 0.25rem; min-height: 44px; }
body.shell-on.is-phone .presence-main .medallion { width: 2.2rem; height: 2.2rem; font-size: var(--t-3); }
body.shell-on.is-phone .presence-line, body.shell-on.is-phone .presence-note, body.shell-on.is-phone .presence-break { display: none; }
body.shell-on.is-phone .presence-state { padding: 0.15em 0.5em; letter-spacing: 0.04em; }
body.shell-on.is-phone .shell .stagebar { top: calc(var(--safe-t) + 0.5rem); right: calc(var(--safe-r) + 0.6rem); left: auto; bottom: auto; align-items: flex-end; max-width: calc(100% - 1.2rem); }
body.shell-on.is-phone .shell .stage-controls[open] { width: min(20rem, calc(100vw - 1.2rem)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
body.shell-on.is-phone .shell .stagebar-row { gap: 0.4rem; }
body.shell-on.is-phone .shell .stage-hint { display: none; }
body.shell-on.is-phone .shell .seg { min-height: 44px; }
body.shell-on.is-phone .shell .seg-group { width: 100%; }
body.shell-on.is-phone .shell .seg-group .seg { flex: 1; }
body.shell-on.is-phone[data-keyboard="open"] .shell .presence, body.shell-on.is-phone[data-keyboard="open"] .shell .stagebar { display: none; }
body.shell-on.is-phone .shell .toasts { top: calc(var(--safe-t) + 4rem); left: calc(var(--safe-l) + 0.6rem); right: calc(var(--safe-r) + 0.6rem); width: auto; bottom: auto; max-height: calc(var(--vh) * 0.4); overflow-y: auto; }

/* notices stay small over the stage: two at most, text and two small buttons in a row */
body.shell-on.is-phone .shell .toast { align-items: flex-start; gap: 0.5rem; padding: 0.45rem 0.6rem; }
body.shell-on.is-phone .shell .toasts > .toast:nth-child(n+2) { display: none; }
body.shell-on.is-phone .shell .toast-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
body.shell-on.is-phone .shell .toast .toast-buttons { display: flex; flex-direction: column; gap: 0.25rem; }
body.shell-on.is-phone .shell .toast .toast-buttons .btn { min-height: 36px; padding: 0.2em 0.7em; }
body.shell-on.is-phone .shell .toast-text { font-size: var(--t-2); }
body.shell-on.is-phone .shell .toast-age { display: none; }

/* the half-height sheet gives the words the room: the status line and the composer's reminder wait for the full sheet */
body.shell-on.is-phone:not([data-sheet="full"]) .shell .dock .dockline { display: none; }
body.shell-on.is-phone .shell .composer-input { min-height: 44px; max-height: 9em; }
body.shell-on.is-phone .shell .composer { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 0.5rem 0.7rem calc(0.5rem + var(--safe-b)); gap: 0.4rem 0.5rem; }
body.shell-on.is-phone .shell .composer .composer-error { grid-column: 1 / -1; }
body.shell-on.is-phone .shell .composer-row { align-self: end; }
body.shell-on.is-phone .shell #panel-talk > .panel-head { display: none; }
body.shell-on.is-phone .shell .presence-name { font-size: var(--t-5); }
body.shell-on.is-phone #pwa-open { top: auto; left: auto; right: calc(var(--safe-r) + 0.6rem); bottom: calc(var(--bar) + var(--safe-b) + var(--sheet-h) + 0.5rem); max-width: 7rem; }
body.shell-on.is-phone .shell .composer-help, body.shell-on.is-phone .shell .composer-hint, body.shell-on.is-phone .shell .field-help.composer-note { display: none; }

/* problems the scene reports sit just over the sheet, small, and scroll if there are many */
body.shell-on.is-phone #problems { position: fixed; top: auto; left: calc(var(--safe-l) + 0.6rem); right: calc(var(--safe-r) + 8rem); bottom: calc(var(--bar) + var(--safe-b) + var(--sheet-h) + 0.5rem); max-width: none; max-height: 14vh; overflow-y: auto; font-size: 0.75rem; padding: 0.4rem 0.6rem; z-index: 25; }
body.shell-on.is-phone[data-sheet="full"] #problems, body.shell-on.is-phone[data-keyboard="open"] #problems { display: none; }

/* ---- what a phone does not need ---------------------------------------------------------------------------------------------------------- */
body.shell-on.is-phone .shell #shell-walk, body.shell-on.is-phone .shell #shell-hide-panels, body.shell-on.is-phone .shell .observatory-hint { display: none; }
body.shell-on.is-phone .desktop-hint { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.5rem 0.9rem; padding: 0.5rem 0.4rem 0.5rem 0.75rem; font-size: var(--t-2); color: var(--text-dim); background: var(--accent-wash, rgba(216, 175, 103, 0.12)); border-left: 3px solid var(--accent, #d8af67); border-radius: 0.5rem; }
body.shell-on.is-phone .desktop-hint[hidden] { display: none; }
body.shell-on.is-phone .desktop-hint > span { flex: 1; }
body.shell-on.is-phone .desktop-hint-close { flex: none; min-width: 44px; min-height: 44px; margin: -0.5rem 0; font-size: 1.4rem; line-height: 1; color: var(--text-dim); background: none; border: 0; }

/* ---- thumbs and keyboards ------------------------------------------------------------------------------------------------------------------ */
body.shell-on.is-phone .shell :is(button, .btn, summary, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .toast-link) { min-height: 44px; }
body.shell-on.is-phone .shell :is(input, select, textarea) { font-size: 16px; }
body.shell-on.is-phone .shell input[type="checkbox"], body.shell-on.is-phone .shell input[type="radio"] { width: 1.5rem; height: 1.5rem; }
body.shell-on.is-phone .shell .panel { padding: 0.8rem 0.9rem calc(1rem + var(--safe-b)); }
body.shell-on.is-phone .shell * { max-width: 100%; }
body.shell-on.is-phone .shell .composer, body.shell-on.is-phone .shell .composer-row { padding-bottom: max(0.4rem, var(--safe-b)); }
body.shell-on.is-phone .shell pre, body.shell-on.is-phone .shell code { overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
body.shell-on.is-phone .shell .toast { padding: 0.6rem 0.7rem; }
body.shell-on.is-phone #cfp-recovery { max-height: 38vh; overflow-y: auto; font-size: 0.8rem; padding-top: calc(0.5rem + var(--safe-t)); }

body.shell-on.is-phone .shell .observatory-body { flex-direction: column; }
body.shell-on.is-phone .shell .observatory-body > .observatory-mount { flex: 1 1 auto; min-height: 0; }

/* ---- the Observatory takes the screen when it is opened ----------------------------------------------------------------------------------- */
body.shell-on.is-phone .shell[data-mobile-workspace="observatory"] .observatory-dock { top: var(--safe-t); max-height: none; bottom: 0; height: auto; }
body.shell-on.is-phone .shell[data-mobile-workspace="observatory"] #stage { visibility: hidden; }

body.shell-on.is-phone[data-sheet="full"] #pwa-open, body.shell-on.is-phone[data-keyboard="open"] #pwa-open { display: none; }

/* ---- landscape phones: the sheet is a column on the right ---------------------------------------------------------------------------------- */
@media (orientation: landscape) {
  body.shell-on.is-phone { --sheet-h: 100%; }
  body.shell-on.is-phone[data-sheet] { --sheet-h: 100%; }
  body.shell-on.is-phone #stage { left: 0; right: calc(var(--sheet-w) + var(--safe-r)); width: auto; height: auto; bottom: calc(var(--bar) + var(--safe-b)); }
  body.shell-on.is-phone .shell .dock { top: 0; left: auto; right: 0; bottom: calc(var(--bar) + var(--safe-b)); width: calc(var(--sheet-w) + var(--safe-r)); height: auto; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35); }
  body.shell-on.is-phone .shell .dock .sheet-grabber { display: none; }
  body.shell-on.is-phone[data-sheet="peek"] .shell .dock .dock-panels, body.shell-on.is-phone[data-sheet="peek"] .shell .dock .dockline { display: flex; }
  body.shell-on.is-phone .shell .presence { max-width: calc(100% - var(--sheet-w) - 9.5rem); }
  body.shell-on.is-phone .shell .stagebar { right: calc(var(--sheet-w) + var(--safe-r) + 0.6rem); }
  body.shell-on.is-phone .shell .toasts { right: calc(var(--sheet-w) + var(--safe-r) + 0.6rem); }
  body.shell-on.is-phone #problems { bottom: calc(var(--bar) + var(--safe-b) + 0.5rem); right: calc(var(--sheet-w) + var(--safe-r) + 0.6rem); }
  body.shell-on.is-phone[data-keyboard="open"] #stage { height: auto; }
  body.shell-on.is-phone[data-keyboard="open"] .shell .dock { top: 0; bottom: 0; }
  body.shell-on.is-phone[data-keyboard="open"] .shell .presence, body.shell-on.is-phone[data-keyboard="open"] .shell .stagebar { display: flex; }
}

@media (prefers-reduced-motion: reduce) { body.shell-on.is-phone .shell .dock { transition: none; } }