<style>
    :root{
      --brand:#1f71ff;
      --bg:#ffffff;
      --surface:#fbfcff;
      --border:#e5e9ff;
      --text:#111;
      --muted:#666;
    }
    * { box-sizing: border-box; }
    body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

    /* Floating toggle button */
    .chat-toggle{
      position: fixed;
      right: 18px;
      bottom: 18px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--brand);
      color: #fff;
      display: grid;
      place-items: center;
      border: none;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.08);
      z-index: 9998;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .chat-toggle:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.08); }
    .chat-toggle:active{ transform: translateY(0); }
    .chat-toggle svg{ width: 26px; height: 26px; }

    /* Chat widget shell (animated open/close) */
    .chat-widget{
      position: fixed;
      right: 15px;
      bottom: 15px; /* leave space for toggle */
      width: 360px;
      max-width: calc(100vw - 24px);
      height: 520px;
      max-height: calc(100vh - 120px);
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 18px 40px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06);
      background: linear-gradient(135deg, #202020, #000000);
      overflow: hidden;
      display: none;        /* hidden by default */
      opacity: 0;           /* animate from 0 -> 1 */
      transform: translateY(12px) scale(.98);
      will-change: transform, opacity;
      z-index: 9999;
      transition:
        opacity .28s cubic-bezier(.2,.8,.2,1),
        transform .28s cubic-bezier(.2,.8,.2,1);
    }
    .chat-widget.show{       /* when visible */
      display: block;
    }
    .chat-widget.open{       /* play the entrance transform */
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Header */
    .chat-header{
      display:flex; align-items:center; justify-content:space-between;
      padding: 12px 14px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .chat-title{
      display:flex; align-items:center; gap:10px;
      font-weight: 600; color: var(--text);
    }
    .status-pill{
      padding:2px 8px; border-radius:999px; font-size:12px;
      background:#eef2ff; border:1px solid var(--border); color:#334;
    }
    .iconbtn{
      background: transparent; border: none; cursor: pointer; color: #333; color: white;
      padding: 6px; border-radius: 8px; transition: background .15s ease, transform .15s ease;
    }
    .iconbtn:hover{ transform: translateY(-1px); }
    .iconbtn:active{ transform: translateY(0); }

    /* Chat body */
    .chat-body{
      height: calc(100% - 56px - 80px); /* header + composer */
      flex: 1;                  /* let chat-body stretch fully */
  display: flex;
  flex-direction: column;
  min-height: 0; 
      background: var(--surface);
    }
    .messages{
      flex:1; overflow:auto; padding:12px;
      background: var(--surface);
      overflow-y: auto;
      overscroll-behavior: contain; /* prevent scrolling parent/page */
  -webkit-overflow-scrolling: touch;
    }
    .msg{ margin:10px 0; max-width: 86%; display:flex; }
    .msg.you{ justify-content: flex-end; max-width: 100%;}
    .bubble{
      display:inline-block; padding:10px 12px; border-radius:12px; line-height:1.35;
      border:1px solid var(--border);
      box-shadow: 0 1px 0 rgba(0,0,0,.03);
      animation: pop-in .18s ease-out both;
      word-wrap: break-word; word-break: break-word;
    }
    .you .bubble{ background:#eaf1ff; color: black;}
    .bot .bubble{ 
        background:#06d001;
        white-space: pre-wrap;  
        overflow-wrap: anywhere; 
    }
    @keyframes pop-in{
      from{ transform: scale(.98); opacity: 0; }
      to{ transform: scale(1); opacity: 1; }
    }

    /* Typing indicator (animated dots) */
    .typing{
      display:flex; align-items:center; gap:6px;
      font-size:12px; color: var(--muted);
      padding: 0 12px 10px;
      height: 22px;
      visibility: hidden;
    }
    .typing.show{ visibility: visible; }
    .dots{ display:inline-flex; gap:4px; align-items:center; }
    .dot{
      width:6px; height:6px; border-radius:50%; background:#9aa4ff;
      animation: dot-bounce 1s infinite ease-in-out;
    }
    .dot:nth-child(2){ animation-delay: .15s; }
    .dot:nth-child(3){ animation-delay: .30s; }
    @keyframes dot-bounce{
      0%, 80%, 100% { transform: translateY(0); opacity: .6; }
      40%          { transform: translateY(-4px); opacity: 1; }
    }

    /* Composer */
    .composer{
      border-top:1px solid var(--border);
      padding:10px;
      background: var(--bg);
    }
    .composer form{ display:flex; gap:8px; }
    .composer textarea{
      flex:1; resize:none; min-height:48px; max-height:120px;
      padding:10px; border:1px solid #e3e6f2; border-radius:10px; font-size:14px;
      outline:none; transition: box-shadow .15s ease, border-color .15s ease;
    }
    .composer textarea:focus{
      border-color:#cdd8ff; box-shadow: 0 0 0 3px rgba(31,113,255,.12);
    }
    .sendbtn{
      background: var(--brand); color:#fff; border:0; padding:0 14px; border-radius:10px;
      font-weight:600; cursor:pointer; min-width: 55px;
      transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
      box-shadow: 0 6px 14px rgba(31,113,255,.25);
    }
    .sendbtn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(31,113,255,.32); }
    .sendbtn:active{ transform: translateY(0); }

    /* Small screens */
    @media (max-width: 440px){
      .chat-widget{
        right: 10px; left: 10px; width: auto; height: 65vh; bottom: 84px;
      }
    }

    .sendbtn.listening {
      box-shadow: 0 0 0 4px rgba(31,113,255,.15), 0 6px 14px rgba(31,113,255,.25);
      animation: pulse 1.2s infinite ease-in-out;
    }
    @keyframes pulse {
      0% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-1px) scale(1.02); }
      100% { transform: translateY(0) scale(1); }
    }
  </style>