/* The supplied SiteVue Communicator reference, adapted to real device sizes. */
.header-brand { display:none; }
#profile-shortcut { flex-shrink:0; }
#page-connect { max-width:920px; margin-inline:auto; }
.operations-grid { display:flex; flex-direction:column; align-items:stretch; gap:0; }
.call-card { margin-bottom:20px; }
.call-card[data-state='idle'] { display:none; }
.directory-section { border:0; background:none; }
.directory-search { margin:4px 0 12px; border:0; border-radius:30px; background:var(--sv-surface-2); padding:0 10px 0 16px; display:flex; align-items:center; gap:10px; }
.directory-search input { border:0; background:none; padding:12px 0; min-width:0; flex:1; }
.directory-search>.icon { position:static; transform:none; font-size:18px; }
.directory-search .icon-button { width:36px; min-width:36px; }
.contact-entry { display:flex; align-items:center; gap:16px; width:100%; min-height:76px; text-align:left; background:none; border:0; padding:10px 4px; }
.contact-entry .contact-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.contact-entry strong { display:block; font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.contact-entry small { display:block; font-size:12px; color:var(--sv-fg-3); margin-top:3px; }
.avatar { border-radius:50%; border:0; background:var(--sv-surface-3); width:40px; height:40px; font-weight:600; }
.contact-entry>.avatar { display:flex; position:relative; }
.contact-entry .presence { position:absolute; right:0; bottom:0; width:9px; height:9px; border-radius:50%; background:var(--sv-green); box-shadow:0 0 0 2px var(--sv-ink); }
.contact-entry .presence.busy { background:var(--sv-yellow); }
.contact-entry>.icon { font-size:19px; padding:8px; }
.contact-entry:not(:last-child) .contact-info { align-self:stretch; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid var(--sv-border-1); margin-block:-10px; padding-block:10px; }
.contact-group-title { margin:25px 4px 8px; font-size:14px; font-weight:600; }
.contact-group-note { margin:0 4px 8px; font-size:13px; color:var(--sv-fg-3); }
.contact-entry:hover,.voice-entry:hover { background:var(--sv-surface-1); }
.radio-setting { display:flex; align-items:center; gap:10px; font-size:12px; padding:8px 4px; color:var(--sv-fg-3); }
.radio-setting .icon { font-size:19px; }.radio-setting>span:nth-child(2) { flex:1; }
.thread-header { display:flex; gap:12px; align-items:center; min-height:76px; border-bottom:1px solid var(--sv-border-1); padding-block:10px; position:sticky; top:0; z-index:2; background:var(--sv-ink); }
.thread-header>div { flex:1; min-width:0; }.thread-header h2 { font-size:15px; }.thread-header p { font-size:11px; color:var(--sv-fg-3); margin-top:3px; }
.thread-header .avatar { width:32px; height:32px; font-size:11px; }.thread-header .icon-button { width:44px; min-width:44px; }
.voice-entry { display:flex; gap:10px; min-height:80px; align-items:center; border-bottom:1px solid var(--sv-border-1); color:inherit; width:100%; }
.voice-entry-contact { display:flex; flex:1; min-width:0; gap:14px; padding:16px 4px; min-height:80px; align-items:center; border:0; background:none; color:inherit; text-align:left; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.voice-entry-contact>.icon { font-size:22px; color:var(--sv-fg-3); }.voice-entry-info { flex:1; min-width:0; }
.voice-entry strong { display:block; font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; }.voice-entry small { display:block; color:var(--sv-fg-3); font-size:12px; margin-top:4px; }.voice-entry .unread { color:var(--sv-fg-1); font-weight:600; }
.voice-entry time { color:var(--sv-fg-4); font-size:11px; flex-shrink:0; }.activity-play { width:44px; min-width:44px; height:44px; border-radius:50%; background:var(--sv-surface-2); }
.voice-entry-contact.contact-recording { background:color-mix(in srgb,var(--sv-red) 16%,transparent); }.voice-entry-contact.contact-recording>.icon { color:var(--sv-red); }.voice-entry-contact.contact-recording small { color:var(--sv-fg-1); }
#thread-messages { display:flex; flex-direction:column; gap:10px; padding-block:14px; }
.thread-date { align-self:center; color:var(--sv-fg-4); font-size:11px; margin:10px 0 4px; }.thread-older { align-self:center; min-height:44px; }
.voice-clip { align-self:flex-end; width:fit-content; min-width:190px; max-width:84%; margin:0; padding:14px 16px; border-radius:24px 24px 6px 24px; background:var(--sv-surface-3); border:1px solid var(--sv-surface-2); }
.voice-clip.incoming { align-self:flex-start; margin:0; border-radius:24px 24px 24px 6px; background:var(--sv-surface-1); }
.clip-controls { display:flex; align-items:center; gap:10px; }.clip-controls>div { flex:1; min-width:0; }.clip-controls strong { font-size:12px; font-weight:600; }.clip-controls p { font-size:11px; color:var(--sv-fg-3); margin-top:4px; }
.clip-controls .icon-button { border-radius:50%; background:var(--sv-surface-2); width:44px; min-width:44px; height:44px; }.clip-caption { font-size:15px; margin-top:10px; line-height:1.55; overflow-wrap:anywhere; white-space:pre-wrap; }
.clip-pending { font-size:12px; color:var(--sv-fg-3); }.clip-time { display:block; font-size:10px; color:var(--sv-fg-4); text-align:right; margin-top:8px; }
.clip-translation { margin-top:14px; padding-top:10px; border-top:1px solid var(--sv-border-1); }.clip-language { color:var(--sv-fg-3); font-size:11px; }.clip-translation .clip-caption { margin-top:4px; }.translation-play { text-decoration:none; display:flex; align-items:center; gap:6px; min-height:44px; font-size:12px; }.translation-play .icon { font-size:20px; }
.clip-playing { outline:1px solid var(--sv-border-2); }.clip-error { color:var(--error-text)!important; }
.ptt-recipient { display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; font-size:12px; color:var(--sv-fg-3); }.ptt-recipient>span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ptt-dock { width:100%; }.talk-button { border-radius:16px; min-height:58px; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.talk-button.recording { background:var(--sv-red); color:#fff; }.assistant-card { border:0; background:var(--sv-ink); padding-block:12px; }
.assistant-feedback:empty { display:none; }.assistant-feedback:has(.route-options:empty):has(.assistant-response[hidden]) { display:none; }
.empty-state { min-height:180px; padding:48px 16px; text-align:center; color:var(--sv-fg-4); }.empty-state h3 { font-size:14px; font-weight:400; }
#voice-activity .empty-state { min-height:220px; }.native-app .system-state #connection-label { display:none; }
@media(min-width:641px) { .assistant-card { left:var(--sidebar-width); padding-inline:max(32px,calc((100vw - var(--sidebar-width) - 856px)/2)); } }
@media(max-width:640px) {
 .topbar { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; min-height:calc(54px + env(safe-area-inset-top)); border:0; padding:calc(6px + env(safe-area-inset-top)) 16px 6px; }
 .header-brand { display:flex; grid-column:2; grid-row:1; align-items:center; gap:7px; font-size:12px; color:var(--sv-fg-3); white-space:nowrap; }
 .header-symbol { display:block; flex:none; filter:invert(1); }
 [data-theme='light'] .header-symbol { filter:none; }
 .topbar .breadcrumb { grid-column:1; grid-row:1; min-width:0; }
 .breadcrumb>span { display:none!important; } #org-switch { min-width:0; max-width:100%; font-size:12px; padding:6px 16px 6px 0; background:none; font-weight:400; color:var(--sv-fg-3); text-overflow:ellipsis; }
 .topbar-right { grid-column:3; grid-row:1; justify-self:end; gap:4px; } #theme-toggle { display:none; }.system-state #connection-label { display:none; }
 .topbar:has(#enable-call-sound:not([hidden])) .header-brand { display:none; }
 .topbar:has(#enable-call-sound:not([hidden])) .breadcrumb { visibility:hidden; }
 .topbar:has(#enable-call-sound:not([hidden])) .topbar-right { grid-column:1/-1; }
 #page-connect { padding:0 16px calc(var(--assistant-height) + 82px + env(safe-area-inset-bottom)); }
 #page-connect>.page-heading { display:none; }
 .sidebar { height:calc(62px + env(safe-area-inset-bottom)); padding-inline:20px; }.sidebar nav { height:61px; justify-content:space-around; overflow:visible; }
 .sidebar .nav-item { flex:1; padding:8px 0; min-width:0; min-height:60px; }.sidebar .nav-item span:not(.icon) { display:block; font-size:11px; }.sidebar .nav-item .icon { font-size:24px; }
 .sidebar .nav-item.active { box-shadow:none; background:none; }.sidebar .nav-item:not(.active) { opacity:.6; }
 .assistant-card { bottom:calc(62px + env(safe-area-inset-bottom)); padding:12px 16px; }.talk-button { min-height:58px; font-size:14px; }
 .contact-entry .contact-info { display:flex; }.directory-search input { font-size:16px; }.directory-search input::placeholder { font-size:16px; }
 .thread-header { gap:8px; }.voice-clip { max-width:88%; padding:12px; }
 .native-app .page:not(#page-connect) { padding-top:10px; }.device-row { padding-inline:4px; }
}

.profile-settings { display:flex; gap:24px; padding-top:18px; flex-wrap:wrap; }

.contact-entry { touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.contact-entry.contact-recording { background:color-mix(in srgb,var(--sv-red) 16%,transparent); }
.contact-entry.contact-recording .avatar { background:var(--sv-red); color:#fff; }
.contact-entry.contact-recording small { color:var(--sv-fg-1); }

.channel-heading,.channel-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.channel-row .contact-entry{flex:1;min-width:0}.channel-heading .contact-group-title{margin:20px 0 12px}
.channel-dialog{width:min(440px,calc(100vw - 32px))}.channel-dialog fieldset{border:0;padding:12px 0;max-height:42vh;overflow:auto}.channel-dialog legend{font-weight:600;padding:12px 0 4px}.channel-dialog .channel-member{display:flex;align-items:center;gap:12px;padding:10px 0;margin:0}.channel-member input[type=checkbox]{width:20px;height:20px;margin:0;flex:none}

/* One toolbar: branding on the left, space menu on the right, below system UI. */
#org-switch { display:flex; align-items:center; gap:6px; max-width:240px; padding:8px 10px; cursor:pointer; }
#org-switch[hidden] { display:none; }
#org-switch>span:first-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.space-chevron { flex:none; }
.space-menu { position:fixed; inset:calc(58px + env(safe-area-inset-top)) 16px auto auto; margin:0; width:min(340px,calc(100vw - 32px)); max-height:calc(100dvh - 100px - env(safe-area-inset-top)); }
.space-menu h2 { font-size:16px; }
.space-option { display:block; width:100%; min-height:48px; padding:12px 0; background:none; border:0; border-bottom:1px solid var(--sv-border-1); color:var(--sv-fg-1); text-align:left; font:inherit; overflow-wrap:anywhere; cursor:pointer; }
.space-option[aria-current=true] { font-weight:600; }
.space-action { margin-top:8px; }
.space-invite-count { flex:none; min-width:20px; padding:2px 5px; border-radius:12px; background:var(--sv-fg-1); color:var(--sv-ink); font-size:11px; text-align:center; }
.space-invitations { margin:20px 32px 0; padding:16px; border:1px solid var(--sv-border-2); border-radius:8px; background:var(--sv-surface-2); }
.space-invitations[hidden] { display:none; }
.space-invitations h2 { font-size:14px; margin:0 0 8px; }
.space-invitation { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0; }
.space-invitation>div { flex:1; min-width:100px; overflow-wrap:anywhere; }
.space-invitation strong { font-size:14px; }
.space-invitation .hint { margin:4px 0 0; }
.space-invitation>.button { flex:none; margin:0; min-height:44px; }
.space-invitation>.error { flex-basis:100%; margin:0; }
.space-invitation>.error:empty { display:none; }
.personal-invite-form { padding:8px 0 16px; }
.personal-invite-form .button { width:100%; margin-top:12px; }
.personal-invite-form input,.personal-invite-result input { width:100%; min-width:0; }
.personal-invite-result { font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.personal-invite-people { margin:16px 0; }
.personal-invite-people h3,.channel-dialog h3 { font-size:14px; margin:12px 0; }
.personal-invite-person { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--sv-border-1); font-size:13px; }
.personal-invite-person>div,.personal-invite-person>span:first-child { flex:1; min-width:0; overflow-wrap:anywhere; }
.personal-invite-person .hint { margin:4px 0 0; }
@media(max-width:640px) { .space-invitations { margin:12px 16px 0; padding:12px; } }
.security-code { font:13px/1.8 ui-monospace,monospace; overflow-wrap:anywhere; padding:12px; background:var(--sv-surface-2); border-radius:6px; }
.encryption-dialog .button,.channel-dialog>div>.button { margin:8px 8px 8px 0; }
.retention-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.retention-controls[hidden] { display:none; }
@media(max-width:640px) {
 .topbar { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; }
 .header-brand { grid-column:2; }
 .topbar .breadcrumb { display:none; }
 .topbar-right { grid-column:3; min-width:0; width:100%; justify-content:flex-end; gap:4px; }
 #org-switch { min-width:0; max-width:100%; padding:6px 0; font-size:12px; }
 .system-state { flex:none; }
 #profile-shortcut { width:28px; min-width:28px; }
}

.primary-tabs { display:flex; flex-direction:column; gap:4px; width:100%; }
.admin-menu { max-width:640px; padding:0 20px; }
.admin-item { display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:14px 0; background:none; border:0; color:var(--sv-fg-1); text-align:left; font-size:15px; cursor:pointer; }
.admin-item+.admin-item { border-top:1px solid var(--sv-border-1); }
.admin-item>.icon { width:24px; flex:none; }
.admin-chevron { margin-left:auto; color:var(--sv-fg-3); font-size:24px; }
.admin-back { min-height:44px; margin-bottom:8px; }
.switch-toggle { position:relative; width:52px; min-width:52px; height:44px; padding:0; border:0; background:none; cursor:pointer; }
.switch-toggle::before { content:''; position:absolute; inset:8px 0; border-radius:20px; background:var(--sv-surface-3); border:1px solid var(--sv-border-2); }
.switch-toggle>span { position:absolute; left:4px; top:12px; width:20px; height:20px; border-radius:50%; background:var(--sv-fg-2); transition:transform .15s; }
.switch-toggle[aria-checked=true]::before { background:var(--sv-green); }
.switch-toggle[aria-checked=true]>span { transform:translateX(24px); background:#fff; }
.switch-toggle:disabled { opacity:.5; cursor:wait; }
@media(max-width:640px) { .primary-tabs { flex-direction:row; gap:0; height:100%; } }

.join-link-form>.button { margin-top:12px; }
.link-invitation { border-top:1px solid var(--sv-border-1); margin-top:20px; padding-top:20px; }
.link-invitation .button { margin-top:12px; }

/* Desktop uses the named selector; phones use the space drawer button. */
@media(max-width:640px) { #org-switch { display:none; } }

/* Activity rows: direction arrow, replaced by animated bars while playing. */
.voice-entry-contact>.direction-icon { display:flex; align-items:center; justify-content:center; width:22px; height:22px; color:var(--sv-fg-3); }
.soundbar { display:none; flex:none; align-items:center; justify-content:center; gap:2px; width:22px; height:22px; }
.soundbar i { width:3px; height:30%; border-radius:2px; background:var(--sv-fg-1); animation:soundbar .9s ease-in-out infinite; }
.soundbar i:nth-child(2) { animation-delay:-.3s; } .soundbar i:nth-child(3) { animation-delay:-.6s; } .soundbar i:nth-child(4) { animation-delay:-.15s; }
@keyframes soundbar { 0%,100% { height:25%; } 50% { height:100%; } }
.voice-entry.clip-playing time { display:none; }
.voice-entry.clip-playing .soundbar { display:flex; }
@media (prefers-reduced-motion:reduce) { .soundbar i { animation:none; height:60%; } .soundbar i:nth-child(odd) { height:90%; } }

/* Phone: an open conversation uses its own header in place of the app top bar. */
@media(max-width:640px) {
 body:has(#page-connect:not([hidden]) #voice-thread:not([hidden])) .topbar { display:none; }
 body:has(#page-connect:not([hidden]) #voice-thread:not([hidden])) .thread-header { padding-top:calc(10px + env(safe-area-inset-top)); }
 .thread-header { margin-inline:-16px; padding-inline:16px; }
 body:has(#page-connect:not([hidden]) #voice-thread:not([hidden])) .sidebar { display:none; }
 body:has(#page-connect:not([hidden]) #voice-thread:not([hidden])) .assistant-card { bottom:0; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
 body:has(#page-connect:not([hidden]) #voice-thread:not([hidden])) #page-connect { padding-bottom:calc(var(--assistant-height) + 28px); }
}

/* The conversation header already names the recipient; keep only send status above the talk button. */
#ptt-recipient { display:none; }
.ptt-recipient { justify-content:center; }
.ptt-recipient:has(#ptt-state:empty) { display:none; }

/* Devices tab */
#page-device .page-heading { min-height:0; margin:0; }
.device-list { display:grid; gap:16px; max-width:640px; }
.device-card { padding:20px; border:1px solid var(--sv-surface-2); border-radius:16px; background:var(--sv-surface-1); }
.device-card-head { display:flex; align-items:center; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--sv-surface-2); }
.device-art { flex:none; width:80px; height:80px; filter:drop-shadow(0 6px 10px rgb(0 0 0 / 35%)); }
.device-card h3 { font-size:18px; font-weight:600; overflow-wrap:anywhere; }
.device-card-head p { margin-top:4px; font-size:14px; color:var(--sv-fg-3); }
.device-row-item, .device-howto summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; border-bottom:1px solid var(--sv-surface-2); font-size:15px; color:var(--sv-fg-2); }
.device-row-item .person-state { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--sv-fg-1); }
.device-row-item .status-dot { width:8px; height:8px; }
.device-howto { margin:0; padding:0; border:0; background:none; }
.device-howto summary { padding:0; border-bottom:0; cursor:pointer; list-style:none; }
.device-howto summary::-webkit-details-marker { display:none; }
.device-howto summary .icon { color:var(--sv-fg-3); transition:transform .2s; }
.device-howto[open] summary .icon { transform:rotate(180deg); }
.device-howto .control-list { padding:0 0 4px; }
.device-howto .control-list>div { border-color:var(--sv-surface-2); }
.device-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:32px 20px; text-align:center; }
.device-empty .device-art { margin-bottom:8px; opacity:.85; }
.device-empty p { font-size:13px; color:var(--sv-fg-3); max-width:260px; }
/* With walkie-talkie mode on, the phone itself is the device, so skip the empty prompt. */
body:has(#radio-enable[aria-checked="true"]) #device-list :is(.device-empty, .device-add-inline) { display:none; }
/* Wearable upsell shown until a SiteVue device is paired. */
.device-shop { max-width:640px; min-width:0; overflow:hidden; }
.device-shop > p { margin-top:4px; font-size:14px; color:var(--sv-fg-3); }
.wearable-list { display:flex; gap:12px; margin:16px -20px 0; padding:0 20px 4px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none; overscroll-behavior-x:contain; }
.wearable-list::-webkit-scrollbar { display:none; }
.wearable-option { flex:0 0 72%; max-width:240px; scroll-snap-align:start; display:flex; flex-direction:column; gap:4px; color:var(--sv-fg-1); text-decoration:none; }
.wearable-media { display:grid; place-items:center; aspect-ratio:4/3; margin-bottom:8px; border-radius:12px; background:var(--sv-surface-2); overflow:hidden; }
.wearable-media:has(img) { background:#fff; }
.wearable-media:has(img) { position:relative; }
.wearable-media img { position:absolute; inset:0; box-sizing:border-box; width:100%; height:100%; padding:16px; object-fit:contain; }
.wearable-option strong { font-size:16px; font-weight:600; }
.wearable-option small { font-size:13px; color:var(--sv-fg-3); }
.wearable-art { width:48px; height:48px; fill:none; stroke:var(--sv-fg-3); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.device-shop .device-add-inline { width:100%; margin:16px 0 0; }
.device-add-dock { max-width:640px; margin-top:20px; }
.device-add { width:100%; min-height:58px; border-radius:16px; gap:8px; font-size:15px; }
.device-sheet .sheet-frame { display:flex; flex-direction:column; height:100%; }
.device-sheet .settings-card { padding:0; border:0; background:none; }
.device-setup-hint { margin:16px 0 4px; }
.device-sheet .button[type=submit] { width:100%; margin-top:24px; border-radius:16px; }
@media(max-width:640px) {
 #page-device { padding-bottom:calc(62px + 58px + 48px + env(safe-area-inset-bottom)); }
 .device-add-dock { position:fixed; z-index:20; left:0; right:0; bottom:calc(62px + env(safe-area-inset-bottom)); margin:0; padding:12px 16px; background:var(--sv-ink); }
}

@media(max-width:640px) { .primary-tabs .nav-item { gap:7px; } }

/* Encryption dialog: actions pinned to the bottom as a pair */
.encryption-dialog { width:min(440px,calc(100vw - 24px)); padding:20px; }
.encryption-dialog h2 { margin-bottom:12px; }
.encryption-dialog .hint { margin-top:10px; }
.encryption-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.encryption-actions>:only-child { grid-column:1/-1; }
.encryption-dialog .encryption-actions .button { width:100%; margin:0; min-height:48px; }
.device-sheet input:not([type='checkbox']), .device-sheet select { border-color:var(--sv-border-1); }
.device-sheet input:not([type='checkbox']):hover, .device-sheet select:hover { border-color:var(--sv-border-2); }
.device-sheet input:not([type='checkbox']):focus, .device-sheet select:focus { border-color:var(--sv-fg-3); }
.device-sheet .form-divider { border-color:var(--sv-surface-2); background:var(--sv-surface-2); }
#profile-shortcut .icon { width:24px; height:24px; font-size:24px; }

/* Filled, rounded play/stop glyphs for voice messages (the icon font subset is outline-only). */
.message-play .icon { position:relative; font-size:0; }
.message-play .icon::before { content:''; position:absolute; inset:0; background:currentColor; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat; --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.6v12.8a1.2 1.2 0 0 0 1.84 1.01l9.9-6.4a1.2 1.2 0 0 0 0-2.02l-9.9-6.4A1.2 1.2 0 0 0 8 5.6z'/%3E%3C/svg%3E"); }
.message-play[aria-label^='Stop'] .icon::before { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='6.5' width='11' height='11' rx='2.5'/%3E%3C/svg%3E"); }

/* Channel editor: bottom sheet modal on phones */
.push-header { display:none; }
@media(max-width:640px) {
 dialog.channel-dialog.push-page { width:100%; max-width:100%; height:calc(100dvh - max(12px, env(safe-area-inset-top))); max-height:none; margin:auto 0 0; padding:0; border:0; border-radius:14px 14px 0 0; background:var(--sv-ink); overflow:hidden; }
 dialog.push-page[open] { animation:sheet-up .28s cubic-bezier(.2,.8,.2,1); }
 .push-page > form { display:flex; flex-direction:column; height:100%; }
 .push-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:56px; padding:0 8px; border-bottom:1px solid var(--sv-surface-2); }
 .push-header h2 { margin:0; font-size:16px; font-weight:600; }
 .push-back { justify-self:start; }
 .push-body { flex:1; overflow-y:auto; padding:8px 16px calc(24px + env(safe-area-inset-bottom)); }
 .push-page .push-body > h2, .push-page .channel-save, .push-page .channel-cancel { display:none; }
 .push-page fieldset { max-height:none; }
}
@media(max-width:640px) and (prefers-reduced-motion:reduce) { dialog.push-page[open] { animation:none; } }

/* Contacts: more room between sections */
.directory .contact-group-title, .directory .channel-heading .contact-group-title { margin:40px 4px 8px; }
#ptt-channels .channel-heading .contact-group-title { margin:24px 4px 8px; }
.directory .channel-heading { margin-right:0; }
.contact-group-note { margin-bottom:0; color:var(--sv-fg-4); }

/* Devices: walkie-talkie mode row, docked above Add device */
#radio-setting { gap:14px; min-height:48px; padding:0 4px; font-size:15px; color:var(--sv-fg-1); }
#radio-setting .icon { display:flex; align-items:center; justify-content:center; width:22px; height:22px; color:var(--sv-fg-3); }
#radio-setting .switch-toggle { width:46px; min-width:46px; }
#radio-setting .switch-toggle::before { inset:8px 0; border:0; border-radius:14px; }
#radio-setting .switch-toggle>span { left:3px; top:11px; width:22px; height:22px; background:#fff; }
#radio-setting .switch-toggle[aria-checked=true]>span { transform:translateX(18px); }
.device-card.device-guide { max-width:640px; margin-top:16px; padding:4px 20px; border:1px solid var(--sv-surface-2); background:var(--sv-surface-1); }

/* Phone: row hover/press highlights run edge to edge. */
@media(max-width:640px) {
 .directory .contact-entry:hover, #voice-activity .voice-entry:hover { box-shadow:-16px 0 0 var(--sv-surface-1), 16px 0 0 var(--sv-surface-1); }
}

/* Devices: this device card */
.device-card.this-device { max-width:640px; margin-bottom:16px; }
.this-device #radio-setting { min-height:52px; margin:0; padding:0; font-size:15px; color:var(--sv-fg-2); }
.this-device #radio-setting>span:first-child { flex:1; }

.device-empty-actions { display:grid; grid-template-columns:1fr; gap:8px; width:100%; margin-top:20px; }
.device-empty-actions .button { width:100%; min-height:48px; margin:0; }
.device-empty-actions .button[hidden] { display:none; }
.device-empty-actions:has(.button[hidden]) { grid-template-columns:1fr; }
.controls-sheet .control-list { padding:0 0 8px; }
.controls-sheet .control-list>div { border-color:var(--sv-surface-2); }
.device-add-dock[hidden] { display:none; }

/* Board controls sheet */
dialog.controls-sheet { padding:10px 20px calc(28px + env(safe-area-inset-bottom)); }
.controls-sheet h2 { margin:4px 0 12px; font-size:17px; }
.control-guide { margin:0; padding:0; list-style:none; }
.control-guide li { display:flex; align-items:center; gap:16px; padding:16px 0; }
.control-guide li + li { border-top:1px solid var(--sv-surface-2); }
.control-key { display:flex; flex:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--sv-surface-2); color:var(--sv-fg-1); font-size:15px; font-weight:600; }
.control-guide strong { display:block; font-size:15px; font-weight:600; }
.control-guide p { margin-top:4px; font-size:14px; line-height:1.45; color:var(--sv-fg-2); }
.this-device #radio-setting { gap:16px; padding:12px 0 4px; }
.setting-hint { display:block; margin-top:4px; font-size:13px; line-height:1.4; color:var(--sv-fg-3); }

/* Devices: walkie-talkie card */
.device-card.walkie-card { max-width:640px; margin-bottom:16px; padding:20px; }
.walkie-card #radio-setting { align-items:flex-start; gap:14px; min-height:0; margin:0; padding:0; font-size:17px; font-weight:600; color:var(--sv-fg-1); }
.walkie-card #radio-setting>span:nth-child(2) { flex:1; }
.walkie-card .setting-hint { font-size:13px; font-weight:400; }
.walkie-badge { display:flex; flex:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--sv-surface-2); color:var(--sv-fg-1); }
.walkie-card .switch-toggle { margin-top:-4px; }
.walkie-label { margin:22px 0 4px; font-size:13px; font-weight:500; color:var(--sv-fg-3); }
.output-option { position:relative; display:flex; align-items:center; gap:14px; min-height:60px; margin:0; font-size:15px; font-weight:400; color:var(--sv-fg-1); cursor:pointer; }
.output-option + .output-option { border-top:1px solid var(--sv-surface-2); }
.output-option input { position:absolute; opacity:0; pointer-events:none; }
.output-option>span:last-child { flex:1; }
.output-option small { display:block; margin-top:2px; font-size:13px; color:var(--sv-fg-3); }
.output-icon { display:flex; flex:none; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--sv-surface-2); color:var(--sv-fg-2); }
.output-option:has(input:checked)::after { content:'check'; font-family:'Material Symbols Outlined'; font-size:22px; font-feature-settings:'liga'; color:var(--sv-fg-1); }
.output-option:has(input:focus-visible) { outline:2px solid var(--sv-fg-3); outline-offset:2px; border-radius:8px; }

/* Recovery stays reachable from every page, including mobile conversations. */
.connection-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 32px; padding:12px 16px; border:1px solid var(--sv-border-2); border-radius:8px; background:var(--sv-surface-2); }
.connection-notice[hidden] { display:none; }
.connection-notice p { margin:0; font-size:13px; line-height:1.5; }
.connection-notice .button { flex:none; }
.topbar-right .system-state { flex:none; }
@media(min-width:641px) { .topbar-right { min-width:0; } #org-switch { min-width:0; } }
@media(min-width:641px) and (max-width:1100px) { .topbar .breadcrumb { display:none; } .topbar-right { width:100%; justify-content:flex-end; } #org-switch { margin-right:auto; } }
@media(max-width:640px) { .connection-notice { margin:8px 16px; flex-wrap:wrap; } .connection-notice .button { min-height:44px; } }
@media(max-width:640px) {
 body:has(#page-connect:not([hidden]) #voice-thread:not([hidden])) .connection-notice,
 body.searching .connection-notice { padding-top:calc(12px + env(safe-area-inset-top)); }
 body:has(#connection-notice:not([hidden])):has(#page-connect:not([hidden]) #voice-thread:not([hidden])) .thread-header { padding-top:10px; }
 /* The notice takes the safe area, so once the header sticks it must stop below the status bar; cover the status bar so messages don't scroll under it. */
 body:has(#connection-notice:not([hidden])):has(#page-connect:not([hidden]) #voice-thread:not([hidden])) .thread-header { top:env(safe-area-inset-top); }
 body:has(#connection-notice:not([hidden])):has(#page-connect:not([hidden]) #voice-thread:not([hidden]))::before { content:''; position:fixed; inset:0 0 auto; z-index:20; height:env(safe-area-inset-top); background:var(--sv-ink); }
}
.device-card.device-empty { padding:32px 16px 16px; }
:is(.device-empty-actions, .encryption-actions) .button { font-size:15px; }
:is(.device-empty-actions, .encryption-actions) .button.secondary { border-color:var(--sv-border-1); background:transparent; }
:is(.device-empty-actions, .encryption-actions) .button.secondary:hover { border-color:var(--sv-border-2); background:var(--sv-surface-1); }
.device-empty p { max-width:none; }
/* Activity rows: divider starts where the text starts */
#voice-activity .voice-entry { position:relative; border-bottom:0; }
#voice-activity .voice-entry::after { content:''; position:absolute; left:68px; right:0; bottom:0; height:1px; background:var(--sv-border-1); pointer-events:none; }
.walkie-card:has(#radio-enable[aria-checked=false]) :is(.walkie-label, .walkie-output) { display:none; }
.device-card.walkie-card:has(#radio-enable[aria-checked=false]) { padding-bottom:20px; }
.device-card.walkie-card { padding-bottom:8px; }

/* Phone: top bar and contact search stay pinned while scrolling */
@media(max-width:640px) {
 .topbar { position:sticky; top:0; z-index:15; background:var(--sv-ink); }
 .search-dock { position:sticky; top:var(--topbar-height,56px); z-index:14; margin:0 -16px; padding:4px 16px 12px; background:var(--sv-ink); }
 .search-dock .directory-search { margin:0; }
}

/* Thread: recording animation on Hold to Talk */
#ptt-talk .rec-bars { display:none; width:28px; gap:3px; }
#ptt-talk.recording .icon { display:none; }
#ptt-talk.recording .rec-bars { display:flex; }
#ptt-talk .rec-bars i { width:3px; background:#fff; animation-duration:.7s; }
#ptt-talk .rec-bars i:nth-child(5) { animation-delay:-.45s; }
#ptt-talk.recording { animation:rec-pulse 1.4s ease-out infinite; }
@keyframes rec-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--sv-red) 55%, transparent); } 100% { box-shadow:0 0 0 14px transparent; } }
@media (prefers-reduced-motion:reduce) { #ptt-talk.recording { animation:none; } }

/* Channel editor members: name on the left, round check on the right */
.channel-dialog fieldset .channel-member { justify-content:space-between; gap:12px; min-height:52px; margin:0; padding:0; font-size:15px; font-weight:400; color:var(--sv-fg-1); cursor:pointer; }
.channel-dialog fieldset .channel-member + .channel-member { border-top:1px solid var(--sv-surface-2); }
.channel-dialog fieldset .channel-member input { order:2; appearance:none; -webkit-appearance:none; flex:none; width:24px; height:24px; min-height:0; margin:0; padding:0; border:1.5px solid var(--sv-border-2); border-radius:50%; background:transparent center/14px no-repeat; cursor:pointer; }
.channel-dialog fieldset .channel-member input:checked { border-color:var(--sv-fg-1); background-color:var(--sv-fg-1); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310011B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
[data-theme='light'] .channel-dialog fieldset .channel-member input:checked { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.channel-dialog fieldset .channel-member input:disabled { opacity:.45; cursor:default; }
.channel-dialog fieldset .channel-member input:focus-visible { outline:2px solid var(--sv-fg-3); outline-offset:2px; }

/* Channel editor toggles: list rows with a switch on the right */
.channel-dialog :is(.push-body, form, section) > .channel-member { justify-content:space-between; gap:12px; min-height:56px; margin:12px 0 0; padding:0; border-bottom:1px solid var(--sv-surface-2); font-size:15px; font-weight:400; color:var(--sv-fg-1); cursor:pointer; }
.channel-dialog :is(.push-body, form, section) > .channel-member input { order:2; appearance:none; -webkit-appearance:none; position:relative; flex:none; width:46px; height:28px; min-height:0; margin:0; padding:0; border:0; border-radius:14px; background:var(--sv-surface-3); cursor:pointer; transition:background .2s; }
.channel-dialog :is(.push-body, form, section) > .channel-member input::after { content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .2s; }
.channel-dialog :is(.push-body, form, section) > .channel-member input:checked { background:var(--sv-green); }
.channel-dialog :is(.push-body, form, section) > .channel-member input:checked::after { transform:translateX(18px); }
.channel-dialog :is(.push-body, form, section) > .channel-member input:disabled { opacity:.5; cursor:default; }
.channel-dialog :is(.push-body, form, section) > .channel-member + .hint { margin-top:8px; }
.channel-dialog .member-info { display:flex; flex-direction:column; min-width:0; }
.channel-dialog .member-info small { margin-top:2px; font-size:13px; color:var(--sv-fg-3); }
.channel-dialog fieldset .channel-member:has(small) { min-height:60px; }
.channel-dialog :is(.push-body, form, section) > .channel-member:has(small) { padding:12px 0; }
.channel-dialog .member-info small { line-height:1.4; }

/* Channel member rows reuse Activity row rhythm */
.channel-dialog fieldset .channel-member, .channel-dialog fieldset .channel-member:has(small) { min-height:72px; padding:14px 0; }
.channel-dialog fieldset .channel-member + .channel-member { border-top-color:var(--sv-border-1); }
.channel-dialog fieldset .member-info > span { font-size:15px; font-weight:500; }
.channel-dialog fieldset .member-info small { margin-top:4px; font-size:12px; }
.channel-dialog fieldset .channel-member:not(:has(small)) { min-height:56px; padding:10px 0; }
.channel-dialog fieldset legend { padding-top:28px; }
.channel-dialog :is(.push-body, form, section) > .channel-member { border-bottom:0; }
.channel-dialog fieldset .channel-member + .channel-member { border-top-color:var(--sv-surface-2); }
.channel-dialog fieldset legend { padding:28px 0 4px; font-size:13px; font-weight:500; color:var(--sv-fg-3); }
.sheet-save:disabled { color:var(--sv-fg-4); cursor:default; }

.channel-dialog fieldset .channel-member[hidden] { display:none; }
.channel-dialog #channel-name { background:var(--sv-surface-1); }
.channel-dialog #channel-name { min-height:54px; padding:14px 16px; font-size:17px; border-radius:8px; }
.channel-dialog .picker-search { margin:12px 0 0; }
.channel-dialog .picker-search input { border:0; background:none; min-height:45px; }

/* Channel editor: Delete as a red list row */
.channel-dialog .channel-delete { display:block; width:100%; min-height:52px; margin:24px 0 0; padding:0; border-top:1px solid var(--sv-surface-2); color:var(--sv-red); font-size:15px; text-align:left; text-decoration:none; }
.channel-dialog .dialog-actions:has(.channel-delete) { flex-wrap:wrap; justify-content:flex-start; }
.channel-dialog fieldset { margin:0; min-width:0; }

/* Contacts: full-screen searching state */
.search-dock { display:flex; align-items:center; gap:4px; }
.search-dock .directory-search { flex:1; }
.search-cancel { display:none; margin-right:-12px; }
body.searching .search-cancel { display:block; }
body.searching #ptt-channels { display:none; }
.contact-invite-row .invite-avatar { background:var(--sv-fg-1); color:var(--sv-ink); }
.contact-invite-row .invite-avatar .icon { font-size:22px; width:22px; height:22px; }
@media(max-width:640px) {
 body.searching .sidebar, body.searching .assistant-card { display:none; }
 body.searching #page-connect { padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
}

/* Invite from search: bottom sheet */
.push-page > .sheet-frame { display:flex; flex-direction:column; height:100%; }
.invite-sheet .invite-card { margin:0; padding:0; border:0; background:none; }
@media(max-width:640px) { .invite-sheet .invite-card > h2, .invite-sheet .invite-card button[type=submit] { display:none; } }
.invite-sheet .inline-form { display:block; }
.invite-sheet .inline-form input, .invite-sheet .inline-form select { width:100%; }
body.searching #directory .empty-state { display:flex; align-items:center; justify-content:center; min-height:55vh; }

/* Contacts: trailing controls and dividers share one right margin */
.contact-entry { position:relative; }
.contact-entry:not(:last-child) .contact-info { border-bottom:0; }
.contact-entry:not(:last-child)::after { content:''; position:absolute; left:60px; right:8px; bottom:0; border-bottom:1px solid var(--sv-border-1); }
.channel-row { position:relative; }
.channel-row .contact-entry::after { display:none; }
.channel-row::after { content:''; position:absolute; left:60px; right:8px; bottom:0; border-bottom:1px solid var(--sv-border-1); }
.contact-entry>.icon { margin-right:7px; }
.channel-heading .icon-button { margin-right:-9px; }
.directory .channel-heading .contact-group-title, #ptt-channels .channel-heading .contact-group-title { margin:0 4px; }
.directory .channel-heading, #ptt-channels .channel-heading { margin-top:32px; margin-bottom:8px; }
#ptt-channels .channel-heading { margin-top:8px; }
.directory-search:focus-within { outline:none; }
html, body { touch-action:manipulation; }
.output-option { padding-block:14px; }
.walkie-card .setting-hint, .output-option small { font-size:12px; line-height:1.4; }
.output-option small { max-width:268px; }
.device-add-inline { display:flex; width:auto; min-height:40px; margin:16px auto 0; padding:0 20px; font-size:14px; }
.device-card.device-empty { border:0; background:none; padding:24px 16px 0; }
.device-empty { gap:0; } .device-empty h3 { margin:0; line-height:1.3; } .device-empty p { margin:2px 0 0; line-height:1.3; }
.walkie-badge { width:64px; height:64px; background:none; border-radius:0; } .walkie-badge .device-art { width:64px; height:64px; }
.walkie-dot { transition:fill .2s; } .walkie-card:has(#radio-enable[aria-checked=true]) .walkie-dot { fill:var(--sv-green); }
.walkie-badge svg { overflow:visible; }
.walkie-waves { stroke:var(--sv-green); }
.walkie-waves path { opacity:0; }
.walkie-card:has(#radio-enable[aria-checked=true]) .walkie-waves path { animation:walkie-wave 2.4s ease-in-out infinite; }
.walkie-card:has(#radio-enable[aria-checked=true]) .walkie-waves .w2 { animation-delay:.3s; }
@keyframes walkie-wave { 0%,100% { opacity:0; } 35%,55% { opacity:.85; } }
@media (prefers-reduced-motion:reduce) { .walkie-card:has(#radio-enable[aria-checked=true]) .walkie-waves path { animation:none; opacity:.6; } }
.output-option .bt-name { margin-top:6px; font-size:13px; font-weight:500; color:var(--sv-green); }
.output-option .bt-name { display:flex; align-items:center; gap:6px; }
.output-option .bt-name svg { flex:none; }
.output-option .bt-name[hidden] { display:none; }
.walkie-card:has(#radio-enable[aria-checked=true]) #radio-setting { margin-inline:-20px; padding:0 20px 20px; border-bottom:1px solid var(--sv-surface-2); }
.walkie-card:has(#radio-enable[aria-checked=true]) .walkie-label { margin-top:16px; }
.thread-header h2 { line-height:1.2; margin:0; } .thread-header p { margin-top:0; line-height:1.2; }
#device-list:has(.device-empty) { display:flex; flex-direction:column; justify-content:center; min-height:calc(100dvh - 390px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding-bottom:24px; }
.output-add { width:100%; border:0; background:none; padding-inline:0; text-align:left; font-family:inherit; }
.output-add small { color:var(--sv-fg-3); }
body:has(#radio-enable[aria-checked=true]) #device-list:has(.device-empty) { min-height:0; justify-content:flex-start; padding-top:32px; padding-bottom:140px; }
.member-row .switch-toggle { width:46px; min-width:46px; flex:none; }
.member-row .switch-toggle::before { inset:8px 0; border:0; border-radius:14px; }
.member-row .switch-toggle>span { left:3px; top:11px; width:22px; height:22px; background:#fff; }
.member-row .switch-toggle[aria-checked=true]>span { transform:translateX(18px); }
#menu-button { grid-column:1; grid-row:1; justify-self:start; align-self:center; margin-left:-10px; color:var(--sv-fg-1); }
@media(min-width:641px) { #menu-button { display:none; } }
@media(max-width:640px) {
  .space-menu { inset:0 auto 0 0; width:min(320px,82vw); height:100dvh; max-height:none; margin:0; padding:calc(24px + env(safe-area-inset-top)) 8px calc(24px + env(safe-area-inset-bottom)); border-radius:0 18px 18px 0; overflow-y:auto; }
  .space-menu[open] { animation:drawer-in .26s cubic-bezier(.2,.8,.2,1); }
  .space-menu::backdrop { background:rgb(0 0 0 / 55%); }
}
@keyframes drawer-in { from { transform:translateX(-100%); } to { transform:none; } }
@media (prefers-reduced-motion:reduce) { .space-menu[open] { animation:none; } }
.space-menu :focus { outline:none; }
/* Opening a push page focuses its first header button; don't ring it. */
:is(.push-header button, .sheet-action):focus { outline:none; }
.space-menu, .space-menu:focus, .space-menu:focus-visible { border:0; outline:none; box-shadow:none; }
.push-page > .push-frame { display:flex; flex-direction:column; height:100%; }
@media(max-width:640px) {
  .space-menu { padding-top:calc(74px + env(safe-area-inset-top)); }
  .space-close { position:absolute; top:calc(6px + env(safe-area-inset-top)); left:6px; color:var(--sv-fg-1); }
}
@media(max-width:640px) { .space-menu { padding-inline:24px; } }
.space-menu .space-option { border-bottom-color:var(--sv-surface-2); }
.space-option:has(.space-check) { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.space-check { flex:none; }
.space-group { margin:0 0 8px; border:1px solid var(--sv-border-1); border-radius:14px; background:var(--sv-surface-1); overflow:hidden; }
.space-group .space-option { padding:14px 16px; margin:0; border:0; border-radius:0; background:none; }
.space-group .space-option + .space-option { border-top:1px solid var(--sv-surface-2); }
.space-group .space-new { min-height:52px; color:var(--sv-fg-3); }
.space-label { display:flex; flex-direction:column; gap:2px; min-width:0; }
.space-label strong { font-size:15px; font-weight:500; }
.space-label small { font-size:12px; color:var(--sv-fg-3); }
@media(max-width:640px) { .space-menu { padding-inline:12px; } }
.space-label strong { font-size:inherit; font-weight:400; color:var(--sv-fg-1); }
.space-label small { font-weight:400; }
.space-group .space-new { color:var(--sv-fg-1); }
.space-menu .space-option, .space-label strong { font-size:16px; font-weight:400; letter-spacing:0; }
.space-menu > .space-option { padding-inline:16px; }
#ptt-channels .channel-heading { margin-bottom:-8px; }
#account-gate.has-nav .auth-brand { display:none; }
#account-gate.has-nav { padding-top:calc(56px + env(safe-area-inset-top)); }
.gate-nav { position:fixed; top:0; left:0; right:0; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:calc(56px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 8px 0; background:var(--sv-ink); border-bottom:1px solid var(--sv-surface-2); }
.gate-nav h2 { margin:0; font-size:16px; font-weight:600; }
.gate-nav .sheet-action { justify-self:start; }
@keyframes invite-expand { from { max-height:0; opacity:0; overflow:hidden; } to { max-height:84px; opacity:1; overflow:hidden; } }
.contact-invite-row.invite-expand { animation:invite-expand .22s ease-out; }
@media (prefers-reduced-motion:reduce) { .contact-invite-row.invite-expand { animation:none; } }

/* Organization page: standard list rows */
#page-organization .panel.member-list { border:0; border-radius:0; background:none; }
#page-organization .section-title { margin:32px 0 4px; font-size:13px; font-weight:500; color:var(--sv-fg-3); }
#page-organization .member-row { padding:12px 0; min-height:60px; border-bottom:1px solid var(--sv-surface-2); font-size:15px; }
#page-organization .member-row strong { font-size:15px; font-weight:400; }
#page-organization .member-row .hint { margin:2px 0 0; font-size:12px; }
#page-organization .empty-device { margin:0; padding:16px 0; min-height:56px; border-bottom:1px solid var(--sv-surface-2); font-size:15px; color:var(--sv-fg-3); }
#page-organization .org-invite { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:56px; margin-top:8px; padding:0; border:0; border-bottom:1px solid var(--sv-surface-2); border-radius:0; background:none; color:var(--sv-fg-1); font-size:15px; text-align:left; }
#page-organization .org-invite::after { content:'chevron_right'; font-family:'Material Symbols Outlined'; font-feature-settings:'liga'; font-size:22px; color:var(--sv-fg-3); }
#page-organization .panel.metric { border:0; border-radius:14px; background:var(--sv-surface-1); }
@media(max-width:640px) {
  body.searching .topbar { display:none; }
  body.searching .search-dock { top:0; padding-top:calc(16px + env(safe-area-inset-top)); }
}
.contact-invite-row, .contact-invite-row:focus, .contact-invite-row:active { background:none; box-shadow:none; outline:none; }
@media (hover:hover) { .invite-slot .contact-invite-row:hover { background:var(--sv-surface-1); box-shadow:-16px 0 0 var(--sv-surface-1), 16px 0 0 var(--sv-surface-1); } }
body.searching #page-connect { min-height:100dvh; }
body.searching .directory .contact-group-title:first-child { margin-top:8px; }
body.searching .invite-slot:not(:empty) + .directory .contact-group-title:first-child { margin-top:4px; }
/* Subtle list dividers */
:root { --sv-divider: color-mix(in srgb, var(--sv-fg-1) 7%, transparent); }
.contact-entry:not(:last-child) .contact-info { border-bottom-color:var(--sv-divider); }
.contact-entry:not(:last-child)::after, .channel-row::after { border-bottom-color:var(--sv-divider); }
.voice-entry { border-bottom-color:var(--sv-divider); }
.space-menu .space-option, .thread-header { border-bottom-color:var(--sv-divider); }
.admin-item+.admin-item, .link-invitation, .clip-translation { border-top-color:var(--sv-divider); }
#voice-activity .voice-entry::after { background:var(--sv-divider); }
.channel-row .channel-more { color:var(--sv-fg-2); margin-right:-6px; }
.channel-row .channel-more svg { width:16px; height:16px; }
.walkie-output[hidden], #walkie-output-label:has(+ .walkie-output[hidden]) { display:none; }
.channel-row:hover { background:var(--sv-surface-1); box-shadow:-16px 0 0 var(--sv-surface-1), 16px 0 0 var(--sv-surface-1); }
.channel-row .contact-entry:hover { background:none; box-shadow:none; }
.channel-row .channel-more,.channel-heading .icon-button { border-radius:50%; }
body.searching .contact-entry>.icon { display:none; }
.space-group { border:0; border-radius:0; background:none; overflow:visible; }
.space-group .space-option { padding-inline:4px; }
.space-group .space-new { display:flex; align-items:center; gap:12px; }
.space-group .space-new .icon { font-size:20px; color:var(--sv-fg-3); }
.space-group .space-new .icon svg { display:block; }
#ptt-channels .channel-heading { margin-top:8px; }
.icon-button, .icon-button:hover { border-radius:50%; }
#profile-shortcut { width:44px; min-width:44px; height:44px; margin-inline:-8px; }
.call-card:not([data-state]) { display:none; }
.skeleton-row { display:flex; align-items:center; gap:16px; min-height:76px; padding:10px 4px; }
.skeleton-avatar { width:40px; height:40px; border-radius:50%; flex:none; }
.skeleton-lines { flex:1; display:flex; flex-direction:column; gap:10px; }
.skeleton-lines span { height:12px; border-radius:6px; width:55%; }
.skeleton-lines span+span { width:30%; height:10px; }
.skeleton-avatar,.skeleton-lines span { background:var(--sv-surface-2); animation:skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes skeleton-pulse { 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .skeleton-avatar,.skeleton-lines span { animation:none; } }
.space-option:has(.space-logo) { display:flex; align-items:center; gap:12px; }
.space-option:has(.space-logo) .space-label { flex:1; min-width:0; }
.space-logo { flex:none; width:36px; height:36px; border-radius:8px; background:var(--sv-surface-3); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; overflow:hidden; }
.space-logo img { width:100%; height:100%; object-fit:cover; }
.space-menu .space-label strong { font-weight:600; }
.space-group .space-new .icon { width:36px; flex:none; display:flex; align-items:center; justify-content:center; }
.space-actions { display:flex; flex-direction:column; gap:8px; margin-top:16px; padding-inline:4px; }
.space-actions .space-action { width:100%; min-height:48px; font-size:16px; }
.space-actions .icon svg { display:block; }
@media (max-width:640px) { .space-menu[open] { display:flex; flex-direction:column; } .space-menu .space-actions { margin-top:auto; } }
.space-menu .section-title { margin:0 4px 8px; font-size:14px; font-weight:600; color:var(--sv-fg-1); }
.space-actions .button.secondary { border-color:var(--sv-border-1); }
.output-option[hidden] ~ .output-option { border-top:0; }
#page-device:has(#radio-enable[aria-checked=true]) #device-list:has(.device-empty) { display:none; }
.space-menu .section-title { margin:0 4px 4px; font-size:13px; font-weight:500; color:var(--sv-fg-3); }
.space-actions .button.secondary { background:var(--sv-surface-1); }
.space-actions .space-action { font-size:14px; }
.org-identity { padding:8px 0 24px; gap:22px; }
#page-organization .org-identity .profile-fields { gap:6px; }
.org-logo { border-radius:18px; background-color:var(--sv-surface-3); background-position:center; background-size:cover; display:flex; align-items:center; justify-content:center; }
.org-logo.has-photo > span:not(.profile-photo-edit) { visibility:hidden; }
#page-organization .org-identity .org-name-input { width:100%; height:auto; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:none; color:var(--sv-fg-1); font:inherit; font-size:20px; font-weight:600; line-height:1.25; letter-spacing:0; opacity:1; -webkit-text-fill-color:var(--sv-fg-1); }
#page-organization .org-identity .org-name-input:focus { outline:none; }
#page-organization .org-identity .org-kind { margin:0; padding:0; font-size:15px; line-height:1.3; color:var(--sv-fg-3); }
/* Pull to refresh */
.header-symbol { transition:transform .3s cubic-bezier(.2,.8,.2,1); }
body.pulling .header-symbol { transition:none; }
.header-symbol.refreshing { animation:logo-refresh .6s linear infinite; }
@keyframes logo-refresh { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .header-symbol.refreshing { animation:logo-pulse 1s ease-in-out infinite alternate; } @keyframes logo-pulse { to { opacity:.4; } } }
body.pull-active :is(#activity-view,#contacts-view) { transform:translateY(var(--pull,0px)); transition:transform .45s cubic-bezier(.22,1.2,.36,1); }
body.pulling :is(#activity-view,#contacts-view) { transition:none; }
/* Activity avatars with a sent/received badge */
.voice-entry-contact>.activity-avatar { position:relative; flex:none; display:flex; align-items:center; justify-content:center; width:44px; height:44px; font-size:15px; color:var(--sv-fg-1); background-color:var(--sv-surface-3); background-position:center; background-size:cover; }
.activity-avatar>.activity-direction { position:absolute; right:-4px; bottom:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:linear-gradient(var(--sv-surface-3),var(--sv-surface-3)) var(--sv-ink); color:var(--sv-fg-1); box-shadow:0 0 0 2px var(--sv-ink); }
.activity-avatar>.activity-direction svg { width:12px; height:12px; stroke-width:2.4; }
.voice-entry-contact.contact-recording>.activity-avatar { background-color:var(--sv-red); color:#fff; }
.voice-entry small.failed { color:var(--sv-red); font-weight:600; }
/* Played voice messages get an outlined play button */
.activity-play.played { background:transparent; box-shadow:inset 0 0 0 1.5px var(--sv-border-1); }
/* Swipe to delete */
.voice-swipe { position:relative; overflow:hidden; }
.voice-swipe>.voice-entry { background:var(--sv-ink); touch-action:pan-y; }
.voice-swipe-delete { position:absolute; inset:0 0 0 auto; width:88px; border:0; background:var(--sv-red); color:#fff; font:inherit; font-size:15px; font-weight:600; visibility:hidden; }
.voice-swipe.swiping>.voice-swipe-delete { visibility:visible; }
/* Bottom action sheet */
.action-sheet { position:fixed; inset:auto 0 0 0; width:100%; max-width:none; margin:0; padding:0 8px calc(8px + env(safe-area-inset-bottom)); border:0; background:none; }
.action-sheet::backdrop { background:rgb(0 0 0 / 50%); }
.action-sheet[open] { animation:sheet-up .28s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-up { from { transform:translateY(100%); } }
.action-sheet-panel { display:flex; flex-direction:column; gap:8px; }
.action-sheet-group { display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:linear-gradient(var(--sv-surface-3),var(--sv-surface-3)) var(--sv-ink); }
.action-sheet-title { margin:0; padding:14px 16px; text-align:center; font-size:13px; color:var(--sv-fg-3); }
.action-sheet-button { min-height:56px; border:0; border-top:1px solid var(--sv-border-1); background:none; color:var(--sv-fg-1); font:inherit; font-size:17px; cursor:pointer; }
.action-sheet-button.danger { color:var(--sv-red); }
.action-sheet-cancel { border:0; border-radius:14px; font-weight:600; background:linear-gradient(var(--sv-surface-3),var(--sv-surface-3)) var(--sv-ink); }
@media (prefers-reduced-motion:reduce) { .action-sheet[open] { animation:none; } }
.action-sheet-button:focus { outline:none; }
.action-sheet-button:focus-visible { background:var(--sv-surface-2); }
/* Wearables upsell sits on the page, no card; product images are transparent */
.device-card.device-shop { padding:8px 0 0; border:0; border-radius:0; background:none; overflow:visible; }
.device-shop .wearable-list { margin:16px -16px 0; padding:0 16px 4px; scroll-padding:0 16px; }
.wearable-media, .wearable-media:has(img) { background:none; }
.wearable-media img { padding:8px; }
/* Wearables heading matches the walkie-talkie card above */
#device-list .device-shop h3 { font-size:17px; font-weight:600; line-height:1.3; }
#device-list .device-shop > p { margin-top:4px; font-size:12px; line-height:1.4; color:var(--sv-fg-3); }
#device-list .wearable-option strong { font-size:15px; }
#device-list .wearable-option small { font-size:12px; line-height:1.4; }
#device-list .wearable-list { gap:12px; }
#device-list .wearable-option { flex:0 0 42%; max-width:170px; }
#device-list .wearable-media { aspect-ratio:3/2; margin-bottom:24px; }
#device-list .wearable-media img { padding:0; }
/* The clip-on photo is tightly cropped and portrait; inset it so it reads at the same scale as the others */
#device-list .wearable-media img[src*="clip-on"] { padding:6px; }
/* Indent the wearables section to line up with the walkie-talkie card's inner padding */
#device-list .device-card.device-shop { padding-left:0; padding-right:0; }
#device-list .device-shop .wearable-list { margin:16px -16px 0; padding:0 16px 4px; scroll-padding:0 16px; }
#device-list .wearable-option { flex:0 0 80%; max-width:340px; }
#device-list .wearable-media { aspect-ratio:4/3; }
#device-list .wearable-actions { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
#device-list .wearable-action { width:100%; min-height:40px; padding:8px 12px; font-size:12px; text-decoration:none; justify-content:center; }
/* Pin each wearable's buttons to the bottom so they line up across items */
#device-list .wearable-list { align-items:stretch; }
#device-list .wearable-actions { margin-top:auto; padding-top:12px; }
#device-list .wearable-action.secondary { border-color:transparent; background:var(--sv-surface-1); color:var(--sv-fg-1); }
/* Each wearable sits in its own card, matching the walkie-talkie card above */
#device-list .wearable-option { padding:16px; border:1px solid var(--sv-surface-2); border-radius:16px; background:none; }
#device-list .wearable-option .wearable-action.secondary { background:var(--sv-surface-2); }
#voice-activity .voice-entry-contact { gap:20px; }
/* Bottom tabs: no fill on tap, hover or focus (iOS keeps :hover after a tap) */
.primary-tabs .nav-item, .primary-tabs .nav-item:hover, .primary-tabs .nav-item:focus, .primary-tabs .nav-item:active, .primary-tabs .nav-item.active { background:none; -webkit-tap-highlight-color:transparent; }
.primary-tabs .nav-item:focus-visible { outline:none; }
/* Push-to-talk button in conversations is yellow; red while recording */
#ptt-talk:not(.recording) { background:var(--sv-yellow); border-color:var(--sv-yellow); color:#10011b; }
#thread-call, #thread-call:disabled { width:40px; min-width:40px; height:40px; border-radius:50%; background:none; color:var(--sv-yellow); opacity:1; }
#voice-thread .thread-header .avatar + div { margin-left:6px; }
/* Bubble timestamps appear on tap */
#voice-thread .voice-clip .clip-time { display:none; }
#voice-thread .voice-clip.show-time .clip-time { display:block; }
#voice-thread .voice-clip { cursor:pointer; -webkit-tap-highlight-color:transparent; }
#voice-thread .clip-controls strong { display:block; line-height:1.25; }
#voice-thread .clip-controls p { margin-top:1px; line-height:1.25; }
#thread-call svg { display:block; margin:auto; width:24px; height:24px; }

/* Incoming and connected calls take over the whole screen. */
#call-active > #enable-call-sound { flex:none; margin:16px 0; min-height:44px; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) { position:fixed; inset:0; z-index:60; margin:0; border:0; border-radius:0; display:flex; flex-direction:column; background:var(--sv-ink); padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); overflow-y:auto; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #call-heading, .call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .language-setting, .call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-language .icon { display:none; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #call-active:not([hidden]) { flex:1; display:flex; flex-direction:column; align-items:center; padding:0 24px 32px; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-person { flex-direction:column; text-align:center; gap:32px; margin:auto 0 16px; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-avatar { width:168px; height:168px; font-size:56px; }
:root:not(.native-app) .call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-avatar { width:240px; height:240px; font-size:80px; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-person h3 { font-size:30px; line-height:1.2; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-person p { margin:8px 0 0; font-size:16px; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-language { flex-wrap:wrap; justify-content:center; row-gap:0; font-size:14px; line-height:1.3; text-align:center; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #translation-mode { display:contents; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #translation-mode span { display:block; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #translation-mode span+span { order:-1; flex-basis:100%; margin:0 0 8px; color:var(--sv-fg-3); }
:root:not(.native-app) .call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #translation-mode span+span { margin-bottom:10px; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #translation-mode span+span::before { content:none; }
#translation-mode span+span::before { content:' · '; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-actions { order:2; flex-direction:column; flex-wrap:nowrap; width:100%; max-width:440px; gap:12px; margin:auto 0 0; padding-top:40px; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) .call-actions .button { flex:none; width:100%; min-height:64px; border-radius:32px; border:0; font-size:19px; font-weight:600; white-space:nowrap; }
.call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #hangup { background:#df5353; color:#10011b; }
:root:not(.native-app) .call-card:is([data-state='incoming'],[data-state='connected']):not([data-minimized]) #hangup { background:#f2454d; }
.call-card[data-state='incoming'] .panel-heading { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.call-card[data-state='incoming'] .call-person>div:last-child { display:contents; }
.call-card[data-state='incoming'] .call-person p { order:-1; margin:0; }
.call-card[data-state='incoming'] #hangup { order:-1; }
.call-card[data-state='incoming'] #accept { background:var(--sv-green); color:#10011b; }
.call-card[data-state='connected']:not([data-minimized]) .panel-heading { flex:1; align-items:flex-end; justify-content:center; padding-bottom:0; }
.call-card[data-state='connected']:not([data-minimized]) .call-person { margin-top:32px; }
.call-card[data-state='connected']:not([data-minimized]) #call-active:not([hidden]) { flex:1 1 auto; }
.call-card[data-state='connected']:not([data-minimized]) .call-state { font-size:15px; }
.call-card[data-state='connected']:not([data-minimized]) .call-state::before { content:none; }
.call-card[data-state='connected']:not([data-minimized]) #remote-video-panel { order:1; width:100%; max-width:440px; }
.call-card[data-state='connected']:not([data-minimized]) :is(.remote-activity, .call-person p) { display:none; }
/* Connected calls: round mute/speaker controls above a full-width End call. */
.call-card[data-state='connected']:not([data-minimized]) .call-actions { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:48px 24px; }
.call-card[data-state='connected']:not([data-minimized]) .call-actions .button { flex:0 0 100%; }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes, #video-toggle) { order:-1; position:relative; isolation:isolate; flex:0 0 88px; display:flex; flex-direction:column; align-items:center; gap:29px; width:88px; min-height:0; height:auto; padding:21px 0 0; border-radius:16px; background:none; color:var(--sv-fg-2); font-size:13px; font-weight:500; }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes, #video-toggle)::before { content:''; position:absolute; z-index:-1; top:0; left:8px; width:72px; height:72px; border-radius:50%; background:var(--sv-surface-2); }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes, #video-toggle) .icon { color:var(--sv-fg-1); }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes)[aria-pressed='true'] { box-shadow:none; background:none; color:var(--sv-fg-2); }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes)[aria-pressed='true']::before { background:var(--sv-fg-1); }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes)[aria-pressed='true'] .icon { color:var(--sv-ink); }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes, #video-toggle):focus-visible { outline:none; }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes, #video-toggle):focus-visible::before { outline:2px solid var(--sv-fg-1); outline-offset:3px; }
.call-card[data-state='connected']:not([data-minimized]) :is(#mute, #speaker, #notes) .icon { width:30px; height:30px; font-size:0; background:currentColor; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat; }
.call-card[data-state='connected']:not([data-minimized]) #mute .icon { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E"); }
.call-card[data-state='connected']:not([data-minimized]) #mute[aria-pressed='true'] .icon { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z'/%3E%3C/svg%3E"); }
.call-card[data-state='connected']:not([data-minimized]) #speaker .icon { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E"); }
.native-app .call-card[data-state='connected']:not([data-minimized]) #speaker:not([aria-pressed='true']) .icon { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E"); }
.call-card[data-state='connected']:not([data-minimized]) #notes .icon { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.call-card[data-state='connected']:not([data-minimized]) #notes:not([aria-pressed='true']) .icon { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M2.5 2.5l19 19' stroke='black' stroke-width='5'/%3E%3C/mask%3E%3Cpath mask='url(%23m)' d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3Cpath d='M3 3l18 18' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Filled call glyphs; the bundled icon font subset is outline-only. */
#accept .icon, #hangup .icon { font-size:0; background:currentColor; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat; }
#accept .icon { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 0 0-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/%3E%3C/svg%3E"); }
#hangup .icon { --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08a.956.956 0 0 1-.29-.7c0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28a11.27 11.27 0 0 0-2.67-1.85.996.996 0 0 1-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z'/%3E%3C/svg%3E"); }
#accept .icon, #hangup .icon { width:24px; height:24px; }
.call-card[data-state='incoming'] #accept .icon, .call-card[data-state='incoming'] #hangup .icon { width:28px; height:28px; }
.ios-app .call-card[data-state='connected']:not([data-minimized]) .call-actions .button { font-size:16px; }

/* Call notes in voice note history. */
.clip-notes { margin-top:10px; }
.clip-transcript { margin-top:8px; }
.clip-transcript summary { cursor:pointer; color:var(--sv-fg-3); font-size:12px; }

/* iOS: SF Symbols drawn by the app replace Material icons (see ios-icons.js). */
.system-icons .icon[data-sf] { font-size:0 !important; background:currentColor; -webkit-mask:var(--sf) center/contain no-repeat !important; mask:var(--sf) center/contain no-repeat !important; }
.system-icons .icon[data-sf] > svg, .system-icons :is(#menu-button, #thread-call, #call-minimize) > svg { display:none; }
.system-icons :is(#menu-button, #call-minimize) > .icon { width:22px; height:22px; }
.system-icons #thread-call > .icon { width:26px; height:26px; }

/* Collapse the full-screen call into a compact card at the top of Activity; tap the card to return. */
#call-minimize { display:none; }
.call-card[data-state='connected']:not([data-minimized]) #call-minimize { display:inline-flex; position:absolute; z-index:1; top:calc(env(safe-area-inset-top) + 8px); right:12px; color:var(--sv-fg-1); }
.call-card[data-minimized] { cursor:pointer; -webkit-tap-highlight-color:transparent; border-color:var(--sv-green); }
.call-card[data-minimized] :is(.language-setting, #remote-video-panel, .remote-activity, #speaker, #notes, #video-toggle, .call-language) { display:none !important; }
.call-card[data-minimized] #call-active { display:flex; align-items:center; gap:12px; }
.call-card[data-minimized] .call-person { flex:1; min-width:0; margin:0; }
.call-card[data-minimized] .call-actions { flex-wrap:nowrap; margin:0; }
.call-card[data-minimized] #call-detail { font-variant-numeric:tabular-nums; }
.system-icons .icon[data-sf-badge] > svg { display:none; }
.system-icons .icon[data-sf-badge] > .sf-glyph { width:45%; height:45%; background:currentColor; -webkit-mask:var(--sf) center/contain no-repeat; mask:var(--sf) center/contain no-repeat; }
.system-icons .sidebar .nav-item .icon { height:30px; }
.ios-app .sidebar { height:calc(78px + env(safe-area-inset-bottom)); }
.ios-app .sidebar nav { height:77px; }
.ios-app .sidebar .nav-item { min-height:76px; }
.ios-app .assistant-card { bottom:calc(78px + env(safe-area-inset-bottom)); }
.ios-app #page-connect { padding-bottom:calc(var(--assistant-height) + 98px + env(safe-area-inset-bottom)); }
/* Wide symbols (people, devices) match the waveform's height instead of shrinking to fit a square. */
.system-icons .sidebar .nav-item .icon { width:44px; }
.voice-entry strong { line-height:1.25; }
.voice-entry small { margin-top:2px; }
.system-icons .message-play .icon { width:16px; height:16px; }
.system-icons :is(#tab-contacts, #tab-device) .icon { height:30px; width:34px; -webkit-mask-size:28px auto !important; mask-size:28px auto !important; }
.system-icons #tab-contacts .icon { width:40px; -webkit-mask-size:34px auto !important; mask-size:34px auto !important; }
.device-shop-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.device-shop-heading .icon { color:var(--sv-fg-3); transition:transform .2s; }
.device-shop-heading .icon { display:inline-block; flex:none; font-size:16px; width:16px; height:16px; }
.device-shop.collapsed .device-shop-heading .icon { transform:rotate(180deg); }
.device-shop.collapsed > :not(.device-shop-heading) { display:none; }
/* Conversation bubbles: smaller play button and glyph */
#voice-thread .clip-controls .icon-button { width:30px; min-width:30px; height:30px; }
#voice-thread .clip-controls .icon-button .icon { display:inline-block; width:16px; height:16px; font-size:16px; }
/* Tighten the gap between the back arrow and the contact avatar */
#voice-thread #thread-back { margin-left:-12px; margin-right:-12px; }
/* Conversation bubbles: smaller glyph; messages you've heard get an outlined circle */
#voice-thread .clip-controls .icon-button .icon { width:12px; height:12px; font-size:12px; }
#voice-thread .clip-controls .icon-button.played { background:transparent; box-shadow:inset 0 0 0 1px var(--sv-border-1); }
/* Hold your own bubble for Edit text / Unsend; no iOS callout or text selection */
.voice-clip.own-actions { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
/* Edit text sheet */
.edit-sheet-form { padding:0 16px 16px; }
.edit-sheet-form textarea { display:block; width:100%; min-height:112px; max-height:40vh; padding:12px 14px; border:1px solid var(--sv-border-1); border-radius:12px; background:var(--sv-surface-1); color:var(--sv-fg-1); font:inherit; font-size:16px; line-height:1.45; resize:vertical; }
.edit-sheet-form textarea:focus { outline:none; border-color:var(--sv-fg-3); }
/* Edit sheet: Cancel and Save are text buttons in the header, iOS style */
.edit-sheet-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:52px; margin-bottom:4px; }
.edit-sheet-header .sheet-action { padding:8px 0; border:0; background:none; color:var(--sv-fg-1); font:inherit; font-size:17px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.edit-sheet-header .sheet-action:first-child { justify-self:start; }
.edit-sheet-header .edit-sheet-save { justify-self:end; font-weight:600; color:var(--sv-yellow); }
.edit-sheet-header .edit-sheet-save:disabled { opacity:.4; cursor:default; }
.edit-sheet-title { margin:0; font-size:15px; font-weight:600; color:var(--sv-fg-1); }
/* Sending… with Cancel on your newest message */
#voice-thread .clip-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#voice-thread .clip-cancel { min-height:28px; margin:-6px -8px -6px 0; padding:4px 8px; font-size:13px; color:var(--sv-fg-2); text-decoration:none; flex:none; }
.clip-sending { opacity:.85; }
.sending-dots::after { content:'…'; display:inline-block; width:1.2em; text-align:left; animation:sending-dots 1.2s steps(4,end) infinite; overflow:hidden; vertical-align:bottom; }
@keyframes sending-dots { from { width:0; } to { width:1.2em; } }
@media (prefers-reduced-motion:reduce) { .sending-dots::after { animation:none; } }
/* Live recording bubble at the bottom of the conversation */
.recording-clip { min-width:240px; border-color:color-mix(in srgb, var(--sv-red) 45%, transparent); }
.recording-meta { margin:0 0 10px; font-size:12px; font-weight:600; color:var(--sv-red); font-variant-numeric:tabular-nums; }
.recording-meta::before { content:''; display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:currentColor; vertical-align:1px; animation:rec-blink 1s steps(2,start) infinite; }
.recording-bars { display:flex; align-items:center; gap:3px; height:32px; }
.recording-bars i { flex:1; min-width:2px; height:12%; border-radius:2px; background:var(--sv-fg-1); transition:height .08s linear; }
/* Native capture doesn't stream levels to the page, so animate until real levels arrive */
.recording-clip:not(.live) .recording-bars i { animation:soundbar .9s ease-in-out infinite; }
.recording-clip:not(.live) .recording-bars i:nth-child(3n) { animation-delay:-.3s; } .recording-clip:not(.live) .recording-bars i:nth-child(3n+1) { animation-delay:-.6s; }
@keyframes rec-blink { to { visibility:hidden; } }
@media (prefers-reduced-motion:reduce) { .recording-meta::before, .recording-clip:not(.live) .recording-bars i { animation:none; } }
/* Activity list: smaller play circles, matching the conversation */
#voice-activity .activity-play { width:34px; min-width:34px; height:34px; }
#voice-activity .activity-play .icon { display:inline-block; width:14px; height:14px; font-size:14px; }
#voice-activity .activity-play.played { box-shadow:inset 0 0 0 1px var(--sv-border-1); }
/* Toasts: centered frosted pill */
.toast { left:50%; right:auto; transform:translateX(-50%); width:max-content; max-width:min(460px, calc(100% - 32px)); padding:12px 20px; border:1px solid color-mix(in srgb, var(--sv-fg-1) 12%, transparent); border-radius:999px; background:color-mix(in srgb, var(--sv-surface-3) 60%, transparent); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); color:var(--sv-fg-1); font-size:14px; text-align:center; box-shadow:0 8px 32px #0004; }
@media(max-width:640px) { .toast { right:auto; } }
/* SiteVue Devices heading: smaller, inset from the card edges */
#device-list .device-shop h3 { font-size:15px; }
#device-list .device-shop-heading { padding-inline:8px; box-sizing:border-box; }