/* ═══════════════════════════════════
   CHAT PAGE — Evo
═══════════════════════════════════ */
#page-chat{display:flex;flex-direction:column}

.chat-area{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:rgba(122,226,58,.18) transparent}
.chat-area::-webkit-scrollbar{width:3px}
.chat-area::-webkit-scrollbar-thumb{background:rgba(122,226,58,.18);border-radius:2px}

/* Messages */
.msg{max-width:86%;padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.55;animation:fadeU .28s cubic-bezier(.34,1.56,.64,1) both}
.msg.bot{background:var(--card);border:1px solid rgba(122,226,58,.1);border-radius:4px 14px 14px 14px;align-self:flex-start;box-shadow:0 2px 10px var(--shadow)}
.msg.bot strong{color:var(--g)}
.msg.user{background:var(--g);border-radius:14px 4px 14px 14px;align-self:flex-end;color:var(--dark);font-weight:500}

/* Labels */
.mlbl{font-size:10px;color:var(--dim);margin-bottom:2px;display:flex;align-items:center;gap:5px}
.mlbl.u{justify-content:flex-end}
.mlbl-ava{width:20px;height:20px;object-fit:contain;display:inline-block;vertical-align:middle}

/* Typing indicator */
.typing-dot{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--card);border:1px solid rgba(122,226,58,.1);border-radius:4px 14px 14px 14px;animation:fadeU .28s ease both}
.typing-dot img{width:32px;height:32px;object-fit:contain;animation:bob 1s ease-in-out infinite}
.typing-dot span{width:6px;height:6px;background:var(--g);border-radius:50%;animation:td 1.2s infinite}
.typing-dot span:nth-child(2){animation-delay:.2s}
.typing-dot span:nth-child(3){animation-delay:.4s}

/* Inline chips (quick replies) */
.inline-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 14px;transition:opacity .25s;justify-content:flex-end}
.chat-bottom{display:none}
.chat-qr{display:flex;gap:6px;padding:0 14px 10px;flex-wrap:wrap;flex-shrink:0}
.chat-qr::-webkit-scrollbar{display:none}

/* Chip buttons */
.qrb{font-size:11.5px;padding:7px 12px;background:var(--card);border:1.5px solid rgba(122,226,58,.2);border-radius:20px;color:var(--g);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .2s;white-space:nowrap;flex-shrink:0;text-decoration:none;display:inline-block}
.qrb:active{background:rgba(122,226,58,.1)}
.qrb-wa{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.5);color:#25d366}
.qrb-back{opacity:.5;font-size:11px}

/* Handoff bar */
.handoff-bar{padding:9px 16px;background:rgba(37,211,102,.04);border-top:1px solid rgba(37,211,102,.12);display:flex;align-items:center;gap:10px;flex-shrink:0}
.handoff-txt{flex:1;font-size:11.5px;color:var(--dim)}

/* Online indicator */
.ai-dot{width:7px;height:7px;background:var(--g);border-radius:50%;display:inline-block;margin-right:5px;animation:bk 1.8s infinite;vertical-align:middle}