* { box-sizing: border-box; }
    body { margin:0; min-height:100vh; font-family:Arial,Helvetica,sans-serif; background:#fff; color:#0f172a; }
    .preview { padding:36px; }
    .preview h1 { margin:0 0 8px; font-size:28px; }
    .preview p { margin:0; color:#64748b; }

    .chat-launcher {
      position:fixed; right:24px; bottom:24px; width:64px; height:64px; border:0; border-radius:50%;
      background:#061326; box-shadow:0 14px 34px rgba(2,8,23,.30); cursor:pointer; z-index:10000;
      display:flex; align-items:center; justify-content:center; padding:0;
    }
    .launcher-chat-svg { width:34px; height:34px; display:block; }
    .launcher-close-svg { width:28px; height:28px; display:none; }
    .chat-launcher.open .launcher-chat-svg { display:none; }
    .chat-launcher.open .launcher-close-svg { display:block; }

    .chat-widget {
      position:fixed; right:24px; bottom:104px; width:460px; height:660px; max-height:calc(100vh - 130px);
      background:#fff; border:1px solid #e5e7eb; border-radius:18px; box-shadow:0 18px 50px rgba(15,23,42,.18);
      overflow:hidden; z-index:9999; display:none; flex-direction:column;
    }
    .chat-widget.open { display:flex; }

    .chat-header {
      height:84px; background:#061326; color:#fff; display:flex; align-items:center; justify-content:space-between;
      padding:14px 18px; flex-shrink:0;
    }
    .brand { display:flex; align-items:center; gap:12px; min-width:0; }
    .brand-logo { width:50px; height:50px; border-radius:12px; background:#020817; display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .brand-logo img { width:48px; height:48px; object-fit:contain; }
    .brand-title { font-size:18px; font-weight:700; margin-bottom:3px; }
    .brand-subtitle { font-size:13px; color:#cbd5e1; }
    .header-actions { display:flex; gap:12px; }
    .header-action { width:24px; height:24px; border:0; background:transparent; color:#fff; cursor:pointer; font-size:24px; line-height:1; padding:0; }

    .messages { flex:1; overflow-y:auto; padding:16px 18px 0; background:#fff; }
    .bot-row { display:flex; align-items:flex-start; gap:8px; margin-bottom:10px; }
    .user-row { display:flex; justify-content:flex-end; margin-bottom:10px; }
    .avatar { width:32px; height:32px; border-radius:50%; object-fit:contain; background:#020817; flex-shrink:0; margin-top:2px; }
    .bubble, .user-bubble {
      max-width:82%; border-radius:14px; padding:11px 13px; font-size:14px; line-height:1.42; white-space:pre-line;
    }
    .bubble { background:#f3f4f6; color:#101827; }
    .user-bubble { background:#2563eb; color:#fff; }

    .typing-bubble {
      width:58px; height:30px; margin-left:40px; margin-bottom:10px; border-radius:18px; background:#f3f4f6;
      display:flex; align-items:center; justify-content:center; gap:5px;
    }
    .typing-bubble span { width:6px; height:6px; background:#9ca3af; border-radius:50%; animation:typingDot 1s infinite ease-in-out; }
    .typing-bubble span:nth-child(2){animation-delay:.15s;background:#4b5563}
    .typing-bubble span:nth-child(3){animation-delay:.3s}
    @keyframes typingDot { 0%,80%,100%{transform:translateY(0);opacity:.55} 40%{transform:translateY(-4px);opacity:1} }

    .chips { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:14px 0 14px 40px; }
    .chip {
      min-height:50px; border:1px solid #cbd5e1; border-radius:11px; background:#fff; color:#0f172a;
      padding:9px 10px; display:flex; align-items:center; gap:8px; cursor:pointer; text-align:left; transition:.15s ease;
    }
    .chip:hover { border-color:#2563eb; background:#f8fbff; }
    .chip.full { grid-column:1/-1; }
    .chip-icon { width:32px; min-width:32px; padding:0 10px; display:flex; align-items:center; justify-content:center; }
    .chip-icon i { font-size:13px; }
    .chip-label { font-size:13.5px; line-height:1.18; }

    .footer-actions { display:flex; justify-content:flex-end; padding:0 18px 8px; }
    .restart-btn { border:1px solid #f59e0b; background:#fff7ed; color:#111827; border-radius:999px; padding:5px 10px; font-size:11px; cursor:pointer; }
    .powered { display:flex; align-items:center; gap:10px; padding:0 18px 8px; color:#9ca3af; font-size:12px; }
    .powered:before,.powered:after { content:""; height:1px; background:#e5e7eb; flex:1; }

    .input-area { height:74px; padding:10px 18px 14px; border-top:1px solid #e5e7eb; }
    .input-wrap { width:100%; height:50px; border:1px solid #cbd5e1; border-radius:12px; display:flex; align-items:center; overflow:hidden; }
    input { flex:1; height:100%; border:0; outline:none; padding:0 14px; font-size:14px; color:#111827; }
    input::placeholder { color:#aeb6c3; }
    .send-btn { width:46px; height:46px; border:0; background:transparent; color:#64748b; cursor:pointer; }
    .send-btn i { font-size:17px; }

    @media(max-width:540px){
      .chat-widget{right:12px;left:12px;bottom:94px;width:auto;height:72vh;max-height:none}
      .chat-launcher{right:18px;bottom:18px}
      .chips{grid-template-columns:1fr}
    }