.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.talk-settings {
    position: relative;
}

.talk-settings > summary {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    list-style: none;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 11px;

    background:
        rgba(255,255,255,.045);

    color: #fff;

    cursor: pointer;
    user-select: none;
}

.talk-settings > summary::-webkit-details-marker {
    display: none;
}

.settings-panel {
    position: absolute;
    z-index: 40;

    top: calc(100% + 10px);
    right: 0;

    width:
        min(
            88vw,
            330px
        );

    padding: 14px;

    display: grid;
    gap: 12px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 16px;

    background:
        rgba(9,9,11,.98);

    box-shadow:
        0 24px 80px
        rgba(0,0,0,.58);
}

.settings-panel label {
    display: grid;
    gap: 6px;

    color:
        rgba(255,255,255,.64);

    font-size: 11px;
    font-weight: 650;
}

.settings-panel input,
.settings-panel select {
    width: 100%;

    min-height: 40px;

    padding: 9px 10px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 10px;

    outline: 0;

    background:
        rgba(255,255,255,.055);

    color: #fff;

    font-size: 13px;
}

.settings-panel option {
    background: #111;
    color: #fff;
}

.settings-panel small {
    color:
        rgba(255,255,255,.38);

    font-size: 10px;
    line-height: 1.45;
}

.clear-memory {
    min-height: 40px;

    padding: 9px 11px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 10px;

    background:
        rgba(255,255,255,.045);

    color:
        rgba(255,255,255,.78);

    font-size: 11px;
    font-weight: 650;
}

.msg {
    unicode-bidi: plaintext;
    text-align: start;
}

@media (max-width: 520px) {
    .topbar .badge {
        display: none;
    }

    .settings-panel {
        position: fixed;

        top: 62px;
        right: 14px;
        left: 14px;

        width: auto;
    }
}

/* Stage034-B3 restore original Talk homepage geometry.
 *
 * The Talk/Navigate wrapper introduced in Stage034-B1
 * must not become an additional layout box while Talk
 * is active. display:contents lets the original orb,
 * heading, composer and dialogue participate directly
 * in the existing stage layout again.
 */

#talk-mode-panel.mode-panel:not([hidden]) {
    display: contents;
}

#talk-mode-panel.mode-panel[hidden] {
    display: none !important;
}

#navigate-mode-panel.mode-panel:not([hidden]) {
    display: grid;
}


/* Stage034-B4-R2 exact homepage cleanup */

/*
 * With the left brand removed, keep Native Talk Mode
 * and the settings gear aligned cleanly on the right.
 */
.topbar {
    justify-content: flex-end;
}

/*
 * More visual breathing room between the mode switch
 * and the orange Louie orb.
 */
.mode-switcher {
    width: auto !important;

    margin-bottom: 34px !important;

    display: inline-grid !important;

    grid-template-columns:
        repeat(2, auto) !important;

    justify-self: center;
}

.mode-button {
    width: auto !important;

    min-width: 94px !important;

    padding:
        8px 16px !important;
}

/*
 * "Louie" is wider than the previous "AI" label.
 */
.orb-text {
    max-width: 86%;

    font-size:
        clamp(
            16px,
            3.8vw,
            22px
        ) !important;

    letter-spacing:
        -.02em !important;

    text-align: center;
}

/*
 * Override the earlier mobile rule that stretched
 * Talk / Navigate to full width.
 *
 * Phone, tablet, laptop and desktop now share
 * the same compact button geometry.
 */
@media (max-width: 520px) {
    .mode-switcher {
        width: auto !important;

        grid-template-columns:
            repeat(2, auto) !important;
    }

    .mode-button {
        width: auto !important;

        min-width: 94px !important;

        padding:
            8px 16px !important;
    }
}