/* ═══════════════════════════════════════════════════════════════════════════
   The context menu — language, market, theme, account.

   ⛔ A SKIN ONLY. Every id, class, data-attribute and handler in the page stays
   untouched: this file changes how the menu LOOKS, never what it does. The
   markup it styles is built by ctxDraw(), and that function is not edited.

   ⛔ It applies on the landing AND inside the conversation, signed out and
   signed in — it is the one piece of chrome that is the same in all four
   states, so it is styled once rather than four times.
   ══════════════════════════════════════════════════════════════════════════ */

.ctxPop{
  width:min(352px,90vw);
  padding:7px;
  border:1px solid var(--line);
  border-radius:20px;
  /* glass, so the menu belongs to the page it opens over rather than sitting
     on it as a grey card */
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 32px 80px -34px var(--shadow);
  animation:ctxPopIn .18s cubic-bezier(.2,.8,.2,1) both;
  transform-origin:top right;
}
@keyframes ctxPopIn{from{opacity:0;transform:translateY(-6px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.ctxPop{animation:none}}

.ctxPop .gh{
  font-size:9.5px;letter-spacing:.15em;padding:11px 12px 7px;color:var(--faint);font-weight:500}

.ctxPop button{
  gap:12px;padding:9px 11px;border-radius:13px;
  transition:background .14s, box-shadow .14s, transform .14s cubic-bezier(.2,.8,.2,1)}
.ctxPop button:hover{background:var(--surf2)}
.ctxPop button:active{transform:scale(.99)}

/* ⛔ The chosen row is marked by a FILLED BADGE and a tick, not by a bar down
   its left edge: the bar read as a hover state and people clicked the row they
   were already on. */
.ctxPop button.on{background:var(--surf2);box-shadow:none}
.ctxPop button.on .e{
  background:var(--ink);color:var(--panel);border-color:transparent;font-weight:700}
.ctxPop button .e{
  width:29px;height:29px;min-height:0;border-radius:9px;font-size:9.5px;
  background:var(--surf);transition:background .14s,color .14s,border-color .14s}
.ctxPop button .n{font-size:13.5px;letter-spacing:-.01em}
.ctxPop button .d{font-size:11.5px;margin-top:2px}
/* ⛔ A COLLISION THAT PREDATES THIS FILE: `.ck` names TWO things in the base
   stylesheet — the cookie bar and this tick — and the bar's rule
   (`position:fixed; display:none`) was winning, so the tick on the selected
   row never rendered at all. Nobody saw a checkmark; the row was marked only
   by its background. Put the tick back to what it is. */
.ctxPop button .ck{
  position:static;display:block;inset:auto;width:auto;padding:0;border:0;background:none;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font-size:12px;line-height:1;color:var(--ink);
  transition:opacity .14s,transform .14s;transform:scale(.8)}
.ctxPop button.on .ck{opacity:1;transform:none}

.ctxPop .grp:not(.acct){padding:0 1px 5px}
.ctxPop .grp+.grp{border-top:1px solid var(--line)}
.ctxPop button[data-more]{color:var(--muted);font-size:13px}
.ctxPop button[data-more] .e{border-style:dashed;background:none}
.ctxPop button[data-more]:hover{color:var(--ink)}

/* the theme switch reads as one control, and the live side is unmistakable */
.ctxPop .themeRow{padding:9px 7px 5px;margin-top:3px}
.ctxPop .seg{padding:3px;border-radius:999px;background:var(--surf);border-color:var(--line)}
.ctxPop .seg button{padding:6px 14px;font-size:10.5px;letter-spacing:.04em}
.ctxPop .seg button.on{
  background:var(--ink);color:var(--panel);box-shadow:none;font-weight:600}

/* who you are, at the top — the one row that changes between signed out and in */
.ctxPop .who{
  margin:-7px -7px 5px;padding:14px 14px 13px;border-radius:20px 20px 0 0;
  background:linear-gradient(180deg,var(--surf),transparent)}
.ctxPop .who .av2{width:36px;height:36px}
.ctxPop .who .nm2{font-size:14px;letter-spacing:-.01em}
.ctxPop .who .em2{font-size:11.5px;color:var(--muted)}
.ctxPop .who .tier2{
  margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:var(--ink);color:var(--panel);font-weight:600}

/* the account group sits apart from the settings above it */
.ctxPop .grp.acct{
  margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}

@media(max-width:760px){ .ctxPop{width:min(320px,94vw);border-radius:18px} }

/* ═══════════════════════════════════════════════════════════════════════════
   The cookie bar.

   ⛔ It was the loudest thing on a quiet page: a full-width band with an aurora
   gradient button, so the first thing the eye landed on was a consent notice
   rather than the product. Consent must be plainly available and easy to
   answer — it must not out-shout the page it interrupts.

   ⛔ NOTHING ABOUT ITS BEHAVIOUR CHANGES: same element, same buttons, same
   handlers, same wording. Both choices stay equally reachable — the quiet
   styling applies to BOTH, so this is not a dark pattern that dims "necessary
   only" to push the other one.
   ══════════════════════════════════════════════════════════════════════════ */
body > .ck{
  left:auto;right:16px;bottom:16px;
  /* ⛔ Small enough not to draw the eye to the page gap it floats over. The
     old full-width band was covering that gap; removing the band exposed it,
     and a tall card sitting in the middle of it makes it look deliberate. */
  width:min(430px,calc(100vw - 32px));
  gap:10px;padding:12px 13px;
  border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb, var(--panel) 84%, transparent);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 28px 70px -34px var(--shadow);
  font-size:12px;line-height:1.45;color:var(--muted)}
body > .ck .sp{flex:1 1 100%;height:0}
body > .ck button{
  border:1px solid var(--line2);border-radius:999px;padding:6px 13px;
  font-size:12px;color:var(--ink);background:none;
  transition:background .14s,border-color .14s}
body > .ck button:hover{background:var(--surf2);border-color:var(--line2)}
/* ⛔ Ink, not the aurora. The brand gradient belongs to the product's own
   moments; a consent button is not one of them. */
body > .ck button.pri{
  background:var(--ink);color:var(--panel);border-color:transparent;font-weight:600}
body > .ck button.pri:hover{opacity:.9;background:var(--ink)}
body > .ck a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
body > .ck a:hover{color:var(--ink)}
@media(max-width:620px){ body > .ck{left:12px;right:12px;bottom:12px;width:auto} }