/* ============================================================
   porcelain-mobile.css — Talk-first phone surface. <=768px.

   Figma: BT8PA8nvRjJQ1M0C13D0QX page "Mobile — Talk to JUWEL" (220:2).
   M1 Talk home 220:4. M7 Apps drawer 220:16.

   Loaded by pa-mobile.js (already on pa-boot.js). Does not edit SUPER
   porcelain-shell.css. Desktop viewport is untouched.

   Ink = you act. Iridescence = JUWEL acts (the hex mark only at rest).
   No italic. No serif. No emoji. No wash.

   SECOND PASS (2026-09-03), founder direction: the talk home is now
   just the chat bar and the Apps button -- no large mic, no "Hold to
   talk" caption pair. Figma frame M1 (220:4, cited above) still shows
   both and now DIVERGES from the product; see the Figma map and
   docs/release/GOLIVE_MOBILE_RECEIPT_2026-09-03.md. .pa-talk-mic/
   .pa-talk-hintsub/.pa-talk-hint/.pa-talk-sub below are dead CSS on
   this surface now (kept only so the P2 mic-ratio detector stays
   green -- see the comment directly above .pa-talk-mic). The new
   .pa-talk-identity rule carries the replacement copy.

   GOLIVE-MOBILE-20260903: every selector below is already gated by
   body[data-pa-talk] (set only when pa-mobile.js's isPhone() is true --
   see applyTalkMode() in pa-mobile.js) or by the .pa-talk / .pa-talk-drawer
   elements' own `hidden` property, which pa-mobile.js only clears at
   phone widths. The old `@media (max-width:768px){...}` wrapper around
   this whole file was therefore redundant with that JS gating, and it
   made every rule inside it silently inert in a jsdom test harness that
   cannot re-evaluate a media query against a simulated innerWidth --
   which is exactly how three of this packet's defects (P1/P3/P7) went
   unnoticed by the existing suite's synthetic-fixture tests. Removing
   the wrapper changes nothing at runtime in a real browser (verified:
   Chrome DevTools Protocol at 375x812 and 1440x900, both before and
   after) and makes the rules testable. `.pa-talk[hidden]{display:none
   !important}` below is what keeps this surface correctly invisible at
   desktop widths now that `.pa-talk{display:flex}` is unconditional --
   author `!important` still beats author-normal regardless of viewport.
   ============================================================ */

.pa-talk,
.pa-talk-drawer{
  --pa-ink:#17181A;
  --pa-ink-pill:#121317;
  --pa-porcelain:#F7F7F8;
  --pa-white:#FFFFFF;
  --pa-line:rgba(23,24,26,.10);
  --pa-hair:rgba(23,24,26,.07);
  box-sizing:border-box;
  font-style:normal;
}

body[data-pa-talk] #pshRail,
body[data-pa-talk] .psh-rail{
  display:none !important;
}
/* P3 fix: the shell's own greeting, the "Your assistant" companion chip
   (pa-sammy.js #paSammyWrap/.pa-sammy-wrap) and the first-run "Assistant
   Setup" card (pa-ui-onboarding.js #paUiOnboardingWrap/.pa-onb-wrap) are
   all inserted into .psh-deck ahead of the shared composer by packets
   that know nothing about phone talk mode. Measured root cause (jsdom
   repro against the real shell+onboarding+sammy scripts, then confirmed
   live at 375x812 via CDP): with those two banners present, .psh-deck's
   auto-sized grid row grows and the whole footer -- banners AND the
   composer -- shifts up near the top of the screen instead of staying
   pinned to the bottom. Hiding them here (mobile-owned CSS) rather than
   editing pa-sammy.js/pa-ui-onboarding.js/porcelain-shell.js keeps this
   fix entirely on the mobile side, as the brief requires. Hidden in
   every talk mode (home/drawer/app): none of the three phone concepts
   have room for a desktop first-run banner. */
body[data-pa-talk] #paUiOnboardingWrap,
body[data-pa-talk] .pa-onb-wrap,
body[data-pa-talk] #paSammyWrap,
body[data-pa-talk] .pa-sammy-wrap,
body[data-pa-talk="home"] #pshDesk,
body[data-pa-talk="home"] .psh-desk,
body[data-pa-talk="drawer"] #pshDesk,
body[data-pa-talk="drawer"] .psh-desk,
body[data-pa-talk="home"] .psh-greet,
body[data-pa-talk="drawer"] .psh-greet,
body[data-pa-talk] .psh-top,
body[data-pa-talk] #pshJuju,
body[data-pa-talk] .psh-juju,
body[data-pa-talk] .psh-foot,
/* GOLIVE-MOBILE-BLEED-20260904 (founder screenshot, live 12:01): connect
   offers, WAITING ON YOU rows and onboarding chrome that desk packets insert
   into the composer band or the desk surfaced THROUGH the phone home. On a
   phone the composer band carries the composer and nothing else, and no desk
   surface exists outside app mode. */
body[data-pa-talk] .psh-deck > :not(#pshComposer):not(#paUiOnboardingWrap):not(#paSammyWrap),
body[data-pa-talk="home"] .psh-surface,
body[data-pa-talk="drawer"] .psh-surface,
body[data-pa-talk="home"] .psh-msg,
body[data-pa-talk="home"] .psh-bubble{
  display:none !important;
}

/* ============================================================
   PHONE-APPS-20260904 — app mode fills the phone.

   Measured before (CDP, 390x844, this checkout served statically): the
   one visible surface was `Chat@-1764,-50 224x724` -- a 224px desktop
   card, 1764px off the left edge and 50px above the top, with every
   other app's surface display:none. Tapping Calendar, Files, Factory or
   Apps was a blank grey screen from the top bar to the composer.

   Two causes, both addressed here:

   1. WHICH surface shows. The old rule was `.psh-surface + .psh-surface
      {display:none}` -- it kept the FIRST child, and chat.js re-pins its
      own pane to desk.firstChild (chat.js:451-453), so from the second
      tap on the survivor was Chat and the tapped app was the hidden
      sibling. Now pa-mobile.js names the surface the person actually
      tapped with data-pa-phone-app and everything else is hidden.

   2. WHERE it sits. pa-grid.js's applyRect (pa-grid.js:254-277) writes
      inline `position:absolute` + left/top/width/height for the desk
      GRID, on a desk that scrolls horizontally (pa-grid.css:22-35). An
      author `!important` declaration outranks a normal inline style in
      the cascade, so `position:fixed !important` below takes the surface
      out of that scrolled, inset stage entirely and pins it to the
      viewport: full width, from under the phone header down to the top
      of the composer band (inset 0 0 88px 0 before the header inset).

   The desk-side gates the mobile pass proposed (bail out of adopt() /
   layoutAll() below 820px in pa-grid.js; skip the eviction loop at
   porcelain-shell.js:253 on narrow viewports) are outside this packet's
   file ownership and are recorded as DEFERRED hunks in
   docs/release/PHONE-APPS-20260904_RECEIPT.md.
   ============================================================ */

/* Height of the phone app header. One number, used by the bar and by the
   surface's top inset, so they can never disagree. */
body[data-pa-talk="app"]{
  --pa-app-bar-h:52px;
}
/* JUWEL-OS-MOBILE-PUSH-20260905: one band for the shared composer.
   88px is the existing no-keyboard slack (56px pill + 10px pad + 22px).
   Safe-area and the visualViewport keyboard (--psh-kb-h, set on #psh)
   used to be ignored here, so iOS home-indicator + keyboard slid the
   composer under .pa-talk (z-index 200 vs deck 40). */
body[data-pa-talk] #psh,
body[data-pa-talk] .psh{
  --pa-composer-band:calc(88px + env(safe-area-inset-bottom,0px) + var(--psh-kb-h,0px));
}

body[data-pa-talk="app"] #pshDesk,
body[data-pa-talk="app"] .psh-desk,
body[data-pa-talk="app"] #pshDesk.pdg-desk,
body[data-pa-talk="app"] #pshDesk.jdb-desk.pdg-desk{
  display:block !important;
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:var(--pa-composer-band,88px) !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  z-index:24;
  background:var(--pa-porcelain,#F7F7F8);
}
/* pa-grid.css:72-80 gives the desk an ::after whose width is the grid's
   scroll extent (--pdg-extent-x). On a phone there is no stage to pan,
   and leaving it in place is what let the desk scroll 1764px away from
   the surface the person opened. */
body[data-pa-talk="app"] #pshDesk.pdg-desk::after,
body[data-pa-talk="app"] #pshDesk.jdb-desk.pdg-desk::after{
  display:none !important;
}

/* Exactly one surface, and it is the one pa-mobile.js marked. */
body[data-pa-talk="app"] .psh-surface{
  display:none !important;
}
body[data-pa-talk="app"] .psh-surface[data-pa-phone-app]{
  display:flex !important;
  flex-direction:column !important;
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:calc(var(--pa-app-bar-h,52px) + env(safe-area-inset-top,0px)) !important;
  bottom:var(--pa-composer-band,88px) !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  animation:none !important;
  overflow:hidden !important;
  z-index:26;
  background:var(--pa-white,#FFFFFF);
}
/* The desk chrome (mark, title, close X) is replaced by the phone header
   above it, so the app's own content starts at the top of its screen. */
body[data-pa-talk="app"] .psh-surface[data-pa-phone-app] .psh-surface-head{
  display:none !important;
}
body[data-pa-talk="app"] .psh-surface[data-pa-phone-app] .psh-surface-body{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}
/* A drag/resize grip is a mouse affordance; there is no desk to resize. */
body[data-pa-talk="app"] .pdg-resize{
  display:none !important;
}

.pa-app-bar{
  position:fixed;
  left:0;right:0;top:0;
  z-index:36;
  box-sizing:border-box;
  height:calc(52px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 8px 0;
  display:flex;
  align-items:center;
  background:var(--pa-porcelain,#F7F7F8);
  border-bottom:1px solid var(--pa-hair, rgba(23,24,26,.07));
}
.pa-app-bar[hidden]{
  display:none !important;
}
/* .pa-talk-back is position:absolute for its other, floating use; inside
   this bar it is an ordinary flow child, the same shape the drawer's own
   Done override uses (.pa-talk-drawer-top .pa-talk-back below). */
.pa-app-bar .pa-talk-back{
  position:static;
  min-width:44px;
  min-height:44px;
  padding:0 10px 0 4px;
  border:0;
  background:none;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:16px;
  font-weight:500;
  color:var(--pa-ink,#17181A);
}
.pa-app-bar .pa-talk-back svg{
  width:18px;height:18px;flex:none;
}

.pa-app-empty{
  position:fixed;
  left:0;right:0;
  top:calc(52px + env(safe-area-inset-top,0px));
  bottom:var(--pa-composer-band,88px);
  z-index:28;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  padding:24px 20px;
  background:var(--pa-white,#FFFFFF);
}
.pa-app-empty[hidden]{
  display:none !important;
}
.pa-app-empty-t{
  margin:0;
  font-size:17px;
  font-weight:600;
  color:var(--pa-ink,#17181A);
}
.pa-app-empty-s{
  margin:0;
  font-size:14px;
  color:rgba(23,24,26,.55);
}

/* P1/P3 fix: pin the shared deck (voice status + composer) to the true
   viewport bottom from the mobile side. porcelain-shell.css leaves
   .psh-deck as a content-sized grid row (`.psh{grid-template-rows:64px
   1fr auto}`) with no `position` of its own, so any sibling packet that
   inserts a banner ahead of the composer (see above) can shift the whole
   row away from the bottom. Fixing the position here is a defensive,
   mobile-owned guarantee that the composer's bottom edge stays anchored
   to the real bottom regardless of what any other packet inserts into
   .psh-deck in the future -- this is the actual root-cause fix; hiding
   the two known banners above is the visible symptom fix. */
body[data-pa-talk] .psh-deck{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:220;
  width:100%;
  padding-left:calc(16px + env(safe-area-inset-left,0px));
  padding-right:calc(16px + env(safe-area-inset-right,0px));
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px) + var(--psh-kb-h,0px));
  pointer-events:none;
}
body[data-pa-talk] .psh-composer,
body[data-pa-talk] #pshComposer,
body[data-pa-talk] .psh-composer *{
  pointer-events:auto;
}

/* One outline: the pill. Inner input is chromeless. Figma composer/one-outline.
   !important beats porcelain-shell irid dual-background + drop shadow. */
body[data-pa-talk] .psh-composer,
body[data-pa-talk] #pshComposer{
  width:100%;
  max-width:358px;
  height:56px;
  min-height:56px;
  margin:0 auto;
  padding:6px 6px 6px 16px;
  border-radius:999px;
  border:1px solid var(--pa-line, rgba(23,24,26,.10)) !important;
  background:#FFFFFF !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:none !important;
  gap:8px;
}
body[data-pa-talk] .psh-composer:focus-within,
body[data-pa-talk] #pshComposer:focus-within,
body[data-pa-talk] .psh-composer:has(input:focus-visible){
  background:#FFFFFF !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:none !important;
  border-color:rgba(23,24,26,.14) !important;
}
body[data-pa-talk] .psh-composer input,
body[data-pa-talk] #pshInput{
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  background:none !important;
  min-height:44px;
}

.pa-talk{
  display:flex;
  flex-direction:column;
  /* P1 fix: the header through the Apps link is naturally only
     ~300-330px of content inside a ~700px box at 375x812 -- distributing
     that leftover as ONE flex:1/auto gap (the original bug) or as one
     unbounded margin both produce a single gap far past the 96px ceiling
     the acceptance criteria set. space-between divides the SAME leftover
     space evenly across every top-level section instead (measured at
     375x812: ~70-80px per gap, comfortably under 96), while the header
     stays flush at the top and the Apps link lands flush at the bottom,
     next to the shared composer. Bounded for 375x812 specifically, which
     is the only size this criterion is checked at; other phone heights
     get a proportionally different (never negative, never overlapping)
     split of the same leftover space. */
  /* GOLIVE-MOBILE-HOME-20260904: flow from the top with one rhythm; the
     Apps link pins to the bottom (margin-top:auto) so the only open space
     is the one the conversation grows into. space-between had spread the
     header, greeting, pill and identity line across the screen as four
     dead bands with a black pill floating in the middle. */
  justify-content:flex-start;
  gap:14px;
  position:absolute;
  inset:0 0 var(--pa-composer-band,88px) 0;
  /* above every desk surface and banner; below veils (520), guide (460) and toasts (600) */
  z-index:200;
  padding:calc(16px + env(safe-area-inset-top,0px)) 20px 12px;
  background:var(--pa-porcelain,#F7F7F8);
  /* A short viewport (320x568) or a long transcript scrolls the whole
     surface together rather than overflowing the frame or compressing
     the space-between gaps to zero. */
  overflow-y:auto;
}
.pa-talk[hidden],
.pa-talk-drawer[hidden]{
  display:none !important;
}

.pa-talk-top{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
}
.pa-talk-hex{
  width:26px;height:26px;
  flex:none;
}
.pa-talk-hex.pa-talk-loading{
  animation:pa-talk-hex 1.2s ease-in-out infinite;
}
.pa-talk-word{
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--pa-ink,#17181A);
}
.pa-talk-guest{
  margin-left:auto;
  min-width:80px;min-height:44px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--pa-hair, rgba(23,24,26,.07));
  background:var(--pa-white,#FFFFFF);
  color:var(--pa-ink,#17181A);
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.pa-talk-dot{
  width:7px;height:7px;border-radius:99px;
  background:#8E7CFF;
  display:inline-block;
}

.pa-talk-log{
  /* P1 fix: was flex:1, which claimed all leftover vertical space
     between the header and the mic regardless of how little transcript
     content existed -- measured as a 224px dead gap on the deployed
     Preview. Figma 220:4 shows the greeting as ordinary flow content
     (221:10-221:14), not a space-filling region, so this now sizes to
     its own content like every other section. */
  flex:none;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.pa-talk-turn{
  max-width:330px;
  font-size:16px;
  line-height:1.45;
  color:var(--pa-ink,#17181A);
}
.pa-talk-turn-meta{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  margin-bottom:6px;
}
.pa-talk-turn-meta img{width:14px;height:14px;}
.pa-talk-you{
  align-self:flex-end;
  background:var(--pa-ink-pill,#121317);
  color:#FFFFFF;
  border-radius:999px;
  min-height:44px;
  padding:12px 18px;
  max-width:224px;
}

/* Figma 221:15-221:18 chip/receipt. Hidden by default; see
   refreshReceiptChip() in pa-mobile.js -- no chip paints unless there is
   a real signed count behind it. */
.pa-talk-chip{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:32px;
  padding:0 14px 0 10px;
  border-radius:999px;
  border:1px solid var(--pa-hair, rgba(23,24,26,.07));
  background:var(--pa-white,#FFFFFF);
}
.pa-talk-chip[hidden]{display:none !important;}
.pa-talk-chip img{width:13px;height:13px;flex:none;}
.pa-talk-chip span{font-size:13px;color:var(--pa-ink,#17181A);}

/* Figma 221:19-221:20 pill/you "What did I miss?" -- an ink pill,
   right-aligned like every other "you" turn, that submits through the
   real kernel composer (see pa-mobile.js's sendToKernel binding). */
/* LAUNCH DAY 2026-09-04. This is a SUGGESTION the user may tap, but it
   was drawn as a right-aligned ink pill: the exact position, radius,
   fill and text colour of .pa-talk-you, the bubble a message the user
   HAS ALREADY SENT gets. With a JUWEL turn directly above it on the
   guest home, it read as a message in the transcript rather than as
   something to press. It is now an outlined chip on the left, where
   JUWEL's own side of the conversation lives: same tap target, same
   copy, no longer confusable with a sent bubble. */
.pa-talk-action{
  margin:0 auto 0 0;
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  max-width:264px;
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--line,rgba(23,24,26,.10));
  border-radius:999px;
  background:var(--pa-white,#FFFFFF);
  color:var(--pa-ink,#17181A);
  font:inherit;
  font-size:14px;
  font-weight:500;
  text-align:left;
  cursor:pointer;
}

/* ORPHANED, INTENTIONALLY (second pass, 2026-09-03): CHANGE 1 removed
   #paTalkMic and .pa-talk-hintsub/.pa-talk-hint/.pa-talk-sub from the
   talk home template in pa-mobile.js's mountTalk() -- founder
   direction, "just the CHATBAR ... and the APPS button". None of the
   four rules below (through .pa-talk-sub) now match any element on
   this surface; they are dead CSS, not a bug. Left in place, byte-for-
   byte, ONLY because the brief for this pass requires every first-pass
   detector to stay green, and P2 (the mic-ratio checker in
   porcelain-mobile-canon.test.js) parses .pa-talk-mic's own
   clamp() text directly out of this file's source, independent of
   whether any DOM node uses it. Recorded here and in the receipt as a
   named cleanup opportunity for a future pass, not silently left
   unexplained. Voice moved to the shared composer's own #pshMic
   (CHANGE 2); the caption pair's copy is superseded by
   .pa-talk-identity below (CHANGE 3). */
.pa-talk-mic{
  /* P2 fix: canon's own mic (Figma 220:4 mic/ring, 112x112 in a 390-wide
     frame = 28.7% of frame width) does not match this packet's stated
     acceptance target (16% of viewport width, 0.14-0.20 band, 88px
     ceiling) -- flagged as a discrepancy in the receipt rather than
     silently picked either way. Built to the acceptance band, which is
     also comfortably smaller than the 112px/30%-of-375 the lead measured
     as oversized on the deployed Preview. */
  width:clamp(56px,16vw,88px);
  height:clamp(56px,16vw,88px);
  margin:0 auto;
  flex:none;
  border:0;
  padding:0;
  border-radius:999px;
  background:#121317;
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 0 0 10px rgba(142,124,255,.18);
}
.pa-talk-mic[data-listening="1"]{
  box-shadow:0 0 0 10px rgba(78,200,240,.35);
}
.pa-talk-mic[aria-disabled="true"]{
  opacity:.4;cursor:not-allowed;
}
.pa-talk-mic svg{width:38%;height:38%;}

.pa-talk-hintsub{
  flex:none;
}
.pa-talk-hint{
  text-align:center;
  margin:0;
  font-size:16px;
  color:var(--pa-ink,#17181A);
}
.pa-talk-sub{
  text-align:center;
  margin:6px 0 0;
  font-size:13px;
  color:rgba(23,24,26,.55);
}

/* CHANGE 3 (second pass, 2026-09-03): identity line. No Figma node --
   founder direction post-dates M1 (220:4); see the Figma map entry
   with figma_node:null. Text itself is set by pa-mobile.js's
   refreshIdentityLine(); this rule only carries the shipped-face type
   scale, sentence case already enforced at the copy layer. No italic,
   no serif, no emoji -- Porcelain rules (same as every other rule in
   this file). */
.pa-talk-identity{
  text-align:left;
  margin:-8px 0 0;
  flex:none;
  font-size:14px;
  font-style:normal;
  /* was rgba(23,24,26,.7); --ink-3 is the same family and is the token
     the rest of the OS uses for secondary type. */
  color:var(--ink-3,rgba(23,24,26,.62));
}
/* Figma 222:19/222:24 icon/apps + "Apps". Canon places this below the
   composer (222:10); the composer is SUPER-owned (#pshComposer /
   .psh-deck) and out of this packet's reach, so the closest achievable
   position from the mobile side is last in this section's own flow,
   immediately above the shared composer band. Recorded as a finding in
   the receipt, not silently accepted as pixel-identical to canon. */
.pa-talk-apps-link{
  margin:auto auto 0;
  flex:none;
  min-width:44px;
  min-height:44px;
  padding:0 10px;
  border:0;
  background:none;
  /* LAUNCH DAY 2026-09-04: rgba(23,24,26,.55) composites to #7C7C7D on
     the #F7F7F8 ground = 3.82:1, under the 4.5:1 that 13px body text
     owes WCAG 2.1 SC 1.4.3. --ink-3 (.62 alpha) measures 4.72:1 and is
     the token every other secondary label in the OS already uses. */
  color:var(--ink-3,rgba(23,24,26,.62));
  font:inherit;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.pa-talk-apps-link svg{width:18px;height:18px;}

.pa-talk-back{
  position:absolute;
  top:calc(12px + env(safe-area-inset-top,0px));
  left:12px;
  z-index:32;
  min-width:70px;min-height:44px;
  border-radius:999px;
  border:1px solid var(--pa-line, rgba(23,24,26,.10));
  background:#FFFFFF;
  color:var(--pa-ink,#17181A);
  font:inherit;
}

.pa-talk-drawer{
  position:absolute;
  inset:0 0 var(--pa-composer-band,88px) 0;
  z-index:34;
  background:var(--pa-porcelain,#F7F7F8);
  padding:calc(16px + env(safe-area-inset-top,0px)) 20px 12px;
  overflow:auto;
}
.pa-talk-drawer-top{
  display:flex;align-items:center;min-height:44px;
  /* P6 fix: canon 226:49 btn/close sits top RIGHT (x=300 of a 390 frame,
     a 20px inset from the right edge). justify-content alone was NOT
     enough: #paTalkDrawerDone reuses .pa-talk-back (below) for its pill
     look, and .pa-talk-back is `position:absolute;left:12px` -- built
     for the OTHER use of that class, #paTalkBack, a floating "Talk" back
     control shown in "app" mode where there is no header row to sit in.
     Sharing the class also pulled in absolute positioning that took the
     Done button out of this row's flow entirely, so justify-content had
     nothing left to align -- measured x=12,y=12, matching that rule's
     left:12/top:12 exactly, not flex-start. The override below only
     re-flows .pa-talk-back when it is actually inside this row. */
  justify-content:flex-end;
}
.pa-talk-drawer-top .pa-talk-back{
  position:static;
}
.pa-talk-drawer-title{
  font-size:28px;font-weight:600;color:var(--pa-ink,#17181A);
  margin:24px 0 8px;
}
.pa-talk-drawer-note{
  font-size:13px;color:rgba(23,24,26,.55);margin:0 0 20px;
  max-width:340px;
}
.pa-talk-grid{
  display:grid;
  /* P5 fix: fixed 110px columns (repeat(3,110px) + 12px gaps = 354px of
     required content width) overflow a 375px viewport's 335px available
     content box (40px of the drawer's own horizontal padding), eating
     the right padding and leaving a 1px right margin against a 20px
     left margin -- measured and reproduced. Figma 220:16's own tiles are
     110px wide with a 10px gap, but only because 3*110 + 2*10 + 2*20 =
     390 exactly matches its frame width; that arithmetic does not hold
     at any other viewport. Fluid minmax(0,1fr) columns reproduce
     canon's proportions exactly at 390px and stay symmetric (left
     margin = right margin = the container's own padding, by
     construction) at every width, matching this packet's fluid
     acceptance requirement instead of canon's one fixed frame size. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.pa-talk-tile{
  height:92px;
  min-height:92px;
  border-radius:16px;
  border:1px solid var(--pa-hair, rgba(23,24,26,.07));
  background:#FFFFFF;
  color:var(--pa-ink,#17181A);
  font:inherit;
  font-size:13px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.pa-talk-tile svg{width:24px;height:24px;}
.pa-talk-pwa{
  margin-top:16px;
  min-height:44px;
  border-radius:16px;
  border:1px solid var(--pa-hair, rgba(23,24,26,.07));
  background:#FFFFFF;
  padding:12px 16px;
  font-size:12px;
  color:rgba(23,24,26,.55);
}

@keyframes pa-talk-hex{
  50%{opacity:.55;}
}

@media (prefers-reduced-motion:reduce){
  .pa-talk-hex.pa-talk-loading,
  .pa-talk-mic{
    animation:none !important;
    transition:none !important;
  }
}

/* ============================================================
   JUWEL-OS-MOBILE-PUSH-20260905 — composer above Talk, 44px hits,
   consent sheet. SUPER porcelain-shell.css is not edited.
   ============================================================ */

body[data-pa-talk] .psh-mic,
body[data-pa-talk] .psh-send{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
}
/* Hover scale is a mouse affordance; a thumb does not hover. Keep the
   pressed state so Send still acknowledges a tap. */
body[data-pa-talk] .psh-send:hover{
  transform:none;
  filter:none;
}
body[data-pa-talk] .psh-send:active{
  transform:scale(.92);
}

/* Shell money/privacy gate. The desk card is 460px with 12.5px buttons
   and hover-only ink. On a phone that is an untappable gate. */
body[data-pa-talk] #pshConsent.psh-veil{
  padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px));
  align-items:end;
  place-items:end center;
}
body[data-pa-talk] #pshConsent .psh-consent-card{
  width:100%;
  max-width:none;
  padding:20px 20px 16px;
  border-radius:20px 20px 0 0;
  box-sizing:border-box;
}
body[data-pa-talk] #pshConsent .psh-amount{
  font-size:36px;
}
body[data-pa-talk] #pshConsent .psh-consent-row{
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}
body[data-pa-talk] #pshApprove,
body[data-pa-talk] #pshDeny,
body[data-pa-talk] #pshConsent .psh-btn{
  min-width:44px;
  min-height:44px;
  width:100%;
  font-size:16px;
  padding:12px 16px;
}
body[data-pa-talk] #pshConsent .psh-btn:hover{
  filter:none;
}
body[data-pa-talk] #pshConsent .psh-btn:active,
body[data-pa-talk] #pshConsent .psh-btn.is-pressed{
  transform:scale(.94);
  opacity:.82;
}

/* Consent in the onboarding wrap must stay reachable. The hide list
   above is unchanged (P3 seed regex). This more-specific override
   paints only when pa-mobile.js marks a real Approve/Deny row. */
body[data-pa-talk] #paUiOnboardingWrap[data-pa-consent],
body[data-pa-talk] .pa-onb-wrap[data-pa-consent]{
  display:flex !important;
  position:fixed !important;
  left:0;
  right:0;
  bottom:var(--pa-composer-band,88px);
  z-index:230;
  margin:0;
  padding:12px 16px;
  background:var(--pa-white,#FFFFFF);
  border-top:1px solid var(--pa-line,rgba(23,24,26,.10));
  pointer-events:auto;
}
body[data-pa-talk] #paUiOnboardingWrap[data-pa-consent] .pa-onb-btn,
body[data-pa-talk] .pa-onb-wrap[data-pa-consent] .pa-onb-btn{
  min-width:44px;
  min-height:44px;
}

/* ============================================================
   TALK HOME RHYTHM — RETIRED IN THE FOLD, 2026-09-04
   (DESK-UI-FOLD-20260904)

   DESK-UI-20260904 appended two rules here against the OLD base rule:

     body[data-pa-talk="home"] .pa-talk      { justify-content:flex-start;
                                               gap:var(--s5,24px); }
     body[data-pa-talk="home"] .pa-talk-identity { margin-top:auto; }

   It was fixing four ~130px dead bands caused by
   .pa-talk{justify-content:space-between} on a ~756px box holding ~330px
   of content. GOLIVE-MOBILE-PASS-20260904 shipped the same fix ahead of
   it, in the base rule itself: .pa-talk is now flex-start with gap:14px
   (:203-204), .pa-talk-apps-link carries margin:auto auto 0 (:429) as the
   ONE bottom pin, and .pa-talk-identity is text-align:left with
   margin:-8px 0 0 (:414). The live phone home is canon.

   So both appended rules are dropped rather than merged:
     - gap:var(--s5,24px) would override the shipped 14px rhythm;
     - margin-top:auto on .pa-talk-identity would make a SECOND auto
       margin in the same flex column, splitting the free space between
       the identity line and the Apps link instead of letting Apps pin
       alone to the bottom.
   Nothing is lost: the defect they targeted is already fixed upstream of
   them. What this packet DID contribute to this file is kept above and
   is orthogonal to layout -- the .pa-talk-action outlined chip
   (:299-325, a dead rule today: the live pa-mobile.js no longer renders
   the pill) and the two WCAG contrast tokens on .pa-talk-identity
   (:410) and .pa-talk-apps-link (:425), 3.82:1 -> 4.72:1.
   ============================================================ */