/* Messaging design layer: semantic colors, stable dimensions and readable type. */
.connection-dialog{width:min(640px,94vw);max-width:96vw;max-height:94dvh;overflow:auto;padding:26px;transition:width .18s ease}.connection-dialog.connection-preview{width:min(1120px,96vw)}
.connection-progress{border:1px solid var(--border);border-radius:14px;background:var(--soft);padding:18px;margin-bottom:22px}.connection-progress-heading{display:flex;align-items:flex-start;gap:13px}.connection-progress-heading>div{min-width:0}.connection-progress strong{font-size:15px}.connection-progress p{font-size:12px;line-height:1.6;color:var(--muted);margin:6px 0 0;min-height:38px}.connection-progress small{display:block;min-height:18px;font-size:11px;margin-top:9px;color:var(--muted)}
.connection-spinner{width:23px;height:23px;flex:0 0 23px;border:3px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:connection-turn 1s linear infinite}.connection-progress:not([aria-busy=true]) .connection-spinner{animation:none;border:0;background:var(--accent-soft);color:var(--purple);display:grid;place-items:center}.connection-progress:not([aria-busy=true]) .connection-spinner:after{content:'i';font-weight:700}.connection-progress[data-phase=ready] .connection-spinner:after{content:'✓'}.connection-progress[data-phase=ready] .connection-spinner{background:#18ab7c22;color:var(--chat-teal)}.connection-progress[data-phase=error]{border-color:#dc8863}.connection-progress[data-phase=attention]{border-color:#c9a144}
.connection-steps{padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:17px 0 0}.connection-steps li{font-size:10px;color:var(--muted);border-top:3px solid var(--border);padding-top:8px}.connection-steps li[data-state=current]{color:var(--purple);border-color:var(--purple);font-weight:700}.connection-steps li[data-state=done]{border-color:var(--chat-teal);color:var(--chat-teal)}
.connection-dialog .connection-tools{margin:16px 0;gap:8px}.connection-dialog .connection-tools .danger{margin:0}.connection-ready{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:15px;border:1px solid #18ab7c55;background:#18ab7c12;border-radius:12px;color:var(--chat-teal);font-size:12px}
.connection-preview #connection-body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:0 24px;align-items:start}.connection-preview #connection-form{grid-column:1;grid-row:1}.connection-preview .connection-tools{grid-column:1;grid-row:2}.connection-preview #connection-validation{grid-column:2;grid-row:1 / span 3;min-width:0}
.connection-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.connection-preview-heading strong{font-size:14px}.connection-preview-heading small{display:block;font-size:10px}.connection-preview-heading button{font-size:11px}.connection-frame{background:var(--soft);border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:52dvh;min-height:180px;position:relative}.connection-frame #connection-screen{width:100%;height:auto;border:0;display:block}.connection-frame #connection-screen:not([src]){display:none}.connection-frame #connection-screen[src]+span{display:none}.connection-frame-placeholder{display:block;padding:65px 24px;text-align:center;font-size:12px;color:var(--muted)}.connection-input-tools{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.connection-input-tools input{flex:1;min-width:180px;margin:0}.connection-input-tools button{font-size:11px}.connection-dialog #connection-form>.primary{width:100%}
@keyframes connection-turn{to{transform:rotate(360deg)}}
.connection-network-feedback{font-size:12px;color:var(--muted);padding:12px;background:var(--soft);border-radius:8px;grid-column:1}.connection-preview .connection-network-feedback{grid-row:4}
.connection-lock-hint{border-top:1px solid var(--border);padding-top:10px;margin-top:12px!important;font-size:12px!important;color:var(--purple)!important}.connection-progress[data-phase=stalled]{border-color:#c9a144}.connection-progress[data-phase=stalled] .connection-spinner:after{content:'!'}#connection-form:has(button:disabled){opacity:.8}#connection-screen[aria-disabled=true]{cursor:wait}
.connection-frame #connection-screen{width:auto;max-width:100%;max-height:48dvh;margin:auto}.connection-steps li[data-state=done]{border-color:var(--chat-teal,#15886b);color:var(--chat-teal,#15886b)}.connection-ready,.connection-progress[data-phase=ready] .connection-spinner{color:var(--chat-teal,#15886b)}
@media(max-width:760px){.connection-dialog{padding:18px}.connection-preview #connection-body{display:block}.connection-preview #connection-validation{margin-top:20px}.connection-steps{gap:4px}.connection-progress{padding:14px}.connection-frame{max-height:48dvh}.connection-ready{align-items:flex-start}.connection-preview-heading{flex-wrap:wrap}}
.friends-entry{margin:0 14px 10px;padding:8px 10px;background:var(--accent-soft);color:var(--purple);border-color:transparent;font-size:11px;text-align:left}
.friends-dialog{width:min(540px,94vw);max-height:85dvh;background:var(--surface);color:var(--ink)}.friends-dialog .eyebrow{margin-bottom:5px}.friends-dialog .muted{font-size:13px}.friends-search{display:flex;gap:8px}.friends-search input{min-width:0;margin:0;flex:1}.friends-search button{flex-shrink:0;font-size:12px}.friends-tools{display:flex;gap:8px;margin:14px 0}.friends-tools button{font-size:11px}.friends-dialog [data-status]{font-size:12px;color:var(--muted);min-height:20px}.friends-rows{max-height:45dvh;overflow:auto}.friend-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--border)}.friend-row>div{flex:1;min-width:0}.friend-row strong,.friend-row small{display:block;overflow-wrap:anywhere}.friend-row strong{font-size:14px}.friend-row small{font-size:11px}.friend-row button{font-size:12px}.friend-row .avatar{background:var(--accent-soft);color:var(--purple)}
.message.media>.message-text:empty{display:none}
.chat-media[data-kind=audio]{min-height:54px;min-width:180px;margin-top:6px;width:100%;background:transparent;animation:none}
.chat-media[data-kind=audio] audio,.chat-media[data-kind=audio] video{width:280px;max-width:100%;height:54px;display:block}
.chat-media[data-kind=audio] .media-loading{padding:14px;font-size:12px}
.conversation-signals{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 22px;font-size:11px;height:33px;min-height:33px;flex-shrink:0;box-sizing:border-box;overflow:hidden;color:var(--muted);background:var(--soft)}
.conversation-signals>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.typing-indicator span{overflow:hidden;text-overflow:ellipsis}.typing-indicator i{flex-shrink:0}
.conversation-signals[hidden],.typing-indicator[hidden],.delivery-indicator[hidden]{display:none}
.typing-indicator{display:flex;gap:4px;align-items:center}.typing-indicator span{margin-left:6px}.typing-indicator i{width:5px;height:5px;border-radius:50%;background:var(--purple);animation:typing-pulse 1s infinite}.typing-indicator i:nth-child(2){animation-delay:.15s}.typing-indicator i:nth-child(3){animation-delay:.3s}.delivery-indicator{margin-left:auto}.delivery-indicator[data-state=read]{color:var(--chat-teal)}
@keyframes typing-pulse{50%{opacity:.35;transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.typing-indicator i{animation:none}}
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.chat-workspace{--chat-blue:#2465cd;--chat-pink:#b91c58;--chat-teal:#087b67;--bubble-out:#eee7ff;--bubble-border:#d5c2fb}
.chat-workspace .messenger{border:1px solid var(--border);border-radius:18px;box-shadow:0 8px 32px #28204409;overflow:hidden}
.messenger-list{background:var(--surface);min-height:0}
.inbox-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 16px;font-size:18px;font-weight:750;letter-spacing:-.4px}
.inbox-count{font-size:11px;letter-spacing:0;padding:4px 8px;background:var(--accent-soft);color:var(--purple);border-radius:8px}
.account-caption{margin:0 18px;color:var(--muted);font-size:9px;letter-spacing:1.3px;font-weight:700}
.messenger-list #messages-account{margin:7px 14px 12px;width:calc(100% - 28px);font-size:13px;font-weight:600;background:var(--soft);border-radius:10px;padding:11px}
.messenger-list #messages-search{margin:0 14px 12px;width:calc(100% - 28px);font-size:12px;background:var(--surface);border-radius:10px}
.conversation-filters{display:flex;gap:5px;padding:0 14px 12px}
.conversation-filters button{flex:1;white-space:nowrap;font-size:11px;padding:8px 5px;border:0;background:var(--soft);color:var(--muted);border-radius:8px;box-shadow:none}
.conversation-filters button[aria-pressed=true]{background:var(--purple);color:white;font-weight:700}
.conversation-filters button span{font-size:10px;margin-left:2px;opacity:.85}
.connection-details{margin:0 14px 12px;border:1px solid var(--border);border-radius:9px;background:var(--soft);font-size:10px;flex-shrink:0}
.connection-details summary{padding:9px 10px;cursor:pointer;color:var(--muted);line-height:1.5}
.connection-details[data-state=ready] summary{color:var(--chat-teal)}
.connection-details[data-state=attention] summary{color:#a54c19}
.connection-details .messenger-status{margin:0;padding:0 10px 10px;font-size:10px;line-height:1.7;overflow-wrap:anywhere}
.messenger-rows{padding:3px 8px 12px;scrollbar-width:thin}
.messenger-row{gap:11px;padding:13px 10px;margin:3px 0;border:1px solid transparent;border-radius:11px;width:100%;min-height:78px;transition:background .12s ease,border-color .12s ease}
.messenger-row>div{min-width:0}.messenger-row strong{font-size:13px;font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.messenger-row small{font-size:11px;line-height:1.5;margin-top:3px}
.messenger-row .avatar{width:38px;height:38px;min-width:38px;border-radius:13px;background:#e8ddff;color:#6134b8;font-size:12px;font-weight:750}
.messenger-row:nth-child(3n+2) .avatar{background:#d9f2ec;color:#116b59}.messenger-row:nth-child(3n) .avatar{background:#ffe8d4;color:#994516}
.messenger-row:hover{background:var(--soft);border-color:var(--border)}
.messenger-row.current{background:var(--accent-soft);border-color:#b9a0ef;box-shadow:inset 3px 0 var(--purple)}
.messenger-row.unread-message{background:#eaf2ff;border-left:3px solid var(--chat-blue)}
.messenger-row.unread-snap{background:#ffebf2;border-left:3px solid var(--chat-pink)}
.messenger-row.unread-message.current{border-color:var(--chat-blue);box-shadow:none}.messenger-row.unread-snap.current{border-color:var(--chat-pink);box-shadow:none}
.unread-badge{font-size:11px;line-height:1.5;margin-top:3px;color:var(--chat-blue)}.unread-snap .unread-badge{color:var(--chat-pink)}
.messenger-row .chips{gap:4px;margin-top:7px}.messenger-row .chip{font-size:10px;padding:3px 7px;border-radius:5px;line-height:1.3}
.messenger-head{border-top:0;min-height:78px;padding:14px 22px;gap:12px;background:var(--surface)}
.messenger-head .thread-avatar{width:42px;height:42px;min-width:42px;background:var(--accent-soft);color:var(--purple);font-size:14px;border-radius:14px}
.messenger-head strong{font-size:16px;line-height:1.4;overflow-wrap:anywhere}.messenger-head small{font-size:11px;margin-top:4px}
.messenger-head button{font-size:11px;padding:9px 11px;border-radius:9px;background:var(--soft)}
.messenger-head #messages-profile{color:var(--purple);background:var(--accent-soft);border-color:transparent}
.messenger-feed{padding:26px clamp(16px,2.2vw,38px);gap:16px;background:linear-gradient(155deg,color-mix(in srgb,var(--accent-soft) 26%,var(--soft)),var(--soft) 65%);scrollbar-width:thin;scrollbar-color:var(--border) transparent;overscroll-behavior:contain}
.messenger-feed .message{min-width:0;max-width:min(88%,620px);border-radius:17px;padding:12px 15px;border:1px solid var(--border);box-shadow:0 2px 4px #20283d04;flex-shrink:0;overflow-wrap:anywhere}
.messenger-feed .message.incoming{border-bottom-left-radius:5px}
.messenger-feed .message.outgoing{background:var(--bubble-out);border-color:var(--bubble-border);border-bottom-right-radius:5px}
.message .message-meta{font-size:11px;line-height:1.5;gap:20px;margin-bottom:6px;color:var(--muted)}
.message .message-meta span:first-child{font-weight:650;color:var(--ink)}
.message .message-text{font-size:15px;line-height:1.65;letter-spacing:.05px;margin:0;white-space:pre-wrap;color:var(--ink)}
.message .message-actions{gap:5px;margin-top:10px;flex-wrap:wrap;padding-top:7px;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.message .message-actions button{font-size:10px;line-height:1.4;min-height:26px;height:auto;padding:4px 7px;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:6px;box-shadow:none}
.message .message-actions button:hover{background:var(--surface);color:var(--purple);border-color:var(--border)}
.message.saved{box-shadow:inset 3px 0 var(--purple)}.message>small{display:block;font-size:10px;margin-top:7px;color:var(--purple)}
.message blockquote{margin:2px 0 10px;padding:9px 12px;font-size:12px;line-height:1.5;background:color-mix(in srgb,var(--surface) 65%,transparent);border-left:3px solid var(--purple);border-radius:0 7px 7px 0;color:var(--muted)}
.messenger-feed .message.date,.messenger-feed .message.event{align-self:center;border:0;box-shadow:none;background:transparent;padding:5px 12px;max-width:100%}
.message.date .message-text,.message.event .message-text{font-size:11px;color:var(--muted);text-align:center}.message.date{border-radius:20px!important}.message.date .message-meta:empty{display:none}
.messenger-feed .message.snap{background:#fff0f5;border-color:#f3b7cc}.message.snap .message-text{color:var(--chat-pink);font-weight:650;font-size:14px}
.message .message-actions .open-snap-button{background:var(--chat-pink);color:white;padding:8px 12px}
.messenger-compose{padding:14px 20px 10px;background:var(--surface)}
.compose-row{gap:10px;align-items:flex-end;padding:7px;border:1px solid var(--border);border-radius:13px;background:var(--soft);transition:border-color .12s ease,box-shadow .12s ease}
.compose-row:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px color-mix(in srgb,var(--purple) 12%,transparent)}
.compose-row textarea{font-size:14px;line-height:1.6;min-height:52px;max-height:150px;padding:13px 4px;border:0!important;box-shadow:none!important;outline:none;background:transparent;resize:none;flex:1;min-width:0;margin:0}
.compose-row button{height:42px;min-width:70px;font-size:12px;border-radius:9px;margin-bottom:4px}
.compose-row #messages-photo{background:var(--surface);color:var(--muted);padding:8px 10px}.compose-row #messages-photo span{font-size:17px;vertical-align:-1px}
.compose-row .primary{background:#6940df;border-color:#6940df;color:white;padding:9px 17px}
.compose-hint{display:flex;justify-content:space-between;gap:12px;font-size:10px;line-height:1.5;color:var(--muted);padding:8px 3px 0}.compose-count{white-space:nowrap}
.messenger-feedback{font-size:11px;line-height:1.6;margin:8px 0 0}.reply-preview{border-left:3px solid var(--purple);font-size:12px;border-radius:8px;padding:10px 12px;margin-bottom:10px}
.fan-panel{padding:22px 20px;background:var(--surface);scrollbar-width:thin}
.fan-heading{padding-bottom:18px;border-bottom:1px solid var(--border)}.fan-heading h2{font-size:17px}.fan-heading .eyebrow{color:var(--purple)}
.fan-identity{padding:14px 12px;margin:18px 0 10px;background:var(--soft);border:1px solid var(--border);border-radius:12px}.fan-identity .avatar{background:var(--accent-soft);color:var(--purple);border-radius:12px}.fan-identity strong{font-size:14px}.fan-identity small{font-size:11px;margin-top:3px}
.fan-form label,.fan-tags legend{font-size:12px;font-weight:650}.fan-form input,.fan-form select,.fan-form textarea{font-size:13px;border-radius:9px;padding:11px;line-height:1.55;background:var(--soft);font-weight:400}.fan-form textarea{min-height:165px}.fan-tags{padding:18px 0;margin:18px 0 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.fan-tag span{font-size:11px;padding:7px 9px}.fan-shared{font-size:10px}
.chat-workspace button:focus-visible,.chat-workspace summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
[data-theme=dark] .chat-workspace{--chat-blue:#9bc4ff;--chat-pink:#ff9cbe;--chat-teal:#8ce0c3;--bubble-out:#3c305a;--bubble-border:#654c8b}
[data-theme=dark] .conversation-filters button[aria-pressed=true]{background:#7452d8;color:#fff}
[data-theme=dark] .connection-details[data-state=attention] summary{color:#ffc591}
[data-theme=dark] .messenger-row .avatar{background:#3b2e54;color:#dcc5ff}[data-theme=dark] .messenger-row:nth-child(3n+2) .avatar{background:#1f403d;color:#9ce8d2}[data-theme=dark] .messenger-row:nth-child(3n) .avatar{background:#483729;color:#ffd1a3}
[data-theme=dark] .messenger-row.current{background:#342b4e;border-color:#8360b8}[data-theme=dark] .messenger-row.unread-message{background:#21344f}[data-theme=dark] .messenger-row.unread-snap{background:#412637}
[data-theme=dark] .messenger-feed .message.snap{background:#412637;border-color:#844961}[data-theme=dark] .message .message-actions .open-snap-button{background:#b52b65;color:white}
@media(min-width:1600px){.chat-workspace .messenger{grid-template-columns:280px minmax(0,1fr) 300px}}
@media(max-width:1250px){.inbox-heading{font-size:16px;padding:17px 14px}.conversation-filters{padding-left:9px;padding-right:9px;gap:3px}.messenger-head{padding:12px}.messenger-head button{font-size:10px;padding:8px}.messenger-head .thread-avatar{display:none}.fan-panel{padding:18px 15px}.messenger-compose{padding:12px}.compose-hint{font-size:9px}.compose-count{display:none}}
@media(max-width:1000px){.fan-panel{top:78px}}
@media(max-width:650px){.chat-workspace .messenger{border-radius:12px}.inbox-heading{padding:12px 14px 8px}.account-caption{display:none}.messenger-list{max-height:310px}.messenger-list #messages-account{margin-bottom:8px;padding:8px}.messenger-list #messages-search{padding:8px;margin-bottom:8px}.conversation-filters{padding-bottom:8px}.connection-details{margin-bottom:6px}.connection-details:not([open]) summary{padding:5px 9px}.messenger-rows{min-height:80px}.messenger-row{min-height:65px;padding:8px}.messenger-head>div{flex-basis:100%}.messenger-head{gap:7px;min-height:90px}.messenger-head strong{font-size:15px}.messenger-feed{padding:16px 10px;gap:12px}.messenger-feed .message{max-width:94%;padding:10px 12px}.message .message-text{font-size:14px}.compose-row{flex-wrap:wrap;gap:5px}.compose-row textarea{order:-1;flex-basis:100%;min-width:100%;padding:7px}.compose-row button{height:36px;margin:0;min-width:64px}.compose-row .primary{margin-left:auto}.compose-hint{display:none}.fan-panel{top:60px}.message .message-actions button{min-height:30px}}
@media(prefers-reduced-motion:reduce){.messenger-row,.compose-row{transition:none}}

/* Compact conversation layout: content bubble, then team metadata/actions. */
.messenger-feed{gap:13px;padding:20px 24px;background:var(--soft)}
.messenger-feed .message{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:fit-content;max-width:min(82%,560px);padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important}
.messenger-feed .message.outgoing{align-items:flex-end}
.message-body{max-width:100%;padding:7px 11px;border:1px solid var(--border);border-radius:11px 11px 11px 3px;background:var(--surface);box-shadow:0 1px 2px #00000005}
.outgoing .message-body{background:var(--bubble-out);border-color:var(--bubble-border);border-radius:11px 11px 3px 11px}
.message.saved .message-body{border-left:2px solid var(--purple)}
.message .message-text{font-size:13px;line-height:1.5;letter-spacing:0}
.message .message-meta{order:2;margin:0;gap:8px;font-size:10px;line-height:1.5;display:flex;align-items:center;padding:0 2px;color:var(--muted)}
.message .message-meta .message-sender{font-weight:500;color:var(--muted)}
.sender-role{font-size:9px!important;font-weight:600;padding:1px 4px;border-radius:4px;background:var(--accent-soft);color:var(--purple)!important;margin-left:3px}
.message .message-actions{order:3;display:flex;gap:2px;padding:0;margin:0;border:0;min-height:24px}
.message .message-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:24px;width:27px;height:24px;padding:3px;border-radius:5px;color:var(--muted);opacity:.78}
.message .message-actions button:hover,.message .message-actions button:focus-visible{opacity:1;background:var(--accent-soft);color:var(--purple);border-color:transparent}
.message .message-actions button[aria-pressed=true]{color:var(--purple);opacity:1}
.message .message-actions button.message-delete:hover{color:#e65a78;background:color-mix(in srgb,#e65a78 12%,transparent)}
.message .message-actions .open-snap-button{width:auto;min-width:30px;padding:3px 8px;background:var(--chat-pink);color:white;opacity:1}
.action-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.message-saved{display:block;font-size:9px;line-height:1.5;margin-top:3px;color:var(--purple)}
.message blockquote{padding:5px 8px;margin:0 0 6px;font-size:11px;border-left-width:2px}
.messenger-feed .message.date,.messenger-feed .message.event{align-items:center;max-width:100%;padding:3px 10px}
.message.date .message-body,.message.event .message-body{background:transparent;border:0;padding:2px;box-shadow:none}
.message.date .message-meta,.message.event .message-meta{display:none}
.message.snap .message-body{border-color:var(--chat-pink);background:color-mix(in srgb,var(--chat-pink) 8%,var(--surface))}
.messenger-row{min-height:64px;padding:9px 10px;gap:9px;border-radius:9px}
.messenger-row .avatar{width:32px;height:32px;min-width:32px;border-radius:10px;font-size:11px}
.messenger-row strong{font-size:12px}.messenger-row small{font-size:10px}.messenger-row .chips{margin-top:4px}
.messenger-head{min-height:64px;padding:10px 18px}.messenger-head .thread-avatar{width:34px;height:34px;min-width:34px;border-radius:10px;font-size:12px}.messenger-head strong{font-size:14px}
.fan-panel{padding:18px 16px}.fan-identity{margin-top:14px}.fan-heading{padding-bottom:12px}
.messenger-compose{padding:10px 16px 8px}.compose-row{padding:5px;border-radius:11px}.compose-row button{height:36px;font-size:11px}.compose-row textarea{font-size:13px;padding:9px 4px}.compose-hint{padding-top:5px}
@media(max-width:700px){.messenger-feed{padding:14px 10px;gap:12px}.messenger-feed .message{max-width:94%;padding:0}.message .message-text{font-size:14px}.message .message-actions button{width:32px;height:30px;min-height:30px}.messenger-head{padding:9px 12px}.messenger-compose{padding:9px}.message .message-meta{flex-wrap:wrap;gap:4px}}