/**
 * SyktVoiceCore ports of Theams/ — real DOM: .channel (not .channel-item)
 * Keep panels translucent so .app.has-wallpaper::before shows through.
 */

.app.theme-port-clearvision,
.app.theme-port-kemono,
.app.theme-port-rem,
.app.theme-port-midnight {
  --brand-glow: rgba(88, 101, 242, 0.35);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .app.theme-port-clearvision,
  .app.theme-port-kemono,
  .app.theme-port-rem,
  .app.theme-port-midnight {
    --brand-glow: color-mix(in srgb, var(--brand) 45%, transparent);
  }
}

/* Shared glass panels for image ports — use theme tokens, never solid Discord gray */
.app.theme-port-clearvision .guild-rail,
.app.theme-port-clearvision .channels,
.app.theme-port-clearvision .members,
.app.theme-port-clearvision .user-panel,
.app.theme-port-clearvision .topbar,
.app.theme-port-kemono .guild-rail,
.app.theme-port-kemono .channels,
.app.theme-port-kemono .members,
.app.theme-port-kemono .user-panel,
.app.theme-port-kemono .topbar,
.app.theme-port-rem .guild-rail,
.app.theme-port-rem .channels,
.app.theme-port-rem .members,
.app.theme-port-rem .user-panel,
.app.theme-port-rem .topbar {
  background: rgba(20, 24, 36, 0.5) !important;
  backdrop-filter: blur(12px) saturate(1.15);
  border-color: rgba(88, 101, 242, 0.22);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .app.theme-port-clearvision .guild-rail,
  .app.theme-port-clearvision .channels,
  .app.theme-port-clearvision .members,
  .app.theme-port-clearvision .user-panel,
  .app.theme-port-clearvision .topbar,
  .app.theme-port-kemono .guild-rail,
  .app.theme-port-kemono .channels,
  .app.theme-port-kemono .members,
  .app.theme-port-kemono .user-panel,
  .app.theme-port-kemono .topbar,
  .app.theme-port-rem .guild-rail,
  .app.theme-port-rem .channels,
  .app.theme-port-rem .members,
  .app.theme-port-rem .user-panel,
  .app.theme-port-rem .topbar {
    background: color-mix(in srgb, var(--bg-secondary) 52%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand) 28%, transparent);
  }
}

/* ── ClearVision ── */
.app.theme-port-clearvision .channel.active,
.app.theme-port-clearvision .channel-item.active,
.app.theme-port-clearvision .us-nav-item.active,
.app.theme-port-clearvision .ss-nav-item.active {
  background: var(--brand) !important;
  color: #fff !important;
}
.app.theme-port-clearvision .channel.active .channel-name,
.app.theme-port-clearvision .channel.active .ch-hash,
.app.theme-port-clearvision .channel.active .ch-icon {
  color: #fff !important;
  opacity: 1;
}
.app.theme-port-clearvision .chat-form,
.app.theme-port-clearvision .composer {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent) !important;
}
.app.theme-port-clearvision .btn-brand {
  background: var(--brand) !important;
  box-shadow: 0 0 14px var(--brand-glow);
}
.app.theme-port-clearvision .dc-pop,
.app.theme-port-clearvision .pe-card,
.app.theme-port-clearvision .usettings .dsettings,
.app.theme-port-clearvision .modal-card {
  background: color-mix(in srgb, var(--bg-floating) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent) !important;
  backdrop-filter: blur(16px);
}
.app.theme-port-clearvision .cat-name,
.app.theme-port-clearvision .members-panel-title {
  color: var(--brand) !important;
}
.app.theme-port-clearvision *::-webkit-scrollbar-thumb {
  background: var(--brand) !important;
}

/* ── Midnight spaced panels (keep wallpaper visible under semi-transparent panels) ── */
.app.theme-port-midnight {
  gap: 0;
  padding: 0;
  /* do NOT paint solid over wallpaper */
  background: transparent !important;
}
.app.has-wallpaper.theme-port-midnight {
  background: transparent !important;
}
.app.theme-port-midnight .guild-rail {
  margin: 8px 0 8px 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.app.theme-port-midnight .channels {
  margin: 8px 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.app.theme-port-midnight .main {
  margin: 8px 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.app.has-wallpaper.theme-port-midnight .main {
  background: color-mix(in srgb, var(--bg-primary) 38%, transparent) !important;
}
.app.theme-port-midnight .members {
  margin: 8px 8px 8px 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-secondary) 78%, transparent) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.app.theme-port-midnight .user-panel {
  margin: 0 8px 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent) !important;
}
.app.theme-port-midnight .channel,
.app.theme-port-midnight .channel-item {
  border-radius: 8px;
  transition: background 0.2s ease;
}
.app.theme-port-midnight .channel.active,
.app.theme-port-midnight .channel-item.active {
  background: hsla(220, 19%, 40%, 0.28) !important;
  box-shadow: inset 3px 0 0 var(--brand);
}

/* ── Kemono ── */
.app.theme-port-kemono .channel.active,
.app.theme-port-kemono .channel-item.active,
.app.theme-port-kemono .us-nav-item.active {
  background: #ff4444 !important;
  color: #fff !important;
}
.app.theme-port-kemono .channel.active .channel-name,
.app.theme-port-kemono .channel.active .ch-hash,
.app.theme-port-kemono .channel.active .ch-icon {
  color: #fff !important;
  opacity: 1;
}
.app.theme-port-kemono .btn-brand {
  background: #ff4444 !important;
}
.app.theme-port-kemono .btn-brand:hover {
  background: #cc6677 !important;
}
.app.theme-port-kemono .guild-btn.active {
  box-shadow: 0 0 0 2px #ff4444;
}
.app.theme-port-kemono .dc-pop,
.app.theme-port-kemono .pe-card,
.app.theme-port-kemono .usettings .dsettings {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(255, 68, 68, 0.45) !important;
}

/* ── Rem ── */
.app.theme-port-rem .channel.active,
.app.theme-port-rem .channel-item.active,
.app.theme-port-rem .us-nav-item.active {
  background: #61a5d8 !important;
  color: #fff !important;
}
.app.theme-port-rem .channel.active .channel-name,
.app.theme-port-rem .channel.active .ch-hash,
.app.theme-port-rem .channel.active .ch-icon {
  color: #fff !important;
  opacity: 1;
}
.app.theme-port-rem .btn-brand {
  background: #61a5d8 !important;
}
.app.theme-port-rem .btn-brand:hover {
  background: #76aad9 !important;
}
.app.theme-port-rem .guild-btn.active {
  box-shadow: 0 0 0 2px #61a5d8, 0 0 16px rgba(97, 165, 216, 0.45);
}
.app.theme-port-rem .dc-pop,
.app.theme-port-rem .pe-card,
.app.theme-port-rem .usettings .dsettings {
  background: rgba(0, 8, 24, 0.92) !important;
  border: 1px solid rgba(97, 165, 216, 0.4) !important;
}
.app.theme-port-rem .tile.speaking .tile-ring {
  box-shadow: 0 0 0 3px #61a5d8, 0 0 16px rgba(97, 165, 216, 0.5);
}

/* Gallery highlight for ports */
.ss-theme-card[data-preset="clearvision"] .ss-theme-card-group,
.ss-theme-card[data-preset="clearvision-onyx"] .ss-theme-card-group,
.ss-theme-card[data-preset="midnight-port"] .ss-theme-card-group,
.ss-theme-card[data-preset="kemono"] .ss-theme-card-group,
.ss-theme-card[data-preset="rem"] .ss-theme-card-group {
  color: #57f287;
  font-weight: 800;
}