/*
 * Cross-layer UI invariants.
 *
 * Keep this file intentionally small. It owns only stacking and geometry rules
 * that must remain true after every normal style layer has loaded. Feature
 * styling still belongs to core, shell, components, or surfaces.
 */

/* Settings-owned dialogs (password/username/security) must sit above the settings shell. */
body.rift-settings-open #modal-backdrop.modal-backdrop:not(.hidden) {
  z-index: 27050 !important;
}

/* A channel row remains a two-row grid when voice participants are rendered. */
#channel-list .channel-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  min-width: 0 !important;
}

#channel-list .channel-row > .channel-item {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#channel-list .channel-row > .voice-member-list {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 2px 0 4px 18px !important;
  box-sizing: border-box !important;
}

#channel-list .voice-member-row {
  width: 100% !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 2px 8px 2px 4px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #aeb4bd !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

#channel-list .voice-member-row:hover,
#channel-list .voice-member-row:focus-visible {
  background: #20232a !important;
  color: #f2f3f5 !important;
}

#channel-list .voice-member-avatar {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#channel-list .voice-member-row > span:nth-child(2) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The shell owns one visible live connection timer. Retire the older duplicate meta label. */
#channel-list .channel-item.rift-voice-connected {
  position: relative !important;
  padding-right: 58px !important;
}

#channel-list .rift-voice-duration {
  display: block !important;
  position: absolute !important;
  right: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 40px !important;
  margin: 0 !important;
  color: #23a55a !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  pointer-events: none !important;
}

#channel-list .channel-item.rift-voice-connected > .r021-channel-meta {
  display: none !important;
}

.channel-row.rift-voice-connected-row:hover .rift-voice-duration,
.channel-row.rift-voice-connected-row:focus-within .rift-voice-duration {
  opacity: .35 !important;
}

/* v0.2.3 account-security controls reuse the existing modal/settings system. */
.rift-auth-link {
  width: max-content;
  margin: -4px 0 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9da5ff;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.rift-auth-link:hover { color: #c0c5ff; text-decoration: underline; }

.rift-security-enabled > b { color: #43c982 !important; }
.rift-account-link[role="button"] { cursor: pointer; }
.rift-account-link[role="button"]:hover { background: rgba(255,255,255,.025); }

.rift-security-secret {
  margin: 4px 0 16px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  border: 1px solid #30343b;
  border-radius: 8px;
  background: #0c0e12;
}

.rift-security-secret > span {
  grid-column: 1 / -1;
  color: #8e95a0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.rift-security-secret code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #f2f3f5;
  font-size: 13px;
  letter-spacing: .05em;
}

.rift-security-secret button {
  min-width: 58px;
  height: 32px;
  border: 1px solid #34383f;
  border-radius: 6px;
  background: #1b1e24;
  color: #d9dce0;
  cursor: pointer;
}

.rift-recovery-codes {
  max-height: 280px;
  overflow: auto;
  margin: 10px 0 16px;
  padding: 14px;
  border: 1px solid #30343b;
  border-radius: 8px;
  background: #090b0e;
  color: #e7e9ec;
  font: 600 13px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}

.rift-security-actions { flex-wrap: wrap; }

@media (max-width: 800px) {
  #channel-list .rift-voice-duration { right: 8px !important; font-size: 9px !important; }
  .rift-security-actions > button { flex: 1 1 100%; }
}