/* ============================================================
   PM AI Agent widget — shared styles
   Canonical hero demo, reused everywhere PM AI Agent is shown.
   Source of truth: platform-pm-agent.html hero section.
   ============================================================ */
.pma-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pma{ background:#fff; border:1px solid #DCE5F2; border-radius:var(--radius,14px); overflow:hidden; font-size:.85rem;
  box-shadow:0 24px 60px -24px rgba(11,32,64,.35), 0 6px 18px -8px rgba(11,32,64,.18); }
.pma-head{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.85rem 1rem; background:linear-gradient(120deg,#0A4FC4,#1568DE); color:#fff; }
.pma-id{ display:flex; align-items:center; gap:.65rem; min-width:0; }
.pma-mark{ width:34px; height:34px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.pma-mark img{ width:22px; height:22px; }
.pma-id-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.pma-id-name{ font-weight:700; font-size:.95rem; }
.pma-id-sub{ display:flex; align-items:center; gap:.35rem; font-size:.72rem; color:rgba(255,255,255,.85); }
.pma-live{ width:7px; height:7px; border-radius:50%; background:var(--green-bright,#16D26A); animation:pmaPulse 2.2s ease-out infinite; }
@keyframes pmaPulse{ 0%{box-shadow:0 0 0 0 rgba(22,210,106,.55);} 70%{box-shadow:0 0 0 7px rgba(22,210,106,0);} 100%{box-shadow:0 0 0 0 rgba(22,210,106,0);} }
.pma-body{ height:min(400px,56vh); overflow-y:auto; padding:1rem 1rem 1.2rem; background:#F3F6FB; display:flex; flex-direction:column; gap:.7rem; scrollbar-width:thin; overscroll-behavior:contain; }
.pma-msg{ max-width:88%; opacity:0; transform:translateY(10px) scale(.98); transition:opacity .28s ease, transform .28s ease; }
.pma-msg.in{ opacity:1; transform:none; }
.pma-msg.user{ align-self:flex-end; background:#1465D9; color:#fff; padding:.6rem .85rem; border-radius:14px 14px 4px 14px; line-height:1.45; box-shadow:0 4px 12px -6px rgba(20,101,217,.5); }
.pma-msg.agent{ align-self:flex-start; width:88%; background:#fff; color:#24313F; border:1px solid #E2E9F3; padding:.7rem .9rem .75rem; border-radius:14px 14px 14px 4px; line-height:1.5; box-shadow:0 3px 10px -6px rgba(11,32,64,.15); }
.pma-msg.agent.pma-think{ width:auto; padding:.55rem .8rem; }
.pma-msg.agent p{ margin:0; font-size:1em; }
.pma-msg.agent b{ color:#0A4FC4; font-weight:600; }
.pma-msg.agent p.streaming::after{ content:""; display:inline-block; width:8px; height:.9em; margin-left:2px; vertical-align:-1px; background:#1465D9; animation:pmaBlink .8s steps(1) infinite; }
.pma-dots{ display:inline-flex; align-items:center; gap:5px; height:14px; }
.pma-dots i{ width:7px; height:7px; border-radius:50%; background:#9FB2CC; animation:pmaTypingBounce 1.1s ease-in-out infinite; }
.pma-dots i:nth-child(2){ animation-delay:160ms; }
.pma-dots i:nth-child(3){ animation-delay:320ms; }
@keyframes pmaTypingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }
.pma-extra{ opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease; }
.pma-extra.in{ opacity:1; transform:none; }
.pma-bars{ margin-top:.65rem; border-top:1px solid #EDF2F9; padding-top:.6rem; display:grid; gap:.45rem; }
.pma-bars-title{ font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#7A8AA3; margin:0 0 .1rem !important; }
.pma-bar{ display:flex; align-items:center; gap:.55rem; font-size:.72rem; color:#34423D; }
.pma-bar-label{ flex:0 0 44%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pma-bar-track{ flex:1; height:6px; border-radius:3px; background:#E8EEF7; overflow:hidden; }
.pma-bar-fill{ display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#1568DE,#5EA0F2); transition:width .9s cubic-bezier(.22,.8,.3,1); }
.pma-bar-pct{ flex:0 0 34px; text-align:right; font-weight:600; color:#0A4FC4; font-variant-numeric:tabular-nums; }
.pma-stats{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem; }
.pma-stat{ display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:600; color:#24313F; background:#F1F7F3; border:1px solid #D7E8DD; border-radius:8px; padding:.35rem .55rem; }
.pma-stat i{ width:6px; height:6px; border-radius:50%; background:var(--green,#00B74F); }
.pma-stat span{ color:#00863A; }
.pma-trend{ margin-top:.65rem; background:#F8FAFD; border:1px solid #E6EDF6; border-radius:10px; padding:.55rem .6rem .35rem; }
.pma-trend svg{ display:block; width:100%; height:auto; }
.pma-sug{ display:flex; gap:.45rem; padding:.6rem .8rem 0; background:#fff; border-top:1px solid #E8EEF6; overflow-x:auto; scrollbar-width:none; }
.pma-sug::-webkit-scrollbar{ display:none; }
.pma-sug button{ flex:none; font-size:.7rem; font-weight:600; color:#0A4FC4; background:#F1F6FE; border:1px solid #CFE0F7; border-radius:999px; padding:.4rem .75rem; transition:background .15s, border-color .15s, transform .15s; }
.pma-sug button:hover{ background:#E3EEFD; border-color:#9FC2F0; transform:translateY(-1px); }
.pma-input{ display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem .8rem; background:#fff; }
.pma-field{ flex:1; display:flex; align-items:center; min-height:40px; border:1px solid #DCE5F2; border-radius:999px; padding:.45rem .95rem; font-size:.8rem; color:#24313F; background:#FBFCFE; overflow:hidden; white-space:nowrap; }
.pma-field .ph{ color:#93A3B8; }
.pma-caret{ flex:none; width:1.5px; height:1em; background:#1465D9; margin-left:1px; animation:pmaBlink .9s steps(1) infinite; }
@keyframes pmaBlink{ 50%{opacity:0;} }
.pma-send{ flex:none; width:38px; height:38px; border-radius:50%; background:#1465D9; color:#fff; display:flex; align-items:center; justify-content:center; transition:transform .18s ease, background .18s; }
.pma-send.fire{ transform:scale(.86); background:#0A4FC4; }
.pma-send svg{ width:16px; height:16px; }
.pma-note{ margin:.8rem 0 0; font-size:.74rem; color:var(--muted); }

/* ---- Compact modifier: for feature-grid / card placements ---- */
.pma-embed{ width:100%; max-width:400px; }
.pma--compact{ font-size:.78rem; }
.pma--compact .pma-head{ padding:.65rem .85rem; }
.pma--compact .pma-mark{ width:28px; height:28px; }
.pma--compact .pma-mark img{ width:18px; height:18px; }
.pma--compact .pma-id-name{ font-size:.85rem; }
.pma--compact .pma-body{ height:min(300px,44vh); padding:.85rem .85rem 1rem; }
.pma--compact .pma-sug{ padding:.5rem .7rem 0; }
.pma--compact .pma-input{ padding:.6rem .7rem .7rem; }
.pma--compact + .pma-note{ font-size:.68rem; margin-top:.6rem; }

/* ---- Standalone modifier: strip the ancestor card so the widget is the only box ---- */
.feature-media.pma-standalone{ border:0; background:transparent; box-shadow:none; padding:0; }
.feature-media.pma-standalone .pma-embed{ margin-inline:auto; }

/* ---- Dark modifier: for dark/glass "coming soon" style sections ---- */
.pma--dark{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); box-shadow:none; }
.pma--dark .pma-head{ background:linear-gradient(120deg,rgba(10,79,196,.85),rgba(21,104,222,.85)); }
.pma--dark .pma-body{ background:rgba(255,255,255,.02); }
.pma--dark .pma-msg.agent{ background:rgba(255,255,255,.06); color:#EAF0FB; border-color:rgba(255,255,255,.14); box-shadow:none; }
.pma--dark .pma-msg.agent b{ color:#8FC0FF; }
.pma--dark .pma-bars{ border-top-color:rgba(255,255,255,.12); }
.pma--dark .pma-bars-title{ color:rgba(255,255,255,.55); }
.pma--dark .pma-bar{ color:#D6E2F0; }
.pma--dark .pma-bar-track{ background:rgba(255,255,255,.1); }
.pma--dark .pma-bar-pct{ color:#8FC0FF; }
.pma--dark .pma-stat{ background:rgba(22,210,106,.1); border-color:rgba(22,210,106,.25); color:#EAF0FB; }
.pma--dark .pma-stat span{ color:#5EE39A; }
.pma--dark .pma-trend{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.12); }
.pma--dark .pma-sug{ background:transparent; border-top-color:rgba(255,255,255,.12); }
.pma--dark .pma-sug button{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#BBD6FF; }
.pma--dark .pma-sug button:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); }
.pma--dark .pma-input{ background:transparent; }
.pma--dark .pma-field{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.18); color:#EAF0FB; }
.pma--dark .pma-field .ph{ color:rgba(255,255,255,.5); }
.pma--dark + .pma-note{ color:rgba(255,255,255,.55); }