/* Talk2Me — project-specific styles */

/* Centered app stage, mirrors the in-page layout used by other embedded-app
   projects (see Flappy Bird's #flappy-stage). */
#chat-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* The iframe's parent box: a fixed "mobile viewing area" since the chat UI
   is designed mobile-first, regardless of the visitor's actual screen. */
#chat-frame {
    position: relative;
    width: min(400px, 94vw);
    height: min(700px, 80vh);
    background: #0b2530;             /* dark placeholder, shown before load */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

#chat-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* When the frame goes fullscreen, fill the screen and keep the app centered. */
#chat-frame:fullscreen {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
}

/* CSS-only fullscreen fallback for browsers without an element Fullscreen API
   (iOS Safari never implements requestFullscreen on non-video elements). */
#chat-frame.chat-fake-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    z-index: 1000;
}

.chat-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

#chat-fullscreen {
    cursor: pointer;
}

#chat-open-app {
    font-size: 0.85rem;
    text-decoration: none;
    padding: 0.2rem 0.6rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: 0.8;
    white-space: nowrap;
}

#chat-open-app:hover {
    opacity: 1;
}

.chat-hint {
    font-size: 0.8rem;
    opacity: 0.6;
    margin: 0;
    text-align: center;
    max-width: min(400px, 94vw);
}