/* css/10-livechat.css — floating support chat widget */
#liveChat{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
#liveChat{--chat-blue:#3b82f6;--chat-blue-2:#2563eb}
.chat-fab{width:54px;height:54px;border-radius:50%;flex:none;align-self:flex-end;
  background:linear-gradient(180deg,var(--chat-blue),var(--chat-blue-2));color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,99,235,.35);cursor:pointer;transition:.15s}
.chat-fab:hover{filter:brightness(1.08);transform:translateY(-1px)}

.chat-box{width:344px;max-width:calc(100vw - 40px);height:452px;max-height:calc(100vh - 130px);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 44px rgba(0,0,0,.45);
  display:flex;flex-direction:column;overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;
  background:var(--panel-2);border-bottom:1px solid var(--line)}
.chat-id{display:flex;align-items:center;gap:10px}
.chat-id b{font-size:13.5px;display:block}
.chat-id span{font-size:11px;color:var(--txt-3);display:block}
.chat-status{width:9px;height:9px;border-radius:50%;background:var(--pos);flex:none;box-shadow:0 0 0 3px rgba(34,192,122,.2)}
.chat-close{color:var(--txt-3);display:flex}.chat-close:hover{color:var(--txt)}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:82%;padding:9px 12px;border-radius:13px;font-size:12.5px;line-height:1.45}
.chat-msg.agent{background:var(--panel-3);color:var(--txt);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.me{background:var(--chat-blue-2);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;background:var(--input);border:1px solid var(--line);border-radius:20px;padding:9px 14px;color:var(--txt);font-size:13px}
.chat-input input:focus{outline:none;border-color:var(--chat-blue)}
.chat-input button{width:38px;height:38px;border-radius:50%;background:var(--chat-blue-2);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center}
.chat-input button:hover{filter:brightness(1.1)}
@media(max-width:560px){ .chat-box{width:calc(100vw - 32px)} #liveChat{right:14px;bottom:14px} }