.support-chatbot { --support-ink:#342923; --support-surface:#fffdf9; --support-terra:#b9644d; --support-gold:#d7ae70; --support-line:#ead7c0; --support-muted:#6f5b4f; position:fixed; z-index:1100; right:20px; bottom:20px; display:flex; flex-direction:column; align-items:flex-end; color:var(--support-ink); font-family:Georgia,"Times New Roman",serif; }
.support-chatbot *, .support-chatbot *::before, .support-chatbot *::after { box-sizing:border-box; }
.support-chatbot-panel { width:min(430px,calc(100vw - 32px)); max-height:min(690px,calc(100vh - 104px)); max-height:min(690px,calc(100dvh - 104px)); margin-bottom:14px; overflow:hidden; border:1px solid var(--support-line); border-radius:28px; background:var(--support-surface); box-shadow:0 24px 65px rgba(97,65,43,.22); }
.support-chatbot-panel:not([hidden]) { display:flex; flex-direction:column; animation:support-chatbot-panel-in .26s ease-out both; }.support-chatbot-panel.support-chatbot-panel--enter { animation:support-chatbot-panel-in .26s ease-out both; }
.support-chatbot-header { display:flex; justify-content:space-between; gap:16px; padding:23px 24px 17px; background:linear-gradient(125deg,#fff8ed,#f2dcbd); border-bottom:1px solid rgba(234,215,192,.75); }.support-chatbot-eyebrow { margin:0 0 6px; color:#936848; font:700 11px/1.2 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; }.support-chatbot-header strong { display:block; font-size:26px; line-height:1.12; letter-spacing:-.025em; }
.support-chatbot-header-actions { display:flex; flex:0 0 auto; align-items:center; gap:6px; }
.support-chatbot-reset { display:inline-flex; flex:0 0 44px; align-items:center; justify-content:center; width:44px; height:44px; padding:5px; border:0; border-radius:50%; background:rgba(255,250,242,.86); background-clip:content-box; color:var(--support-ink); font:16px/1 system-ui,sans-serif; cursor:pointer; }
.support-chatbot-close { display:inline-flex; flex:0 0 44px; align-items:center; justify-content:center; width:44px; height:44px; padding:5px; border:0; border-radius:50%; background:rgba(255,250,242,.86); background-clip:content-box; color:var(--support-ink); font:24px/1 system-ui,sans-serif; cursor:pointer; }
.support-chatbot-messages { display:flex; flex:1 1 auto; flex-direction:column; gap:12px; min-height:180px; max-height:350px; overflow:auto; overscroll-behavior:contain; padding:20px; scrollbar-color:#d4b18a transparent; }.support-chatbot-message { width:fit-content; max-width:86%; margin:0; padding:11px 14px; border-radius:18px 18px 18px 4px; background:#f6eadb; color:var(--support-ink); font-size:15px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; animation:support-chatbot-message-in .22s ease-out both; }.support-chatbot-message--user { align-self:flex-end; border-radius:18px 18px 4px; background:var(--support-terra); color:#fff; }.support-chatbot-link { color:var(--support-terra); text-decoration:underline; word-break:break-word; overflow-wrap:anywhere; }.support-chatbot-message--user .support-chatbot-link { color:#fff; }
.support-chatbot-typing { min-height:20px; margin:-2px 20px 8px; color:#876d5a; font:13px/1.4 system-ui,sans-serif; animation:support-chatbot-message-in .22s ease-out both; }.support-chatbot-typing:not([hidden])::after { display:inline-block; width:1.2em; content:"…"; overflow:hidden; vertical-align:bottom; animation:support-chatbot-ellipsis 1s steps(4,end) infinite; }
.support-chatbot-quick-actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 16px; }.support-chatbot-quick-actions button, .support-chatbot-quick-actions a { display:inline-flex; min-height:34px; align-items:center; border:1px solid var(--support-line); border-radius:999px; padding:7px 11px; background:#fffdf9; color:#684536; font:600 12px/1.2 system-ui,sans-serif; text-decoration:none; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.support-chatbot-form { display:flex; align-items:flex-end; gap:8px; padding:15px 20px 18px; border-top:1px solid var(--support-line); background:rgba(255,250,242,.72); }.support-chatbot-form textarea { min-width:0; min-height:46px; max-height:92px; flex:1; resize:vertical; border:1px solid #cdb494; border-radius:13px; padding:11px 12px; background:#fff; color:var(--support-ink); font:14px/1.35 system-ui,sans-serif; }.support-chatbot-form button[type="submit"] { flex:0 0 auto; min-height:46px; border:0; border-radius:13px; padding:10px 14px; background:var(--support-ink); color:#fff; font:700 13px/1.2 system-ui,sans-serif; cursor:pointer; transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease; }.support-chatbot-privacy { margin:0; padding:0 20px; color:#a5937f; font:11px/1.4 system-ui,sans-serif; }
.support-chatbot-status { min-height:1.3em; margin:0; padding:0 20px 13px; color:var(--support-muted); font:12px/1.4 system-ui,sans-serif; }
.support-chatbot-launcher { display:inline-flex; align-items:center; gap:8px; min-height:48px; border:0; border-radius:999px; padding:12px 18px; background:var(--support-ink); color:#fff; box-shadow:0 10px 28px rgba(52,41,35,.28); font:700 14px/1.2 system-ui,sans-serif; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }.support-chatbot [aria-busy="true"], .support-chatbot-form[aria-busy="true"] { cursor:progress; }.support-chatbot button:disabled { opacity:.48; cursor:not-allowed; transform:none; }.support-chatbot[data-state="error"] .support-chatbot-status { color:#9a382b; }.support-chatbot button:focus-visible, .support-chatbot a:focus-visible, .support-chatbot textarea:focus-visible { outline:3px solid var(--support-gold); outline-offset:3px; }
@media (hover:hover) { .support-chatbot-quick-actions button:hover, .support-chatbot-quick-actions a:hover, .support-chatbot-close:hover, .support-chatbot-reset:hover, .support-chatbot-launcher:hover, .support-chatbot-form button[type="submit"]:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 5px 14px rgba(97,65,43,.14); }.support-chatbot-quick-actions button:hover, .support-chatbot-quick-actions a:hover { border-color:#c99862; }.support-chatbot-launcher:hover { background:#493a32; } }
@keyframes support-chatbot-panel-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } } @keyframes support-chatbot-message-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } @keyframes support-chatbot-ellipsis { from { width:0; } to { width:1.2em; } }
@media (max-width:480px) { .support-chatbot { right:12px; bottom:12px; left:12px; }.support-chatbot-panel { width:100%; max-height:calc(100vh - 82px); max-height:calc(100dvh - 82px); border-radius:22px; }.support-chatbot-header { padding:19px 18px 14px; }.support-chatbot-messages { min-height:150px; max-height:42vh; padding:16px; }.support-chatbot-quick-actions { padding:0 16px 13px; }.support-chatbot-form { padding:13px 16px 16px; }.support-chatbot-status, .support-chatbot-privacy { padding-right:16px; padding-left:16px; } } @media (max-width:320px) { .support-chatbot { right:8px; bottom:8px; left:8px; }.support-chatbot-panel { width:100%; }.support-chatbot-header strong { font-size:23px; }.support-chatbot-form { gap:6px; padding-right:12px; padding-left:12px; }.support-chatbot-form button[type="submit"] { padding-right:10px; padding-left:10px; }.support-chatbot-launcher { padding:11px 15px; } } @media (max-height:520px) { .support-chatbot { bottom:8px; }.support-chatbot-panel { max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); }.support-chatbot-header { padding:6px 20px 6px; }.support-chatbot-header strong { font-size:18px; }.support-chatbot-messages { min-height:56px; max-height:none; flex:1 1 56px; padding:10px 20px; }.support-chatbot-quick-actions { padding:0 20px 6px; }.support-chatbot-form { padding:8px 20px 10px; }.support-chatbot-status { padding:0 20px 6px; }.support-chatbot-privacy { padding:0 20px; font-size:10px; } } @media (prefers-reduced-motion:reduce) { .support-chatbot *, .support-chatbot *::before, .support-chatbot *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }
