body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.auth-card {
  background: var(--card);
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border);
}

.settings-panel {
  animation: in 0.2s ease-out;
}

@keyframes in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.role-chip-owner {
  border-color: oklch(0.745 0.16 65 / 0.4);
  background: oklch(0.745 0.16 65 / 0.1);
  color: oklch(0.8 0.14 65);
}

.role-chip-admin {
  border-color: var(--primary-soft-2);
  background: var(--primary-soft);
  color: var(--primary);
}

.role-chip-agent {
  border-color: var(--border);
  background: var(--muted);
  color: var(--foreground);
}

.role-chip-viewer {
  border-color: var(--border);
  background: transparent;
  color: var(--muted-foreground);
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  display: inline-block;
}

.presence-dot.online { background: #22c55e; }
.presence-dot.away { background: #eab308; }
.presence-dot.offline { background: var(--muted-foreground); }

.unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--primary);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, to { transform: scale(2); opacity: 0; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }