.sp-voice-channels, .sp-voice-dock { --voice-positive: #5bdfaf; --voice-error: #ff9ba6; }
[data-theme="light"] .sp-voice-channels, [data-theme="light"] .sp-voice-dock { --voice-positive: #177658; --voice-error: #a12e4b; }
.sp-voice-channels { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line, #292832); }
.sp-voice-heading { margin: 0 8px 8px; color: var(--muted, #9a91ac); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.sp-voice-channel-list { display: grid; gap: 5px; }
.sp-voice-channels .sp-voice-featured { display: flex; align-items: center; width: 100%; min-height: 47px; gap: 7px; margin: 0 0 7px; padding: 6px 7px; text-align: left; border: 1px solid color-mix(in srgb, var(--voice-positive) 31%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--voice-positive) 10%, var(--chat-panel)); color: var(--text); }
.sp-voice-featured-icon { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--voice-positive) 12%, transparent); color: var(--voice-positive); }
.sp-voice-featured-copy { min-width: 0; flex: 1; }
.sp-voice-featured-copy > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-voice-featured-copy strong { font-size: 13px; }
.sp-voice-featured-copy small { color: var(--muted); font-size: 11px; }
.sp-voice-featured-action { color: var(--voice-positive); font-size: 11px; font-weight: 650; }
.sp-voice-room { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted, #9a91ac); text-align: left; }
.sp-voice-room > svg { flex: none; }
.sp-voice-room strong { min-width: 0; overflow: hidden; color: var(--text, #f4effc); text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
.sp-voice-room:not(:disabled):hover { background: var(--surface-2, #221f2d); }
.sp-voice-room.is-active { border-color: color-mix(in srgb, var(--voice-positive) 26%, var(--line, #292832)); background: color-mix(in srgb, var(--voice-positive) 11%, var(--surface, #191923)); color: var(--voice-positive); }
.sp-voice-room.is-active:not(:disabled):hover { background: color-mix(in srgb, var(--voice-positive) 16%, var(--surface, #191923)); }
.sp-voice-room.is-joining { border-style: dashed; }
.sp-voice-room:disabled:not(.is-joining) { cursor: default; }
.sp-voice-count { display: flex; flex: none; align-items: center; gap: 3px; margin-left: auto; color: var(--muted, #9a91ac); font-size: 11px; font-variant-numeric: tabular-nums; }
.sp-voice-room.is-active .sp-voice-count { color: inherit; }
.sp-voice-members { display: grid; gap: 5px; margin: 5px 0 7px 17px; padding: 0 0 0 10px; border-left: 1px solid var(--line, #292832); list-style: none; }
.sp-voice-members li { display: flex; min-width: 0; align-items: center; gap: 6px; color: var(--muted, #9a91ac); font-size: 11px; }
.sp-voice-member-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-voice-avatar { display: grid; flex: none; width: 22px; height: 22px; place-items: center; overflow: hidden; border-radius: 7px; background: color-mix(in srgb, var(--voice-avatar) 85%, #211a30); color: #fff; font-size: 8px; font-weight: 750; transition: box-shadow 140ms ease-out; }
.sp-voice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-voice-members .is-speaking .sp-voice-avatar { box-shadow: 0 0 0 2px var(--voice-positive), 0 0 8px color-mix(in srgb, var(--voice-positive) 44%, transparent); }
.sp-voice-member-muted, .sp-voice-member-connection { display: grid; flex: none; place-items: center; margin-left: auto; color: var(--muted, #9a91ac); }
.sp-voice-member-muted:not([hidden]) + .sp-voice-member-connection { margin-left: 0; }
.sp-voice-member-connection[data-voice-connection="connecting"] { color: var(--accent, #a986ff); }
.sp-voice-member-connection[data-voice-connection="failed"] { color: var(--voice-error); }
.sp-voice-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sp-voice-dock { position: fixed; z-index: 25; right: 22px; bottom: 22px; display: flex; width: min(298px, calc(100vw - 32px)); min-height: 54px; align-items: center; gap: 8px; padding: 6px; border: 1px solid color-mix(in srgb, var(--voice-positive) 31%, var(--line, #292832)); border-radius: 13px; background: var(--surface, #191923); color: var(--text, #f4effc); box-shadow: 0 9px 35px #0005; }
.sp-voice-dock[hidden] { display: none; }
.sp-voice-dock button { font: inherit; cursor: pointer; }
.sp-voice-dock button:focus-visible { outline: 2px solid var(--accent, #a986ff); outline-offset: 2px; }
.sp-voice-dock-room { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; padding: 2px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; }
.sp-voice-dock-room:hover { background: var(--surface-2, #221f2d); }
.sp-voice-dock-icon { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--voice-positive) 14%, var(--surface, #191923)); color: var(--voice-positive); }
.sp-voice-dock.is-joining .sp-voice-dock-icon { background: color-mix(in srgb, var(--accent, #a986ff) 14%, var(--surface, #191923)); color: var(--accent, #a986ff); }
.sp-voice-dock-info { min-width: 0; }
.sp-voice-dock-info strong, .sp-voice-dock-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-voice-dock-info strong { font-size: 13px; }
.sp-voice-dock-info small { margin-top: 2px; color: var(--muted, #9a91ac); font-size: 11px; }
.sp-voice-dock-actions { display: flex; flex: none; align-items: center; gap: 5px; }
.sp-voice-dock-actions button { display: grid; width: 35px; height: 35px; place-items: center; padding: 0; border: 1px solid var(--line, #292832); border-radius: 8px; background: var(--surface-2, #221f2d); color: var(--text, #f4effc); }
.sp-voice-dock-actions button:hover { filter: brightness(1.15); }
.sp-voice-dock-actions button:disabled { opacity: .5; cursor: default; }
.sp-voice-dock-actions [aria-pressed="true"] { color: var(--accent, #a986ff); }
.sp-voice-dock-actions [data-voice-control="leave"] { border-color: #893653; background: #893653; color: #fff; }

.sp-voice-dialog {
  box-sizing: border-box;
  width: min(500px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 18px;
  border: 1px solid var(--line, #292832);
  border-radius: 22px;
  background: var(--surface, #191923);
  color: var(--text, #f4effc);
  box-shadow: 0 16px 68px #0008;
  --voice-positive: #5bdfaf;
}
[data-theme="light"] .sp-voice-dialog { --voice-positive: #177658; }
.sp-voice-dialog::backdrop { background: #0b0817a8; }
.sp-voice-dialog [hidden], .sp-voice-member-watch[hidden] { display: none !important; }
.sp-voice-dialog-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 15px; }
.sp-voice-dialog-header h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 1.25; }
.sp-voice-dialog-title { flex: 1; min-width: 0; }
.sp-voice-dialog-title span { display: block; margin-top: 4px; color: var(--voice-positive); font-size: 12px; }
.sp-voice-dialog-icon, .sp-voice-room-controls button, .sp-voice-room-sharing button, .sp-voice-room-community, .sp-voice-member-watch {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line, #292832);
  border-radius: 10px;
  background: var(--surface-2, #221f2d);
  color: var(--text, #f4effc);
  font: inherit;
  cursor: pointer;
}
.sp-voice-dialog-icon { flex: none; width: 38px; height: 38px; padding: 0; }
.sp-voice-dialog button:not(:disabled):hover, .sp-voice-member-watch:hover { filter: brightness(1.16); }
.sp-voice-dialog button:focus-visible, .sp-voice-dialog select:focus-visible, .sp-voice-member-watch:focus-visible {
  outline: 2px solid var(--accent, #a986ff);
  outline-offset: 2px;
}
.sp-voice-dialog button:disabled { opacity: .6; cursor: default; }
.sp-voice-dialog select, .sp-voice-settings-fields select {
  min-width: 0;
  min-height: 39px;
  padding: 4px 9px;
  border: 1px solid var(--line, #292832);
  border-radius: 9px;
  background: var(--surface-2, #221f2d);
  color: var(--text, #f4effc);
  font: inherit;
}
.sp-voice-room-times { margin-bottom: 12px; color: var(--muted, #9a91ac); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-voice-room-participants { padding: 11px; border: 1px solid var(--line, #292832); border-radius: 14px; }
.sp-voice-room-participants h3 { margin: 0 2px 9px; color: var(--muted, #9a91ac); font-size: 13px; }
.sp-voice-room-participants p { margin: 8px 2px 4px; color: var(--muted, #9a91ac); font-size: 13px; }
.sp-voice-room-dialog .sp-voice-room-roster { display: grid; max-height: 36dvh; gap: 5px; margin: 0; padding: 2px; overflow: auto; border: 0; }
.sp-voice-room-dialog .sp-voice-room-roster li { max-width: none; min-height: 40px; gap: 8px; padding: 4px; border: 0; background: transparent; }
.sp-voice-room-dialog .sp-voice-room-roster .sp-voice-avatar { width: 31px; height: 31px; border-radius: 11px; font-size: 11px; }
.sp-voice-room-roster .sp-voice-member-name { flex: 1; color: var(--text, #f4effc); font-size: 13px; }
.sp-voice-member-watch { flex: none; min-height: 25px; padding: 0 5px; color: var(--accent, #a986ff); }
.sp-voice-member-watch span { display: none; }
.sp-voice-member-watch[data-status="unavailable"] { color: var(--voice-error, #ff9ba6); }
.sp-voice-room-roster .sp-voice-member-watch { min-height: 32px; padding: 3px 7px; font-size: 12px; }
.sp-voice-room-roster .sp-voice-member-watch span { display: inline; }
.sp-voice-room-controls, .sp-voice-room-sharing { display: grid; gap: 7px; margin-top: 10px; }
.sp-voice-room-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-voice-room-sharing { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
.sp-voice-room-controls button, .sp-voice-room-sharing button, .sp-voice-room-community { min-height: 42px; padding: 4px 8px; font-size: 12px; }
.sp-voice-room-controls svg, .sp-voice-room-sharing svg { flex: none; }
.sp-voice-room-controls [aria-pressed="true"], .sp-voice-room-sharing button { color: var(--accent, #a986ff); }
.sp-voice-room-controls [data-voice-panel="leave"] { border-color: #893653; background: #893653; color: #fff; }
.sp-voice-room-community { margin-top: 10px; }
.sp-voice-screen-dialog { width: min(960px, calc(100% - 24px)); }
.sp-voice-screen-dialog select { max-width: 100%; }
.sp-voice-screen-stage {
  position: relative;
  display: grid;
  max-height: 72dvh;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #0d0c12;
  color: #f4effc;
}
.sp-voice-screen-stage video { width: 100%; height: 100%; max-height: 72dvh; object-fit: contain; }
.sp-voice-screen-stage [role="status"] { position: absolute; padding: 12px; text-align: center; }
.sp-voice-fullscreen { position: absolute; right: 9px; bottom: 9px; background: #211d2ee8; color: #fff; }
.sp-voice-screen-stage:fullscreen { width: 100%; height: 100%; max-height: none; border-radius: 0; }
.sp-voice-screen-stage:fullscreen video { max-height: none; }
.sp-voice-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-voice-settings-fields label { display: grid; gap: 6px; color: var(--muted, #9a91ac); font-size: 13px; font-weight: 600; }
.sp-voice-settings-fields .sp-voice-settings-toggle { display: flex; grid-column: 1 / -1; min-height: 34px; align-items: center; }
.sp-voice-settings-toggle input { width: 18px; height: 18px; margin: 0 3px 0 0; accent-color: var(--accent, #a986ff); }

body.sp-voice-live .sp-chat { height: calc(100dvh - 134px - 50px); min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .sp-voice-avatar { transition: none; }
}

@media (max-width: 760px) {
  body.sp-voice-live { --sp-voice-chat-space: 53px; }
  .sp-chat-community .sp-chat-side:has(.sp-voice-channels:not([hidden])) { max-height: clamp(57px, calc(100dvh - var(--header, 55px) - var(--mobile-nav-space, 67px) - var(--sp-voice-chat-space, 0px) - 204px), 213px); }
  .sp-voice-channels { margin-top: 4px; padding-top: 5px; }
  .sp-voice-heading { margin: 0 2px 3px; font-size: 9px; }
  .sp-voice-channel-list { gap: 4px; padding: 2px; }
  .sp-voice-channel { display: grid; grid-template-columns: minmax(116px, .55fr) minmax(0, 1fr); min-width: 0; align-items: center; gap: 5px; }
  .sp-voice-room { min-height: 35px; gap: 5px; padding: 4px 7px; border-color: var(--line, #292832); }
  .sp-voice-room strong { font-size: 12px; }
  .sp-voice-room > svg { width: 15px; height: 15px; }
  .sp-voice-count svg { display: none; }
  .sp-voice-members { display: flex; min-width: 0; gap: 4px; margin: 0; padding: 4px 3px; overflow-x: auto; border: 0; scrollbar-width: thin; scrollbar-color: var(--line, #292832) transparent; overscroll-behavior-inline: contain; }
  .sp-voice-members li { flex: 0 0 auto; gap: 4px; min-height: 28px; max-width: min(100%, 168px); padding: 2px 6px 2px 4px; border: 1px solid var(--line, #292832); border-radius: 8px; background: var(--surface, #191923); }
  .sp-voice-members .sp-voice-avatar { width: 19px; height: 19px; border-radius: 6px; }
  .sp-voice-member-muted, .sp-voice-member-connection { margin-left: 0; }
  .sp-voice-dock { right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--mobile-nav-space, 67px) + 6px); left: max(12px, env(safe-area-inset-left, 0px)); width: auto; min-height: 50px; }
  .sp-voice-dock-actions button { width: 38px; height: 36px; }
  body:has(#app.direct-thread) .sp-voice-dock { bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  body.sp-voice-live .sp-chat { height: calc(100dvh - var(--header, 55px) - var(--mobile-nav-space, 67px) - 28px - var(--sp-voice-chat-space)); }
  body.sp-voice-live .sp-chat-direct.has-selected-peer { height: calc(100dvh - 55px); }
}

@media (max-width: 470px) {
  .sp-voice-dialog { padding: 13px; }
  .sp-voice-room-controls button { flex-direction: column; }
  .sp-voice-settings-fields { grid-template-columns: 1fr; }
}