/* plug-diagram.css - Talk To Gina motion kit */
.gm{--gm-surface:var(--bone-50,#FBF8F2);--gm-surface-2:var(--bone-100,#F7F3EC);--gm-line:var(--bone-border,#E4DDD3);--gm-text:var(--text-on-light,#14181F);--gm-mut:var(--text-on-light-mut,#55606E);--gm-blue:var(--cobalt-600,#1D4ED8);--gm-blue-2:var(--cobalt-700,#1740B0);--gm-blue-3:var(--cobalt-300,#7CA0F0);--gm-blue-soft:var(--cobalt-50,#EEF3FF);--gm-ok:var(--signal-approved,#0E9F6E);--gm-ok-soft:rgba(14,159,110,.12);--gm-wait:var(--signal-waiting,#C2740A);--gm-shadow:0 8px 30px rgba(11,14,20,.12);--gm-ease:cubic-bezier(.16,1,.3,1);--gm-soft:cubic-bezier(.4,0,.2,1);--gm-mono:var(--font-mono,'Geist Mono',ui-monospace,monospace);position:relative;width:100%;font-family:var(--font-body,'Outfit',system-ui,-apple-system,sans-serif);color:var(--gm-text);line-height:1.45;-webkit-font-smoothing:antialiased}.gm[data-theme=ink]{--gm-surface:var(--ink-700,#141A24);--gm-surface-2:var(--ink-800,#0D1117);--gm-line:var(--ink-600,#1E2530);--gm-text:var(--text-on-dark,#F4F6FA);--gm-mut:var(--text-on-dark-mut,#A6AEBD);--gm-blue-soft:rgba(124,160,240,.13);--gm-ok-soft:rgba(14,159,110,.2);--gm-shadow:0 12px 40px rgba(0,0,0,.35)}.gm *,.gm *::before,.gm *::after{box-sizing:border-box}.gm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gm-av{flex:none;display:inline-grid;place-items:center;width:2em;height:2em;border-radius:.6em;font-weight:700;font-size:1em;color:#fff;background:var(--gm-mut)}.gm-av--gina{background:linear-gradient(135deg,var(--gm-blue),var(--gm-blue-2))}.gm-btn{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.86em;line-height:1;font-family:inherit;cursor:default;padding:.62em 1.05em;border-radius:999px;border:1px solid var(--gm-line);background:transparent;color:var(--gm-text);transition:transform .15s var(--gm-soft),background .2s,box-shadow .2s,border-color .2s}.gm-btn--p{background:var(--gm-blue);border-color:var(--gm-blue);color:#fff}.gm-btn.is-press{transform:scale(.93);box-shadow:0 0 0 5px color-mix(in srgb,var(--gm-blue) 22%,transparent)}.gm-wave{display:inline-block;width:1.9em;height:.9em;vertical-align:middle;color:var(--gm-blue)}.gm-wave path{stroke-dasharray:40;animation:gm-wave 1.1s linear infinite}@keyframes gm-wave{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}.gm-dots{display:inline-flex;gap:3px;vertical-align:middle}.gm-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:gm-dot 1s infinite}.gm-dots i:nth-child(2){animation-delay:.15s}.gm-dots i:nth-child(3){animation-delay:.3s}@keyframes gm-dot{30%{opacity:1;transform:translateY(-2px)}}.gm-paused,.gm-paused *,.gm-paused *::before,.gm-paused *::after{animation-play-state:paused!important}.gm-static *,.gm-static *::before,.gm-static *::after{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.gm *,.gm *::before,.gm *::after{transition:none!important;animation:none!important}}
/* 6. Runs on the agent you already have */
.gm-plug{container-type:inline-size;max-width:1080px;margin-inline:auto;font-size:15px}
.gm .gm-alt{margin:0;color:var(--gm-mut)}
.gm.gm-ready .gm-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pd-stage{position:relative}
.pd-top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(40px,9cqw,120px)}
.pd-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.pd-lines path{fill:none;stroke-linecap:round}
.pd-ln{stroke:var(--gm-line);stroke-width:1.6;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset .7s var(--gm-soft),stroke .4s}
.pd-ln.on{stroke-dashoffset:0;stroke:color-mix(in srgb,var(--gm-blue) 40%,var(--gm-line))}
.pd-pl{stroke:var(--gm-blue);stroke-width:3;stroke-dasharray:7 220;stroke-dashoffset:7;opacity:0}
.gm[data-theme=ink] .pd-pl{stroke:var(--gm-blue-3)}
.pd-pl.go{opacity:1;animation:pd-pulse var(--t,2.4s) linear infinite;animation-delay:var(--d,0s)}
@keyframes pd-pulse{from{stroke-dashoffset:7}to{stroke-dashoffset:-100}}
.pd-node{opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s var(--gm-ease)}
.pd-node.in{opacity:1;transform:none}
.pd-acct{justify-self:start;max-width:17em;padding:1em 1.1em;background:var(--gm-surface);border:1px solid var(--gm-line);border-radius:16px;box-shadow:var(--gm-shadow)}
.pd-acct .pd-ic{width:2.3em;height:2.3em;border-radius:.7em;display:grid;place-items:center;background:var(--gm-blue-soft);color:var(--gm-blue);margin-bottom:.7em}
.gm[data-theme=ink] .pd-acct .pd-ic{color:var(--gm-blue-3)}
.pd-acct .pd-ic svg{width:1.3em;height:1.3em}
.pd-acct b{display:block;font-size:1.02em;font-weight:700;letter-spacing:-.01em}
.pd-acct span{display:block;font-size:.84em;color:var(--gm-mut);line-height:1.35;margin-top:.2em}
.pd-acct small{display:block;margin-top:.75em;padding-top:.65em;border-top:1px solid var(--gm-line);font-size:.74em;color:var(--gm-mut)}
.pd-gina{position:relative;width:7.2em;height:7.2em;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--gm-blue),var(--gm-blue-2));color:#FBF3E4;box-shadow:0 14px 40px -10px color-mix(in srgb,var(--gm-blue) 70%,transparent)}
.pd-gina svg{width:4.9em}
.pd-gina svg .w{stroke-dasharray:60;stroke-dashoffset:60}
.pd-gina.on svg .w{animation:pd-wave 2.6s ease-in-out infinite}
@keyframes pd-wave{0%{stroke-dashoffset:60}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}}
.pd-gina::after{content:"";position:absolute;inset:-.55em;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--gm-blue) 45%,transparent);opacity:0}
.pd-gina.on::after{animation:pd-ring 2.8s ease-out infinite}
@keyframes pd-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.35)}}
.pd-name{position:absolute;top:100%;margin-top:.8em;left:50%;translate:-50% 0;font-weight:700;font-size:.95em;white-space:nowrap}
.pd-tools{display:grid;grid-template-columns:1fr;gap:.5em;max-width:17em;width:100%;justify-self:end}
.pd-t{display:flex;align-items:center;gap:.6em;padding:.6em .75em;background:var(--gm-surface);border:1px solid var(--gm-line);border-radius:12px;font-size:.88em;font-weight:600;transition:border-color .4s,opacity .45s,transform .6s var(--gm-ease)}
.pd-t .pd-ti{flex:none;width:2em;height:2em;border-radius:.6em;display:grid;place-items:center;background:var(--gm-surface-2);color:var(--gm-mut);transition:background .4s,color .4s}
.pd-t .pd-ti svg{width:1.15em;height:1.15em}
.pd-t i{margin-left:auto;width:.55em;height:.55em;border-radius:50%;background:var(--gm-line);transition:background .4s}
.pd-t.on{border-color:color-mix(in srgb,var(--gm-blue) 35%,var(--gm-line))}
.pd-t.on .pd-ti{background:var(--gm-blue-soft);color:var(--gm-blue)}
.gm[data-theme=ink] .pd-t.on .pd-ti{color:var(--gm-blue-3)}
.pd-t.on i{background:var(--gm-ok)}
.pd-t.wide{grid-column:1/-1}
.pd-wall{position:relative;z-index:1;margin-top:3.2em;text-align:center}
.pd-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em;max-width:46.6em;margin-inline:auto}
.pd-a{width:2.6em;height:2.6em;border-radius:.75em;display:grid;place-items:center;background:var(--gm-surface);border:1px solid var(--gm-line);opacity:0;transform:scale(.5);transition:opacity .35s,transform .5s cubic-bezier(.3,1.4,.5,1)}
.pd-a.in{opacity:1;transform:none}
.pd-a b{width:1.05em;height:1.05em;background:var(--c);opacity:.75}
.pd-a.s1 b{border-radius:50%}.pd-a.s2 b{border-radius:.25em}.pd-a.s3 b{clip-path:polygon(50% 0,100% 100%,0 100%)}.pd-a.s4 b{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.pd-more{margin:1em 0 0;font-size:1.02em;font-weight:600;opacity:0;transition:opacity .6s}
.pd-more.in{opacity:1}
@container (max-width:760px){
  .gm-plug .pd-top{grid-template-columns:1fr;justify-items:center;gap:2.6em}
  .gm-plug .pd-acct{justify-self:center;text-align:center}
  .gm-plug .pd-acct .pd-ic{margin-inline:auto}
  .gm-plug .pd-gina{font-size:.85em;margin-bottom:1.2em}
  .gm-plug .pd-tools{grid-template-columns:1fr 1fr;justify-self:center;max-width:30em}
  .gm-plug .pd-wall{margin-top:2.4em}
  .gm-plug .pd-tiles{max-width:21.6em}
  .gm-plug .pd-a:nth-child(n+22){display:none}
}
@container (max-width:400px){.gm-plug .pd-t{font-size:.8em;padding:.5em .55em;gap:.45em}.gm-plug .pd-t .pd-ti{width:1.8em;height:1.8em}}
/* reserve height before the script mounts (no layout shift) */
.gm-plug:not(.gm-ready){min-height:525px}
@media (max-width:700px){.gm-plug:not(.gm-ready){min-height:700px}}

.pd-t .pd-tn{display:grid;line-height:1.2;min-width:0}.pd-t .pd-tn em{font-style:normal;font-weight:500;font-size:.82em;color:var(--gm-mut)}
.pd-t.req,.pd-t.req.on{border-style:dashed;border-color:var(--gm-line)}.pd-t.req.on .pd-ti{background:var(--gm-surface-2);color:var(--gm-mut)}
.pd-t.req i,.pd-t.req.on i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gm-mut)}