/* Chat button + panel (home page). The form inside uses form.css. */

.chat-fab { position:fixed; right:20px; bottom:20px; z-index:60; width:60px; height:60px; border:0; border-radius:50%; cursor:pointer; color:#fff; display:grid; place-items:center;
    background:linear-gradient(135deg, #f0283a, #c4101f); box-shadow:0 12px 30px rgba(227,6,19,.4); transition:transform .2s ease, box-shadow .2s ease; }
.chat-fab:hover { transform:scale(1.06); box-shadow:0 16px 36px rgba(227,6,19,.5); }
.chat-fab:focus-visible { outline:3px solid #101423; outline-offset:3px; }
.chat-fab::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(227,6,19,.55); animation:chatPulse 2.6s ease-out infinite; pointer-events:none; }
.chat-fab[aria-expanded="true"]::after { animation:none; opacity:0; }
@keyframes chatPulse { 0% { transform:scale(1); opacity:.8; } 70%, 100% { transform:scale(1.45); opacity:0; } }
.chat-fab .i-x { display:none; }
.chat-fab[aria-expanded="true"] .i-chat { display:none; }
.chat-fab[aria-expanded="true"] .i-x { display:block; }

/* The round "back to top" button sits just above the chat button */
.has-chat .to-top { right:26px; bottom:92px; }

.chat-panel { position:fixed; right:20px; bottom:92px; z-index:61; width:380px; max-width:calc(100vw - 24px); max-height:calc(100vh - 112px); max-height:calc(100dvh - 112px);
    display:flex; flex-direction:column; background:#f6f6fb; border-radius:22px; overflow:hidden; box-shadow:0 24px 70px rgba(16,20,35,.38); transform-origin:bottom right; animation:chatIn .22s ease; }
.chat-panel[hidden] { display:none; }
@keyframes chatIn { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }

.chat-head { flex:none; display:flex; align-items:center; gap:12px; padding:16px 18px; color:#fff; background:linear-gradient(135deg, #101423, #1c2244); border-top:3px solid var(--brand); }
.chat-ico { flex:none; width:44px; height:44px; border-radius:50%; background:var(--brand); display:grid; place-items:center; }
.chat-title { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.chat-title strong { font-family:'Plus Jakarta Sans', var(--h-font); font-weight:600; font-size:1rem; }
.chat-title span { display:flex; align-items:center; gap:7px; font-size:.78rem; color:#b9bdd3; }
.chat-title i { width:8px; height:8px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.25); }
.chat-x { flex:none; width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .15s; }
.chat-x:hover { background:rgba(255,255,255,.24); }

.chat-body { padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.chat-bubble { background:#fff; color:#2b2e4a; border-radius:16px 16px 16px 4px; padding:14px 16px; margin:0 0 14px; font-size:.95rem; line-height:1.55; box-shadow:0 2px 10px rgba(16,20,35,.06); }

/* Inside the panel the boxes are rounder and the button has a gradient, like the reference */
.chat-panel input, .chat-panel select, .chat-panel textarea { border-radius:14px; border-color:#e1e2ee; background-color:#fff; }
.chat-panel .btn { border-radius:14px; background:linear-gradient(135deg, #f0283a, #c4101f); letter-spacing:.03em; text-transform:uppercase; font-size:.92rem; padding:14px; }
.chat-panel .btn:hover { filter:brightness(.94); }
.chat-panel .note { color:#7b7e99; }
.chat-panel .em-ok .ok { margin-bottom:14px; }

@media (max-width:480px) {
    .chat-panel { right:12px; left:12px; width:auto; bottom:84px; max-height:calc(100dvh - 100px); }
    .chat-fab { right:14px; bottom:14px; width:56px; height:56px; }
    .has-chat .to-top { right:19px; bottom:80px; }
}
@media (prefers-reduced-motion: reduce) { .chat-fab::after { animation:none; opacity:0; } .chat-panel { animation:none; } }