/* ============================================================
   Holkin studio assistant — self-contained chat widget.
   All classes prefixed .hkc- so nothing collides with slate.css.
   Uses the site's already-loaded Space Grotesk / Space Mono.
   ============================================================ */

/* launcher: the orange dot */
.hkc-launch{position:fixed;right:24px;bottom:24px;z-index:9000;height:40px;display:flex;
  align-items:center;cursor:pointer;border:0;background:none;padding:0;
  font-family:'Space Grotesk',system-ui,sans-serif}
.hkc-launch.hkc-hold{opacity:0;pointer-events:none}       /* held back on the home hero, pre-arrival */
.hkc-launch.hkc-arrive{animation:hkcLaunchIn .55s cubic-bezier(.2,1.45,.4,1)}
@keyframes hkcLaunchIn{from{opacity:0;transform:translateY(10px) scale(.5)}to{opacity:1;transform:none}}
.hkc-launch .hkc-disc{width:40px;height:40px;border-radius:50%;background:#E0762A;
  border:2.5px solid #0F1B2A;flex:none;
  box-shadow:0 6px 18px rgba(224,118,42,.36), 0 2px 7px rgba(6,12,20,.35);
  transition:transform .25s cubic-bezier(.2,1.5,.4,1)}
.hkc-launch .hkc-lbl{position:absolute;right:calc(100% + 13px);top:50%;white-space:nowrap;
  transform:translateY(-50%) translateX(6px);opacity:0;pointer-events:none;
  color:#EAF1F4;font-weight:600;font-size:14px;padding:8px 15px;
  background:#16273c;border:1px solid rgba(234,241,244,.16);border-radius:16px;
  box-shadow:0 10px 24px rgba(15,27,42,.34);
  transition:opacity .2s ease, transform .26s cubic-bezier(.2,1,.3,1)}
/* speech-bubble tail pointing at the dot */
.hkc-launch .hkc-lbl::after{content:'';position:absolute;left:100%;top:50%;
  transform:translateY(-50%);border:7px solid transparent;border-left-color:#16273c;margin-left:-1px}
.hkc-launch .hkc-lbl .hkc-d{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#E0762A;vertical-align:6px;margin:0 1px}
.hkc-launch:hover .hkc-disc{transform:scale(1.08)}
.hkc-launch:hover .hkc-lbl{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}
/* touch devices have no hover — JS briefly adds .hkc-peek so the label shows once on arrival */
.hkc-launch.hkc-peek .hkc-lbl{opacity:1;transform:translateY(-50%) translateX(0)}
.hkc-launch.hkc-hide{opacity:0;transform:scale(.6);pointer-events:none;transition:all .2s}
/* unread badge — a reply arrived while minimized */
.hkc-launch .hkc-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  box-sizing:border-box;border-radius:9px;background:#EAF1F4;color:#0F1B2A;border:2px solid #0F1B2A;
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:11px;font-weight:700;line-height:13px;
  text-align:center;box-shadow:0 2px 8px rgba(15,27,42,.35);animation:hkcPop .3s cubic-bezier(.2,1.7,.4,1)}
@keyframes hkcPop{from{transform:scale(0)}to{transform:scale(1)}}

/* panel */
.hkc-panel{position:fixed;right:26px;bottom:26px;z-index:9001;width:372px;max-width:calc(100vw - 32px);
  height:560px;max-height:calc(100vh - 52px);max-height:calc(100dvh - 52px);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(224,118,42,.10), transparent 55%),
    linear-gradient(176deg,#14263c 0%,#0F1B2A 62%);
  border:1px solid rgba(234,241,244,.09);
  box-shadow:0 32px 80px -22px rgba(4,10,18,.70), 0 10px 26px -8px rgba(4,10,18,.45);
  display:flex;flex-direction:column;
  font-family:'Space Grotesk',system-ui,sans-serif;
  transform-origin:100% 100%;
  opacity:0;transform:translateY(6px) scale(.82);pointer-events:none;
  transition:opacity .2s ease, transform .34s cubic-bezier(.16,1.02,.3,1)}
.hkc-panel.hkc-open{opacity:1;transform:none;pointer-events:auto}

.hkc-ph{display:flex;align-items:center;gap:11px;padding:16px 16px 14px;cursor:pointer;
  border-bottom:1px solid rgba(234,241,244,.10)}
.hkc-ph .hkc-logo{height:36px;width:auto;flex:none;display:block}
.hkc-ph .hkc-who{display:flex;flex-direction:column;line-height:1.15}
.hkc-ph .hkc-who .hkc-t{color:#EAF1F4;font-weight:600;font-size:15px}
.hkc-ph .hkc-who .hkc-s{color:#9bb0c4;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase}
.hkc-ph .hkc-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4FCB86;
  margin-right:6px;vertical-align:1px;animation:hkcLive 2.6s ease-in-out infinite}
@keyframes hkcLive{0%,100%{box-shadow:0 0 0 0 rgba(79,203,134,.5)}50%{box-shadow:0 0 0 4px rgba(79,203,134,0)}}
.hkc-ph .hkc-x{margin-left:auto;background:none;border:0;color:#9bb0c4;font-size:20px;cursor:pointer;
  width:30px;height:30px;border-radius:8px;transition:background .15s,color .15s;line-height:1}
.hkc-ph .hkc-x:hover{background:rgba(234,241,244,.08);color:#EAF1F4}

.hkc-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 8px;display:flex;flex-direction:column;gap:14px}
.hkc-body::-webkit-scrollbar{width:8px}
.hkc-body::-webkit-scrollbar-thumb{background:rgba(234,241,244,.14);border-radius:8px}

.hkc-row{display:flex;gap:9px;align-items:flex-start;max-width:100%;
  animation:hkcRise .34s cubic-bezier(.2,1,.3,1)}
@keyframes hkcRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hkc-row.hkc-a .hkc-ava{width:14px;height:14px;border-radius:50%;background:#E0762A;flex:none;margin-top:5px}
.hkc-row.hkc-a .hkc-ava i{display:none}
.hkc-msg{font-size:14px;line-height:1.5;border-radius:14px;padding:10px 13px;max-width:82%}
.hkc-row.hkc-a .hkc-msg{background:#16273c;color:#EAF1F4;border-top-left-radius:5px}
.hkc-row.hkc-u{justify-content:flex-end}
.hkc-row.hkc-u .hkc-msg{background:#E0762A;color:#1a1205;font-weight:500;border-top-right-radius:5px}
.hkc-msg a{color:#E0762A;font-weight:600}
.hkc-row.hkc-u .hkc-msg a{color:#1a1205}
/* feedback thumbs — subtle, always faintly present, one-tap, quiet "Thanks", then fades */
.hkc-fb{display:flex;gap:1px;align-items:center;margin:2px 0 7px 23px;height:20px;opacity:.4;transition:opacity .25s}
.hkc-fb:hover,.hkc-row.hkc-a:hover + .hkc-fb,.hkc-fb.hkc-fb-voted{opacity:1}
.hkc-fb-b{background:none;border:0;padding:3px;margin:0;cursor:pointer;color:#7c93a9;display:inline-flex;line-height:0;border-radius:5px;transition:color .15s,background .15s,transform .1s}
.hkc-fb-b svg{width:13px;height:13px}
.hkc-fb-b:hover{color:#E0762A;background:rgba(224,118,42,.12)}
.hkc-fb-b:active{transform:scale(.88)}
.hkc-fb-on{color:#E0762A}
.hkc-fb-voted .hkc-fb-b:not(.hkc-fb-on){opacity:0;width:0;padding:0;overflow:hidden;pointer-events:none}
.hkc-fb-voted::after{content:"Thanks";font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.02em;color:#7c93a9;margin-left:4px}
.hkc-fb-gone{opacity:0;height:0;margin:0;overflow:hidden;pointer-events:none;transition:opacity .5s,height .4s .1s,margin .4s .1s}
@media (prefers-reduced-motion:reduce){.hkc-fb,.hkc-fb-b,.hkc-fb-gone{transition:none}}

.hkc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 2px 23px;animation:hkcRise .34s cubic-bezier(.2,1,.3,1)}
.hkc-chip{font-family:'Space Grotesk',system-ui,sans-serif;font-size:13px;font-weight:500;color:#EAF1F4;
  background:transparent;border:1px solid rgba(234,241,244,.22);border-radius:999px;padding:7px 13px;
  cursor:pointer;transition:all .15s}
.hkc-chip:hover{border-color:#E0762A;color:#E0762A;background:rgba(224,118,42,.09);transform:translateY(-1px)}

.hkc-typing{display:flex;gap:4px;padding:12px 14px;background:#16273c;border-radius:14px;
  border-top-left-radius:5px;width:-moz-fit-content;width:fit-content}
.hkc-typing span{width:6px;height:6px;border-radius:50%;background:#9bb0c4;animation:hkcBl 1s infinite}
.hkc-typing span:nth-child(2){animation-delay:.15s}
.hkc-typing span:nth-child(3){animation-delay:.3s}
@keyframes hkcBl{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.hkc-foot{padding:12px 14px 14px;border-top:1px solid rgba(234,241,244,.10)}
.hkc-inp{display:flex;align-items:center;gap:8px;background:#0b1420;border:1px solid rgba(234,241,244,.14);
  border-radius:13px;padding:6px 6px 6px 14px;transition:border-color .16s,box-shadow .16s}
.hkc-inp:focus-within{border-color:rgba(224,118,42,.55);box-shadow:0 0 0 3px rgba(224,118,42,.12)}
.hkc-inp input{flex:1;background:none;border:0;outline:0;color:#EAF1F4;
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:14px}
.hkc-inp input::placeholder{color:#9bb0c4}
.hkc-send{width:34px;height:34px;border-radius:9px;border:0;background:#E0762A;color:#1a1205;cursor:pointer;
  font-size:16px;flex:none;display:grid;place-items:center;transition:transform .12s;line-height:1}
.hkc-send:hover{transform:scale(1.07)}
.hkc-send:active{transform:scale(.92)}
.hkc-foot .hkc-tiny{text-align:center;font-family:'Space Mono',monospace;font-size:9.5px;color:#9bb0c4;
  letter-spacing:.08em;margin-top:9px}

/* "Get in touch" button (footer) + the inline lead form card */
.hkc-req{display:block;width:100%;margin-bottom:9px;padding:9px 12px;border-radius:11px;
  border:1px solid rgba(224,118,42,.5);background:rgba(224,118,42,.10);color:#E0762A;
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:13px;cursor:pointer;
  transition:background .15s,transform .12s}
.hkc-req:hover{background:rgba(224,118,42,.18)}
.hkc-req:active{transform:scale(.99)}
.hkc-leadform{background:#16273c;border:1px solid rgba(234,241,244,.12);border-radius:14px;
  border-top-left-radius:5px;padding:13px;display:flex;flex-direction:column;gap:8px;
  animation:hkcRise .34s cubic-bezier(.2,1,.3,1)}
.hkc-leadform .hkc-lf-h{color:#EAF1F4;font-weight:600;font-size:13px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hkc-lf-x{background:none;border:0;color:#9bb0c4;font-size:18px;line-height:1;cursor:pointer;padding:0 2px;margin:-2px -4px 0 0;flex:none}
.hkc-lf-x:hover{color:#EAF1F4}
.hkc-leadform input,.hkc-leadform textarea{background:#0b1420;border:1px solid rgba(234,241,244,.14);
  border-radius:9px;padding:8px 10px;color:#EAF1F4;font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:13px;outline:0;resize:none;width:100%;box-sizing:border-box}
.hkc-leadform input:focus,.hkc-leadform textarea:focus{border-color:rgba(224,118,42,.55);
  box-shadow:0 0 0 3px rgba(224,118,42,.12)}
.hkc-leadform input::placeholder,.hkc-leadform textarea::placeholder{color:#9bb0c4}
.hkc-lf-send{background:#E0762A;color:#1a1205;border:0;border-radius:9px;padding:9px;font-weight:600;
  font-size:13px;cursor:pointer;font-family:'Space Grotesk',system-ui,sans-serif;transition:transform .12s}
.hkc-lf-send:hover{transform:translateY(-1px)}
.hkc-lf-send:disabled{opacity:.6;cursor:default;transform:none}
.hkc-lf-err{color:#ff9b7a;font-size:12px}
.hkc-lf-done{color:#EAF1F4;font-size:13px;line-height:1.5}

/* respect reduced-motion — kill the entrances/pulses, keep a simple fade */
@media (prefers-reduced-motion:reduce){
  .hkc-launch,.hkc-panel,.hkc-row,.hkc-chips,.hkc-leadform,.hkc-live,.hkc-badge{animation:none!important}
  .hkc-panel{transform:none;transition:opacity .16s ease!important}
}
/* small screens: panel fills the viewport comfortably */
@media (max-width:460px){
  .hkc-panel{right:12px;left:12px;bottom:12px;width:auto;height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:none}
  .hkc-launch{right:18px;bottom:18px}
  .hkc-inp input{font-size:13px}
  .hkc-inp input::placeholder{font-size:12.5px}
}