/* ==========================================================================
   Nimble · auth screen (login / registration) + marketing showcase
   ========================================================================== */

.auth {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 32px 22px;
  overflow-y: auto;
}
.auth__inner {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(340px, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
  width: min(1180px, 100%);
}
.auth.is-leaving { animation: authOut .45s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes authOut {
  to { opacity: 0; transform: scale(1.02) translateY(-14px); filter: blur(6px); }
}

.auth__card {
  padding: 32px;
  border-radius: var(--radius-xl);
  animation: slideUp .5s cubic-bezier(.2, .9, .25, 1) both;
}
.auth__brand { display: flex; align-items: center; gap: 15px; margin-bottom: 26px; }
.auth__brand-text h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.1;
}
.auth__brand-text p { font-size: 13.4px; color: var(--text-2); margin-top: 3px; }

/* tabs --------------------------------------------------------------------- */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.tab {
  position: relative;
  z-index: 2;
  padding: 11px 10px;
  border-radius: var(--radius-sm);
  font-size: 14.4px;
  font-weight: 650;
  color: var(--text-2);
  transition: color .25s;
}
.tab.is-active { color: #fff; }
[data-theme='light'] .tab.is-active { color: #fff; }
.tabs__glow {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 5px;
  width: calc(50% - 7px);
  height: calc(100% - 10px);
  border-radius: var(--radius-sm);
  background: var(--grad);
  box-shadow: var(--accent-glow);
  transition: transform .34s cubic-bezier(.2, .9, .25, 1);
}
.tabs[data-mode='register'] .tabs__glow { transform: translateX(calc(100% + 4px)); }

/* form --------------------------------------------------------------------- */
.auth__form { margin-top: 4px; }
.field[data-field='display_name'] { max-height: 0; opacity: 0; overflow: hidden; margin: 0; transition: max-height .35s ease, opacity .3s ease, margin .3s ease; }
.tabs[data-mode='register'] ~ .auth__form .field[data-field='display_name'] {
  max-height: 120px;
  opacity: 1;
  margin-bottom: 16px;
}
.auth__error {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  font-size: 13.6px;
  font-weight: 550;
  color: #ffc2cd;
  background: rgba(251, 113, 133, .14);
  border: 1px solid rgba(251, 113, 133, .32);
  animation: popIn .24s ease both;
}
.auth__error::before {
  content: '!';
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #fb7185, #f97316);
}
.auth__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

/* showcase ----------------------------------------------------------------- */
.showcase { animation: slideUp .6s cubic-bezier(.2, .9, .25, 1) .08s both; }
.showcase__title {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.4px;
  margin-bottom: 16px;
}
.showcase__lead { font-size: 15.6px; color: var(--text-2); max-width: 46ch; margin-bottom: 30px; }
.showcase__list { display: flex; flex-direction: column; gap: 11px; margin-top: 30px; }
.showcase__list li { display: flex; align-items: center; gap: 11px; font-size: 14.4px; color: var(--text-2); }
.showcase__list .ico {
  width: 20px; height: 20px;
  padding: 3px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #35d39a, #23a6d5);
  stroke-width: 2.6;
}

/* chat mock ---------------------------------------------------------------- */
.mock {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
  border: 1px solid var(--border);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--shadow-2), var(--shadow-in);
}
[data-theme='light'] .mock { background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7)); }
.mock__row { display: flex; align-items: flex-end; gap: 10px; animation: bubbleIn .5s cubic-bezier(.2, .9, .25, 1) both; }
.mock__row--them { animation-delay: .15s; }
.mock__row--me { justify-content: flex-end; animation-delay: .4s; }
.mock__row--typing { animation-delay: .65s; animation-iteration-count: infinite; animation-duration: 6s; }
.mock__bubble {
  position: relative;
  max-width: 78%;
  padding: 12px 15px;
  border-radius: 20px 20px 20px 7px;
  font-size: 14.4px;
  line-height: 1.4;
  background: var(--bubble-them);
  border: 1px solid var(--bubble-them-border);
  box-shadow: var(--shadow-1);
}
.mock__bubble--me {
  border-radius: 20px 20px 7px 20px;
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  box-shadow: var(--accent-glow);
}
.mock__meta { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 11.4px; opacity: .72; vertical-align: 2px; }
.mock__typing { display: flex; gap: 4px; padding: 14px 16px; }
.mock__typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-2);
  animation: bounceDot 1.3s infinite;
}
.mock__typing i:nth-child(2) { animation-delay: .16s; }
.mock__typing i:nth-child(3) { animation-delay: .32s; }

.mock__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(30, 36, 66, .95), rgba(20, 26, 50, .95));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(16px);
  font-size: 12.6px;
  animation: bob 6s ease-in-out infinite;
}
[data-theme='light'] .mock__float { background: #fff; }
.mock__float b { display: block; font-size: 14px; }
.mock__float span { color: var(--text-2); }
.mock__float .ico { width: 22px; height: 22px; color: var(--accent-3); }
.mock__float--1 { right: -18px; top: 22px; }
.mock__float--2 { left: -26px; bottom: 34px; animation-delay: 1.6s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (max-width: 1020px) {
  .auth__inner { grid-template-columns: minmax(340px, 470px); justify-content: center; }
  .showcase { display: none; }
}
@media (max-width: 560px) {
  .auth { padding: 18px 14px; }
  .auth__card { padding: 24px 20px; border-radius: var(--radius-lg); }
  .auth__brand-text h1 { font-size: 22px; }
}

/* ==========================================================================
   Nimble · service-mode screen (HTTP 503)
   ========================================================================== */

.maint {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 32px 22px;
  overflow-y: auto;
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(124, 140, 255, .20), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(176, 108, 255, .18), transparent 55%),
    var(--bg);
}
.maint[hidden] { display: none; }
.maint__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(620px 320px at 50% 18%, rgba(53, 214, 245, .12), transparent 70%);
}
.maint__card {
  position: relative;
  width: min(560px, 100%);
  padding: 40px 36px;
  text-align: center;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow-2);
  animation: slideUp .5s cubic-bezier(.2, .9, .25, 1) both;
}
.maint__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.4px;
}
.maint__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--grad);
  color: #fff;
  font-weight: 900;
  box-shadow: var(--accent-glow);
}
.maint__code {
  font-size: clamp(64px, 14vw, 104px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -3px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.maint__title { margin-top: 14px; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.maint__text { margin-top: 10px; font-size: 14.6px; line-height: 1.6; color: var(--text-2); }
.maint__retry {
  margin-top: 26px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--grad);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--accent-glow);
  transition: filter .18s, transform .18s;
}
.maint__retry:hover { filter: brightness(1.07); transform: translateY(-1px); }
body.is-maintenance { overflow: hidden; }