/* Shared phone-mockup demo — extracted from landing so solution pages
 * share one source of truth for the animated chat widget. Scoped to
 * .phone / .ph-* / .device-stage so it won't collide with page styles.
 *
 * Vars expected on :root of the host page:
 *   --bg, --ink, --ink-dim, --ink-mute, --amber, --amber-dim,
 *   --green, --red, --mono (falls back to monospace)
 */

.device-stage{display:flex;align-items:center;justify-content:center;padding:0}
.phone{
  width:min(360px,56vw);
  filter:drop-shadow(0 50px 80px rgba(0,0,0,.8)) drop-shadow(0 0 50px rgba(255,184,77,.07));
  flex-shrink:0;
}
@media (max-width:960px){.phone{width:min(280px,78vw)}}
.phone-body{
  background:#050403;border:1.5px solid #2a261d;border-radius:38px;padding:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.8);
}
.phone-screen{
  background:linear-gradient(170deg,#0f0d08,#080605);
  border-radius:29px;aspect-ratio:9/19;
  position:relative;overflow:hidden;
  padding:30px 14px 50px;display:flex;flex-direction:column;
}
.phone-screen::before{
  content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:28%;height:14px;background:#000;border-radius:0 0 12px 12px;
}
.phone-time{position:absolute;top:9px;left:17px;font-family:var(--mono,monospace);font-size:10px;color:var(--ink);letter-spacing:.05em;font-weight:500}
.phone-sig{position:absolute;top:9px;right:17px;font-family:var(--mono,monospace);font-size:9px;color:var(--ink-dim)}

.ph-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 4px 10px;border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:9px;flex-shrink:0;
}
.ph-menu{font-size:15px;color:var(--ink-mute);line-height:1}
.ph-tabs{display:flex;gap:1px;background:rgba(255,255,255,.05);border-radius:7px;padding:2px}
.ph-tab{font-family:var(--mono,monospace);font-size:10px;letter-spacing:.04em;padding:3px 10px;border-radius:5px;color:var(--ink-mute)}
.ph-tab.on{background:rgba(255,255,255,.12);color:var(--ink)}
.ph-model{display:flex;align-items:center;gap:5px;font-family:var(--mono,monospace);font-size:9px;color:var(--ink-dim);letter-spacing:.03em}
.ph-model .g{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);animation:ph-pulse 2s infinite;flex-shrink:0}
@keyframes ph-pulse{0%,100%{opacity:1}50%{opacity:.55}}

.ph-scroll{flex:1;display:flex;flex-direction:column;gap:7px;overflow:hidden;padding-bottom:4px;min-height:0}

.ph-file{
  display:flex;align-items:baseline;gap:6px;
  font-family:var(--mono,monospace);font-size:9px;line-height:1.4;color:var(--ink-dim);
  opacity:0;transform:translateY(4px);
  transition:opacity .35s ease, transform .35s ease;flex-shrink:0;
}
.ph-file.in{opacity:1;transform:none}
.ph-file .ck{color:var(--green);font-size:11px;flex-shrink:0}
.ph-file .fp{color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:175px}

.ph-think{
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono,monospace);font-size:10px;color:var(--ink-mute);
  padding:2px 0;flex-shrink:0;opacity:0;transition:opacity .3s;
}
.ph-think.in{opacity:1}
.ph-think .arr{color:var(--amber-dim);font-size:12px}
.ph-tdot{width:4px;height:4px;border-radius:50%;background:var(--amber);animation:ph-tdot 1.1s ease-in-out infinite}
.ph-tdot:nth-child(2){animation-delay:.18s}
.ph-tdot:nth-child(3){animation-delay:.36s}
@keyframes ph-tdot{0%,80%,100%{opacity:.2;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}

.ph-bub{
  font-family:var(--mono,monospace);font-size:10.5px;line-height:1.6;
  padding:8px 12px;border-radius:12px;max-width:88%;
  word-break:break-word;overflow-wrap:break-word;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease;flex-shrink:0;
}
.ph-bub.in{opacity:1;transform:none}
.ph-bub.u{align-self:flex-end;background:var(--amber);color:#1a1407;border-bottom-right-radius:3px}
.ph-bub.a{align-self:flex-start;background:#1d1a11;color:var(--ink);border:1px solid rgba(255,255,255,.08);border-bottom-left-radius:3px}
.ph-bub .hl{color:var(--amber);font-weight:700}
.ph-bub .ok{color:var(--green)}
.ph-bub .er{color:var(--red)}

.ph-cursor{display:inline-block;width:7px;height:12px;background:var(--amber);vertical-align:text-bottom;margin-left:1px;animation:ph-blink 1s step-end infinite}
@keyframes ph-blink{50%{opacity:0}}

.ph-inp{
  position:absolute;left:12px;right:12px;bottom:12px;
  background:#151209;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:9px 13px;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.ph-inp-txt{font-family:var(--mono,monospace);font-size:10px;color:var(--ink-mute);flex:1}
.ph-inp-btn{width:20px;height:20px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;color:#1a1407;font-size:12px;flex-shrink:0;font-weight:700;line-height:1}