/* ============================================================
   PhoneChat - a shared, code-built iPhone conversation render.
   Self-contained: all colours are --pc-* with baked defaults, all
   selectors scoped under .pc, so it drops into any page unchanged.
   Animate only transform/opacity. Reduced-motion = finished thread.
   ============================================================ */
.pc{
  --w:300px;
  --pc-ink:#1b1913; --pc-paper:#ece7dd; --pc-paper-2:#ffffff;
  --pc-dark:#0f0f0e; --pc-dark-2:#26251f;
  --pc-bubble:#16322a; --pc-bubble-txt:#eef2ee;
  --pc-bubble-dark:#1e4a37;
  --pc-muted:#9a9384; --pc-green:#2e7d52; --pc-signal:#e5391d; --pc-brass:#9a7b45;
  --pc-serif:'Newsreader',Georgia,serif;
  --pc-sans:'Work Sans',system-ui,sans-serif;
  --pc-mono:'IBM Plex Mono',ui-monospace,monospace;
  width:var(--w);
  font-family:var(--pc-sans);
  display:flex; flex-direction:column; align-items:center;
}

/* device shell */
.pc .device{
  position:relative; width:var(--w); aspect-ratio:9 / 19.5;
  border-radius:46px; padding:11px;
  background:linear-gradient(155deg,#3a3732,#111 32%,#0b0b0a 70%,#2a2824);
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset,
             0 60px 90px -45px rgba(20,16,12,.55),
             0 18px 30px -18px rgba(20,16,12,.45);
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
}
.pc .device::before{
  content:""; position:absolute; inset:2px; border-radius:44px; pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,0) 22%,rgba(255,255,255,0) 78%,rgba(255,255,255,.12));
}
.pc.enter .device{ transform:perspective(1400px) rotateY(-9deg) rotateX(2deg) translateY(18px); opacity:0; }
.pc.enter.in .device{ transform:perspective(1400px) rotateY(0) rotateX(0) translateY(0); opacity:1; }
.pc .device.float{ animation:pc-float 7s ease-in-out infinite; }
@keyframes pc-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.pc .screen{ position:relative; width:100%; height:100%; border-radius:36px; overflow:hidden; background:var(--pc-paper); display:flex; flex-direction:column; }
.pc .screen.dark{ background:var(--pc-dark); }
.pc .island{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:84px; height:24px; background:#000; border-radius:999px; z-index:6; }

.pc .statusbar{ display:flex; align-items:center; justify-content:space-between; padding:13px 24px 4px; font-size:.72rem; font-weight:600; color:#1b1913; }
.pc .screen.dark .statusbar{ color:#f2efe8; }
.pc .statusbar .glyphs{ display:flex; align-items:center; gap:5px; }
.pc .statusbar svg{ display:block; }

.pc .chat-head{ display:flex; align-items:center; gap:10px; padding:8px 14px 10px; background:rgba(255,255,255,.6); border-bottom:1px solid rgba(0,0,0,.06); }
.pc .screen.dark .chat-head{ background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.07); }
.pc .chat-head .chev{ color:#8a8578; font-size:1.1rem; line-height:1; }
.pc .screen.dark .chat-head .chev{ color:#6f6b62; }
.pc .avatar{ width:30px; height:30px; border-radius:999px; background:var(--pc-bubble); color:#fff; display:grid; place-items:center; font-weight:600; font-size:.82rem; }
.pc .chat-head .nmwrap{ flex:1; min-width:0; }
.pc .chat-head .nm{ font-weight:600; font-size:.82rem; line-height:1.1; color:#1b1913; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc .screen.dark .chat-head .nm{ color:#f2efe8; }
.pc .chat-head .on{ display:block; font-family:var(--pc-mono); font-size:.56rem; color:var(--pc-green); }
.pc .chat-head .chan{ margin-left:auto; font-family:var(--pc-mono); font-size:.52rem; letter-spacing:.06em; text-transform:uppercase; color:#9a9384; }

.pc .thread{ flex:1; overflow:hidden; padding:14px 12px; display:flex; flex-direction:column; gap:7px; scroll-behavior:smooth; }
.pc .row{ display:flex; }
.pc .row.c{ justify-content:flex-start; } .pc .row.i{ justify-content:flex-end; }
.pc .bub{ max-width:80%; padding:8px 11px; border-radius:15px; font-size:.78rem; line-height:1.35; animation:pc-pop .32s cubic-bezier(.2,.8,.2,1) both; }
.pc .row.c .bub{ background:var(--pc-paper-2); color:var(--pc-ink); border-bottom-left-radius:5px; }
.pc .row.i .bub{ background:var(--pc-bubble); color:var(--pc-bubble-txt); border-bottom-right-radius:5px; }
.pc .screen.dark .row.c .bub{ background:var(--pc-dark-2); color:#ece7dd; }
.pc .screen.dark .row.i .bub{ background:var(--pc-bubble-dark); color:#eaf4ec; }
.pc .bub .t{ display:block; margin-top:3px; font-family:var(--pc-mono); font-size:.5rem; opacity:.55; text-align:right; }
.pc .bub .tick{ display:inline; margin-left:3px; vertical-align:-1px; }
@keyframes pc-pop{ from{opacity:0; transform:translateY(7px) scale(.96)} to{opacity:1; transform:none} }

.pc .typing{ align-self:flex-start; background:var(--pc-paper-2); border-radius:15px; border-bottom-left-radius:5px; padding:10px 12px; display:inline-flex; gap:4px; animation:pc-pop .25s ease both; }
.pc .screen.dark .typing{ background:var(--pc-dark-2); }
.pc .typing i{ width:6px; height:6px; border-radius:999px; background:#b3ad9e; animation:pc-dot 1.1s infinite; }
.pc .typing i:nth-child(2){ animation-delay:.15s } .pc .typing i:nth-child(3){ animation-delay:.3s }
@keyframes pc-dot{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

.pc .acard{ align-self:flex-end; max-width:86%; background:var(--pc-paper-2); border:1px solid rgba(0,0,0,.07); border-radius:14px; padding:11px 12px; animation:pc-pop .34s cubic-bezier(.2,.8,.2,1) both; }
.pc .screen.dark .acard{ background:#1a1a16; border-color:rgba(255,255,255,.08); }
.pc .acard .ah{ font-family:var(--pc-mono); font-size:.52rem; letter-spacing:.06em; text-transform:uppercase; color:#9a9384; margin-bottom:6px; }
.pc .acard .big{ font-family:var(--pc-serif); font-size:1.05rem; color:#1b1913; line-height:1.1; }
.pc .screen.dark .acard .big{ color:#f2efe8; }
.pc .acard .sub{ font-size:.72rem; color:#6b655a; margin-top:3px; line-height:1.3; }
.pc .screen.dark .acard .sub{ color:#a49d8e; }
.pc .acard .chip{ display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-family:var(--pc-mono); font-size:.54rem; letter-spacing:.05em; text-transform:uppercase; color:var(--pc-green); }
.pc .acard .chip .dot{ width:5px; height:5px; border-radius:999px; background:var(--pc-green); }
.pc .acard.gap .chip{ color:var(--pc-signal) } .pc .acard.gap .chip .dot{ background:var(--pc-signal) }

.pc .slots{ align-self:flex-end; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:86%; animation:pc-pop .3s ease both; }
.pc .slot{ background:var(--pc-paper-2); border:1px solid var(--pc-bubble); color:var(--pc-bubble); border-radius:999px; padding:7px 12px; font-size:.72rem; font-weight:500; transition:all .25s; }
.pc .slot.sel{ background:var(--pc-bubble); color:#fff; }
.pc .screen.dark .slot{ background:#13130f; border-color:#2e6b4c; color:#8fd3a9 } .pc .screen.dark .slot.sel{ background:var(--pc-bubble-dark); color:#eaf4ec }

.pc .chips{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:var(--w); }
.pc .chips .ch{ font-family:var(--pc-mono); font-size:.6rem; letter-spacing:.04em; text-transform:uppercase; color:#756e60; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:6px 12px; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; }
.pc .chips .ch.show{ opacity:1; transform:none; }
.pc[data-on-dark="1"] .chips .ch{ color:#b9c3b7; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }

.pc .replay{ margin-top:18px; font-family:var(--pc-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:#756e60; background:none; border:1px solid rgba(0,0,0,.14); border-radius:999px; padding:7px 15px; cursor:pointer; }
.pc[data-on-dark="1"] .replay{ color:#b9c3b7; border-color:rgba(255,255,255,.18); }
.pc .cap{ margin-top:14px; font-family:var(--pc-mono); font-size:.62rem; letter-spacing:.05em; color:#8a8375; }
.pc[data-on-dark="1"] .cap{ color:#9fb0a0; }
.pc .pc-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce){
  .pc .bub,.pc .acard,.pc .slots,.pc .typing,.pc .device{ animation:none !important; transition:none !important; }
  .pc.enter .device{ transform:none; opacity:1; } .pc .device.float{ animation:none; }
}