/* ═══ Account control (js/profile-menu.js) ═══
   One stylesheet for the avatar button and its menu everywhere
   LoomiProfileMenu.mount() renders them: app.html, pilot.html, qa.html and
   review.html. The pages name the same colours under different tokens
   (--pc-border, --line, --bg-2 …), so like css/topbar.css this file declares
   its own on .profile-wrap and depends on nothing outside it. tts.html keeps
   its own markup and its own copy in css/workbench.css; see the note at the
   top of js/profile-menu.js. */

.profile-wrap {
  --pm-bg: #141B2D;
  --pm-line: rgba(255,255,255,.08);
  --pm-line-2: rgba(255,255,255,.15);
  --pm-text: #FFF;
  --pm-text-3: rgba(255,255,255,.58);
  --pm-accent: #A78BFA;
  --pm-err: #F87171;
  --pm-r: 15px;
  --pm-font: 'Fredoka', 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
  --pm-motion: 150ms cubic-bezier(.4, 0, .2, 1);

  position: relative;
}
/* The module toggles .hidden on the picture and the menu; app.html has no
   page stylesheet to define it, so the control carries its own. */
.profile-wrap .hidden { display: none !important; }

.profile-btn {
  width: 34px; height: 34px; border-radius: 9999px; padding: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--pm-line);
  cursor: pointer; overflow: hidden;
  transition: background var(--pm-motion), border-color var(--pm-motion);
}
.profile-btn:hover, .profile-btn.chip-active { border-color: var(--pm-accent); }
.profile-btn:hover { background: rgba(255,255,255,.08); }
.profile-pic { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
.profile-initials { font: 600 14px/1 var(--pm-font); color: var(--pm-accent); }

.profile-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 240px; padding: 8px 0;
  background: var(--pm-bg); border: 1px solid var(--pm-line-2);
  border-radius: var(--pm-r); z-index: 100;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.pm-header { padding: 10px 16px; }
.pm-name { font: 500 14px/1.2 var(--pm-font); color: var(--pm-text); }
.pm-email { font: 400 12px/1.3 var(--pm-font); color: var(--pm-text-3); margin-top: 2px; }
.pm-divider { height: 1px; margin: 4px 12px; background: var(--pm-line); }
.pm-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 38px; padding: 0 16px;
  background: none; border: none;
  font: 400 13px/1 var(--pm-font); color: var(--pm-text-3);
  cursor: pointer; text-align: left;
  transition: background var(--pm-motion), color var(--pm-motion);
}
.pm-item:hover { background: rgba(255,255,255,.04); color: var(--pm-text); }
.pm-item svg { width: 16px; height: 16px; flex: none; }
.pm-logout { color: var(--pm-err); }