#intercomPage { --intercom-accent: #53d9bd; }
.intercom-notice { display: flex; align-items: center; gap: 12px; padding: 15px 18px; margin-bottom: 20px; border: 1px solid #3c4853; border-radius: 13px; background: #121c25; }
.intercom-notice-dot { width: 8px; height: 8px; flex: 0 0 8px; background: #edbd65; border-radius: 50%; }
.intercom-notice strong { color: #e9d5af; font-size: 12px; }
.intercom-notice p { color: #9fb0c3; font-size: 11px; line-height: 1.7; margin: 4px 0 0; }
.intercom-tag { margin-left: auto; flex-shrink: 0; border: 1px solid #465160; padding: 5px 9px; border-radius: 20px; color: #9cadc1; font: 10px ui-monospace, monospace; }
.intercom-layout { display: grid; grid-template-columns: minmax(270px, .78fr) minmax(0, 1.7fr); gap: 20px; }
.intercom-panel { min-width: 0; border: 1px solid #2b3a4d; border-radius: 18px; padding: 23px; background: linear-gradient(140deg, #131e2b, #0e1620); }
.intercom-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.intercom-panel h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.intercom-panel .eyebrow { font-size: 9px; margin-bottom: 8px; }
.intercom-director-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #2c645d; border-radius: 13px; background: #15352e; color: var(--intercom-accent); }
.intercom-director-state { display: flex; align-items: center; gap: 8px; margin-bottom: 23px; color: #98aabf; font-size: 11px; }
.intercom-director-state i { width: 6px; height: 6px; background: #75879d; border-radius: 50%; }
.intercom-device-fields label { margin: 15px 0 7px; font-size: 11px; }
.intercom-device-fields select { display: block; width: 100%; padding: 11px; border: 1px solid #34475e; border-radius: 9px; background: #0a111b; color: #e9f0fb; font: 12px system-ui, sans-serif; }
.intercom-device-note { min-height: 18px; font-size: 10px; color: #899db5; line-height: 1.7; margin: 10px 0 20px; }
.intercom-meter-heading, .intercom-volume-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.intercom-meter-heading span { color: #91a6bf; font: 9px ui-monospace, monospace; letter-spacing: .1em; }
.intercom-meter-heading small { color: #6e829a; font-size: 9px; }
.intercom-meter { height: 9px; border-radius: 3px; overflow: hidden; background: repeating-linear-gradient(90deg, #213244 0, #213244 8px, transparent 8px, transparent 11px); margin-bottom: 24px; }
.intercom-meter span { display: block; height: 100%; width: 0; background: var(--intercom-accent); }
.intercom-volume-heading label { margin: 0; font-size: 11px; }
.intercom-volume-heading output { color: #c5d4e6; font: 11px ui-monospace, monospace; }
#intercomVolume { display: block; width: 100%; padding: 0; height: 18px; margin: 0 0 22px; border: 0; accent-color: var(--intercom-accent); background: transparent; cursor: pointer; }
.intercom-mode-label { font-size: 11px; margin-bottom: 7px; }
.intercom-mode-select { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #34475e; border-radius: 9px; background: #0a111b; color: #e9f0fb; font: 12px system-ui, sans-serif; }
.intercom-director-state.connected { color: #69dfb9; }
.intercom-director-state.connected i, .intercom-member.audio-connected .intercom-member-presence i { background: #53d9bd; }
.intercom-member.audio-connected .intercom-member-presence { color: #69dfb9; }
.intercom-member.mic-open { box-shadow: inset 0 0 0 1px #4b9f87; }
.intercom-diagnostics { font-size: 10px; color: #9ab3ca; margin-top: 15px; }
.intercom-diagnostics p { font-family: ui-monospace, monospace; line-height: 1.8; }
.intercom-setup { margin-top: 20px; }
.intercom-setup summary { color: #cde0ee; font-size: 13px; font-weight: 700; cursor: pointer; }
.intercom-setup p, .intercom-setup li { font-size: 11px; color: #9cb2ca; line-height: 1.9; }
.intercom-setup li { margin-bottom: 5px; }
.intercom-setup a { color: #9dcaff; font-size: 12px; overflow-wrap: anywhere; }
.intercom-setup code { display: block; margin: 12px 0; font-size: 10px; color: #a9c0d5; overflow-wrap: anywhere; }
.intercom-director-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.intercom-director-actions button { min-height: 44px; font-size: 11px; padding: 10px 8px; }
#intercomMute[aria-pressed="true"] { border-color: #904250; background: #3a1d28; color: #ff9fac; }
.intercom-director-footnote { color: #8197b0; font-size: 10px; line-height: 1.8; margin: 18px 0 0; }
.intercom-team-count { font: 10px ui-monospace, monospace; color: #91a6bf; white-space: nowrap; }
.intercom-route-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 17px; border-bottom: 1px solid #29394d; margin-bottom: 17px; }
.intercom-channel { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #a3b7cc; }
.intercom-channel i { width: 6px; height: 6px; border-radius: 50%; background: #4e6c87; }
#intercomTalkAll { margin: 0; padding: 8px 12px; min-height: 38px; }
#intercomTalkAll[aria-pressed="true"] { border-color: #347e70; background: #15382f; color: #72e8c8; }
.intercom-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.intercom-member { position: relative; min-width: 0; padding: 13px 14px 12px; border: 1px solid #2d3c50; border-radius: 12px; background: #0d1621; }
.intercom-member.selected { border-color: #356f66; background: #102522; }
.intercom-member-label { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.intercom-member-label input { margin: 0; padding: 0; width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--intercom-accent); cursor: pointer; }
.intercom-member-info { min-width: 0; }
.intercom-member-number { display: block; margin-bottom: 5px; color: #6f8ba1; font: 9px ui-monospace, monospace; letter-spacing: .09em; }
.intercom-member-name { display: block; font-size: 13px; color: #d8e6ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intercom-member-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #273d3b; margin-top: 11px; padding-top: 9px; }
.intercom-member-presence { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #809b9c; }
.intercom-member-presence i { width: 5px; height: 5px; border-radius: 50%; background: #65817f; }
.intercom-member-footer a { color: #93b7c0; text-decoration: none; font-size: 9px; }
.intercom-member-footer a:hover { color: #dcf2f7; }
.intercom-receive-help { margin: -3px 0 15px; color: #8fa9bd; font-size: 10px; line-height: 1.8; }
.intercom-member-audio { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: stretch; gap: 8px; margin-top: 11px; }
.intercom-receive-monitor { min-width: 0; padding: 5px 7px 3px; border: 1px solid #263e40; border-radius: 8px; background: #0a171b; }
.intercom-receive-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: #7e9f9f; font: 8px ui-monospace, monospace; }
.intercom-receive-heading > span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.intercom-receive-heading i { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: #516b70; }
.intercom-receive-heading output { color: #98b5b5; font-size: 8px; }
.intercom-waveform { display: block; width: 100%; height: 28px; margin-top: 4px; overflow: hidden; }
.intercom-waveform path { fill: none; vector-effect: non-scaling-stroke; }
.intercom-waveform-baseline { stroke: #345152; stroke-width: 1; stroke-dasharray: 2 4; }
.intercom-waveform-line { stroke: #526e74; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.audio-connected .intercom-waveform-line { stroke: #6bddbf; }
.receiving-audio .intercom-receive-heading i { background: #66f0c5; box-shadow: 0 0 7px #5bdab999; }
.receiving-audio .intercom-receive-heading output { color: #92efd2; }
.intercom-receive-mute { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 5px 2px; border: 1px solid #3c5659; border-radius: 8px; background: #16302f; color: #b9d9d0; font: 600 9px system-ui, sans-serif; cursor: pointer; }
.intercom-receive-mute:hover { border-color: #74ac9d; background: #21403a; }
.intercom-receive-mute .mute-slash { display: none; }
.receive-muted .intercom-receive-mute { color: #ffd19b; border-color: #986c3b; background: #3c2c1d; }
.receive-muted .intercom-receive-mute .mute-slash { display: block; }
.receive-muted .intercom-waveform-line { stroke: #b89162; }
.receive-muted.receiving-audio .intercom-receive-heading output { color: #f6ce9b; }
.receive-muted .intercom-receive-heading i { background: #987046; }
.receive-muted.receiving-audio .intercom-receive-heading i { background: #edb873; box-shadow: 0 0 7px #edb87388; }
.intercom-talk-console { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 19px 0 0; margin-top: 19px; border-top: 1px solid #2d3d50; }
.intercom-talk-console strong { font-size: 13px; display: block; color: #d4e6df; overflow-wrap: anywhere; }
.intercom-talk-console p:last-child { margin: 7px 0 0; color: #839eb0; font-size: 10px; line-height: 1.7; }
.intercom-ptt { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 60px; padding: 12px 18px; border: 1px solid #347d6d; border-radius: 13px; background: #194a3c; color: #b4f6de; font: 700 12px system-ui, sans-serif; cursor: pointer; user-select: none; touch-action: none; }
.intercom-ptt:hover { background: #225f4f; }
.intercom-ptt[aria-pressed="true"] { background: #53d9bd; color: #07251d; border-color: #7cf3d9; }
#intercomPage button:focus-visible, #intercomPage select:focus-visible, #intercomPage input:focus-visible, #intercomPage a:focus-visible { outline: 2px solid #8cbaf1; outline-offset: 3px; }
@media (max-width: 950px) { .intercom-layout { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.25fr); } .intercom-panel { padding: 18px; } .intercom-talk-console { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .intercom-layout { grid-template-columns: 1fr; } .intercom-notice { align-items: flex-start; } .intercom-notice-dot { margin-top: 4px; } .intercom-tag { display: none; } }
@media (max-width: 400px) { .intercom-member-grid { grid-template-columns: 1fr; } }