/* v0.3 chat uses the existing theme tokens; no green dark-theme overrides. */
@layer components {
.live-chat {min-width:0;overflow:visible;display:flex;flex-direction:column;gap:0;padding:20px;position:relative}
.live-chat[data-chat-slot=destination]{margin-top:24px}
.live-chat[data-chat-slot=thread]{padding:0;border:0;box-shadow:none}
.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.chat-heading>.row{flex-wrap:wrap}.chat-heading h3{font-size:1.08rem;letter-spacing:-.025em}.chat-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--mint-text)}
[data-live-status]{font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:4px}
[data-live-status]::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}[data-state=live]{color:var(--brand)}[data-state=offline],[data-state=reconnecting]{color:var(--warm-text)}
.chat-stream-label{font-size:.76rem;color:var(--muted);display:flex;gap:12px;align-items:center;justify-content:space-between;padding:13px 0}
.chat-unread-total{font-weight:650;color:var(--brand)}
.chat-messages{height:350px;max-height:54dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:auto;padding:8px 6px 8px 0;display:flex;flex-direction:column;gap:18px;scrollbar-width:thin;min-width:0}
.live-chat[data-chat-slot=activity] .chat-messages{height:490px}.live-chat[data-chat-slot=thread] .chat-messages{height:330px}
.chat-message{display:flex;align-items:flex-start;gap:9px;min-width:0;flex-shrink:0}.chat-message>.avatar{width:30px;height:30px;font-size:.75rem;background:var(--surface2);flex-shrink:0}
.chat-bubble{min-width:0;flex:1;background:var(--surface2);border:1px solid var(--line);border-radius:0 14px 14px 14px;padding:11px 13px}
.chat-message.mine .chat-bubble{background:color-mix(in srgb,var(--mint) 48%,var(--surface));border-radius:14px 0 14px 14px}
.chat-message.unread .chat-bubble{border-inline-start:3px solid var(--brand)}
.chat-message-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.76rem}.chat-message-meta strong{font-weight:650}.chat-message-meta time{font-size:.68rem;color:var(--muted);margin-inline-start:auto}
.chat-unread-label{display:inline-flex;align-items:center;white-space:nowrap;font-size:.64rem;font-weight:750;border:1px solid currentColor;color:var(--brand);border-radius:5px;padding:1px 5px;line-height:1.5}
.chat-topic-link{display:flex;gap:4px;align-items:center;font-size:.72rem;color:var(--brand);text-align:start;margin:4px 0 7px;padding:3px 0;max-width:100%;overflow-wrap:anywhere}.chat-topic-link .icon{width:12px;height:12px}
.chat-bubble>p{color:var(--text);font-size:.86rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.chat-mention{background:var(--mint);color:var(--mint-text);padding:0 3px;border-radius:4px;font-weight:600}
.chat-message-actions{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}.chat-message-actions .btn{min-height:34px;font-size:.7rem;padding:3px 7px;opacity:.9}.chat-message-actions .icon{width:13px;height:13px}
.chat-quote{font-size:.76rem;color:var(--muted);border-inline-start:2px solid var(--brand);background:var(--surface);padding:5px 8px;margin:8px 0;display:flex;gap:6px;overflow-wrap:anywhere}
.chat-empty{padding:25px 8px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:8px;margin:auto}.chat-empty>.icon{width:28px;height:28px;color:var(--brand)}.chat-empty p{font-size:.82rem;max-width:270px}
.chat-more{text-align:center}.chat-new-message:not(:empty){display:flex;gap:8px;align-items:center;justify-content:center;font-size:.74rem;padding:7px;background:var(--mint);border-radius:7px;color:var(--mint-text);margin-top:6px}
.chat-compose{border:1px solid var(--line);border-radius:13px;padding:11px;margin-top:16px;background:var(--surface);position:relative}
.chat-routing{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}.chat-to{font-size:.7rem;flex:1 1 100%;overflow-wrap:anywhere}.chat-to strong{color:var(--brand)}.chat-routing>.btn{font-size:.68rem;min-height:30px;padding:2px 7px}.chat-routing>.btn .icon{width:13px;height:13px}
.chat-input-label textarea{border:0;box-shadow:none;padding:8px 4px;background:transparent;min-height:78px;max-height:220px;font-size:.87rem;border-radius:3px}.chat-input-label textarea:focus{outline:2px solid var(--line);outline-offset:2px}
.chat-compose-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px}.chat-compose-footer>.small{font-size:.66rem}.chat-compose-footer>.btn{flex-shrink:0}
.chat-error:not(:empty){font-size:.8rem;color:var(--danger);padding:8px 0 0}.chat-replying{display:flex;align-items:center;gap:7px;font-size:.73rem;padding:8px;background:var(--mint);border-radius:8px;margin-bottom:8px}.chat-replying[hidden]{display:none}.chat-replying small{display:block;max-width:100%;overflow-wrap:anywhere}.chat-replying>.btn{margin-inline-start:auto}
.chat-suggestions{position:absolute;z-index:30;bottom:calc(100% - 46px);inset-inline:8px;max-height:310px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 42px #0003;border-radius:12px;padding:5px}.chat-suggestions[hidden]{display:none}.chat-suggestion{display:block;width:100%;text-align:start;padding:10px;border-radius:8px;min-height:48px}.chat-suggestion[aria-selected=true],.chat-suggestion:hover{background:var(--mint)}.chat-suggestion span{display:flex;gap:7px;align-items:center;font-size:.78rem;overflow-wrap:anywhere}.chat-suggestion .icon{width:15px;height:15px;color:var(--brand)}.chat-suggestion small{display:block;color:var(--muted);font-size:.65rem;margin-top:4px;overflow-wrap:anywhere}
.notification-bell{position:relative}.notification-count{position:absolute;top:-3px;inset-inline-end:-4px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:20px;background:var(--brand);color:var(--surface);font-size:10px;font-weight:800;padding:0 3px;border:2px solid var(--surface)}.notification-count[hidden]{display:none}
.chat-nav-count,.chat-topic-count{margin-inline-start:auto;min-width:18px;border-radius:6px;padding:0 5px;color:var(--mint-text);background:var(--mint);font-size:.68rem;font-weight:700}.chat-topic-count{margin-inline-start:5px}
.notification-toolbar{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;margin-bottom:13px}.notification-inbox{margin-top:18px;display:flex;flex-direction:column;gap:8px}.notification-row{display:flex;gap:10px;border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--surface)}.notification-row>div:nth-child(2){min-width:0;flex:1}.notification-row.unread{background:color-mix(in srgb,var(--mint) 38%,var(--surface));border-inline-start:3px solid var(--brand)}.notification-row-icon{padding-top:2px;color:var(--brand)}.notification-row-icon .icon{width:19px;height:19px}.notification-open{display:flex;flex-direction:column;gap:4px;text-align:start;width:100%}.notification-open strong{font-size:.85rem}.notification-open span{font-size:.76rem;color:var(--muted);overflow-wrap:anywhere}.notification-open small{font-size:.68rem;color:var(--muted)}.notification-row .row{margin-top:8px}.notification-row .btn{font-size:.73rem;min-height:36px}.notification-row>.chat-unread-label{align-self:start}
.notification-alerts{position:fixed;z-index:2000;inset-inline-end:22px;top:86px;width:min(365px,calc(100vw - 30px));display:flex;flex-direction:column;gap:10px;pointer-events:none}.notification-toast{display:flex;gap:10px;background:var(--surface);color:var(--text);box-shadow:0 12px 45px #0005;border:1px solid var(--line);border-inline-start:3px solid var(--brand);border-radius:14px;padding:16px;pointer-events:auto;animation:chat-arrive .22s ease-out}.notification-toast>div{min-width:0;flex:1}.notification-toast strong{font-size:.87rem}.notification-toast p{font-size:.75rem;overflow-wrap:anywhere}.notification-toast-icon{color:var(--brand);padding-top:2px}.notification-toast>[data-chat-action=dismiss-toast]{font-size:0;padding:0;min-width:28px;min-height:28px;align-self:start}.notification-toast>[data-chat-action=dismiss-toast]>.icon{width:16px;height:16px}
.chat-highlight .chat-bubble{outline:2px solid var(--brand);outline-offset:2px;animation:chat-arrive .2s ease-out}
@keyframes chat-arrive{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
}
@layer responsive{
@media(max-width:640px){.live-chat{padding:14px}.chat-heading{gap:10px}.chat-heading>.row:last-child{gap:3px}.chat-heading .btn{font-size:.71rem;padding:5px 6px;min-height:40px}.chat-messages{height:355px;padding-inline-end:0}.chat-message>.avatar{display:none}.chat-bubble{padding:10px}.chat-compose-footer>.small{max-width:55%;font-size:.62rem}.chat-routing>.btn{min-height:40px}.chat-message-actions .btn{min-height:40px;padding:6px}.notification-alerts{top:70px;inset-inline-end:15px}.notification-row{padding:10px;gap:7px}.notification-row>.chat-unread-label{font-size:.57rem}.top-actions{gap:2px}.chat-heading h3{font-size:1rem}.chat-heading .row{gap:6px}.chat-suggestions{max-height:255px}}
@media(prefers-reduced-motion:reduce){.notification-toast,.chat-highlight .chat-bubble{animation:none}}
:root[data-motion=reduced] .notification-toast,:root[data-motion=reduced] .chat-highlight .chat-bubble{animation:none}
@media print{.live-chat,.notification-alerts,.notification-bell{display:none}}
}
@layer responsive {
/* The bell adds another action: wrap the header, never shrink touch targets. */
@media(max-width:480px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;gap:8px;padding-block:10px}.top-actions{margin-inline-start:auto;max-width:100%;flex-wrap:wrap}.notification-alerts{top:135px}}
}

@layer components{.notification-snippet{font-size:.77rem;color:var(--text)!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-block:2px}.chat-message-actions .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}}

/* Veylo floating chat + live typing */
@layer components {
.chat-typing{min-height:24px;padding:3px 8px;color:var(--muted);font-size:.72rem;font-style:italic;opacity:0;transition:opacity .18s ease}
.chat-typing.active{opacity:1}.chat-typing.active::after{content:' …';letter-spacing:2px;animation:typing-pulse 1.1s infinite}
@keyframes typing-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.floating-chat-shell{position:fixed;z-index:1200;right:24px;bottom:24px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.floating-chat-launcher{pointer-events:auto;position:relative;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--brand);color:white;box-shadow:0 16px 42px #0006;border:1px solid color-mix(in srgb,var(--brand) 75%,white);transition:transform .2s ease,box-shadow .2s ease}
.floating-chat-launcher:hover{transform:translateY(-2px);box-shadow:0 20px 48px #0007}.floating-chat-launcher .icon{width:25px;height:25px}
.floating-chat-badge{position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;border-radius:20px;background:var(--danger);color:white;border:2px solid var(--surface);display:grid;place-items:center;font-size:10px;font-weight:800;padding:0 4px}.floating-chat-badge[hidden]{display:none}
.floating-chat-window{pointer-events:auto;width:min(410px,calc(100vw - 32px));height:min(640px,calc(100dvh - 120px));background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 80px #0008;overflow:hidden;transform-origin:bottom right;animation:floating-chat-open .22s cubic-bezier(.2,.8,.2,1)}
.floating-chat-window[hidden]{display:none}.floating-chat-window .live-chat{height:100%;padding:16px}.floating-chat-window .chat-heading{flex:0 0 auto}.floating-chat-window .chat-heading>.row:last-child .btn:first-child{display:none}.floating-chat-window .chat-stream-label{padding-block:9px}.floating-chat-window .chat-messages{height:auto;max-height:none;flex:1;min-height:120px}.floating-chat-window .chat-compose{margin-top:8px}.floating-chat-window .chat-input-label textarea{min-height:56px;max-height:110px}.floating-chat-window .chat-compose-footer>.small{display:none}
@keyframes floating-chat-open{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
}
@layer responsive {
@media(max-width:700px){.floating-chat-shell{right:14px;bottom:82px}.floating-chat-launcher{width:54px;height:54px;border-radius:17px}.floating-chat-window{position:fixed;inset:74px 10px 82px;width:auto;height:auto;border-radius:18px}.floating-chat-window .live-chat{padding:13px}}
@media(prefers-reduced-motion:reduce){.floating-chat-window,.chat-typing.active::after{animation:none}}
:root[data-motion=reduced] .floating-chat-window,:root[data-motion=reduced] .chat-typing.active::after{animation:none}
@media print{.floating-chat-shell{display:none!important}}
}