:root{
    --pink:#ff9ec1; --rose:#ff73a1; --violet:#b074ff; --teal:#7ffff5;
    --glass:rgba(255,255,255,.22); --glass-dark:rgba(10,10,10,.32);
    --radius:18px; --blur:26px; --t:ease;
  }
  
  *{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}
  
  /* aurora */
  body{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--pink),var(--violet),var(--teal));
    background-size:450% 450%;animation:aurora 20s alternate infinite;overflow:hidden;
  }
  @keyframes aurora{to{background-position:100% 50%}}
  
  #stars{position:fixed;inset:0;z-index:0}
  
  /* card */
  #chat-box{
    width:min(420px,92vw);height:640px;display:flex;flex-direction:column;
    background:var(--glass);backdrop-filter:blur(var(--blur));
    border:1px solid rgba(255,255,255,.35);border-radius:var(--radius);
    box-shadow:0 14px 42px rgba(0,0,0,.28);z-index:2;animation:pop .55s var(--t);
  }
  @keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
  
  /* header */
  header{display:flex;align-items:center;gap:.7em;padding:.9em 1.25em;
    background:var(--glass-dark);color:#fff}
  .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff}
  .brand{font-weight:600;letter-spacing:.3px;flex:1}
  
  /* switch */
  .switch{position:relative;width:46px;height:24px}
  .switch input{opacity:0;width:0;height:0}
  .slider{position:absolute;inset:0;border-radius:12px;background:#ffffff30;cursor:pointer;transition:.25s var(--t)}
  .slider::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s var(--t)}
  .switch input:checked+.slider{background:#ffffff90}
  .switch input:checked+.slider::before{transform:translateX(22px)}
  
  /* messages */
  main{flex:1;overflow-y:auto;padding:1.25em .9em .4em;scroll-behavior:smooth}
  .bubble{max-width:86%;padding:.68em 1em;border-radius:16px;margin:.5em 0;
    white-space:pre-wrap;line-height:1.5;font-size:.95rem;animation:slide .35s ease-out both}
  @keyframes slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .user{margin-left:auto;background:#d3fff4}
  .bot{margin-right:auto;background:#ffe4f2}
  
  /* new loader */
  #loader{display:flex;gap:5px;padding-left:.3em;margin:.35em 0}
  .dot{width:8px;height:8px;border-radius:50%;background:#555;animation:bounce 1s infinite}
  .dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
  @keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
  
  /* footer */
  footer{display:flex;gap:.7em;padding:.9em;background:var(--glass-dark)}
  #user-input{flex:1;padding:.62em .85em;border:none;border-radius:var(--radius)}
  #send-btn{--size:46px;width:var(--size);height:var(--size);border:none;border-radius:50%;
    display:grid;place-items:center;background:var(--rose);cursor:pointer;position:relative;
    transition:transform .14s var(--t),box-shadow .14s var(--t)}
  #send-btn:hover{box-shadow:0 0 10px rgba(255,255,255,.5)}
  #send-btn svg{fill:#fff;width:23px}
  #send-btn:active{transform:scale(.9)}
  #send-btn::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.45);
    transform:scale(0);opacity:0;transition:.45s var(--t)}
  #send-btn:focus-visible::after,#send-btn:active::after{transform:scale(1.9);opacity:0}
  
  /* falling goodies */
  .drop{position:fixed;font-size:34px;pointer-events:none;z-index:9999;animation:fall 3.4s linear forwards}
  @keyframes fall{to{top:110vh;opacity:0}}
  
  /* dark */
  .dark body{background:#0d1117}
  .dark #chat-box{background:rgba(20,20,20,.45);border-color:#222}
  .dark footer{background:#111}
  .dark main .user{background:#232323;color:#f5f5f5}
  .dark main .bot{background:#1c2a38;color:#e6e6e6}
  
  /* phone */
  @media(max-width:480px){#chat-box{height:90vh}}