/* Unified Pex conversation surface — one component, reused from every entry point. Uses the
   existing design tokens (--bg/--sf/--ac/--tx/--mu/--sab etc., see styles.css) so it re-themes
   automatically with dark/light/neon/crimson/void and never needs its own color system. */

.pex-convo,body.neon>.pex-convo{position:fixed!important;inset:0;z-index:7000;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;}
.pex-convo.on{visibility:visible;}
.pex-convo-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .22s ease;}
.pex-convo.on .pex-convo-backdrop{opacity:1;}

.pex-convo-sheet{
  position:relative;width:100%;max-width:430px;height:100dvh;height:100vh;
  background:var(--bg);display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(16px);opacity:0;transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .24s ease;
}
.pex-convo.on .pex-convo-sheet{transform:translateY(0);opacity:1;}

.pex-convo-head{
  display:flex;align-items:center;gap:12px;padding:calc(12px + var(--sat)) 16px 12px;
  border-bottom:1px solid var(--bd);flex-shrink:0;background:var(--bg);
  position:relative;z-index:3;
}
.pex-convo-close{
  width:36px;height:36px;min-width:36px;border-radius:50%;border:1px solid var(--bd);
  background:var(--sf);color:var(--tx);font-size:20px;line-height:1;display:flex;
  align-items:center;justify-content:center;cursor:pointer;
}
.pex-convo-close:focus-visible,.pex-convo-send:focus-visible,.pex-convo-input:focus-visible,
.pex-convo-suggestion:focus-visible{outline:3px solid var(--ac);outline-offset:2px;}

.pex-convo-head-text{display:flex;flex-direction:column;min-width:0;}
.pex-convo-head-text strong{font-family:var(--fb);font-size:15px;font-weight:800;color:var(--tx);}
.pex-convo-status{font-size:11px;color:var(--mu);}

/* ── Pulsing orb: ready / listening / thinking / responding / error ──
   Distinct states via timing/opacity/scale only, per the brief — one animation system, not five.
   Pure subscriber to the conversation's state channel (pex-conversation.js) — data-state is set
   from convoState, never written to directly by business logic. */
.pex-convo-orb-wrap{width:40px;height:40px;flex-shrink:0;}
.pex-orb{position:relative;width:40px;height:40px;}
.pex-orb-core{
  position:absolute;inset:11px;border-radius:50%;background:var(--ac);
  box-shadow:0 0 12px 0 var(--abr);
}
.pex-orb-ring{
  position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--ac);opacity:0;
}
/* ready: a slow, quiet single breathing ring — Pex is here, not doing anything */
.pex-orb[data-state="ready"] .pex-orb-ring-1{opacity:.45;animation:pexOrbBreathe 3.2s ease-in-out infinite;}
/* listening: rings tighten in, faster and closer to the core — attentive */
.pex-orb[data-state="listening"] .pex-orb-ring-1{opacity:.6;animation:pexOrbListen 1.4s ease-in-out infinite;}
.pex-orb[data-state="listening"] .pex-orb-ring-2{opacity:.35;animation:pexOrbListen 1.4s ease-in-out infinite .15s;}
/* thinking: three concentric rings pulsing outward in sequence */
.pex-orb[data-state="thinking"] .pex-orb-ring-1{opacity:.55;animation:pexOrbThink 1.6s ease-in-out infinite;}
.pex-orb[data-state="thinking"] .pex-orb-ring-2{opacity:.4;animation:pexOrbThink 1.6s ease-in-out infinite .35s;}
.pex-orb[data-state="thinking"] .pex-orb-ring-3{opacity:.25;animation:pexOrbThink 1.6s ease-in-out infinite .7s;}
/* responding: a brighter, slightly faster single pulse on the core itself */
.pex-orb[data-state="responding"] .pex-orb-core{animation:pexOrbSpeak .9s ease-in-out infinite;}
.pex-orb[data-state="responding"] .pex-orb-ring-1{opacity:.5;animation:pexOrbBreathe 1.8s ease-in-out infinite;}
/* error/recovery: a muted, non-alarming amber tone, no pulsing — calm, not urgent */
.pex-orb[data-state="error"] .pex-orb-core{background:#f5b342;box-shadow:0 0 10px 0 rgba(245,179,66,.4);animation:none;}
.pex-orb[data-state="error"] .pex-orb-ring-1,.pex-orb[data-state="error"] .pex-orb-ring-2,.pex-orb[data-state="error"] .pex-orb-ring-3{opacity:0;animation:none;}

@keyframes pexOrbBreathe{0%,100%{transform:scale(.9);opacity:.25;}50%{transform:scale(1.15);opacity:.5;}}
@keyframes pexOrbListen{0%,100%{transform:scale(.95);opacity:.3;}50%{transform:scale(1.08);opacity:.6;}}
@keyframes pexOrbThink{0%{transform:scale(.85);opacity:.55;}70%{transform:scale(1.35);opacity:0;}100%{transform:scale(1.35);opacity:0;}}
@keyframes pexOrbSpeak{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

/* Reduced motion: keep the state distinguishable (color/opacity) without continuous motion. */
.pex-convo-reduced-motion .pex-orb-ring,.pex-convo-reduced-motion .pex-orb-core{animation:none!important;}
.pex-convo-reduced-motion .pex-orb[data-state="ready"] .pex-orb-ring-1{opacity:.35;}
.pex-convo-reduced-motion .pex-orb[data-state="listening"] .pex-orb-ring-1{opacity:.6;transform:scale(1.05);}
.pex-convo-reduced-motion .pex-orb[data-state="thinking"] .pex-orb-ring-1,
.pex-convo-reduced-motion .pex-orb[data-state="thinking"] .pex-orb-ring-2,
.pex-convo-reduced-motion .pex-orb[data-state="thinking"] .pex-orb-ring-3{opacity:.4;transform:scale(1.1);}
.pex-convo-reduced-motion .pex-orb[data-state="responding"] .pex-orb-core{opacity:.85;}

.pex-convo-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.pex-convo-messages{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.pex-convo-empty{margin:auto;max-width:300px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 18px;color:var(--tx)}
.pex-convo-empty img{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(198,241,53,.12))}
.pex-convo-empty strong{font-size:18px;line-height:1.25;margin-top:10px}
.pex-convo-empty span{font-size:13px;line-height:1.45;color:var(--mu);margin-top:7px}
.pex-msg{
  max-width:82%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45;
  word-break:break-word;white-space:pre-wrap;
}
.pex-msg-user{align-self:flex-end;background:var(--ac);color:var(--bg);border-bottom-right-radius:4px;font-weight:600;}
.pex-msg-pex{align-self:flex-start;background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-bottom-left-radius:4px;}
.pex-msg-system{align-self:center;background:transparent;color:var(--mu);font-size:12px;text-align:center;max-width:100%;padding:6px 12px;}
.pex-convo-retry{
  display:block;margin:8px auto 0;border:1px solid var(--ac);background:transparent;color:var(--ac);
  border-radius:999px;padding:8px 18px;font-size:12.5px;font-weight:700;cursor:pointer;min-height:36px;
}
.pex-convo-retry:active{background:var(--ac);color:var(--bg);}

.pex-food-card,.pex-pending-generic{
  align-self:flex-start;max-width:92%;width:100%;background:var(--sf);border:1px solid var(--bd);
  border-radius:16px;border-bottom-left-radius:4px;padding:14px;display:flex;flex-direction:column;gap:8px;
}
.pex-food-card-label{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--mu);}
.pex-food-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mu);}
.pex-food-field input,.pex-food-field select{
  min-height:40px;border-radius:10px;border:1px solid var(--bd2);background:var(--bg);color:var(--tx);
  padding:8px 10px;font-size:14px;font-family:inherit;
}
.pex-food-macros{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pex-food-ingredients{font-size:12px;color:var(--mu);}
.pex-food-confidence{font-size:11px;color:var(--mu);text-transform:capitalize;}
.pex-workout-block-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.pex-workout-block-list li{font-size:13.5px;color:var(--tx);font-weight:650;padding-left:16px;position:relative;}
.pex-workout-block-list li:before{content:'';position:absolute;left:2px;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--ac);}
.pex-food-card-actions,.pex-pending-actions{display:flex;gap:8px;margin-top:4px;}
.pex-food-cancel,.pex-food-log{
  flex:1;min-height:44px;border-radius:12px;font-size:13.5px;font-weight:700;cursor:pointer;
}
.pex-food-cancel{background:transparent;border:1px solid var(--bd2);color:var(--tx);}
.pex-food-log{background:var(--ac);border:1px solid var(--ac);color:var(--bg);}
.pex-food-cancel:disabled,.pex-food-log:disabled{opacity:.55;cursor:default;}
.pex-food-card-error{font-size:12px;color:var(--err,#e5484d);}

.pex-convo-suggestions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;flex-shrink:0;}
.pex-convo-suggestion{
  border:1px solid var(--bd2);background:var(--sf);color:var(--tx);border-radius:999px;
  padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;min-height:36px;
}
.pex-convo-suggestion:active{background:var(--sf2);}

.pex-convo-composer{
  display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(12px + var(--sab));
  border-top:1px solid var(--bd);background:var(--bg);flex-shrink:0;position:relative;z-index:3;
}
.pex-convo-input{
  flex:1;resize:none;max-height:120px;min-height:44px;border-radius:20px;border:1px solid var(--bd2);
  background:var(--sf);color:var(--tx);font-family:var(--fb);font-size:16px;padding:11px 16px;
  line-height:1.3;
}
.pex-convo-send{
  width:44px;height:44px;min-width:44px;border-radius:50%;border:none;background:var(--ac);
  color:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.pex-convo-send:disabled{opacity:.5;cursor:default;}

body.pex-convo-open{overflow:hidden;}
body.pex-convo-open #nav{visibility:hidden;pointer-events:none;}

@media (min-width:560px){
  .pex-convo{align-items:center;}
  .pex-convo-sheet{height:min(88vh,760px);border-radius:20px;border:1px solid var(--bd);box-shadow:0 24px 60px rgba(0,0,0,.4);}
}
.pex-ai-first-use{margin:14px 16px 0;padding:16px;border:1px solid rgba(198,241,53,.35);border-radius:16px;background:#18181b;color:#f7f7f8;font-size:13px;line-height:1.5}.pex-ai-first-use strong{display:block;font-size:16px}.pex-ai-first-use p{margin:8px 0;color:#d1d1d7}.pex-ai-first-use a{color:#c6f135}.pex-ai-first-use button{min-height:44px;border:0;border-radius:12px;padding:0 16px;background:#c6f135;color:#111;font-weight:800}