/* ============================================================
   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{display:none;}

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:color-mix(in srgb,var(--surface) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--line-2);}
.mt-btn{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border:0;background:transparent;
  color:var(--ink-1);border-radius:12px;cursor:pointer;transition:background .15s,transform .12s;}
.mt-btn:active{transform:scale(.9);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:6px 8px;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:drop-shadow(0 2px 6px var(--amber-glow));}
.mt-title{font-family:var(--ff-display);font-weight:700;font-size:17px;letter-spacing:.01em;color:var(--ink-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw;}
.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;}

/* the workspace: chat fills everything below the top bar, no bottom dock */
body[data-device="phone"] #stage{inset:calc(52px + env(safe-area-inset-top)) 0 0 0;}
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;}

/* 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%;}
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,cubic-bezier(.22,1,.36,1));
  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-left:16px;padding-right:16px;}
body[data-device="phone"] .chat-compose{padding-bottom:calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-2);background:color-mix(in srgb,var(--surface) 92%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;bottom:0;}
body[data-device="phone"] .chat-input{font-size:16px;}            /* 16px = no iOS zoom-on-focus */
body[data-device="phone"] .chat-send{width:42px;height:42px;}
body[data-device="phone"] .chat-model .cm-name{max-width:74px;}

/* ════════ 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,ease);}
#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:24px;border-top-right-radius:24px;
  border-top:1px solid var(--line);box-shadow: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,cubic-bezier(.22,1,.36,1));}
#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:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));
  border-radius:18px;padding:14px 16px;margin-bottom:16px;}
.md-home:active{transform:scale(.99);}
.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-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;}
.md-tile:active{transform:scale(.93);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),inset 0 1px 0 rgba(255,255,255,.22);}
.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;}

/* 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;}