/* Live chat bubble (FR-SUP-010) in the BitTech design language, shared by the website and the dashboard. */
@layer design {
.chat{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;font-family:inherit}
.chat [x-cloak]{display:none!important}
.chat-panel{width:min(360px,calc(100vw - 32px));height:min(520px,70vh);margin-bottom:12px;display:flex;flex-direction:column;overflow:hidden;background:#fffefa;border:1px solid #dce4d2;border-radius:15px;box-shadow:0 30px 80px #10211733}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#213e30;color:#fff}
.chat-head>span{width:34px;height:34px;border-radius:50%;background:#c7ec8a;color:#213e30;display:grid;place-items:center;flex:none}
.chat-head strong{display:block;font-size:13px}
.chat-head small{display:block;font-size:11px;color:#aec4aa;margin-top:3px}
.chat-head button{margin-left:auto;background:none;border:0;color:#d6e6c9;border-radius:6px;padding:6px;cursor:pointer}
.chat-head button:hover{background:#ffffff1a}
.chat-list{flex:1;overflow-y:auto;padding:16px;background:#f7f7ed;display:flex;flex-direction:column;gap:8px}
.chat-line{max-width:80%;padding:9px 12px;border-radius:12px;font-size:12px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.chat-line.from-staff{align-self:flex-start;background:#fffefa;border:1px solid #e2e6dc;color:#1e2b23;border-bottom-left-radius:4px}
.chat-line.from-customer{align-self:flex-end;background:#213e30;color:#fff;border-bottom-right-radius:4px}
.chat-line.from-system{align-self:center;background:none;color:#8a9b7c;font-size:11px;padding:2px}
.chat-form{border-top:1px solid #e2e6dc;padding:12px;display:grid;gap:8px}
.chat-form input,.chat-form textarea{width:100%;border:1px solid #dfe6d6;background:#fcfcf7;border-radius:8px;padding:9px 11px;font:inherit;font-size:12px;color:#1e2b23}
.chat-form textarea{resize:none;min-height:38px;max-height:110px}
.chat-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chat-send{display:flex;gap:8px;align-items:flex-end}
.chat-send button{width:38px;height:38px;flex:none;border-radius:8px;border:0;background:#203d2d;color:#fff;display:grid;place-items:center;cursor:pointer}
.chat-send button:disabled{opacity:.5}
.chat-error{font-size:11px;color:#b36a4c}
.chat-end{justify-self:start;background:none;border:0;font-size:11px;color:#8a9b7c;cursor:pointer;padding:0}
.chat-bubble{position:relative;width:54px;height:54px;border-radius:50%;border:0;background:#203d2d;color:#c7ec8a;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px #18321c40;transition:transform .15s}
.chat-bubble:hover{transform:scale(1.05)}
.chat-bubble i{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:#e0795a;border:2px solid #fffefa}
.chat svg{width:18px;height:18px}
.chat-bubble svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.chat-bubble{transition:none}.chat-bubble:hover{transform:none}}
@media (max-width:700px){.chat{right:14px;bottom:14px}}
.chat-modes{display:flex;gap:4px;margin:0 14px;padding:4px;border-radius:10px;background:#f1f3ea}.chat-modes button{flex:1;padding:7px 8px;border:0;border-radius:8px;background:transparent;font:inherit;font-size:12.5px;color:#5f6b52;cursor:pointer}.chat-modes button[aria-selected="true"]{background:#fff;color:#1d38c6;font-weight:600;box-shadow:0 1px 2px rgb(0 0 0 / .08)}
}