/* The account bubble — avatar + name + a dropdown — as it looks in /app.
 *
 * Lifted from public/app.html's inline styles, unchanged, so the control a visitor
 * meets on the landing page is the one they already know from the app. The app still
 * carries its own copy: moving it onto this file means moving its galleries, its
 * install button and its credit pill with it, and that is a separate change.
 *
 * Every colour is a var() the three pages already define identically (they say so:
 * index.html's :root is commented "matched 1:1 with the app"). The fallbacks are for
 * a page that loads this file without them.
 */
.probnaAcct{ margin: 0; }
.probnaAcct .authMenu{ position: relative; display: flex; align-items: center; }
.probnaAcct .authTrigger{
  display: flex; align-items: center; gap: 9px; height: 42px; cursor: pointer; margin: 0;
  background: #fff; border: 1.5px solid var(--line, #ECE3F0); border-radius: 999px;
  padding: 0 14px 0 5px; box-shadow: var(--shadow, 0 10px 30px rgba(124, 92, 255, .12));
  font-family: var(--fhead, system-ui, sans-serif);
}
.probnaAcct .authTrigger:hover{ border-color: var(--accent, #FF4D8D); }
.probnaAcct .authTrigger:focus, .probnaAcct .authTrigger:active{ background: #fff; outline: none; }
/* Both scopes: the bubble in a corner and the block inside a drawer draw the same
   face. Scoping these to .probnaAcct alone left the drawer's fallback as a bare
   letter — no circle, no colour — because that block is not inside the bubble. */
.probnaAcct .authAvatar, .probnaAcctUser .authAvatar{
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
}
.probnaAcct .authAvatarFallback, .probnaAcctUser .authAvatarFallback{
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent, #FF4D8D); color: #fff; font-weight: 700; font-size: 14px;
}
/* Signed out: a quiet grey person, not an accent blob asking to be pressed. */
.probnaAcct .authAvatarFallback.guest{ background: rgba(0, 0, 0, .08); color: var(--accent2, #7C5CFF); font-size: 15px; }
.probnaAcct .authName{
  font-weight: 700; font-size: 14px; color: var(--accent2, #7C5CFF);
  max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.probnaAcct .authChevron{ color: var(--muted, #8E8AA0); font-size: 11px; margin-left: 1px; transition: transform .15s; }
.probnaAcct .authTrigger[aria-expanded="true"] .authChevron{ transform: rotate(180deg); }

/* [hidden] spelled out so it beats the display:flex above when the menu is closed. */
.probnaAcct .authDropdown{
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; z-index: 60;
  background: #fff; border: 1.5px solid var(--line, #ECE3F0); border-radius: 14px;
  box-shadow: var(--shadow, 0 10px 30px rgba(124, 92, 255, .12)); padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.probnaAcct .authDropdown[hidden]{ display: none; }
.probnaAcct .authItem{
  display: block; text-align: left; text-decoration: none; background: none; border: none;
  cursor: pointer; width: 100%; margin: 0;
  box-shadow: none; -webkit-appearance: none; appearance: none;
  font-family: var(--fhead, system-ui, sans-serif); font-weight: 600; font-size: 14px;
  color: var(--accent2, #7C5CFF); padding: 11px 12px; border-radius: 9px;
}
.probnaAcct .authItem:hover{ background: rgba(0, 0, 0, .05); color: var(--accent, #FF4D8D); }
.probnaAcct .authItem:focus, .probnaAcct .authItem:active{ background: rgba(0, 0, 0, .05); outline: none; }
/* The credit line, first in the dropdown. Empty = unknown (a page that never asked),
   and an empty row would read as a balance of nothing.
   `display:block` on purpose: the app's copy of this rule sets only padding, so its
   own .authCount stays display:none and has never been seen. Here the line is the
   only place the balance appears, so it has to actually paint. */
.probnaAcct .authCount{ display: none; }
.probnaAcct .authCount:not(:empty){
  display: block; text-align: left;   /* the panel's masthead centres its text */
  padding: 9px 12px 11px; margin-bottom: 4px; border-bottom: 1px solid var(--line, #ECE3F0);
  font-family: var(--fhead, system-ui, sans-serif); font-weight: 700; font-size: 14px; color: #1a1a1a;
}

/* The same account as a block for a phone drawer (see /app's #menuAccount). A page
   whose corner already belongs to a ☰ puts the account inside it instead. */
.probnaAcctUser{
  display: flex; align-items: center; gap: 12px; padding: 2px 2px 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line, #ECE3F0);
}
.probnaAcctUser .authAvatar, .probnaAcctUser .authAvatarFallback{ width: 46px; height: 46px; font-size: 18px; }
/* text-align is spelled out because this block is often dropped into a drawer that
   lives inside a centred header (the panel's masthead is text-align:center), and an
   account whose name floats in the middle of the row reads as a heading. */
.probnaAcctUserText{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; text-align: left; }
.probnaAcctUserName{
  font-family: var(--fhead, system-ui, sans-serif); font-weight: 700; font-size: 16px;
  color: var(--ink, #2C2540); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.probnaAcctUserSub{ font-family: var(--fhead, system-ui, sans-serif); font-weight: 700; font-size: 13px; color: var(--accent2, #7C5CFF); }