.nav-chat-action { color: var(--cyan); }
.chat-unread { position: absolute; top: -6px; right: -6px; min-width: 21px; height: 21px; padding: 0 5px; display: grid; place-items: center; border: 2px solid var(--bg-main); border-radius: 99px; background: var(--red); color: #fff; font-size: .64rem; font-weight: 800; }
.nav-chat-action.has-new-message { color:#fff; background:rgba(255,85,105,.16); box-shadow:0 0 0 1px rgba(255,85,105,.32),0 0 18px rgba(255,85,105,.22); animation:chat-attention 1.8s ease-in-out infinite; }
.nav-chat-action.has-new-message::after { content:""; position:absolute; inset:-4px; border:1px solid rgba(255,85,105,.7); border-radius:14px; animation:chat-ripple 1.8s ease-out infinite; pointer-events:none; }
.nav-chat-action.has-new-message > .fa-comments { animation:chat-wiggle 1.8s ease-in-out infinite; }
.chat-panel { position: fixed; top: 78px; right: max(18px, env(safe-area-inset-right)); z-index: 2200; width: min(380px, calc(100vw - 28px)); height: min(590px, calc(100dvh - 100px)); display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(24,25,32,.98); box-shadow: 0 24px 70px rgba(0,0,0,.58); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.chat-panel[hidden] { display: none; }
.chat-empty[hidden], .chat-unread[hidden] { display: none !important; }
.chat-backdrop { position: fixed; inset: 0; z-index: 2100; border: 0; background: rgba(3,5,9,.2); backdrop-filter: blur(1px); }
.chat-backdrop[hidden] { display: none; }
.chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--glass-border); background: rgba(255,255,255,.035); }
.chat-header > div { display: grid; gap: 3px; }
.chat-header strong { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); }
.chat-header strong i { color: var(--cyan); }
.chat-header small { color: var(--text-muted); font-size: var(--fs-micro); }
.chat-header small { display:flex; align-items:center; gap:6px; }
.chat-presence { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 7px currentColor; }
.chat-presence.online { background:var(--green); color:var(--green); }
.chat-presence.offline { background:var(--red); color:var(--red); }
.chat-close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 11px; background: var(--glass-bg); color: var(--text-muted); }
.chat-messages { overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.chat-empty { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--text-muted); text-align: center; font-size: var(--fs-sm); }
.chat-empty i { font-size: 2rem; color: var(--cyan); opacity: .7; }
.chat-message { display: flex; align-items: flex-start; gap: 9px; max-width: 92%; }
.chat-message-own { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--glass-border); border-radius: 10px; object-fit: cover; }
.chat-message-body { min-width: 0; padding: 9px 11px; border: 1px solid var(--glass-border); border-radius: 4px 14px 14px 14px; background: rgba(255,255,255,.055); }
.chat-message-own .chat-message-body { border-color: rgba(255,107,53,.28); border-radius: 14px 4px 14px 14px; background: rgba(255,107,53,.11); }
.chat-message-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.chat-message-meta strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
.chat-message-meta time { flex-shrink: 0; color: var(--text-muted); font-size: .62rem; }
.chat-message-body p { color: #f1f1f3; font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-moderation-actions{display:flex;gap:5px;justify-content:flex-end;margin-top:6px;opacity:.25;transition:opacity .2s}.chat-message:hover .chat-moderation-actions{opacity:1}.chat-moderation-actions button{width:25px;height:25px;display:grid;place-items:center;border:1px solid var(--glass-border);border-radius:7px;background:rgba(255,255,255,.04);color:var(--text-muted);font-size:.65rem}.chat-moderation-actions button:hover{color:var(--red);border-color:rgba(255,85,105,.35)}
.chat-status { min-height: 18px; padding: 0 14px; color: var(--red); font-size: var(--fs-micro); }
.chat-compose { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 8px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-border); }
.chat-compose textarea { width: 100%; max-height: 104px; resize: none; border: 1px solid var(--glass-border); border-radius: 13px; outline: none; padding: 11px 12px; background: rgba(255,255,255,.06); color: #fff; line-height: 1.35; }
.chat-compose textarea:focus { border-color: var(--orange-primary); }
.chat-compose button { border: 0; border-radius: 13px; background: var(--orange-primary); color: #fff; }
.chat-compose button:disabled { opacity: .55; }
.nav-chat-action.chat-offline { opacity:.65; }
.chat-notification-toast { position:fixed; right:18px; top:88px; z-index:2300; width:min(340px,calc(100vw - 28px)); display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid rgba(75,214,255,.35); border-radius:15px; background:rgba(24,25,32,.97); color:#fff; box-shadow:0 18px 45px rgba(0,0,0,.45),0 0 20px rgba(75,214,255,.12); text-align:left; opacity:0; pointer-events:none; transform:translateY(-12px) scale(.97); transition:opacity .22s,transform .22s; }
.chat-notification-toast.show { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.chat-notification-toast > i { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:11px; background:rgba(75,214,255,.12); color:var(--cyan); }
.chat-notification-toast span { min-width:0; display:grid; gap:2px; }
.chat-notification-toast strong,.chat-notification-toast small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-notification-toast strong { font-size:var(--fs-sm); }
.chat-notification-toast small { color:var(--text-muted); font-size:var(--fs-xs); }
@keyframes chat-attention { 0%,100% { transform:translateY(0); } 45% { transform:translateY(-2px); } }
@keyframes chat-ripple { 0% { opacity:.8; transform:scale(.9); } 70%,100% { opacity:0; transform:scale(1.18); } }
@keyframes chat-wiggle { 0%,35%,100% { transform:rotate(0); } 42% { transform:rotate(-12deg); } 50% { transform:rotate(10deg); } 58% { transform:rotate(-7deg); } 66% { transform:rotate(0); } }
@media (max-width: 600px) {
    body.chat-open { overflow: hidden; }
    .chat-panel { position: fixed; inset: auto 0 0 0; width: 100%; height: min(78dvh,680px); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .chat-backdrop { background: rgba(3,5,9,.55); backdrop-filter: blur(3px); }
    .chat-messages { padding: 12px; }
    .chat-message { max-width: 96%; }
    .chat-notification-toast { top:76px; right:12px; width:calc(100vw - 24px); }
}
@media (prefers-reduced-motion:reduce) { .nav-chat-action.has-new-message,.nav-chat-action.has-new-message::after,.nav-chat-action.has-new-message > .fa-comments { animation:none!important; } }
