:root {
  --text: #06162a;
  --muted: #65798b;
  --line: rgba(9, 47, 88, 0.12);
  --blue: #126cff;
  --cyan: #20bfff;
  --green: #19d2a1;
  --white: #ffffff;
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(219, 240, 253, 0.02), rgba(219, 240, 253, 0.02)),
    url("assets/ai-sberg-bg-empty-hand.webp") center / cover no-repeat,
    linear-gradient(135deg, #dff3ff 0%, #f8fcff 42%, #cbeeff 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(9, 47, 88, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 47, 88, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
}

a {
  color: inherit;
  text-decoration: none;
}

.future-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.d3-neural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.18;
  mix-blend-mode: screen;
}

.d3-link {
  stroke: url("#linkGradient");
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.88;
}

.d3-node {
  fill: url("#nodeGradient");
  filter: drop-shadow(0 0 12px rgba(32, 191, 255, 0.68));
}

.d3-signal {
  fill: #ffffff;
  filter: drop-shadow(0 0 12px rgba(18, 108, 255, 0.95));
}

.d3-pulse {
  display: none;
}

.d3-hub {
  display: none;
}

.future-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(18, 108, 255, 0.16) 30deg, transparent 64deg, rgba(32, 191, 255, 0.22) 118deg, transparent 170deg, rgba(25, 210, 161, 0.18) 230deg, transparent 300deg);
  animation: reactorSweep 14s linear infinite;
  opacity: 0.08;
}

.future-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 35%, rgba(255, 255, 255, 0.36) 41%, transparent 48%),
    linear-gradient(72deg, transparent 0 55%, rgba(18, 108, 255, 0.18) 59%, transparent 66%),
    repeating-linear-gradient(0deg, rgba(7, 24, 39, 0.025) 0 1px, transparent 1px 9px);
  animation: glassSweep 4.6s ease-in-out infinite;
  opacity: 0.08;
}

.ice-figure,
.iceberg-orb,
.ice-mountains,
.window-card-layer,
.beam,
.halo,
.reactor-core,
.reactor-orbit,
.shard,
.data-rain {
  display: none;
}

.ice-figure,
.iceberg-orb,
.ice-mountains {
  display: none !important;
}

.window-card-layer {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2;
  perspective: 1100px;
  pointer-events: none;
}

.ai-window > .window-card-layer {
  display: none;
}

.stage-card-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  perspective: 1200px;
  pointer-events: none;
}

.snow-field {
  position: absolute;
  inset: -20%;
  z-index: 2;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(32,191,255,0.42) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.7) 0 1.4px, transparent 2.4px);
  background-size: 130px 130px, 190px 190px, 250px 250px;
  animation: snowDrift 48s linear infinite;
  opacity: 0.32;
}

.snow-field::before,
.snow-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(32,191,255,0.2) 47%, transparent 49%),
    linear-gradient(74deg, transparent 0 62%, rgba(255,255,255,0.28) 64%, transparent 66%);
  animation: particleSweep 22s ease-in-out infinite;
}

.snow-field::after {
  animation-delay: -3s;
  opacity: 0.56;
}

.hand-iceberg {
  position: absolute;
  z-index: 3;
  left: max(118px, calc(50% - 725px));
  bottom: clamp(70px, 8vh, 110px);
  width: min(240px, 16vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 88%, rgba(255,255,255,0.9) 0 4%, rgba(32,191,255,0.5) 5% 14%, transparent 36%),
    radial-gradient(circle at 44% 42%, rgba(255,255,255,0.72) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 54%, rgba(255,255,255,0.62) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 54%, rgba(32,191,255,0.18), transparent 62%);
  filter: drop-shadow(0 0 26px rgba(32,191,255,0.68));
  transform-origin: 50% 62%;
  animation: livingIceberg 8s ease-in-out infinite;
}

.hand-iceberg-model {
  position: absolute;
  z-index: 4;
  left: max(118px, calc(50% - 725px));
  bottom: clamp(106px, 12vh, 154px);
  width: min(235px, 15.5vw);
  height: auto;
  transform-origin: 50% 64%;
  filter:
    drop-shadow(0 0 18px rgba(32,191,255,0.95))
    drop-shadow(0 0 42px rgba(18,108,255,0.34))
    drop-shadow(0 22px 36px rgba(18,108,255,0.24));
  animation: icebergModelSpin 9s ease-in-out infinite;
  will-change: transform, filter;
}

.hand-iceberg-model::selection {
  background: transparent;
}

.hand-iceberg::before,
.hand-iceberg::after {
  content: "";
  position: absolute;
  inset: 18% 12% 18%;
  background:
    radial-gradient(circle at 32% 34%, rgba(255,255,255,0.9) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 46%, rgba(255,255,255,0.78) 0 3px, transparent 4px),
    radial-gradient(circle at 44% 66%, rgba(255,255,255,0.8) 0 2px, transparent 3px),
    linear-gradient(28deg, transparent 0 48%, rgba(255,255,255,0.44) 49% 50%, transparent 51%),
    linear-gradient(142deg, transparent 0 36%, rgba(255,255,255,0.32) 37% 38%, transparent 39%);
  opacity: 0.68;
}

.hand-iceberg::after {
  inset: auto 6% 7%;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 34px 16px rgba(32,191,255,0.48);
  animation: handGlow 2.6s ease-in-out infinite;
}

.ice-figure {
  position: absolute;
  left: max(-30px, calc(50% - 830px));
  bottom: -5vh;
  width: min(560px, 37vw);
  height: min(820px, 88vh);
  border-radius: 44% 48% 0 0;
  background:
    radial-gradient(circle at 56% 12%, rgba(255, 255, 255, 0.95) 0 13%, transparent 14%),
    radial-gradient(circle at 62% 15%, rgba(18, 108, 255, 0.34) 0 2%, transparent 3%),
    linear-gradient(115deg, transparent 0 38%, rgba(18, 108, 255, 0.24) 39% 40%, transparent 41%),
    linear-gradient(64deg, transparent 0 50%, rgba(32, 191, 255, 0.22) 51% 52%, transparent 53%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(168, 219, 249, 0.34) 42%, rgba(255, 255, 255, 0.14));
  filter: drop-shadow(0 24px 60px rgba(40, 151, 255, 0.22));
  opacity: 0.72;
  transform: skewX(-7deg);
}

.ice-figure::before {
  content: "";
  position: absolute;
  left: 47%;
  top: 6%;
  width: 34%;
  height: 18%;
  border-radius: 48% 52% 44% 52%;
  background:
    radial-gradient(circle at 58% 44%, rgba(7, 24, 39, 0.48) 0 2%, transparent 3%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(176, 224, 250, 0.58));
  box-shadow: inset 0 0 36px rgba(18, 108, 255, 0.08);
}

.ice-figure::after {
  content: "";
  position: absolute;
  left: 58%;
  top: 17%;
  width: 36%;
  height: 64%;
  border-left: 1px solid rgba(18, 108, 255, 0.28);
  background:
    linear-gradient(92deg, rgba(18, 108, 255, 0.22), transparent 8%),
    repeating-linear-gradient(88deg, transparent 0 38px, rgba(32, 191, 255, 0.16) 39px 41px);
  opacity: 0.8;
}

.iceberg-orb {
  position: absolute;
  left: max(38px, calc(50% - 785px));
  bottom: 7vh;
  width: min(240px, 17vw);
  aspect-ratio: 1;
  clip-path: polygon(50% 2%, 83% 42%, 66% 98%, 35% 98%, 16% 42%);
  background:
    linear-gradient(132deg, rgba(255,255,255,0.92), rgba(32,191,255,0.4) 36%, rgba(18,108,255,0.78) 68%, rgba(255,255,255,0.7)),
    repeating-linear-gradient(40deg, transparent 0 18px, rgba(255,255,255,0.26) 19px 20px);
  box-shadow: 0 0 46px rgba(32, 191, 255, 0.5);
  opacity: 0.9;
  animation: icebergFloat 3.8s ease-in-out infinite;
}

.ice-mountains {
  position: absolute;
  right: -4vw;
  bottom: -3vh;
  width: 52vw;
  height: 42vh;
  background:
    linear-gradient(135deg, transparent 0 19%, rgba(255,255,255,0.9) 20% 31%, transparent 32%),
    linear-gradient(38deg, transparent 0 28%, rgba(162, 213, 244, 0.58) 29% 42%, transparent 43%),
    linear-gradient(155deg, transparent 0 31%, rgba(255,255,255,0.84) 32% 52%, transparent 53%),
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(145, 207, 242, 0.28));
  filter: blur(0.2px);
  opacity: 0.72;
}

.floating-card {
  position: absolute;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  width: clamp(180px, 13vw, 230px);
  min-height: clamp(88px, 7vw, 112px);
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(221, 246, 255, 0.24));
  box-shadow:
    0 26px 70px rgba(18, 108, 255, 0.16),
    inset 0 0 28px rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(32, 191, 255, 0.12);
  backdrop-filter: blur(16px) saturate(1.16);
  color: #12314b;
  transform: perspective(820px) rotateY(var(--tilt, 0deg)) rotateX(4deg) translateZ(0);
  animation: cardFloat 14s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  pointer-events: auto;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease, background 0.42s ease, opacity 0.42s ease;
}

.floating-card:hover {
  transform: perspective(820px) rotateY(calc(var(--tilt, 0deg) * 0.55)) rotateX(0deg) translateY(-14px) translateZ(34px) scale(1.06);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(221, 246, 255, 0.32));
  box-shadow:
    0 34px 90px rgba(18, 108, 255, 0.22),
    0 0 34px rgba(32, 191, 255, 0.28),
    inset 0 0 32px rgba(255, 255, 255, 0.54);
}

.floating-card:hover .card-icon {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 0 22px rgba(32, 191, 255, 0.35);
}


.floating-card strong {
  align-self: end;
  font-size: 14px;
  font-weight: 950;
}

.floating-card span:last-child {
  grid-column: 2;
  color: rgba(18, 49, 75, 0.68);
  font-size: 12px;
  line-height: 1.35;
}

.card-icon {
  grid-row: 1 / 3;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(18, 108, 255, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.62);
  color: #168bdc;
  font-size: 12px;
  font-weight: 950;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.card-ai { left: max(28px, calc(50% - 790px)); top: 22vh; --tilt: 12deg; }
.card-auto { left: max(28px, calc(50% - 820px)); top: 43vh; --tilt: 10deg; animation-delay: -2s; }
.card-crm { right: max(30px, calc(50% - 820px)); top: 22vh; --tilt: -12deg; animation-delay: -1.2s; }
.card-site { right: max(44px, calc(50% - 780px)); top: 43vh; --tilt: -10deg; animation-delay: -2.8s; }
.card-content { right: max(76px, calc(50% - 750px)); top: 64vh; --tilt: -8deg; animation-delay: -3.7s; }

.beam {
  position: absolute;
  width: 42vw;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(18, 108, 255, 0.48), rgba(32, 191, 255, 0.94), transparent);
  box-shadow: 0 0 26px rgba(32, 191, 255, 0.3);
  animation: beamRush 4.8s linear infinite;
  will-change: transform, opacity;
}

.beam-one { top: 22%; left: -46vw; transform: rotate(-10deg); }
.beam-two { top: 58%; left: -52vw; animation-delay: 1s; transform: rotate(8deg); }
.beam-three { top: 78%; left: -50vw; animation-delay: 1.8s; transform: rotate(-4deg); }

.halo {
  position: absolute;
  border: 1px solid rgba(18, 108, 255, 0.16);
  border-radius: 50%;
  box-shadow: inset 0 0 40px rgba(32, 191, 255, 0.05);
  animation: haloMove 6s ease-in-out infinite;
  will-change: transform;
}

.halo-one { width: 360px; height: 360px; left: 8%; top: 12%; }
.halo-two { width: 460px; height: 460px; right: 4%; bottom: 4%; animation-delay: -3s; }

.reactor-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.86) 0 7%, rgba(32, 191, 255, 0.36) 8% 18%, rgba(18, 108, 255, 0.16) 19% 42%, transparent 64%);
  filter: blur(0.2px);
  transform: translate(-50%, -50%);
  animation: corePulse 2.8s ease-in-out infinite;
  will-change: transform, opacity;
}

.reactor-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(18, 108, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.reactor-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #126cff;
  box-shadow: 0 0 18px rgba(18, 108, 255, 0.75);
  transform: translateY(-50%);
}

.reactor-a {
  width: min(62vw, 820px);
  height: min(20vw, 260px);
  animation: orbitA 9s linear infinite;
}

.reactor-b {
  width: min(54vw, 720px);
  height: min(26vw, 340px);
  animation: orbitB 12s linear infinite;
}

.reactor-c {
  width: min(44vw, 600px);
  height: min(32vw, 420px);
  animation: orbitC 15s linear infinite;
}

.shard {
  position: absolute;
  width: 110px;
  height: 160px;
  clip-path: polygon(52% 0, 100% 64%, 56% 100%, 0 62%);
  border: 1px solid rgba(18, 108, 255, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(18, 108, 255, 0.08));
  animation: shardFloat 5.8s ease-in-out infinite;
}

.shard-a { left: 9%; top: 20%; }
.shard-b { right: 10%; top: 16%; transform: scale(0.86) rotate(18deg); animation-delay: -2s; }
.shard-c { right: 17%; bottom: 9%; transform: scale(0.68) rotate(-12deg); animation-delay: -4s; }

.data-rain {
  position: absolute;
  top: -20%;
  width: 1px;
  height: 28vh;
  background: linear-gradient(transparent, rgba(18, 108, 255, 0.28), transparent);
  animation: dataFall 3.4s linear infinite;
}

.rain-a { left: 18%; }
.rain-b { left: 72%; animation-delay: -1.1s; }
.rain-c { left: 84%; animation-delay: -2.2s; }

.ai-window {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
  width: min(790px, calc(100vw - 28px));
  height: min(830px, calc(100dvh - 72px));
  margin: 36px auto;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 36%, rgba(32, 191, 255, 0.035) 62%, transparent 84%),
    rgba(244, 251, 255, 0.18);
  box-shadow:
    0 30px 110px rgba(7, 38, 70, 0.17),
    0 0 0 1px rgba(32, 191, 255, 0.22),
    inset 0 0 90px rgba(32, 191, 255, 0.08);
  backdrop-filter: blur(3px) saturate(1.12);
  overflow: hidden;
}

.ai-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.96), rgba(32, 191, 255, 0.6), rgba(18, 108, 255, 0.3), rgba(255, 255, 255, 0.9));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: edgeGlow 6s ease-in-out infinite;
}

.ai-window::after {
  content: none;
  position: absolute;
  inset: 58px 18px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18, 108, 255, 0.28), rgba(32, 191, 255, 0.5), transparent);
  pointer-events: none;
}

.window-top,
.brand-stage,
.chat-widget {
  min-width: 0;
  min-height: 0;
}

.window-top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 16px 0;
  border-bottom: 0;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
  animation: blink 1.2s ease-in-out infinite;
}

.status-text {
  overflow: hidden;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-link {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(18, 108, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  color: #168bdc;
}

.telegram-link svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.brand-stage {
  position: absolute;
  inset: 56px 0 0;
  display: grid;
  place-items: start center;
  padding-top: clamp(98px, 18vh, 150px);
  border-bottom: 0;
  overflow: hidden;
}

.brand-stage::before {
  content: none;
  position: absolute;
  width: min(540px, 64vw);
  aspect-ratio: 1;
  border: 1px solid rgba(18, 108, 255, 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 35%, rgba(255, 255, 255, 0.58) 36% 38%, transparent 39%),
    conic-gradient(from 0deg, transparent, rgba(32, 191, 255, 0.52), transparent 22%, rgba(18, 108, 255, 0.42), transparent 55%, rgba(25, 210, 161, 0.42), transparent);
  animation: logoHalo 5.4s linear infinite;
  opacity: 0.22;
  z-index: 0;
}

.brand-stage::after {
  content: none;
  position: absolute;
  width: min(430px, 54vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(18, 108, 255, 0.34) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 0 48%, rgba(32, 191, 255, 0.3) 49% 51%, transparent 52%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.68), rgba(32, 191, 255, 0.08) 38%, transparent 64%);
  filter: drop-shadow(0 0 28px rgba(32, 191, 255, 0.18));
  animation: corePulse 2.9s ease-in-out infinite;
  opacity: 0.2;
  z-index: 0;
}

.brand-logo {
  position: relative;
  display: block;
  width: min(330px, 54vw);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 18px 38px rgba(18, 108, 255, 0.16));
  mix-blend-mode: normal;
  z-index: 1;
  pointer-events: none;
}

.mobile-brand-caption {
  display: none;
}

.iceberg-point {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #20bfff 42%, #126cff);
  box-shadow:
    0 0 0 7px rgba(18, 108, 255, 0.08),
    0 0 22px rgba(18, 108, 255, 0.72);
  cursor: pointer;
  animation: pointPulse 1.8s ease-in-out infinite;
}

.iceberg-point::before {
  content: "";
  position: absolute;
  inset: -18px;
}

.iceberg-point::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  min-width: max-content;
  max-width: 180px;
  transform: translate(-50%, 8px) scale(0.96);
  border: 1px solid rgba(18, 108, 255, 0.18);
  border-radius: 10px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.92);
  color: #071827;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 14px 32px rgba(7, 38, 70, 0.12);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.iceberg-point:hover,
.iceberg-point:focus-visible {
  outline: 0;
  transform: scale(1.22);
}

.iceberg-point:hover::after,
.iceberg-point:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.point-site { left: calc(50% - 112px); top: clamp(76px, 14vh, 118px); }
.point-ai { left: calc(50% + 28px); top: clamp(112px, 17vh, 154px); animation-delay: -0.4s; }
.point-crm { left: calc(50% + 112px); top: clamp(178px, 25vh, 228px); animation-delay: -0.8s; }
.point-ads { left: calc(50% - 52px); top: clamp(210px, 30vh, 270px); animation-delay: -1.1s; }
.point-brand { left: calc(50% - 158px); top: clamp(176px, 25vh, 226px); animation-delay: -1.4s; }
}

.chat-widget {
  grid-row: 2;
  display: grid;
  grid-template-rows: minmax(112px, 1fr) auto auto auto auto;
  margin: clamp(438px, 54vh, 486px) clamp(24px, 3vw, 38px) 28px;
  padding: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.chat-messages {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, transparent, transparent),
    transparent;
  box-shadow: none;
  scrollbar-width: thin;
}

.chat-messages::before {
  content: none;
  position: sticky;
  top: -12px;
  z-index: 2;
  height: 1px;
  margin: -12px -12px 0;
  background: linear-gradient(90deg, transparent, rgba(32, 191, 255, 0.55), transparent);
}

.chat-message {
  width: fit-content;
  max-width: min(82%, 650px);
  padding: 11px 12px;
  border-radius: var(--radius);
  font-size: 15px;
  overflow-wrap: anywhere;
  animation: messageIn 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}

.chat-message.assistant {
  border: 1px solid rgba(7, 38, 70, 0.1);
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(7, 38, 70, 0.06);
}

.chat-message.user {
  justify-self: end;
  background: linear-gradient(135deg, #126cff, #18a7ff);
  color: #fff;
  box-shadow: 0 10px 28px rgba(18, 108, 255, 0.22);
}

.quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 8px;
}

.quick-prompts button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(7, 38, 70, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.56);
  color: #143047;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.quick-prompts button:hover {
  border-color: rgba(18, 108, 255, 0.35);
  box-shadow: 0 8px 22px rgba(18, 108, 255, 0.08);
  transform: translateY(-1px);
}

.quick-prompts .prompt-icon,
.quick-prompts small {
  display: none;
}

.quick-prompts strong {
  font: inherit;
}

.chat-form,
.lead-send {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.lead-send {
  margin-top: 8px;
}

.privacy-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  color: rgba(7, 24, 39, 0.64);
  font-size: 12px;
  line-height: 1.25;
}

.privacy-consent input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #126cff;
  flex: 0 0 auto;
}

.privacy-consent a {
  color: #126cff;
  font-weight: 800;
  text-decoration: none;
}

.chat-form input,
.lead-send input {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(7, 38, 70, 0.14);
  border-radius: var(--radius);
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font: inherit;
}

.chat-form input::placeholder,
.lead-send input::placeholder {
  color: rgba(7, 24, 39, 0.38);
}

.chat-form input:focus,
.lead-send input:focus {
  outline: 2px solid rgba(18, 108, 255, 0.22);
  border-color: rgba(18, 108, 255, 0.62);
  box-shadow: 0 0 0 5px rgba(32, 191, 255, 0.08);
}

.chat-form button,
.lead-send button {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 14px;
  background: linear-gradient(135deg, #126cff, #20c5ff);
  color: #fff;
  font: inherit;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(18, 108, 255, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.lead-send button {
  background: #071827;
  box-shadow: 0 12px 26px rgba(7, 24, 39, 0.18);
}

.chat-form button:hover,
.lead-send button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(18, 108, 255, 0.24);
}

.chat-form button:disabled,
.lead-send button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.chat-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.chat-note[data-status="error"] {
  color: #b42318;
  font-weight: 800;
}

.chat-note[data-status="success"] {
  color: #087443;
  font-weight: 800;
}

.chat-note[data-status="pending"] {
  color: #126cff;
  font-weight: 800;
}

body.is-thinking .ai-window,
body.is-typing .ai-window {
  box-shadow: 0 28px 90px rgba(18, 108, 255, 0.18), inset 0 0 80px rgba(32, 191, 255, 0.09);
}

@media (max-height: 760px) {
  .ai-window {
    grid-template-rows: 48px minmax(0, 1fr);
    height: calc(100dvh - 16px);
    margin: 8px auto;
  }

  .chat-widget {
    margin: clamp(320px, 52vh, 390px) 28px 18px;
    padding: 10px;
  }

}

@media (max-height: 620px) {
  .quick-prompts {
    display: none;
  }
}

@media (max-width: 720px) {
  .ai-window {
    grid-template-rows: 48px minmax(0, 1fr);
    width: min(790px, calc(100vw - 28px));
    height: calc(100dvh - 36px);
    margin: 18px auto;
  }

  .brand-stage {
    inset: 48px 0 0;
    height: auto;
    padding-top: clamp(70px, 14vh, 110px);
  }

  .brand-stage::before {
    width: min(420px, 72vw);
  }

  .brand-stage::after {
    width: min(310px, 58vw);
  }

  .brand-logo {
    width: min(280px, 48vw);
  }

  .chat-widget {
    grid-row: 2;
    grid-template-rows: minmax(170px, 1fr) auto auto auto auto;
    margin: clamp(360px, 54vh, 440px) 24px 18px;
    padding: 12px;
  }

  .ice-figure {
    display: block;
    left: -110px;
    width: 320px;
    opacity: 0.28;
  }

  .iceberg-orb {
    display: block;
    left: 34px;
    bottom: 12vh;
    width: 110px;
    opacity: 0.46;
  }

  .floating-card {
    display: none;
    width: 150px;
    min-height: 62px;
    padding: 10px;
    grid-template-columns: 30px 1fr;
    gap: 2px 8px;
    border-radius: 12px;
    opacity: 0.9;
  }

  .stage-card-layer {
    display: none;
  }

  .hand-iceberg {
    width: 112px;
    left: 32px;
    bottom: 10vh;
    opacity: 0.62;
  }

  .hand-iceberg-model {
    width: 118px;
    left: 32px;
    bottom: 14vh;
    opacity: 0.72;
  }

  .floating-card strong {
    font-size: 12px;
  }

  .floating-card span:last-child {
    font-size: 10px;
  }

  .card-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 10px;
  }

}

@media (max-width: 720px) {
  .ai-window {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    margin: 6px auto;
    border-radius: 14px;
    grid-template-rows: 42px clamp(118px, 18vh, 150px) minmax(0, 1fr);
  }

  .window-top {
    grid-template-columns: 12px 1fr 42px;
    padding: 8px 12px;
  }

  .telegram-link {
    width: 40px;
    height: 40px;
  }

  .brand-stage {
    padding: 0 10px 4px;
  }

  .brand-logo {
    width: min(190px, 52vw);
    height: auto;
  }

  .chat-widget {
    grid-template-rows: minmax(170px, 1fr) auto auto auto auto;
    margin: 0 10px 10px;
    padding: 10px;
  }

  .floating-card {
    display: none;
  }

  .stage-card-layer,
  .hand-iceberg,
  .hand-iceberg-model {
    display: none;
  }

  .ice-mountains {
    width: 90vw;
    opacity: 0.38;
  }

  .status-text {
    display: none;
  }

  .chat-form,
  .lead-send {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .privacy-consent {
    margin-top: 7px;
    font-size: 11px;
  }

  .chat-messages {
    gap: 8px;
    padding: 10px;
  }

  .chat-message {
    max-width: 92%;
    padding: 9px 10px;
    font-size: 14px;
    line-height: 1.28;
  }

  .quick-prompts {
    gap: 7px;
    margin-bottom: 8px;
  }

  .quick-prompts button {
    min-height: 34px;
    padding: 0 11px;
    font-size: 13px;
  }

  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    min-height: 44px;
    border-radius: 13px;
  }

  .chat-note {
    font-size: 12px;
  }

  .chat-message {
    width: calc(100% - 2px) !important;
    padding: 14px 12px !important;
    font-size: clamp(16px, 4.35vw, 18px) !important;
    white-space: normal !important;
    word-break: normal !important;
  }
}

/* Last mobile readability guard. */
@media (max-width: 720px) {
  .chat-message {
    font-size: 16px !important;
    line-height: 1.28 !important;
    padding: 13px 11px !important;
    overflow: visible !important;
  }

  .quick-prompts button {
    font-size: 13px !important;
  }
}

/* Mobile air margins: premium look and no edge clipping. */
@media (max-width: 720px) {
  .chat-widget {
    width: min(100%, calc(100vw - 70px)) !important;
    max-width: calc(100vw - 70px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .chat-message,
  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .chat-widget {
    width: calc(100vw - 58px) !important;
    max-width: calc(100vw - 58px) !important;
  }
}

/* Mobile light premium reboot: clean, logical, tech, phone-only. Desktop untouched. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #eef9ff !important;
  }

  body {
    display: block !important;
    color: #06192b !important;
    font-family: Inter, Arial, sans-serif !important;
  }

  body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 78% 10%, rgba(37, 147, 255, 0.26), transparent 24%),
      radial-gradient(circle at 10% 28%, rgba(37, 214, 255, 0.23), transparent 28%),
      linear-gradient(rgba(30, 128, 210, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30, 128, 210, 0.045) 1px, transparent 1px),
      linear-gradient(180deg, #f8fdff 0%, #e8f8ff 46%, #f7fcff 100%) !important;
    background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
    z-index: 0 !important;
  }

  body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      linear-gradient(125deg, transparent 0 18%, rgba(25, 150, 255, 0.13) 18.2%, transparent 18.55%),
      linear-gradient(245deg, transparent 0 70%, rgba(25, 150, 255, 0.11) 70.2%, transparent 70.55%) !important;
    z-index: 0 !important;
  }

  .future-bg,
  .stage-card-layer,
  .floating-card,
  .hand-iceberg,
  .hand-iceberg-render {
    display: none !important;
  }

  .ai-window {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 14px 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .ai-window::before {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    display: block !important;
    border: 1px solid rgba(38, 153, 255, 0.18) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.22)) !important;
    box-shadow:
      inset 0 0 38px rgba(70, 195, 255, 0.08),
      0 16px 48px rgba(12, 91, 160, 0.08) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  .ai-window::after {
    content: "" !important;
    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    top: 92px !important;
    height: 1px !important;
    display: block !important;
    background: linear-gradient(90deg, transparent, rgba(25, 150, 255, 0.45), transparent) !important;
    box-shadow: 0 0 18px rgba(45, 185, 255, 0.24) !important;
    pointer-events: none !important;
  }

  .window-top {
    position: relative !important;
    inset: auto !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: 10px 1fr 44px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 4px !important;
  }

  .status-dot {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #19d2a1 !important;
    box-shadow: 0 0 14px rgba(25, 210, 161, 0.62) !important;
  }

  .status-text {
    display: block !important;
    color: #116bb8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
  }

  .telegram-link {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border: 1px solid rgba(22, 139, 220, 0.18) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.96), rgba(217, 246, 255, 0.86)) !important;
    box-shadow:
      0 10px 26px rgba(19, 124, 210, 0.14),
      inset 0 0 18px rgba(255,255,255,0.7) !important;
  }

  .telegram-link svg {
    width: 24px !important;
    height: 24px !important;
    fill: #168bdc !important;
  }

  .brand-stage {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 152px !important;
    height: 152px !important;
    flex: 0 0 152px !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .brand-stage::before {
    content: "" !important;
    position: absolute !important;
    width: min(260px, 74vw) !important;
    aspect-ratio: 1 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle, rgba(32, 191, 255, 0.24), rgba(18, 108, 255, 0.1) 42%, transparent 70%) !important;
    filter: blur(1px) !important;
    z-index: -1 !important;
  }

  .brand-stage::after {
    content: none !important;
    display: none !important;
  }

  .brand-logo {
    width: min(235px, 68vw) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 138px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transform: none !important;
    filter:
      drop-shadow(0 10px 24px rgba(22, 101, 168, 0.12))
      drop-shadow(0 0 18px rgba(32, 191, 255, 0.28)) !important;
  }

  .chat-widget {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .chat-messages {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    mask-image: none !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px 15px !important;
    border: 1px solid rgba(28, 143, 235, 0.18) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.92), rgba(229, 248, 255, 0.74)) !important;
    color: #06192b !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-shadow: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-shadow:
      0 14px 34px rgba(19, 101, 166, 0.11),
      inset 0 0 24px rgba(255,255,255,0.58) !important;
    backdrop-filter: blur(12px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  }

  .chat-message.assistant:first-child {
    color: #06192b !important;
    font-size: 17px !important;
    text-shadow: none !important;
  }

  .chat-message.assistant:first-child::before,
  .chat-message.assistant:first-child::after {
    content: none !important;
    display: none !important;
  }

  .chat-message.user {
    justify-self: end !important;
    width: auto !important;
    max-width: 92% !important;
    background: linear-gradient(135deg, #126cff, #20bfff) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: left !important;
    box-shadow: 0 14px 28px rgba(18, 108, 255, 0.24) !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .quick-prompts button {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 7px 4px !important;
    border: 1px solid rgba(28, 143, 235, 0.16) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.95), rgba(224, 247, 255, 0.8)) !important;
    color: #08213a !important;
    text-align: center !important;
    box-shadow:
      0 10px 24px rgba(19, 101, 166, 0.09),
      inset 0 0 18px rgba(255,255,255,0.72) !important;
    overflow: hidden !important;
  }

  .quick-prompts button::before,
  .quick-prompts button::after,
  .prompt-icon,
  .quick-prompts small {
    content: none !important;
    display: none !important;
  }

  .quick-prompts strong {
    display: block !important;
    color: #08213a !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .chat-form,
  .lead-send {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  .chat-form::before,
  .lead-send::before {
    content: none !important;
    display: none !important;
  }

  .chat-form input,
  .lead-send input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(28, 143, 235, 0.18) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.96), rgba(233, 249, 255, 0.86)) !important;
    color: #06192b !important;
    font-size: 16px !important;
    box-shadow:
      0 12px 28px rgba(19, 101, 166, 0.09),
      inset 0 0 20px rgba(255,255,255,0.74) !important;
  }

  .chat-form input::placeholder,
  .lead-send input::placeholder {
    color: rgba(6, 25, 43, 0.42) !important;
  }

  .chat-form button,
  .lead-send button {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 0 !important;
    box-shadow: 0 16px 34px rgba(18, 108, 255, 0.22) !important;
  }

  .chat-form button {
    background:
      radial-gradient(circle at 12% 50%, rgba(255,255,255,0.28), transparent 18%),
      linear-gradient(135deg, #126cff, #20bfff) !important;
  }

  .lead-send button {
    background:
      linear-gradient(135deg, #06192b, #0a2c4f) !important;
    box-shadow: 0 14px 30px rgba(6, 25, 43, 0.2) !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    display: block !important;
    color: #fff !important;
    font-size: clamp(16px, 4.6vw, 20px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
  }

  .chat-form button::before {
    content: "Спросить AI-Sberg" !important;
  }

  .lead-send button::before {
    content: "Оставить заявку" !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: none !important;
    display: none !important;
  }

  .privacy-consent {
    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    color: rgba(6, 25, 43, 0.7) !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
  }

  .privacy-consent input {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 1px solid rgba(28, 143, 235, 0.32) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.86) !important;
  }

  .privacy-consent a {
    color: #126cff !important;
    font-weight: 900 !important;
  }

  .chat-note {
    width: 100% !important;
    margin: 0 !important;
    color: rgba(6, 25, 43, 0.48) !important;
    font-size: 12px !important;
    text-align: center !important;
  }

  body.conversation-started .brand-stage {
    flex: 0 0 76px !important;
    min-height: 76px !important;
    height: 76px !important;
    padding: 0 !important;
  }

  body.conversation-started .brand-logo {
    width: 116px !important;
    max-height: 72px !important;
  }

  body.conversation-started .quick-prompts {
    display: none !important;
  }

  body.conversation-started .chat-messages {
    max-height: none !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 390px) {
  .ai-window {
    padding: 12px 14px 16px !important;
  }

  .brand-stage {
    flex-basis: 132px !important;
    min-height: 132px !important;
    height: 132px !important;
  }

  .brand-logo {
    width: min(205px, 64vw) !important;
    max-height: 120px !important;
  }

  .chat-message {
    padding: 14px 13px !important;
    font-size: 15px !important;
  }

  .quick-prompts {
    gap: 6px !important;
  }

  .quick-prompts button {
    min-height: 42px !important;
    border-radius: 13px !important;
  }

  .chat-form input,
  .lead-send input {
    min-height: 50px !important;
  }

  .chat-form button,
  .lead-send button {
    min-height: 52px !important;
  }
}

/* Desktop overlap repair: keep logo and conversation in separate visual zones. */
@media (min-width: 721px) {
  .brand-stage {
    inset: 42px 0 auto;
    height: clamp(188px, 27vh, 246px);
  }

  .brand-logo {
    width: min(232px, 30vw);
  }

  .chat-widget {
    grid-template-rows: minmax(118px, auto) auto auto auto auto;
    bottom: clamp(18px, 2.6vh, 26px);
  }

  .chat-messages {
    min-height: 118px;
    max-height: clamp(118px, 21vh, 168px);
    align-content: end;
    padding: 0;
  }

  .chat-message {
    max-width: min(82%, 640px);
  }
}

@media (max-width: 420px) and (max-height: 760px) {
  .ai-window {
    grid-template-rows: 40px clamp(96px, 15vh, 124px) minmax(0, 1fr);
  }

  .brand-logo {
    width: min(160px, 50vw);
  }

  .quick-prompts button {
    min-height: 32px;
    font-size: 12px;
  }

  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    min-height: 42px;
  }
}

@keyframes beamRush {
  0% { left: -52vw; opacity: 0; }
  12% { opacity: 1; }
  75% { opacity: 0.85; }
  100% { left: 110vw; opacity: 0; }
}

@keyframes haloMove {
  50% { transform: translateY(-18px) scale(1.04); }
}

@keyframes reactorSweep {
  to { transform: rotate(360deg); }
}

@keyframes glassSweep {
  0%, 100% { transform: translateX(-16%); opacity: 0.26; }
  45% { transform: translateX(16%); opacity: 0.78; }
}

@keyframes corePulse {
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.78; }
}

@keyframes orbitA {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbitB {
  from { transform: translate(-50%, -50%) rotate(62deg); }
  to { transform: translate(-50%, -50%) rotate(422deg); }
}

@keyframes orbitC {
  from { transform: translate(-50%, -50%) rotate(-54deg); }
  to { transform: translate(-50%, -50%) rotate(306deg); }
}

@keyframes shardFloat {
  50% { translate: 0 -18px; rotate: 7deg; }
}

@keyframes dataFall {
  to { top: 120%; }
}

@keyframes snowDrift {
  from { transform: translate3d(0, -4%, 0); }
  to { transform: translate3d(-8%, 14%, 0); }
}

@keyframes particleSweep {
  0%, 100% { transform: translateX(-8%); opacity: 0.18; }
  45% { transform: translateX(8%); opacity: 0.62; }
}

@keyframes icebergFloat {
  50% { transform: translateY(-14px) scale(1.02); }
}

@keyframes livingIceberg {
  0%, 100% { transform: translateY(0) rotateY(-9deg) rotateZ(-1deg); }
  35% { transform: translateY(-14px) rotateY(12deg) rotateZ(1.5deg); }
  65% { transform: translateY(-7px) rotateY(-16deg) rotateZ(-0.5deg); }
}

@keyframes icebergModelSpin {
  0%, 100% {
    transform: translate3d(0, 0, 0) perspective(620px) rotateY(-18deg) rotateX(2deg) rotateZ(-1deg) scale(1);
    filter:
      drop-shadow(0 0 18px rgba(32,191,255,0.88))
      drop-shadow(0 0 42px rgba(18,108,255,0.32))
      drop-shadow(0 22px 36px rgba(18,108,255,0.22));
  }
  38% {
    transform: translate3d(0, -12px, 0) perspective(620px) rotateY(18deg) rotateX(-2deg) rotateZ(1.2deg) scale(1.035);
    filter:
      drop-shadow(0 0 26px rgba(32,191,255,1))
      drop-shadow(0 0 58px rgba(18,108,255,0.48))
      drop-shadow(0 30px 42px rgba(18,108,255,0.26));
  }
  68% {
    transform: translate3d(0, -5px, 0) perspective(620px) rotateY(-28deg) rotateX(2deg) rotateZ(-0.6deg) scale(1.01);
  }
}

@keyframes handGlow {
  50% {
    opacity: 0.55;
    box-shadow: 0 0 48px 22px rgba(32,191,255,0.7);
  }
}

@keyframes cardFloat {
  50% {
    translate: 0 -12px;
    box-shadow: 0 24px 58px rgba(18, 108, 255, 0.16), inset 0 0 32px rgba(255, 255, 255, 0.42);
  }
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes promptMorph {
  from {
    opacity: 0.55;
    transform: translate3d(0, 5px, 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes blink {
  50% { opacity: 0.35; }
}

@keyframes pulseRing {
  50% {
    opacity: 0.45;
    transform: scale(1.22);
  }
}

@keyframes edgeGlow {
  50% { opacity: 0.46; }
}

@keyframes logoHalo {
  to { transform: rotate(360deg); }
}

/* Final scene repair: transparent main glass, bottom chat, real 3D iceberg layer. */
.ai-window {
  position: relative;
  display: block;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(220, 247, 255, 0.07) 42%, rgba(255, 255, 255, 0.05)),
    rgba(245, 252, 255, 0.08);
  backdrop-filter: blur(2px) saturate(1.06);
  -webkit-backdrop-filter: blur(2px) saturate(1.06);
}

.brand-stage {
  position: absolute;
  inset: 46px 0 auto;
  height: clamp(210px, 31vh, 292px);
  display: grid;
  place-items: center;
  padding: 0 clamp(20px, 4vw, 48px);
  pointer-events: none;
}

.brand-logo {
  width: min(258px, 34vw);
  opacity: 0.94;
  filter:
    drop-shadow(0 18px 38px rgba(18, 108, 255, 0.18))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.34));
}

.chat-widget {
  position: absolute;
  left: clamp(24px, 3vw, 38px);
  right: clamp(24px, 3vw, 38px);
  bottom: clamp(20px, 3vh, 30px);
  display: grid;
  grid-template-rows: minmax(188px, auto) auto auto auto auto;
  gap: 9px;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.chat-messages {
  max-height: clamp(188px, 30vh, 292px);
  min-height: 188px;
  align-content: end;
  overflow: auto;
  padding: 2px 0;
  mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 12px), transparent 100%);
}

.chat-message {
  line-height: 1.36;
}

.chat-message.assistant {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.chat-form,
.lead-send {
  align-items: stretch;
  gap: 10px;
}

.chat-form input,
.lead-send input {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hand-iceberg-canvas {
  position: absolute;
  z-index: 5;
  left: max(82px, calc(50% - 758px));
  bottom: clamp(54px, 6.4vh, 94px);
  width: min(236px, 15.3vw);
  aspect-ratio: 1 / 1.25;
  filter:
    drop-shadow(0 0 28px rgba(32, 191, 255, 1))
    drop-shadow(0 0 68px rgba(18, 108, 255, 0.58))
    drop-shadow(0 24px 34px rgba(0, 89, 180, 0.22));
  pointer-events: none;
}

.has-iceberg-3d .hand-iceberg-model {
  display: none;
}

.hand-iceberg {
  left: max(64px, calc(50% - 776px));
  bottom: clamp(24px, 3.4vh, 64px);
  width: min(302px, 19.4vw);
  opacity: 0.96;
  filter:
    drop-shadow(0 0 46px rgba(32, 191, 255, 0.95))
    drop-shadow(0 0 90px rgba(18, 108, 255, 0.34))
    blur(0.1px);
}

.hand-iceberg::before {
  inset: 11% 8% 10%;
  opacity: 0.86;
}

.hand-iceberg::after {
  left: 2%;
  right: 2%;
  bottom: 11%;
  height: 3px;
  box-shadow:
    0 0 38px 16px rgba(32, 191, 255, 0.66),
    0 0 86px 28px rgba(18, 108, 255, 0.28);
}

.hand-iceberg-model {
  left: max(76px, calc(50% - 766px));
  bottom: clamp(42px, 5.2vh, 86px);
  width: min(262px, 17vw);
}

.floating-card {
  border-color: rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(229, 249, 255, 0.36)),
    rgba(255, 255, 255, 0.18);
  box-shadow:
    0 30px 78px rgba(18, 108, 255, 0.18),
    0 0 32px rgba(32, 191, 255, 0.12),
    inset 0 0 34px rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  animation: cardFloat 14s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  will-change: transform;
}

.card-ai { left: max(18px, calc(50% - 880px)); top: 23vh; }
.card-auto { left: max(18px, calc(50% - 910px)); top: 45vh; }
.card-crm { right: max(18px, calc(50% - 905px)); top: 23vh; }
.card-site { right: max(38px, calc(50% - 850px)); top: 44vh; }
.card-content { right: max(78px, calc(50% - 825px)); top: 63vh; }

@media (max-height: 760px) {
  .brand-stage {
    height: clamp(162px, 28vh, 224px);
  }

  .brand-logo {
    width: min(230px, 34vw);
  }

  .chat-widget {
    bottom: 16px;
  }

  .chat-messages {
    max-height: 156px;
    min-height: 132px;
  }
}

@media (max-width: 920px) {
  .brand-stage {
    inset: 50px 0 auto;
    height: clamp(150px, 27vh, 218px);
    padding: 0 18px;
  }

  .brand-logo {
    width: min(220px, 42vw);
  }

  .chat-widget {
    left: 22px;
    right: 22px;
    bottom: 18px;
    grid-template-rows: minmax(124px, auto) auto auto auto auto;
  }

  .chat-messages {
    max-height: clamp(154px, 25vh, 210px);
    min-height: 154px;
  }

  .hand-iceberg-canvas {
    left: 30px;
    bottom: 8vh;
    width: 134px;
    opacity: 0.76;
  }
}

@media (max-width: 720px) {
  .ai-window {
    display: grid;
    grid-template-rows: 42px clamp(110px, 17vh, 142px) minmax(0, 1fr);
  }

  .brand-stage {
    position: relative;
    inset: auto;
    height: auto;
  }

  .brand-logo {
    width: min(150px, 44vw);
  }

  .chat-widget {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 10px 10px;
    grid-template-rows: minmax(150px, 1fr) auto auto auto auto;
    overflow: hidden;
  }

  .chat-messages {
    min-height: 178px;
    max-height: none;
    align-content: start;
    padding: 8px 0;
  }

  .stage-card-layer,
  .hand-iceberg,
  .hand-iceberg-model,
  .hand-iceberg-canvas {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .future-bg {
    display: none;
  }
}

.hand-iceberg-render {
  position: absolute;
  z-index: 6;
  left: max(70px, calc(50% - 774px));
  bottom: clamp(28px, 3.8vh, 72px);
  width: min(320px, 20.6vw);
  height: auto;
  transform: translate3d(0, -7px, 0) perspective(820px) rotateY(-14deg) rotateX(4deg) rotateZ(-1.2deg) scale(0.98);
  transform-origin: 50% 76%;
  filter:
    drop-shadow(-14px 8px 0 rgba(0, 74, 160, 0.16))
    drop-shadow(-24px 18px 22px rgba(0, 67, 160, 0.24))
    drop-shadow(0 0 26px rgba(32, 191, 255, 0.98))
    drop-shadow(0 0 78px rgba(18, 108, 255, 0.56));
  animation: none;
  opacity: 0.96;
  pointer-events: none;
}

.has-iceberg-3d .hand-iceberg-canvas,
.has-iceberg-3d .hand-iceberg-model {
  display: none !important;
}

.hand-iceberg-canvas {
  display: none !important;
}

@media (max-width: 920px) {
  .d3-neural,
  .snow-field {
    display: none !important;
  }

  .hand-iceberg,
  .hand-iceberg-render {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .ai-window {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    grid-template-rows: 40px clamp(84px, 13vh, 112px) minmax(0, 1fr);
  }

  .window-top {
    min-height: 40px;
    padding: 6px 10px;
  }

  .brand-stage {
    padding: 0 8px;
  }

  .brand-logo {
    width: min(132px, 42vw);
  }

  .chat-widget {
    margin: 0 8px 8px;
    grid-template-rows: minmax(124px, 1fr) auto auto auto auto;
    gap: 6px;
  }

  .chat-messages {
    min-height: 124px;
    padding: 4px 0;
  }

  .chat-message {
    max-width: 96%;
    font-size: 13px;
    line-height: 1.28;
  }

  .quick-prompts {
    gap: 6px;
  }

  .quick-prompts button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    min-height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }

  .chat-form,
  .lead-send {
    gap: 6px;
  }

  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    min-height: 40px;
  }

  .privacy-consent {
    font-size: 10px;
    line-height: 1.25;
  }

  .chat-note {
    margin-top: 3px;
    font-size: 11px;
  }
}

@keyframes handRenderFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) perspective(760px) rotateY(-18deg) rotateX(3deg) rotateZ(-1deg) scale(1);
  }
  35% {
    transform: translate3d(0, -12px, 0) perspective(760px) rotateY(20deg) rotateX(-2deg) rotateZ(1deg) scale(1.03);
  }
  70% {
    transform: translate3d(0, -5px, 0) perspective(760px) rotateY(-26deg) rotateX(2deg) rotateZ(-0.6deg) scale(1.01);
  }
}

/* Hard mobile layout: no decorative overflow, no empty hero gap. */
@media (max-width: 720px) {
  html,
  body {
    min-height: 100%;
    overflow: hidden;
  }

  .ai-window {
    display: flex !important;
    flex-direction: column;
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .window-top {
    flex: 0 0 46px;
    min-height: 46px;
    padding: 6px 12px !important;
  }

  .telegram-link {
    width: 38px;
    height: 38px;
  }

  .brand-stage {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 118px;
    height: 118px !important;
    min-height: 118px !important;
    padding: 0 12px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
  }

  .brand-logo {
    width: min(150px, 42vw) !important;
    max-height: 112px !important;
  }

  .chat-widget {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    margin: 0 10px 10px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(96px, 1fr) auto auto auto auto !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  .chat-messages {
    min-height: 0 !important;
    max-height: none !important;
    align-content: start !important;
    padding: 4px 0 !important;
    overflow: auto !important;
    mask-image: none !important;
  }

  .chat-message {
    max-width: 100% !important;
    padding: 9px 10px !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  .quick-prompts {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px !important;
    margin: 0 !important;
  }

  .quick-prompts button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .chat-form,
  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  .privacy-consent {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .chat-note {
    margin: 0 !important;
    font-size: 11px !important;
  }

  .stage-card-layer,
  .floating-card,
  .hand-iceberg,
  .hand-iceberg-render {
    display: none !important;
  }
}

@media (max-width: 390px), (max-height: 700px) {
  .brand-stage {
    flex-basis: 88px !important;
    height: 88px !important;
    min-height: 88px !important;
  }

  .brand-logo {
    width: min(120px, 38vw) !important;
    max-height: 82px !important;
  }

  .chat-widget {
    grid-template-rows: minmax(74px, 1fr) auto auto auto auto !important;
    gap: 5px !important;
    margin: 0 8px 8px !important;
  }

  .quick-prompts button {
    min-height: 30px !important;
  }

  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    min-height: 38px !important;
  }
}

/* Mobile-only premium ice HUD theme. Desktop styles above remain untouched. */
@media (max-width: 720px) {
  html,
  body {
    overflow: auto !important;
    background:
      linear-gradient(180deg, rgba(2, 10, 22, 0.48), rgba(3, 17, 35, 0.34) 42%, rgba(1, 8, 18, 0.86)),
      url("assets/ai-sberg-bg-empty-hand.webp") center top / cover no-repeat,
      #031327 !important;
  }

  body::before {
    opacity: 0.52;
    background:
      linear-gradient(rgba(93, 208, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(93, 208, 255, 0.06) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(#000, transparent 92%);
  }

  .future-bg {
    display: block !important;
    background:
      radial-gradient(circle at 50% 15%, rgba(92, 214, 255, 0.26), transparent 24%),
      linear-gradient(180deg, rgba(1, 15, 34, 0.2), rgba(1, 8, 18, 0.78));
  }

  .future-bg::before,
  .future-bg::after,
  .d3-neural,
  .snow-field {
    display: none !important;
  }

  .ai-window {
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    max-height: none !important;
    padding: 18px 14px 16px !important;
    border: 0 !important;
    background:
      linear-gradient(180deg, rgba(8, 35, 67, 0.14), rgba(4, 18, 38, 0.64)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .ai-window::before {
    display: none !important;
  }

  .window-top {
    position: relative;
    flex: 0 0 54px;
    display: grid !important;
    grid-template-columns: 10px 1fr 52px !important;
    gap: 10px;
    align-items: center;
    padding: 0 !important;
  }

  .status-dot {
    width: 9px;
    height: 9px;
  }

  .status-text {
    color: rgba(187, 240, 255, 0.95);
    font-size: 11px;
    text-transform: uppercase;
  }

  .telegram-link {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    border-color: rgba(152, 231, 255, 0.58) !important;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9), rgba(91, 202, 255, 0.22) 55%, rgba(8, 44, 86, 0.18)) !important;
    box-shadow:
      0 0 0 1px rgba(80, 204, 255, 0.22),
      0 0 24px rgba(58, 206, 255, 0.48),
      inset 0 0 18px rgba(255,255,255,0.32);
  }

  .brand-stage {
    flex: 0 0 190px !important;
    height: 190px !important;
    min-height: 190px !important;
    margin-top: 2px;
    padding: 0 !important;
    place-items: center !important;
  }

  .brand-logo {
    width: min(270px, 68vw) !important;
    max-height: 184px !important;
    opacity: 1 !important;
    filter:
      drop-shadow(0 0 18px rgba(80, 213, 255, 0.68))
      drop-shadow(0 10px 30px rgba(0, 35, 80, 0.42)) !important;
  }

  .chat-widget {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .chat-messages {
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
    border: 1px solid rgba(146, 229, 255, 0.7) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(135deg, rgba(90, 190, 255, 0.22), rgba(5, 37, 74, 0.48)) !important;
    color: rgba(240, 250, 255, 0.96) !important;
    font-size: clamp(18px, 5.2vw, 22px) !important;
    line-height: 1.28 !important;
    text-align: center;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.2),
      0 0 28px rgba(57, 204, 255, 0.36),
      inset 0 0 28px rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  }

  .chat-message.user {
    text-align: left;
    background: linear-gradient(135deg, rgba(18,108,255,0.92), rgba(32,191,255,0.82)) !important;
  }

  .quick-prompts {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px !important;
    margin: 0 !important;
  }

  .quick-prompts button {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto !important;
    min-width: 72px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(143, 229, 255, 0.68) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(135deg, rgba(59, 158, 226, 0.3), rgba(6, 44, 84, 0.7)) !important;
    color: #f4fbff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-align: center;
    box-shadow:
      0 8px 20px rgba(0, 30, 72, 0.22),
      0 0 14px rgba(74, 205, 255, 0.18),
      inset 0 0 18px rgba(255,255,255,0.08);
  }

  .quick-prompts button::before {
    content: none;
  }

  .quick-prompts button::after {
    content: none;
  }

  .chat-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .chat-form input,
  .lead-send input {
    min-height: 58px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(145, 226, 255, 0.55) !important;
    border-radius: 16px !important;
    background: rgba(7, 37, 70, 0.52) !important;
    color: #f6fbff !important;
    font-size: 18px !important;
    box-shadow:
      inset 0 0 22px rgba(255,255,255,0.08),
      0 0 22px rgba(54, 200, 255, 0.18);
  }

  .chat-form input::placeholder,
  .lead-send input::placeholder {
    color: rgba(224, 244, 255, 0.58) !important;
  }

  .chat-form button,
  .lead-send button {
    min-height: 68px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(154, 234, 255, 0.76) !important;
    font-size: 0 !important;
    box-shadow:
      0 0 28px rgba(42, 192, 255, 0.45),
      inset 0 0 28px rgba(255,255,255,0.16) !important;
  }

  .chat-form button {
    background: linear-gradient(135deg, #126cff, #14c8ff) !important;
  }

  .chat-form button::before {
    content: "СПРОСИТЬ AI-SBERG";
    font-size: clamp(20px, 5.4vw, 24px);
    font-weight: 950;
    letter-spacing: 0;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: "›";
    position: absolute;
    right: 22px;
    font-size: 38px;
    font-weight: 500;
  }

  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .lead-send button {
    background: linear-gradient(135deg, rgba(2, 11, 22, 0.96), rgba(7, 38, 70, 0.96)) !important;
  }

  .lead-send button::before {
    content: "ОСТАВИТЬ ЗАЯВКУ";
    font-size: clamp(20px, 5.4vw, 24px);
    font-weight: 950;
    letter-spacing: 0;
  }

  .privacy-consent {
    align-items: flex-start;
    gap: 10px;
    color: rgba(230, 246, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
  }

  .privacy-consent input {
    width: 24px !important;
    height: 24px !important;
    margin-top: 1px;
    border-color: rgba(190, 244, 255, 0.7);
  }

  .privacy-consent a {
    color: #7bddff !important;
  }

  .chat-note {
    color: rgba(191, 226, 245, 0.8) !important;
    font-size: 13px !important;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  .ai-window {
    padding: 12px 10px 12px !important;
  }

  .brand-stage {
    flex-basis: 136px !important;
    height: 136px !important;
    min-height: 136px !important;
  }

  .brand-logo {
    width: min(210px, 58vw) !important;
  }

  .chat-message {
    padding: 13px 12px !important;
    font-size: 16px !important;
  }

  .quick-prompts button {
    min-height: 30px !important;
    min-width: 66px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .quick-prompts button::before {
    content: none;
  }

  .chat-form input,
  .lead-send input {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .chat-form button,
  .lead-send button {
    min-height: 56px !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    font-size: 18px;
  }
}
/* Mobile compact choices: keep the conversation visible on real phones. */
@media (max-width: 720px) {
  .brand-stage {
    flex: 0 0 118px !important;
    min-height: 118px !important;
    height: 118px !important;
  }

  .brand-logo {
    width: min(170px, 48vw) !important;
    max-height: 112px !important;
  }

  .chat-widget {
    grid-template-rows: minmax(150px, 1fr) auto auto auto auto !important;
    gap: 7px !important;
  }

  .quick-prompts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .quick-prompts button {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .quick-prompts button::before,
  .quick-prompts button::after {
    content: none !important;
    display: none !important;
  }

  .chat-message {
    max-width: 100% !important;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  .brand-stage {
    flex-basis: 92px !important;
    min-height: 92px !important;
    height: 92px !important;
  }

  .brand-logo {
    width: min(136px, 42vw) !important;
    max-height: 88px !important;
  }

  .chat-widget {
    grid-template-rows: minmax(128px, 1fr) auto auto auto auto !important;
    gap: 5px !important;
  }

  .quick-prompts button {
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .chat-message {
    padding: 12px !important;
    font-size: 15px !important;
  }
}

/* Mobile final polish: readable brand and denser premium HUD without touching desktop. */
@media (max-width: 720px) {
  html,
  body {
    background:
      radial-gradient(circle at 50% 7%, rgba(86, 211, 255, 0.28), transparent 22%),
      radial-gradient(circle at 50% 38%, rgba(28, 140, 255, 0.24), transparent 25%),
      linear-gradient(180deg, rgba(7, 30, 54, 0.56), rgba(4, 17, 35, 0.74) 58%, rgba(1, 8, 18, 0.96)),
      url("assets/ai-sberg-bg-empty-hand.webp") center top / cover no-repeat,
      #04182d !important;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.54;
    background:
      linear-gradient(115deg, transparent 0 16%, rgba(96, 217, 255, 0.22) 16.2%, transparent 16.5% 100%),
      linear-gradient(245deg, transparent 0 62%, rgba(96, 217, 255, 0.16) 62.2%, transparent 62.5% 100%),
      repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 7px);
    mix-blend-mode: screen;
  }

  .ai-window {
    padding-top: 14px !important;
  }

  .brand-stage {
    position: relative !important;
    flex: 0 0 154px !important;
    min-height: 154px !important;
    height: 154px !important;
    margin-top: -2px !important;
    isolation: isolate;
  }

  .brand-stage::before {
    content: "";
    display: block !important;
    position: absolute;
    width: min(210px, 58vw);
    aspect-ratio: 1;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(113, 227, 255, 0.42), rgba(32, 139, 255, 0.16) 42%, transparent 68%);
    filter: blur(2px);
    z-index: -1;
  }

  .brand-stage::after {
    content: none !important;
    display: none !important;
  }

  .brand-logo {
    width: min(230px, 62vw) !important;
    max-height: 138px !important;
    transform: translateY(-6px);
    filter:
      drop-shadow(0 0 18px rgba(104, 226, 255, 0.84))
      drop-shadow(0 14px 36px rgba(0, 26, 68, 0.62)) !important;
  }

  .chat-message {
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(109, 199, 255, 0.2), rgba(4, 23, 48, 0.7)) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.22),
      0 0 30px rgba(68, 204, 255, 0.38),
      inset 0 1px 18px rgba(255,255,255,0.1) !important;
  }

  .quick-prompts button,
  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    box-shadow:
      0 10px 28px rgba(0, 22, 52, 0.24),
      0 0 18px rgba(58, 200, 255, 0.22),
      inset 0 0 18px rgba(255,255,255,0.1) !important;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  .brand-stage {
    flex-basis: 132px !important;
    min-height: 132px !important;
    height: 132px !important;
  }

  .brand-logo {
    width: min(205px, 58vw) !important;
    max-height: 116px !important;
  }

  .brand-stage::after {
    bottom: 4px;
    font-size: 10px;
  }
}

/* Mobile viewport lock: no clipped text, no sideways overflow. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .ai-window {
    width: calc(100% - 24px) !important;
    max-width: 390px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
  }

  .window-top,
  .brand-stage,
  .chat-widget,
  .chat-messages,
  .quick-prompts,
  .chat-form,
  .lead-send,
  .privacy-consent,
  .chat-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .chat-widget {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 0 14px 14px !important;
    grid-template-rows: minmax(86px, auto) auto auto auto auto !important;
    overflow: visible !important;
  }

  .chat-messages {
    overflow-x: hidden !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .chat-form,
  .lead-send {
    grid-template-columns: 1fr !important;
  }

  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    width: 100% !important;
    max-width: 100% !important;
  }

  .brand-stage {
    flex-basis: 168px !important;
    min-height: 168px !important;
    height: 168px !important;
  }

  .brand-logo {
    width: min(250px, 68vw) !important;
    max-height: 146px !important;
  }

  .brand-stage::after {
    content: none !important;
    display: none !important;
  }

  .mobile-brand-caption {
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: max-content;
    max-width: 92vw;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(2, 18, 38, 0.42);
    color: rgba(247, 252, 255, 0.96);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 8px rgba(0, 22, 48, 0.85), 0 0 14px rgba(83, 215, 255, 0.44);
    box-shadow: 0 0 18px rgba(68, 205, 255, 0.2);
    letter-spacing: 0;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  .chat-widget {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 10px 10px !important;
  }

  .brand-stage {
    flex-basis: 146px !important;
    min-height: 146px !important;
    height: 146px !important;
  }

  .brand-logo {
    width: min(222px, 64vw) !important;
    max-height: 128px !important;
  }

  .mobile-brand-caption {
    bottom: 6px;
    font-size: 10px;
  }
}

/* Mobile redesign v2: dark premium command screen, no text glued to the logo. */
@media (max-width: 720px) {
  :root {
    --mobile-glow: #42d7ff;
    --mobile-blue: #1387ff;
    --mobile-deep: #031021;
  }

  html,
  body {
    width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 50% 6%, rgba(112, 224, 255, 0.34), transparent 18%),
      radial-gradient(circle at 50% 37%, rgba(19, 135, 255, 0.2), transparent 24%),
      linear-gradient(180deg, rgba(7, 33, 62, 0.7), rgba(2, 13, 29, 0.92) 62%, #020a16),
      url("assets/ai-sberg-bg-empty-hand.webp") center top / cover no-repeat,
      var(--mobile-deep) !important;
  }

  body {
    margin: 0 !important;
  }

  body::before {
    display: block !important;
    opacity: 0.62 !important;
    background:
      linear-gradient(rgba(126, 226, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(126, 226, 255, 0.055) 1px, transparent 1px),
      radial-gradient(circle at 50% 8%, rgba(95, 220, 255, 0.22), transparent 30%) !important;
    background-size: 22px 22px, 22px 22px, 100% 100% !important;
    mask-image: linear-gradient(#000, rgba(0,0,0,0.72) 64%, transparent 100%) !important;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background:
      linear-gradient(118deg, transparent 0 20%, rgba(118, 229, 255, 0.2) 20.2%, transparent 20.5% 100%),
      linear-gradient(238deg, transparent 0 70%, rgba(118, 229, 255, 0.14) 70.2%, transparent 70.5% 100%),
      repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 6px);
    mix-blend-mode: screen;
  }

  .future-bg::before,
  .future-bg::after,
  .d3-neural,
  .snow-field,
  .stage-card-layer,
  .hand-iceberg,
  .hand-iceberg-render {
    display: none !important;
  }

  .ai-window {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 14px 14px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(64, 200, 255, 0.14), transparent 30%),
      linear-gradient(180deg, rgba(6, 29, 56, 0.18), rgba(1, 9, 21, 0.44)) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .ai-window::before {
    content: "";
    position: absolute;
    inset: 10px 12px 12px;
    border: 1px solid rgba(113, 224, 255, 0.32);
    border-radius: 24px;
    pointer-events: none;
    box-shadow:
      0 0 30px rgba(49, 194, 255, 0.16),
      inset 0 0 34px rgba(95, 220, 255, 0.06);
  }

  .ai-window::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 204px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(118, 229, 255, 0.72), transparent);
    box-shadow: 0 0 18px rgba(66, 215, 255, 0.72);
    pointer-events: none;
  }

  .window-top {
    position: relative;
    z-index: 3;
    flex: 0 0 48px !important;
    min-height: 48px !important;
    display: grid !important;
    grid-template-columns: 10px 1fr 54px !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 4px !important;
  }

  .status-dot {
    width: 9px !important;
    height: 9px !important;
  }

  .status-text {
    color: rgba(145, 232, 255, 0.95) !important;
    font-size: 11px !important;
    text-transform: uppercase;
  }

  .telegram-link {
    justify-self: end;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(142, 233, 255, 0.62) !important;
    background:
      radial-gradient(circle, rgba(255,255,255,0.96), rgba(91, 203, 255, 0.28) 58%, rgba(6, 40, 78, 0.3)) !important;
    box-shadow:
      0 0 28px rgba(70, 213, 255, 0.48),
      inset 0 0 20px rgba(255,255,255,0.3) !important;
  }

  .brand-stage {
    position: relative !important;
    z-index: 2;
    inset: auto !important;
    flex: 0 0 168px !important;
    width: 100% !important;
    min-height: 168px !important;
    height: 168px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: -2px 0 6px !important;
    overflow: visible !important;
  }

  .brand-stage::before {
    content: "";
    display: block !important;
    position: absolute;
    width: min(240px, 66vw);
    aspect-ratio: 1;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
      radial-gradient(circle, rgba(99, 220, 255, 0.34), rgba(23, 126, 255, 0.12) 48%, transparent 70%);
    filter: blur(1px);
    z-index: -1;
  }

  .brand-stage::after {
    content: "";
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(270px, 74vw);
    height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, rgba(127, 233, 255, 0.74), transparent);
    box-shadow: 0 0 20px rgba(76, 216, 255, 0.62);
    z-index: 0;
  }

  .brand-logo {
    position: relative !important;
    z-index: 1;
    width: min(258px, 68vw) !important;
    max-height: 152px !important;
    transform: translateY(-2px);
    opacity: 1 !important;
    filter:
      drop-shadow(0 0 20px rgba(92, 222, 255, 0.86))
      drop-shadow(0 16px 38px rgba(0, 18, 54, 0.68)) !important;
  }

  .mobile-brand-caption {
    display: none !important;
  }

  .chat-widget {
    position: relative !important;
    z-index: 3;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .chat-messages {
    width: 100% !important;
    min-height: auto !important;
    max-height: 178px !important;
    overflow: auto !important;
    padding: 0 !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    padding: 17px 14px !important;
    border: 1px solid rgba(132, 229, 255, 0.76) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(92, 187, 255, 0.2), rgba(3, 22, 47, 0.72)) !important;
    color: rgba(245, 252, 255, 0.98) !important;
    font-size: clamp(18px, 5.15vw, 21px) !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.16),
      0 0 28px rgba(57, 204, 255, 0.38),
      inset 0 0 26px rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(10px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  }

  .chat-message.user {
    text-align: left !important;
    background: linear-gradient(135deg, rgba(18,108,255,0.95), rgba(32,191,255,0.86)) !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
  }

  .quick-prompts button {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(128, 226, 255, 0.64) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(145deg, rgba(70, 173, 236, 0.32), rgba(4, 38, 76, 0.76)) !important;
    color: #f4fbff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    box-shadow:
      0 8px 18px rgba(0, 22, 54, 0.22),
      inset 0 0 16px rgba(255,255,255,0.08) !important;
  }

  .quick-prompts button::before,
  .quick-prompts button::after {
    content: none !important;
    display: none !important;
  }

  .chat-form,
  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .chat-form input,
  .lead-send input {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(130, 225, 255, 0.58) !important;
    border-radius: 18px !important;
    background: rgba(3, 24, 51, 0.72) !important;
    color: #f6fbff !important;
    font-size: 18px !important;
    box-shadow:
      inset 0 0 24px rgba(255,255,255,0.08),
      0 0 22px rgba(54, 200, 255, 0.18) !important;
  }

  .chat-form input::placeholder,
  .lead-send input::placeholder {
    color: rgba(229, 244, 255, 0.62) !important;
  }

  .chat-form button,
  .lead-send button {
    position: relative;
    width: 100% !important;
    min-height: 66px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(154, 234, 255, 0.82) !important;
    font-size: 0 !important;
    box-shadow:
      0 0 30px rgba(42, 192, 255, 0.48),
      inset 0 0 30px rgba(255,255,255,0.16) !important;
  }

  .chat-form button {
    background: linear-gradient(135deg, #126cff, #15c8ff) !important;
  }

  .chat-form button::before {
    content: "СПРОСИТЬ AI-SBERG";
    font-size: clamp(20px, 5.4vw, 24px);
    font-weight: 950;
  }

  .lead-send button {
    background: linear-gradient(135deg, rgba(2, 10, 22, 0.98), rgba(6, 36, 68, 0.98)) !important;
  }

  .lead-send button::before {
    content: "ОСТАВИТЬ ЗАЯВКУ";
    font-size: clamp(20px, 5.4vw, 24px);
    font-weight: 950;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: "›";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 42px;
    font-weight: 500;
  }

  .privacy-consent {
    width: 100% !important;
    margin: 2px 0 0 !important;
    color: rgba(231, 247, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
  }

  .privacy-consent input {
    width: 24px !important;
    height: 24px !important;
    margin-top: 1px !important;
  }

  .privacy-consent a {
    color: #7bddff !important;
    font-weight: 900 !important;
  }

  .chat-note {
    margin: 0 !important;
    color: rgba(191, 226, 245, 0.78) !important;
    font-size: 13px !important;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  .ai-window {
    padding: 10px 12px 12px !important;
  }

  .window-top {
    flex-basis: 42px !important;
    min-height: 42px !important;
  }

  .telegram-link {
    width: 42px !important;
    height: 42px !important;
  }

  .brand-stage {
    flex-basis: 138px !important;
    min-height: 138px !important;
    height: 138px !important;
    margin-bottom: 4px !important;
  }

  .brand-logo {
    width: min(222px, 64vw) !important;
    max-height: 128px !important;
  }

  .chat-widget {
    gap: 7px !important;
  }

  .chat-message {
    padding: 14px 12px !important;
    font-size: 17px !important;
  }

  .quick-prompts button {
    min-height: 34px !important;
    font-size: 13px !important;
  }

  .chat-form input,
  .lead-send input {
    min-height: 52px !important;
    font-size: 16px !important;
  }

  .chat-form button,
  .lead-send button {
    min-height: 58px !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    font-size: 19px !important;
  }
}

/* Mobile hard width guard. */
@media (max-width: 720px) {
  .ai-window {
    left: 50% !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  .chat-widget,
  .chat-messages,
  .quick-prompts,
  .chat-form,
  .lead-send,
  .privacy-consent,
  .chat-note,
  .chat-message,
  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .chat-widget {
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
  }
}

@media (max-width: 390px) {
  .ai-window {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }
}

@media (max-width: 720px) {
  .ai-window {
    left: 0 !important;
    right: auto !important;
    width: calc(100vw - 46px) !important;
    max-width: calc(100vw - 46px) !important;
    margin-left: 23px !important;
    margin-right: 23px !important;
    transform: none !important;
  }
}

/* Mobile approved flow: hero first, real chat after first action. Desktop is untouched. */
@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 50% 9%, rgba(96, 221, 255, 0.34), transparent 21%),
      radial-gradient(circle at 54% 42%, rgba(18, 108, 255, 0.22), transparent 33%),
      linear-gradient(180deg, rgba(4, 26, 52, 0.38), rgba(2, 12, 26, 0.86) 76%),
      url("assets/ai-sberg-bg-empty-hand.webp") center top / cover no-repeat,
      #04101f !important;
  }

  body::before {
    display: block !important;
    opacity: 0.68 !important;
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 7px),
      linear-gradient(115deg, transparent 0 18%, rgba(100, 221, 255, 0.22) 18.2%, transparent 18.55%),
      linear-gradient(244deg, transparent 0 68%, rgba(100, 221, 255, 0.14) 68.2%, transparent 68.55%) !important;
    mix-blend-mode: screen;
  }

  .future-bg::before,
  .future-bg::after,
  .d3-neural,
  .snow-field,
  .stage-card-layer,
  .hand-iceberg,
  .hand-iceberg-render {
    display: none !important;
  }

  .ai-window {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 16px 24px 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: padding 360ms ease;
  }

  .ai-window::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(100, 221, 255, 0.34);
    border-radius: 0;
    pointer-events: none;
    box-shadow:
      inset 0 0 34px rgba(255,255,255,0.07),
      0 0 34px rgba(48, 202, 255, 0.18);
  }

  .ai-window::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 318px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(135, 234, 255, 0.9), transparent);
    box-shadow: 0 0 18px rgba(100, 221, 255, 0.8);
    pointer-events: none;
    transition: opacity 280ms ease;
  }

  .window-top {
    position: absolute !important;
    z-index: 5;
    left: 30px;
    top: 18px;
    right: 30px;
    display: grid !important;
    grid-template-columns: 10px 1fr 52px !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 52px !important;
    padding: 0 !important;
  }

  .status-text {
    color: rgba(229, 248, 255, 0.94) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(100, 221, 255, 0.45);
  }

  .telegram-link {
    justify-self: end;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid rgba(158, 235, 255, 0.82) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle, rgba(255,255,255,0.96), rgba(83, 201, 255, 0.3) 58%, rgba(7, 44, 88, 0.38)) !important;
    color: #168bdc !important;
    box-shadow:
      0 0 30px rgba(90, 218, 255, 0.62),
      inset 0 0 22px rgba(255,255,255,0.3) !important;
  }

  .brand-stage {
    position: relative !important;
    z-index: 2;
    inset: auto !important;
    flex: 0 0 290px !important;
    min-height: 290px !important;
    height: 290px !important;
    display: grid !important;
    place-items: center !important;
    padding: 24px 0 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transition: flex-basis 360ms ease, min-height 360ms ease, height 360ms ease, padding 360ms ease;
  }

  .brand-stage::before {
    content: "";
    display: block !important;
    position: absolute;
    left: 50%;
    top: 45%;
    width: 292px;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(89, 216, 255, 0.26), transparent 68%);
    filter: blur(1px);
  }

  .brand-stage::after {
    content: "";
    display: block !important;
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(135, 234, 255, 0.78), transparent);
    box-shadow: 0 0 18px rgba(100, 221, 255, 0.72);
  }

  .brand-logo {
    position: relative !important;
    z-index: 1;
    width: min(270px, 72vw) !important;
    max-height: 238px !important;
    object-fit: contain !important;
    filter:
      drop-shadow(0 0 24px rgba(100, 221, 255, 0.74))
      drop-shadow(0 20px 46px rgba(0, 22, 58, 0.64)) !important;
    transition: width 360ms ease, max-height 360ms ease, transform 360ms ease;
  }

  .chat-widget {
    position: relative !important;
    z-index: 3;
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transition: gap 300ms ease;
  }

  .chat-messages {
    display: grid !important;
    align-content: start !important;
    gap: 10px !important;
    min-height: auto !important;
    max-height: 230px !important;
    overflow: auto !important;
    padding: 0 !important;
    mask-image: none !important;
    scroll-behavior: smooth;
    transition: max-height 360ms ease;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 16px !important;
    border: 1px solid rgba(135, 232, 255, 0.78) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(120, 201, 255, 0.22), rgba(6, 36, 72, 0.72)) !important;
    color: #f3fbff !important;
    font-size: clamp(19px, 5.2vw, 24px) !important;
    font-weight: 650 !important;
    line-height: 1.28 !important;
    text-align: center !important;
    text-shadow: 0 2px 18px rgba(0, 16, 38, 0.52);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.18),
      0 0 34px rgba(100, 221, 255, 0.34),
      inset 0 0 36px rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(13px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(13px) saturate(1.2) !important;
  }

  .chat-message.user {
    text-align: left !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, rgba(18,108,255,0.94), rgba(32,191,255,0.86)) !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    max-height: 118px;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 320ms ease, opacity 240ms ease, transform 320ms ease, margin 320ms ease;
  }

  .quick-prompts button {
    min-height: 46px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(134, 231, 255, 0.72) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(145deg, rgba(103, 198, 255, 0.28), rgba(5, 40, 79, 0.75)) !important;
    color: #f6fbff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    box-shadow:
      0 8px 22px rgba(0, 20, 48, 0.22),
      inset 0 0 20px rgba(255,255,255,0.08) !important;
  }

  .quick-prompts button::before,
  .quick-prompts button::after {
    content: none !important;
    display: none !important;
  }

  .chat-form,
  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .chat-form input,
  .lead-send input {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(134, 231, 255, 0.68) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(82, 175, 236, 0.26), rgba(3, 26, 56, 0.75)) !important;
    color: #fff !important;
    font-size: 17px !important;
    box-shadow:
      0 0 24px rgba(100, 221, 255, 0.2),
      inset 0 0 22px rgba(255,255,255,0.08) !important;
  }

  .chat-form input::placeholder,
  .lead-send input::placeholder {
    color: rgba(229, 244, 255, 0.56) !important;
  }

  .chat-form button,
  .lead-send button {
    position: relative !important;
    min-height: 68px !important;
    border: 1px solid rgba(157, 236, 255, 0.9) !important;
    border-radius: 22px !important;
    color: #fff !important;
    font-size: 0 !important;
    text-align: center !important;
  }

  .chat-form button {
    background:
      radial-gradient(circle at 22% 50%, rgba(255,255,255,0.16), transparent 20%),
      linear-gradient(135deg, #126cff, #13ccff) !important;
    box-shadow:
      0 0 34px rgba(42, 194, 255, 0.58),
      inset 0 0 30px rgba(255,255,255,0.16) !important;
  }

  .lead-send button {
    background:
      linear-gradient(135deg, rgba(1, 8, 18, 0.98), rgba(6, 38, 73, 0.98)) !important;
    box-shadow:
      0 0 26px rgba(42, 194, 255, 0.24),
      inset 0 0 26px rgba(255,255,255,0.08) !important;
  }

  .chat-form button::before {
    content: "СПРОСИТЬ AI-SBERG";
    font-size: clamp(19px, 5vw, 22px);
    font-weight: 950;
    text-transform: uppercase;
  }

  .lead-send button::before {
    content: "ОСТАВИТЬ ЗАЯВКУ";
    font-size: clamp(19px, 5vw, 22px);
    font-weight: 950;
    text-transform: uppercase;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-54%);
    font-size: 42px;
    font-weight: 400;
  }

  .privacy-consent {
    display: grid !important;
    grid-template-columns: 24px 1fr;
    gap: 10px !important;
    margin: 4px 0 0 !important;
    color: rgba(238, 249, 255, 0.88) !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  .privacy-consent input {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
  }

  .privacy-consent a {
    color: #7ddeff !important;
    font-weight: 900 !important;
  }

  .chat-note {
    margin: 2px 0 0 !important;
    color: rgba(185, 222, 245, 0.76) !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  body.conversation-started .ai-window {
    height: 100svh !important;
    min-height: 100svh !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body.conversation-started .ai-window::after {
    opacity: 0;
  }

  body.conversation-started .brand-stage {
    flex-basis: 78px !important;
    min-height: 78px !important;
    height: 78px !important;
    padding-top: 0 !important;
  }

  body.conversation-started .brand-stage::before,
  body.conversation-started .brand-stage::after {
    opacity: 0;
  }

  body.conversation-started .brand-logo {
    width: 118px !important;
    max-height: 72px !important;
    transform: translateY(4px);
  }

  body.conversation-started .chat-widget {
    grid-template-rows: minmax(0, 1fr) 0 auto auto auto !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.conversation-started .chat-messages {
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    padding-right: 2px !important;
    align-content: end !important;
  }

  body.conversation-started .chat-message {
    padding: 11px 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.34 !important;
    text-align: left !important;
    text-shadow: none !important;
  }

  body.conversation-started .quick-prompts {
    max-height: 0 !important;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }

  body.conversation-started .chat-form input,
  body.conversation-started .lead-send input {
    min-height: 46px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }

  body.conversation-started .chat-form button,
  body.conversation-started .lead-send button {
    min-height: 50px !important;
    border-radius: 15px !important;
  }

  body.conversation-started .chat-form button::before,
  body.conversation-started .lead-send button::before {
    font-size: 16px !important;
  }

  body.conversation-started .privacy-consent {
    font-size: 11px !important;
  }
}

@media (max-width: 390px) {
  .ai-window {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .brand-stage {
    flex-basis: 248px !important;
    min-height: 248px !important;
    height: 248px !important;
  }

  .brand-logo {
    width: min(238px, 70vw) !important;
  }

  .chat-message {
    font-size: 20px !important;
  }

  .quick-prompts button {
    min-height: 42px !important;
    font-size: 14px !important;
  }

  body.conversation-started .brand-stage {
    flex-basis: 70px !important;
    min-height: 70px !important;
    height: 70px !important;
  }
}

/* Final mobile viewport lock: the screen must never slide sideways. */
@media (max-width: 720px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .ai-window {
    left: 0 !important;
    right: auto !important;
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    min-width: 0 !important;
    margin: 0 24px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .window-top {
    left: 24px !important;
    right: 24px !important;
    width: auto !important;
    max-width: none !important;
  }

  .brand-stage,
  .chat-widget,
  .chat-messages,
  .quick-prompts,
  .chat-form,
  .lead-send,
  .privacy-consent,
  .chat-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(16px, 4.35vw, 19px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .telegram-link {
    width: 46px !important;
    height: 46px !important;
  }
}

/* Approved mobile layout lock: no horizontal drift, choices collapse into chat. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
    margin: 0 !important;
  }

  .ai-window {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .window-top {
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    max-width: none !important;
  }

  .brand-stage,
  .chat-widget,
  .chat-messages,
  .quick-prompts,
  .chat-form,
  .lead-send,
  .privacy-consent,
  .chat-note {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .chat-widget {
    overflow: hidden !important;
  }

  .chat-message,
  .quick-prompts button,
  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .chat-message {
    padding: 14px 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .chat-form button::before {
    content: "СПРОСИТЬ AI-SBERG" !important;
  }

  .lead-send button::before {
    content: "ОСТАВИТЬ ЗАЯВКУ" !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: "›" !important;
  }

  body.conversation-started .brand-stage {
    flex-basis: 68px !important;
    min-height: 68px !important;
    height: 68px !important;
  }

  body.conversation-started .brand-logo {
    width: 108px !important;
    max-height: 64px !important;
  }

  body.conversation-started .chat-widget {
    grid-template-rows: minmax(0, 1fr) 0 auto auto auto !important;
  }

  body.conversation-started .chat-messages {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body.conversation-started .quick-prompts {
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Mobile production pass: reference-like start screen, then compact messenger mode. */
@media (max-width: 720px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .ai-window {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px 18px 16px !important;
    overflow-x: hidden !important;
  }

  .window-top,
  .brand-stage,
  .chat-widget,
  .chat-messages,
  .quick-prompts,
  .chat-form,
  .lead-send,
  .privacy-consent,
  .chat-note {
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .window-top {
    position: relative !important;
  }

  .chat-widget {
    position: relative !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .chat-messages {
    display: grid !important;
    gap: 8px !important;
    max-height: 170px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 17px 14px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .quick-prompts button {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .chat-form,
  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .chat-form input,
  .lead-send input,
  .chat-form button,
  .lead-send button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .chat-form button::before {
    content: "СПРОСИТЬ AI-SBERG" !important;
  }

  .lead-send button::before {
    content: "ОСТАВИТЬ ЗАЯВКУ" !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: "›" !important;
  }

  body.conversation-started .ai-window {
    min-height: 100svh !important;
    height: 100svh !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.conversation-started .brand-stage {
    flex: 0 0 64px !important;
    min-height: 64px !important;
    height: 64px !important;
  }

  body.conversation-started .brand-stage::before,
  body.conversation-started .ai-window::after {
    opacity: 0 !important;
  }

  body.conversation-started .brand-logo {
    width: 104px !important;
    max-height: 58px !important;
    transform: none !important;
  }

  body.conversation-started .chat-widget {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) auto auto auto !important;
    overflow: hidden !important;
  }

  body.conversation-started .chat-messages {
    min-height: 0 !important;
    max-height: none !important;
    align-content: end !important;
  }

  body.conversation-started .quick-prompts {
    display: none !important;
  }
}

/* Mobile final reference skin: dark iceberg command HUD. Desktop remains untouched. */
@media (max-width: 720px) {
  :root {
    --m-cyan: #63ddff;
    --m-blue: #087bff;
    --m-deep: #020b18;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #020b18 !important;
  }

  body {
    display: block !important;
    color: #f4fbff !important;
    background:
      radial-gradient(circle at 50% 8%, rgba(95, 221, 255, 0.26), transparent 18%),
      radial-gradient(circle at 50% 36%, rgba(0, 118, 255, 0.2), transparent 30%),
      linear-gradient(180deg, rgba(0, 7, 18, 0.82), rgba(0, 12, 30, 0.82) 48%, rgba(1, 9, 22, 0.95) 74%, #020812),
      url("assets/ai-sberg-hero-hq.jpg") center top / cover no-repeat,
      #020b18 !important;
    background-blend-mode: screen, screen, normal, multiply, normal !important;
  }

  body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    opacity: 0.62 !important;
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 7px),
      linear-gradient(115deg, transparent 0 18%, rgba(99, 221, 255, 0.2) 18.15%, transparent 18.45%),
      linear-gradient(244deg, transparent 0 68%, rgba(99, 221, 255, 0.13) 68.15%, transparent 68.45%) !important;
    mix-blend-mode: screen !important;
    z-index: 0 !important;
  }

  body::after {
    content: "" !important;
    position: fixed !important;
    inset: 14px !important;
    pointer-events: none !important;
    border: 1px solid rgba(99, 221, 255, 0.34) !important;
    box-shadow: inset 0 0 34px rgba(99, 221, 255, 0.07) !important;
    z-index: 0 !important;
  }

  .future-bg,
  .future-bg::before,
  .future-bg::after,
  .d3-neural,
  .snow-field,
  .stage-card-layer,
  .floating-card,
  .hand-iceberg,
  .hand-iceberg-render {
    display: none !important;
  }

  .ai-window {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 22px 30px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .brand-stage,
  .chat-widget,
  .chat-messages,
  .quick-prompts,
  .chat-form,
  .lead-send,
  .privacy-consent,
  .chat-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .ai-window::before {
    content: "" !important;
    position: absolute !important;
    inset: 14px !important;
    display: block !important;
    pointer-events: none !important;
    border: 1px solid rgba(99, 221, 255, 0.33) !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(99,221,255,0.85) 0 48px, transparent 48px calc(100% - 48px), rgba(99,221,255,0.85) calc(100% - 48px)),
      linear-gradient(90deg, rgba(99,221,255,0.85) 0 48px, transparent 48px calc(100% - 48px), rgba(99,221,255,0.85) calc(100% - 48px)),
      linear-gradient(180deg, rgba(99,221,255,0.85) 0 48px, transparent 48px calc(100% - 48px), rgba(99,221,255,0.85) calc(100% - 48px)),
      linear-gradient(180deg, rgba(99,221,255,0.85) 0 48px, transparent 48px calc(100% - 48px), rgba(99,221,255,0.85) calc(100% - 48px)) !important;
    background-position: left top, left bottom, left top, right top !important;
    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100% !important;
    background-repeat: no-repeat !important;
    opacity: 0.72 !important;
    z-index: -1 !important;
  }

  .ai-window::after {
    content: "" !important;
    position: absolute !important;
    left: 30px !important;
    right: 30px !important;
    top: 318px !important;
    display: block !important;
    height: 1px !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, transparent, rgba(140, 238, 255, 0.95), transparent) !important;
    box-shadow: 0 0 18px rgba(99, 221, 255, 0.82) !important;
  }

  .window-top {
    position: absolute !important;
    left: 32px !important;
    top: 270px !important;
    z-index: 7 !important;
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .status-dot,
  .status-text {
    display: none !important;
  }

  .telegram-link {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 70px !important;
    height: 70px !important;
    place-items: center !important;
    border: 1px solid rgba(158, 235, 255, 0.82) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle, rgba(255,255,255,0.96), rgba(83, 201, 255, 0.3) 58%, rgba(7, 44, 88, 0.38)) !important;
    color: #168bdc !important;
    box-shadow:
      0 0 30px rgba(90, 218, 255, 0.62),
      inset 0 0 22px rgba(255,255,255,0.3) !important;
  }

  .telegram-link svg {
    width: 34px !important;
    height: 34px !important;
  }

  .brand-stage {
    position: relative !important;
    flex: 0 0 286px !important;
    min-height: 286px !important;
    height: 286px !important;
    display: grid !important;
    place-items: start center !important;
    padding-top: 18px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .brand-stage::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 190px !important;
    width: 300px !important;
    height: 300px !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(89, 216, 255, 0.26), transparent 68%) !important;
    filter: blur(1px) !important;
    z-index: -1 !important;
  }

  .brand-stage::after {
    content: none !important;
    display: none !important;
  }

  .brand-logo {
    width: min(270px, 72vw) !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    transform: none !important;
    opacity: 1 !important;
    filter:
      drop-shadow(0 0 24px rgba(100, 221, 255, 0.74))
      drop-shadow(0 20px 46px rgba(0, 22, 58, 0.64)) !important;
  }

  .chat-widget {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .chat-messages {
    display: grid !important;
    gap: 9px !important;
    width: 100% !important;
    max-height: 210px !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    mask-image: none !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 25px 18px 23px !important;
    border: 1px solid rgba(135, 232, 255, 0.78) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(145deg, rgba(120, 201, 255, 0.22), rgba(6, 36, 72, 0.72)) !important;
    color: #f4fbff !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.18),
      0 0 34px rgba(100, 221, 255, 0.34),
      inset 0 0 36px rgba(255,255,255,0.08) !important;
    text-shadow: 0 2px 18px rgba(0, 16, 38, 0.52) !important;
    backdrop-filter: blur(13px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(13px) saturate(1.2) !important;
  }

  .chat-message.user {
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #126cff, #13ccff) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .quick-prompts button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 20px !important;
    grid-template-rows: auto auto !important;
    gap: 0 9px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(134, 231, 255, 0.72) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(145deg, rgba(103, 198, 255, 0.28), rgba(5, 40, 79, 0.75)) !important;
    color: #f6fbff !important;
    text-align: left !important;
    overflow: hidden !important;
    box-shadow:
      0 8px 22px rgba(0, 20, 48, 0.22),
      0 0 18px rgba(74, 205, 255, 0.22),
      inset 0 0 20px rgba(255,255,255,0.08) !important;
  }

  .quick-prompts button::before {
    content: none !important;
    display: none !important;
  }

  .quick-prompts button::after {
    content: "›" !important;
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    color: rgba(229, 249, 255, 0.94) !important;
    font-size: 30px !important;
    line-height: 1 !important;
    text-align: right !important;
    text-shadow: 0 0 12px rgba(99, 221, 255, 0.8) !important;
  }

  .prompt-icon {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(158, 235, 255, 0.72) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,0.08) !important;
    box-shadow: inset 0 0 16px rgba(255,255,255,0.08) !important;
  }

  .prompt-icon.web {
    background:
      linear-gradient(#9beaff 0 0) 7px 8px / 18px 12px no-repeat,
      linear-gradient(#9beaff 0 0) 13px 22px / 7px 2px no-repeat,
      rgba(255,255,255,0.08) !important;
  }

  .prompt-icon.bot {
    background:
      radial-gradient(circle at 11px 16px, #9beaff 0 2px, transparent 3px),
      radial-gradient(circle at 21px 16px, #9beaff 0 2px, transparent 3px),
      linear-gradient(#9beaff 0 0) 8px 10px / 16px 16px no-repeat,
      rgba(255,255,255,0.08) !important;
  }

  .prompt-icon.target {
    background:
      radial-gradient(circle, transparent 0 4px, #9beaff 5px 6px, transparent 7px 10px, #9beaff 11px 12px, transparent 13px),
      rgba(255,255,255,0.08) !important;
  }

  .prompt-icon.box {
    background:
      linear-gradient(35deg, transparent 42%, #9beaff 43% 48%, transparent 49%),
      linear-gradient(145deg, transparent 42%, #9beaff 43% 48%, transparent 49%),
      linear-gradient(#9beaff 0 0) 8px 9px / 16px 14px no-repeat,
      rgba(255,255,255,0.08) !important;
  }

  .quick-prompts strong {
    display: block !important;
    grid-column: 2 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  .quick-prompts small {
    display: block !important;
    grid-column: 2 !important;
    color: rgba(226, 244, 255, 0.78) !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .chat-form,
  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .chat-form input,
  .lead-send input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 0 18px 0 54px !important;
    border: 1px solid rgba(134, 231, 255, 0.68) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(82, 175, 236, 0.26), rgba(3, 26, 56, 0.75)) !important;
    color: #fff !important;
    font-size: 19px !important;
    outline: 0 !important;
    box-shadow:
      0 0 24px rgba(100, 221, 255, 0.2),
      inset 0 0 22px rgba(255,255,255,0.08) !important;
  }

  .chat-form input::placeholder,
  .lead-send input::placeholder {
    color: rgba(229, 244, 255, 0.56) !important;
  }

  .chat-form {
    position: relative !important;
  }

  .chat-form::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 17px !important;
    width: 28px !important;
    height: 28px !important;
    pointer-events: none !important;
    opacity: 0.82 !important;
    background:
      linear-gradient(#c9f4ff 0 0) 7px 8px / 14px 2px no-repeat,
      linear-gradient(#c9f4ff 0 0) 7px 18px / 12px 2px no-repeat,
      linear-gradient(135deg, transparent 0 42%, #c9f4ff 43% 50%, transparent 51%) !important;
    z-index: 1 !important;
  }

  .lead-send {
    position: relative !important;
  }

  .lead-send::before {
    content: "" !important;
    position: absolute !important;
    left: 19px !important;
    top: 178px !important;
    width: 28px !important;
    height: 28px !important;
    pointer-events: none !important;
    opacity: 0.8 !important;
    border: 2px solid #c9f4ff !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    border-radius: 8px !important;
    transform: rotate(-18deg) !important;
    z-index: 1 !important;
  }

  .chat-form button,
  .lead-send button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) 32px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 78px !important;
    padding: 10px 16px 10px 12px !important;
    border: 1px solid rgba(157, 236, 255, 0.9) !important;
    border-radius: 22px !important;
    color: #fff !important;
    text-align: left !important;
    font-size: 0 !important;
  }

  .chat-form button {
    background:
      radial-gradient(circle at 22% 50%, rgba(255,255,255,0.16), transparent 20%),
      linear-gradient(135deg, #126cff, #13ccff) !important;
    box-shadow:
      0 0 34px rgba(42, 194, 255, 0.58),
      inset 0 0 30px rgba(255,255,255,0.16) !important;
  }

  .lead-send button {
    background:
      linear-gradient(135deg, rgba(1, 8, 18, 0.98), rgba(6, 38, 73, 0.98)) !important;
    box-shadow:
      0 0 26px rgba(42, 194, 255, 0.24),
      inset 0 0 26px rgba(255,255,255,0.08) !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    display: block !important;
    grid-column: 2 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
  }

  .chat-form button::before {
    content: "СПРОСИТЬ AI-SBERG" !important;
  }

  .lead-send button::before {
    content: "ОСТАВИТЬ ЗАЯВКУ" !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: "›" !important;
    display: block !important;
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    transform: none !important;
    color: #fff !important;
    font-size: 44px !important;
    line-height: 1 !important;
    text-align: right !important;
  }

  .chat-form button span,
  .lead-send button span {
    display: none !important;
  }

  .chat-form button {
    overflow: visible !important;
  }

  .chat-form button > * {
    display: none !important;
  }

  .chat-form button::marker,
  .lead-send button::marker {
    content: "" !important;
  }

  .chat-form button {
    --cta-subtitle: "получите решение и план действий";
  }

  .lead-send button {
    --cta-subtitle: "мы свяжемся с вами";
  }

  .chat-form button {
    background:
      radial-gradient(circle at 51px 50%, rgba(255,255,255,0.18), transparent 26px),
      linear-gradient(135deg, #126cff, #13ccff) !important;
  }

  .chat-form button::before {
    text-shadow: 0 1px 14px rgba(0, 34, 82, 0.58) !important;
  }

  .lead-send button::before {
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.66) !important;
  }

  .privacy-consent {
    display: grid !important;
    grid-template-columns: 26px 1fr !important;
    gap: 11px !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    color: rgba(238, 249, 255, 0.88) !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }

  .privacy-consent input {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    border-color: rgba(198, 244, 255, 0.86) !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.04) !important;
  }

  .privacy-consent a {
    color: #7ddeff !important;
    font-weight: 900 !important;
  }

  .chat-note {
    width: 100% !important;
    margin: 4px 0 0 !important;
    color: rgba(185, 222, 245, 0.76) !important;
    font-size: 15px !important;
    text-align: center !important;
  }

  body.conversation-started .ai-window {
    height: 100svh !important;
    min-height: 100svh !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  body.conversation-started .ai-window::after {
    opacity: 0 !important;
  }

  body.conversation-started .window-top {
    width: 48px !important;
    height: 48px !important;
    left: 22px !important;
    top: 14px !important;
  }

  body.conversation-started .telegram-link {
    width: 48px !important;
    height: 48px !important;
  }

  body.conversation-started .telegram-link svg {
    width: 24px !important;
    height: 24px !important;
  }

  body.conversation-started .brand-stage {
    flex: 0 0 74px !important;
    min-height: 74px !important;
    height: 74px !important;
    padding-top: 0 !important;
  }

  body.conversation-started .brand-stage::before {
    opacity: 0 !important;
  }

  body.conversation-started .brand-logo {
    width: 116px !important;
    max-height: 70px !important;
  }

  body.conversation-started .chat-widget {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) auto auto auto !important;
    overflow: hidden !important;
  }

  body.conversation-started .chat-messages {
    min-height: 0 !important;
    max-height: none !important;
    align-content: end !important;
  }

  body.conversation-started .chat-message {
    padding: 12px 13px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  body.conversation-started .quick-prompts {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .ai-window {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .brand-stage {
    flex-basis: 252px !important;
    min-height: 252px !important;
    height: 252px !important;
  }

  .brand-logo {
    width: min(240px, 70vw) !important;
  }

  .chat-message {
    padding: 22px 16px 20px !important;
    font-size: 21px !important;
  }

  .quick-prompts button {
    min-height: 50px !important;
    padding: 7px 9px !important;
  }

  .quick-prompts strong {
    font-size: 16px !important;
  }

  .quick-prompts small {
    font-size: 10px !important;
  }

  .chat-form input,
  .lead-send input {
    min-height: 58px !important;
    font-size: 17px !important;
  }

  .chat-form button,
  .lead-send button {
    min-height: 72px !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    font-size: 20px !important;
  }
}

/* Mobile v4 rebuild: match the approved dark reference. Desktop is not affected. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #020a16 !important;
  }

  body {
    display: block !important;
    color: #f6fbff !important;
    font-family: Inter, Arial, sans-serif !important;
  }

  body::before,
  body::after {
    content: none !important;
    display: none !important;
  }

  .future-bg,
  .stage-card-layer {
    display: none !important;
  }

  .ai-window {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 22px 30px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background:
      radial-gradient(circle at 50% 9%, rgba(50, 192, 255, 0.34), transparent 18%),
      radial-gradient(circle at 50% 36%, rgba(13, 109, 220, 0.23), transparent 28%),
      linear-gradient(180deg, rgba(1, 13, 32, 0.12), rgba(2, 17, 38, 0.38) 40%, rgba(1, 10, 24, 0.88) 78%, #020812),
      linear-gradient(180deg, #061b33, #020a16) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .ai-window::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    z-index: -3 !important;
    background:
      radial-gradient(circle at 50% 3%, rgba(255,255,255,0.42), transparent 3%),
      radial-gradient(circle at 32% 8%, rgba(100,221,255,0.55), transparent 1.2%),
      radial-gradient(circle at 74% 5%, rgba(100,221,255,0.42), transparent 1.1%),
      linear-gradient(155deg, transparent 0 19%, rgba(84,214,255,0.18) 19.1%, transparent 19.45%),
      linear-gradient(25deg, transparent 0 68%, rgba(84,214,255,0.12) 68.1%, transparent 68.45%),
      repeating-linear-gradient(180deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 7px);
    mix-blend-mode: screen !important;
    opacity: 0.76 !important;
  }

  .ai-window::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    z-index: -2 !important;
    background:
      linear-gradient(135deg, transparent 0 48%, rgba(30, 124, 210, 0.92) 48.2% 49.2%, transparent 49.4%) 0 238px / 50% 210px no-repeat,
      linear-gradient(225deg, transparent 0 48%, rgba(34, 137, 224, 0.86) 48.2% 49.2%, transparent 49.4%) 100% 238px / 50% 210px no-repeat,
      radial-gradient(ellipse at 50% 46%, rgba(75, 180, 255, 0.35), transparent 34%),
      linear-gradient(155deg, transparent 0 34%, rgba(210,244,255,0.9) 34.2% 35%, transparent 35.2%) 0 238px / 50% 220px no-repeat,
      linear-gradient(25deg, transparent 0 34%, rgba(210,244,255,0.82) 34.2% 35%, transparent 35.2%) 100% 238px / 50% 220px no-repeat;
    opacity: 0.64 !important;
    mask-image: linear-gradient(transparent 0 115px, #000 160px, #000 565px, transparent 650px) !important;
  }

  .window-top {
    position: absolute !important;
    left: 32px !important;
    top: 315px !important;
    z-index: 6 !important;
    display: block !important;
    width: 70px !important;
    height: 70px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  .status-dot,
  .status-text {
    display: none !important;
  }

  .telegram-link {
    display: grid !important;
    width: 70px !important;
    height: 70px !important;
    place-items: center !important;
    border: 1px solid rgba(158, 235, 255, 0.82) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle, rgba(255,255,255,0.95), rgba(83, 201, 255, 0.28) 58%, rgba(7, 44, 88, 0.36)) !important;
    box-shadow:
      0 0 30px rgba(90, 218, 255, 0.62),
      inset 0 0 22px rgba(255,255,255,0.3) !important;
  }

  .telegram-link svg {
    width: 34px !important;
    height: 34px !important;
    fill: #168bdc !important;
  }

  .brand-stage {
    position: relative !important;
    display: grid !important;
    flex: 0 0 286px !important;
    width: 100% !important;
    min-height: 286px !important;
    height: 286px !important;
    place-items: start center !important;
    padding: 18px 0 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .brand-stage::before {
    content: "" !important;
    position: absolute !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -18px !important;
    height: 168px !important;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0 !important;
    background:
      linear-gradient(140deg, transparent 0 36%, rgba(230,248,255,0.86) 36.4% 37.5%, transparent 37.8%) left top / 50% 100% no-repeat,
      linear-gradient(40deg, transparent 0 36%, rgba(230,248,255,0.78) 36.4% 37.5%, transparent 37.8%) right top / 50% 100% no-repeat,
      radial-gradient(ellipse at 50% 100%, rgba(58, 170, 255, 0.75), rgba(12, 70, 128, 0.62) 40%, transparent 72%) !important;
    opacity: 0.72 !important;
    filter: drop-shadow(0 0 34px rgba(92,218,255,0.36)) !important;
    z-index: -1 !important;
  }

  .brand-stage::after {
    content: "SYS. AI-SBERG" !important;
    position: absolute !important;
    right: 0 !important;
    top: 18px !important;
    display: block !important;
    color: rgba(70, 203, 255, 0.92) !important;
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .brand-logo {
    width: min(270px, 72vw) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transform: none !important;
    filter:
      drop-shadow(0 0 24px rgba(100, 221, 255, 0.74))
      drop-shadow(0 20px 46px rgba(0, 22, 58, 0.64)) !important;
  }

  .chat-widget {
    position: relative !important;
    display: grid !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .chat-messages {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 9px !important;
    overflow: visible !important;
    mask-image: none !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 25px 18px 23px !important;
    border: 1px solid rgba(135, 232, 255, 0.78) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(135, 232, 255, 0.2), transparent 36%),
      linear-gradient(145deg, rgba(120, 201, 255, 0.22), rgba(6, 36, 72, 0.72)) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.18),
      0 0 34px rgba(100, 221, 255, 0.34),
      inset 0 0 36px rgba(255,255,255,0.08) !important;
    color: #f6fbff !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    text-align: center !important;
    text-shadow: 0 2px 18px rgba(0, 16, 38, 0.52) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    backdrop-filter: blur(13px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(13px) saturate(1.2) !important;
  }

  .chat-message.assistant:first-child {
    font-size: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
  }

  .chat-message.assistant:first-child::before {
    content: "AI-Sberg на связи. Что хотите улучшить:" !important;
    display: block !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    text-shadow: 0 2px 18px rgba(0, 16, 38, 0.62) !important;
  }

  .chat-message.assistant:first-child::after {
    content: "сайт, заявки, рекламу, бот для клиентов\Aили ручную работу?" !important;
    display: block !important;
    margin-top: 16px !important;
    white-space: pre-line !important;
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 950 !important;
    line-height: 1.32 !important;
    text-shadow: 0 2px 18px rgba(0, 16, 38, 0.62) !important;
  }

  .chat-message.user {
    padding: 13px 14px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #126cff, #13ccff) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
  }

  .chat-message.user::before,
  .chat-message.user::after {
    content: none !important;
  }

  .quick-prompts {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .quick-prompts button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 20px !important;
    grid-template-rows: auto auto !important;
    gap: 0 9px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(134, 231, 255, 0.72) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(145deg, rgba(103, 198, 255, 0.28), rgba(5, 40, 79, 0.75)) !important;
    color: #f6fbff !important;
    text-align: left !important;
    box-shadow:
      0 8px 22px rgba(0, 20, 48, 0.22),
      inset 0 0 20px rgba(255,255,255,0.08) !important;
  }

  .quick-prompts button::before {
    content: none !important;
  }

  .quick-prompts button::after {
    content: "›" !important;
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    color: rgba(229, 249, 255, 0.92) !important;
    font-size: 30px !important;
    line-height: 1 !important;
    text-shadow: 0 0 12px rgba(99,221,255,0.8) !important;
  }

  .prompt-icon {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid rgba(158, 235, 255, 0.72) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0 16px rgba(255,255,255,0.08) !important;
  }

  .prompt-icon.web {
    background:
      linear-gradient(#9beaff 0 0) 7px 8px / 18px 12px no-repeat,
      linear-gradient(#9beaff 0 0) 13px 22px / 7px 2px no-repeat,
      rgba(255,255,255,0.08) !important;
  }

  .prompt-icon.bot {
    background:
      radial-gradient(circle at 11px 16px, #9beaff 0 2px, transparent 3px),
      radial-gradient(circle at 21px 16px, #9beaff 0 2px, transparent 3px),
      linear-gradient(#9beaff 0 0) 8px 10px / 16px 16px no-repeat,
      rgba(255,255,255,0.08) !important;
  }

  .prompt-icon.target {
    background:
      radial-gradient(circle, transparent 0 4px, #9beaff 5px 6px, transparent 7px 10px, #9beaff 11px 12px, transparent 13px),
      rgba(255,255,255,0.08) !important;
  }

  .prompt-icon.box {
    background:
      linear-gradient(35deg, transparent 42%, #9beaff 43% 48%, transparent 49%),
      linear-gradient(145deg, transparent 42%, #9beaff 43% 48%, transparent 49%),
      linear-gradient(#9beaff 0 0) 8px 9px / 16px 14px no-repeat,
      rgba(255,255,255,0.08) !important;
  }

  .quick-prompts strong {
    display: block !important;
    grid-column: 2 !important;
    color: #f6fbff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  .quick-prompts small {
    display: block !important;
    grid-column: 2 !important;
    color: rgba(226, 244, 255, 0.78) !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .chat-form,
  .lead-send {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .chat-form input,
  .lead-send input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 0 18px 0 54px !important;
    border: 1px solid rgba(134, 231, 255, 0.68) !important;
    border-radius: 20px !important;
    background:
      linear-gradient(145deg, rgba(82, 175, 236, 0.26), rgba(3, 26, 56, 0.75)) !important;
    color: #fff !important;
    font-size: 19px !important;
    box-shadow:
      0 0 24px rgba(100, 221, 255, 0.2),
      inset 0 0 22px rgba(255,255,255,0.08) !important;
  }

  .chat-form input::placeholder,
  .lead-send input::placeholder {
    color: rgba(229, 244, 255, 0.56) !important;
  }

  .chat-form::before,
  .lead-send::before {
    content: "" !important;
    position: absolute !important;
    left: 15px !important;
    width: 28px !important;
    height: 28px !important;
    pointer-events: none !important;
    opacity: 0.82 !important;
    z-index: 2 !important;
  }

  .chat-form::before {
    content: "✎" !important;
    top: 13px !important;
    color: #bdefff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    text-align: center !important;
    background: none !important;
  }

  .lead-send::before {
    content: "☎" !important;
    top: 14px !important;
    color: #bdefff !important;
    font-size: 27px !important;
    line-height: 1 !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .chat-form button,
  .lead-send button {
    position: relative !important;
    display: grid !important;
    width: 100% !important;
    min-height: 78px !important;
    grid-template-columns: 70px minmax(0, 1fr) 32px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    padding: 10px 16px 10px 12px !important;
    border: 1px solid rgba(157, 236, 255, 0.9) !important;
    border-radius: 22px !important;
    color: #fff !important;
    text-align: left !important;
    font-size: 0 !important;
  }

  .chat-form button {
    background:
      radial-gradient(circle at 51px 50%, rgba(255,255,255,0.16), transparent 28px),
      linear-gradient(135deg, #126cff, #13ccff) !important;
    box-shadow:
      0 0 34px rgba(42, 194, 255, 0.58),
      inset 0 0 30px rgba(255,255,255,0.16) !important;
  }

  .lead-send button {
    background:
      linear-gradient(135deg, rgba(1, 8, 18, 0.98), rgba(6, 38, 73, 0.98)) !important;
    box-shadow:
      0 0 26px rgba(42, 194, 255, 0.24),
      inset 0 0 26px rgba(255,255,255,0.08) !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    display: block !important;
    grid-column: 2 !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .chat-form button::before {
    content: "СПРОСИТЬ AI-SBERG" !important;
  }

  .lead-send button::before {
    content: "ОСТАВИТЬ ЗАЯВКУ" !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: "›" !important;
    position: static !important;
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    transform: none !important;
    color: #fff !important;
    font-size: 44px !important;
    line-height: 1 !important;
    text-align: right !important;
  }

  .chat-form button {
    font-size: 0 !important;
  }

  .chat-form button + * {
    display: none !important;
  }

  .chat-form button::marker,
  .lead-send button::marker {
    content: "" !important;
  }

  .chat-form button {
    text-shadow: 0 1px 14px rgba(0, 34, 82, 0.58) !important;
  }

  .privacy-consent {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 26px 1fr !important;
    gap: 11px !important;
    margin: 4px 0 0 !important;
    color: rgba(238, 249, 255, 0.88) !important;
    font-size: 14px !important;
    line-height: 1.28 !important;
  }

  .privacy-consent input {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    border: 1px solid rgba(198, 244, 255, 0.86) !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.04) !important;
  }

  .privacy-consent a {
    color: #7ddeff !important;
    font-weight: 900 !important;
  }

  .chat-note {
    width: 100% !important;
    margin: 4px 0 0 !important;
    color: rgba(185, 222, 245, 0.76) !important;
    font-size: 15px !important;
    text-align: center !important;
  }

  body.conversation-started .ai-window {
    height: 100svh !important;
    min-height: 100svh !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  body.conversation-started .window-top {
    top: 14px !important;
    left: 22px !important;
    width: 48px !important;
    height: 48px !important;
  }

  body.conversation-started .telegram-link {
    width: 48px !important;
    height: 48px !important;
  }

  body.conversation-started .telegram-link svg {
    width: 24px !important;
    height: 24px !important;
  }

  body.conversation-started .brand-stage {
    flex: 0 0 74px !important;
    min-height: 74px !important;
    height: 74px !important;
    padding-top: 0 !important;
  }

  body.conversation-started .brand-stage::before,
  body.conversation-started .brand-stage::after {
    opacity: 0 !important;
  }

  body.conversation-started .brand-logo {
    width: 116px !important;
  }

  body.conversation-started .chat-widget {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) auto auto auto !important;
    overflow: hidden !important;
  }

  body.conversation-started .chat-messages {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    align-content: end !important;
  }

  body.conversation-started .chat-message {
    padding: 12px 13px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  body.conversation-started .chat-message.assistant:first-child::before,
  body.conversation-started .chat-message.assistant:first-child::after {
    content: none !important;
    display: none !important;
  }

  body.conversation-started .quick-prompts {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .ai-window {
    padding: 18px 24px 22px !important;
  }

  .brand-stage {
    flex-basis: 252px !important;
    min-height: 252px !important;
    height: 252px !important;
  }

  .brand-logo {
    width: min(240px, 70vw) !important;
  }

  .chat-message {
    padding: 22px 16px 20px !important;
  }

  .chat-message.assistant:first-child::before {
    font-size: 19px !important;
  }

  .chat-message.assistant:first-child::after {
    margin-top: 12px !important;
    font-size: 21px !important;
    line-height: 1.26 !important;
  }

  .quick-prompts button {
    min-height: 48px !important;
  }

  .quick-prompts strong {
    font-size: 16px !important;
  }
}

/* Mobile hard viewport anchor: the approved screen must start at x=0 and never clip. */
@media (max-width: 720px) {
  body {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .ai-window {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    min-height: 100svh !important;
    margin: 0 !important;
    transform: none !important;
  }

  .chat-widget,
  .chat-messages,
  .quick-prompts,
  .chat-form,
  .lead-send,
  .privacy-consent,
  .chat-note {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Mobile photo-fix: match the real phone screenshot, keep desktop untouched. */
@media (max-width: 920px) {
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .ai-window {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 !important;
    padding-left: clamp(24px, 4.8vw, 52px) !important;
    padding-right: clamp(24px, 4.8vw, 52px) !important;
    overflow: visible !important;
  }

  .window-top {
    top: 270px !important;
    left: clamp(24px, 4.8vw, 52px) !important;
    width: 64px !important;
    height: 64px !important;
  }

  .telegram-link {
    width: 64px !important;
    height: 64px !important;
  }

  .telegram-link svg {
    width: 31px !important;
    height: 31px !important;
  }

  .chat-message.assistant:first-child {
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
  }

  .chat-message.assistant:first-child::before,
  .chat-message.assistant:first-child::after {
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0, 16, 38, 0.68) !important;
  }

  .chat-message.assistant:first-child::after {
    content: "сайт, заявки, рекламу, бот для клиентов\Aили ручную работу?" !important;
  }

  .quick-prompts small,
  .quick-prompts .prompt-icon {
    display: block !important;
  }

  .quick-prompts button {
    overflow: visible !important;
  }
}

/* Mobile screenshot fixes: no overlap, no broken CTA text, phone-only. */
@media (max-width: 720px) {
  .window-top {
    top: 284px !important;
    left: clamp(18px, 4vw, 34px) !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 8 !important;
  }

  .telegram-link {
    width: 56px !important;
    height: 56px !important;
  }

  .telegram-link svg {
    width: 27px !important;
    height: 27px !important;
  }

  .chat-message.assistant:first-child {
    padding-top: 34px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .chat-message.assistant:first-child::before {
    font-size: clamp(17px, 4.7vw, 20px) !important;
    line-height: 1.25 !important;
  }

  .chat-message.assistant:first-child::after {
    margin-top: 12px !important;
    font-size: clamp(20px, 5.4vw, 24px) !important;
    line-height: 1.24 !important;
  }

  .chat-form button,
  .lead-send button {
    grid-template-columns: 54px minmax(0, 1fr) 26px !important;
    min-height: 74px !important;
    padding-left: 10px !important;
    padding-right: 14px !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    font-size: clamp(18px, 5vw, 21px) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    font-size: 38px !important;
  }
}

@media (max-width: 390px) {
  .window-top {
    top: 276px !important;
    left: 22px !important;
    width: 52px !important;
    height: 52px !important;
  }

  .telegram-link {
    width: 52px !important;
    height: 52px !important;
  }

  .telegram-link svg {
    width: 25px !important;
    height: 25px !important;
  }

  .chat-message.assistant:first-child {
    padding-top: 32px !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }
}

/* FINAL MOBILE OVERRIDE 20260512-09: light premium tech. Must stay last. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #f4fbff !important;
  }

  body {
    display: block !important;
    color: #06192b !important;
  }

  body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 80% 9%, rgba(18, 108, 255, 0.16), transparent 24%),
      radial-gradient(circle at 8% 32%, rgba(32, 191, 255, 0.2), transparent 30%),
      linear-gradient(rgba(18, 108, 255, 0.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18, 108, 255, 0.04) 1px, transparent 1px),
      linear-gradient(180deg, #ffffff, #eaf9ff 54%, #f9fdff) !important;
    background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
    z-index: 0 !important;
  }

  body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      linear-gradient(125deg, transparent 0 18%, rgba(32, 191, 255, 0.16) 18.15%, transparent 18.5%),
      linear-gradient(245deg, transparent 0 72%, rgba(18, 108, 255, 0.11) 72.15%, transparent 72.5%) !important;
    z-index: 0 !important;
  }

  .future-bg,
  .stage-card-layer,
  .floating-card,
  .hand-iceberg,
  .hand-iceberg-render {
    display: none !important;
  }

  .ai-window {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 14px 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .ai-window::before {
    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    display: block !important;
    pointer-events: none !important;
    border: 1px solid rgba(18, 108, 255, 0.14) !important;
    border-radius: 26px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.24)) !important;
    box-shadow: 0 18px 48px rgba(12, 91, 160, 0.08), inset 0 0 38px rgba(32, 191, 255, 0.07) !important;
    z-index: -1 !important;
  }

  .ai-window::after {
    content: "" !important;
    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    top: 92px !important;
    height: 1px !important;
    display: block !important;
    background: linear-gradient(90deg, transparent, rgba(18,108,255,0.36), transparent) !important;
    pointer-events: none !important;
  }

  .window-top {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 10px 1fr 44px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 4px !important;
  }

  .status-dot {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #19d2a1 !important;
    box-shadow: 0 0 14px rgba(25, 210, 161, 0.62) !important;
  }

  .status-text {
    display: block !important;
    color: #116bb8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }

  .telegram-link {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border-radius: 14px !important;
    border: 1px solid rgba(22, 139, 220, 0.18) !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(217,246,255,0.86)) !important;
    box-shadow: 0 10px 26px rgba(19, 124, 210, 0.14), inset 0 0 18px rgba(255,255,255,0.7) !important;
  }

  .telegram-link svg {
    width: 24px !important;
    height: 24px !important;
    fill: #168bdc !important;
  }

  .brand-stage {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    flex: 0 0 152px !important;
    min-height: 152px !important;
    height: 152px !important;
    padding: 4px 0 0 !important;
    margin: 0 !important;
  }

  .brand-stage::before {
    content: "" !important;
    position: absolute !important;
    width: min(260px, 74vw) !important;
    aspect-ratio: 1 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(32,191,255,0.24), rgba(18,108,255,0.1) 42%, transparent 70%) !important;
    z-index: -1 !important;
  }

  .brand-stage::after {
    content: none !important;
    display: none !important;
  }

  .brand-logo {
    width: min(235px, 68vw) !important;
    height: auto !important;
    max-height: 138px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 24px rgba(22,101,168,0.12)) drop-shadow(0 0 18px rgba(32,191,255,0.28)) !important;
  }

  .chat-widget {
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 15px !important;
    border: 1px solid rgba(28,143,235,0.18) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(229,248,255,0.74)) !important;
    color: #06192b !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-shadow: none !important;
    box-shadow: 0 14px 34px rgba(19,101,166,0.11), inset 0 0 24px rgba(255,255,255,0.58) !important;
  }

  .chat-message.assistant:first-child {
    color: #06192b !important;
    font-size: 17px !important;
  }

  .chat-message.assistant:first-child::before,
  .chat-message.assistant:first-child::after {
    content: none !important;
    display: none !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .quick-prompts button {
    display: grid !important;
    place-items: center !important;
    min-height: 46px !important;
    padding: 7px 4px !important;
    border: 1px solid rgba(28,143,235,0.16) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(224,247,255,0.8)) !important;
    box-shadow: 0 10px 24px rgba(19,101,166,0.09), inset 0 0 18px rgba(255,255,255,0.72) !important;
  }

  .quick-prompts button::before,
  .quick-prompts button::after,
  .prompt-icon,
  .quick-prompts small {
    content: none !important;
    display: none !important;
  }

  .quick-prompts strong {
    display: block !important;
    color: #08213a !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
    font-weight: 900 !important;
  }

  .chat-form,
  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
  }

  .chat-form::before,
  .lead-send::before {
    content: none !important;
    display: none !important;
  }

  .chat-form input,
  .lead-send input {
    min-height: 54px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(28,143,235,0.18) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(233,249,255,0.86)) !important;
    color: #06192b !important;
    font-size: 16px !important;
    box-shadow: 0 12px 28px rgba(19,101,166,0.09), inset 0 0 20px rgba(255,255,255,0.74) !important;
  }

  .chat-form button,
  .lead-send button {
    display: grid !important;
    place-items: center !important;
    min-height: 56px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #fff !important;
    font-size: 0 !important;
    text-align: center !important;
  }

  .chat-form button {
    background: radial-gradient(circle at 12% 50%, rgba(255,255,255,0.28), transparent 18%), linear-gradient(135deg, #126cff, #20bfff) !important;
    box-shadow: 0 16px 34px rgba(18,108,255,0.22) !important;
  }

  .lead-send button {
    background: linear-gradient(135deg, #06192b, #0a2c4f) !important;
    box-shadow: 0 14px 30px rgba(6,25,43,0.2) !important;
  }

  .chat-form button::before {
    content: "Спросить AI-Sberg" !important;
  }

  .lead-send button::before {
    content: "Оставить заявку" !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    display: block !important;
    color: #fff !important;
    font-size: clamp(16px, 4.6vw, 20px) !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: none !important;
    display: none !important;
  }
}

/* FINAL MOBILE DESIGN 20260512-11: bright premium AI console, readable and clean. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #eef9ff !important;
  }

  body {
    display: block !important;
    color: #071827 !important;
    font-family: Inter, Arial, sans-serif !important;
  }

  body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 50% 2%, rgba(255,255,255,0.98), transparent 22%),
      radial-gradient(circle at 12% 22%, rgba(0, 194, 255, 0.28), transparent 24%),
      radial-gradient(circle at 88% 20%, rgba(18, 108, 255, 0.22), transparent 26%),
      linear-gradient(135deg, rgba(18,108,255,0.12), transparent 25% 70%, rgba(32,191,255,0.18)),
      linear-gradient(180deg, #f8fdff 0%, #dff6ff 48%, #f7fcff 100%) !important;
    z-index: 0 !important;
  }

  body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    opacity: 0.72 !important;
    background:
      linear-gradient(rgba(18,108,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18,108,255,0.035) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    mask-image: linear-gradient(#000, transparent 88%) !important;
    z-index: 0 !important;
  }

  .future-bg,
  .stage-card-layer,
  .floating-card,
  .hand-iceberg,
  .hand-iceberg-render {
    display: none !important;
  }

  .ai-window {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 560px !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 14px 16px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .ai-window::before {
    content: "" !important;
    position: absolute !important;
    inset: 10px 10px 14px !important;
    display: block !important;
    border: 1px solid rgba(18,108,255,0.18) !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.34)) !important;
    box-shadow:
      0 24px 60px rgba(20, 113, 184, 0.13),
      inset 0 0 40px rgba(32, 191, 255, 0.08) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  .ai-window::after {
    content: "" !important;
    position: absolute !important;
    left: 28px !important;
    right: 28px !important;
    top: 92px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(18,108,255,0.4), transparent) !important;
    pointer-events: none !important;
  }

  .window-top {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 10px 1fr 44px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 4px !important;
  }

  .status-dot {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: #19d2a1 !important;
    box-shadow: 0 0 14px rgba(25,210,161,0.66) !important;
  }

  .status-text {
    display: block !important;
    color: #126cff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }

  .telegram-link {
    display: grid !important;
    width: 44px !important;
    height: 44px !important;
    place-items: center !important;
    border-radius: 15px !important;
    border: 1px solid rgba(18,108,255,0.16) !important;
    background: linear-gradient(145deg, #ffffff, #dff7ff) !important;
    box-shadow:
      0 12px 26px rgba(18,108,255,0.15),
      inset 0 0 18px rgba(255,255,255,0.86) !important;
  }

  .telegram-link svg {
    width: 24px !important;
    height: 24px !important;
    fill: #168bdc !important;
  }

  .brand-stage {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 128px !important;
    width: 100% !important;
    min-height: 128px !important;
    height: 128px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .brand-stage::before {
    content: "" !important;
    position: absolute !important;
    width: min(250px, 70vw) !important;
    height: min(250px, 70vw) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background:
      conic-gradient(from 180deg, rgba(18,108,255,0), rgba(32,191,255,0.32), rgba(18,108,255,0) 48%),
      radial-gradient(circle, rgba(32,191,255,0.2), transparent 68%) !important;
    filter: blur(0.2px) !important;
    z-index: -1 !important;
  }

  .brand-stage::after {
    content: none !important;
    display: none !important;
  }

  .brand-logo {
    width: min(220px, 64vw) !important;
    max-height: 118px !important;
    height: auto !important;
    object-fit: contain !important;
    filter:
      drop-shadow(0 12px 22px rgba(12, 91, 160, 0.14))
      drop-shadow(0 0 16px rgba(32,191,255,0.22)) !important;
  }

  .chat-widget {
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .chat-messages {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: none !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    mask-image: none !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    padding: 17px 16px !important;
    border: 1px solid rgba(18,108,255,0.16) !important;
    border-radius: 22px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.96), rgba(232,248,255,0.86)) !important;
    color: #071827 !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.38 !important;
    text-align: left !important;
    text-shadow: none !important;
    box-shadow:
      0 16px 34px rgba(12,91,160,0.11),
      inset 0 0 20px rgba(255,255,255,0.72) !important;
  }

  .chat-message.assistant:first-child {
    color: #071827 !important;
    font-size: 17px !important;
  }

  .chat-message.assistant:first-child::before,
  .chat-message.assistant:first-child::after {
    content: none !important;
    display: none !important;
  }

  .chat-message.user {
    justify-self: end !important;
    width: auto !important;
    max-width: 92% !important;
    background: linear-gradient(135deg, #126cff, #20bfff) !important;
    color: #fff !important;
    font-weight: 750 !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .quick-prompts button {
    display: grid !important;
    place-items: center !important;
    min-height: 44px !important;
    padding: 7px 4px !important;
    border: 1px solid rgba(18,108,255,0.14) !important;
    border-radius: 15px !important;
    background: linear-gradient(145deg, #ffffff, #e7f9ff) !important;
    box-shadow:
      0 10px 24px rgba(12,91,160,0.08),
      inset 0 0 16px rgba(255,255,255,0.82) !important;
    text-align: center !important;
  }

  .quick-prompts button::before,
  .quick-prompts button::after,
  .prompt-icon,
  .quick-prompts small {
    content: none !important;
    display: none !important;
  }

  .quick-prompts strong {
    display: block !important;
    color: #08213a !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  .chat-form,
  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .chat-form::before,
  .lead-send::before {
    content: none !important;
    display: none !important;
  }

  .chat-form input,
  .lead-send input {
    min-height: 54px !important;
    padding: 0 15px !important;
    border: 1px solid rgba(18,108,255,0.16) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.9) !important;
    color: #071827 !important;
    font-size: 16px !important;
    box-shadow:
      0 12px 28px rgba(12,91,160,0.08),
      inset 0 0 18px rgba(255,255,255,0.82) !important;
  }

  .chat-form input::placeholder,
  .lead-send input::placeholder {
    color: rgba(7,24,39,0.42) !important;
  }

  .chat-form button,
  .lead-send button {
    display: grid !important;
    place-items: center !important;
    min-height: 56px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #fff !important;
    font-size: 0 !important;
    text-align: center !important;
  }

  .chat-form button {
    background:
      radial-gradient(circle at 12% 50%, rgba(255,255,255,0.28), transparent 18%),
      linear-gradient(135deg, #126cff, #20bfff) !important;
    box-shadow: 0 16px 34px rgba(18,108,255,0.23) !important;
  }

  .lead-send button {
    background: linear-gradient(135deg, #071827, #0b3158) !important;
    box-shadow: 0 14px 30px rgba(7,24,39,0.22) !important;
  }

  .chat-form button::before {
    content: "Спросить AI-Sberg" !important;
  }

  .lead-send button::before {
    content: "Оставить заявку" !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    display: block !important;
    color: #fff !important;
    font-size: clamp(16px, 4.6vw, 20px) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: none !important;
    display: none !important;
  }

  .privacy-consent {
    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    color: rgba(7,24,39,0.66) !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
  }

  .privacy-consent input {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 1px solid rgba(18,108,255,0.24) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.9) !important;
  }

  .privacy-consent a {
    color: #126cff !important;
    font-weight: 900 !important;
  }

  .chat-note {
    width: 100% !important;
    margin: 0 !important;
    color: rgba(7,24,39,0.48) !important;
    font-size: 12px !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  .ai-window {
    padding: 12px 14px 16px !important;
  }

  .brand-stage {
    flex-basis: 118px !important;
    min-height: 118px !important;
    height: 118px !important;
  }

  .brand-logo {
    width: min(200px, 62vw) !important;
    max-height: 110px !important;
  }

  .chat-message {
    padding: 15px 14px !important;
    font-size: 16px !important;
  }

  .quick-prompts {
    gap: 6px !important;
  }

  .quick-prompts button {
    min-height: 42px !important;
    border-radius: 13px !important;
  }
}

/* FINAL CLEAN MOBILE 20260512-12: no overlaps, no ghosts, premium spacing. */
@media (max-width: 720px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #f3fbff !important;
  }

  body {
    display: block !important;
    color: #071827 !important;
  }

  body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 50% 7%, rgba(32, 191, 255, 0.18), transparent 24%),
      radial-gradient(circle at 12% 32%, rgba(18, 108, 255, 0.12), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #edfaff 52%, #f8fdff 100%) !important;
    z-index: 0 !important;
  }

  body::after,
  .future-bg,
  .stage-card-layer,
  .floating-card,
  .hand-iceberg,
  .hand-iceberg-render {
    content: none !important;
    display: none !important;
  }

  .ai-window {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 560px !important;
    min-height: 100svh !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 14px 18px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .ai-window::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px 10px 14px !important;
    display: block !important;
    border: 1px solid rgba(18, 108, 255, 0.12) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.42) !important;
    box-shadow: 0 18px 44px rgba(18, 108, 255, 0.08) !important;
    pointer-events: none !important;
    z-index: -1 !important;
  }

  .ai-window::after {
    content: none !important;
    display: none !important;
  }

  .window-top {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 10px 1fr 42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 4px !important;
    margin: 0 !important;
  }

  .status-dot {
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #19d2a1 !important;
    box-shadow: 0 0 12px rgba(25, 210, 161, 0.6) !important;
  }

  .status-text {
    display: block !important;
    color: #126cff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  .telegram-link {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    border: 1px solid rgba(18, 108, 255, 0.14) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px rgba(18, 108, 255, 0.12) !important;
  }

  .telegram-link svg {
    width: 23px !important;
    height: 23px !important;
    fill: #168bdc !important;
  }

  .brand-stage {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 118px !important;
    width: 100% !important;
    min-height: 118px !important;
    height: 118px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .brand-stage::before,
  .brand-stage::after {
    content: none !important;
    display: none !important;
  }

  .brand-logo {
    width: min(210px, 62vw) !important;
    max-height: 112px !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 22px rgba(18, 108, 255, 0.12)) !important;
  }

  .chat-widget {
    display: grid !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 11px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .chat-messages {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    mask-image: none !important;
  }

  .chat-message {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 16px !important;
    border: 1px solid rgba(18, 108, 255, 0.12) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #071827 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    text-align: left !important;
    text-shadow: none !important;
    box-shadow: 0 14px 30px rgba(18, 108, 255, 0.08) !important;
  }

  .chat-message.assistant:first-child {
    color: #071827 !important;
    font-size: 17px !important;
  }

  .chat-message.assistant:first-child::before,
  .chat-message.assistant:first-child::after {
    content: none !important;
    display: none !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .quick-prompts button {
    display: grid !important;
    place-items: center !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(18, 108, 255, 0.12) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 10px 22px rgba(18, 108, 255, 0.07) !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .quick-prompts button::before,
  .quick-prompts button::after,
  .prompt-icon,
  .quick-prompts small {
    content: none !important;
    display: none !important;
  }

  .quick-prompts strong {
    display: block !important;
    color: #08213a !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  .chat-form,
  .lead-send {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .chat-form::before,
  .lead-send::before {
    content: none !important;
    display: none !important;
  }

  .chat-form input,
  .lead-send input {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(18, 108, 255, 0.12) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: #071827 !important;
    font-size: 16px !important;
    box-shadow: 0 12px 26px rgba(18, 108, 255, 0.07) !important;
  }

  .chat-form input::placeholder,
  .lead-send input::placeholder {
    color: rgba(7, 24, 39, 0.42) !important;
  }

  .chat-form button,
  .lead-send button {
    display: grid !important;
    place-items: center !important;
    min-height: 56px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #fff !important;
    font-size: 0 !important;
    text-align: center !important;
  }

  .chat-form button {
    background: linear-gradient(135deg, #126cff, #20bfff) !important;
    box-shadow: 0 16px 34px rgba(18, 108, 255, 0.22) !important;
  }

  .lead-send button {
    background: linear-gradient(135deg, #071827, #0b3158) !important;
    box-shadow: 0 14px 30px rgba(7, 24, 39, 0.2) !important;
  }

  .chat-form button::before {
    content: "Спросить AI-Sberg" !important;
  }

  .lead-send button::before {
    content: "Оставить заявку" !important;
  }

  .chat-form button::before,
  .lead-send button::before {
    display: block !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
  }

  .chat-form button::after,
  .lead-send button::after {
    content: none !important;
    display: none !important;
  }

  .privacy-consent {
    display: grid !important;
    grid-template-columns: 22px 1fr !important;
    gap: 9px !important;
    color: rgba(7, 24, 39, 0.68) !important;
    font-size: 12px !important;
    line-height: 1.28 !important;
  }

  .privacy-consent input {
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border: 1px solid rgba(18, 108, 255, 0.22) !important;
    border-radius: 6px !important;
    background: #fff !important;
  }

  .privacy-consent a {
    color: #126cff !important;
    font-weight: 900 !important;
  }

  .chat-note {
    color: rgba(7, 24, 39, 0.48) !important;
    font-size: 12px !important;
    text-align: center !important;
    margin: 0 !important;
  }
}

@media (max-width: 390px) {
  .ai-window {
    padding: 12px 14px 16px !important;
  }

  .brand-stage {
    flex-basis: 108px !important;
    min-height: 108px !important;
    height: 108px !important;
  }

  .brand-logo {
    width: min(190px, 60vw) !important;
    max-height: 102px !important;
  }

  .chat-message {
    padding: 16px 14px !important;
    font-size: 16px !important;
  }

  .quick-prompts strong {
    font-size: 14px !important;
  }
}