:root{
  --green:#ADF500; --teal:#26AE8F; --purple:#68359B;
  --navy:#0A0A60; --gray:#2b2b2b; --gray-light:#3a3a3a; --hover:#4a4a4a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:transparent!important}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;color:var(--navy)}

/* FAB */
#kp-fab{
  position:fixed;right:20px;bottom:20px;width:84px;height:84px;z-index:9999;
  background:transparent;border:none;cursor:pointer;display:grid;place-items:center;
  animation:float 3s ease-in-out infinite;
}
#kp-avatar{width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.2))}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Container */
#kp-ui{position:fixed;inset:0;display:none;pointer-events:none;z-index:9998}
#kp-stack{
  position:fixed;right:20px;bottom:120px;width:min(620px,calc(100vw - 60px));
  max-height:calc(100vh - 180px);display:flex;flex-direction:column;gap:10px;
  overflow:auto;pointer-events:auto;padding:10px;scroll-behavior:smooth;
}

/* Input bar */
#kp-inputbar{
  position:fixed;right:120px;bottom:40px;width:min(520px,calc(100vw - 160px));
  height:60px;background:var(--gray);color:#fff;border:1px solid var(--gray-light);
  border-radius:30px;padding:6px 10px;display:flex;align-items:center;gap:10px;
  pointer-events:auto;box-shadow:0 2px 8px rgba(0,0,0,.35);
}
#kp-field{flex:1;display:flex;align-items:center;min-width:0}
#kp-input{flex:1;border:none;outline:none;background:transparent;color:#fff;font-size:16px}
#kp-input::placeholder{color:#fff}
#kp-wave{display:none;width:100%;height:28px}
#kp-controls{display:flex;align-items:center;gap:6px}
#kp-controls button,#kp-plus{width:44px;height:44px;border:none;background:transparent;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;transition:background .2s}
#kp-controls button:hover,#kp-plus:hover{background:var(--hover)}
#kp-controls img,#kp-plus img{width:22px;height:22px}

/* Plus menu */
#kp-plus-wrap{position:relative;display:flex;align-items:center}
#kp-menu{
  position:absolute;right:0;bottom:44px;background:#e5e5e5;color:#111;border:1px solid #c9c9c9;
  border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);display:none;flex-direction:column;
  min-width:220px;max-width:min(320px,calc(100vw - 24px));overflow:auto;z-index:10000;
}
#kp-menu[aria-hidden="false"]{display:flex}
#kp-menu button{display:flex;align-items:center;gap:8px;justify-content:center;
  background:#e5e5e5;border:none;padding:10px 12px;font-size:14px;white-space:nowrap;cursor:pointer}
#kp-menu button:hover{background:#d5d5d5}
#kp-menu img{width:18px;height:18px}

/* Bubbles */
.msg{max-width:85%;padding:12px 14px;border-radius:18px;font-size:16px;line-height:1.5;white-space:pre-wrap;position:relative}
.me{align-self:flex-start;color:#fff;background:linear-gradient(225deg,var(--navy),var(--purple));margin-right:auto}
.me::after{content:"";position:absolute;left:10px;bottom:-8px;border-style:solid;border-width:10px 14px 0 0;border-color:var(--purple) transparent transparent transparent}
.kp{align-self:flex-end;color:#000;background:linear-gradient(135deg,var(--green),var(--teal));margin-right:30px}
.kp::after{content:"";position:absolute;right:10px;bottom:-8px;border-style:solid;border-width:10px 0 0 14px;border-color:var(--teal) transparent transparent transparent}

/* Recording states */
#kp-cancel{display:none}
#kp-inputbar.recording #kp-input{display:none}
#kp-inputbar.recording #kp-wave{display:block}
#kp-inputbar.recording #kp-mic{display:none}
#kp-inputbar.recording #kp-cancel{display:grid}

/* Mobile */
@media (max-width:480px){
  #kp-stack{right:16px;width:calc(100vw - 40px);max-height:calc(100dvh - 170px)}
  #kp-inputbar{right:92px;width:calc(100vw - 128px);height:54px;padding:6px 8px}
  #kp-field{display:none} /* voice-first on phones */
  #kp-menu{right:4px}
}
#kp-inputbar{padding-bottom:max(6px,env(safe-area-inset-bottom))}