/* ---------- USER ICON ---------- */
:root{
  /* Хэрэв танай өнгө өөр байвал зөвхөн энэ утгыг соль */
  --bubble-accent: #E50914;   /* FB/Хайлт тойргийн улаан */
  --bubble-bg-900: #0F141C;   /* Header-ийн фон */
  --bubble-text:   #E9EEF5;
  --bubble-muted:  #9AA6B2;
}

.bubble-user{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Тойрог хүрээтэй товч — FB/хайлттай адилхан */
.bubble-user__btn{
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  border: 2px solid var(--bubble-accent);
  background: transparent;
  color: var(--bubble-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  outline: none;
}
.bubble-user__btn:focus-visible,
.bubble-user__btn:hover{
  transform: scale(1.04);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bubble-accent) 20%, transparent);
}

.bubble-user__icon{
  display:block;
  pointer-events: none;
  /* доторх “томруулдаг шил шиг” дүрсийг арай бадриун харагдуулах */
  transform: scale(1.05);
  fill: currentColor;
}

/* ---------- DROPDOWN ---------- */
.bubble-user__dropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: #141B24;
  border: 1px solid #1F2732;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,1);
  display: none;             /* JS нээж/хаана */
  z-index: 1000;
}

.bubble-user__dropdown.is-open{ display: block; }

.bubble-user__item{
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--bubble-text);
  text-decoration: none;
  font-size: 15px;
}
.bubble-user__item + .bubble-user__item{ margin-top: 4px; }

.bubble-user__item:hover{
  background: #1A2430;
  color: #FFFFFF;
}

/* Жижиг дэлгэцэнд харайлтгүй тогтвортой байлга */
@media (max-width: 480px){
  .bubble-user__btn{ width: 42px; height: 42px; }
  .bubble-user__dropdown{ min-width: 180px; }
}
/* Ensure dropdown is above everything (admin bar etc.) */
.bubble-user__dropdown{ z-index: 99999; }

/* Header нь dropdown-ыг таслахгүй */
.bs-header,
.bs-header__inner{ overflow: visible; }

/* clickable хамгаалалт */
.bubble-user__btn{ pointer-events: auto; }
/* dropdown бусдыг давж харагдана */
.bubble-user__dropdown{ z-index: 99999; }
.bs-header, .bs-header__inner{ overflow: visible; } /* таслахгүй */
.bubble-user{ position:relative; display:inline-block; }
.bubble-user[open] .bubble-user__dropdown{ display:block; } /* is-open хэрэггүй болно */



/* ===== User code pill (glossy, bigger, copy pinned right) ===== */
.bs-user-badge{ padding:10px 12px 6px; border-bottom:1px dashed rgba(255,255,255,.06); margin-bottom:6px; }

.user-pill{
  position: relative; display:inline-flex; align-items:center;
  font-weight:900; font-size:15px; letter-spacing:.2px; line-height:1;
  color:#fff;
  /* glossy red like the price badge */
  background: linear-gradient(180deg,#ff4a44 0%, #e21414 55%, #c10f0f 100%);
  border:1px solid #a90e0e;
  border-radius:999px;
  padding:8px 44px 8px 14px;       /* баруунд icon-д зай үлдээнэ */
  box-shadow:
    0 8px 18px rgba(229,9,20,.35), /* гадна сүүдэр */
    inset 0 1px 0 rgba(255,255,255,.45), /* дээдийн гялбаа */
    inset 0 -8px 18px rgba(0,0,0,.25);   /* доод гүн */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Copy товч – баруун захад наана */
.user-pill__copy{
  all: unset;
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; cursor:pointer; opacity:.9;
}
.user-pill__copy svg{ width:18px; height:18px; }
.user-pill__copy:hover{ opacity:1; transform:translateY(-50%) scale(1.05); }
.user-pill__copy.copied{ opacity:1; }

/* Жижиг дэлгэц дээр ч гоё харагдуулна */
@media (max-width:480px){
  .user-pill{ font-size:14px; padding:7px 42px 7px 12px; }
  .user-pill__copy{ right:9px; width:20px; height:20px; }
  .user-pill__copy svg{ width:16px; height:16px; }
}
/* Copy амжилттай үед богино glow + tooltip */
.user-pill.copied{
  box-shadow:
    0 10px 22px rgba(69,224,122,.35),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -8px 18px rgba(0,0,0,.25);
  transition: box-shadow .25s ease, transform .15s ease;
  transform: translateY(-1px);
}
.user-pill__copy.copied::after{
  content: "Хууллаа";
  position: absolute; right: -4px; top: -28px;
  background: #0f141c; color:#e6eef8; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:8px; border:1px solid #2a3446;
  box-shadow: 0 8px 16px rgba(0,0,0,.35);
  opacity: 0; animation: bsFadePop 1.2s ease forwards;
}
@keyframes bsFadePop{
  0%{opacity:0; transform: translateY(4px) scale(.98);}
  15%{opacity:1; transform: translateY(0) scale(1);}
  85%{opacity:1;}
  100%{opacity:0;}
}