:root{
  /* ---- Brand knobs: change these to rebrand ---- */
  --sk-accent:#e0701f;         /* your primary accent (drives the glow + your bubbles + send) */
  --sk-card:#141419;           /* dark panel background */
  --sk-core:#0e0e12;           /* the mic core */
  --sk-txt:#f1f1f5;            /* primary text on the dark panel */
  --sk-txt2:#8b8b95;           /* muted text */
  --sk-font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}

/* ============================ THE FLOATING BUTTON ============================ */
.sk-fab{
  position:fixed;bottom:24px;right:24px;z-index:1400;height:54px;padding:0 16px;border-radius:17px;border:0;
  color:#fff;background:transparent;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:0;
  font:500 14px/1 var(--sk-font);cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.24),0 11px 32px color-mix(in srgb,var(--sk-accent) 38%,transparent);
  transition:gap .2s ease,padding .2s ease,transform .2s ease,box-shadow .2s ease;
}
.sk-fab::before{content:"";position:absolute;top:50%;left:50%;z-index:0;width:320px;height:320px;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,var(--sk-accent),#b0338a,#5b6cff,var(--sk-accent));animation:sk-fab-aura 7s linear infinite}
.sk-fab::after{content:"";position:absolute;inset:1.5px;z-index:1;border-radius:15.5px;background:var(--sk-core)}
.sk-fab-icon{position:relative;z-index:2;flex:none;width:22px;height:22px;animation:sk-fab-twinkle 2.8s ease-in-out infinite}
.sk-fab-label{position:relative;z-index:2;max-width:0;opacity:0;white-space:nowrap;transition:max-width .26s ease,opacity .2s ease}
.sk-fab:hover{gap:9px;padding:0 22px 0 18px;transform:translateY(-2px)}
.sk-fab:hover .sk-fab-label{max-width:140px;opacity:1}
@keyframes sk-fab-aura{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sk-fab-twinkle{0%,100%{transform:scale(1) rotate(0);opacity:.9}50%{transform:scale(1.12) rotate(8deg);opacity:1}}

/* ============================ THE OVERLAY + PANEL ============================ */
.sk-overlay{position:fixed;inset:0;z-index:1600;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,8,10,.5)}
.sk-overlay.show{display:flex}
.sk-modal{
  --_txt:var(--sk-txt);position:relative;overflow:hidden;display:flex;flex-direction:column;color:var(--sk-txt);
  width:1120px;height:700px;max-width:calc(100vw - 40px);max-height:calc(100vh - 56px);
  background:var(--sk-card);border:1px solid rgba(255,255,255,.06);border-radius:26px;padding:22px;
  box-shadow:0 30px 72px -16px rgba(0,0,0,.6);transform-origin:bottom right;animation:sk-pop .34s cubic-bezier(.34,1.36,.64,1)}
@keyframes sk-pop{from{transform:scale(.5) translate(44px,52px);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sk-modal{animation:none}}

/* full-height seam + a whisper of glow spilling through it (conversation only) */
.sk-modal:not(.is-idle):not(.is-listening)::after{content:"";position:absolute;top:0;bottom:0;left:calc(22px + 415px);width:1px;z-index:4;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.05),rgba(255,255,255,.12) 20%,rgba(255,255,255,.12) 80%,rgba(255,255,255,.05))}
.sk-modal:not(.is-idle):not(.is-listening)::before{content:"";position:absolute;top:0;bottom:0;left:calc(22px + 415px);width:52px;z-index:0;pointer-events:none;opacity:.6;transition:opacity .5s ease;
  background:linear-gradient(to right,color-mix(in srgb,var(--sk-accent) 10%,transparent),transparent 85%)}
.sk-modal.is-thinking:not(.is-idle):not(.is-listening)::before{opacity:.9}

/* header */
.sk-head{display:flex;align-items:center;justify-content:space-between;flex:none;margin-bottom:4px;position:relative;z-index:6}
.sk-brand{display:inline-flex;align-items:baseline;gap:8px} /* ← REPLACE with your logo */
.sk-wordmark{font-weight:300;font-size:20px;letter-spacing:-.01em;color:var(--sk-txt)}
.sk-wordmark b{font-weight:600}
.sk-dot{color:var(--sk-accent)}
.sk-name{font-size:18.5px;font-weight:300;line-height:1;color:var(--sk-txt);letter-spacing:-.01em}
.sk-head-actions{display:flex;align-items:center;gap:8px}
.sk-fresh{border:1px solid rgba(255,255,255,.24);color:var(--sk-txt);background:rgba(255,255,255,.05);border-radius:999px;padding:7px 13px;font:500 13px var(--sk-font);cursor:pointer;white-space:nowrap}
.sk-modal.is-idle .sk-fresh,.sk-modal.is-listening .sk-fresh{display:none}
.sk-fresh:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.09)}
.sk-x{width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--sk-txt2);font-size:18px;line-height:1;cursor:pointer}
.sk-x:hover{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.05)}

/* the travelling glow (single element that flies between hero centre and the left pane) */
.sk-travel{position:absolute;left:0;top:0;width:350px;height:350px;border-radius:50%;z-index:1;opacity:0;pointer-events:none;will-change:transform,opacity;
  background:conic-gradient(from 210deg,var(--sk-accent),#b0338a,#5b6cff,var(--sk-accent));filter:blur(42px)}
@media (prefers-reduced-motion:reduce){.sk-travel{transition:none!important}}

/* body: voice pane (left) + conversation (right) */
.sk-body{flex:1;display:flex;min-height:0}
.sk-stage{display:flex;align-items:center;justify-content:center;position:relative;min-width:0}
.sk-modal.is-idle .sk-stage,.sk-modal.is-listening .sk-stage{flex:1}
.sk-modal:not(.is-idle):not(.is-listening) .sk-stage{flex:0 0 415px;margin-right:28px}

.sk-idle,.sk-listen,.sk-mini{display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;position:relative}
.sk-modal.is-idle .sk-idle{display:block;position:absolute;inset:0}
.sk-modal.is-listening .sk-listen{display:flex}
.sk-modal:not(.is-idle):not(.is-listening) .sk-mini{display:flex}

.sk-idle .sk-hero{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:22px}
.sk-idle .sk-prompt{position:relative;z-index:5;text-shadow:0 1px 3px var(--sk-card),0 1px 16px rgba(0,0,0,.7)}
.sk-idle-bottom{position:absolute;left:0;right:0;bottom:18px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px}
.sk-idle-bottom .sk-sub{max-width:600px}
.sk-idle-bottom .sk-sub,.sk-idle-bottom .sk-foot{text-shadow:0 1px 3px var(--sk-card),0 1px 16px rgba(0,0,0,.7)}

.sk-micwrap{position:relative;display:flex;align-items:center;justify-content:center}
.sk-glow{position:absolute;width:350px;height:350px;border-radius:50%;filter:blur(42px);opacity:.9;
  background:conic-gradient(from 210deg,var(--sk-accent),#b0338a,#5b6cff,var(--sk-accent))}
.sk-idle .sk-glow{animation:sk-drift 11s ease-in-out infinite}
.sk-modal.is-listening .sk-glow{width:378px;height:378px;opacity:1;animation:sk-active-pulse 1.6s ease-in-out infinite}
.sk-mini .sk-glow{width:210px;height:210px;opacity:.85;animation:sk-rest-breathe 5.5s ease-in-out infinite}
.sk-modal.is-thinking .sk-mini .sk-glow{animation:sk-active-pulse 1.5s ease-in-out infinite}
@keyframes sk-drift{0%,100%{transform:translate(-2%,1%) scale(1)}33%{transform:translate(3%,-2%) scale(1.05)}66%{transform:translate(-3%,2%) scale(1.02)}}
@keyframes sk-active-pulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes sk-rest-breathe{0%,100%{opacity:.78;transform:scale(1)}50%{opacity:.9;transform:scale(1.035)}}

.sk-mic{position:relative;z-index:2;width:148px;height:148px;border-radius:50%;background:var(--sk-core);border:0;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px rgba(255,255,255,.1);transition:transform .16s ease}
.sk-mic:hover{transform:scale(1.03)}
.sk-mic svg{width:54px;height:54px}
.sk-mini .sk-mic{width:108px;height:108px}
.sk-mini .sk-mic svg{width:40px;height:40px}

.sk-listen-ring{position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(255,255,255,.2);z-index:1;animation:sk-ring 2s ease-in-out infinite}
.sk-wave{display:flex;align-items:center;gap:4px;height:42px}
.sk-wave i{width:4px;height:32px;border-radius:2px;background:#fff;opacity:.92;display:block;transform-origin:center;animation:sk-waveb .9s ease-in-out infinite}
.sk-wave i:nth-child(2){animation-delay:.12s}.sk-wave i:nth-child(3){animation-delay:.26s}.sk-wave i:nth-child(4){animation-delay:.05s}.sk-wave i:nth-child(5){animation-delay:.32s}.sk-wave i:nth-child(6){animation-delay:.18s}
@keyframes sk-ring{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:.9}}
@keyframes sk-waveb{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.sk-prompt{color:var(--sk-txt);font-size:18px;font-weight:500}
.sk-sub{color:var(--sk-txt2);font-size:13px;line-height:1.5}
.sk-foot{color:var(--sk-txt2);font-size:13px}
.sk-foot button{background:none;border:0;color:var(--sk-txt2);text-decoration:underline;cursor:pointer;font:inherit}
.sk-foot button:hover{color:#fff}
.sk-tr{position:relative;z-index:5;color:var(--sk-txt);font-size:16px;line-height:1.5;max-width:300px;min-height:48px}
.sk-tr:empty::before{content:"Listening\2026";color:var(--sk-txt2)}
.sk-mini-label{color:var(--sk-txt2);font-size:13px}

/* right pane: the conversation */
.sk-chat{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.sk-modal.is-idle .sk-chat,.sk-modal.is-listening .sk-chat{display:none}
.sk-thread{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:8px 2px;position:relative;z-index:1}
.sk-msg{font-size:14.5px;line-height:1.55;padding:10px 14px;border-radius:13px;max-width:82%;white-space:pre-wrap}
.sk-msg.them{align-self:flex-start;color:#ececf1;background:#22222b;border-radius:5px 14px 14px 14px}
.sk-msg.me{align-self:flex-end;color:#fff;background:var(--sk-accent);border-bottom-right-radius:4px}
.sk-msg.them.streaming::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;background:var(--sk-accent);vertical-align:-2px;animation:sk-caret .8s step-end infinite}
@keyframes sk-caret{50%{opacity:0}}
.sk-typing{display:inline-flex;gap:5px;align-self:flex-start;padding:12px 14px}
.sk-typing i{width:7px;height:7px;border-radius:50%;background:var(--sk-accent);opacity:.5;animation:sk-dot 1.2s ease-in-out infinite}
.sk-typing i:nth-child(2){animation-delay:.16s}.sk-typing i:nth-child(3){animation-delay:.32s}
@keyframes sk-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.sk-compose{display:flex;gap:8px;align-items:flex-end;padding-top:4px;position:relative;z-index:1}
.sk-compose textarea{flex:1;resize:none;height:46px;max-height:160px;background:#1d1d24;border:1px solid #2c2c35;color:#f1f1f5;border-radius:11px;padding:12px;font:inherit;font-size:14.5px}
.sk-compose textarea::placeholder{color:#83838d}
.sk-compose textarea:focus{outline:none;border-color:color-mix(in srgb,var(--sk-accent) 55%,#2c2c35)}
.sk-send{width:54px;height:46px;border-radius:11px;border:0;background:var(--sk-accent);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){.sk-glow,.sk-listen-ring,.sk-wave i,.sk-typing i,.sk-msg.them.streaming::after{animation:none}}

/* demo: 'Finish the tour' pill in the Sidekick header (always visible) */
.sk-finish{ border:0; color:#fff; background:var(--sk-accent); border-radius:999px; padding:7px 15px; font:600 13px var(--sk-font); cursor:pointer; white-space:nowrap; }
.sk-finish:hover{ filter:brightness(1.08); }

/* demo: the real Nueform wordmark in the Sidekick header */
.sk-logo{ height:18px; width:auto; flex:none; display:block; color:var(--sk-txt); }
.sk-brand{ align-items:center; }