/* Only the account-summary shell: preserve its content, sizing and sticky layout. */
.profile-sidebar {
  background: var(--bg);
  padding: 0;
  overflow: visible;
  border-color: transparent;
  box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 28.24%, transparent),
    0 0 80px color-mix(in srgb, var(--accent) 16.08%, transparent),
    0 24px 64px #00000040;
}

/* Clip scrolling content to the glass while the caret remains on its edge. */
.profile-sidebar-scroll { border-radius: inherit; }
.profile-details { display: flow-root; }
.profile-sidebar > .profile-collapse-toggle {
  position: absolute;
  z-index: 3;
  left: calc(50% - 22px);
  bottom: -16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
}
:root body .profile-sidebar > .profile-collapse-toggle:not(:hover):not(:active) { background: var(--bg); }
.profile-sidebar.profile-is-collapsed > .profile-collapse-toggle svg { transform: rotate(180deg); }

/* Keep wheel/trackpad scrolling inside the account summary, including at its
   boundaries, while the outer panel remains anchored beside the workspace. */
@media (min-width: 951px) {
  .profile-sidebar-scroll {
    padding: 24px 20px 16px;
    max-height: calc(100vh - var(--top) - 44px);
    max-height: calc(100dvh - var(--top) - 44px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }
  .profile-sidebar-scroll::-webkit-scrollbar { display: none; }
  .profile-sidebar-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
  }
}

@media (min-width: 1700px) {
  .profile-sidebar-scroll { padding: 28px 24px; }
}
@media (min-width: 951px) and (max-width: 1430px) {
  .profile-sidebar-scroll { padding: 22px 16px 16px; }
}
@media (min-width: 951px) and (max-width: 1180px) {
  .profile-sidebar-scroll { padding: 20px 14px; }
}

/* The 14px text floor needs room for complete names and amounts. */
.profile-sidebar .profile-intro > div:last-child { min-width: 0; flex: 1; }
.profile-sidebar .profile-intro h2 { overflow-wrap: anywhere; }
.profile-sidebar .balance-block { container-type: inline-size; }
.profile-sidebar .balance-value-row { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.profile-sidebar .balance-value-row > strong {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-size: clamp(14px, calc((100cqw - 90px) / var(--balance-length, 10) * 1.75), 32px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.7px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.profile-sidebar .balance-currency-control { position: relative; display: block; flex: 0 0 80px; width: 80px; }
.profile-sidebar .balance-currency-control select {
  appearance: none;
  width: 100%;
  min-height: 36px;
  padding: 7px 23px 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.profile-sidebar .balance-currency-control select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-sidebar .balance-currency-control option { color: #fff; background: var(--bg); }
.profile-sidebar .balance-currency-control > svg { position: absolute; right: 7px; top: calc(50% - 7px); width: 14px; height: 14px; pointer-events: none; color: var(--accent); }
.profile-sidebar :is(.section-head, .balance-block > small, .sidebar-foot) { flex-wrap: wrap; }
.profile-sidebar .sidebar-activity .activity-row {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 14px 10px;
}
.profile-sidebar .sidebar-activity .movement { grid-row: 1 / span 2; }
.profile-sidebar .sidebar-activity .activity-label,
.profile-sidebar .sidebar-activity .activity-label strong,
.profile-sidebar .sidebar-activity .activity-label small {
  max-width: none;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}
.profile-sidebar .sidebar-activity .activity-amount {
  grid-column: 2;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.profile-sidebar .sidebar-accounts > div:not(.section-head) {
  flex-wrap: wrap;
}
.profile-sidebar .sidebar-accounts > div > strong { margin-left: auto; }
@media (min-width: 951px) and (max-width: 1430px) {
  .profile-sidebar .quick-actions { grid-template-columns: minmax(0, 1fr); }
  .profile-sidebar .quick-actions .pay-button { grid-column: auto; }
}

/* The same fading upper-left reflection used on the authentication glass. */
.profile-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #ffffffb3 0%,
    color-mix(in srgb, var(--accent) 60%, #fff) 12%,
    color-mix(in srgb, var(--accent) 35%, transparent) 28%, transparent 48%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .profile-sidebar {
    background: radial-gradient(ellipse at top left, #ffffff14, #ffffff00 58%),
      linear-gradient(135deg, #ffffff0a, #ffffff00),
      color-mix(in srgb, var(--bg) 58%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
}

/* At desktop widths the collapsed profile tracks the actual market box rather
   than a guessed card height. The expanded summary retains its own scroll. */
@media (min-width: 951px) {
 .app-layout .profile-sidebar.profile-is-collapsed {
  height: var(--profile-market-height, auto);
 }
 .app-layout .profile-sidebar.profile-is-collapsed .profile-sidebar-scroll {
  height: 100%; max-height: 100%;
 }
 .app-layout:has(.market-overview.market-is-collapsed) .profile-sidebar.profile-is-collapsed .profile-sidebar-scroll {
  display: flex; align-items: center; padding: 12px 20px;
 }
 .app-layout:has(.market-overview.market-is-collapsed) .profile-sidebar.profile-is-collapsed .profile-intro {
  width: 100%; min-width: 0;
 }
 .app-layout:has(.market-overview.market-is-collapsed) .profile-sidebar.profile-is-collapsed .profile-intro h2 {
  margin: 0; font-size: 16px; line-height: 1.35;
 }
 .app-layout:has(.market-overview.market-is-collapsed) .profile-sidebar.profile-is-collapsed :is(.profile-intro > .avatar, .profile-status, .balance-block) {
  display: none;
 }
}