/* The supplied SiteVue Communicator reference, adapted to real device sizes. */
.header-symbol { 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; }
.comms-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--sv-border-1); margin-bottom:12px; }
.comms-tabs button { border:0; border-bottom:1px solid transparent; background:none; color:var(--sv-fg-4); font-weight:600; min-height:48px; }
.comms-tabs button[aria-selected='true'] { color:var(--sv-fg-1); border-bottom-color:var(--sv-fg-1); }
.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-assistant,.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-assistant>span:nth-child(2),.contact-entry .contact-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.contact-assistant strong,.contact-entry strong { display:block; font-size:15px; font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.contact-assistant small,.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,.contact-assistant>.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-entry:hover,.contact-assistant: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:16px 16px 4px 16px; background:var(--sv-surface-3); border:1px solid var(--sv-border-1); }
.voice-clip.incoming { align-self:flex-start; margin:0; border-radius:16px 16px 16px 4px; 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:8px; 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; min-height:calc(54px + env(safe-area-inset-top)); border:0; padding:calc(6px + env(safe-area-inset-top)) 16px 6px; }
 .header-symbol { display:block; position:absolute; top:calc(17px + env(safe-area-inset-top)); left:calc(50% - 12px); filter:invert(1); }
 [data-theme='light'] .header-symbol { filter:none; }
 .breadcrumb>span { display:none!important; } #org-switch { max-width:110px; font-size:10px; padding:6px 16px 6px 0; background:none; font-weight:400; color:var(--sv-fg-4); }
 .topbar-right { gap:4px; } #theme-toggle { display:none; }.system-state #connection-label { display:none; }
 #page-connect { padding:0 16px calc(var(--assistant-height) + 82px + env(safe-area-inset-bottom)); }
 #page-connect>.page-heading { display:none; }
 .comms-tabs { margin:0 -16px 12px; position:sticky; top:0; z-index:4; background:var(--sv-ink); }.comms-tabs button { min-height:44px; }
 .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:none; }.sidebar .nav-item .icon { font-size:24px; }
 .sidebar .nav-item.active { box-shadow:none; background:none; }.sidebar .nav-item:not(.active) { opacity:.6; }
 .sidebar .nav-item[data-page='voice'],.sidebar .nav-item[data-page='organization'],.sidebar .nav-item[data-page='admin'] { display:none!important; }
 .sidebar .nav-item[data-page='people'] { order:1; }.sidebar .nav-item[data-page='device'] { order:2; }
 .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:14px; }.directory-search input::placeholder { font-size:14px; }
 .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}