/* Header account menu — InterTrans-style avatar trigger + dropdown */

.vs-header-settings {
  position: relative;
}

.vs-header-settings-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.65rem 0.2rem 0.2rem;
  border: 1px solid var(--vs-border);
  border-radius: 999px;
  background: var(--vs-bg-card);
  color: var(--vs-text);
  cursor: pointer;
  font-size: 0.875rem;
  font-family: inherit;
  box-shadow: var(--vs-shadow);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.vs-header-settings-trigger:hover {
  border-color: var(--vs-accent);
  box-shadow: 0 0 0 3px var(--vs-accent-soft);
}

.vs-header-settings-trigger:active {
  transform: translateY(1px);
}

.vs-header-avatar-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

.vs-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.vs-header-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.vs-header-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--vs-accent), var(--vs-accent-hover));
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
}

.vs-header-avatar-lg.vs-header-avatar-initials {
  font-size: 1rem;
}

.vs-header-settings-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-header-settings-chevron {
  font-size: 0.7rem;
  color: var(--vs-text-muted);
}

.vs-header-settings-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1101;
  pointer-events: none;
}

.vs-header-settings-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1102;
  width: min(92vw, 320px);
  padding: 1rem 1rem 0.9rem;
  background: var(--vs-bg-card);
  border: 1px solid var(--vs-border);
  border-radius: 14px;
  box-shadow: var(--vs-shadow-lg);
}

.vs-header-settings.is-open .vs-header-settings-panel {
  position: fixed;
  top: calc(var(--vs-topbar-height, 64px) + 0.5rem);
  right: 1.5rem;
}

.vs-header-settings.is-open .vs-header-settings-backdrop,
.vs-header-settings.is-open .vs-header-settings-panel {
  display: block;
}

.vs-header-settings.is-open .vs-header-settings-backdrop,
.vs-header-notifications.is-open .vs-header-settings-backdrop {
  pointer-events: auto;
}

.vs-header-settings-profile {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.vs-header-settings-profile strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}

.vs-header-settings-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--vs-text-muted);
}

.vs-header-settings--mobile-sidebar {
  width: 100%;
}

.vs-mobile-sidebar-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  gap: 0.65rem;
  padding: 0.25rem 0.5rem 0.5rem;
}

.vs-mobile-sidebar-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vs-mobile-sidebar-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vs-text);
}

.vs-mobile-sidebar-email {
  margin: 0;
  font-size: 0.8rem;
  color: var(--vs-text-muted);
  word-break: break-word;
}

/* Header notification bell */

.vs-header-notifications {
  position: relative;
}

.vs-header-notifications-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--vs-border);
  border-radius: 999px;
  background: var(--vs-bg-card);
  color: var(--vs-text);
  cursor: pointer;
  box-shadow: var(--vs-shadow);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.vs-header-notifications-trigger:hover {
  border-color: var(--vs-accent);
  box-shadow: 0 0 0 3px var(--vs-accent-soft);
}

.vs-header-notifications-trigger:active {
  transform: translateY(1px);
}

.vs-header-notifications-icon {
  display: inline-flex;
  line-height: 0;
}

.vs-header-notifications-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.vs-header-notifications-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 1102;
  width: min(92vw, 360px);
  max-height: min(70vh, 420px);
  overflow: hidden;
  background: var(--vs-bg-card);
  border: 1px solid var(--vs-border);
  border-radius: 14px;
  box-shadow: var(--vs-shadow-lg);
}

.vs-header-notifications.is-open .vs-header-notifications-panel {
  position: fixed;
  top: calc(var(--vs-topbar-height, 64px) + 0.5rem);
  right: 1.5rem;
}

.vs-header-notifications.is-open .vs-header-settings-backdrop,
.vs-header-notifications.is-open .vs-header-notifications-panel {
  display: block;
}

.vs-header-notifications.is-open .vs-header-notifications-panel {
  display: flex;
  flex-direction: column;
}

.vs-header-notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--vs-border);
}

.vs-header-notifications-head strong {
  font-size: 0.95rem;
}

.vs-header-notifications-unread {
  font-size: 0.75rem;
  color: var(--vs-text-muted);
}

.vs-header-notifications-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  font-size: 0.875rem;
  color: var(--vs-text-muted);
}

.vs-header-notifications-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  overflow-y: auto;
}

.vs-header-notifications-list li {
  margin: 0;
}

.vs-header-notification {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--vs-border);
  background: transparent;
  color: var(--vs-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}

.vs-header-notification:last-child {
  border-bottom: 0;
}

.vs-header-notification:hover,
.vs-header-notification:focus {
  background: var(--vs-accent-soft);
  color: var(--vs-text);
  text-decoration: none;
}

.vs-header-notification:visited {
  color: var(--vs-text);
  text-decoration: none;
}

.vs-header-notification.is-unread {
  background: color-mix(in srgb, var(--vs-accent-soft) 65%, transparent);
}

.vs-header-notification__title {
  font-size: 0.875rem;
  font-weight: 700;
}

.vs-header-notification__message {
  font-size: 0.8rem;
  color: var(--vs-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vs-header-notification__time {
  font-size: 0.72rem;
  color: var(--vs-text-muted);
}

.vs-header-notification--warning .vs-header-notification__title {
  color: #b45309;
}

.vs-header-notification--success .vs-header-notification__title {
  color: #15803d;
}

@media (max-width: 1600px) {
  .vs-header-settings.is-open .vs-header-settings-panel,
  .vs-header-notifications.is-open .vs-header-notifications-panel {
    right: 0.75rem;
    max-width: calc(100vw - 1.5rem);
  }
}