@media (min-width: 850px) {
    .quiet-aura {
        width: auto;
        height: calc(100vh - 620px);
        min-height: 170px;
        max-width: 50vw;
        aspect-ratio: 1 / 1;
    }

    .quiet-wrap {
        min-height: calc(100vh - 274px);
    }
}

@media (max-width: 850px) {
    .mode-grid {
        grid-template-columns:1fr
    }

    .session-layout {
        grid-template-columns:1fr
    }

    .session-side {
        display: grid;
        grid-template-columns:repeat(3, 1fr)
    }
}

@media (max-width: 600px) {
    .topbar, .app-shell, .site-footer {
        width: min(100% - 22px, 1180px)
    }

    .screen {
        padding: 34px 0
    }

    .nav-actions .ghost-btn {
        display: none
    }

    .hero-logo {
        max-height: 130px
    }

    .hero-actions {
        display: grid
    }

    .panel {
        padding: 24px 20px
    }

    .session-status {
        display: none !important
    }

    .session-side {
        display: none
    }

    .session-header .brand span {
        display: none
    }

    .mobile-pause-btn {
        display: inline-flex !important
    }

    .screen {
        min-height: calc(97vh - 160px);
    }

    .conversation-card {
        min-height: calc(55vh - 130px);
        border-radius: 22px
    }

    .conversation-intro {
        padding: 22px 18px
    }

    .messages {
        padding: 16px;
        max-height: 45vh
    }

    .message {
        max-width: 92%
    }

    .composer {
        margin: 12px
    }

    .site-footer {
        flex-direction: column;
        gap: 5px;
        align-items: center
    }

    .eyebrow {
        font-size: 1rem;
        letter-spacing: unset;
    }

    .saychoo::before {
        bottom: -2vh;
    }

    .microcopy {
        font-size: 0.76rem;
    }
}