/* ============================================================================
   vth-switch-account.css — Switch Account modal + switched-session widget.
   Scoped under .vth, namespaced .vth-sa* / .vth-sw*, Materialize-safe.
   Styled to the Claude Design reference (SwitchAccountModal / SwitchedSessionWidget).

   Token policy (Golden rules / Section 8): component rules reference tokens only —
   no raw hex, no raw px. Values live in the token block below: shared VTH tokens
   are reused where they exist; design keys are mapped onto them; and a small set
   of Switch-Account *component tokens* hold the design's off-scale values
   (specific brand colours, translucent whites, and fixed component dimensions
   with no step in the shared radius/space scale).
   ============================================================================ */

.vth {
  /* --- Map reference design keys onto the existing VTH token layer --- */
  --sw-border-subtle: var(--border-light);      /* #EAECF0-ish subtle divider */
  --sw-blue-deep: var(--vth-blue-focus);        /* #1D2C92 */

  /* --- Component colour tokens (from the reference; no global equivalent) --- */
  --sw-blue-bright: #2C3ED6;                     /* widget gradient top stop */
  --sw-accent: #FFD666;                          /* switched-session pulse dot */
  --sw-widget-gradient: linear-gradient(135deg, var(--sw-blue-deep) 0%, var(--vth-blue) 62%, var(--sw-blue-bright) 100%);
  --sw-on-blue-strong: rgba(255,255,255,.80);
  --sw-on-blue-soft: rgba(255,255,255,.72);
  --sw-white-10: rgba(255,255,255,.10);
  --sw-white-15: rgba(255,255,255,.15);
  --sw-white-18: rgba(255,255,255,.18);
  --sw-white-line: rgba(255,255,255,.16);
  --sw-focus-ring: var(--shadow-focus-blue);

  /* --- Component dimension tokens (no matching shared scale step) --- */
  --sw-hairline: 1px;
  --sw-modal-w: 660px;
  --sw-list-max: 300px;
  --sw-icon-box: 46px;
  --sw-avatar: 40px;
  --sw-dot: 7px;
  --sw-widget-w: 342px;
  --sw-radius-card: var(--radius-xl);           /* 16 */
  --sw-radius-row: var(--radius-lg);            /* 12 */
}

@keyframes vth-sw-pop { from { opacity: 0; transform: translateY(var(--space-3)) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes vth-sw-slide { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }
@keyframes vth-sw-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,214,102,.7); }
  70%  { box-shadow: 0 0 0 var(--space-2) rgba(255,214,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,214,102,0); }
}

/* ============================================================================
   MODAL
   ============================================================================ */
.vth .vth-sa-modal.modal {
  max-width: var(--sw-modal-w) !important;
  width: 92% !important;
  max-height: 86vh !important;
  border-radius: var(--radius-2xl) !important;
  overflow: hidden !important;
  background: var(--surface-card) !important;
  padding: unset !important;
}
.vth .vth-sa-modal.modal .modal-content.vth-sa {
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  font-family: var(--font-sans);
  color: var(--text-primary);
  animation: vth-sw-pop .2s ease;
}

/* Header */
.vth .vth-sa__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: var(--sw-hairline) solid var(--sw-border-subtle);
  flex-shrink: 0;
}
.vth .vth-sa__head-icon {
  width: var(--sw-icon-box);
  height: var(--sw-icon-box);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--surface-blue-soft);
  color: var(--vth-blue);
}
.vth .vth-sa__head-text { flex: 1; min-width: 0; }
.vth .vth-sa__title {
  margin: 0 0 var(--space-1);
  font-size: var(--type-size-lg);
  line-height: var(--type-leading-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.vth .vth-sa__desc {
  margin: 0;
  font-size: var(--type-size-xs);
  line-height: var(--type-leading-xs);
  color: var(--text-subtle);
}
.vth .vth-sa__close {
  margin-left: auto;
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--sw-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-subtle);
  cursor: pointer;
}

/* Scrollable body — holds the back-to-own row, tiles, and search + list.
   This is the scroll container that drives infinite scroll (the list is
   rendered lazily once a type is chosen). */
.vth .vth-sa__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.vth .vth-sa__group { display: flex; flex-direction: column; gap: var(--space-2); }

/* Type tiles / tabs (horizontal: icon box + text). No tile pre-selected. */
.vth .vth-sa__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.vth .vth-sa__tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--sw-hairline) solid var(--sw-border-subtle);
  border-radius: var(--sw-radius-row);
  background: var(--surface-card);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color .14s, background .14s;
}
.vth .vth-sa__tab:hover { border-color: var(--vth-blue); }
.vth .vth-sa__tab.is-active { border-color: var(--vth-blue); background: var(--surface-blue-soft); }
.vth .vth-sa__tab-icon {
  width: var(--space-8);
  height: var(--space-8);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-blue-soft);
  color: var(--vth-blue);
}
.vth .vth-sa__tab-text { min-width: 0; }
.vth .vth-sa__tab-label { display: block; font-size: var(--type-size-xs); font-weight: var(--weight-semibold); color: var(--text-primary); }
.vth .vth-sa__tab-hint { display: block; font-style: normal; font-size: var(--type-size-2xs); color: var(--text-subtle); }

/* Group label */
.vth .vth-sa__grouplabel {
  display: block;
  font-size: var(--type-size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Search */
.vth .vth-sa__search-field { position: relative; }
.vth .vth-sa__search-field > .vth-ico {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}
.vth .vth-sa__search-field input {
  width: 100%;
  height: var(--space-12);
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--space-3) 0 var(--space-10);
  border: var(--sw-hairline) solid var(--border-default);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--type-size-xs);
  color: var(--text-primary);
  background: var(--surface-card);
}
.vth .vth-sa__search-field input:focus {
  outline: none;
  border-color: var(--vth-blue);
  box-shadow: var(--sw-focus-ring);
}

/* List (scrolls with the body) */
.vth .vth-sa__list { display: flex; flex-direction: column; gap: var(--space-2); }

/* States */
.vth .vth-sa__state {
  padding: var(--space-6) var(--space-3);
  text-align: center;
  font-size: var(--type-size-xs);
  color: var(--text-subtle);
}
.vth .vth-sa__state--more { padding: var(--space-3); }
.vth .vth-sa__retry {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--sw-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-size-xs);
}

/* Rows */
.vth .vth-sa__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: var(--sw-hairline) solid var(--sw-border-subtle);
  border-radius: var(--sw-radius-row);
  background: var(--surface-card);
  cursor: pointer;
  text-align: left;
  transition: border-color .14s, background .14s;
}
.vth .vth-sa__row:hover { border-color: var(--vth-blue); background: var(--surface-blue-soft); }
.vth .vth-sa__row:focus-visible { outline: none; border-color: var(--vth-blue); box-shadow: var(--sw-focus-ring); }
.vth .vth-sa__avatar,
.vth .vth-sa__avatar-img {
  width: var(--sw-avatar);
  height: var(--sw-avatar);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.vth .vth-sa__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-size-2xs);
  font-weight: var(--weight-bold);
  color: var(--vth-blue);
  background: var(--surface-card);
  border: var(--sw-hairline) solid var(--sw-border-subtle);
}
.vth .vth-sa__avatar-img { object-fit: cover; }
.vth .vth-sa__row-meta { flex: 1; min-width: 0; }
.vth .vth-sa__row-name {
  display: block;
  font-size: var(--type-size-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vth .vth-sa__row-sub {
  display: block;
  font-style: normal;
  font-size: var(--type-size-2xs);
  color: var(--text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vth .vth-sa__row-chev { flex-shrink: 0; color: var(--vth-blue); }

/* Footer */
.vth .vth-sa__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: var(--sw-hairline) solid var(--sw-border-subtle);
}
.vth .vth-sa__note { font-size: var(--type-size-2xs); color: var(--text-subtle); }
.vth .vth-sa__cancel {
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  border: var(--sw-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-subtle);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--type-size-xs);
  font-weight: var(--weight-medium);
}

/* ============================================================================
   SWITCHED-SESSION WIDGET
   ============================================================================ */
.vth .vth-sw-widget {
  position: fixed;
  left: var(--space-5);
  bottom: var(--space-5);
  z-index: 801;
  max-width: calc(100vw - var(--space-10));
  font-family: var(--font-sans);
}

/* Expanded card */
.vth .vth-sw__card {
  width: var(--sw-widget-w);
  max-width: calc(100vw - var(--space-10));
  color: var(--text-on-blue);
  border-radius: var(--radius-xl);
  background: var(--sw-widget-gradient);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: var(--space-3) var(--space-3) 0;
  animation: vth-sw-slide .2s ease;
}
.vth .vth-sw__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.vth .vth-sw__eye {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--sw-white-15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vth .vth-sw__label {
  font-size: var(--type-size-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sw-on-blue-soft);
}
.vth .vth-sw__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-size-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--sw-white-15);
}
.vth .vth-sw__dot {
  width: var(--sw-dot);
  height: var(--sw-dot);
  border-radius: var(--radius-pill);
  background: var(--sw-accent);
  display: inline-block;
  flex-shrink: 0;
  animation: vth-sw-pulse 1.8s ease-out infinite;
}
.vth .vth-sw__who { margin-bottom: var(--space-3); }
.vth .vth-sw__name { display: block; font-size: var(--type-size-xs); font-weight: var(--weight-semibold); }
.vth .vth-sw__sub { display: block; font-size: var(--type-size-2xs); color: var(--sw-on-blue-strong); }
.vth .vth-sw__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-1); }
.vth .vth-sw__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  color: var(--text-on-blue);
  font-family: var(--font-sans);
  font-size: var(--type-size-2xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: var(--space-1) 0;
  white-space: nowrap;
  border-bottom: var(--sw-hairline) solid transparent;
}
.vth .vth-sw__link:hover { color: var(--text-on-blue); text-decoration: none; border-bottom-color: var(--sw-on-blue-strong); }
.vth .vth-sw__hide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: calc(100% + var(--space-6));
  margin: var(--space-3) calc(-1 * var(--space-3)) 0;
  padding: var(--space-3) 0;
  border: none;
  border-top: var(--sw-hairline) solid var(--sw-white-line);
  background: var(--sw-white-10);
  color: var(--text-on-blue);
  font-family: var(--font-sans);
  font-size: var(--type-size-2xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.vth .vth-sw__hide:hover { background: var(--sw-white-18); }

/* Collapsed pill (minimum state) */
.vth .vth-sw__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--space-12);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--sw-widget-gradient);
  color: var(--text-on-blue);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  max-width: calc(100vw - var(--space-10));
  box-shadow: var(--shadow-lg);
  animation: vth-sw-slide .2s ease;
}
.vth .vth-sw__pill-text { min-width: 0; }
.vth .vth-sw__pill-text b { display: block; font-size: var(--type-size-2xs); font-weight: var(--weight-semibold); }
.vth .vth-sw__pill-text i { display: block; font-style: normal; font-size: var(--type-size-2xs); color: var(--sw-on-blue-soft); }
.vth .vth-sw__pill-exp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--sw-white-18);
  flex-shrink: 0;
}
.vth .vth-sw__pill:focus-visible,
.vth .vth-sw__hide:focus-visible,
.vth .vth-sw__link:focus-visible { outline: none; box-shadow: var(--sw-focus-ring); }

/* Mobile: sidenav trigger is top-left and FABs bottom-right, so bottom-left is
   clear; tighten offsets and let the card use available width. */
@media (max-width: 600px) {
  .vth .vth-sw-widget { left: var(--space-3); bottom: var(--space-3); }
  .vth .vth-sw__card { width: calc(100vw - var(--space-6)); }
}

/* ============================================================================
   Icons + profile-menu trigger + widget expand/collapse animation
   ============================================================================ */
/* Inline SVG icons baseline (sized via the SVG width/height attributes) */
/* Hugeicons webfont glyphs: size via font-size (overrides any base size). */
/* .vth-ico is now just a hook (e.g. for the search-field icon position); Hugeicons
   sizing comes from the global .hgi-<n> utilities and colour from the parent. */
.vth .vth-ico { flex-shrink: 0; }

/* "Switch Account" item in the Materialize profile dropdown (outside .vth).
   Uses the same reload icon as the modal header (issue 1.1). Tokens resolve
   from :root (vth-tokens.css). */
#profileDrop .vth-sa-trigger { display: flex; align-items: center; gap: var(--space-3); }

/* Widget expand/collapse crossfade (ngAnimate). The leaving element is taken out
   of flow so the entering element doesn't jump — fixes the hide/show flicker (1.6). */
.vth .vth-sw__card.ng-enter, .vth .vth-sw__pill.ng-enter,
.vth .vth-sw__card.ng-leave, .vth .vth-sw__pill.ng-leave {
  transition: opacity .18s ease, transform .18s ease;
}
.vth .vth-sw__card.ng-enter, .vth .vth-sw__pill.ng-enter { opacity: 0; transform: translateY(var(--space-2)); }
.vth .vth-sw__card.ng-enter.ng-enter-active, .vth .vth-sw__pill.ng-enter.ng-enter-active { opacity: 1; transform: none; }
.vth .vth-sw__card.ng-leave, .vth .vth-sw__pill.ng-leave { opacity: 1; transform: none; }
.vth .vth-sw__card.ng-leave.ng-leave-active, .vth .vth-sw__pill.ng-leave.ng-leave-active { opacity: 0; transform: translateY(var(--space-2)); }
.vth .vth-sw-widget .ng-leave { position: absolute; left: 0; bottom: 0; }

/* Empty states (no targets of a type / no search matches) — clear, not blank. */
.vth .vth-sa__state--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-10) var(--space-4);
}
.vth .vth-sa__state-icon {
  width: var(--sw-icon-box);
  height: var(--sw-icon-box);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--surface-blue-soft);
  color: var(--vth-blue);
  margin-bottom: var(--space-2);
}
.vth .vth-sa__state-title { margin: 0; font-size: var(--type-size-xs); font-weight: var(--weight-semibold); color: var(--text-primary); }
.vth .vth-sa__state-text { margin: 0; font-size: var(--type-size-2xs); color: var(--text-subtle); max-width: 34ch; }