/*
 * Skavinski user-chip + dropdown menu (shared across all 6 apps).
 * Selector-scoped to #skv-header so styles never leak into surrounding UI.
 * See /skavinski/html/static/skv-chip.js for behavior.
 */

#skv-header .skv-user-menu-wrap { position: relative; }

#skv-header .skv-user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 12px 3px 3px;
  border-radius: 20px;
  border: 1px solid var(--skv-border);
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  color: inherit;
  font: inherit;
}
#skv-header .skv-user-chip:hover {
  border-color: var(--skv-border-hover);
  background: rgba(255,255,255,0.03);
}

#skv-header .skv-user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: var(--skv-text-muted);
  overflow: hidden;
  flex-shrink: 0;
}
#skv-header .skv-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

#skv-header .skv-user-name {
  font-size: 12px; font-weight: 500;
  color: var(--skv-text-muted);
  transition: color 0.15s;
}
#skv-header .skv-user-chip:hover .skv-user-name { color: var(--skv-text); }

#skv-header .skv-user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 190px;
  display: none; padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--skv-border);
  background: rgba(12,12,14,0.96);
  box-shadow: 0 18px 40px rgba(0,0,0,0.42);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 2200;
}
#skv-header .skv-user-menu.open { display: block; }
#skv-header .skv-user-menu-item {
  display: flex; align-items: center;
  width: 100%; min-height: 34px; padding: 0 10px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--skv-text-muted);
  text-decoration: none;
  font: 600 12px Inter, -apple-system, sans-serif;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
#skv-header .skv-user-menu-item:hover,
#skv-header .skv-user-menu-item:focus-visible {
  background: rgba(255,255,255,0.06);
  color: var(--skv-text);
  outline: none;
}

/* Light theme */
[data-theme="light"] #skv-header .skv-user-chip:hover { background: rgba(0,0,0,0.03); }
[data-theme="light"] #skv-header .skv-user-avatar { background: rgba(0,0,0,0.05); }
[data-theme="light"] #skv-header .skv-user-menu {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}
[data-theme="light"] #skv-header .skv-user-menu-item:hover,
[data-theme="light"] #skv-header .skv-user-menu-item:focus-visible {
  background: rgba(0,0,0,0.06);
}

@media (max-width: 900px) {
  #skv-header .skv-user-chip { padding: 3px; }
  #skv-header .skv-user-name { display: none; }
  #skv-header .skv-user-menu { right: -4px; }
}