:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #3c4257; background: #eff3fa; }
* { box-sizing: border-box; }
body { margin: 0; }
.chat-page { min-height: 100vh; min-height: 100dvh; display: grid; padding: 32px; background: linear-gradient(150deg, #e4ecfa, #f4f6fb 65%); }
.chat-card { position: relative; width: 100%; height: calc(100vh - 64px); height: calc(100dvh - 64px); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 36px #25364b1a; }
iframe { display: block; width: 100%; height: 100%; border: 0; opacity: 0; }
.chat-card.ready iframe { opacity: 1; }
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.loading p { margin: 0; font-size: 15px; line-height: 1.5; }
.spinner { width: 28px; height: 28px; border: 3px solid #d7eeeb; border-top-color: #78acbb; border-radius: 50%; animation: spin .8s linear infinite; }
.loading.failed .spinner { display: none; }
button { min-height: 44px; padding: 10px 24px; border: 0; border-radius: 9px; background: #3977e4; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #2d64c5; }
button:focus-visible { outline: 3px solid #194ea5; outline-offset: 4px; }
[hidden] { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .chat-page { padding: 0; }
  .chat-card { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }