:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --ink: #30343b;
    --muted: #747982;
    --violet: #687079;
    --violet-dark: #4f565e;
    --line: #dfe2e6;
    --paper: #fff;
    --canvas: #f1f2f4;
}

* {
    box-sizing: border-box;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
}

[hidden] {
    display: none !important;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 3px solid rgb(104 112 121 / 35%);
    outline-offset: 3px;
}

.auth-layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
}

.welcome-panel {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 4.5rem);
    background:
        radial-gradient(ellipse at 75% 78%, rgb(218 222 228 / 16%), transparent 37%),
        radial-gradient(ellipse at 10% 12%, rgb(160 168 178 / 18%), transparent 40%),
        #343940;
    color: #fff;
}

.welcome-panel::before,
.welcome-panel::after {
    position: absolute;
    width: 21rem;
    height: 21rem;
    border: 1px solid rgb(255 255 255 / 7%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.welcome-panel::before {
    top: -12rem;
    right: -9rem;
}

.welcome-panel::after {
    right: -14rem;
    bottom: -13rem;
    width: 32rem;
    height: 32rem;
}

.brand-lockup {
    position: relative;
    z-index: 1;
    display: flex;
    width: fit-content;
    align-items: center;
    flex-direction: column;
    gap: 0.55rem;
    color: inherit;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.045em;
    text-decoration: none;
    text-align: center;
}

.brand-symbol {
    display: grid;
    width: 2.8rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 17%);
    border-radius: 0.95rem;
    background: rgb(255 255 255 / 10%);
    color: #b6adff;
}

.brand-symbol svg {
    width: 2rem;
}

.brand-logo {
    display: block;
    width: clamp(4.5rem, 7vw, 5.75rem);
    height: auto;
    flex: 0 0 auto;
    max-height: 4rem;
    object-fit: contain;
}

.app-brand-logo {
    width: 4.25rem;
    max-height: 3.1rem;
}

.welcome-content {
    position: relative;
    z-index: 1;
    width: min(590px, 100%);
    margin: auto 0;
    padding: 3.5rem 0 2rem;
}

.eyebrow,
.welcome-footer {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #c4c6df;
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.03em;
}

.eyebrow {
    color: #c9c4ff;
    text-transform: uppercase;
}

.eyebrow-dot,
.live-pulse {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #7ce0bb;
    box-shadow: 0 0 0 0.25rem rgb(124 224 187 / 12%);
}

.welcome-content h1 {
    max-width: 11ch;
    margin: 1.35rem 0 0.6rem;
    font-size: clamp(3rem, 5.3vw, 5.25rem);
    font-weight: 720;
    letter-spacing: -0.075em;
    line-height: 0.99;
}

.hero-tagline {
    max-width: 24rem;
    color: #d7d9ed;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: 550;
    line-height: 1.5;
}

.hero-description {
    max-width: 28rem;
    margin-top: 1rem;
    color: #aeb2d0;
    font-size: 0.95rem;
    line-height: 1.75;
}

.conversation-art {
    position: relative;
    width: min(490px, 100%);
    height: 230px;
    margin-top: 1.2rem;
}

.globe {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 10.5rem;
    aspect-ratio: 1;
    place-items: center;
    transform: translate(-50%, -50%);
    color: rgb(190 185 255 / 64%);
}

.globe svg {
    width: 100%;
    filter: drop-shadow(0 0 20px rgb(143 127 255 / 20%));
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15rem;
    height: 6rem;
    border: 1px solid rgb(190 185 255 / 23%);
    border-radius: 50%;
}

.orbit-one {
    transform: translate(-50%, -50%) rotate(-24deg);
}

.orbit-two {
    transform: translate(-50%, -50%) rotate(24deg);
}

.orbit-point {
    position: absolute;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #a79bff;
    box-shadow: 0 0 1rem rgb(167 155 255 / 75%);
}

.point-one {
    top: 2.5rem;
    left: 5.2rem;
}

.point-two {
    right: 4.7rem;
    bottom: 2.2rem;
    background: #7ce0bb;
}

.floating-note {
    position: absolute;
    z-index: 1;
    display: flex;
    max-width: 17rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 0.85rem;
    background: rgb(255 255 255 / 9%);
    color: #f3f2ff;
    box-shadow: 0 1rem 2rem rgb(7 9 28 / 13%);
    font-size: 0.73rem;
    backdrop-filter: blur(12px);
}

.note-left {
    top: 1.1rem;
    left: 0;
}

.note-right {
    right: 0;
    bottom: 1.3rem;
}

.note-language {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.5rem;
    background: rgb(167 155 255 / 20%);
    color: #d8d2ff;
    font-size: 0.65rem;
    font-weight: 800;
}

.welcome-footer {
    position: relative;
    z-index: 1;
    color: #aeb2d0;
}

.live-pulse {
    width: 0.45rem;
    height: 0.45rem;
    box-shadow: 0 0 0 0.2rem rgb(124 224 187 / 12%);
}

.auth-panel {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem);
    background: #fff;
}

.nickname-setup-view {
    min-height: 100vh;
}

.nickname-setup-view .auth-panel {
    min-height: 100vh;
}

.setup-brand {
    margin: 0 auto 2rem;
    color: var(--ink);
    font-size: 1.15rem;
}

.setup-brand .brand-logo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
}

.nickname-setup-help {
    margin: 0.1rem 0 0;
    color: #858da0;
    font-size: 0.75rem;
}

.auth-card {
    width: min(390px, 100%);
    margin: auto;
}

.mobile-brand {
    display: none;
}

.auth-heading {
    margin-bottom: 2rem;
}

.auth-kicker {
    color: var(--violet);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.12em;
}

.auth-heading h2 {
    margin: 0.75rem 0 0.45rem;
    font-size: 2.15rem;
    font-weight: 720;
    letter-spacing: -0.065em;
}

.auth-heading p {
    color: var(--muted);
    font-size: 0.93rem;
    line-height: 1.6;
}

.auth-card button {
    width: 100%;
}

.google-button,
.primary-button {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: #fff;
    color: #30394f;
    font-size: 0.9rem;
    font-weight: 650;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.google-button:hover {
    border-color: #d1d4e0;
    background: #f9f9fc;
}

.google-button svg {
    width: 1.2rem;
    height: 1.2rem;
}

.button-arrow {
    margin-left: auto;
    color: #98a0b2;
    font-size: 1.1rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.5rem 0;
    color: #969daf;
    font-size: 0.75rem;
    white-space: nowrap;
}

.auth-divider::before,
.auth-divider::after {
    height: 1px;
    flex: 1;
    background: var(--line);
    content: "";
}

.auth-form {
    display: grid;
    gap: 0.55rem;
}

.auth-form label {
    margin-top: 0.45rem;
    color: #424a60;
    font-size: 0.8rem;
    font-weight: 650;
}

.auth-form input,
.auth-form select {
    width: 100%;
    min-height: 3.05rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #e1e4ed;
    border-radius: 0.7rem;
    background: #fff;
    color: var(--ink);
    font-size: 0.9rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.auth-form select {
    appearance: none;
}

.auth-form input::placeholder {
    color: #a6acbb;
}

.auth-form input:focus {
    border-color: #8278ef;
    outline: none;
    box-shadow: 0 0 0 3px rgb(101 88 232 / 12%);
}

.auth-form select:focus {
    border-color: #8278ef;
    outline: none;
    box-shadow: 0 0 0 3px rgb(101 88 232 / 12%);
}

.primary-button {
    justify-content: space-between;
    margin-top: 0.8rem;
    padding: 0 1rem;
    border-color: var(--violet);
    background: var(--violet);
    color: #fff;
}

.primary-button:hover {
    border-color: var(--violet-dark);
    background: var(--violet-dark);
}

.password-help {
    margin: 0.35rem 0 0;
    color: #858da0;
    font-size: 0.75rem;
}

.auth-mode-toggle {
    display: block;
    margin: 1rem auto 0;
    padding: 0.35rem;
    border: 0;
    background: transparent;
    color: #687087;
    font-size: 0.82rem;
}

.auth-mode-toggle span {
    color: var(--violet);
    font-weight: 700;
}

.auth-mode-toggle:hover span {
    text-decoration: underline;
}

.auth-card button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.auth-status {
    min-height: 1.4rem;
    margin-top: 0.85rem;
    color: #c03d4d;
    font-size: 0.8rem;
    line-height: 1.5;
}

.auth-status.is-warning {
    color: #8a641c;
}

.auth-footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: #858da0;
    font-size: 0.73rem;
}

.auth-footnote svg {
    width: 0.9rem;
    height: 0.9rem;
    color: #74829b;
}

.auth-copyright {
    margin-top: 2rem;
    color: #a4aaba;
    font-size: 0.72rem;
}

.app-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2.5rem);
}

.topbar,
.controls,
.brand,
.translation-control,
.card-heading {
    display: flex;
    align-items: center;
}

.topbar {
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.app-shell > .topbar {
    display: flex;
    justify-content: flex-end;
    min-height: 3.5rem;
    padding-right: 8.5rem;
}

.app-shell.is-expanded > .topbar {
    display: flex;
}

.topbar-toggle {
    position: fixed;
    z-index: 40;
    top: 1rem;
    right: 1.25rem;
    white-space: nowrap;
}

.app-shell.topbar-hidden > .topbar {
    min-height: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 220ms ease, margin 220ms ease, opacity 180ms ease, visibility 0s linear 220ms;
}

.app-shell:not(.topbar-hidden) > .topbar {
    max-height: 100vh;
    opacity: 1;
    visibility: visible;
    transition: max-height 220ms ease, margin 220ms ease, opacity 180ms ease, visibility 0s;
}

.app-shell.is-expanded > .topbar-toggle {
    top: 0.8rem;
    right: 1.25rem;
}

.app-shell .brand {
    position: fixed;
    z-index: 30;
    top: 1rem;
    right: 5.5rem;
    left: auto;
    flex-direction: row;
    gap: 0.65rem;
    color: var(--ink);
    text-align: left;
}

.app-shell .app-brand-logo {
    width: 3.25rem;
    max-height: 2.8rem;
}

.app-shell .brand h1,
.app-shell .brand p,
.auth-heading h2,
.card-heading h2,
.welcome-content h1,
.welcome-content p,
.auth-heading p {
    margin-top: 0;
}

.app-shell .brand h1 {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.04em;
}

.app-shell .brand p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.controls {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.translation-control,
.voice-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #535d75;
    font-size: 0.82rem;
}

.translation-control {
    flex-wrap: wrap;
}

.status-light {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #8c94a3;
}

.status-light.is-active {
    background: #28b982;
    box-shadow: 0 0 0.6rem rgb(40 185 130 / 40%);
}

.app-shell button {
    min-height: 2.45rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    background: var(--violet);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 650;
    transition: background-color 150ms ease, transform 150ms ease;
}

.app-shell button:hover {
    background: var(--violet-dark);
}

.app-shell button:active {
    transform: translateY(1px);
}

.app-shell .secondary-button {
    border-color: #e1e4ed;
    background: #fff;
    color: #465069;
}

.app-shell .secondary-button:hover {
    background: #f5f6fa;
}

.voice-control select {
    min-height: 2.45rem;
    padding: 0.45rem 1.8rem 0.45rem 0.7rem;
    border: 1px solid #e1e4ed;
    border-radius: 0.65rem;
    background: #fff;
    color: #30394f;
    font-size: 0.8rem;
    cursor: pointer;
}

.filter-control {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #535d75;
    font-size: 0.82rem;
}

.filter-control select {
    min-height: 2.45rem;
    max-width: 9.5rem;
    padding: 0.45rem 1.5rem 0.45rem 0.65rem;
    border: 1px solid #e1e4ed;
    border-radius: 0.65rem;
    background: #fff;
    color: #30394f;
    font-size: 0.8rem;
    cursor: pointer;
}

.signed-in-nickname {
    max-width: 12rem;
    overflow: hidden;
    color: #778198;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.connection-status {
    margin-bottom: 1rem;
    color: #778198;
    font-size: 0.85rem;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.call-stage {
    position: relative;
    min-width: 0;
}

.call-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.remote-video-card {
    grid-column: 2;
}

.call-stage > .call-chat-panel {
    grid-column: 1 / -1;
}

.video-filter-source {
    position: fixed;
    z-index: -1;
    top: 0;
    left: -10px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.video-card,
.call-chat-panel {
    overflow: hidden;
    border: 1px solid #e5e7ef;
    border-radius: 1rem;
    background: var(--paper);
    box-shadow: 0 0.5rem 1.8rem rgb(34 42 73 / 4%);
}

.remote-video-card {
    position: relative;
}

.video-subtitles {
    position: absolute;
    z-index: 2;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    pointer-events: none;
    text-align: center;
}

.video-subtitles p {
    max-width: min(760px, 100%);
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 0.65rem;
    background: rgb(9 15 27 / 78%);
    color: #fff;
    font-size: clamp(0.78rem, 1.6vw, 1rem);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 2px rgb(0 0 0 / 35%);
    backdrop-filter: blur(8px);
}

.video-subtitles .video-subtitle-translation {
    background: rgb(15 49 75 / 88%);
    font-size: clamp(0.9rem, 1.9vw, 1.15rem);
}

.video-subtitle-label {
    display: block;
    margin-bottom: 0.15rem;
    color: #b7daf1;
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-shell.captions-hidden .video-subtitles {
    display: none;
}

.card-heading {
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.remote-video-card .card-heading {
    justify-content: flex-start;
    gap: 0.55rem;
}

.card-heading h2 {
    color: #252e45;
    font-size: 0.92rem;
    font-weight: 700;
}

.remote-video-card .card-heading h2 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-remote-user-button {
    display: grid;
    width: 1.8rem;
    min-height: 1.8rem !important;
    flex: 0 0 auto;
    padding: 0 !important;
    place-items: center;
    border: 1px solid #cbd9e5 !important;
    border-radius: 50% !important;
    background: #f0f7fc !important;
    color: #357fae !important;
    font-size: 1.25rem !important;
    line-height: 1;
}

.add-remote-user-button:hover {
    background: #dceef9 !important;
}

.remote-friend-status:not(:empty) {
    position: absolute;
    z-index: 4;
    top: 3.4rem;
    left: 1rem;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: 0.3rem 0.5rem;
    border-radius: 0.45rem;
    background: rgb(17 25 35 / 78%);
    color: #fff;
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.video-badge,
.language-badge {
    padding: 0.3rem 0.55rem;
    border: 1px solid #e7e9f0;
    border-radius: 999px;
    color: #737c91;
    font-size: 0.7rem;
}

video {
    display: block;
    width: 100%;
    aspect-ratio: 64 / 63;
    background: #101426;
    object-fit: cover;
}

.call-chat-panel {
    display: flex;
    min-width: 0;
    min-height: 18rem;
    flex-direction: column;
    margin-top: 1rem;
    border-color: #d5eafa;
    background: #f8fcff;
}

.call-chat-panel[hidden] {
    display: none;
}

.call-chat-header {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #dcecf8;
    background: #eaf6ff;
}

.call-chat-header h2 {
    margin: 0;
    color: #1f3b56;
    font-size: 0.92rem;
}

.call-chat-header p {
    margin: 0.3rem 0 0;
    color: #71859a;
    font-size: 0.74rem;
}

.call-chat-header p.is-connected {
    color: #21835e;
}

.call-chat-messages {
    display: flex;
    min-height: 8rem;
    max-height: 18rem;
    flex: 1;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    overflow-y: auto;
}

.call-chat-empty {
    margin: auto;
    color: #8293a5;
    font-size: 0.8rem;
}

.call-chat-message {
    max-width: min(80%, 38rem);
    align-self: flex-start;
    padding: 0.55rem 0.75rem;
    border: 1px solid #d5eafa;
    border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
    background: #fff;
    overflow-wrap: anywhere;
}

.call-chat-message.is-mine {
    align-self: flex-end;
    border-color: #b7daf1;
    border-radius: 0.8rem 0.8rem 0.2rem 0.8rem;
    background: #e3f3ff;
}

.call-chat-sender {
    display: block;
    margin-bottom: 0.2rem;
    color: #548ab4;
    font-size: 0.65rem;
    font-weight: 750;
}

.call-chat-message p {
    margin: 0;
    color: #243d57;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.call-chat-form {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #dcecf8;
}

.call-chat-form textarea {
    min-width: 0;
    min-height: 2.7rem;
    flex: 1;
    resize: vertical;
    padding: 0.65rem 0.75rem;
    border: 1px solid #d1e4f3;
    border-radius: 0.65rem;
    background: #fff;
    color: #243d57;
    font: inherit;
    font-size: 0.8rem;
}

.app-shell .call-chat-form button {
    align-self: flex-end;
    background: #378ac4;
}

.app-shell .call-chat-form button:hover {
    background: #2475af;
}

.app-shell .call-chat-form button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.friends-sidebar {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: min(390px, 100vw);
    height: 100vh;
    height: 100dvh;
    max-height: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d8eafa;
    border-radius: 1rem 0 0 1rem;
    background: #f4faff;
    box-shadow: 0 0 2.5rem rgb(18 38 62 / 24%);
    transform: translateX(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1), visibility 0s linear 240ms;
}

.call-workspace.has-friends-open .friends-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.friends-sidebar-backdrop {
    position: fixed;
    z-index: 999;
    inset: 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgb(10 22 36 / 40%) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.app-shell .friends-sidebar-backdrop {
    min-height: 0;
    padding: 0;
    transform: none;
}

.call-workspace.has-friends-open .friends-sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.app-shell .friends-sidebar-backdrop:hover {
    background: rgb(10 22 36 / 40%) !important;
}

.friends-header,
.friend-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid #dcecf8;
    background: #eaf6ff;
}

.friends-header h2,
.friend-chat-header h3 {
    margin: 0;
    color: #1f3b56;
    font-size: 1rem;
}

.friends-header p,
.friend-chat-header p {
    margin: 0.25rem 0 0;
    color: #71859a;
    font-size: 0.75rem;
}

.app-shell .icon-button {
    display: grid;
    width: 2rem;
    min-height: 2rem;
    padding: 0;
    place-items: center;
    border: 1px solid #d5e7f5;
    border-radius: 0.6rem;
    background: #fff;
    color: #456582;
    font-size: 1.2rem;
}

.app-shell .icon-button:hover {
    background: #eaf6ff;
}

.friend-request-form {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #dcecf8;
}

.nickname-form {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #dcecf8;
    background: #f8fcff;
}

.nickname-form label,
.friend-request-form label,
.location-sharing h3,
.friends-section h3 {
    display: block;
    margin: 0 0 0.55rem;
    color: #45627e;
    font-size: 0.73rem;
    font-weight: 750;
}

.nickname-prefix {
    display: grid;
    min-width: 2rem;
    place-items: center;
    border: 1px solid #d1e4f3;
    border-radius: 0.65rem 0 0 0.65rem;
    background: #eaf6ff;
    color: #548ab4;
    font-weight: 700;
}

.friend-request-row .nickname-prefix + input {
    margin-left: -0.4rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.nickname-help {
    margin: 0.4rem 0 0;
    color: #8193a5;
    font-size: 0.68rem;
}

.friend-request-row {
    display: flex;
    gap: 0.4rem;
}

.friend-request-row input,
.direct-message-form textarea {
    min-width: 0;
    flex: 1;
    padding: 0.65rem 0.7rem;
    border: 1px solid #d1e4f3;
    border-radius: 0.65rem;
    background: #fff;
    color: #243d57;
    font: inherit;
    font-size: 0.78rem;
}

.app-shell .friend-request-row button {
    min-height: 2.4rem;
    padding: 0.5rem 0.65rem;
    background: #378ac4;
    font-size: 0.75rem;
}

.app-shell .friend-request-row button:hover,
.app-shell .direct-message-form button:hover,
.app-shell .location-button:hover {
    background: #2475af;
}

.friends-status,
.location-status {
    min-height: 1rem;
    margin: 0.4rem 0 0;
    color: #4b7f55;
    font-size: 0.7rem;
    line-height: 1.4;
}

.friends-status.is-error,
.friends-empty.is-error {
    color: #b44545;
}

.friends-status.is-warning {
    color: #8a641c;
}

.friends-section {
    min-height: 0;
    padding: 0.85rem 1rem;
    overflow-y: auto;
}

.friends-section h3 {
    margin-bottom: 0.5rem;
}

.friends-list {
    display: grid;
    gap: 0.4rem;
}

.friend-entry {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem;
    border: 1px solid transparent !important;
    border-radius: 0.7rem !important;
    background: transparent !important;
    color: #334e68 !important;
    text-align: left;
}

.app-shell .friend-entry:hover {
    border-color: #d7eafa !important;
    background: #e9f5ff !important;
}

.friend-avatar {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #d5edff;
    color: #3278aa;
    font-size: 0.8rem;
    font-weight: 750;
}

.friend-identity {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 0.15rem;
}

.friend-identity strong {
    overflow: hidden;
    color: #294762;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-presence {
    color: #8999a9;
    font-size: 0.65rem;
}

.friend-presence.is-online {
    color: #26976a;
}

.friend-message-action {
    color: #548ab4;
    font-size: 0.68rem;
}

.friends-empty {
    margin: 0;
    color: #8293a5;
    font-size: 0.74rem;
    line-height: 1.5;
}

.request-entry {
    display: grid;
    gap: 0.45rem;
    padding: 0.6rem;
    border: 1px solid #dcecf8;
    border-radius: 0.7rem;
    color: #3a566f;
    font-size: 0.75rem;
}

.request-actions {
    display: flex;
    gap: 0.4rem;
}

.app-shell .request-actions button {
    min-height: 1.8rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
}

.app-shell .request-accept {
    background: #378ac4;
}

.app-shell .request-decline {
    border-color: #d5e7f5;
    background: #fff;
    color: #647d92;
}

.friend-chat {
    display: flex;
    min-height: 15rem;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
}

.friend-chat-header {
    justify-content: flex-start;
}

.direct-messages {
    display: flex;
    min-height: 10rem;
    flex: 1;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    overflow-y: auto;
}

.direct-message {
    max-width: 92%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cfe7f8;
    border-radius: 0.8rem 0.8rem 0.8rem 0.2rem;
    background: #e8f5ff;
    color: #284660;
}

.direct-message.is-mine {
    align-self: flex-end;
    border-color: #b9def6;
    border-radius: 0.8rem 0.8rem 0.2rem 0.8rem;
    background: #d8eeff;
}

.direct-message p {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.direct-message-label {
    display: block;
    margin-bottom: 0.1rem;
    color: #607d94;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.direct-message-label.is-translation {
    margin-top: 0.4rem;
    color: #246895;
}

.direct-message-translation {
    margin-top: 0 !important;
    color: #246895;
}

.direct-message-meta {
    display: block;
    margin-top: 0.45rem;
    color: #7d93a7;
    font-size: 0.61rem;
}

.direct-message-form {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border-top: 1px solid #dcecf8;
}

.direct-message-form textarea {
    width: 100%;
    resize: vertical;
}

.app-shell .direct-message-form button,
.app-shell .location-button {
    min-height: 2.3rem;
    padding: 0.5rem 0.7rem;
    background: #378ac4;
    font-size: 0.74rem;
}

.location-sharing {
    margin-top: auto;
    padding: 0.85rem 1rem;
    border-top: 1px solid #dcecf8;
    background: #edf7ff;
}

.location-sharing h3 {
    margin-bottom: 0.35rem;
}

.location-sharing > p {
    margin: 0;
    color: #72889d;
    font-size: 0.68rem;
    line-height: 1.45;
}

.location-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.6rem 0;
    color: #536f88;
    font-size: 0.68rem;
    line-height: 1.4;
}

.location-consent input {
    margin: 0.1rem 0 0;
    accent-color: #378ac4;
}

.app-shell .location-button {
    width: 100%;
}

.friend-locations {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.4rem;
}

.friend-location {
    color: #2778ae;
    font-size: 0.67rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.location-sharing {
    flex: 0 0 auto;
    margin: 0 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #dcecf8;
    border-radius: 0.65rem;
    background: rgb(237 247 255 / 65%);
}

.location-sharing summary {
    color: #5a7892;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 650;
}

.location-sharing[open] {
    padding-bottom: 0.7rem;
}

.location-status {
    margin: 0.35rem 0 0;
    color: #72889d;
    font-size: 0.65rem;
    line-height: 1.4;
}

.report-user-button {
    display: grid;
    width: 1.8rem;
    min-height: 1.8rem !important;
    flex: 0 0 auto;
    place-items: center;
    padding: 0 !important;
    border: 1px solid #ead3d3 !important;
    border-radius: 50% !important;
    background: #fff5f4 !important;
    color: #ad4b4b !important;
}

.app-shell .block-user-button {
    min-height: 1.8rem !important;
    flex: 0 0 auto;
    padding: 0.3rem 0.55rem !important;
    border: 1px solid #d5e0e5 !important;
    border-radius: 999px !important;
    background: #f3f7f8 !important;
    color: #355a6b !important;
    font-size: 0.65rem !important;
}

.app-shell .block-user-button:hover,
.app-shell .block-user-button[aria-pressed="true"] {
    background: #e6eef0 !important;
}

.report-user-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.moderation-list {
    display: grid;
    gap: 0.6rem;
}

.moderation-entry {
    padding: 0.65rem;
    border: 1px solid #d9e7f2;
    border-radius: 0.65rem;
    background: #fff;
}

.moderation-entry p {
    margin: 0 0 0.4rem;
    color: #536f88;
    font-size: 0.68rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.moderation-entry p + p {
    white-space: pre-wrap;
}

.moderation-actions,
.report-actions {
    display: flex;
    gap: 0.4rem;
}

.moderation-actions {
    flex-wrap: wrap;
}

.moderation-section > h3:not(:first-child) {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #d8e1e4;
}

.moderation-actions button {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.68rem;
}

.report-dialog {
    width: min(28rem, calc(100% - 2rem));
    max-width: none;
    padding: 0;
    border: 1px solid #dbe5ed;
    border-radius: 1rem;
    background: #fff;
    color: #34445a;
    box-shadow: 0 1.5rem 5rem rgb(15 25 40 / 35%);
}

.report-dialog::backdrop {
    background: rgb(12 18 30 / 62%);
    backdrop-filter: blur(3px);
}

.report-form {
    display: grid;
    gap: 0.6rem;
    padding: 1.2rem;
}

.report-form header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.report-form h2 {
    margin: 0;
    font-size: 1.05rem;
}

.report-form > p {
    margin: 0.2rem 0 0.4rem;
    color: #6d7a8a;
    font-size: 0.76rem;
    line-height: 1.5;
}

.report-form label {
    color: #536276;
    font-size: 0.75rem;
    font-weight: 650;
}

.report-form select,
.report-form textarea {
    width: 100%;
    padding: 0.65rem 0.7rem;
    border: 1px solid #d2dbe5;
    border-radius: 0.55rem;
    background: #fbfcfe;
    color: #34445a;
    font: inherit;
    font-size: 0.8rem;
}

.report-form textarea {
    resize: vertical;
}

.report-status {
    min-height: 1.2rem;
    margin: 0;
    color: #a33e3e;
    font-size: 0.72rem;
}

.report-actions {
    justify-content: flex-end;
}

.report-actions button {
    min-height: 2.4rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.55rem;
    font-size: 0.78rem;
}

.report-actions .report-cancel {
    border: 1px solid #d5dee7;
    background: #f5f7fa;
    color: #536276;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-shell.is-expanded {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: flex;
    width: 100%;
    max-width: none;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: #0c1020;
}

.app-shell.is-expanded .topbar {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: 0;
    align-items: flex-start;
    margin: 0;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgb(8 11 22 / 86%), transparent);
}

.app-shell.is-expanded .brand {
    position: static;
    color: #fff;
    text-align: left;
}

.app-shell.is-expanded .brand h1,
.app-shell.is-expanded .brand p {
    color: #fff;
}

.app-shell.is-expanded .brand p {
    opacity: 0.72;
}

.app-shell.is-expanded .controls {
    max-width: min(72%, 850px);
}

.app-shell.is-expanded .translation-control,
.app-shell.is-expanded .voice-control,
.app-shell.is-expanded .signed-in-nickname {
    color: #f3f4fb;
}

.app-shell.is-expanded .secondary-button,
.app-shell.is-expanded .voice-control select {
    border-color: rgb(255 255 255 / 24%);
    background: rgb(19 24 43 / 76%);
    color: #f3f4fb;
    backdrop-filter: blur(12px);
}

.app-shell.is-expanded .connection-status {
    position: absolute;
    z-index: 4;
    top: 4.7rem;
    left: 1.25rem;
    margin: 0;
    color: rgb(245 246 255 / 75%);
    text-shadow: 0 1px 5px #000;
}

.app-shell.is-expanded .call-stage {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;
}

.app-shell.is-expanded .call-workspace {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;
}

.app-shell.is-expanded .remote-video-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #080b14;
    box-shadow: none;
}

.app-shell.is-expanded .remote-video-card .card-heading,
.app-shell.is-expanded .local-video-card .card-heading {
    position: absolute;
    z-index: 1;
    top: 5rem;
    left: 1.25rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    background: rgb(10 13 24 / 50%);
    color: #fff;
    backdrop-filter: blur(10px);
}

.app-shell.is-expanded .card-heading h2 {
    color: #fff;
    font-size: 0.75rem;
}

.app-shell.is-expanded .video-badge {
    border-color: transparent;
    color: #e6e8f4;
}

.app-shell.is-expanded .remote-video-card video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.app-shell.is-expanded .remote-video-card .video-subtitles {
    right: max(1.25rem, 4vw);
    bottom: calc(min(48vh, 390px) + 1.25rem);
    left: max(1.25rem, 4vw);
}

.app-shell.is-expanded.chat-hidden .remote-video-card .video-subtitles {
    bottom: 1.25rem;
}

.app-shell.is-expanded .local-video-card {
    position: absolute;
    z-index: 4;
    top: 5.25rem;
    right: 1.25rem;
    width: clamp(150px, 19vw, 260px);
    overflow: hidden;
    border: 2px solid rgb(255 255 255 / 75%);
    border-radius: 0.9rem;
    background: #11182a;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 35%);
}

.app-shell.is-expanded .local-video-card .card-heading {
    top: 0.55rem;
    left: 0.55rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.65rem;
}

.app-shell.is-expanded .local-video-card video {
    aspect-ratio: 16 / 10;
}

.app-shell.is-expanded .call-chat-panel {
    position: absolute;
    z-index: 3;
    bottom: 1.25rem;
    left: 1.25rem;
    width: min(430px, calc(100% - 2.5rem));
    min-height: 0;
    max-height: min(48vh, 390px);
    margin: 0;
    border-color: rgb(255 255 255 / 20%);
    background: rgb(15 25 41 / 88%);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 30%);
    backdrop-filter: blur(16px);
}

.app-shell.is-expanded .call-chat-header,
.app-shell.is-expanded .call-chat-form {
    border-color: rgb(255 255 255 / 14%);
    background: transparent;
}

.app-shell.is-expanded .call-chat-header h2,
.app-shell.is-expanded .call-chat-message p {
    color: #f3f7fc;
}

.app-shell.is-expanded .call-chat-header p {
    color: #b7c8d8;
}

.app-shell.is-expanded .call-chat-header p.is-connected {
    color: #8fe0bc;
}

.app-shell.is-expanded .call-chat-message {
    border-color: rgb(255 255 255 / 18%);
    background: rgb(255 255 255 / 10%);
}

.app-shell.is-expanded .call-chat-message.is-mine {
    border-color: rgb(119 190 235 / 40%);
    background: rgb(50 116 162 / 40%);
}

.app-shell.is-expanded .call-chat-sender {
    color: #a8d7f7;
}

.app-shell.is-expanded .call-chat-empty {
    color: #c1ccda;
}

.app-shell.is-expanded .call-chat-form textarea {
    border-color: rgb(255 255 255 / 24%);
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.app-shell.is-expanded .call-chat-form textarea::placeholder {
    color: #c1ccda;
}

@media (max-width: 1000px) {
    .auth-layout {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    }

    .welcome-panel {
        padding: 2.5rem;
    }

    .controls {
        gap: 0.5rem;
    }
}

@media (max-width: 760px) {
    .auth-layout {
        grid-template-columns: 1fr;
    }

    .welcome-panel {
        display: none;
    }

    .auth-panel {
        min-height: 100vh;
        padding: 2rem 1.25rem;
        background:
            radial-gradient(ellipse at 50% 0%, #efedff, transparent 35%),
            #fff;
    }

    .auth-card {
        width: min(410px, 100%);
    }

    .mobile-brand {
        display: inline-flex;
        margin-bottom: 3rem;
        color: var(--ink);
    }

    .mobile-brand .brand-logo {
        width: 4.75rem;
        max-height: 3.5rem;
    }

    .mobile-brand {
        margin-right: auto;
        margin-left: auto;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-shell > .topbar {
        align-items: flex-end;
        flex-direction: column;
    }

    .app-shell:not(.is-expanded) > .topbar {
        padding-top: 3.5rem;
    }

    .app-shell .brand {
        position: fixed;
        top: 0.75rem;
        right: 5rem;
        left: auto;
    }

    .controls {
        width: 100%;
        justify-content: flex-start;
    }

    .app-shell.is-expanded .topbar {
        align-items: flex-start;
        flex-direction: row;
    }

    .app-shell.is-expanded .controls {
        max-width: 70%;
    }
}

@media (max-width: 520px) {
    .app-shell {
        padding: 1rem;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .call-chat-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .controls {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-shell:not(.is-expanded) > .topbar {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .app-shell:not(.is-expanded) .brand {
        align-self: center;
    }

    .app-shell:not(.is-expanded) .controls {
        width: 100%;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }

    .app-shell:not(.is-expanded) .remote-video-card {
        grid-column: 1;
    }

    .app-shell.is-expanded .topbar {
        gap: 0.35rem;
        padding: 0.6rem;
    }

    .app-shell.is-expanded .brand {
        gap: 0.4rem;
    }

    .app-shell.is-expanded .app-brand-logo {
        width: 2.5rem;
    }

    .app-shell.is-expanded .controls {
        max-width: 78%;
        flex-direction: row;
        justify-content: flex-end;
    }

    .app-shell.is-expanded .controls > :not(#expandedViewToggle):not(#friendsSidebarToggle):not(#captionsToggle):not(#callChatToggle) {
        display: none;
    }

    .app-shell.is-expanded #expandedViewToggle {
        min-height: 2.2rem;
        padding: 0.45rem 0.65rem;
    }

    .app-shell.is-expanded .connection-status {
        top: 4rem;
        left: 0.7rem;
        font-size: 0.72rem;
    }

    .app-shell.is-expanded .remote-video-card .card-heading {
        top: 5rem;
        left: 0.7rem;
    }

    .app-shell.is-expanded .local-video-card {
        top: 5rem;
        right: 0.7rem;
        width: clamp(120px, 35vw, 170px);
    }

    .app-shell.is-expanded .call-chat-panel {
        bottom: 0.7rem;
        left: 0.7rem;
        width: calc(100% - 1.4rem);
        min-height: 0;
        max-height: 38vh;
    }

    .app-shell.is-expanded .remote-video-card .video-subtitles {
        right: 0.7rem;
        bottom: calc(38vh + 1.1rem);
        left: 0.7rem;
    }

    .app-shell.is-expanded .call-chat-messages {
        min-height: 4rem;
        max-height: 18vh;
    }

    .translation-control {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.call-menu summary:focus-visible,
.call-settings summary:focus-visible {
    outline: 3px solid rgb(57 168 236 / 82%);
    outline-offset: 3px;
}

.app-shell .remote-video-card .card-heading > button:not(.video-fullscreen-toggle) {
    min-width: 2.75rem;
    min-height: 2.75rem !important;
}

.app-shell.is-expanded .call-controls .skip-user-button {
    display: inline-flex !important;
}

.app-shell.is-expanded .call-chat-panel {
    z-index: 45;
}

.app-shell.is-expanded > .topbar {
    padding-right: 8.5rem;
}

.app-shell.topbar-hidden.is-expanded > .topbar {
    padding-block: 0;
}

@media (max-width: 767px) {
    .app-shell:not(.is-expanded) > .topbar {
        padding-right: 7rem;
    }

    .app-shell.is-expanded > .topbar {
        padding-right: 7rem;
    }

    .topbar-toggle,
    .app-shell.is-expanded > .topbar-toggle {
        top: 0.75rem;
        right: 0.75rem;
    }
}

.auth-panel {
    background: #f8f8f9;
}

.app-shell button:not(.secondary-button) {
    background: #687079;
}

.app-shell button:not(.secondary-button):hover {
    background: #4f565e;
}

.app-shell .secondary-button,
.voice-control select,
.filter-control select {
    border-color: #d7dade;
    background: #f8f9fa;
    color: #444a51;
}

.app-shell .secondary-button:hover {
    background: #e9ebee;
}

.filter-control,
.translation-control,
.voice-control {
    color: #5e646c;
}

.signed-in-nickname,
.connection-status {
    color: #747982;
}

.video-card,
.call-chat-panel {
    border-color: #dadddf;
    box-shadow: 0 0.5rem 1.8rem rgb(35 40 46 / 6%);
}

.call-chat-panel,
.call-chat-header,
.friends-sidebar,
.friends-header,
.friend-chat-header,
.nickname-form,
.location-sharing {
    border-color: #dadddf;
    background: #f5f6f7;
}

.call-chat-header h2,
.friends-header h2,
.friend-chat-header h3 {
    color: #343a40;
}

.call-chat-header p,
.friends-header p,
.friend-chat-header p {
    color: #747a82;
}

.call-chat-message,
.call-chat-message.is-mine {
    border-color: #d6d9dd;
    background: #fff;
}

.app-shell .call-chat-message.is-mine {
    background: #e9ebee;
}

.call-chat-sender,
.video-subtitle-label,
.direct-message-translation {
    color: #858b92;
}

.video-subtitles .video-subtitle-translation {
    background: rgb(39 44 50 / 90%);
}

.nickname-form label,
.friend-request-form label,
.location-sharing h3,
.friends-section h3 {
    color: #555c63;
}

.nickname-prefix,
.friend-request-row input,
.direct-message-form textarea,
.call-chat-form textarea {
    border-color: #d2d6da;
    background: #fff;
    color: #3b4148;
}

.nickname-prefix {
    background: #eceef0;
    color: #626970;
}

.nickname-help,
.location-sharing > p,
.location-consent {
    color: #747b83;
}

.app-shell .friend-request-row button,
.app-shell .direct-message-form button,
.app-shell .location-button,
.app-shell .request-accept,
.app-shell .call-chat-form button {
    background: #687079;
}

.app-shell .friend-request-row button:hover,
.app-shell .direct-message-form button:hover,
.app-shell .location-button:hover,
.app-shell .call-chat-form button:hover {
    background: #4f565e;
}

.friend-entry {
    color: #454b52 !important;
}

.app-shell .friend-entry:hover {
    border-color: #d7dade !important;
    background: #e9ebee !important;
}

.friend-avatar {
    background: #e1e4e7;
    color: #5c636b;
}

.friend-identity strong,
.request-entry {
    color: #41474e;
}

.friend-message-action,
.friend-location {
    color: #646b73;
}

.request-entry,
.direct-message,
.direct-message.is-mine {
    border-color: #d8dbdf;
    background: #f0f1f3;
    color: #444a51;
}

.direct-message.is-mine {
    background: #e5e7ea;
}

.brand-symbol {
    background: rgb(255 255 255 / 10%);
    color: #d3d7dc;
}

.eyebrow,
.hero-tagline,
.hero-description,
.welcome-footer {
    color: #d1d5da;
}

.globe {
    color: rgb(216 220 225 / 64%);
}

.globe svg {
    filter: drop-shadow(0 0 20px rgb(216 220 225 / 16%));
}

.orbit {
    border-color: rgb(216 220 225 / 23%);
}

.orbit-point,
.point-two {
    background: #c9ced4;
    box-shadow: 0 0 1rem rgb(201 206 212 / 55%);
}

.floating-note {
    color: #f1f2f4;
}

.note-language {
    background: rgb(201 206 212 / 20%);
    color: #e1e4e8;
}

.call-chat-header,
.friends-header,
.friend-chat-header {
    border-bottom-color: #dadddf;
}

.call-chat-form,
.direct-message-form {
    border-color: #dadddf;
}

.direct-message-meta,
.friend-presence,
.friends-empty,
.nickname-help {
    color: #7a8087;
}

.app-shell.is-expanded {
    background: #080b10;
}

.app-shell.is-expanded > .topbar,
.app-shell.is-expanded > .topbar-toggle,
.app-shell.is-expanded > .friends-float-toggle,
.app-shell.is-expanded > .connection-status,
.app-shell.is-expanded .skip-user-button,
.app-shell.is-expanded .video-fullscreen-toggle {
    display: none !important;
}

.fullscreen-toolbar-toggle {
    position: fixed;
    z-index: 31;
    top: 0.25rem;
    left: 50%;
    display: none;
    width: 3.2rem;
    min-height: 2rem !important;
    padding: 0.15rem 0.6rem !important;
    place-items: center;
    border: 0 !important;
    border-radius: 0 0 0.8rem 0.8rem !important;
    background: rgb(30 34 39 / 16%) !important;
    color: rgb(255 255 255 / 62%) !important;
    opacity: 0.35;
    transform: translateX(-50%);
    transition: opacity 160ms ease, background-color 160ms ease;
}

.app-shell.is-expanded .fullscreen-toolbar-toggle {
    display: grid;
}

.fullscreen-toolbar-toggle:hover,
.fullscreen-toolbar-toggle:focus-visible,
.app-shell.fullscreen-toolbar-open .fullscreen-toolbar-toggle {
    background: rgb(30 34 39 / 72%) !important;
    opacity: 1;
}

.fullscreen-toolbar-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.fullscreen-toolbar-toggle .toolbar-chevron-up,
.app-shell.fullscreen-toolbar-open .fullscreen-toolbar-toggle .toolbar-chevron-down {
    display: none;
}

.app-shell.fullscreen-toolbar-open .fullscreen-toolbar-toggle .toolbar-chevron-up {
    display: block;
}

.fullscreen-toolbar {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 1rem);
    padding: 0.65rem 3.5rem 0.65rem;
    border: 1px solid rgb(255 255 255 / 18%);
    border-top: 0;
    border-radius: 0 0 1rem 1rem;
    background: rgb(21 25 30 / 86%);
    box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 28%);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -110%);
    transition: transform 230ms cubic-bezier(0.2, 0.75, 0.25, 1), opacity 180ms ease, visibility 0s linear 230ms;
    backdrop-filter: blur(16px);
}

.app-shell.fullscreen-toolbar-open .fullscreen-toolbar {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 2.25rem);
    transition-delay: 0s;
}

.fullscreen-toolbar-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.fullscreen-toolbar-controls .toolbar-action,
.fullscreen-toolbar-controls #translationToggle,
.fullscreen-toolbar-controls #captionsToggle,
.fullscreen-toolbar-controls #callChatToggle,
.fullscreen-toolbar-controls .video-tool-toggle {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem !important;
    padding: 0.65rem !important;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 18%) !important;
    border-radius: 0.8rem !important;
    background: rgb(255 255 255 / 9%) !important;
    color: #f7f8f9 !important;
}

.fullscreen-toolbar-controls .toolbar-action:hover,
.fullscreen-toolbar-controls #translationToggle:hover,
.fullscreen-toolbar-controls .video-tool-toggle:hover,
.fullscreen-toolbar-controls .video-tool.is-open .video-tool-toggle {
    background: rgb(255 255 255 / 19%) !important;
}

.fullscreen-toolbar-controls .toolbar-action svg,
.fullscreen-toolbar-controls #translationToggle svg,
.fullscreen-toolbar-controls .video-tool-toggle svg,
.fullscreen-toolbar-controls #callChatToggle svg,
.fullscreen-toolbar-controls #captionsToggle svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.fullscreen-toolbar-controls #translationControl {
    gap: 0;
    flex-wrap: nowrap;
}

.fullscreen-toolbar-controls #translationState {
    display: none;
}

.fullscreen-toolbar-controls .local-video-tools {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    transform: none;
}

.fullscreen-toolbar-controls .video-tool-panel,
.fullscreen-toolbar-controls .video-tool-panel[hidden] {
    top: calc(100% + 0.55rem);
    left: 0;
}

.fullscreen-toolbar-controls #captionsToggle,
.fullscreen-toolbar-controls #callChatToggle {
    gap: 0;
}

.fullscreen-toolbar-controls #captionsToggleLabel,
.fullscreen-toolbar-controls #callChatToggleLabel,
.fullscreen-toolbar-controls #translationToggleLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fullscreen-toolbar-controls .status-light {
    display: none;
}

.fullscreen-toolbar-controls .camera-switch-toggle[hidden] {
    display: none !important;
}

.fullscreen-toolbar-controls .camera-switch-toggle:not([hidden]) {
    display: none;
}

.app-shell.is-expanded .remote-video-card .card-heading {
    top: 1rem;
    left: 1.25rem;
}

.app-shell.is-expanded.fullscreen-toolbar-open .remote-video-card .card-heading {
    top: 4.1rem;
}

.app-shell.is-expanded .local-video-card {
    top: 4.4rem;
    right: 1.25rem;
    left: auto;
    width: clamp(150px, 19vw, 260px);
    height: auto;
    aspect-ratio: 16 / 10;
    border: 2px solid rgb(255 255 255 / 78%);
    border-radius: 0.9rem;
}

.app-shell.is-expanded.fullscreen-toolbar-open .local-video-card {
    top: 6rem;
}

.app-shell.is-expanded .local-video-card video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.app-shell.is-expanded .local-video-card .card-heading {
    top: 0.45rem;
    left: 0.5rem;
    padding: 0.25rem 0.45rem;
}

.app-shell.is-expanded.is-local-featured .local-video-card {
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-shell.is-expanded.is-local-featured .local-video-card video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.app-shell.is-expanded.is-local-featured .remote-video-card {
    z-index: 4;
    inset: 4.4rem 1.25rem auto auto;
    width: clamp(150px, 19vw, 260px);
    height: auto;
    aspect-ratio: 16 / 10;
    border: 2px solid rgb(255 255 255 / 78%);
    border-radius: 0.9rem;
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 35%);
}

.app-shell.is-expanded.is-local-featured.fullscreen-toolbar-open .remote-video-card {
    top: 6rem;
}

.app-shell.is-expanded.is-local-featured .remote-video-card video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.app-shell.is-expanded.is-local-featured .remote-video-card .card-heading {
    top: 0.45rem;
    left: 0.5rem;
}

.app-shell.is-expanded.is-local-featured .remote-video-card .video-subtitles {
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    gap: 0.2rem;
}

.app-shell.is-expanded.is-local-featured .remote-video-card .video-subtitles p {
    padding: 0.25rem 0.4rem;
    font-size: 0.65rem;
}

.app-shell.is-expanded.is-local-featured .call-chat-panel {
    z-index: 5;
}

@media (max-width: 700px) {
    .fullscreen-toolbar {
        max-width: calc(100vw - 0.5rem);
        padding: 0.55rem 0.35rem;
    }

    .fullscreen-toolbar-controls {
        gap: 0.3rem;
    }

    .fullscreen-toolbar-controls .toolbar-action,
    .fullscreen-toolbar-controls #translationToggle,
    .fullscreen-toolbar-controls #captionsToggle,
    .fullscreen-toolbar-controls #callChatToggle,
    .fullscreen-toolbar-controls .video-tool-toggle {
        width: 2.45rem;
        min-width: 2.45rem;
        min-height: 2.45rem !important;
        padding: 0.55rem !important;
        border-radius: 0.7rem !important;
    }

    .fullscreen-toolbar-controls .local-video-tools {
        gap: 0.3rem;
    }

    .fullscreen-toolbar-controls .camera-switch-toggle:not([hidden]) {
        display: grid;
    }

    .app-shell.is-expanded .local-video-card {
        top: 4.2rem;
        right: 0.6rem;
        width: clamp(105px, 30vw, 150px);
    }

    .app-shell.is-expanded.fullscreen-toolbar-open .local-video-card {
        top: 6.1rem;
    }

    .app-shell.is-expanded.is-local-featured .remote-video-card {
        top: 4.2rem;
        right: 0.6rem;
        width: clamp(105px, 30vw, 150px);
    }

    .app-shell.is-expanded.is-local-featured.fullscreen-toolbar-open .remote-video-card {
        top: 6.1rem;
    }

    .app-shell.is-expanded.is-local-featured.fullscreen-toolbar-open .local-video-card {
        top: 0;
    }

    .app-shell.is-expanded .remote-video-card .card-heading {
        top: 0.75rem;
        left: 0.6rem;
    }

    .app-shell.is-expanded.fullscreen-toolbar-open .remote-video-card .card-heading {
        top: 6.15rem;
    }
}

@media (max-width: 420px) {
    .fullscreen-toolbar-controls {
        gap: 0.15rem;
    }

    .fullscreen-toolbar-controls .toolbar-action,
    .fullscreen-toolbar-controls #translationToggle,
    .fullscreen-toolbar-controls #captionsToggle,
    .fullscreen-toolbar-controls #callChatToggle,
    .fullscreen-toolbar-controls .video-tool-toggle {
        width: 2.2rem;
        min-width: 2.2rem;
        min-height: 2.2rem !important;
        padding: 0.45rem !important;
    }
}

.app-shell.is-expanded.is-local-featured .remote-video-card .video-subtitles {
    position: fixed;
    z-index: 6;
    right: max(1.25rem, 4vw);
    bottom: calc(min(48vh, 390px) + 1.25rem);
    left: max(1.25rem, 4vw);
}

.app-shell.is-expanded.is-local-featured.chat-hidden .remote-video-card .video-subtitles {
    bottom: 1.25rem;
}

.app-shell.is-expanded.is-local-featured .remote-video-card .video-subtitles p {
    max-width: min(760px, 100%);
    padding: 0.5rem 0.85rem;
    font-size: clamp(0.78rem, 1.6vw, 1rem);
}

@media (max-width: 700px) {
    .app-shell.is-expanded.is-local-featured .remote-video-card .video-subtitles {
        right: 0.7rem;
        bottom: calc(38vh + 1.1rem);
        left: 0.7rem;
    }

    .app-shell.is-expanded.is-local-featured.chat-hidden .remote-video-card .video-subtitles {
        bottom: 0.8rem;
    }

    .app-shell.is-expanded.is-local-featured .remote-video-card .video-subtitles p {
        padding: 0.35rem 0.55rem;
        font-size: clamp(0.72rem, 2.8vw, 0.9rem);
    }
}

.friends-float-toggle {
    position: fixed;
    z-index: 40;
    top: 50%;
    left: 0.55rem;
    display: grid;
    width: 3rem;
    min-height: 3rem !important;
    padding: 0.65rem !important;
    place-items: center;
    border: 1px solid rgb(88 96 105 / 16%) !important;
    border-radius: 50% !important;
    background: rgb(245 246 247 / 78%) !important;
    color: #4f565e !important;
    box-shadow: 0 0.3rem 1rem rgb(35 40 46 / 12%);
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
}

.friends-float-toggle:hover,
.app-shell.friends-open .friends-float-toggle {
    background: #e2e5e8 !important;
}

.friends-float-toggle svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.friend-request-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    display: grid;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.2rem;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #d84a4a;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

.app-shell.friends-open .friends-float-toggle {
    z-index: 1001;
}

.app-shell.is-expanded #signOutButton {
    display: none;
}

.local-video-card {
    position: relative;
}

.video-fullscreen-toggle {
    position: absolute;
    z-index: 3;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    width: 2.5rem;
    min-height: 2.5rem !important;
    padding: 0.6rem !important;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 28%) !important;
    border-radius: 0.75rem !important;
    background: rgb(30 34 39 / 38%) !important;
    color: #fff !important;
    opacity: 0.5;
    transition: opacity 160ms ease, background-color 160ms ease, transform 150ms ease;
    backdrop-filter: blur(8px);
}

.video-card:hover .video-fullscreen-toggle,
.video-fullscreen-toggle:focus-visible,
.video-fullscreen-toggle.is-fullscreen {
    opacity: 1;
}

.video-fullscreen-toggle:hover {
    background: rgb(30 34 39 / 72%) !important;
}

.video-fullscreen-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.video-fullscreen-toggle .collapse-icon,
.video-fullscreen-toggle.is-fullscreen .expand-icon {
    display: none;
}

.video-fullscreen-toggle.is-fullscreen .collapse-icon {
    display: block;
}

.local-video-tools {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 0.75rem;
    display: grid;
    gap: 0.55rem;
    transform: translateY(-50%);
}

.video-tool {
    position: relative;
}

.video-tool-toggle {
    display: grid;
    width: 2.65rem;
    min-height: 2.65rem !important;
    padding: 0.65rem !important;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 36%) !important;
    border-radius: 0.8rem !important;
    background: rgb(35 39 44 / 40%) !important;
    color: #fff !important;
    box-shadow: 0 0.25rem 0.8rem rgb(0 0 0 / 14%);
    backdrop-filter: blur(8px);
}

.video-tool-toggle:hover,
.video-tool.is-open .video-tool-toggle {
    background: rgb(35 39 44 / 78%) !important;
}

.video-tool-toggle svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.video-tool-panel,
.video-tool-panel[hidden] {
    position: absolute;
    top: 0;
    left: calc(100% + 0.55rem);
    z-index: 5;
    display: grid;
    width: max-content;
    max-width: min(16rem, 55vw);
    gap: 0.45rem;
    padding: 0.7rem;
    border: 1px solid rgb(255 255 255 / 46%);
    border-radius: 0.8rem;
    background: rgb(247 248 249 / 94%);
    color: #3f454c;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 20%);
    font-size: 0.75rem;
    font-weight: 700;
    backdrop-filter: blur(14px);
}

.video-tool-panel[hidden] {
    display: none !important;
}

.video-tool-panel select {
    width: 100%;
    min-width: 10rem;
    min-height: 2.25rem;
    padding: 0.4rem 1.6rem 0.4rem 0.6rem;
    border: 1px solid #d3d7db;
    border-radius: 0.55rem;
    background: #fff;
    color: #343a40;
    font-size: 0.75rem;
}

.skip-user-button {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    display: inline-flex;
    min-height: 2.8rem !important;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem !important;
    border: 2px solid rgb(255 255 255 / 82%) !important;
    border-radius: 999px !important;
    background: #d66b45 !important;
    color: #fff !important;
    box-shadow: 0 0.35rem 1.25rem rgb(40 28 22 / 32%);
    transform: translate(-50%, -50%);
}

.skip-user-button:hover {
    background: #b95331 !important;
}

.skip-user-button span {
    font-size: 1.15rem;
    line-height: 1;
}

.video-card:fullscreen {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: #111418;
}

.video-card:fullscreen video {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;
    aspect-ratio: auto;
    object-fit: contain;
}

.video-card:fullscreen .card-heading {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 999px;
    background: rgb(29 33 38 / 46%);
    color: #fff;
    backdrop-filter: blur(8px);
}

.video-card:fullscreen .card-heading h2 {
    color: #fff;
}

.video-card:fullscreen .local-video-tools {
    left: 1rem;
}

@media (max-width: 520px) {
    .friends-float-toggle {
        left: 0.35rem;
        width: 2.7rem;
        min-height: 2.7rem !important;
    }

    .app-shell:not(.is-expanded) .call-stage {
        display: flex;
        flex-direction: column;
    }

    .app-shell:not(.is-expanded) .remote-video-card {
        order: 3;
    }

    .app-shell:not(.is-expanded) .skip-user-button {
        position: relative;
        top: auto;
        left: 50%;
        order: 2;
        align-self: flex-start;
        margin: 0.25rem 0;
        transform: translateX(-50%);
    }

    .app-shell:not(.is-expanded) .local-video-card {
        order: 1;
    }

    .app-shell:not(.is-expanded) .call-chat-panel {
        order: 4;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .app-shell:not(.is-expanded) .controls {
        align-items: center;
        flex-flow: row wrap;
        justify-content: center;
        gap: 0.45rem;
    }

    .app-shell:not(.is-expanded) .controls .translation-control {
        width: 100%;
        justify-content: center;
        flex-wrap: nowrap;
    }

    .app-shell:not(.is-expanded) .controls #translationToggle,
    .app-shell:not(.is-expanded) .controls #captionsToggle,
    .app-shell:not(.is-expanded) .controls #callChatToggle {
        display: grid;
        width: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem !important;
        padding: 0.65rem !important;
        place-items: center;
    }

    .app-shell:not(.is-expanded) .controls #translationToggle svg,
    .app-shell:not(.is-expanded) .controls #captionsToggle svg,
    .app-shell:not(.is-expanded) .controls #callChatToggle svg {
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
    }

    .app-shell:not(.is-expanded) .controls #translationToggleLabel,
    .app-shell:not(.is-expanded) .controls #captionsToggleLabel,
    .app-shell:not(.is-expanded) .controls #callChatToggleLabel {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .app-shell:not(.is-expanded) .local-video-tools {
        top: auto;
        bottom: 0.75rem;
        left: 0.75rem;
        gap: 0.4rem;
        transform: none;
    }

    .app-shell:not(.is-expanded) .video-tool-toggle {
        width: 2.8rem;
        min-height: 2.8rem !important;
        padding: 0.7rem !important;
    }

    .app-shell:not(.is-expanded) .video-tool-panel,
    .app-shell:not(.is-expanded) .video-tool-panel[hidden] {
        top: auto;
        bottom: calc(100% + 0.45rem);
        left: 0;
        max-width: min(16rem, calc(100vw - 2rem));
    }

    .app-shell:not(.is-expanded) .video-tool-panel select {
        min-width: 0;
        max-width: 100%;
    }
}

@media (min-width: 701px) {
    .app-shell .controls #translationToggle,
    .app-shell .controls #captionsToggle,
    .app-shell .controls #callChatToggle {
        display: inline-flex;
        min-height: 2.45rem;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.55rem 0.8rem;
        white-space: nowrap;
    }

    .app-shell .controls #translationToggle svg,
    .app-shell .controls #captionsToggle svg,
    .app-shell .controls #callChatToggle svg {
        display: block;
        width: 1.15rem;
        height: 1.15rem;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
    }

    .app-shell .controls #translationToggleLabel,
    .app-shell .controls #captionsToggleLabel,
    .app-shell .controls #callChatToggleLabel {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
    }

    .app-shell .controls .translation-control {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .app-shell .call-stage .skip-user-button {
        position: relative;
        z-index: 1;
        top: auto;
        left: auto;
        grid-column: 1 / -1;
        justify-self: center;
        margin: 0.15rem 0 0;
        transform: none;
    }

    .app-shell .call-stage .skip-user-button:hover {
        transform: translateY(-1px);
    }

    .app-shell .remote-video-card .video-fullscreen-toggle {
        display: none;
    }

    .app-shell .friends-float-toggle {
        right: 0.55rem;
        left: auto;
    }
}

@media (min-width: 701px) {
    :root {
        --ink: #263843;
        --muted: #647783;
        --violet: #2183c7;
        --violet-dark: #177d68;
        --line: #d3dde1;
        --paper: #f9fbfc;
        --canvas: #e9eef0;
        --accent-blue: #2183d1;
        --accent-green: #20a879;
        --accent-gradient: linear-gradient(120deg, var(--accent-blue), var(--accent-green));
    }

    body {
        background: var(--canvas);
    }

    .welcome-panel {
        background:
            radial-gradient(ellipse at 75% 78%, rgb(32 168 121 / 20%), transparent 37%),
            radial-gradient(ellipse at 10% 12%, rgb(33 131 209 / 24%), transparent 40%),
            linear-gradient(145deg, #183d58, #175947);
    }

    .app-shell:not(.is-expanded) {
        background: #e9eef0;
    }

    .app-shell > .topbar {
        justify-content: flex-end;
        padding-right: 8.5rem;
        padding-left: 12rem;
    }

    .app-shell.is-expanded > .topbar {
        justify-content: space-between;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .app-shell .brand {
        right: auto;
        left: 1.25rem;
    }

    .app-shell > .topbar-toggle {
        top: 1rem;
        min-height: 1.8rem;
        padding: 0.3rem 0.6rem;
        border-color: rgb(82 111 125 / 20%);
        background: rgb(248 251 252 / 68%);
        color: #426272;
        font-size: 0.7rem;
        opacity: 0.66;
        transition: top 220ms ease, opacity 160ms ease, background-color 160ms ease;
        backdrop-filter: blur(8px);
    }

    .app-shell > .topbar-toggle:hover,
    .app-shell > .topbar-toggle:focus-visible {
        background: rgb(248 251 252 / 92%);
        opacity: 1;
    }

    .app-shell.topbar-hidden > .topbar-toggle {
        top: 0.25rem;
    }

    .app-shell .controls #expandedViewToggle {
        display: none;
    }

    .primary-button,
    .app-shell .controls #translationToggle,
    .app-shell .controls #captionsToggle,
    .app-shell .controls #callChatToggle,
    .app-shell .friend-request-row button,
    .app-shell .direct-message-form button,
    .app-shell .location-button,
    .app-shell .request-accept,
    .app-shell .call-chat-form button,
    .app-shell .skip-user-button {
        border-color: transparent !important;
        background: var(--accent-gradient) !important;
        color: #fff !important;
    }

    .primary-button:hover,
    .app-shell .controls #translationToggle:hover,
    .app-shell .controls #captionsToggle:hover,
    .app-shell .controls #callChatToggle:hover,
    .app-shell .friend-request-row button:hover,
    .app-shell .direct-message-form button:hover,
    .app-shell .location-button:hover,
    .app-shell .request-accept:hover,
    .app-shell .call-chat-form button:hover,
    .app-shell .skip-user-button:hover {
        background: linear-gradient(120deg, #196eaf, #16865f) !important;
    }

    .app-shell .secondary-button {
        border-color: #d3e0e4;
        background: #f8fbfc;
        color: #355a6b;
    }

    .app-shell .secondary-button:hover {
        background: #edf5f5;
    }

    .app-shell .controls #translationToggleLabel {
        font-size: 0;
    }

    .app-shell .controls #translationToggleLabel::after {
        content: "Tradução por IA";
        font-size: 0.8rem;
    }

    .app-shell .status-light {
        background: #9aa8ad;
    }

    .app-shell .status-light.is-active {
        background: var(--accent-green);
        box-shadow: 0 0 0.6rem rgb(32 168 121 / 40%);
    }

    .app-shell .friends-float-toggle,
    .app-shell .video-tool-toggle,
    .app-shell .icon-button,
    .app-shell .controls #captionsToggle,
    .app-shell .controls #callChatToggle {
        border-color: transparent !important;
        background: var(--accent-gradient) !important;
        color: #fff !important;
    }

    .app-shell .friends-float-toggle:hover,
    .app-shell.friends-open .friends-float-toggle,
    .app-shell .video-tool-toggle:hover,
    .app-shell .video-tool.is-open .video-tool-toggle,
    .app-shell .icon-button:hover {
        background: linear-gradient(120deg, #196eaf, #16865f) !important;
        color: #fff !important;
    }

    .app-shell .skip-user-button {
        box-shadow: 0 0.35rem 1.25rem rgb(24 98 105 / 30%);
    }

    .app-shell.is-expanded .fullscreen-toolbar-toggle {
        top: auto;
        bottom: 0.25rem;
        border-radius: 0.8rem 0.8rem 0 0 !important;
        background: rgb(20 83 99 / 34%) !important;
        transform: translateX(-50%) rotate(180deg);
    }

    .app-shell.is-expanded .fullscreen-toolbar-toggle:hover,
    .app-shell.is-expanded .fullscreen-toolbar-toggle:focus-visible,
    .app-shell.is-expanded.fullscreen-toolbar-open .fullscreen-toolbar-toggle {
        background: rgb(22 111 100 / 88%) !important;
        transform: translateX(-50%) rotate(0);
    }

    .app-shell.is-expanded .fullscreen-toolbar {
        top: auto;
        bottom: 0;
        padding: 0.7rem 1rem;
        border: 1px solid rgb(117 203 194 / 42%);
        border-bottom: 0;
        border-radius: 1rem 1rem 0 0;
        background: linear-gradient(120deg, rgb(20 52 75 / 94%), rgb(18 78 66 / 94%));
        box-shadow: 0 -0.8rem 2rem rgb(0 0 0 / 24%);
        transform: translate(-50%, 110%);
    }

    .app-shell.is-expanded.fullscreen-toolbar-open .fullscreen-toolbar {
        transform: translate(-50%, -2.25rem);
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls {
        gap: 0.55rem;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #callChatToggle {
        order: 1;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #captionsToggle {
        order: 2;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #fullscreenExitToggle {
        order: 3;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #translationControl {
        order: 4;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls .local-video-tools {
        order: 5;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #videoSwapToggle {
        order: 6;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #translationToggleLabel {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
        font-size: 0;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #translationToggleLabel::after {
        content: "Tradução por IA";
        font-size: 0.76rem;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls .status-light {
        display: block;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #captionsToggle,
    .app-shell.is-expanded .fullscreen-toolbar-controls #callChatToggle {
        display: inline-flex;
        width: auto;
        min-width: 0;
        gap: 0.5rem;
        padding: 0.65rem 0.8rem !important;
        background: var(--accent-gradient) !important;
        white-space: nowrap;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #captionsToggleLabel,
    .app-shell.is-expanded .fullscreen-toolbar-controls #callChatToggleLabel {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        font-size: 0.76rem;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #fullscreenExitToggle {
        display: inline-flex;
        width: auto;
        min-width: 0;
        align-items: center;
        gap: 0.45rem;
        padding: 0.65rem 0.8rem !important;
        background: var(--accent-gradient) !important;
        white-space: nowrap;
    }

    .app-shell.is-expanded .fullscreen-toolbar-controls #fullscreenExitToggle .sr-only {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        font-size: 0.76rem;
    }

    .app-shell > .friends-float-toggle {
        right: 0.55rem;
        left: auto;
    }

    .app-shell.friends-open > .friends-float-toggle {
        display: none !important;
        opacity: 0;
        pointer-events: none;
    }
}

.app-shell {
    --call-ink: #f2f7fb;
    --call-muted: #a7bac8;
    --call-surface: rgb(17 33 48 / 88%);
    --call-line: rgb(211 229 242 / 16%);
    --call-blue: #39a8ec;
    --call-green: #35d0a0;
    --call-gradient: linear-gradient(125deg, #258dd2, #24b88e);
    color-scheme: dark;
}

.app-shell:not([hidden]) {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: #0c1824;
    color: var(--call-ink);
}

.app-shell > .topbar,
.app-shell.is-expanded > .topbar {
    position: relative;
    z-index: 40;
    display: flex;
    width: 100%;
    min-height: calc(56px + env(safe-area-inset-top));
    max-height: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0;
    padding: calc(env(safe-area-inset-top) + 0.35rem) 0.75rem 0.35rem;
    overflow: visible;
    border-bottom: 1px solid var(--call-line);
    background: rgb(10 25 38 / 78%);
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-shell .brand {
    position: static;
    z-index: auto;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.55rem;
    color: var(--call-ink);
}

.app-shell .app-brand-logo {
    width: 2rem;
    max-height: 2rem;
}

.app-shell .brand h1 {
    color: var(--call-ink);
    font-size: 0.98rem;
}

.app-shell .brand p {
    max-width: 12rem;
    overflow: hidden;
    color: var(--call-muted);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.call-header-tools {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
}

.app-shell .translation-control {
    flex-wrap: nowrap;
    gap: 0.4rem;
    color: var(--call-ink);
    font-size: 0.7rem;
    white-space: nowrap;
}

.app-shell .translation-control .status-light {
    flex: 0 0 auto;
    background: #7d8b98;
}

.app-shell .translation-control .status-light.is-active {
    background: var(--call-green);
    box-shadow: 0 0 0.7rem rgb(53 208 160 / 48%);
    animation: translation-pulse 2.2s ease-in-out infinite;
}

.app-shell .translation-control #translationToggle {
    display: grid;
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem !important;
    padding: 0.55rem !important;
    place-items: center;
    border: 1px solid var(--call-line) !important;
    border-radius: 50% !important;
    background: rgb(238 247 252 / 9%) !important;
    color: var(--call-ink) !important;
}

.app-shell .translation-control #translationToggle svg,
.call-control-button svg,
.call-menu summary svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.app-shell .translation-control #translationToggleLabel,
.app-shell .signed-in-nickname {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.call-menu {
    position: relative;
    flex: 0 0 auto;
}

.call-menu summary,
.call-settings summary {
    display: grid;
    width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    border: 1px solid var(--call-line);
    border-radius: 50%;
    background: rgb(238 247 252 / 9%);
    color: var(--call-ink);
    cursor: pointer;
    list-style: none;
    transition: background 180ms ease, transform 180ms ease;
}

.call-menu summary::-webkit-details-marker,
.call-settings summary::-webkit-details-marker {
    display: none;
}

.call-menu summary:active,
.call-settings summary:active {
    transform: scale(0.96);
}

.call-menu-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.6rem);
    right: 0;
    display: grid;
    width: min(15rem, calc(100vw - 1.5rem));
    gap: 0.25rem;
    padding: 0.45rem;
    border: 1px solid var(--call-line);
    border-radius: 1rem;
    background: #152a3a;
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 35%);
}

.app-shell .call-menu-panel .menu-action {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--call-ink);
    text-align: left;
}

.app-shell .call-menu-panel .menu-action:hover {
    background: rgb(255 255 255 / 8%);
}

.app-shell .call-menu-panel .menu-action svg {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-shell .call-menu-panel .sign-out-action {
    margin-top: 0.2rem;
    border-top: 1px solid var(--call-line);
    border-radius: 0;
    color: #ffb1ad;
}

.app-shell.topbar-hidden > .topbar {
    min-height: calc(3.2rem + env(safe-area-inset-top));
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.app-shell.topbar-hidden > .topbar .brand,
.app-shell.topbar-hidden > .topbar .translation-control,
.app-shell.topbar-hidden > .topbar .signed-in-nickname {
    display: none;
}

.app-shell.topbar-hidden > .topbar .call-header-tools {
    width: 100%;
    justify-content: flex-end;
}

.app-shell .call-workspace {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

.app-shell .call-stage {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background: #101d2b;
}

.app-shell .video-card {
    border: 0;
    border-radius: 0;
    background: #101d2b;
    box-shadow: none;
}

.app-shell .remote-video-card {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    overflow: hidden;
    background: linear-gradient(145deg, #10243a, #20152f);
}

.app-shell .remote-video-card video {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
    transition: opacity 180ms ease, filter 180ms ease;
}

.app-shell .local-video-card {
    position: absolute;
    z-index: 8;
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
    display: block;
    width: 6rem;
    height: 8rem;
    overflow: hidden;
    border: 2px solid rgb(255 255 255 / 90%);
    border-radius: 1rem;
    background: #182b3c;
    box-shadow: 0 0.65rem 1.8rem rgb(0 0 0 / 32%);
    touch-action: none;
    cursor: grab;
}

.app-shell .local-video-card.is-dragging {
    z-index: 12;
    cursor: grabbing;
}

.app-shell .local-video-card video {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
    transform: scaleX(-1);
}

.app-shell .local-video-card .card-heading {
    display: none;
}

.video-self-label {
    position: absolute;
    z-index: 3;
    bottom: 0.45rem;
    left: 0.5rem;
    padding: 0.2rem 0.4rem;
    border-radius: 999px;
    background: rgb(7 17 26 / 72%);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    pointer-events: none;
}

.app-shell .local-video-card .video-fullscreen-toggle {
    display: none !important;
}

.app-shell .remote-video-card .card-heading {
    position: absolute;
    z-index: 5;
    top: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    min-width: 0;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 0.8rem;
    background: rgb(8 20 31 / 56%);
    color: #fff;
    backdrop-filter: blur(10px);
}

.app-shell .remote-video-card .card-heading h2 {
    min-width: 0;
    margin: 0;
    color: #fff;
    font-size: 0.78rem;
}

.app-shell .remote-video-card .video-badge,
.app-shell .local-video-card .video-badge {
    margin-left: auto;
    border-color: rgb(255 255 255 / 18%);
    color: #e7f2f8;
}

.app-shell .remote-video-card .video-fullscreen-toggle {
    position: absolute;
    z-index: 6;
    top: 4rem;
    right: auto;
    left: 0.75rem;
    display: grid;
    width: 2.75rem;
    min-height: 2.75rem !important;
    padding: 0.65rem !important;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 20%) !important;
    border-radius: 50% !important;
    background: rgb(8 20 31 / 56%) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
}

.app-shell .remote-video-card .video-fullscreen-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
}

.app-shell .remote-video-card .video-fullscreen-toggle .collapse-icon,
.app-shell.is-expanded .remote-video-card .video-fullscreen-toggle .expand-icon {
    display: none;
}

.app-shell.is-expanded .remote-video-card .video-fullscreen-toggle .collapse-icon {
    display: block;
}

.app-shell .connection-status {
    position: absolute;
    z-index: 7;
    top: 0.85rem;
    left: 50%;
    max-width: calc(100% - 11rem);
    margin: 0;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    background: rgb(6 17 27 / 62%);
    color: #eef6fb;
    font-size: 0.68rem;
    line-height: 1.35;
    text-align: center;
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.waiting-state {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.65rem;
    padding: 1.5rem;
    background: linear-gradient(145deg, rgb(13 33 54 / 98%), rgb(34 24 52 / 98%));
    color: #fff;
    text-align: center;
    pointer-events: none;
}

.waiting-state[hidden] {
    display: none !important;
}

.waiting-state h2 {
    max-width: 18rem;
    margin: 0.25rem 0 0;
    font-size: clamp(1.05rem, 4vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.waiting-state p {
    margin: 0;
    color: #b7c8d6;
    font-size: 0.82rem;
}

.waiting-logo {
    position: relative;
    z-index: 1;
    width: 3.4rem;
    height: 3.4rem;
    object-fit: contain;
    filter: drop-shadow(0 0 1rem rgb(60 187 210 / 36%));
}

.waiting-rings,
.waiting-rings::before,
.waiting-rings::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgb(69 190 214 / 42%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: waiting-wave 2.4s ease-out infinite;
}

.waiting-rings::before,
.waiting-rings::after {
    content: "";
}

.waiting-rings::before {
    animation-delay: 0.8s;
}

.waiting-rings::after {
    animation-delay: 1.6s;
}

.app-shell.is-waiting .remote-video-card video {
    opacity: 0;
}

.app-shell.is-waiting .remote-video-card .card-heading,
.app-shell.is-waiting .remote-video-card .video-fullscreen-toggle {
    visibility: hidden;
}

.app-shell.is-waiting .connection-status {
    visibility: hidden;
}

.app-shell .video-subtitles {
    z-index: 6;
    right: 0.75rem;
    bottom: 0.8rem;
    left: 0.75rem;
    display: grid;
    max-width: 48rem;
    justify-items: stretch;
    gap: 0.2rem;
    margin: 0 auto;
    text-align: left;
}

.app-shell .video-subtitles p,
.app-shell .video-subtitles .video-subtitle-translation {
    display: -webkit-box;
    max-width: 100%;
    max-height: calc(1.35em * 3 + 0.6rem);
    padding: 0.35rem 0.65rem;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 0.75rem;
    background: rgb(0 0 0 / 60%);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.app-shell .video-subtitles .video-subtitle-translation {
    order: 0;
    font-size: 0.94rem;
}

.app-shell .video-subtitles .video-subtitle-original {
    order: 1;
    color: #d3d9de;
    font-size: 0.72rem;
}

.app-shell .video-subtitle-label {
    display: none;
}

.app-shell .remote-friend-status:not(:empty) {
    z-index: 7;
    top: 3.7rem;
    left: 0.75rem;
    max-width: calc(100% - 1.5rem);
}

.app-shell .call-chat-panel {
    position: fixed;
    z-index: 45;
    right: 0.4rem;
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
    left: 0.4rem;
    display: flex;
    width: auto;
    height: min(70dvh, var(--call-viewport-height, 70dvh));
    min-height: 15rem;
    max-height: calc(var(--call-viewport-height, 100dvh) - 5rem);
    flex-direction: column;
    margin: 0;
    border: 1px solid rgb(211 229 242 / 18%);
    border-radius: 1.75rem 1.75rem 1rem 1rem;
    background: #f5f8fa;
    color: #253646;
    box-shadow: 0 0 2.5rem rgb(0 0 0 / 38%);
    transform: translateY(calc(100% + 1rem));
    transition: transform 240ms ease-out;
    pointer-events: none;
}

.app-shell .call-chat-panel[hidden] {
    display: none !important;
}

.app-shell:not(.chat-hidden) .call-chat-panel:not([hidden]) {
    transform: translateY(calc(0px - max(env(safe-area-inset-bottom), var(--call-keyboard-inset, 0px))));
    pointer-events: auto;
}

.app-shell .call-chat-header {
    position: relative;
    padding: 1.4rem 1rem 0.75rem;
    border-bottom-color: #e0e7eb;
    border-radius: 1.7rem 1.7rem 0 0;
    background: #f5f8fa;
}

.app-shell .call-chat-header::before {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 2.5rem;
    height: 0.22rem;
    border-radius: 999px;
    background: #bdc9d0;
    content: "";
    transform: translateX(-50%);
}

.app-shell .call-chat-header h2 {
    color: #243a4b;
}

.app-shell .call-chat-header p {
    color: #637585;
}

.app-shell .call-chat-messages {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overscroll-behavior: contain;
}

.app-shell .call-chat-form {
    flex: 0 0 auto;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    border-top-color: #e0e7eb;
    background: #f5f8fa;
}

.app-shell .call-chat-form textarea {
    max-height: 5rem;
    border-color: #d4dfe5;
    background: #fff;
    color: #263b4c;
}

.app-shell .call-chat-form button {
    min-width: 2.75rem;
    min-height: 2.75rem !important;
    border-radius: 50% !important;
    background: var(--call-gradient) !important;
}

.call-controls {
    position: relative;
    z-index: 35;
    display: flex;
    min-height: calc(5.5rem + env(safe-area-inset-bottom));
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: clamp(0.15rem, 1.6vw, 0.65rem);
    padding: 0.55rem max(0.5rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(0.5rem, env(safe-area-inset-left));
    border-top: 1px solid var(--call-line);
    border-radius: 1.75rem 1.75rem 0 0;
    background: rgb(12 27 40 / 92%);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-shell .call-control-button {
    position: relative;
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem !important;
    flex: 0 0 auto;
    padding: 0.6rem !important;
    place-items: center;
    border: 1px solid var(--call-line) !important;
    border-radius: 50% !important;
    background: rgb(238 247 252 / 10%) !important;
    color: var(--call-ink) !important;
    transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.app-shell .call-control-button:hover,
.app-shell .call-control-button:focus-visible {
    border-color: rgb(255 255 255 / 28%) !important;
    background: rgb(238 247 252 / 18%) !important;
}

.app-shell .call-control-button:active,
.app-shell .skip-user-button:active {
    transform: scale(0.96);
}

.app-shell .call-control-button.is-off {
    border-color: rgb(255 255 255 / 12%) !important;
    background: rgb(151 66 66 / 84%) !important;
}

.call-settings {
    position: relative;
    flex: 0 0 auto;
}

.settings-panel {
    position: absolute;
    z-index: 55;
    bottom: calc(100% + 0.75rem);
    left: 50%;
    width: min(19rem, calc(100vw - 1.5rem));
    padding: 0.8rem;
    border: 1px solid var(--call-line);
    border-radius: 1rem;
    background: #152a3a;
    box-shadow: 0 1rem 2rem rgb(0 0 0 / 35%);
    transform: translateX(-50%);
}

.settings-panel .local-video-tools {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transform: none;
}

.settings-panel .video-tool {
    position: relative;
}

.settings-panel .video-tool-panel,
.settings-panel .video-tool-panel[hidden] {
    position: absolute;
    z-index: 2;
    bottom: calc(100% + 0.6rem);
    top: auto;
    left: 50%;
    display: flex;
    width: min(16rem, calc(100vw - 2rem));
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--call-line);
    border-radius: 0.85rem;
    background: #1b3447;
    color: var(--call-ink);
    transform: translateX(-50%);
}

.settings-panel .video-tool-panel[hidden] {
    display: none !important;
}

.settings-panel .video-tool-panel select {
    width: 100%;
    max-width: none;
    min-height: 2.75rem;
    border-color: #40586a;
    background: #102130;
    color: #fff;
}

.app-shell .skip-user-button {
    position: relative;
    z-index: 2;
    top: auto;
    left: auto;
    display: inline-flex;
    width: auto;
    min-width: 5.5rem;
    min-height: 3.5rem !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(120deg, #d8783f, #f07968) !important;
    color: #fff !important;
    box-shadow: 0 0.45rem 1.25rem rgb(205 103 64 / 28%);
    font-size: 0.8rem;
    transform: none;
    white-space: nowrap;
}

.app-shell .skip-user-button:hover {
    background: linear-gradient(120deg, #c56432, #df6659) !important;
}

.app-shell .skip-user-button span:first-child {
    font-size: 1.25rem;
    line-height: 1;
}

.call-chat-unread {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    display: grid;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.2rem;
    place-items: center;
    border: 2px solid #0c1b28;
    border-radius: 999px;
    background: #ef5c62;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
}

.call-chat-unread[hidden] {
    display: none !important;
}

.app-shell.is-switching .remote-video-card video {
    opacity: 0;
    filter: blur(8px);
}

.app-shell .friends-float-toggle {
    position: static;
    display: inline-flex;
}

.app-shell .friends-sidebar {
    z-index: 90;
}

.app-shell .friends-sidebar-backdrop {
    z-index: 89;
}

@keyframes translation-pulse {
    50% {
        box-shadow: 0 0 0 0.28rem rgb(53 208 160 / 12%);
    }
}

@keyframes waiting-wave {
    0% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(0.58);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.55);
    }
}

@media (max-width: 380px) {
    .app-shell .translation-control #translationState {
        display: none;
    }
}

@media (max-width: 700px) {
    .app-shell .call-stage {
        border-radius: 1.5rem 1.5rem 0 0;
    }

    .app-shell .remote-video-card {
        border-radius: inherit;
    }

    .app-shell .local-video-card {
        width: 6rem;
        height: 8rem;
    }

    .app-shell .call-workspace {
        padding: 0 0.5rem;
    }

    .app-shell .video-subtitles {
        bottom: 0.7rem;
    }

    .app-shell .call-chat-panel {
        bottom: max(env(safe-area-inset-bottom), var(--call-keyboard-inset, 0px));
        height: min(70dvh, var(--call-viewport-height, 70dvh));
    }

    .app-shell .friends-sidebar {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: min(75dvh, var(--call-viewport-height, 75dvh));
        max-height: calc(var(--call-viewport-height, 100dvh) - 2rem);
        border-radius: 1.75rem 1.75rem 0 0;
        transform: translateY(105%);
        transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1), visibility 0s linear 240ms;
    }

    .app-shell .call-workspace.has-friends-open .friends-sidebar {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .app-shell:not(.chat-hidden) .call-chat-panel:not([hidden]) {
        transform: none;
    }

    .app-shell.mobile-idle > .topbar {
        transform: translateY(-110%);
    }

    .app-shell.mobile-idle .call-controls {
        opacity: 0.12;
        transform: translateX(130%);
    }

    .app-shell > .topbar,
    .app-shell .call-controls {
        transition: transform 220ms ease-out, opacity 220ms ease-out;
    }

    .app-shell.mobile-idle .call-stage {
        border-radius: 0;
    }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
    .app-shell .call-controls {
        position: fixed;
        top: 50%;
        right: max(0.45rem, env(safe-area-inset-right));
        bottom: auto;
        min-height: 0;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.45rem;
        border: 1px solid var(--call-line);
        border-radius: 1.5rem;
        transform: translateY(-50%);
    }

    .app-shell.mobile-idle .call-controls {
        opacity: 0.12;
        transform: translate(130%, -50%);
    }

    .app-shell .call-workspace {
        padding: 0;
    }

    .app-shell .call-stage {
        border-radius: 0;
    }

    .app-shell .local-video-card {
        top: 0.5rem;
        right: 0.5rem;
        width: 5rem;
        height: 6.5rem;
    }

    .app-shell.mobile-idle > .topbar {
        transform: translateY(-110%);
    }

    .app-shell.mobile-idle .call-controls {
        opacity: 0.12;
        transform: translate(130%, -50%);
    }
}

@media (min-width: 701px) {
    .app-shell > .topbar,
    .app-shell.is-expanded > .topbar {
        width: min(1100px, calc(100% - 2rem));
        min-height: 4rem;
        align-self: center;
        padding: 0.5rem 0;
    }

    .app-shell .brand h1 {
        font-size: 1.1rem;
    }

    .app-shell .brand p {
        font-size: 0.75rem;
    }

    .app-shell .translation-control #translationToggle {
        width: auto;
        min-width: 0;
        gap: 0.45rem;
        padding: 0.6rem 0.75rem !important;
        border-radius: 999px !important;
    }

    .app-shell .translation-control #translationToggleLabel,
    .app-shell .signed-in-nickname {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        color: var(--call-ink);
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .app-shell .signed-in-nickname {
        max-width: 10rem;
        color: var(--call-muted);
        text-overflow: ellipsis;
    }

    .app-shell .call-workspace {
        padding: 0.75rem 1rem 0;
    }

    .app-shell .call-stage {
        width: min(1100px, 100%);
        border: 1px solid var(--call-line);
        border-radius: 1.5rem;
        box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%);
    }

    .app-shell .local-video-card {
        top: 1rem;
        right: 1rem;
        width: clamp(9rem, 18vw, 14rem);
        height: clamp(11rem, 22vw, 17rem);
        border-radius: 1.2rem;
    }

    .app-shell .remote-video-card .card-heading {
        top: 1rem;
        right: auto;
        left: 1rem;
        width: max-content;
        max-width: calc(100% - 18rem);
    }

    .app-shell .remote-video-card .video-fullscreen-toggle {
        top: 4.65rem;
        left: 1rem;
    }

    .app-shell .video-subtitles {
        right: 1.5rem;
        bottom: 1.25rem;
        left: 1.5rem;
    }

    .app-shell .call-controls {
        min-height: 6rem;
        align-self: center;
        gap: 0.8rem;
        padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
        border: 1px solid var(--call-line);
        border-bottom: 0;
        border-radius: 1.75rem 1.75rem 0 0;
        background: rgb(12 27 40 / 86%);
    }

    .app-shell .call-control-button {
        width: 3.25rem;
        min-width: 3.25rem;
        min-height: 3.25rem !important;
    }

    .app-shell .skip-user-button {
        min-width: 7.5rem;
        padding: 0.65rem 1.1rem !important;
        font-size: 0.92rem;
    }

    .app-shell .call-chat-panel {
        top: 50%;
        right: 1rem;
        bottom: auto;
        left: auto;
        width: min(22.5rem, 40vw);
        height: min(76dvh, 48rem);
        max-height: calc(100dvh - 2rem);
        border-radius: 1.25rem;
        transform: translate(110%, -50%);
    }

    .app-shell:not(.chat-hidden) .call-chat-panel:not([hidden]) {
        transform: translate(0, -50%);
    }

    .app-shell .call-chat-header {
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .app-shell .call-chat-header::before {
        display: none;
    }

    .app-shell .call-chat-form {
        padding-bottom: 0.75rem;
    }

    .app-shell .friends-sidebar {
        width: min(390px, 42vw);
    }

    .app-shell.topbar-hidden > .topbar {
        min-height: 3.2rem;
        justify-content: flex-end;
    }
}

@media (prefers-color-scheme: dark) {
    .app-shell {
        color-scheme: dark;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-shell *,
    .app-shell *::before,
    .app-shell *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 767px) {
    .app-shell:not(.is-expanded) > .topbar {
        padding-right: 0.75rem;
    }
}

@media (max-width: 700px) {
    .app-shell:not(.is-expanded) > .topbar {
        align-items: center;
        flex-direction: row;
        padding: calc(env(safe-area-inset-top) + 0.35rem) 0.75rem 0.35rem;
    }

    .app-shell:not(.is-expanded) .brand {
        align-self: auto;
    }
}

@media (min-width: 701px) and (max-width: 1000px) {
    .app-shell:not(.is-expanded) > .topbar {
        align-items: center;
        flex-direction: row;
        padding: 0.5rem 0;
    }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
    .app-shell .call-controls {
        gap: 0.25rem;
        padding: 0.35rem;
    }

    .app-shell .call-controls .call-control-button {
        width: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem !important;
    }

    .app-shell .call-controls .skip-user-button {
        min-width: 5rem;
        min-height: 3rem !important;
        padding: 0.4rem 0.55rem !important;
    }

    .app-shell .local-video-card {
        width: 5rem;
        height: 6.5rem;
    }

    .app-shell.mobile-idle > .topbar {
        transform: translateY(-110%);
    }

    .app-shell.mobile-idle .call-controls {
        transform: translate(130%, -50%);
    }
}

:root {
    --ink: #203448;
    --muted: #64788a;
    --violet: #218dd0;
    --violet-dark: #168d72;
    --line: #d7e3e9;
    --paper: #fff;
    --canvas: #eff4f7;
    --accent-blue: #258fce;
    --accent-green: #25b88b;
    --accent-gradient: linear-gradient(125deg, var(--accent-blue), var(--accent-green));
}

body {
    background: var(--canvas);
    color: var(--ink);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
summary,
select,
input[type="checkbox"],
input[type="range"] {
    -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea,
summary {
    transition-timing-function: ease-out;
}

button:active,
.call-menu summary:active,
.call-settings summary:active {
    transform: scale(0.98);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
a:focus-visible {
    outline: 3px solid rgb(53 169 178 / 68%);
    outline-offset: 3px;
}

.auth-layout {
    min-height: 100dvh;
    background: #f5f8fa;
}

.welcome-panel {
    background:
        radial-gradient(ellipse at 82% 18%, rgb(49 178 161 / 24%), transparent 36%),
        radial-gradient(ellipse at 12% 90%, rgb(39 138 203 / 32%), transparent 42%),
        linear-gradient(145deg, #10243a, #123f54 58%, #145b55);
}

.welcome-panel::before,
.welcome-panel::after {
    border-color: rgb(142 221 215 / 13%);
}

.brand-lockup {
    align-items: center;
    flex-direction: row;
    gap: 0.75rem;
    letter-spacing: -0.035em;
    text-align: left;
}

.welcome-panel .brand-logo {
    width: 3rem;
    max-height: 3rem;
}

.welcome-content h1 {
    max-width: 12ch;
    font-size: clamp(2.8rem, 5vw, 4.7rem);
    letter-spacing: -0.06em;
    line-height: 1.04;
}

.eyebrow,
.welcome-footer {
    color: #b7d8e2;
}

.eyebrow,
.auth-kicker {
    color: #35c39a;
}

.eyebrow-dot,
.live-pulse {
    background: #35d0a0;
    box-shadow: 0 0 0 0.25rem rgb(53 208 160 / 14%);
}

.globe {
    color: rgb(116 218 210 / 78%);
}

.globe svg {
    filter: drop-shadow(0 0 20px rgb(52 199 180 / 22%));
}

.orbit {
    border-color: rgb(117 215 210 / 28%);
}

.orbit-point {
    background: #38a8dd;
    box-shadow: 0 0 1rem rgb(56 168 221 / 65%);
}

.point-two {
    background: #39d0a0;
    box-shadow: 0 0 1rem rgb(57 208 160 / 60%);
}

.floating-note {
    border: 1px solid rgb(195 230 238 / 18%);
    border-radius: 0.9rem;
    background: rgb(15 41 56 / 82%);
    color: #effbff;
    box-shadow: 0 0.75rem 1.8rem rgb(4 24 37 / 22%);
    backdrop-filter: blur(12px);
}

.note-language {
    background: rgb(42 155 179 / 20%);
    color: #71d6c1;
}

.auth-panel {
    background:
        radial-gradient(ellipse at 90% 8%, rgb(50 175 164 / 8%), transparent 30%),
        #f5f8fa;
}

.auth-card {
    width: min(420px, 100%);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #e2ebef;
    border-radius: 1.5rem;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 1.2rem 3rem rgb(32 63 81 / 8%);
}

.auth-heading {
    margin-bottom: 1.5rem;
}

.auth-heading h2 {
    color: #1c3448;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
}

.auth-heading p,
.hero-description {
    color: #6a7f8e;
}

.google-button,
.primary-button,
.auth-form input,
.auth-form select,
.auth-form textarea {
    min-height: 3rem;
    border-radius: 0.9rem;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.google-button {
    border-color: #d8e4e9;
    background: #fff;
    color: #264153;
}

.google-button:hover {
    border-color: #9dcfcb;
    background: #f7fcfc;
}

.primary-button,
.app-shell .friend-request-row button,
.app-shell .direct-message-form button,
.app-shell .location-button,
.app-shell .request-accept,
.app-shell .call-chat-form button,
.report-actions button:not(.report-cancel) {
    border-color: transparent;
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 0.45rem 1.1rem rgb(37 150 157 / 18%);
}

.primary-button:hover,
.app-shell .friend-request-row button:hover,
.app-shell .direct-message-form button:hover,
.app-shell .location-button:hover,
.app-shell .request-accept:hover,
.app-shell .call-chat-form button:hover,
.report-actions button:not(.report-cancel):hover {
    filter: brightness(1.06);
}

.auth-form input,
.auth-form select,
.auth-form textarea,
.friend-request-row input,
.direct-message-form textarea,
.report-form select,
.report-form textarea {
    border: 1px solid #d5e2e8;
    border-radius: 0.85rem;
    background: #fbfdfe;
    color: #203448;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    border-color: #39aaa9;
    box-shadow: 0 0 0 3px rgb(37 184 139 / 13%);
}

.auth-form label {
    color: #38556a;
}

.auth-mode-toggle,
.auth-mode-toggle span {
    color: #167e8b;
}

.mobile-brand {
    color: #203448;
}

.mobile-brand .brand-logo {
    width: 2.5rem;
    max-height: 2.5rem;
}

.setup-brand {
    justify-content: center;
}

.app-shell .call-settings > summary svg {
    display: none;
}

.app-shell .call-settings > summary::after {
    content: "•••";
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
}

.app-shell .friends-sidebar {
    width: min(430px, 100vw);
    border-color: rgb(211 229 242 / 16%);
    border-radius: 1.5rem 0 0 1.5rem;
    background: #102130;
    color: var(--call-ink);
    box-shadow: 0 0 2.5rem rgb(0 0 0 / 40%);
}

.app-shell .friends-header,
.app-shell .friend-chat-header {
    border-bottom-color: var(--call-line);
    background: linear-gradient(120deg, rgb(37 143 210 / 18%), rgb(36 184 142 / 10%));
}

.app-shell .friends-header h2,
.app-shell .friend-chat-header h3 {
    color: var(--call-ink);
    font-size: 1.1rem;
}

.app-shell .friends-header p,
.app-shell .friend-chat-header p {
    color: var(--call-muted);
}

.app-shell .friends-section {
    padding: 1rem;
}

.app-shell .friends-section h3,
.app-shell .friend-request-form label,
.app-shell .location-sharing h3 {
    color: #9cc8d8;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-shell .friend-request-form {
    border-bottom-color: var(--call-line);
}

.app-shell .friend-request-row input,
.app-shell .direct-message-form textarea,
.app-shell .nickname-prefix {
    border-color: var(--call-line);
    background: #0c1b28;
    color: var(--call-ink);
}

.app-shell .nickname-prefix {
    border-radius: 0.75rem 0 0 0.75rem;
    color: #6fcdb4;
}

.app-shell .friend-entry {
    min-height: 3.75rem;
    padding: 0.7rem;
    border: 1px solid var(--call-line) !important;
    border-radius: 1rem !important;
    background: rgb(255 255 255 / 4%) !important;
    color: var(--call-ink) !important;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.app-shell .friend-entry:hover {
    border-color: rgb(53 208 160 / 40%) !important;
    background: rgb(45 157 164 / 12%) !important;
}

.app-shell .friend-avatar {
    background: linear-gradient(135deg, rgb(37 143 210 / 32%), rgb(36 184 142 / 28%));
    color: #b5f2df;
}

.app-shell .friend-identity strong,
.app-shell .request-entry,
.app-shell .friend-message-action {
    color: var(--call-ink);
}

.app-shell .friend-presence,
.app-shell .friends-empty,
.app-shell .nickname-help,
.app-shell .location-sharing > p,
.app-shell .location-consent {
    color: var(--call-muted);
}

.app-shell .request-entry,
.app-shell .moderation-entry,
.app-shell .location-sharing {
    border: 1px solid var(--call-line);
    border-radius: 1rem;
    background: rgb(255 255 255 / 4%);
    color: var(--call-ink);
}

.app-shell .request-actions button,
.app-shell .moderation-actions button,
.app-shell .icon-button,
.app-shell .friend-message-action,
.app-shell .location-button {
    min-height: 2.6rem;
    border-radius: 0.8rem;
}

.app-shell .request-actions button:not(.request-accept),
.app-shell .moderation-actions button,
.app-shell .icon-button {
    border: 1px solid var(--call-line);
    background: rgb(255 255 255 / 8%);
    color: var(--call-ink);
}

.app-shell .icon-button:hover,
.app-shell .request-actions button:not(.request-accept):hover {
    background: rgb(255 255 255 / 14%);
}

.app-shell .location-sharing {
    margin: 0 1rem;
    padding: 0.85rem;
}

.app-shell .location-sharing summary {
    color: #9cc8d8;
}

.app-shell .direct-messages {
    color: var(--call-ink);
}

.app-shell .direct-message,
.app-shell .direct-message.is-mine {
    border-color: var(--call-line);
    border-radius: 1rem;
    background: #1a3040;
    color: var(--call-ink);
}

.app-shell .direct-message.is-mine {
    border-color: rgb(53 208 160 / 25%);
    background: linear-gradient(135deg, rgb(37 143 210 / 26%), rgb(36 184 142 / 18%));
}

.app-shell .direct-message-translation {
    color: #eff8fb;
}

.app-shell .direct-message-meta,
.app-shell .direct-message-original {
    color: var(--call-muted);
}

.report-dialog {
    border-color: var(--call-line);
    border-radius: 1.35rem;
    background: #102130;
    color: var(--call-ink);
}

.report-form > p,
.report-form label,
.report-status {
    color: var(--call-muted);
}

.report-form select,
.report-form textarea {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.7rem 0.8rem;
    border-color: var(--call-line);
    background: #0c1b28;
    color: var(--call-ink);
}

.report-actions .report-cancel {
    border: 1px solid var(--call-line);
    background: rgb(255 255 255 / 8%);
    color: var(--call-ink);
}

.report-confirm-step {
    display: grid;
    gap: 0.5rem;
    padding: 0.8rem;
    border: 1px solid rgb(242 104 104 / 30%);
    border-radius: 1rem;
    background: rgb(161 44 54 / 10%);
}

.report-confirm-step[hidden] {
    display: none !important;
}

.report-confirm-step p {
    margin: 0;
    color: #e7eef2;
    font-size: 0.86rem;
    line-height: 1.5;
}

.app-shell .report-user-button {
    position: absolute;
    z-index: 20;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    display: inline-flex;
    width: auto;
    min-width: 2.8rem;
    min-height: 2.8rem !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem !important;
    border: 1px solid rgb(255 126 126 / 75%) !important;
    border-radius: 999px !important;
    background: rgb(145 37 48 / 88%) !important;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0.35rem 1.2rem rgb(0 0 0 / 30%);
    backdrop-filter: blur(12px);
}

.app-shell .report-user-button:hover {
    background: #b62d3c !important;
}

.app-shell .report-user-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.app-shell .remote-volume-control {
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem 0.2rem;
    color: var(--call-muted);
    font-size: 0.76rem;
}

.app-shell .remote-volume-control input {
    width: 100%;
    accent-color: var(--call-green);
}

.app-shell .call-chat-panel {
    border-color: var(--call-line);
    background: #102130;
    color: var(--call-ink);
}

.app-shell .call-chat-header {
    border-bottom-color: var(--call-line);
    background: #102130;
}

.app-shell .call-chat-header h2 {
    color: var(--call-ink);
}

.app-shell .call-chat-header p,
.app-shell .call-chat-sender {
    color: var(--call-muted);
}

.app-shell .call-chat-header::before {
    background: #61798a;
}

.app-shell .call-chat-messages {
    background: #102130;
    color: var(--call-ink);
}

.app-shell .call-chat-message {
    border-color: var(--call-line);
    border-radius: 1rem;
    background: #1a3040;
    color: var(--call-ink);
}

.app-shell .call-chat-message.is-mine {
    border-color: rgb(53 208 160 / 24%);
    background: linear-gradient(135deg, rgb(37 143 210 / 25%), rgb(36 184 142 / 18%));
}

.app-shell .call-chat-form {
    border-top-color: var(--call-line);
    background: #102130;
}

.app-shell .call-chat-form textarea {
    border-color: var(--call-line);
    background: #0c1b28;
    color: var(--call-ink);
}

.app-shell .call-chat-form textarea::placeholder {
    color: #8ca1af;
}

.app-shell .call-settings > summary {
    border-radius: 50% !important;
}

.app-shell .settings-panel {
    display: flex;
    max-height: min(70dvh, 34rem);
    flex-direction: column;
    gap: 0.75rem;
    overflow: auto;
}

.app-shell .settings-panel .block-user-button {
    width: 100%;
    min-height: 2.75rem !important;
    padding: 0.6rem 0.8rem !important;
    border: 1px solid rgb(255 255 255 / 14%) !important;
    border-radius: 0.85rem !important;
    background: rgb(255 255 255 / 8%) !important;
    color: var(--call-ink) !important;
    font-size: 0.8rem !important;
    text-align: left;
}

.app-shell .settings-panel .block-user-button[aria-pressed="true"] {
    border-color: rgb(53 208 160 / 35%) !important;
    color: #8de5c7 !important;
}

.app-shell .local-video-card {
    transition: left 220ms ease-out, top 220ms ease-out, box-shadow 180ms ease-out;
}

.app-shell .local-video-card.is-dragging {
    transition: none;
}

.waiting-orb {
    position: relative;
    display: grid;
    width: 7rem;
    height: 7rem;
    margin-bottom: 0.25rem;
    place-items: center;
    animation: waiting-bob 1.8s cubic-bezier(0.32, 0.05, 0.35, 0.98) infinite;
}

.waiting-orb .waiting-rings,
.waiting-orb .waiting-rings::before,
.waiting-orb .waiting-rings::after {
    width: 5.5rem;
    height: 5.5rem;
    animation-duration: 1.8s;
}

.waiting-orb .waiting-rings::before {
    animation-delay: 0.6s;
}

.waiting-orb .waiting-rings::after {
    animation-delay: 1.2s;
}

@keyframes waiting-bob {
    0%,
    100% {
        transform: translateY(0);
    }

    42% {
        transform: translateY(-0.75rem);
    }

    58% {
        transform: translateY(0.15rem);
    }
}

@media (max-width: 760px) {
    .auth-layout {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
    }

    .welcome-panel {
        display: flex;
        min-height: 14rem;
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .welcome-content {
        width: 100%;
        margin: 1.5rem 0 0;
        padding: 0;
    }

    .welcome-content h1 {
        max-width: 14ch;
        margin-top: 0.7rem;
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .hero-tagline {
        max-width: 22rem;
        margin: 0.45rem 0 0;
        font-size: 0.95rem;
    }

    .hero-description,
    .conversation-art,
    .welcome-footer {
        display: none;
    }

    .auth-panel,
    .nickname-setup-view .auth-panel {
        min-height: auto;
        flex: 1 0 auto;
        justify-content: flex-start;
        padding: 1rem;
        background: #f5f8fa;
    }

    .auth-card {
        margin: 0 auto;
        padding: 1.15rem;
        border-radius: 1.25rem;
    }

    .auth-card .mobile-brand {
        display: flex;
        margin: 0 0 1.25rem;
    }

    .auth-heading {
        margin-bottom: 1.15rem;
    }

    .auth-divider {
        margin: 1.1rem 0;
    }

    .auth-copyright {
        margin: 1rem 0 0;
        color: #718696;
    }

    .app-shell .friends-sidebar {
        border-radius: 1.25rem 1.25rem 0 0;
    }
}

@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
    .app-shell.is-expanded > .topbar,
    .app-shell.is-expanded > #fullscreenToolbarToggle,
    .app-shell.is-expanded > #fullscreenToolbar {
        display: none !important;
    }

    .app-shell.is-expanded .remote-video-card .card-heading,
    .app-shell.is-expanded .remote-friend-status,
    .app-shell.is-expanded .remote-video-card .video-fullscreen-toggle {
        display: none !important;
    }

    .app-shell.is-expanded .call-workspace {
        padding: 0;
    }

    .app-shell.is-expanded .call-stage {
        width: 100%;
        border-radius: 0;
    }

    .app-shell.is-expanded .report-user-button {
        top: max(0.8rem, env(safe-area-inset-top));
    }

    .app-shell.is-expanded .local-video-card {
        top: max(4.5rem, calc(env(safe-area-inset-top) + 4rem));
        right: max(1rem, env(safe-area-inset-right));
        left: auto;
        width: clamp(5rem, 24vw, 7rem);
        height: auto;
        aspect-ratio: 3 / 4;
    }

    .app-shell.is-expanded .call-controls {
        position: fixed;
        z-index: 70;
        right: max(0.5rem, env(safe-area-inset-right));
        bottom: max(0.5rem, env(safe-area-inset-bottom));
        top: auto;
        left: max(0.5rem, env(safe-area-inset-left));
        width: max-content;
        min-height: 4.5rem;
        max-width: calc(100vw - 1rem);
        gap: clamp(0.3rem, 2vw, 0.65rem);
        margin: 0 auto;
        flex-direction: row;
        padding: 0.55rem 0.75rem;
        border: 1px solid rgb(211 229 242 / 18%);
        border-radius: 999px;
        background: rgb(8 23 35 / 88%);
        box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 38%);
        backdrop-filter: blur(18px);
        transform: none;
    }

    .app-shell.is-expanded.mobile-idle .call-controls {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 1rem));
    }

    .app-shell.is-expanded .call-controls > #microphoneToggle,
    .app-shell.is-expanded .call-controls > #cameraToggle,
    .app-shell.is-expanded .call-controls > #callChatToggle,
    .app-shell.is-expanded .call-controls > #callSettings,
    .app-shell.is-expanded .call-controls > #switchUserButton {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .app-shell.is-expanded .call-controls > #captionsToggle {
        display: none !important;
    }

    .app-shell.is-expanded .call-control-button {
        width: 2.8rem;
        min-width: 2.8rem;
        min-height: 2.8rem !important;
    }

    .app-shell.is-expanded .skip-user-button {
        min-width: 5.5rem;
        min-height: 2.8rem !important;
        padding: 0.55rem 0.85rem !important;
        background: var(--call-gradient) !important;
        box-shadow: 0 0.35rem 1rem rgb(37 143 210 / 25%);
    }

    .app-shell.is-expanded .settings-panel {
        position: fixed;
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: calc(5.5rem + env(safe-area-inset-bottom));
        left: auto;
        width: min(21rem, calc(100vw - 1.5rem));
        max-height: min(70dvh, calc(var(--call-viewport-height, 100dvh) - 7rem));
        padding: 1rem;
        border-radius: 1.25rem;
        transform: none;
    }

    .app-shell.is-expanded .settings-panel #translationControl {
        order: -2;
        justify-content: flex-start;
        padding: 0.4rem 0;
    }

    .app-shell.is-expanded .settings-panel #friendsSidebarToggle {
        display: flex;
        width: 100%;
        min-height: 2.75rem;
        align-items: center;
        gap: 0.65rem;
        padding: 0.6rem 0.8rem;
        border: 1px solid var(--call-line);
        border-radius: 0.85rem;
        background: rgb(255 255 255 / 8%);
        color: var(--call-ink);
        text-align: left;
    }

    .app-shell.is-expanded .settings-panel #friendsSidebarToggle svg {
        width: 1.2rem;
        height: 1.2rem;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
    }

    .app-shell.is-expanded .settings-panel #translationState {
        display: inline;
        color: var(--call-muted);
    }

    .app-shell.is-expanded .settings-panel #translationToggle {
        width: auto;
        min-width: 2.75rem;
        min-height: 2.75rem !important;
        gap: 0.6rem;
        padding: 0.55rem 0.8rem !important;
        border-radius: 999px !important;
        background: rgb(255 255 255 / 8%) !important;
    }

    .app-shell.is-expanded .settings-panel #translationToggleLabel {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        color: var(--call-ink);
        font-size: 0.78rem;
    }

    .app-shell.is-expanded .settings-panel .remote-volume-control {
        order: -1;
    }

    .app-shell.is-expanded .settings-panel #fullscreenExitToggle,
    .app-shell.is-expanded .settings-panel #cameraSwitchToggle {
        display: flex;
        width: 100%;
        min-height: 2.75rem !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
        padding: 0.6rem 0.8rem !important;
        border: 1px solid var(--call-line) !important;
        border-radius: 0.85rem !important;
        background: rgb(255 255 255 / 8%) !important;
        color: var(--call-ink) !important;
    }

    .app-shell.chat-keyboard-open .call-controls {
        display: none !important;
    }

    .app-shell.chat-keyboard-open .call-chat-panel,
    .app-shell.chat-keyboard-open:not(.chat-hidden) .call-chat-panel:not([hidden]) {
        position: fixed;
        z-index: 90;
        top: auto;
        right: 0;
        bottom: var(--call-keyboard-inset, 0px);
        left: 0;
        width: 100%;
        height: min(70dvh, calc(min(var(--call-viewport-height, 100dvh), calc(100dvh - var(--call-keyboard-inset, 0px))) - env(safe-area-inset-top) - 0.5rem));
        min-height: 0;
        max-height: calc(min(var(--call-viewport-height, 100dvh), calc(100dvh - var(--call-keyboard-inset, 0px))) - env(safe-area-inset-top) - 0.5rem);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 1.5rem 1.5rem 0 0;
        transform: none !important;
    }

    .app-shell.chat-keyboard-open .call-chat-form {
        padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
    }

    .app-shell.chat-keyboard-open .call-chat-form textarea {
        min-height: 2.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .waiting-orb {
        animation: none;
    }
}

.app-shell .remote-video-card .report-user-button {
    position: absolute;
    z-index: 12;
    top: 0.75rem;
    right: auto;
    left: 0.75rem;
    display: grid;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem !important;
    padding: 0 !important;
    place-items: center;
    border: 1px solid rgb(255 112 112 / 52%) !important;
    border-radius: 50% !important;
    background: rgb(153 37 48 / 58%) !important;
    color: #fff !important;
    box-shadow: 0 0.25rem 0.8rem rgb(0 0 0 / 22%);
    backdrop-filter: blur(8px);
    transition: opacity 180ms ease-out, visibility 180ms ease-out, background 180ms ease-out;
}

.app-shell .remote-video-card .report-user-button:hover,
.app-shell .remote-video-card .report-user-button:focus-visible {
    background: rgb(178 42 54 / 90%) !important;
}

.app-shell .remote-video-card .report-user-button svg {
    width: 1.15rem;
    height: 1.15rem;
}

.app-shell .connection-status {
    position: absolute;
    top: 0.75rem;
    right: clamp(9rem, 20vw, 14rem);
    left: 4rem;
    width: auto;
    max-width: none;
    min-height: 2.5rem;
    display: grid;
    margin: 0;
    padding: 0.35rem 0.55rem;
    place-items: center;
    transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-shell.is-expanded .connection-status {
    position: absolute;
    top: 5rem;
    right: calc(clamp(150px, 19vw, 260px) + 2.25rem);
    left: 4.5rem;
    width: auto;
    max-width: none;
}

.app-shell.is-expanded .remote-video-card .report-user-button {
    top: 5rem;
    left: 1.25rem;
}

.app-shell.is-expanded.fullscreen-toolbar-open .connection-status,
.app-shell.is-expanded.fullscreen-toolbar-open .remote-video-card .report-user-button {
    top: 8.25rem;
}

.app-shell .remote-video-card .card-heading {
    top: 9rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: none;
}

.app-shell .remote-video-card .card-heading h2 {
    min-width: 0;
    flex: 1 1 0;
}

.app-shell .remote-video-card .card-heading .add-remote-user-button {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem !important;
}

.app-shell .remote-video-card .remote-friend-status:not(:empty) {
    top: 13rem;
    right: 0.75rem;
    left: 0.75rem;
    max-width: none;
}

.app-shell .remote-video-card .video-fullscreen-toggle {
    top: 15.5rem;
}

.app-shell .settings-panel #captionsToggle {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 3.25rem !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem !important;
    border-radius: 0.85rem !important;
    background: rgb(255 255 255 / 8%) !important;
    color: var(--call-ink) !important;
    text-align: left;
}

.app-shell .settings-panel #captionsToggleLabel {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color: inherit;
    font-size: 0.78rem;
}

.app-shell.is-expanded.fullscreen-controls-idle .report-user-button,
.app-shell.is-expanded.fullscreen-controls-idle .call-controls,
.app-shell.is-expanded.fullscreen-controls-idle .fullscreen-toolbar-toggle,
.app-shell.is-expanded.fullscreen-controls-idle .fullscreen-toolbar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-shell .waiting-orb {
    place-self: center;
}

.app-shell .waiting-orb .waiting-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 700px) {
    .app-shell .connection-status {
        min-height: 2.7rem;
        font-size: 0.64rem;
    }

    .app-shell.is-expanded .connection-status {
        top: max(12.5rem, calc(env(safe-area-inset-top) + 12rem));
        right: 0.75rem;
        left: 0.75rem;
    }

    .app-shell.is-expanded .remote-video-card .report-user-button {
        top: max(0.8rem, env(safe-area-inset-top));
        left: max(0.8rem, env(safe-area-inset-left));
    }

    .app-shell .remote-video-card .card-heading {
        top: 9.5rem;
        right: 0.65rem;
        left: 0.65rem;
        max-width: none;
        padding: 0.4rem;
    }

    .app-shell .remote-video-card .card-heading h2 {
        flex: 1 1 0;
    }

    .app-shell .remote-video-card .card-heading > #addRemoteUserButton {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.5rem;
        min-height: 2.5rem !important;
        flex: 0 0 2.5rem;
    }

    .app-shell .remote-video-card .remote-friend-status:not(:empty) {
        top: 13.75rem;
    }

    .app-shell .remote-video-card .video-fullscreen-toggle {
        top: 16.25rem;
    }
}

.app-shell .connection-status {
    display: none;
}

.app-shell .waiting-state p {
    display: none;
}

.app-shell .remote-video-card .card-heading {
    top: 0.65rem;
    right: 0.65rem;
    left: 0.65rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
    gap: 0.45rem;
    padding: 0.3rem 0.45rem 0.3rem 0.7rem;
    overflow: hidden;
    border-color: rgb(255 255 255 / 16%);
    border-radius: 0.85rem;
    background: rgb(8 20 31 / 76%);
    padding-right: 1.65rem;
}

.app-shell .connection-status.is-connecting ~ .remote-video-card .card-heading::after {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid rgb(255 255 255 / 75%);
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    transform: translateY(-50%);
    animation: call-connecting-spin 700ms linear infinite;
}

.app-shell .connection-status.is-status-toast {
    position: absolute;
    z-index: 9;
    top: 3.55rem;
    right: calc(clamp(5.5rem, 24vw, 7rem) + 1.25rem);
    left: 0.65rem;
    display: block;
    width: auto;
    max-width: none;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    background: rgb(6 17 27 / 82%);
    color: #eef6fb;
    font-size: 0.68rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: none;
    backdrop-filter: blur(8px);
}

.app-shell .remote-video-card .card-heading h2 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .remote-video-card .card-heading > #addRemoteUserButton {
    width: 2.1rem;
    min-width: 2.1rem;
    height: 2.1rem;
    min-height: 2.1rem !important;
    flex: 0 0 2.1rem;
}

.app-shell .remote-video-card .video-badge {
    flex: 0 0 auto;
    margin-left: 0;
    padding: 0.15rem 0.4rem;
    font-size: 0.62rem;
}

.app-shell .local-video-card,
.app-shell .remote-video-card,
.app-shell .local-video-card video,
.app-shell .remote-video-card video {
    touch-action: manipulation;
}

.app-shell .call-controls {
    gap: 0.5rem;
    flex-wrap: nowrap;
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
}

.app-shell .call-settings > summary,
.app-shell .call-controls .call-control-button {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem !important;
}

.app-shell .settings-backdrop {
    position: fixed;
    z-index: 99;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgb(2 9 15 / 68%) !important;
    opacity: 0;
    transition: opacity 200ms ease;
}

.app-shell .settings-panel {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    max-width: none;
    max-height: min(80dvh, var(--call-viewport-height, 80dvh));
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgb(255 255 255 / 12%);
    border-bottom: 0;
    border-radius: 1.4rem 1.4rem 0 0;
    background: #0c1b28;
    color: var(--call-ink);
    box-shadow: 0 -1rem 2.5rem rgb(0 0 0 / 38%);
    transform: translateY(105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms ease, opacity 180ms ease, visibility 0s linear 220ms;
}

.app-shell .call-settings:not([open]) .settings-panel {
    display: flex;
}

.app-shell .call-settings[open] .settings-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
}

.app-shell .call-settings[open] .settings-panel {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.app-shell .settings-header {
    position: sticky;
    z-index: 1;
    top: -0.75rem;
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    margin: -0.75rem -0.25rem 0.2rem;
    padding: 0.75rem 0 0.45rem;
    background: #0c1b28;
}

.app-shell .settings-header h2 {
    margin: 0;
    color: var(--call-ink);
    font-size: 1rem;
}

.app-shell .settings-close {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem !important;
    padding: 0 !important;
    place-items: center;
    border: 1px solid var(--call-line) !important;
    border-radius: 50% !important;
    background: rgb(255 255 255 / 8%) !important;
    color: var(--call-ink) !important;
    font-size: 1.5rem !important;
}

.app-shell .settings-item,
.app-shell .settings-action,
.app-shell .settings-volume {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 3.25rem;
    align-items: center;
    gap: 0.8rem;
    padding: 0.55rem 0.75rem !important;
    border: 1px solid rgb(255 255 255 / 12%) !important;
    border-radius: 0.85rem !important;
    background: rgb(255 255 255 / 7%) !important;
    color: var(--call-ink) !important;
    font-size: 0.84rem !important;
    text-align: left;
}

.app-shell .settings-item > svg,
.app-shell .settings-action > svg,
.app-shell .settings-volume > svg,
.app-shell .video-tool-toggle > svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.app-shell .settings-action span:not(.friend-request-badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .settings-item.translation-control {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
    gap: 0.7rem;
    flex-wrap: nowrap;
    padding: 0.55rem 0.75rem;
    color: var(--call-ink);
    font-size: 0.84rem;
}

.app-shell .settings-panel .translation-control #translationState {
    display: inline;
}

.app-shell .translation-switch {
    display: grid;
    min-width: 2.8rem;
    min-height: 2.75rem !important;
    padding: 0.4rem !important;
    place-items: center;
    border: 0 !important;
    background: transparent !important;
}

.app-shell .translation-switch-track {
    display: flex;
    width: 2.25rem;
    height: 1.3rem;
    align-items: center;
    padding: 0.12rem;
    border-radius: 999px;
    background: #586774;
    transition: background 160ms ease;
}

.app-shell .translation-switch-track > span {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 160ms ease;
}

.app-shell .translation-switch[aria-pressed="true"] .translation-switch-track {
    background: #168d72;
}

.app-shell .translation-switch[aria-pressed="true"] .translation-switch-track > span {
    transform: translateX(0.95rem);
}

.app-shell .settings-item .status-light {
    width: 0.55rem;
    height: 0.55rem;
}

.app-shell .settings-volume {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    min-height: 4.8rem;
    gap: 0.35rem 0.8rem;
}

.app-shell .settings-volume input {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 1.75rem;
    accent-color: #27c69a;
    touch-action: manipulation;
}

.app-shell .settings-action[hidden] {
    display: none !important;
}

.app-shell .settings-action:hover,
.app-shell .settings-action:focus-visible {
    background: rgb(255 255 255 / 12%) !important;
}

.app-shell .settings-action#reportUserButton {
    border-color: rgb(255 100 110 / 26%) !important;
    color: #ffb6b9 !important;
}

.app-shell .settings-action#blockUserButton {
    min-height: 3.25rem !important;
    margin-top: 0.45rem;
    border-color: rgb(255 92 101 / 38%) !important;
    background: rgb(138 38 47 / 26%) !important;
    color: #ffb1b5 !important;
}

.app-shell .settings-action#blockUserButton:hover,
.app-shell .settings-action#blockUserButton:focus-visible {
    background: rgb(155 43 53 / 42%) !important;
}

.app-shell #signOutButton {
    margin-top: 0.3rem;
}

.app-shell .friend-request-badge {
    position: static;
    margin-left: auto;
}

.app-shell .local-video-tools {
    position: static;
    display: grid;
    gap: 0.5rem;
    transform: none;
}

.app-shell .local-video-tools .video-tool {
    display: grid;
    gap: 0.35rem;
}

.app-shell .local-video-tools .video-tool-toggle {
    display: flex;
    width: 100%;
    min-height: 3.25rem !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    padding: 0.55rem 0.75rem !important;
    border: 1px solid rgb(255 255 255 / 12%) !important;
    border-radius: 0.85rem !important;
    background: rgb(255 255 255 / 7%) !important;
    color: var(--call-ink) !important;
    font-size: 0.84rem !important;
}

.app-shell .video-tool-panel,
.app-shell .video-tool-panel[hidden] {
    position: static;
    width: 100%;
    max-width: none;
    transform: none;
}

.app-shell.settings-open .call-controls {
    z-index: 110;
}

.app-shell .fullscreen-hint {
    position: fixed;
    z-index: 80;
    top: max(0.6rem, env(safe-area-inset-top));
    right: max(0.75rem, env(safe-area-inset-right));
    left: max(0.75rem, env(safe-area-inset-left));
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    margin: 0 auto;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    background: rgb(7 18 28 / 88%);
    color: #f3f8fa;
    font-size: 0.72rem;
    text-align: center;
    opacity: 0;
    transform: translateY(-0.4rem);
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.app-shell .fullscreen-hint.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes call-connecting-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
    body {
        min-height: 100dvh;
        overflow: hidden;
    }

    .app-shell:not([hidden]) {
        position: fixed;
        inset: 0;
        display: flex;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        flex-direction: column;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .app-shell:not(.is-expanded) > .topbar,
    .app-shell.is-expanded > .topbar {
        position: relative;
        z-index: 20;
        top: auto;
        right: auto;
        left: auto;
        display: flex !important;
        width: 100%;
        min-height: 3.75rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-start;
        margin: 0;
        padding: calc(env(safe-area-inset-top) + 0.35rem) max(0.75rem, env(safe-area-inset-right)) 0.35rem max(0.75rem, env(safe-area-inset-left));
        background: #0c1b28;
        transition: opacity 200ms ease, transform 200ms ease;
    }

    .app-shell .brand {
        position: static;
        min-width: 0;
        flex: 1 1 auto;
        align-items: center;
        gap: 0.55rem;
    }

    .app-shell .brand h1 {
        font-size: 0.95rem;
    }

    .app-shell .brand p {
        max-width: 12rem;
        overflow: hidden;
        font-size: 0.68rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-shell .signed-in-nickname {
        display: none;
    }

    .app-shell .call-workspace {
        width: 100%;
        min-height: 0;
        flex: 1 1 auto;
        padding: 0;
    }

    .app-shell .call-stage {
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 0;
    }

    .app-shell .remote-video-card .card-heading {
        top: 0.55rem;
        right: 0.55rem;
        left: 0.55rem;
        min-height: 2.75rem;
        max-height: 2.75rem;
    }

    .app-shell .remote-video-card .card-heading h2 {
        min-width: 0;
        flex: 1 1 auto;
        font-size: 0.74rem;
    }

    .app-shell .remote-video-card .card-heading .add-remote-user-button {
        width: 2.1rem;
        min-width: 2.1rem;
        height: 2.1rem;
        min-height: 2.1rem !important;
        flex: 0 0 2.1rem;
    }

    .app-shell .local-video-card {
        top: 3.75rem;
        right: max(0.75rem, env(safe-area-inset-right));
        left: auto;
        width: clamp(5.5rem, 24vw, 7rem);
        height: auto;
        aspect-ratio: 3 / 4;
        border: 2px solid rgb(255 255 255 / 82%);
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 30%);
    }

    .app-shell.is-expanded .local-video-card {
        top: max(3.75rem, calc(env(safe-area-inset-top) + 3rem));
        right: max(0.75rem, env(safe-area-inset-right));
    }

    .app-shell.is-expanded .connection-status.is-status-toast {
        top: max(3.55rem, calc(env(safe-area-inset-top) + 3rem));
        right: calc(clamp(5rem, 24vw, 7rem) + 1.25rem);
    }

    .app-shell .call-controls,
    .app-shell.is-expanded .call-controls {
        position: relative;
        z-index: 70;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        width: 100%;
        min-height: 0;
        max-width: none;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0.5rem max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
        border-radius: 1.35rem 1.35rem 0 0;
        transform: none;
    }

    .app-shell .call-controls > #microphoneToggle,
    .app-shell .call-controls > #cameraToggle,
    .app-shell .call-controls > #callChatToggle,
    .app-shell .call-controls > #callSettings,
    .app-shell .call-controls > #switchUserButton {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .app-shell .call-controls .call-control-button,
    .app-shell .call-settings > summary {
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        min-height: 3rem !important;
        padding: 0.6rem !important;
    }

    .app-shell .call-controls .skip-user-button {
        position: static;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        min-width: 4.5rem;
        min-height: 3rem !important;
        flex: 0 0 auto;
        order: 0;
        gap: 0.3rem;
        padding: 0.5rem 0.65rem !important;
        font-size: 0.76rem;
        transform: none;
    }

    .app-shell:not(.is-expanded) .call-controls {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .app-shell.is-expanded .call-controls {
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .app-shell.is-expanded > #fullscreenToolbarToggle,
    .app-shell.is-expanded > #fullscreenToolbar {
        display: none !important;
    }

    .app-shell.is-expanded.fullscreen-controls-idle > .topbar {
        opacity: 0;
        transform: translateY(-110%);
        pointer-events: none;
    }

    .app-shell.is-expanded.fullscreen-controls-idle .call-controls {
        opacity: 0;
        transform: translateY(calc(100% + 1rem));
        pointer-events: none;
    }

    .app-shell .settings-panel {
        max-height: min(80dvh, var(--call-viewport-height, 80dvh));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

@media (min-width: 701px) {
    .app-shell .settings-panel {
        right: max(1rem, env(safe-area-inset-right));
        bottom: max(5.25rem, env(safe-area-inset-bottom));
        left: auto;
        width: min(26rem, calc(100vw - 2rem));
        border: 1px solid rgb(255 255 255 / 12%);
        border-radius: 1.25rem;
        transform: translateY(1rem);
    }

    .app-shell .call-settings[open] .settings-panel {
        transform: translateY(0);
    }

    .app-shell .settings-backdrop {
        z-index: 99;
    }
}

.app-shell.group-call #switchUserButton {
    display: none !important;
}

.app-shell .group-participants-list {
    display: grid;
    gap: 0.4rem;
    padding: 0.35rem 0;
}

.app-shell .group-participants-list[hidden] {
    display: none;
}

.app-shell .group-participants-list h3 {
    margin: 0;
    color: var(--call-muted);
    font-size: 0.76rem;
}

.app-shell .group-participant-row {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.65rem;
    background: rgb(255 255 255 / 5%);
}

.app-shell .group-participant-details {
    min-width: 0;
    color: var(--call-ink);
    font-size: 0.72rem;
    overflow-wrap: anywhere;
}

.app-shell .group-participant-remove {
    min-width: 4.5rem;
    min-height: 2.5rem;
    border: 1px solid rgb(255 98 105 / 40%);
    border-radius: 0.6rem;
    background: rgb(138 38 47 / 26%);
    color: #ffb1b5;
    font-size: 0.7rem;
}

.app-shell.group-call .call-stage:not([data-participant-count="2"]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
}

.app-shell.group-call .call-stage > #connectionStatus {
    position: absolute;
    z-index: 15;
    top: 0.6rem;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 1.2rem);
    transform: translateX(-50%);
}

.app-shell.group-call .call-stage > #groupCaptionStack {
    position: absolute;
}

.app-shell.group-call .call-stage > #waitingState {
    position: absolute;
    inset: 0;
}

.app-shell.group-call .call-stage > #callChatPanel {
    position: absolute;
    z-index: 14;
    inset: 0.5rem;
    width: auto;
    height: auto;
}

.app-shell.group-call .call-stage:not([data-participant-count="2"]) > .video-card {
    position: relative;
    inset: auto;
    grid-column: auto;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
    border: 2px solid var(--participant-accent, #54d6b4);
    border-radius: 0.9rem;
}

.app-shell.group-call .call-stage:not([data-participant-count="2"]) > .local-video-card {
    z-index: 1;
    border-color: rgb(255 255 255 / 55%);
    box-shadow: none;
}

.app-shell.group-call .call-stage:not([data-participant-count="2"]) > .video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-shell.group-call .call-stage:not([data-participant-count="2"]) > .video-card .card-heading {
    position: absolute;
    z-index: 3;
    top: 0.35rem;
    right: 0.35rem;
    left: 0.35rem;
    display: flex;
    min-height: 2rem;
    max-height: 2rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    border: 0;
    border-radius: 0.55rem;
    background: rgb(5 14 23 / 76%);
}

.app-shell.group-call .call-stage:not([data-participant-count="2"]) > .video-card .card-heading h2 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: white;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .group-mic-state {
    flex: 0 0 auto;
    color: #c8d6df;
    font-size: 0.57rem;
}

.app-shell .group-peer-card.is-muted .group-mic-state {
    color: #ffb0b4;
}

.app-shell .group-peer-card.is-reconnecting {
    border-color: #eab96d;
}

.app-shell .group-peer-status {
    position: absolute;
    z-index: 2;
    right: 0.4rem;
    bottom: 0.4rem;
    left: 0.4rem;
    width: fit-content;
    padding: 0.22rem 0.4rem;
    border-radius: 999px;
    background: rgb(4 13 22 / 78%);
    color: #ffe0a6;
    font-size: 0.62rem;
}

.app-shell .group-peer-status:empty {
    display: none;
}

.app-shell .group-caption-stack {
    position: absolute;
    z-index: 12;
    right: 0.6rem;
    bottom: 0.65rem;
    left: 0.6rem;
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    pointer-events: none;
}

.app-shell .group-caption {
    display: grid;
    max-width: min(94%, 52rem);
    gap: 0.1rem;
    margin: 0;
    padding: 0.35rem 0.55rem;
    border-left: 3px solid var(--participant-accent, #54d6b4);
    border-radius: 0.45rem;
    background: rgb(3 12 20 / 84%);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    opacity: 1;
    transition: opacity 350ms ease;
}

.app-shell .group-caption strong {
    color: var(--participant-accent, #54d6b4);
    font-size: 0.61rem;
}

.app-shell .group-caption-original {
    display: -webkit-box;
    color: #c7d2dc;
    font-size: 0.66rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.app-shell .group-caption-translation {
    display: -webkit-box;
    color: #fff;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.app-shell .group-caption.is-fading {
    opacity: 0;
}

.app-shell .group-peer-card.is-speaking {
    box-shadow: 0 0 0 2px var(--participant-accent, #54d6b4);
}

@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
    .app-shell.group-call .call-stage:not([data-participant-count="2"]) {
        height: 100%;
        min-height: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        gap: 0.4rem;
        padding: 0.4rem;
    }

    .app-shell.group-call .call-stage:not([data-participant-count="2"]) > .local-video-card,
    .app-shell.is-expanded.group-call .call-stage:not([data-participant-count="2"]) > .local-video-card {
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }

    .app-shell.group-call .call-stage:not([data-participant-count="2"]) .remote-video-card .card-heading,
    .app-shell.group-call .call-stage:not([data-participant-count="2"]) .local-video-card .card-heading {
        top: 0.35rem;
        right: 0.35rem;
        left: 0.35rem;
    }

    .app-shell.group-call .group-caption-stack {
        bottom: 0.35rem;
    }

    .app-shell.group-call .call-controls > #inviteRoomButton {
        display: inline-flex !important;
    }
}

.app-shell .friend-entry {
    gap: 0.4rem;
}

.app-shell .friend-chat-button {
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.1rem;
    border: 0;
    background: transparent;
    color: var(--call-ink);
    text-align: left;
}

.app-shell .friend-chat-button:hover {
    background: transparent;
}

.app-shell .friend-invite-action {
    min-width: 5rem;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 0.4rem 0.55rem;
    border: 1px solid rgb(53 208 160 / 35%);
    border-radius: 0.7rem;
    background: rgb(45 157 164 / 14%);
    color: #b6f3df;
    font-size: 0.7rem;
}

.app-shell .friend-invite-action:hover,
.app-shell .friend-invite-action:focus-visible {
    background: rgb(45 157 164 / 28%);
}

.app-shell .settings-panel .local-video-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    align-items: stretch;
    justify-items: stretch;
    gap: 0.45rem;
}

.app-shell .settings-panel .local-video-tools .video-tool {
    width: 100%;
    min-width: 0;
}

.app-shell .settings-panel .local-video-tools .video-tool-toggle {
    display: flex;
    width: 100%;
    min-height: 3.25rem !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    padding: 0.55rem 0.75rem !important;
    border: 1px solid rgb(255 255 255 / 12%) !important;
    border-radius: 0.85rem !important;
    background: rgb(255 255 255 / 7%) !important;
    color: var(--call-ink) !important;
    font-size: 0.84rem !important;
    text-align: left;
}

.app-shell .settings-panel .local-video-tools .video-tool-toggle > svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
}

.app-shell .settings-panel .local-video-tools .video-tool-toggle:hover,
.app-shell .settings-panel .local-video-tools .video-tool.is-open .video-tool-toggle {
    background: rgb(255 255 255 / 12%) !important;
}

.app-shell .settings-panel .video-tool-panel,
.app-shell .settings-panel .video-tool-panel[hidden] {
    position: static;
    width: 100%;
    max-width: none;
    transform: none;
}

.app-shell .settings-panel .video-tool-panel[hidden] {
    display: none !important;
}

.app-shell .remote-video-card .card-heading {
    top: max(0.5rem, env(safe-area-inset-top));
    right: auto;
    left: max(0.5rem, env(safe-area-inset-left));
    display: flex;
    width: min(22.5rem, calc(100% - 1rem));
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.35rem 0 0.65rem;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 0.75rem;
    background: rgb(8 20 31 / 78%);
}

.app-shell .remote-video-card .card-heading h2 {
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell .remote-video-card .card-heading > #addRemoteUserButton {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px !important;
    flex: 0 0 44px;
    font-size: 1.2rem !important;
}

.app-shell .remote-video-card .card-heading > .video-badge {
    flex: 0 0 auto;
    padding: 0.1rem 0.35rem;
    font-size: 0.58rem;
}

.app-shell .local-video-card,
.app-shell .local-video-card video {
    touch-action: none;
}

.app-shell .skip-user-button {
    background: linear-gradient(120deg, #258fce, #25b88b) !important;
    box-shadow: 0 0.45rem 1.25rem rgb(37 143 206 / 24%);
}

.app-shell .skip-user-button:hover,
.app-shell .skip-user-button:focus-visible,
.app-shell .skip-user-button:active {
    background: linear-gradient(120deg, #258fce, #25b88b) !important;
}

.app-shell .friends-status.is-toast,
.app-shell .remote-friend-status.is-toast {
    width: fit-content;
    max-width: min(90%, 22rem);
    padding: 0.25rem 0.45rem;
    border-radius: 0.4rem;
    background: rgb(5 16 26 / 90%);
    color: #e7f2f7;
    font-size: 0.65rem;
    line-height: 1.3;
}

.region-selector-button {
    display: grid;
    width: 3.25rem;
    min-width: 44px;
    height: 3.25rem;
    min-height: 44px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0.9rem;
    background: transparent;
}

.region-selector-button:hover,
.region-selector-button:focus-visible {
    background: rgb(78 181 222 / 12%);
}

.region-logo-wrap {
    position: relative;
    display: grid;
    place-items: center;
}

.region-logo-wrap .app-brand-logo {
    width: 3rem;
    max-height: 2.4rem;
}

.active-region-badge {
    position: absolute;
    top: -0.45rem;
    left: -0.45rem;
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 75%);
    border-radius: 50%;
    background: #e9f8f6;
    font-size: 0.68rem;
    line-height: 1;
}

.waiting-room-metadata {
    display: none !important;
}

.online-count {
    margin: -0.3rem 0 0;
    color: #a7bbc6;
    font-size: 0.76rem;
}

.region-sparse-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
    color: #cad7df;
    font-size: 0.76rem;
}

.region-sparse-notice[hidden] {
    display: none;
}

.region-sparse-notice button {
    min-height: 44px;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgb(95 205 181 / 55%);
    border-radius: 999px;
    background: rgb(26 120 121 / 38%);
    color: #a9f3dd;
    font-size: 0.74rem;
    font-weight: 700;
}

.region-picker {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    align-items: end;
}

.region-picker[hidden] {
    display: none;
}

.region-picker-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgb(3 9 15 / 70%);
    animation: region-backdrop-in 180ms ease-out both;
}

.region-picker-sheet {
    position: relative;
    z-index: 1;
    width: min(100%, 38rem);
    max-height: 80dvh;
    margin: 0 auto;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border: 1px solid rgb(163 208 225 / 14%);
    border-bottom: 0;
    border-radius: 1.35rem 1.35rem 0 0;
    background: #101c27;
    box-shadow: 0 -1rem 3rem rgb(0 0 0 / 34%);
    color: #ecf5f8;
    animation: region-sheet-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.region-picker-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.region-picker-header h2 {
    margin: 0;
    color: #f3fbfc;
    font-size: 1.05rem;
}

.region-picker-header p {
    margin: 0.35rem 0 0;
    color: #a7bac5;
    font-size: 0.76rem;
}

.region-picker .settings-close {
    display: grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    flex: 0 0 2.75rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(211 229 242 / 16%);
    border-radius: 50%;
    background: rgb(255 255 255 / 8%);
    color: #f2f7fb;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.region-picker .settings-close:hover,
.region-picker .settings-close:focus-visible {
    background: rgb(255 255 255 / 16%);
}

.region-globe-wrap {
    display: grid;
    min-height: 10.5rem;
    place-items: center;
}

.region-globe {
    display: block;
    width: min(13.5rem, 55vw);
    height: min(13.5rem, 55vw);
    max-height: 10.5rem;
    cursor: pointer;
    touch-action: manipulation;
}

.region-globe-fallback {
    margin: 1rem 0;
    color: #a7bac5;
    font-size: 0.78rem;
    text-align: center;
}

.region-picker-online {
    margin: 0.1rem 0 0.65rem;
    color: #9cdbc9;
    font-size: 0.78rem;
    font-weight: 700;
}

.region-list {
    display: grid;
    max-height: 34dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 0.35rem;
    padding: 0.15rem 0.2rem 0.3rem 0;
}

.region-option {
    display: grid;
    min-height: 48px;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    background: #172633;
    color: #eaf3f7;
    text-align: left;
}

.region-option:hover,
.region-option[aria-selected="true"] {
    border-color: rgb(95 205 181 / 55%);
    background: #1a303d;
}

.region-option-flag {
    font-size: 1.1rem;
    text-align: center;
}

.region-option-label {
    overflow: hidden;
    font-size: 0.83rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-option-count {
    min-width: 3.2rem;
    color: #91a2ae;
    font-size: 0.74rem;
    text-align: right;
}

.region-option-count.is-online {
    color: #83edc4;
    font-weight: 750;
}

.region-picker-open {
    overflow: hidden;
}

@keyframes region-sheet-rise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes region-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 700px) {
    .region-picker-sheet {
        max-height: 80dvh;
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-left: max(1rem, env(safe-area-inset-left));
    }

    .region-list {
        max-height: 33dvh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .region-picker-sheet,
    .region-picker-backdrop {
        animation: none;
    }
}

.app-shell .friends-status.is-toast.is-error,
.app-shell .remote-friend-status.is-toast.is-error {
    color: #ffd1d3;
}

.app-shell.is-expanded.fullscreen-controls-idle > .topbar,
.app-shell.is-expanded.fullscreen-controls-idle .call-controls,
.app-shell.is-expanded.fullscreen-controls-idle .fullscreen-toolbar-toggle,
.app-shell.is-expanded.fullscreen-controls-idle .fullscreen-toolbar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Tela cheia no celular: o vídeo ocupa tudo; header e controles apenas sobrepõem. */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
    .app-shell.is-expanded:not([hidden]) {
        width: 100%;
        height: 100dvh;
        margin: 0;
        padding: 0;
    }

    .app-shell.is-expanded .call-workspace {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        flex: none;
        margin: 0;
        padding: 0;
    }

    .app-shell.is-expanded .call-stage {
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .app-shell.is-expanded:not(.group-call) .remote-video-card {
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .app-shell.is-expanded:not(.group-call) .remote-video-card video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .app-shell.is-expanded > .topbar {
        position: absolute;
        z-index: 60;
        top: 0;
        right: 0;
        left: 0;
        background: linear-gradient(to bottom, rgb(0 0 0 / 60%), transparent);
    }

    .app-shell.is-expanded .call-controls {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .app-shell.is-expanded > .topbar,
    .app-shell.is-expanded .call-controls {
        transition: opacity 300ms ease, visibility 0s linear 0s;
    }

    .app-shell.is-expanded.fullscreen-controls-idle > .topbar,
    .app-shell.is-expanded.fullscreen-controls-idle .call-controls {
        transform: none;
        transition: opacity 300ms ease, visibility 0s linear 300ms;
    }
}

/* Menu "Mais opções": todas as linhas seguem o mesmo padrão em qualquer tamanho de tela. */
.app-shell .settings-panel #captionsToggle {
    gap: 0.8rem;
    padding: 0.55rem 0.75rem !important;
    background: rgb(255 255 255 / 7%) !important;
}

.app-shell .settings-panel #captionsToggleLabel {
    font-size: 0.84rem;
}

.app-shell .settings-panel #friendsSidebarToggle,
.app-shell.is-expanded .settings-panel #friendsSidebarToggle,
.app-shell.is-expanded .settings-panel #fullscreenExitToggle,
.app-shell.is-expanded .settings-panel #cameraSwitchToggle {
    min-height: 3.25rem !important;
    gap: 0.8rem;
    padding: 0.55rem 0.75rem !important;
    background: rgb(255 255 255 / 7%) !important;
}

.app-shell .settings-panel .translation-control #translationToggle {
    width: auto;
    min-width: 2.75rem;
    min-height: 2.25rem !important;
    padding: 0.3rem 0.5rem !important;
    border-radius: 999px !important;
}

.app-shell .settings-panel .translation-control #translationToggleLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Chat no desktop: um clique recolhe o painel por completo (também em tela cheia). */
@media (min-width: 701px) {
    .app-shell.is-expanded .call-chat-panel {
        top: 50%;
        right: 1rem;
        bottom: auto;
        left: auto;
        width: min(22.5rem, 40vw);
        height: min(76dvh, 48rem);
        max-height: calc(100dvh - 2rem);
        transform: translate(110%, -50%);
        transition: transform 240ms ease-out, visibility 0s linear 0s;
    }

    .app-shell.is-expanded:not(.chat-hidden) .call-chat-panel:not([hidden]) {
        transform: translate(0, -50%);
        pointer-events: auto;
    }

    .app-shell.chat-hidden .call-chat-panel {
        visibility: hidden;
        pointer-events: none;
        transition: transform 240ms ease-out, visibility 0s linear 240ms;
    }

    .call-chat-unread {
        top: 0.15rem;
        right: 0.15rem;
        min-width: 0;
        width: 0.8rem;
        height: 0.8rem;
        padding: 0;
        font-size: 0;
    }
}

/* Presença, mensagens não lidas e ponto de notificação na lista de amigos. */
.app-shell .friend-avatar {
    position: relative;
    overflow: visible;
}

.app-shell .friend-status-dot {
    position: absolute;
    right: -0.1rem;
    bottom: -0.1rem;
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid #0c1b28;
    border-radius: 50%;
    background: #7d8b98;
}

.app-shell .friend-status-dot.is-online {
    background: var(--call-green);
}

.app-shell .friend-presence.is-online {
    color: var(--call-green);
}

.app-shell .friend-unread {
    display: grid;
    min-width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    padding: 0 0.3rem;
    place-items: center;
    border-radius: 999px;
    background: #ef5c62;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
}

.app-shell .friend-invite-action {
    max-width: 6.5rem;
    white-space: normal;
    line-height: 1.15;
}

.app-shell .call-settings > summary {
    position: relative;
}

.app-shell .settings-notification-dot {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid #0c1b28;
    border-radius: 50%;
    background: #ef5c62;
}

.app-shell .settings-notification-dot[hidden] {
    display: none;
}

.region-country-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.region-country-choice[hidden] {
    display: none;
}

.region-country-choice label {
    flex: 0 0 auto;
    font-size: 0.8rem;
}

.region-country-choice select {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 2.5rem;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 8%);
    color: inherit;
}

.region-country-choice button {
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border: 1px solid rgb(53 208 160 / 35%);
    border-radius: 0.7rem;
    background: rgb(45 157 164 / 20%);
    color: #b6f3df;
}

/* Inverter telas: botão no canto da miniatura (só aparece na miniatura, nunca no quadro grande). */
.app-shell .video-swap-button,
.app-shell .video-pin-button {
    display: none;
    place-items: center;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    background: rgb(5 14 23 / 72%);
    color: #fff;
}

.app-shell .video-swap-button {
    position: absolute;
    z-index: 9;
    right: 0.3rem;
    bottom: 0.3rem;
    width: 1.9rem;
    height: 1.9rem;
    min-height: 0 !important;
}

.app-shell .video-swap-button svg,
.app-shell .video-pin-button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.app-shell:not(.is-waiting).has-remote-participant:not(.group-call) .local-video-card .video-swap-button,
.app-shell.group-call:not(.is-waiting) .call-stage[data-participant-count="2"] .local-video-card .video-swap-button {
    display: grid;
}

.app-shell.is-swapped #localvideo {
    transform: scaleX(-1);
}

.app-shell.is-swapped #remoteVideo {
    transform: none;
}

.app-shell.is-swapped .remote-video-card .video-self-label {
    display: none;
}

/* Miniatura mostrando o interlocutor: só o vídeo, o botão e as legendas (que sobem para a tela). */
.app-shell.is-swapped .local-video-card > :not(video):not(.video-swap-button):not(.video-subtitles) {
    display: none !important;
}

.app-shell.is-swapped .local-video-card .video-subtitles {
    position: fixed;
    z-index: 30;
    right: 0.75rem;
    bottom: 6rem;
    left: 0.75rem;
    pointer-events: none;
}

/* Salas com 3+ pessoas: fixar um quadro como o grande. */
.app-shell.group-call .call-stage:not([data-participant-count="2"]) .video-pin-button {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
}

.app-shell.group-call .call-stage.has-pinned-tile:not([data-participant-count="2"]) > .is-pinned {
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: span 2;
    order: -1;
}

.app-shell .video-pin-button[aria-pressed="true"] {
    border-color: rgb(53 208 160 / 60%);
    background: rgb(45 157 164 / 70%);
}

/* Botão de tradução por IA na barra principal: verde quando ativo. */
.app-shell .call-controls > #aiTranslationToggle {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.app-shell .call-controls > #aiTranslationToggle.is-ai-active {
    border-color: rgb(53 208 160 / 55%) !important;
    background: rgb(45 157 164 / 32%) !important;
    color: #b6f3df !important;
}

.app-shell #aiTranslationToggle .ai-state-dot {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid #0c1b28;
    border-radius: 50%;
    background: #7d8b98;
}

.app-shell #aiTranslationToggle.is-ai-active .ai-state-dot {
    background: var(--call-green);
    box-shadow: 0 0 0.5rem rgb(53 208 160 / 60%);
}