:root{
      --bot-bg: #79008c !important;
      --bot-accent: #79008c !important;
      --bot-text: #ffffff;
      --bot-window-bg: #ffffff;
      --bot-window-text: #222222;
      --bot-width: 380px;
      --bot-radius: 12px;
    }

    .chat-launcher{
      position: fixed;  right:24px; bottom: 100px; z-index: 99999;
      display:flex; align-items:flex-end; gap:12px;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
    }

    /* Round robot avatar launcher button */
    .chat-avatar-btn{
      width:60px; height:60px; border-radius:50%; border:none;
      background:linear-gradient(145deg,var(--bot-bg), #c11cd4 70%);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 8px 22px rgba(121,0,140,0.35); cursor:pointer;
      position:relative; flex-shrink:0;
      animation:botFloat 2.6s ease-in-out infinite;
    }
    .chat-avatar-btn svg{width:30px;height:30px}
    .chat-avatar-btn:hover{animation-play-state:paused; transform:scale(1.05)}
    @keyframes botFloat{
      0%,100%{ transform:translateY(0) scale(1); }
      50%{ transform:translateY(-4px) scale(1.03); }
    }

    /* "Hi" speech-bubble teaser that pops up next to the robot */
    .chat-teaser{
      position:relative; align-self:center;
      background:#ffffff; color:#1f1240; font-weight:600; font-size:13.5px;
      padding:10px 14px; border-radius:16px 16px 4px 16px; max-width:170px;
      box-shadow:0 8px 22px rgba(2,6,23,0.18); cursor:pointer;
      opacity:0; transform:translateY(8px) scale(0.9);
      animation:teaserPop .45s cubic-bezier(.2,.9,.3,1.3) forwards, teaserWiggle 2.5s ease-in-out 1.6s 2;
      animation-delay:1s, 1.6s;
      display:flex; align-items:center; gap:6px;
    }
    .chat-teaser::after{
      content:''; position:absolute; right:-6px; bottom:16px;
      width:12px; height:12px; background:#ffffff; transform:rotate(45deg);
    }
    .chat-teaser .teaser-close{
      background:none;border:none;color:#9aa0ac;font-size:13px;cursor:pointer;padding:0 0 0 2px;line-height:1;
    }
    .chat-teaser.hidden{ display:none; }
    @keyframes teaserPop{ to{ opacity:1; transform:translateY(0) scale(1); } }
    @keyframes teaserWiggle{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

    .chat-popup{
      position: fixed; right: 24px; bottom: 80px;
      width:var(--bot-width); max-width:calc(100% - 48px);
      background:var(--bot-window-bg); color:var(--bot-window-text);
      border-radius:var(--bot-radius); box-shadow:0 12px 40px rgba(2,6,23,0.15);
      overflow:hidden; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      z-index:99999; display:none; flex-direction:column;
    }

    .chat-header{
      background:linear-gradient(90deg,var(--bot-bg), #c11cd4 60%);
      color:var(--bot-text); padding:14px 14px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .chat-header .title{font-weight:700;font-size:16px}
    .chat-header .subtitle{font-size:12px;opacity:0.95}
    .chat-header-left{display:flex;flex-direction:column}

    .chat-body{padding:12px;height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}

    .msg{max-width:88%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.4}
    .msg.user{align-self:flex-end;background:#e6f0ff;color:#012852;border-bottom-right-radius:6px}
    .msg.bot{align-self:flex-start;background:#f4f6fb;color:#0b2a4a;border-bottom-left-radius:6px;white-space:pre-line}
    .msg.small{font-size:13px;padding:8px 10px}

    /* Quick-reply button group shown under a bot message */
    .quick-buttons{align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px;max-width:100%;margin-top:-2px}
    .qbtn{
      background:#ffffff; color:var(--bot-bg); border:1.5px solid var(--bot-bg);
      padding:8px 12px; border-radius:999px; font-size:13px; font-weight:600;
      cursor:pointer; transition:background .15s,color .15s;
    }
    .qbtn:hover{background:var(--bot-bg); color:#fff}
    .qbtn.link-btn{
      background:var(--bot-accent); border-color:var(--bot-accent); color:#fff;
      text-decoration:none; display:inline-flex; align-items:center; gap:4px;
    }
    .qbtn.link-btn:hover{filter:brightness(0.95)}
    .qbtn.menu-btn{ border-style:dashed; opacity:0.9 }
    .qbtn:disabled{opacity:0.5;cursor:default}

    .chat-footer{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(0,0,0,0.06);background:transparent}
    .chat-input{flex:1;padding:10px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);outline:none;font-size:14px}
    .send-btn{background:var(--bot-bg);color:var(--bot-text);border:none;padding:10px 12px;border-radius:10px;cursor:pointer}

    .meta-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
    .icon-btn{background:transparent;border:none;color:#fff;cursor:pointer;font-size:16px;opacity:0.9}
    .icon-btn:hover{opacity:1}

    @media (max-width:420px){
      :root{--bot-width:92vw}
      .chat-popup{right:4vw;bottom:64px}
    }