/* ============================================================
   pa-mobile.css — porcelain phone overlay.

   SUPER-FIRST-LOGIN owns porcelain-shell.css / os-porcelain.html.
   This sheet is additive: injected by pa-mobile.js when #psh is
   present. os.html is a bounce stub and a no-op here.

   Law: ink = you act. Iridescence = JUWEL acts. No redesign.
   No italic. No serif. No emoji. No wash. No intern scoreboard.
   ============================================================ */

.psh{
  --psh-kb-h:0px;
  box-sizing:border-box;
  height:100dvh;
  padding-top:env(safe-area-inset-top,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
}

.psh-brand img,
.psh-entity,
#pshTopEntity,
.psh-juju img,
.psh-voice img,
.psh-welcome-card img{
  font-style:normal;
}

@media (max-width:820px){
  .psh-rail{
    left:calc(10px + env(safe-area-inset-left,0px));
    z-index:18;
  }
  .psh-rail-btn{
    width:44px;height:44px;min-width:44px;min-height:44px;
  }
  .psh-theme,
  .psh-mic,
  .psh-send,
  .psh-juju,
  .psh-upgrade,
  #pshUpgrade,
  #pshUser,
  .psh-surface-x{
    min-width:44px;min-height:44px;
  }
  .psh-surface-x{
    width:44px;height:44px;position:relative;
  }
  .psh-composer input{min-height:44px;}
  .psh-desk{
    z-index:24;
    padding-left:calc(66px + env(safe-area-inset-left,0px));
    padding-right:calc(14px + env(safe-area-inset-right,0px));
  }
  .psh-greet{
    padding-left:calc(66px + env(safe-area-inset-left,0px));
    padding-right:calc(14px + env(safe-area-inset-right,0px));
  }
  /* PHONE-APPS-20260904: this 440px ceiling is the DESK card size for the
     narrow-desk band (a tablet, or a phone-width desktop window that
     still shows the rail). It is not the phone's app mode: there, one
     surface fills the screen and carries data-pa-phone-app, pinned
     full-bleed by porcelain-mobile.css. Excluding the marked surface here
     means no code path in this file can hand the phone a 440px card --
     rather than relying only on the later sheet's !important to outrank
     it. */
  .psh-surface:not([data-pa-phone-app]){
    position:relative;
    z-index:26;
    width:min(calc(100vw - 66px - 14px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),440px);
  }
  .psh-deck{
    z-index:36;
    width:100%;
    padding-left:calc(12px + env(safe-area-inset-left,0px));
    padding-right:calc(12px + env(safe-area-inset-right,0px));
    padding-bottom:calc(10px + var(--psh-kb-h,0px));
  }
  .psh-composer{
    width:min(640px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  }
  .psh-foot{display:none;}
  body.psh-kb-open .psh-juju{visibility:hidden;}
}

@media (prefers-reduced-motion:reduce){
  .psh-rail-btn, .psh-mic, .psh-send, .psh-juju, .psh-composer{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   UPGRADE-20260904 — the Apps-sheet upgrade row.

   Lives in the drawer footer, OUTSIDE #paTalkGrid, so the canonical 11
   tiles stay 11 and no count pin moves. Ink, because ink means the person
   acts; "Report a problem" below it stays a quiet outline, because the
   sheet must not read as two equal shouts.

   Styled here rather than in pa-bug-report.css: that sheet is loaded on
   demand, and this row must be right the first time the drawer opens.
   ============================================================ */
.pa-talk-upgrade-slot { display: block; }
.pa-talk-upgrade-form { display: block; margin: 0; padding: 0; border: 0; }
.pa-talk-upgrade {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--pa-ink, #17181A);
  background: var(--pa-ink, #17181A);
  color: var(--pa-white, #FFFFFF);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pa-talk-upgrade:focus-visible { outline: 2px solid var(--pa-ink, #17181A); outline-offset: 2px; }
/* Already paying: the same row, muted, because this is maintenance and not
   a sale. */
.pa-talk-upgrade.is-current {
  background: var(--pa-white, #FFFFFF);
  color: var(--pa-ink, #17181A);
  border-color: var(--pa-line, rgba(23, 24, 26, .10));
  font-weight: 500;
}
.pa-talk-upgrade-slot + .pa-talk-report { margin-top: 10px; }