/* Auth + chat extension of Awesome13F's editorial design system.
   Neutral premium scheme: ivory/graphite with subtle indigo accent.
   No green-dominant visuals. */

/* Neutral premium accent — overrides the green --accent from styles.css
   for auth/chat components only. */
:root {
  --accent-indigo: #6366f1;
}

#btnStarchildLogin,
#btnAgentChat {
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid var(--line-hi);
  box-shadow: none;
  transition: background .15s, color .15s, border-color .15s;
}
#btnStarchildLogin:hover,
#btnAgentChat:hover {
  background: var(--line);
  color: var(--ink);
  border-color: var(--line-hi);
}
#btnStarchildLogin::after,
#btnAgentChat::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-indigo);
}
#btnStarchildLogin:focus-visible,
#btnAgentChat:focus-visible { outline: 2px solid var(--accent-indigo); outline-offset: 2px; }
.wallet-btn .wb-glyph { color: inherit; }

.account-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 260;
  width: 230px;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line-hi);
  border-radius: var(--rad-sm);
  box-shadow: 0 16px 40px rgba(18,22,19,.14);
}
.account-menu[hidden] { display: none; }
.account-menu-user { padding: 10px 11px 12px; border-bottom: 1px solid var(--line); }
.account-menu-user strong { display: block; color: var(--ink); font: 600 13px/1.3 var(--font-sans); }
.account-menu-user span { display: block; margin-top: 3px; color: var(--ink-low); font: 10px/1.3 var(--font-mono); }
.account-menu-signout { width: 100%; margin-top: 6px; padding: 9px 11px; border: 0; border-radius: var(--rad-sm); background: transparent; color: var(--ink-dim); text-align: left; font: 500 13px var(--font-sans); cursor: pointer; }
.account-menu-signout:hover { background: var(--bg-sage); color: var(--red); }

.sc-panel { background: var(--bg-elev); border-color: var(--line-hi); box-shadow: none; }
.sc-signin-icon,
.sc-avatar-fallback { background: var(--line); color: var(--ink); }
.sc-continue,
.sc-login-btn {
  background: var(--ink);
  color: var(--bg-elev);
  border: 1px solid var(--ink);
}
.sc-continue:hover,
.sc-login-btn:hover {
  background: var(--accent-indigo);
  color: #fff;
  border-color: var(--accent-indigo);
}
.sc-social { background: var(--bg-elev); border-color: var(--line-hi); }
.sc-social:hover { border-color: var(--ink); box-shadow: none; }
.sc-account-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sc-signout { padding: 9px 12px; border: 1px solid var(--line-hi); border-radius: var(--rad-sm); color: var(--ink-dim); background: transparent; font: 500 13px var(--font-sans); cursor: pointer; }
.sc-signout:hover { color: var(--red); border-color: var(--red); }