:root{--jsim-white:#fff;--jsim-surface:#f9fafb;--jsim-line-soft:#efefef;--jsim-line:#d9d9d9;--jsim-muted:#6b6b6b;--jsim-ink:#131416;--jsim-black:#000;--jsim-display:"Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;--jsim-body:"Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;--jsim-max:900px;--jsim-pad-x:clamp(1.25rem, 4vw, 2.5rem);--jsim-pad-y:clamp(1.5rem, 4vw, 2.5rem);--jsim-gap:clamp(1.25rem, 3vw, 2rem);--jsim-radius:999px;--jsim-tap:48px;--jsim-ease:.18s ease}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--jsim-white);color:var(--jsim-ink);font-family:var(--jsim-body);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.6;overflow-x:hidden}.jsim{height:100%;padding:var(--jsim-pad-y) var(--jsim-pad-x);justify-content:center;display:flex}.jsim__shell{gap:var(--jsim-gap);width:100%;max-width:var(--jsim-max);flex-direction:column;min-width:0;max-height:100%;display:flex}.jsim__identity{padding-bottom:var(--jsim-gap);border-bottom:1px solid var(--jsim-line-soft);flex-wrap:wrap;align-items:center;gap:clamp(.875rem,2.5vw,1.125rem);display:flex}.jsim__avatar{object-fit:cover;background:var(--jsim-surface);border:1px solid var(--jsim-line);border-radius:50%;flex:none;width:64px;height:64px}.jsim__avatar--fallback{font-family:var(--jsim-display);color:var(--jsim-muted);letter-spacing:.02em;place-items:center;font-size:1.5rem;font-weight:500;display:grid}.jsim__who{min-width:0;margin-right:auto}.jsim__name{font-family:var(--jsim-display);letter-spacing:-.01em;color:var(--jsim-ink);margin:0;font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);font-weight:500;line-height:1.2}.jsim__role{color:var(--jsim-muted);margin:.15rem 0 0;font-size:.9375rem}.jsim__status{font-family:var(--jsim-display);letter-spacing:.06em;text-transform:uppercase;color:var(--jsim-muted);white-space:nowrap;align-items:center;gap:.5rem;margin:0;font-size:.8125rem;font-weight:500;display:flex}.jsim__dot{background:var(--jsim-line);border-radius:50%;width:7px;height:7px}.jsim__dot.is-speaking{background:var(--jsim-ink);animation:1.4s ease-in-out infinite jsim-pulse}.jsim__channel{color:var(--jsim-muted)}@keyframes jsim-pulse{0%,to{opacity:1}50%{opacity:.35}}.jsim__body{flex-direction:column;flex:auto;justify-content:flex-start;min-height:0;display:flex}.jsim__intro{max-width:38rem;color:var(--jsim-ink);margin:0;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.55}.jsim__transcript{overscroll-behavior:contain;flex:auto;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto}.jsim__transcript:focus-visible{outline:2px solid var(--jsim-ink);outline-offset:4px}.jsim__turn{padding:0 0 clamp(1.25rem,3vw,1.75rem)}.jsim__turn+.jsim__turn{border-top:1px solid var(--jsim-line-soft);padding-top:clamp(1.25rem,3vw,1.75rem)}.jsim__turn--you{border-left:1px solid var(--jsim-line);padding-left:clamp(.875rem,3vw,1.25rem)}.jsim__speaker{font-family:var(--jsim-display);letter-spacing:.12em;text-transform:uppercase;color:var(--jsim-muted);margin:0 0 .35rem;font-size:.75rem;font-weight:600}.jsim__turn--jordan .jsim__speaker{color:var(--jsim-ink)}.jsim__said{color:var(--jsim-ink);overflow-wrap:break-word;margin:0;font-size:1rem;line-height:1.65}.jsim__complete{margin:var(--jsim-gap) 0 0;padding-top:var(--jsim-gap);border-top:1px solid var(--jsim-line-soft);font-family:var(--jsim-display);letter-spacing:-.01em;color:var(--jsim-ink);font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem);font-weight:500}.jsim__error{background:var(--jsim-surface);border-left:2px solid var(--jsim-ink);color:var(--jsim-ink);margin:0;padding:.875rem 1rem;font-size:.9375rem}.jsim__controls{padding-top:var(--jsim-gap);border-top:1px solid var(--jsim-line-soft);flex-direction:column;align-items:flex-start;gap:.875rem;display:flex}.jsim__start{flex-wrap:wrap;align-self:stretch;align-items:center;gap:clamp(.75rem,3vw,1.5rem);display:flex}.jsim__connecting{color:var(--jsim-muted);margin:0;font-size:.9375rem}.jsim__compose{align-self:stretch;align-items:stretch;gap:.625rem;display:flex}.jsim__input{min-width:0;min-height:var(--jsim-tap);font-family:var(--jsim-body);color:var(--jsim-ink);background:var(--jsim-white);border:1px solid var(--jsim-line);border-radius:var(--jsim-radius);transition:border-color var(--jsim-ease);flex:auto;padding:.75rem 1rem;font-size:1rem}.jsim__input::placeholder{color:var(--jsim-muted)}.jsim__input:hover{border-color:var(--jsim-muted)}.jsim__input:focus-visible{outline:2px solid var(--jsim-ink);outline-offset:2px;border-color:var(--jsim-ink)}.jsim__live{flex-wrap:wrap;align-self:stretch;gap:.625rem;display:flex}.jsim__btn{appearance:none;min-height:var(--jsim-tap);font-family:var(--jsim-body);border-radius:var(--jsim-radius);cursor:pointer;transition:background-color var(--jsim-ease), border-color var(--jsim-ease), color var(--jsim-ease), opacity var(--jsim-ease);border:1px solid #0000;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-size:.9375rem;font-weight:500;line-height:1;display:inline-flex}.jsim__btn:focus-visible{outline:2px solid var(--jsim-ink);outline-offset:3px}.jsim__btn--primary,.jsim__btn--send{background:var(--jsim-black);color:var(--jsim-white);border-color:var(--jsim-black)}.jsim__btn--primary:hover,.jsim__btn--send:not(:disabled):hover{background:var(--jsim-ink);border-color:var(--jsim-ink)}.jsim__btn--send{flex:none;padding-inline:1.25rem}.jsim__btn--send:disabled{opacity:.35;cursor:default}.jsim__btn--quiet{background:var(--jsim-white);color:var(--jsim-ink);border-color:var(--jsim-line)}.jsim__btn--quiet:hover{border-color:var(--jsim-ink)}.jsim__btn--quiet[aria-pressed=true]{background:var(--jsim-surface);border-color:var(--jsim-ink)}.jsim__btn--text{color:var(--jsim-muted);border:0;border-bottom:1px solid var(--jsim-line);background:0 0;border-radius:0;min-height:auto;padding-block:.35rem;padding-inline:0}.jsim__btn--text:hover{color:var(--jsim-ink);border-bottom-color:var(--jsim-ink)}.jsim__sr{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width<=34rem){.jsim__identity{gap:.875rem}.jsim__avatar{width:52px;height:52px}.jsim__status{flex-basis:100%}.jsim__start{flex-direction:column;align-items:stretch}.jsim__start .jsim__btn--text{align-self:center}.jsim__btn--send{padding-inline:1rem}.jsim__live .jsim__btn{flex:auto}}@media (prefers-reduced-motion:reduce){.jsim *,.jsim :before,.jsim :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
