/* User-only overrides */
html[data-view="user"] .user-server-table-wrap--picklist .picklist__body {
  max-height: 205px; /* ~5 rows */
  overflow-y: auto;
}

html[data-view="user"] .user-server-table-wrap--table .picklist__body {
  max-height: 245px; /* ~6 rows */
  overflow-y: auto;
}

html[data-view="user"] .user-layout__left :is(.picklist__head, .picklist__row) {
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 88px) 58px;
  gap: 7px;
}

html[data-view="user"] .user-layout__left .picklist__cell--health {
  justify-content: center;
  overflow: visible;
}

html[data-view="user"] .user-layout__left .picklist__cell--current {
  justify-content: center;
  overflow: hidden;
}

html[data-view="user"] .user-layout__left .picklist__cell--current .picklist__badge {
  margin: 0 !important;
  padding: 1px 5px !important;
  font-size: 9px !important;
}

html[data-view="user"] .user-layout__left .picklist__cell--name,
html[data-view="user"] .user-layout__left .picklist__cell--ping {
  min-width: 0;
  overflow: hidden;
}

html[data-view="user"] .user-layout__left .picklist__cell--ping .ping-status {
  display: block;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px) {
  html[data-view="user"] .user-layout__left :is(.picklist__head, .picklist__row) {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 68px) 54px;
    gap: 4px;
  }
}

html[data-view="user"] .user-server-name-health {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
}

html[data-view="user"] .user-server-name-health > .user-server-label {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

html[data-view="user"] .user-server-name-health > .picklist__label {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

html[data-view="user"] .user-server-health {
  display: inline-flex;
  flex: 0 0 8px;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  color: var(--text-muted);
}

html[data-view="user"] .user-server-name-health > .user-server-health {
  flex: 0 0 8px;
}

html[data-view="user"] .user-server-health--stale { color: var(--status-warning-text, #9a6412); }

html[data-view="user"] .user-server-health > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

html[data-view="user"] .user-server-health--available {
  color: var(--status-ok-text, #226b3a);
}

html[data-view="user"] .user-server-health--unavailable {
  color: var(--status-error-text, #a52a2a);
}

html[data-view="user"] .user-servers-panel {
  padding: 0;
  border: 0;
  background: transparent;
}

html[data-view="user"] .user-server-accordion__summary .label {
  font-size: 14px;
}

html[data-view="user"] .user-server-accordion__chev {
  font-size: 16px;
  line-height: 1;
}

/* User-only background */
html[data-view="user"] body {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 38%),
    radial-gradient(circle at 85% 18%, rgba(210, 228, 255, 0.34), transparent 28%),
    radial-gradient(circle at 78% 82%, rgba(208, 198, 255, 0.28), transparent 30%),
    url("/static/img/user-liquid-bg.png") center center / cover no-repeat fixed;
  background-color: #eef3fb;
}

/* User outer glass shell */
html[data-view="user"] .user-shell {
  position: relative;
  overflow: hidden;
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.30),
      rgba(255, 255, 255, 0.14)
    );

  border: 1px solid rgba(255, 255, 255, 0.72);

  box-shadow:
    0 10px 30px rgba(122, 140, 180, 0.10),
    0 0 0 1px rgba(170, 198, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.20);

  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

html[data-view="user"] .user-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.14) 18%,
      rgba(255, 255, 255, 0.05) 42%,
      rgba(255, 255, 255, 0.00) 100%
    );

  opacity: 0.95;
}

html[data-view="user"] {
  --liquid-text: rgba(40, 50, 72, 0.96);
  --liquid-text-hover: rgba(24, 34, 55, 0.98);
  --liquid-text-active: rgba(13, 45, 92, 0.98);

  --liquid-border: rgba(216, 230, 250, 0.86);
  --liquid-border-hover: rgba(225, 238, 255, 0.98);
  --liquid-border-active: rgba(176, 218, 255, 0.62);

  --liquid-bg:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 255, 255, 0.42), transparent 35%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.46),
      rgba(230, 240, 255, 0.24)
    );

  --liquid-bg-hover:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 255, 255, 0.54), transparent 36%),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.58),
      rgba(232, 242, 255, 0.30)
    );

  --liquid-bg-active:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(236, 246, 255, 0.94) 22%,
      rgba(205, 229, 255, 0.90) 68%,
      rgba(178, 214, 255, 0.86) 100%
    );

  --liquid-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(150, 175, 220, 0.15),
    0 4px 10px rgba(105, 130, 185, 0.10);

  --liquid-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(150, 175, 220, 0.18),
    0 6px 14px rgba(105, 130, 185, 0.13);

  --liquid-shadow-active:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -7px 16px rgba(78, 152, 238, 0.16),
    inset 0 0 18px rgba(255, 255, 255, 0.24),
    0 8px 18px rgba(85, 145, 225, 0.18),
    0 0 14px rgba(130, 190, 255, 0.12);

  --liquid-edge-active:
    inset 1px 1px 0 rgba(255, 255, 255, 0.68),
    inset -1px -1px 0 rgba(102, 160, 235, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.22);

  --liquid-top-glare:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.70),
      rgba(255, 255, 255, 0.18) 58%,
      rgba(255, 255, 255, 0.00)
    );

  --liquid-top-glare-active:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.58) 45%,
      rgba(255, 255, 255, 0.08) 100%
    );
}

/* ===== USER ADAPTIVE ORDER ===== */
/* На узких экранах: текущий сервер -> режим подключения -> серверы */
@media (max-width: 980px) {
  html[data-view="user"] .user-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  html[data-view="user"] .user-layout__right {
    order: 1;
  }

  html[data-view="user"] .user-layout__left {
    order: 2;
  }
}

/* ===== USER MOBILE HERO COMPACT ===== */
/* На мобильной версии кнопка питания остаётся исходного размера.
   Сервер и статусы размещаются справа от неё. */
@media (max-width: 760px) {
  html[data-view="user"] .user-hero {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 12px 14px;
    align-items: start;

    padding: 14px;
  }

  html[data-view="user"] .user-hero__power {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-content: center;
  }

  html[data-view="user"] .user-hero__content {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
    display: block;
  }

  html[data-view="user"] .user-current--card {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 10px 14px;
  }

  html[data-view="user"] .user-current__eyebrow,
  html[data-view="user"] .user-current__headline,
  html[data-view="user"] .user-current__chips {
    grid-column: 2;
  }

  html[data-view="user"] .user-current__eyebrow {
    align-self: end;
    margin-top: 2px;
  }

  html[data-view="user"] .user-current__headline {
    align-items: flex-start;
    gap: 8px;
  }

  html[data-view="user"] .user-current__title {
    font-size: clamp(28px, 8vw, 36px);
  }

  html[data-view="user"] .user-current__protocol {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12px;
  }

  html[data-view="user"] .user-current__chips {
    gap: 6px;
  }

  html[data-view="user"] .user-status-chip {
    min-height: 26px;
    padding: 0 10px;
    font-size: 11px;
  }

  html[data-view="user"] .user-status--hero,
  html[data-view="user"] .user-current__meta {
    grid-column: 1 / -1;
  }

  html[data-view="user"] .user-status.user-status--hero {
    min-height: 44px;
    padding: 9px 12px;
  }

  html[data-view="user"] .user-current__meta--hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html[data-view="user"] .user-current__meta-card {
    padding: 10px 12px;
  }
}

@media (max-width: 640px) {
  html[data-view="user"] .user-hero {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 12px;
  }

  html[data-view="user"] .user-current--card {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 9px 12px;
  }

  html[data-view="user"] .user-current__title {
    font-size: clamp(24px, 7vw, 32px);
  }

  html[data-view="user"] .user-current__headline {
    flex-direction: column;
    align-items: flex-start;
  }

  html[data-view="user"] .user-current__protocol {
    min-height: 28px;
    padding: 0 11px;
    font-size: 11px;
  }

  html[data-view="user"] .user-status-chip {
    min-height: 24px;
    padding: 0 9px;
    font-size: 10.5px;
  }
}

/* Stable SVG power icon size */
html[data-view="user"] .user-hero__power-core {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-view="user"] .user-hero__power-icon {
  position: relative;
  z-index: 2;

  width: 32px;
  height: 32px;

  display: block;

  color: currentColor;
  pointer-events: none;
}