/* ============================================================
   pa-sammy.css — companion chip & sheet in Porcelain Futurism.

   Canon v5: docs/design/PORCELAIN_FUTURISM_2026-08-16.md
   SUPER owns porcelain-shell.css / os-porcelain.html.
   This sheet is additive, injected by pa-sammy.js when #psh is present.

   Laws:
     1. ONE place to ask: the kernel composer. Companion chip sits
        above the composer; companion click focuses the composer.
     2. One small sheet: name, "Ask {name}", Sign in if guest.
     3. Open beta one line max.
     4. Flat-top hexagon, no face, no creature, no emoji.
     5. Token-pure (juwel-ds.css), zero italics, zero serif.
     6. Motion restrained (prefers-reduced-motion safe).
   ============================================================ */

/* ── 1. Wrapper container in the deck ── */
.pa-sammy-wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:min(640px, 92vw) !important;
  margin:0 auto !important;
  font-style:normal !important;
  z-index:40 !important;
  pointer-events:none !important;
}

.pa-sammy-wrap .pa-sammy-chip,
.pa-sammy-wrap .pa-sammy-sheet,
.pa-sammy-wrap .pa-sammy-close,
.pa-sammy-wrap .pa-sammy-btn,
.pa-sammy-wrap .pa-sammy-input,
.pa-sammy-wrap a{
  pointer-events:auto !important;
}

/* ── 2. Companion chip (Screen 1) ── */
.pa-sammy-chip{
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  height:28px !important;
  min-height:28px !important;
  box-sizing:border-box !important;
  padding:0 12px 0 8px !important;
  margin:0 !important;
  border-radius:var(--r-full) !important;
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  color:var(--ink-2) !important;
  font-family:var(--ff) !important;
  font-size:12px !important;
  font-weight:550 !important;
  font-style:normal !important;
  line-height:26px !important;
  text-decoration:none !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  transition:background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out) !important;
}

.pa-sammy-chip:hover{
  background:var(--surface-2) !important;
  border-color:var(--ink-4) !important;
  color:var(--ink) !important;
}

.pa-sammy-chip:active{
  transform:scale(0.98) !important;
}

.pa-sammy-chip:focus-visible{
  outline:none !important;
  border-color:var(--focus-edge) !important;
  box-shadow:0 0 0 1px var(--focus-edge) !important;
}

.pa-sammy-chip[aria-expanded="true"]{
  background:var(--surface-2) !important;
  border-color:var(--ink-3) !important;
  color:var(--ink) !important;
}

/* Hex mark icon inside chip */
.pa-sammy-hex{
  width:14px !important;
  height:14px !important;
  flex:0 0 auto !important;
  display:block !important;
  object-fit:contain !important;
}

.pa-sammy-hex-svg{
  width:14px !important;
  height:14px !important;
  flex:0 0 auto !important;
  display:block !important;
}

.pa-sammy-chip-name{
  font-family:var(--ff) !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  font-style:normal !important;
}

.pa-sammy-chip-hint{
  font-family:var(--mono) !important;
  font-size:10px !important;
  letter-spacing:0.04em !important;
  color:var(--ink-3) !important;
  font-style:normal !important;
}

/* ── 3. Companion sheet (Screen 2) ── */
.pa-sammy-sheet{
  position:absolute !important;
  bottom:calc(100% + 10px) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(340px, 92vw) !important;
  box-sizing:border-box !important;
  padding:16px 18px 14px !important;
  border-radius:var(--r-xl) !important;
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  box-shadow:var(--shadow-2) !important;
  z-index:110 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  font-style:normal !important;
  animation:pa-sammy-in var(--dur-2) var(--ease-out) !important;
}

.pa-sammy-sheet[hidden]{
  display:none !important;
}

@keyframes pa-sammy-in{
  from{
    opacity:0;
    transform:translate(-50%, 6px);
  }
  to{
    opacity:1;
    transform:translate(-50%, 0);
  }
}

@media (prefers-reduced-motion:reduce){
  .pa-sammy-sheet{
    animation:none !important;
  }
  .pa-sammy-chip{
    transition:none !important;
  }
}

/* Sheet header */
.pa-sammy-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}

.pa-sammy-title-group{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.pa-sammy-sheet-title{
  font-family:var(--ff) !important;
  font-size:13.5px !important;
  font-weight:650 !important;
  color:var(--ink) !important;
  line-height:1.2 !important;
  font-style:normal !important;
}

.pa-sammy-close{
  appearance:none !important;
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  color:var(--ink-3) !important;
  cursor:pointer !important;
  padding:0 !important;
  margin:0 !important;
  font-family:var(--ff) !important;
  font-size:14px !important;
  line-height:1 !important;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out) !important;
}

.pa-sammy-close:hover{
  background:var(--surface-2) !important;
  color:var(--ink) !important;
}

.pa-sammy-close:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 1px var(--focus-edge) !important;
}

/* Sheet body rows */
.pa-sammy-field{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}

.pa-sammy-label{
  font-family:var(--mono) !important;
  font-size:10px !important;
  font-weight:550 !important;
  letter-spacing:0.06em !important;
  text-transform:uppercase !important;
  color:var(--ink-3) !important;
  font-style:normal !important;
}

.pa-sammy-input-row{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

.pa-sammy-input{
  flex:1 !important;
  min-width:0 !important;
  height:32px !important;
  box-sizing:border-box !important;
  padding:0 10px !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md) !important;
  background:var(--surface-2) !important;
  font-family:var(--ff) !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:var(--ink) !important;
  font-style:normal !important;
  outline:none !important;
  transition:border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out) !important;
}

.pa-sammy-input:focus{
  border-color:var(--focus-edge) !important;
  background:var(--focus-fill) !important;
}

/* Buttons in sheet */
.pa-sammy-btn{
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:32px !important;
  box-sizing:border-box !important;
  padding:0 14px !important;
  border-radius:var(--r-md) !important;
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  color:var(--ink) !important;
  font-family:var(--ff) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  font-style:normal !important;
  text-decoration:none !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  transition:background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out) !important;
}

.pa-sammy-btn:hover{
  background:var(--surface-2) !important;
  border-color:var(--ink-4) !important;
}

.pa-sammy-btn:active{
  transform:scale(0.98) !important;
}

.pa-sammy-btn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 1px var(--focus-edge) !important;
  border-color:var(--focus-edge) !important;
}

.pa-sammy-btn.ink{
  background:var(--ink) !important;
  color:var(--surface) !important;
  border-color:var(--ink) !important;
}

.pa-sammy-btn.ink:hover{
  filter:brightness(0.85) !important;
}

.pa-sammy-btn.ghost{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--ink-2) !important;
}

.pa-sammy-btn.ghost:hover{
  background:var(--surface-2) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}

/* Ask button: full width */
.pa-sammy-ask{
  width:100% !important;
  height:36px !important;
  border-radius:var(--r-full) !important;
  font-size:13px !important;
  letter-spacing:0.02em !important;
}

/* Guest sign-in banner */
.pa-sammy-guest-card{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  padding:8px 10px !important;
  border-radius:var(--r-md) !important;
  background:var(--surface-2) !important;
  border:1px solid var(--line-2) !important;
}

.pa-sammy-guest-text{
  font-family:var(--ff) !important;
  font-size:12px !important;
  font-weight:500 !important;
  color:var(--ink-2) !important;
  font-style:normal !important;
}

/* Open beta one-line max */
.pa-sammy-beta{
  margin:0 !important;
  font-family:var(--ff) !important;
  font-size:11.5px !important;
  line-height:1.45 !important;
  color:var(--ink-3) !important;
  font-style:normal !important;
  text-align:left !important;
  border-top:1px solid var(--line-2) !important;
  padding-top:8px !important;
}