*{box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);color:#2b2b2b;background:#fff;-webkit-font-smoothing:antialiased}
.chat{display:flex;flex-direction:column;height:100vh;height:100dvh}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--menu-bar);color:#fff}
.chat-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.chat-title{font-weight:500;font-size:15px;line-height:1.2}
.chat-sub{font-size:12px;color:#f2c9c9;display:flex;align-items:center;gap:6px}
.chat-sub i{width:7px;height:7px;border-radius:50%;background:#5bd68a;display:inline-block}
.chat-close{margin-left:auto;background:none;border:0;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.chat-close:hover{background:rgba(255,255,255,.14)}
.chat-body{flex:1;overflow-y:auto;padding:16px;background:#f6f6f6;display:flex;flex-direction:column;gap:12px}
.msg{max-width:86%;padding:10px 14px;border-radius:14px;font-size:14.5px;line-height:1.55;word-wrap:break-word}
.msg p{margin:0 0 .5em}.msg p:last-child{margin:0}
.msg ul,.msg ol{margin:.3em 0 .5em;padding-left:1.2em}.msg li{margin:.15em 0}
.msg a{color:var(--primary);font-weight:500}
.msg strong{color:var(--primary)}
.msg.bot{background:#fff;border:1px solid #e6e6e6;border-bottom-left-radius:4px;align-self:flex-start}
.msg.me{background:var(--primary);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.msg.me a,.msg.me strong{color:#fff}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing i{width:7px;height:7px;border-radius:50%;background:#b9b9c2;animation:b 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.sugg{display:flex;flex-wrap:wrap;gap:8px}
.sugg button{font:inherit;font-size:13px;border:1px solid var(--accent);color:var(--accent);background:#fff;border-radius:999px;padding:7px 12px;cursor:pointer;text-align:left}
.sugg button:hover{background:var(--accent);color:#fff}
.chat-foot{border-top:1px solid #e6e6e6;padding:10px 12px 8px;background:#fff}
.chat-form{display:flex;gap:8px;align-items:flex-end}
.chat-form textarea{flex:1;resize:none;font:inherit;font-size:14.5px;border:1px solid #d9d9de;border-radius:12px;padding:10px 12px;max-height:120px;min-height:44px;outline:none}
.chat-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.chat-send{width:44px;height:44px;border-radius:12px;border:0;background:var(--primary);color:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.chat-send:disabled{opacity:.45;cursor:default}
.chat-send:not(:disabled):hover{background:var(--accent)}
.chat-note{font-size:11px;color:#77777f;margin:6px 2px 0;line-height:1.4}
.chat-note a{color:#55555d}
.chat-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.chat-actions a{font-size:12.5px;color:var(--primary);text-decoration:none;border:1px solid #d9d9de;border-radius:999px;padding:5px 10px;background:#fff}
.chat-actions a:hover{border-color:var(--primary)}
.chat-actions a.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.chat-actions a.primary:hover{background:var(--accent);border-color:var(--accent)}