/* ═══════════════════════════════════════════
   Dreamspace — Collab: Dream-Avatars
   Owner: Aurora. Avatar bubbles (roster/cursors/chat reuse these) + the
   "Generate my dream avatar" panel. Uses the project's theme tokens
   (--panel/--text-primary/--border, flipped by [data-theme="light"]) with a
   prefers-color-scheme fallback so it also reads correctly with no data-theme.
   Everything is scoped under .collab-avatar* to avoid colliding with siblings.
   ═══════════════════════════════════════════ */

/* ── Avatar bubble (shared) ── */
.collab-avatar {
  --collab-avatar-size: 32px;
  --collab-avatar-ring: var(--violet, #a78bfa);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--collab-avatar-size);
  height: var(--collab-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  user-select: none;
  color: #fff;
  background: var(--collab-avatar-ring);
  box-shadow: 0 0 0 1.5px var(--border-hover, rgba(255, 255, 255, 0.12));
  vertical-align: middle;
  line-height: 1;
}

.collab-avatar.is-image {
  background: var(--panel, #241535);
}

.collab-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collab-avatar-initial {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: calc(var(--collab-avatar-size) * 0.46);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Presence ring variant — modules can add .has-ring for an accent halo */
.collab-avatar.has-ring {
  box-shadow: 0 0 0 2px var(--collab-avatar-ring), 0 0 0 4px var(--void, #0f0a1a);
}

/* ── Generate-avatar panel ── */
.collab-avatar-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  border-radius: 12px;
  background: var(--panel, #241535);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
  color: var(--text-primary, rgba(255, 255, 255, 0.85));
}

.collab-avatar-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary, rgba(255, 255, 255, 0.85));
}

.collab-avatar-preview-wrap {
  display: flex;
  justify-content: center;
  padding: 0.3rem 0;
}

.collab-avatar-preview {
  --collab-avatar-size: 72px;
  box-shadow: 0 0 0 2px var(--collab-avatar-ring), 0 6px 18px rgba(0, 0, 0, 0.28);
}

.collab-avatar-preview .collab-avatar-initial {
  font-size: calc(var(--collab-avatar-size) * 0.46);
}

.collab-avatar-hint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary, rgba(255, 255, 255, 0.45));
  margin: 0;
}

/* Hidden native file input — the dropzone label drives it */
.collab-avatar-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.collab-avatar-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.6rem 0.8rem;
  text-align: center;
  border: 1.5px dashed var(--border-hover, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  background: var(--overlay-tint, rgba(255, 255, 255, 0.04));
  color: var(--text-secondary, rgba(255, 255, 255, 0.45));
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--duration, 0.2s) var(--ease, ease),
    background var(--duration, 0.2s) var(--ease, ease),
    color var(--duration, 0.2s) var(--ease, ease);
}

.collab-avatar-dropzone:hover,
.collab-avatar-dropzone:focus-visible {
  border-color: var(--violet, #a78bfa);
  color: var(--text-primary, rgba(255, 255, 255, 0.85));
  outline: none;
}

.collab-avatar-dropzone.dragover {
  border-color: var(--violet, #a78bfa);
  background: var(--overlay-hover, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, rgba(255, 255, 255, 0.85));
}

.collab-avatar-dropzone.has-file {
  border-style: solid;
  border-color: var(--violet, #a78bfa);
  color: var(--text-primary, rgba(255, 255, 255, 0.85));
}

.collab-avatar-btn {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--violet, #a78bfa), var(--moonlight, #93c5fd));
  transition: transform 120ms var(--ease, ease), opacity 120ms var(--ease, ease), filter 120ms var(--ease, ease);
}

.collab-avatar-btn:hover:not(:disabled) {
  filter: brightness(1.06);
}

.collab-avatar-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.collab-avatar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.collab-avatar-status {
  min-height: 1.1em;
  font-size: 0.78rem;
  text-align: center;
  color: var(--text-secondary, rgba(255, 255, 255, 0.45));
}

/* ── prefers-color-scheme fallback (when [data-theme] is not set) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .collab-avatar.is-image {
    background: #ede8f2;
  }
  :root:not([data-theme]) .collab-avatar-panel {
    background: #ede8f2;
    border-color: rgba(30, 15, 50, 0.08);
    color: rgba(30, 15, 50, 0.85);
  }
  :root:not([data-theme]) .collab-avatar-heading {
    color: rgba(30, 15, 50, 0.85);
  }
  :root:not([data-theme]) .collab-avatar-hint,
  :root:not([data-theme]) .collab-avatar-status {
    color: rgba(30, 15, 50, 0.5);
  }
  :root:not([data-theme]) .collab-avatar-dropzone {
    border-color: rgba(30, 15, 50, 0.15);
    background: rgba(30, 15, 50, 0.03);
    color: rgba(30, 15, 50, 0.5);
  }
  :root:not([data-theme]) .collab-avatar-initial {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .collab-avatar-btn,
  .collab-avatar-dropzone {
    transition: none;
  }
}