/* =========================================================
   MSPYar shell and theme — component-token driven
   ========================================================= */
.msp-shell{--msp-surface:var(--ds-color-surface);--msp-ink:var(--ds-color-text);--msp-muted:var(--ds-color-text-muted);--msp-blue:var(--ds-color-primary);--msp-line:var(--ds-color-border);--msp-success:var(--ds-color-success-semantic);--msp-warning:var(--ds-color-warning-semantic);--msp-danger:var(--ds-color-danger-semantic);position:relative;display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:var(--ds-space-6);min-block-size:42rem;padding:clamp(1.25rem,4vw,3rem);overflow:hidden;border:1px solid var(--msp-line);border-radius:var(--ds-radius-lg);color:var(--msp-ink);background:var(--msp-surface);box-shadow:var(--ds-shadow-elevated)}
.msp-shell[data-msp-theme=dark]{--msp-surface:var(--ds-theme-dark-surface);--msp-ink:var(--ds-theme-dark-text);--msp-muted:var(--ds-theme-dark-muted);--msp-line:var(--ds-theme-dark-border);--msp-blue:var(--ds-theme-dark-primary);color-scheme:dark}.msp-shell[data-msp-theme=light]{--msp-surface:var(--ds-theme-light-surface);--msp-ink:var(--ds-theme-light-text);--msp-muted:var(--ds-theme-light-muted);--msp-line:var(--ds-theme-light-border);--msp-blue:var(--ds-theme-light-primary);color-scheme:light}
.msp-shell__hero{max-inline-size:44rem;align-self:start}.msp-shell__eyebrow,.msp-approval__eyebrow{margin:0 0 .5rem;color:var(--msp-blue);font-size:.78rem;font-weight:800;letter-spacing:.08em}.msp-shell h1{margin:.25rem 0 1rem;font-size:clamp(2.3rem,7vw,5rem);line-height:.95}.msp-shell p{color:var(--msp-muted);line-height:1.8}.msp-shell__actions,.msp-approval__actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-block:1.5rem}.msp-shell button{min-block-size:44px;padding:.65rem 1rem;border:1px solid transparent;border-radius:.8rem;color:#fff;background:var(--msp-blue);font:inherit;font-weight:700;cursor:pointer}.msp-shell .msp-button--secondary{border-color:var(--msp-line);color:var(--msp-ink);background:transparent}.msp-shell .msp-button--quiet{color:var(--msp-muted);background:transparent}.msp-shell button:focus-visible,.msp-chat input:focus-visible{outline:3px solid var(--msp-blue);outline-offset:3px}
.msp-character{position:relative;align-self:center;text-align:center}.msp-character img{inline-size:min(100%,18rem);block-size:auto;filter:drop-shadow(0 1.2rem 1.1rem rgb(18 45 67 /.18));animation:msp-float 4s ease-in-out infinite}.msp-character__status{display:flex;justify-content:center;align-items:center;gap:.4rem;font-weight:700}.msp-character__dot{inline-size:.55rem;block-size:.55rem;border-radius:50%;background:var(--msp-success)}.msp-character__controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin-block-start:.75rem}.msp-character__controls button{min-block-size:32px;padding:.3rem .45rem;font-size:.72rem}.msp-character__controls .is-active{outline:2px solid var(--msp-blue)}
.msp-guide-bubble{position:absolute;inset-block-start:1rem;inset-inline-end:1rem;display:flex;gap:.5rem;max-inline-size:20rem;padding:.7rem .9rem;border:1px solid var(--msp-line);border-radius:1rem;background:color-mix(in srgb,var(--msp-surface),transparent 4%);box-shadow:0 .8rem 2rem rgb(20 57 86/.12)}.msp-guide-bubble span{color:var(--msp-muted);font-size:.84rem}
.msp-guide-hub,.msp-chat{position:fixed;z-index:20;border:1px solid var(--msp-line);border-radius:1.25rem;background:var(--msp-surface);box-shadow:0 1.5rem 4rem rgb(0 0 0 /.22)}.msp-guide-hub{inset-block-start:15%;inset-inline:50% auto;inline-size:min(28rem,calc(100vw - 2rem));padding:1.25rem;transform:translateX(50%)}.msp-guide-hub__head,.msp-chat header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.msp-guide-hub h2{margin:0}.msp-guide-hub__choices{display:grid;gap:.6rem}.msp-guide-hub__choices button{text-align:start}
.msp-operations{display:grid;grid-column:1/2;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;align-self:end}.msp-operation{padding:.8rem;border-inline-start:4px solid var(--msp-line);border-radius:.7rem;background:color-mix(in srgb,var(--msp-surface),var(--msp-blue) 4%)}.msp-operation strong,.msp-operation span{display:block}.msp-operation span{margin-block-start:.25rem;color:var(--msp-muted);font-size:.8rem}.msp-operation--success{border-color:var(--msp-success)}.msp-operation--warning{border-color:var(--msp-warning)}.msp-operation--error{border-color:var(--msp-danger)}
.msp-chat{inset-block:1rem;inset-inline-start:1rem;display:grid;grid-template-rows:auto 1fr auto;inline-size:min(26rem,calc(100vw - 2rem));padding:1rem}.msp-chat header span{display:block;color:var(--msp-muted);font-size:.8rem}.msp-chat header button{font-size:1.4rem}.msp-chat__messages{display:grid;align-content:start;gap:.7rem;overflow:auto;padding-block:1rem}.msp-message{max-inline-size:85%;margin:0;padding:.7rem .85rem;border-radius:1rem;line-height:1.6}.msp-message--assistant{background:color-mix(in srgb,var(--msp-blue),transparent 87%)}.msp-message--user{justify-self:end;color:#fff;background:var(--msp-blue)}.msp-chat footer{display:flex;gap:.5rem}.msp-chat input{min-inline-size:0;flex:1;padding:.7rem;border:1px solid var(--msp-line);border-radius:.75rem;color:var(--msp-ink);background:transparent}.msp-stream{font-size:.8rem;color:var(--msp-muted)}.msp-stream span{display:inline-block;inline-size:.35rem;block-size:.35rem;margin-inline:.08rem;border-radius:50%;background:var(--msp-blue);animation:msp-pulse 1s infinite}.msp-stream span:nth-child(2){animation-delay:.16s}.msp-stream span:nth-child(3){animation-delay:.32s}
.msp-approval{padding:1rem;border:1px solid color-mix(in srgb,var(--msp-warning),var(--msp-line) 45%);border-radius:1rem}.msp-approval h3{margin:.2rem 0;font-size:1rem}.msp-approval dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .7rem;margin:1rem 0}.msp-approval dl div{display:contents}.msp-approval dt{color:var(--msp-muted)}.msp-approval dd{margin:0;font-weight:700}.msp-approval__result{font-size:.82rem}
/* Motion is decorative and disabled for reduced-motion preferences. */
@keyframes msp-float{50%{transform:translateY(-8px)}}@keyframes msp-pulse{50%{opacity:.25;transform:translateY(-2px)}}
@media (max-width:720px){.msp-shell{grid-template-columns:1fr;padding:1.25rem}.msp-character{grid-row:1;justify-self:center}.msp-operations{grid-column:auto;grid-template-columns:1fr}.msp-guide-bubble{position:static;margin-block-start:1rem}.msp-chat{inset-block:auto 0;inset-inline:0;inline-size:100%;block-size:min(78dvh,42rem);border-radius:1.25rem 1.25rem 0 0}.msp-guide-hub{inset-block-start:auto;inset-block-end:1rem;transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
