/* SP-113: Split domain/partner toggle button */
.domain-drawer-split {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--bg-primary);
}
.domain-split-left {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-primary);
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s ease;
  flex: 0 0 auto;
  padding-right: 8px;
}
.domain-split-right {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.domain-split-left:hover {
  background: var(--bg-secondary);
}
.domain-drawer.open-domain .domain-split-left {
  background: var(--bg-secondary);
}
.domain-split-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-primary);
}
.domain-split-label {
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.domain-split-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-default);
  flex-shrink: 0;
}
.domain-split-caret {
  width: 7px;
  height: 4px;
  margin-left: auto;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease;
  pointer-events: none;
}
/* SP-220: Position partner caret over the select so clicks reach the native <select> */
.domain-split-right .domain-split-caret {
  position: absolute;
  right: 52px;   /* clear the 36px add-partner button + 12px container padding + 4px gap */
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
}
.domain-drawer.open-domain .domain-split-left .domain-split-caret {
  transform: rotate(180deg);
}

/* SP-113: Native select inside the split bar — matches domain button style */
.domain-split-right {
  padding: 10px 12px;
  gap: 6px;
  cursor: pointer;
}
.domain-split-select {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  padding-right: 16px; /* SP-220: visual space for the absolutely-positioned caret */
  appearance: none;
  -webkit-appearance: none;
}
.domain-split-select:focus {
  outline: none;
}
.domain-split-select:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* SP-113: Stack domain/partner when container is narrow */
.domain-drawer {
  container-type: inline-size;
}
@container (max-width: 320px) {
  .domain-drawer-split {
    flex-direction: column;
    align-items: stretch;
  }
  .domain-split-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
  .domain-split-left {
    padding-right: 12px;
  }
}
/* Fallback for viewport-level narrow (mobile) */
@media (max-width: 480px) {
  .domain-drawer-split {
    flex-direction: column;
    align-items: stretch;
  }
  .domain-split-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
  .domain-split-left {
    padding-right: 12px;
  }
}
/* SP-211: Add custom partner button — square + at far right of partner split bar */
.partner-add-btn {
  flex: 0 0 36px;
  width: 36px;
  align-self: stretch;
  border: none;
  border-left: 1px solid var(--border-default);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  margin-left: 4px;
}
.partner-add-btn:hover {
  background: var(--bg-secondary);
  color: var(--accent-jargan);
}