/* ============================================================
   JUWEL OS · Mobile styles — chat-first shell
   All visible rules scoped to body[data-device="phone"] so the
   desktop experience is untouched. Top bar + bottom-sheet drawer
   live here; the Chat app becomes the full-screen home surface.
   ============================================================ */

/* the mobile chrome is built on every device but only shows on phone */
#mob-top,#mob-drawer,#mob-tabs,#mob-sms{display:none;}

:root{ --juwel-kb-dx:0px; --juwel-kb-dy:0px; }

/* ── iOS keyboard pan compensation ──
   #mob-top + #stage are position:fixed (anchored to the LAYOUT viewport) and body is
   overflow:hidden (nothing to natively scroll). When the soft keyboard opens, iOS still
   pans the VISUAL viewport to keep the focused input clear of the keyboard/accessory bar
   (visualViewport.offsetTop > 0) even though nothing in the DOM scrolled. That leaves the
   fixed shell — composer included — sitting above where the visible window actually is,
   opening a dead gap before the keyboard. juwel-os-mobile.js tracks the pan via
   visualViewport and writes it to --juwel-kb-dx/dy (rAF-throttled); counter-translating by
   the negative of that amount re-aligns the shell to the visible window exactly.
   Deliberately UNTRANSITIONED: keyboard-tracking must be instant or it visibly lags. */
body[data-device="phone"][data-stage="desktop"] #mob-top,
body[data-device="phone"][data-stage="desktop"] #stage{
  transform:translate(calc(-1 * var(--juwel-kb-dx,0px)),calc(-1 * var(--juwel-kb-dy,0px)));
  transition:none!important;
}

body[data-device="phone"][data-stage="desktop"] #mob-top{
  display:flex;align-items:center;gap:8px;position:fixed;top:0;left:0;right:0;z-index:96;
  height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line-2);}
.mt-btn{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--ink-1);border-radius:12px;cursor:pointer;transition:background .15s,transform .12s var(--ease-out);}
.mt-btn.mt-btn-cap{width:auto;min-width:44px;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:5px 8px 4px;}
.mt-btn-ic{display:grid;place-items:center;line-height:0;}
.mt-btn-ic svg{width:20px;height:20px;}
.mt-btn-lb{font-family:var(--mono);font-size:8.5px;letter-spacing:.04em;color:var(--ink-3);line-height:1;}
.mt-btn:active{transform:scale(.98);background:color-mix(in srgb,var(--ink-1) 8%,transparent);}
.mt-btn svg{width:23px;height:23px;}
.mt-home{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;
  border:0;background:transparent;cursor:pointer;padding:8px;min-height:40px;border-radius:12px;}
.mt-home:active{background:color-mix(in srgb,var(--ink-1) 6%,transparent);}
.mt-gem{width:24px;height:24px;object-fit:contain;flex:0 0 auto;filter:none;}
.mt-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;}
.mt-title{font-family:var(--ff-display);font-weight:700;font-size:15.5px;letter-spacing:.01em;color:var(--ink-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw;}
.mt-context{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-3);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw;}
.mt-btn.has-live{position:relative;color:var(--topaz-ink);}
.mt-btn.has-live::after{content:attr(data-count);position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  display:grid;place-items:center;background:var(--garnet);color:#fff;font:700 9px/1 var(--mono);border:2px solid var(--surface);}
.mt-home.on-app .mt-gem{opacity:.8;}
.mt-tick{display:inline-flex;align-items:center;color:var(--ok);flex:0 0 auto;}
.mt-tick svg{width:15px;height:15px;}

/* workspace: top bar + bottom tabs; desktop dock/menubar stay hidden */
body[data-device="phone"] #stage{
  inset:calc(52px + env(safe-area-inset-top)) 0 calc(58px + env(safe-area-inset-bottom)) 0;
  height:calc(var(--juwel-vvh,100dvh) - 52px - env(safe-area-inset-top) - 58px - env(safe-area-inset-bottom));
}
body[data-device="phone"] #menubar,
body[data-device="phone"] #dock,
body[data-device="phone"] #companion,
body[data-device="phone"] #chatbar,
body[data-device="phone"] #chatbar-disclaimer{display:none!important;}

/* ── Bottom tab bar (phone product chrome) ── */
body[data-device="phone"][data-stage="desktop"] #mob-tabs{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:97;
  height:calc(58px + env(safe-area-inset-bottom));
  padding:4px 6px calc(4px + env(safe-area-inset-bottom));
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-top:1px solid var(--line-2);
  gap:2px;
}
#mob-tabs .mbt{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:transparent;color:var(--ink-3);border-radius:12px;cursor:pointer;
  padding:6px 2px;font:600 10px/1 var(--ff-ui,system-ui,sans-serif);letter-spacing:.01em;
  transition:background .12s,color .12s,transform .1s;
}
#mob-tabs .mbt svg{width:22px;height:22px;}
#mob-tabs .mbt span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mob-tabs .mbt.on{color:var(--ink-1);background:color-mix(in srgb,var(--topaz) 12%,transparent);}
#mob-tabs .mbt:active{transform:scale(.97);}

/* ── SMS invite strip (dismissible) ── */
body[data-device="phone"][data-stage="desktop"] #mob-sms:not([hidden]){
  display:flex;position:fixed;left:10px;right:10px;z-index:95;
  bottom:calc(66px + env(safe-area-inset-bottom));
  align-items:center;gap:10px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-2,0 8px 28px rgba(0,0,0,.12));
}
#mob-sms .ms-k{font:700 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
#mob-sms .ms-num{flex:1;min-width:0;font:650 14px/1.2 var(--ff-ui,system-ui,sans-serif);color:var(--ink-1);text-decoration:none;}
#mob-sms .ms-x{border:0;background:transparent;color:var(--ink-3);font-size:18px;line-height:1;width:32px;height:32px;border-radius:8px;cursor:pointer;}
#mob-sms .ms-x:active{background:color-mix(in srgb,var(--ink-1) 8%,transparent);}
.md-sms{display:flex;flex-direction:column;gap:3px;margin:4px 0 14px;padding:14px 16px;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--topaz) 30%,var(--line));background:var(--topaz-soft,var(--surface-2));
  text-decoration:none;color:inherit;}
.md-sms b{font-size:14.5px;color:var(--ink-1);}
.md-sms span{font-size:12.5px;color:var(--ink-3);}

/* safety: never let the front door show through on the phone workspace
   (covers any case where its opacity:0 rule doesn't win) */
body[data-device="phone"][data-stage="desktop"] #frontdoor{display:none!important;}

/* full-screen apps: clean, no window chrome bar (the top bar handles identity/back) */
body[data-device="phone"] .fwin .fwin-bar{display:none;}
body[data-device="phone"] .fwin{inset:0!important;}

/* ── Chat as home: hide its desktop history rail; expose via slide-over ── */
body[data-device="phone"] .chatapp{display:block;position:relative;}
body[data-device="phone"] .chat-main{height:100%;min-height:0;}
body[data-device="phone"] .chat-history{position:absolute;inset:0 auto 0 0;width:82%;max-width:320px;z-index:30;
  transform:translateX(-104%);transition:transform .26s var(--ease-out);
  box-shadow:14px 0 40px -18px rgba(0,0,0,.4);border-right:1px solid var(--line);}
body[data-device="phone"] .chat-history.open{transform:none;}
body[data-device="phone"] .chat-hist-toggle{top:10px;left:10px;}

/* roomier conversation + composer, respect the home indicator */
body[data-device="phone"] .chat-scroll{padding:16px 16px 12px;overscroll-behavior:contain;scroll-padding-bottom:110px;}
body[data-device="phone"] .chat-compose{padding-bottom:12px;
  border-top:1px solid var(--line-2);background:var(--surface);position:sticky;bottom:0;}
/* composer stays above bottom tabs (tabs own the safe-area) */
body[data-device="phone"] .chat-input{font-size:16px;min-height:44px;}   /* 16px = no iOS zoom-on-focus; min-height = headroom so a wrapped placeholder is never clipped */
/* juwel-os-mobile.js swaps the placeholder to a one-line phone copy ("Ask JUWEL…") so this
   is a safety net, not the primary fix — see fixComposer() in juwel-os-mobile.js. */
body[data-device="phone"] .chat-input::placeholder{white-space:normal;}
/* FACET amber rule (≤2 amber elements at rest): on phone the focused-input glow stacks with
   the amber send button; swap it for an ink-toned ring so focus doesn't read as a third
   amber element. (Desktop's amber focus ring is unchanged.) */
body[data-device="phone"] .chat-input:focus{
  border-color:color-mix(in srgb,var(--ink-1) 32%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-1) 9%,transparent);
}
body[data-device="phone"] .chat-send,
body[data-device="phone"] .chat-attach,
body[data-device="phone"] .chat-gear{width:44px;height:44px;}   /* 44px min touch target (up from the 40-42px desktop-tuned sizes) */
body[data-device="phone"] .chat-model .cm-name{max-width:74px;}
body[data-device="phone"] .chat-empty{margin:0 auto;min-height:100%;justify-content:center;padding:28px 4px 36px;}
body[data-device="phone"] .chat-empty .ce-h{font-size:25px;}
body[data-device="phone"] .ce-starters{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
body[data-device="phone"] .ce-chip{min-height:58px;padding:10px 11px;align-items:flex-start;font-size:12.5px;line-height:1.35;}
body[data-device="phone"] .chat-quick{padding-left:10px;padding-right:10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
body[data-device="phone"] .chat-quick::-webkit-scrollbar{display:none;}

/* ════════ bottom-sheet drawer — "JUWEL's apps" / connections ════════ */
body[data-device="phone"][data-stage="desktop"] #mob-drawer{display:block;position:fixed;inset:0;z-index:140;}
#mob-drawer[hidden]{display:none!important;}
#mob-drawer .md-scrim{position:absolute;inset:0;background:rgba(8,7,11,.46);opacity:0;transition:opacity .24s var(--ease-out);}
#mob-drawer.on .md-scrim{opacity:1;}
#mob-drawer .md-sheet{position:absolute;left:0;right:0;bottom:0;max-height:86vh;overflow-y:auto;
  background:var(--surface);border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl);
  border-top:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge),0 -18px 50px -20px rgba(0,0,0,.5);
  padding:10px 16px calc(22px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .28s var(--ease-out);}
#mob-drawer.on .md-sheet{transform:none;}
.md-grip{width:38px;height:4.5px;border-radius:99px;background:var(--line);margin:6px auto 14px;}
.md-h{display:flex;flex-direction:column;gap:2px;padding:0 4px 14px;}
.md-h b{font-family:var(--ff-display);font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink-1);}
.md-h span{font-size:13px;color:var(--ink-3);}

.md-home{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  background:var(--surface);box-shadow:inset 0 1px 0 var(--edge);
  border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;transition:transform .12s var(--ease-out);}
.md-home:active{transform:scale(.98);}
.md-home img,.md-home svg.gem{flex:0 0 auto;}
.md-home-t{flex:1;min-width:0;display:flex;flex-direction:column;}
.md-home-t b{font-size:15.5px;font-weight:650;color:var(--ink-1);}
.md-home-t i{font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:1px;}
.md-home>svg:last-child{width:20px;height:20px;color:var(--ink-3);flex:0 0 auto;}

.md-groups{display:flex;flex-direction:column;gap:16px;}
.md-group-h{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:0 4px 7px;}
.md-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;}
.md-tile{display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:transparent;cursor:pointer;
  padding:10px 4px;border-radius:16px;transition:background .14s,transform .12s var(--ease-out);}
.md-tile:active{transform:scale(.98);background:color-mix(in srgb,var(--ink-1) 6%,transparent);}
.md-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;
  box-shadow:var(--shadow-1);}
.md-ic svg{width:26px;height:26px;}
.md-tn{font-size:11.5px;font-weight:500;color:var(--ink-2);text-align:center;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

.md-foot{display:flex;gap:9px;align-items:flex-start;margin-top:18px;padding:13px 14px 0;border-top:1px solid var(--line-2);
  font-size:12px;line-height:1.5;color:var(--ink-3);}
.md-foot svg{width:15px;height:15px;color:var(--ok);flex:0 0 auto;margin-top:1px;}
.md-foot b{color:var(--ink-2);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}

/* mobile forms and app chrome: never inherit desktop fixed widths */
body[data-device="phone"] .app-hd{padding:18px 16px 14px;gap:10px;}
body[data-device="phone"] .app-hd .ttl{font-size:23px;}
body[data-device="phone"] .app-pad{padding:16px;}
body[data-device="phone"] .hd-actions{align-self:flex-start;}
body[data-device="phone"] .set-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);}
body[data-device="phone"] .set-nav{display:flex;align-items:center;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px;scrollbar-width:none;}
body[data-device="phone"] .set-nav::-webkit-scrollbar{display:none;}
body[data-device="phone"] .set-nav button{flex:0 0 auto;align-self:center;min-height:44px;white-space:nowrap;}
body[data-device="phone"] .hive-grid{grid-template-columns:1fr;}
body[data-device="phone"] .act-compose{flex-direction:column;align-items:stretch;}
body[data-device="phone"] .act-compose .pbtn{align-self:flex-end;}
body[data-device="phone"] .act-suggest{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
body[data-device="phone"] .act-suggest::-webkit-scrollbar{display:none;}

@media (max-width:370px){
  .md-grid{grid-template-columns:repeat(3,1fr);}
  body[data-device="phone"] .ce-starters{grid-template-columns:1fr;}
  .mt-title,.mt-context{max-width:42vw;}
}

/* tablet: keep the desktop dock but allow the phone shell to take over below 640 only */
body[data-device="tablet"] #mob-top,body[data-device="tablet"] #mob-drawer{display:none;}

/* ============================================================
   LUXLIQ mobile tuning (2026-07-13) — "shorter pours, bigger hit
   targets, less parallax" (worker brief §mobile). Hit targets are
   already 44px above; this shortens fluid timings and thins the
   background atmosphere so the lamp never taxes a phone GPU or
   lags behind a fast thumb. Scoped to phone only — desktop keeps
   its full lava-lamp cadence.
   ============================================================ */
body[data-device="phone"]{
  --visc-pour:260ms; --visc-settle:320ms; --visc-bead:220ms;
  --visc-marble:420ms; --visc-seal:260ms;
  --visc-blob:14s; --visc-plume:16s; /* slower idle loop = less perceived parallax */
}
/* thin the atmosphere: cap to one visible blob instead of three */
body[data-device="phone"] .lx-lamp>.lx-blob:nth-child(n+2),
body[data-device="phone"] .lx-lamp>.lx-plume:nth-child(n+2){display:none;}
body[data-device="phone"] .lx-lamp>.lx-blob{opacity:calc(var(--lx-fluid-alpha,.16) * .7);}
/* satellite blobs around the entity read as clutter at phone sizes */
body[data-device="phone"] juwel-entity .je-sat.s3{display:none;}

/* reduced motion: positions snap, only opacity animates */
@media (prefers-reduced-motion:reduce){
  body[data-device="phone"] .chat-history{transition:none;}
  #mob-drawer .md-sheet{transition:none;}
  #mob-drawer .md-scrim{transition:opacity .15s ease;}
  .mt-btn:active,.md-tile:active,.md-home:active{transform:none;}
}

/* ════════ every app usable on the phone shell ════════
   Scoped to data-device="phone" (NOT @media) because the phone shell now
   also serves coarse-pointer devices up to 1024px, where the old
   max-width:640px fallbacks never fire. Windows are inset:0 fullscreen. */
body[data-device="phone"] .fwin-body{overflow-x:hidden;}
body[data-device="phone"] .fwin-body *{min-width:0;}

/* Mail: folder rail becomes a horizontal strip; list + read stack */
body[data-device="phone"] .mailapp{grid-template-columns:1fr;grid-template-rows:auto minmax(0,38%) minmax(0,1fr);}
body[data-device="phone"] .mail-rail{flex-direction:row;align-items:center;gap:6px;overflow-x:auto;padding:10px 12px;
  border-right:0;border-bottom:1px solid var(--line-2);scrollbar-width:none;}
body[data-device="phone"] .mail-rail::-webkit-scrollbar{display:none;}
body[data-device="phone"] .mail-rail .pbtn{width:auto;flex:0 0 auto;}
body[data-device="phone"] .mail-cats{flex-direction:row;gap:4px;margin-top:0;}
body[data-device="phone"] .mcat{flex:0 0 auto;white-space:nowrap;}
body[data-device="phone"] .mail-railnote{display:none;}
body[data-device="phone"] .mail-list{border-right:0;border-bottom:1px solid var(--line-2);}

/* Calendar: month grid on top, agenda/side panel below */
body[data-device="phone"] .cal-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;}
body[data-device="phone"] .cal-grid{border-right:0;grid-auto-rows:minmax(54px,1fr);}

/* Ledger + Settings: single column (device-scoped twin of the 640px fallback) */
body[data-device="phone"] .ledger{grid-template-columns:1fr;}
body[data-device="phone"] .ledger-list{border-right:0;border-bottom:1px solid var(--line);max-height:38%;}

/* IDE: icon rail + one surface; preview toggles in place of the editor */
body[data-device="phone"] .vsc,body[data-device="phone"] .vsc.no-pv,body[data-device="phone"] .vsc.no-side{
  grid-template-columns:44px 1fr;grid-template-areas:"act editor" "status status";}
body[data-device="phone"] .vsc.show-pv{grid-template-columns:44px 1fr;grid-template-areas:"act preview" "status status";}

/* Browser: keep the omnibar tappable, dial tiles single column on narrow */
body[data-device="phone"] .brapp .br-tabs{overflow-x:auto;scrollbar-width:none;}
body[data-device="phone"] .brapp .br-tabs::-webkit-scrollbar{display:none;}

/* Studio editor: stack the meta column */
body[data-device="phone"] .te-grid{grid-template-columns:1fr;}
body[data-device="phone"] .acct-grid{grid-template-columns:1fr;}

/* Key-value + label rows: stack instead of clipping */
body[data-device="phone"] .kv-row{grid-template-columns:1fr;gap:3px;}
body[data-device="phone"] .lfield{grid-template-columns:1fr;gap:4px;}

/* ── comfortable touch targets (44px hit areas, visuals unchanged) ── */
body[data-device="phone"] .ch-new,
body[data-device="phone"] .ch-sess-x,
body[data-device="phone"] .chat-hist-toggle{min-width:44px;min-height:44px;}
body[data-device="phone"] .ch-sess-t{min-height:44px;display:flex;align-items:center;}
body[data-device="phone"] .chat-mode{min-width:44px;min-height:44px;}

/* Small controls audited across Mail/Calendar/Settings/Facets at 375-390px:
   bump the tap area to ~40-44px without changing the visual size of the
   control itself (padding/invisible pseudo-expand only — desktop untouched). */
body[data-device="phone"] .pbtn.sm{min-height:40px;padding-top:9px;padding-bottom:9px;}
body[data-device="phone"] .iconbtn{min-width:40px;min-height:40px;}
body[data-device="phone"] .mcat{min-height:40px;}
/* .toggle (settings switches) stays visually 42x24 (::after already owns the knob) —
   grow the actual hit area with an invisible ::before, inset so it doesn't reach
   into the label text to its left. */
body[data-device="phone"] .toggle{position:relative;}
body[data-device="phone"] .toggle::before{content:'';position:absolute;inset:-10px -6px;}
/* .ag-info / .ag-x are opacity:0-at-rest "reveal on :hover" icons
   (juwel-os-apps.css / juwel-os-actions.css) — on a touchscreen there is no
   persistent hover, so these were invisible AND unreachable on phone, not
   just small (the .fn-x/.sp-x pair already got this exact visibility fix via
   `@media (hover:none),(pointer:coarse)` — see juwel-os-apps.css; .ag-info and
   .ag-x are given the matching visibility fix alongside their own
   definitions, for the same reason). Here we only grow their hit area — both
   are already position:absolute in their base rule, so this just extends the
   clickable bounds without moving them off the card corner.
   (.fr-item/.fr-x — the "in focus" rail — is already force-hidden below 900px
   via juwel-os-shell.css:431, so it is never reachable on phone and needs no
   fix here.) */
body[data-device="phone"] .ag-info::before,
body[data-device="phone"] .ag-x::before{content:'';position:absolute;inset:-9px;}