/* Device surfaces and reserved chat space; all motion uses the shared ticker. */
.web-scene {
  position: relative;
  min-width: 0;
  background: radial-gradient(ellipse at 24% 40%, rgba(79,182,240,.10), transparent 60%),
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 65%), var(--bg-page);
}

.web-scene .device-pair {
  grid-template-columns: minmax(0,1fr);
  gap: clamp(24px,3vw,40px);
  align-items: center;
}

.web-scene .device-pair > *,
.web-scene .browser-columns > * {
  min-width: 0;
  max-width: 100%;
}

.web-scene .phone-mockup {
  position: relative;
  z-index: 1;
  border-color: #596879;
  background: linear-gradient(155deg, rgba(255,255,255,.035), transparent 50%), var(--bg-app);
  box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 32px rgba(79,182,240,.08),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.web-scene .browser-mockup {
  position: relative;
  z-index: 1;
  width: 100%;
  background: linear-gradient(145deg, rgba(79,182,240,.04), transparent 55%), var(--bg-app);
  box-shadow: var(--shadow-float);
  border-color: #415468;
}

.web-devices-glow {
  position: absolute;
  inset: auto 5% 5% 5%;
  height: 140px;
  background: radial-gradient(ellipse at 50% 50%, rgba(79, 182, 240, .2), rgba(55, 201, 119, .08) 50%, transparent 75%);
  filter: blur(36px);
  pointer-events: none;
  z-index: 0;
}

.web-scene .phone-speaker {
  width: 64px;
  height: 6px;
  margin: 0 auto 18px;
  background: linear-gradient(90deg, #303d4c, #6c7d91, #303d4c);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.web-scene .browser-chrome > span { min-width: 0; }
.web-scene .browser-content { padding: clamp(12px,2vw,20px); }
.web-scene .browser-columns { grid-template-columns: minmax(0,1fr); }
.web-scene .device-title { letter-spacing: -.015em; }
.web-scene .web-member--minh { color: var(--accent-green); }
.web-scene .web-member--lan { color: var(--accent-orange); }
.web-scene .web-member--an { color: var(--accent-yellow); }
.web-scene .web-map { border: 1px solid var(--border-subtle); }
.web-scene [data-web-route] { stroke-linecap: round; stroke-linejoin: round; }

.web-scene .chat-message {
  position: relative;
  background: linear-gradient(135deg, rgba(79,182,240,.08), transparent), #132331;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  overflow-wrap: anywhere;
}

/* Occupy the message's reserved space without changing either device's height. */
.web-scene .web-typing {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 14px;
  margin: 12px 0 0 12px;
  border: 1px solid #35546a;
  border-radius: 14px 14px 14px 4px;
  background: #132331;
}

.web-scene .web-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #88d6f7;
}

@media (min-width: 768px) {
  .web-scene .browser-columns { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
}

@media (min-width: 1024px) {
  .web-scene .device-pair {
    grid-template-columns: minmax(0,1fr) minmax(0,2.2fr);
    perspective: 1200px;
    align-items: center;
  }
  .web-scene .phone-mockup {
    transform: rotateY(5deg) rotateX(2deg) translateY(-4px);
    transition: transform var(--motion-medium) var(--motion-ease);
  }
  .web-scene .browser-mockup {
    transform: rotateY(-3deg) rotateX(1deg);
    transition: transform var(--motion-medium) var(--motion-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-scene .phone-mockup, .web-scene .browser-mockup {
    transform: none !important;
    transition: none !important;
  }
  .web-scene [data-web-route] { stroke-dashoffset: 0 !important; }
  .web-scene .chat-message { opacity: 1 !important; transform: none !important; }
  .web-scene .web-typing { display: none !important; }
}