.landing-caption-demo-navbar {
    background-color: var(--wc-bg-navbar);
    width: 100%;
    border-top: 1px solid var(--wc-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: var(--wc-navbar-position, relative);
    bottom: 0;
    left: 0;
    z-index: var(--wc-navbar-z, auto);
    height: var(--wc-navbar-height, auto);
    padding: var(--wc-navbar-padding, 12px 16px);
    font-size: var(--font-md);
    direction: ltr;
}

.landing-caption-demo-navbar .navbar-left,
.landing-caption-demo-navbar .navbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-caption-demo-navbar .navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Maestra Logo */
.landing-caption-demo-navbar .logo-text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--font-ml);
    font-weight: var(--font-weight-bold);
    color: var(--wc-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-caption-demo-navbar .maestra-logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    translate: 0 4px;
}

/* Recording Control Buttons */
.landing-caption-demo-navbar .recording-control {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wc-control-bg);
    border: none;
    color: var(--wc-text);
    pointer-events: none;
}

.landing-caption-demo-navbar .recording-control svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.landing-caption-demo-navbar .recording-control.mic-btn {
    color: var(--wc-primary);
}

.landing-caption-demo-navbar .recording-control.mic-btn svg {
    stroke: var(--wc-primary);
}

/* Stop/Record button - Large red button */
.landing-caption-demo-navbar .recording-control.stop-btn {
    width: 56px;
    height: 56px;
    background-color: var(--wc-error);
    color: white;
}

.landing-caption-demo-navbar .recording-control.stop-btn .stop-icon {
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 3px;
}

.landing-caption-demo-navbar .recording-control.settings-btn {
    color: var(--wc-primary);
}

/* Language Selector */
.landing-caption-demo-navbar .language-selector {
    font-family: "Plus Jakarta Sans", sans-serif;
    display: flex;
    align-items: center;
    font-size: var(--font-sm);
    background: var(--wc-control-bg);
    border-radius: 10rem;
    color: var(--wc-text);
    padding: 8px 14px;
    pointer-events: none;
    direction: ltr;
    gap: 6px;
}

.landing-caption-demo-navbar .language-separator {
    color: var(--wc-text-muted);
}

.landing-caption-demo-navbar .language-label {
    font-weight: var(--font-weight-regular);
    color: var(--wc-text);
}

/* narrow */
@container showcase (max-width: 520px) {
    .landing-caption-demo-navbar {
        padding: var(--wc-navbar-padding, 10px 12px);
    }

    .landing-caption-demo-navbar .navbar-center {
        gap: 10px;
    }

    .landing-caption-demo-navbar .recording-control {
        width: 38px;
        height: 38px;
    }

    .landing-caption-demo-navbar .recording-control.stop-btn {
        width: 48px;
        height: 48px;
    }

    .landing-caption-demo-navbar .recording-control.stop-btn .stop-icon {
        width: 20px;
        height: 20px;
    }
}

@container caption-demo (max-width: 450px) {
    .landing-caption-demo-navbar .logo-text {
        font-size: 0;
    }
}

/* phone layout */
@container showcase (aspect-ratio < 3 / 4) {
    .landing-caption-demo-navbar {
        overflow: visible;
        padding: var(--wc-navbar-padding, 8px 12px);
    }

    .landing-caption-demo-navbar .logo-text,
    .landing-caption-demo-navbar .navbar-right {
        display: none;
    }

    .landing-caption-demo-navbar .navbar-left {
        flex: 0;
    }

    .landing-caption-demo-navbar .navbar-center {
        position: static;
        transform: none;
        flex: 1;
        justify-content: center;
    }

    .landing-caption-demo-navbar .recording-control {
        width: 32px;
        height: 32px;
    }

    .landing-caption-demo-navbar .recording-control svg {
        width: 16px;
        height: 16px;
    }

    .landing-caption-demo-navbar .recording-control.stop-btn {
        width: 44px;
        height: 44px;
    }

    .landing-caption-demo-navbar .recording-control.stop-btn .stop-icon {
        width: 18px;
        height: 18px;
    }
}