/* SQX global header — Zulip adapter */
:root {
  --sqx-bg: #1c1d22;
  --sqx-bg-light: #25272e;
  --sqx-border: #33353c;
  --sqx-text-main: #e0e0e0;
  --sqx-text-muted: #8b8e98;
  --sqx-brand: #32d5c9;
  --sqx-brand-bg: rgba(50, 213, 201, 0.15);
  --sqx-header-height: 56px;

  /* === Brand accent: replace Zulip purple with SQX turquoise === */
  --sqx-accent: #32d5c9;
  --sqx-accent-hsl: 176deg 66% 52%;
  --sqx-accent-strong: #1ab8ad;
  --sqx-accent-deep: #0f8f87;
  --sqx-accent-ink: #04201d;
  --sqx-accent-soft: rgba(50, 213, 201, 0.14);
  --sqx-accent-soft-strong: rgba(50, 213, 201, 0.22);

  /* Remap purple/violet tokens used by brand UI */
  --purple-0: #eafaf8;
  --purple-50: #d8f6f2;
  --purple-100: #c3f0ea;
  --purple-150: #a6e9e1;
  --purple-200: #7fe0d5;
  --purple-250: #5cd9cc;
  --purple-300: #45d6c8;
  --purple-350: #32d5c9;
  --purple-400: #2bc4b8;
  --purple-450: #25b3a8;
  --purple-500: #1fa297;
  --purple-550: #1a9187;
  --purple-600: #158077;
  --purple-650: #116f67;
  --purple-700: #0d5e57;
  --purple-750: #0a4d48;
  --purple-800: #073c38;
  --purple-850: #052b28;
  --purple-900: #031a18;
  --purple-950: #021210;
  --purple-1000: #010a09;

  --violet-0: var(--purple-0);
  --violet-50: var(--purple-50);
  --violet-100: var(--purple-100);
  --violet-150: var(--purple-150);
  --violet-200: var(--purple-200);
  --violet-250: var(--purple-250);
  --violet-300: var(--purple-300);
  --violet-350: var(--purple-350);
  --violet-400: var(--purple-400);
  --violet-450: var(--purple-450);
  --violet-500: var(--purple-500);
  --violet-550: var(--purple-550);
  --violet-600: var(--purple-600);
  --violet-650: var(--purple-650);
  --violet-700: var(--purple-700);
  --violet-750: var(--purple-750);
  --violet-800: var(--purple-800);
  --violet-850: var(--purple-850);
  --violet-900: var(--purple-900);
  --violet-950: var(--purple-950);
  --violet-1000: var(--purple-1000);

  /* Semantic accents that hardcode hsl(240…) purple */
  --color-sidebar-action: light-dark(
    hsl(176deg 45% 32%),
    hsl(var(--sqx-accent-hsl))
  );
  --color-sidebar-action-hover: light-dark(
    hsl(176deg 70% 18%),
    hsl(176deg 55% 90%)
  );
  --color-background-sidebar-action-hover: light-dark(
    hsl(176deg 45% 93%),
    hsl(176deg 25% 22%)
  );
  --color-background-navigation-item-hover: light-dark(
    hsl(176deg 80% 40% / 10%),
    hsl(176deg 70% 55% / 18%)
  );
  --color-background-sidebar-action-heading-hover: var(
    --color-background-navigation-item-hover
  );
  --color-left-sidebar-middle-box-shadow-hover: light-dark(
    hsl(176deg 36% 91%),
    hsl(176deg 19% 20%)
  );
  --color-left-sidebar-outer-box-shadow-hover: light-dark(
    hsl(176deg 80% 40% / 10%),
    hsl(176deg 70% 55% / 18%)
  );
  --color-modal-selectable-icon: light-dark(
    hsl(176deg 45% 32%),
    hsl(var(--sqx-accent-hsl))
  );
  --color-modal-selectable-icon-hover: light-dark(
    hsl(176deg 70% 18%),
    hsl(176deg 55% 90%)
  );
  --background-color-modal-selectable-icon-hover: light-dark(
    hsl(176deg 80% 40% / 10%),
    hsl(176deg 70% 55% / 18%)
  );
  --color-icon-purple: hsl(176deg 45% 42%);
  --color-background-animated-button-hover: hsl(var(--sqx-accent-hsl));
  --color-stream-group-row-checked-icon: hsl(var(--sqx-accent-hsl));
  --color-stream-group-row-checked-icon-hover: hsl(176deg 70% 38%);
  --color-compose-send-button-background: hsl(var(--sqx-accent-hsl));
  --color-compose-send-button-background-interactive: hsl(176deg 70% 38%);
  --color-compose-send-button-focus-border: var(--sqx-accent-ink);
  --color-vdots-visible: light-dark(
    hsl(176deg 45% 32%),
    hsl(var(--sqx-accent-hsl))
  );

  /* Brand action buttons (were purple/magenta) */
  --color-background-brand-solid-action-button: light-dark(
    hsl(var(--sqx-accent-hsl)),
    hsl(176deg 60% 36%)
  );
  --color-background-brand-solid-action-button-hover: light-dark(
    hsl(176deg 66% 46%),
    hsl(176deg 58% 44%)
  );
  --color-background-brand-solid-action-button-active: light-dark(
    hsl(176deg 70% 38%),
    hsl(176deg 60% 36%)
  );
  --color-text-brand-solid-action-button: light-dark(
    var(--sqx-accent-ink),
    hsl(0deg 0% 100%)
  );
  --color-text-brand-subtle-action-button: light-dark(
    hsl(176deg 70% 26%),
    hsl(176deg 55% 78%)
  );
  --color-background-brand-subtle-action-button: light-dark(
    color-mix(in oklch, hsl(var(--sqx-accent-hsl)) 14%, transparent),
    color-mix(in oklch, hsl(176deg 55% 70%) 14%, transparent)
  );
  --color-background-brand-subtle-action-button-hover: light-dark(
    color-mix(in oklch, hsl(var(--sqx-accent-hsl)) 20%, transparent),
    color-mix(in oklch, hsl(176deg 55% 70%) 20%, transparent)
  );
  --color-background-brand-subtle-action-button-active: light-dark(
    color-mix(in oklch, hsl(var(--sqx-accent-hsl)) 26%, transparent),
    color-mix(in oklch, hsl(176deg 55% 70%) 14%, transparent)
  );
  --color-text-brand-text-action-button: light-dark(
    hsl(176deg 55% 34%),
    hsl(176deg 55% 72%)
  );
  --color-background-brand-text-action-button-hover: light-dark(
    color-mix(in oklch, hsl(176deg 70% 18%) 6%, transparent),
    color-mix(in oklch, hsl(176deg 70% 60%) 14%, transparent)
  );
  --color-background-brand-text-action-button-active: light-dark(
    color-mix(in oklch, hsl(176deg 70% 18%) 12%, transparent),
    color-mix(in oklch, hsl(176deg 70% 60%) 20%, transparent)
  );

  --color-text-sidebar-action-heading: light-dark(
    hsl(176deg 45% 32%),
    hsl(var(--sqx-accent-hsl))
  );
  --color-text-sidebar-action-heading-hover: light-dark(
    hsl(176deg 70% 18%),
    hsl(176deg 55% 90%)
  );
  --color-left-sidebar-navigation-icon: light-dark(
    hsl(176deg 45% 32%),
    hsl(var(--sqx-accent-hsl))
  );
  --color-left-sidebar-dm-partners-icon: light-dark(
    hsl(176deg 35% 48%),
    hsl(176deg 40% 55%)
  );
  --color-vdots-hint: light-dark(hsl(176deg 20% 72%), hsl(176deg 20% 32%));
  --color-vdots-hover: light-dark(hsl(176deg 70% 18%), hsl(176deg 55% 90%));
  --color-background-unread-counter-dot: light-dark(
    hsl(176deg 45% 32%),
    hsl(var(--sqx-accent-hsl))
  );
  --color-compose-send-button-icon-color: var(--sqx-accent-ink);
}

html.sqx-has-global-header {
  --sqx-header-offset: var(--sqx-header-height);
}

.sqx-global-header,
.sqx-global-header * {
  box-sizing: border-box;
}

.sqx-global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--sqx-header-height);
  padding: 0 25px;
  border-bottom: 1px solid var(--sqx-border);
  background-color: var(--sqx-bg);
  color: var(--sqx-text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

.sqx-header-left,
.sqx-header-right,
.sqx-header-actions,
.sqx-user-profile,
.sqx-app-switcher,
.sqx-search-wrapper {
  display: flex;
  align-items: center;
}

.sqx-header-left {
  gap: 16px;
  min-width: 0;
}

.sqx-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.sqx-logo-image {
  display: block;
  width: auto;
  height: 24px;
}

.sqx-divider {
  width: 1px;
  height: 24px;
  background-color: var(--sqx-border);
}

.sqx-app-switcher {
  gap: 4px;
}

.sqx-app-btn,
.sqx-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sqx-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sqx-app-btn {
  width: 36px;
  height: 36px;
}

.sqx-app-btn:hover,
.sqx-action-btn:hover {
  background-color: var(--sqx-bg-light);
  color: var(--sqx-text-main);
}

.sqx-app-btn.active {
  background-color: var(--sqx-brand-bg);
  color: var(--sqx-brand);
}

.sqx-header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 320px;
  max-width: 600px;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0 24px;
}

.sqx-search-wrapper {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 36px;
  margin: 0;
}

.sqx-search-wrapper > svg {
  position: absolute;
  left: 12px;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: var(--sqx-text-muted);
  pointer-events: none;
}

.sqx-search-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 12px 0 36px;
  border: 1px solid var(--sqx-border);
  border-radius: 6px;
  outline: none;
  background-color: var(--sqx-bg-light);
  color: var(--sqx-text-main);
  font-size: 13px;
  line-height: 34px;
}

.sqx-search-input:focus {
  border-color: var(--sqx-brand);
}

.sqx-search-input::placeholder {
  color: var(--sqx-text-muted);
}

.sqx-header-right {
  min-width: 0;
  gap: 16px;
}

.sqx-user-profile {
  min-width: 0;
  gap: 10px;
  padding: 2px;
  border: 0;
  background: transparent !important;
  color: var(--sqx-text-main);
  cursor: pointer;
}

.sqx-user-profile:hover,
.sqx-user-profile:focus-visible {
  background: transparent !important;
  color: var(--sqx-brand) !important;
}

.sqx-user-profile:hover .sqx-user-name,
.sqx-user-profile:focus-visible .sqx-user-name {
  color: var(--sqx-brand) !important;
}

.sqx-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #0d8abc;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

img.sqx-avatar {
  display: block;
  border: 1px solid var(--sqx-border);
  background: var(--sqx-bg-light);
}

.sqx-user-name {
  overflow: hidden;
  max-width: 180px;
  color: var(--sqx-text-main);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sqx-header-actions {
  gap: 8px;
}

.sqx-action-btn {
  width: 32px;
  height: 32px;
  padding: 0;
}

.sqx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Login-only: push portico below standalone SQX bar */
html.sqx-has-global-header.sqx-login-page body {
  padding-top: var(--sqx-header-height) !important;
}

html.sqx-has-global-header.sqx-login-page .portico-header {
  top: var(--sqx-header-height) !important;
}

/* === App: SQX logo + switcher inside Zulip navbar (no second bar) === */
html.sqx-navbar-integrated .sqx-global-header {
  display: none !important;
}

html.sqx-navbar-integrated #top_navbar .column-left,
html.sqx-navbar-integrated .header-main .column-left {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}

html.sqx-navbar-integrated #top_navbar .column-left > a.brand,
html.sqx-navbar-integrated .header-main .column-left > a.brand,
html.sqx-navbar-integrated #realm-navbar-wide-logo {
  display: none !important;
}

.sqx-navbar-apps {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0 4px 0 2px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

.sqx-navbar-apps .sqx-logo-image {
  height: 20px;
}

.sqx-navbar-apps .sqx-divider {
  height: 20px;
}

.sqx-navbar-apps .sqx-app-btn {
  width: 32px;
  height: 32px;
  color: var(--sqx-text-muted);
}

.sqx-navbar-apps .sqx-app-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--sqx-text-main);
}

.sqx-navbar-apps .sqx-app-btn.active {
  background-color: var(--sqx-brand-bg);
  color: var(--sqx-brand);
}

@media (max-width: 620px) {
  .sqx-navbar-apps .sqx-logo-image {
    height: 18px;
  }

  .sqx-navbar-apps .sqx-divider {
    display: none;
  }

  .sqx-navbar-apps .sqx-app-btn {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 900px) {
  .sqx-global-header {
    gap: 8px;
    padding: 0 16px;
  }

  .sqx-header-left {
    gap: 8px;
  }

  .sqx-divider,
  .sqx-user-name {
    display: none;
  }

  .sqx-header-center {
    padding: 0 8px;
  }
}

@media (max-width: 620px) {
  .sqx-logo-image {
    height: 20px;
  }

  .sqx-header-center {
    display: none;
  }

  .sqx-app-btn {
    width: 34px;
    height: 34px;
  }
}

/* === Zulip login — match start.sqx.pl === */
html.sqx-login-page {
  --sqx-cyan: #30d5c8;
  --sqx-cyan-dim: rgba(48, 213, 200, 0.35);
  --sqx-login-bg: #070b12;
  --sqx-panel: rgba(14, 22, 36, 0.72);
  --sqx-line: rgba(48, 213, 200, 0.18);
  --sqx-text: #e8eef7;
  --sqx-muted: #8b9bb4;
}

html.sqx-login-page body {
  min-height: 100vh;
  color: var(--sqx-text);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(48, 213, 200, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(48, 213, 200, 0.06), transparent 50%),
    linear-gradient(180deg, #0a101a 0%, var(--sqx-login-bg) 45%, #05080e 100%) !important;
}

html.sqx-login-page .portico-header,
html.sqx-login-page #footer,
html.sqx-login-page .top-links,
html.sqx-login-page .lead,
html.sqx-login-page .get-started,
html.sqx-login-page .left-side,
html.sqx-login-page .or,
html.sqx-login-page .signup-link-wrapper,
html.sqx-login-page .contact-admin,
html.sqx-login-page .sqx-header-right .sqx-action-btn,
html.sqx-login-page #login_form .password_visibility_toggle {
  display: none !important;
}

html.sqx-login-page .portico-container,
html.sqx-login-page .portico-wrap,
html.sqx-login-page .portico-page,
html.sqx-login-page .portico-page-container,
html.sqx-login-page .login-page,
html.sqx-login-page .login-page > .inline-block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

html.sqx-login-page .login-page {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--sqx-header-height)) !important;
  padding: 24px 16px 40px !important;
}

html.sqx-login-page .login-page > .inline-block,
html.sqx-login-page .login-page-container,
html.sqx-login-page .white-box,
html.sqx-login-page .right-side,
html.sqx-login-page #sqx-login {
  display: block !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html.sqx-login-page .right-side {
  display: block !important;
}

html.sqx-login-page #sqx-login {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  animation: sqx-fade-up 0.7s ease-out both;
}

html.sqx-login-page .sqx-login__brand {
  text-align: center;
}

html.sqx-login-page .sqx-login__logo {
  display: block;
  width: min(220px, 70vw);
  height: auto;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 24px rgba(48, 213, 200, 0.25));
  animation: sqx-glow 4s ease-in-out infinite;
}

html.sqx-login-page .sqx-login__tagline {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sqx-muted);
  font-weight: 500;
}

html.sqx-login-page #login_form,
html.sqx-login-page form.login-form {
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 28px 24px !important;
  background: var(--sqx-panel) !important;
  border: 1px solid var(--sqx-line) !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(48, 213, 200, 0.04) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

html.sqx-login-page #login_form .input-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative !important;
}

/* Zulip DOM: input then label — put label above like Start */
html.sqx-login-page #login_form .input-box > label {
  order: -1;
  position: static !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sqx-muted) !important;
  font-weight: 600 !important;
  pointer-events: auto !important;
  transform: none !important;
  opacity: 1 !important;
  float: none !important;
}

html.sqx-login-page #login_form .forgot-password-container {
  display: none !important;
}

html.sqx-login-page #login_form a.forgot-password,
html.sqx-login-page #login_form a.sqx-login__forgot {
  float: none !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
  text-transform: none !important;
  color: var(--sqx-cyan) !important;
  text-decoration: none !important;
  opacity: 0.85;
  margin: 0 !important;
}

html.sqx-login-page #login_form a.forgot-password:hover,
html.sqx-login-page #login_form a.sqx-login__forgot:hover {
  opacity: 1;
  text-decoration: underline !important;
}

html.sqx-login-page #login_form input[type='email'],
html.sqx-login-page #login_form input[type='text'],
html.sqx-login-page #login_form input[type='password'] {
  display: block !important;
  order: 1;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(48, 213, 200, 0.22) !important;
  border-radius: 10px !important;
  background: rgba(5, 10, 18, 0.75) !important;
  color: var(--sqx-text) !important;
  font-size: 15px !important;
  outline: none !important;
  box-shadow: none !important;
}

html.sqx-login-page #login_form input::placeholder {
  color: #5a6a82 !important;
  opacity: 1 !important;
}

html.sqx-login-page #login_form input:focus {
  border-color: var(--sqx-cyan) !important;
  box-shadow: 0 0 0 3px rgba(48, 213, 200, 0.15) !important;
  background: rgba(8, 14, 24, 0.95) !important;
}

html.sqx-login-page #login_form .password-div {
  position: relative;
}

html.sqx-login-page #login_form .password_visibility_toggle {
  color: var(--sqx-muted) !important;
}

html.sqx-login-page #login_form button[type='submit'],
html.sqx-login-page #login_form button.full-width {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 46px !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #2ce0d0 0%, #1ab8ad 50%, #149e95 100%) !important;
  color: #041016 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(48, 213, 200, 0.28) !important;
}

html.sqx-login-page #login_form button[type='submit']:hover {
  filter: brightness(1.06);
  box-shadow: 0 10px 36px rgba(48, 213, 200, 0.4) !important;
  transform: translateY(-1px);
}

html.sqx-login-page #login_form button[type='submit'] .loader {
  display: none !important;
}

html.sqx-login-page #login_form button[type='submit'] .text {
  color: #041016 !important;
}

@keyframes sqx-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sqx-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 18px rgba(48, 213, 200, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 32px rgba(48, 213, 200, 0.4));
  }
}

@media (max-width: 480px) {
  html.sqx-login-page #login_form,
  html.sqx-login-page form.login-form {
    padding: 22px 18px 18px !important;
  }
}