/* Support chat in the app style (chat.js, after app.css): rounded panel, a green "online" dot, round bubbles, quick-reply
   chips, a pill message box with a round send button; full screen on phones. */
.chat-panel { border-radius: 26px; background: var(--bg); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8); }
.chat-head { gap: 12px; padding: 14px 16px; background: var(--bg); }
.chat-head .avatar { position: relative; width: 44px; height: 44px; border-radius: 14px; background: var(--panel-2); color: var(--accent); font: 800 15px var(--font); }
.chat-head strong { font-size: 1.05rem; font-weight: 800; }
.chat-status.online { color: var(--ok); }
.chat-status.online i { background: var(--ok); box-shadow: 0 0 0 3px rgb(74 222 128 / .2); }
.chat-close { width: 40px; height: 40px; border-radius: 50%; background: var(--panel); }
.chat-msgs { gap: 10px; padding: 16px; }
.chat-msg { max-width: 84%; padding: 10px 14px; border-radius: 20px; font-size: .95rem; }
.chat-msg.me { border-end-end-radius: 6px; }
.chat-msg.them { border: 0; background: var(--panel); border-end-start-radius: 6px; }
.chat-note { align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--panel); font-size: .8rem; }
.chat-quick { display: flex; gap: 8px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-chip { flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.chat-chip:hover { border-color: rgb(var(--accent-rgb) / .5); color: var(--accent); }
.chat-form { align-items: flex-end; gap: 8px; padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px)); border-top: 0; }
.chat-form textarea { height: 48px; padding: 13px 16px; border-radius: 24px; background: var(--panel); border-color: transparent; }
.chat-form .chat-tool { width: 44px; height: 48px; border: 0; border-radius: 50%; background: var(--panel); }
.chat-form > .btn-primary { width: 48px; min-height: 48px; border-radius: 50%; }
@media (max-width: 600px) {
  :root #chat-root .chat-panel.chat-panel { inset: 0; width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; z-index: 120; }
  .chat-head { padding-top: max(14px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); }
}