/* Approved Prign sketch: quiet navigation, presence at left, flat chat. */
:root{--bg:#f7f7f7;--panel:#fff;--soft:#f2f2f2;--line:#e9e9e9;--text:#171717;--muted:#737373;--positive:#3c7056;--positive-bg:#eef4ef;--shadow:0 12px 36px #00000012;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
:root[data-theme=dark]{--bg:#101010;--panel:#191919;--soft:#252525;--line:#303030;--text:#efefef;--muted:#999;--positive:#a0c7ac;--positive-bg:#25312a;--shadow:0 12px 36px #00000030}
body,:root[data-theme=dark] body{background:var(--bg)}
.app-shell{max-width:1280px;padding:0 24px 24px 0;min-height:580px}.app-header{height:72px;min-height:72px;padding:0 0 0 24px}.brand{font:36px/1 Georgia,serif;letter-spacing:-2px}.brand-line{font:11px/1.4 ui-monospace,monospace;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:12px}#headerPresence{font-size:12px;color:var(--muted)}.self-avatar{height:40px;width:40px}.workspace{grid-template-columns:64px 230px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:16px}.app-rail{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:16px}.rail-button{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;color:var(--muted)}.rail-button[aria-current=page]{background:var(--soft);color:var(--text)}.rail-bottom{margin-top:auto}
.voice-column{align-self:stretch;display:flex;flex-direction:column;background:transparent;border-radius:0;padding:20px 0 0;box-shadow:none;overflow:visible;max-height:none}.conversation{flex:1;min-height:0}.circle{display:flex;flex-direction:column;align-items:stretch;gap:0}.section-heading{order:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px 18px}.section-heading h2{font-size:14px;font-weight:600}.presence-count{font:12px ui-monospace,monospace;color:var(--muted)}.people{order:1;display:flex;flex-direction:column;gap:2px;max-height:40dvh;overflow:auto;scrollbar-width:thin;padding:0}.person{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 16px;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;text-align:left;align-items:center;padding:12px;min-height:72px;flex:none;border-radius:16px}.person.selected{background:var(--panel)}.person .avatar{grid-column:1;grid-row:1/3;width:40px;height:40px;font-size:13px}.person>span:nth-child(2){grid-column:2;grid-row:1;align-self:end;font-size:14px;font-weight:600}.person small{grid-column:2;grid-row:2;align-self:start;font-size:12px}.person .person-audio{grid-column:3;grid-row:1/3;width:16px;height:16px;color:var(--muted)}.person.ready .avatar:before{content:'';position:absolute;bottom:0;right:0;width:8px;height:8px;background:var(--positive);border:2px solid var(--bg);box-sizing:content-box;border-radius:50%;z-index:2}.person.selected .avatar,.person.selected.speaking .avatar{box-shadow:none}.self-avatar,.avatar,.message-avatar,.profile-preview,.signal-portrait{background:var(--soft)!important;color:var(--text)!important;border:1px solid var(--line);font-weight:600}.avatar.is-live:after,.signal-portrait.is-live:after{border-color:var(--positive)}.invite{order:2;width:auto;height:44px;display:flex;align-items:center;gap:12px;font-size:13px;padding:8px 12px;text-align:left;margin-top:8px}.invite>span:first-child{font-size:22px}.empty-copy{padding:14px 12px;font-size:13px}.voice-dock{margin-top:auto;padding:24px 12px 0;border:0;gap:12px}.voice-audience{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:22px;margin-bottom:1px}.signal-portrait{height:68px;width:68px;font-size:20px}.voice-audience>.signal-portrait{box-shadow:0 0 0 7px var(--bg),0 0 0 8px var(--line);background:var(--panel)!important;margin:8px}.voice-audience-copy{display:flex;flex-direction:column;gap:3px;align-items:center;max-width:100%}.voice-audience .mini-label{display:none}.voice-destination{font-size:15px;line-height:21px;max-width:100%;overflow-wrap:anywhere}.voice-gesture{display:block;font-size:11px;line-height:17px;color:var(--muted)}.talk{border-radius:14px;min-height:44px;padding:12px 10px;gap:8px}.talk-copy strong{font-size:12px;font-weight:600}.talk .icon{width:17px;height:17px}.talk.transmitting{background:var(--text);color:var(--panel)}.talk.transmitting:hover:not(:disabled){background:var(--text)}.controls{text-align:center}.controls #handsFree{background:transparent;min-height:36px;width:auto;padding:0 10px;border-radius:8px;font-size:12px}.controls #handsFree:before{content:'↗';display:inline-block;margin-right:7px;font-size:16px}.voice-bottom{margin:0 12px;min-height:30px}#toChannel{font-size:11px;line-height:16px;padding:5px;align-self:center;min-height:28px}#toChannel[aria-pressed=true]{visibility:hidden}.voice-status-line{display:none}
.channel{grid-column:3;min-height:0;gap:12px}.chat-surface{min-height:0;flex:1;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;background:var(--panel)}.channel-header{padding:21px 24px;border-bottom:1px solid var(--line);gap:12px;flex-shrink:0;border-radius:24px 24px 0 0;background:var(--panel)}.channel-header h1{font:23px/1.2 Georgia,serif;letter-spacing:-.4px}.channel-subtitle{font-size:12px;line-height:18px;margin:5px 0 0}.channel-actions{align-self:flex-start}.channel-actions summary{width:42px;height:42px}.channel-actions .security-button{width:100%;display:flex;justify-content:flex-start;gap:8px;font-size:13px}.channel-actions .security-button span{display:inline}.channel-actions .security-button .icon{height:15px;width:15px}.messages{background:transparent;border-radius:0;padding:12px 24px 0;box-shadow:none;min-height:80px}.chat-empty{min-height:120px}.chat-empty p{font-size:14px;color:var(--muted)}.message{padding:19px 0;gap:12px;scroll-margin:12px}.message+.message{border-top:1px solid var(--line)}.message-content,.message:last-child .message-content{border:0;padding:0}.message-avatar{height:34px;width:34px;font-size:11px}.message-meta{gap:9px;min-height:23px;margin:0 0 4px;padding:0 28px 0 0;flex-wrap:wrap;justify-content:flex-start}.message-meta strong{font-size:13px;line-height:19px;font-weight:600}.message-meta time{font:10px/16px ui-monospace,monospace;margin:0;padding:0;background:transparent;border-radius:0}.message-text{font-size:14px;line-height:1.55;color:var(--text)}.message.own .message-meta{flex-direction:row-reverse;justify-content:flex-start;padding:0 0 0 28px}.message.own .message-meta time{margin:0}.message-menu{right:0;top:19px}.message.own .message-menu{left:0;right:auto}.message-menu summary{width:24px;height:24px;font-size:20px}.message-quote{width:auto;max-width:100%;border-radius:0;background:transparent;border-left:2px solid var(--line);padding:4px 10px;margin:3px 0 8px;font-size:12px;line-height:18px;white-space:normal;display:block}.message.own .message-quote{margin-left:auto;border-left:0;border-right:2px solid var(--line)}.message.quoted-highlight{background:var(--positive-bg);border-radius:12px}.message.quoted-highlight .message-content{background:transparent}.message-image{max-height:240px}.typing-indicator{padding:2px 24px 16px 70px;min-height:35px;font-size:11px;line-height:17px;flex-shrink:0}.typing-dots i{height:3px;width:3px;animation:none}.composer-area{margin:0;flex-shrink:0}.compose-surface{border:1px solid var(--line);border-radius:20px;padding:10px 12px;box-shadow:0 3px 10px #00000003}.compose-surface:focus-within{box-shadow:0 0 0 1px var(--line)}.composer{align-items:center;gap:6px}.composer textarea{padding:9px 4px;font-size:14px;line-height:24px}.composer button{width:42px;height:42px}.composer #sendMessage{width:34px;height:34px;padding:7px}.composer #sendMessage:disabled{background:var(--text);color:var(--panel);opacity:.35}.composer-foot{padding:9px 4px 0;font-size:11px;line-height:16px}.composer-foot:has(#chatStatus:empty):has(.chat-audience-notice[hidden]){display:none}.voice-status-bar:has(.connection[hidden]):has(.status[hidden]):has(#unlock[hidden]):has(#retryAudio[hidden]){display:none}.incoming-direct{margin:12px 18px 0}.reply-preview,.attachment-preview{background:transparent;border-bottom:1px solid var(--line);border-radius:0;padding:2px 4px 8px}.reply-preview strong{font-size:12px}.reply-preview p{font-size:12px}
.invite-panel{left:82px;top:70px;border-radius:24px;box-shadow:var(--shadow)}.profile-dialog{border-radius:24px}.profile-dialog h2{font:23px/1.3 Georgia,serif}.profile-preview{height:80px;width:80px;font-size:24px}.onboarding{box-shadow:none;border:1px solid var(--line);border-radius:24px}.onboarding h1{font:30px/1.2 Georgia,serif;letter-spacing:-.7px}.app-shell:has(#workspace[hidden]) .top-actions{visibility:hidden}.app-shell:has(#workspace[hidden]) .brand-line{visibility:visible}.channel-name-form{padding-bottom:2px}.security-dialog{font-size:14px}
@media(max-width:960px){.workspace{grid-template-columns:50px 185px minmax(0,1fr);gap:10px}.app-shell{padding-right:14px}.app-header{padding-left:18px}.rail-button{width:40px;height:44px}.person{column-gap:8px;padding:10px 6px}.channel-header{padding:18px}.messages{padding-right:18px;padding-left:18px}.brand-line{font-size:10px}.voice-dock{padding-right:6px;padding-left:6px}.voice-gesture{font-size:11px}}
@media(max-width:760px){.app-shell{height:100dvh;min-height:600px;padding:0 12px 14px}.app-header{height:64px;min-height:64px;padding:0 4px}.brand{font-size:31px}.brand-line,#headerPresence{display:none}.workspace{display:flex;flex-direction:column;gap:12px}.app-rail{display:none}.voice-column{order:0;display:flex;padding:0;border-radius:0;max-height:none;flex-shrink:0;overflow:visible}.conversation{display:flex;flex-direction:column}.circle{display:flex}.section-heading{display:none}.people{display:flex;flex-direction:row;max-height:none;overflow-x:auto;gap:6px;padding:0 2px}.person{display:flex;flex-direction:column;gap:5px;min-height:0;min-width:68px;padding:9px 5px;flex:1;max-width:110px;border-radius:14px;text-align:center}.person>span:nth-child(2){font-size:12px;line-height:18px;align-self:center}.person small{font-size:10px;align-self:center}.person.ready small{display:none}.person .avatar{height:40px;width:40px}.person-audio{display:none}.invite{display:none}.voice-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;margin:0;padding:10px 8px 0;border:0}.voice-dock:not(:has(#handsFree:not([hidden]))){grid-template-columns:minmax(0,1fr) auto}.voice-audience{align-items:flex-start!important;text-align:left;gap:0;margin:0}.voice-audience>.signal-portrait{display:none}.voice-audience-copy{align-items:flex-start}.voice-destination{font-size:12px;line-height:18px}.voice-gesture{font-size:10px;line-height:16px}.talk{width:auto;min-height:44px;padding:10px;font-size:12px}.talk-copy strong{font-size:12px}.controls{grid-column:1/-1;text-align:center}.controls #handsFree{min-height:32px;font-size:12px}.voice-bottom{margin:0;min-height:0;flex-direction:row;justify-content:center}.voice-bottom:has(#toChannel[aria-pressed=true]){display:none}.voice-status-line{display:none}.channel{order:1;flex:1;min-height:160px;gap:12px}.chat-surface{border-radius:20px}.channel-header{padding:16px;border-radius:20px 20px 0 0;order:0}.channel-header h1{font-size:21px;line-height:26px}.channel-subtitle{font-size:11px;line-height:16px}.channel-actions summary{width:34px;height:34px}.messages{order:1;min-height:70px;border-radius:0;padding:0 14px}.message{gap:8px;padding:16px 0}.message-avatar{height:29px;width:29px;font-size:10px}.message-meta{min-height:20px;padding-right:24px;gap:7px}.message-meta strong{font-size:12px;line-height:18px}.message-meta time{font-size:10px;padding:0}.message.own .message-meta{padding-left:24px}.message-menu{top:16px;right:0}.message.own .message-menu{left:0}.message-text{font-size:13px;line-height:20px}.message-quote{font-size:11px;line-height:17px;padding:4px 8px}.typing-indicator{order:2;font-size:11px;padding:4px 16px 10px 50px;min-height:29px}.incoming-direct{order:0;margin:8px 12px 0}.composer-area{margin:0}.compose-surface{padding:8px 10px;border-radius:20px}.composer textarea{font-size:16px}.composer button{height:42px;width:34px}.composer #sendMessage{height:34px;width:34px}.composer-foot{font-size:11px}.invite-panel{left:0;top:62px}.workspace:has(#chatInput:focus) .voice-column{display:flex}.workspace:has(#chatInput:focus) .circle{display:flex}.workspace:has(#chatInput:focus) .voice-dock{padding:10px 8px 0}.onboarding{margin-top:24px}}
@media(max-height:660px) and (min-width:761px){.app-shell{min-height:540px}.app-header{height:64px;min-height:64px}.people{max-height:30dvh}.voice-dock{padding-top:12px;gap:7px}.voice-audience{gap:12px}.voice-audience>.signal-portrait{height:52px;width:52px;font-size:17px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.profile-dialog>label{display:block;font-size:12px;margin:10px 0 6px}.profile-dialog>input:not([type=file]){width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--bg);color:var(--text);font-size:16px}.channel-edit-dialog .channel-name-form{flex-direction:column;gap:8px}.channel-edit-dialog label{font-size:12px;margin-top:10px}.channel-edit-dialog .channel-name-form input{max-width:none}.channel-edit-dialog .channel-name-form button[type=submit]{background:var(--text);color:var(--panel);margin-top:12px}.channel-edit-dialog h2{margin-bottom:18px}.profile-dialog #profileIdentity{display:none}
.chat-day{flex-shrink:0;text-align:center;padding:18px 0 4px;font:10px/14px ui-monospace,monospace;letter-spacing:1px;color:var(--muted)}.chat-surface:has(.chat-day:not([hidden])) .messages{padding-top:0}.controls #handsFree:before{content:'';width:16px;height:16px;vertical-align:-3px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-2 2M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l2-2'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:760px){.chat-day{order:1;padding-top:12px}.chat-surface:has(.chat-day:not([hidden])) .messages{order:2}.chat-surface:has(.chat-day:not([hidden])) .typing-indicator{order:3}}