.wpli-room {
    --wpli-bg: #f5f7fb;
    --wpli-surface: #ffffff;
    --wpli-ink: #111827;
    --wpli-muted: #667085;
    --wpli-border: #e5e7eb;
    --wpli-primary: #2563eb;
    --wpli-primary-dark: #1d4ed8;
    --wpli-you: #2563eb;
    --wpli-you-soft: #eaf1ff;
    --wpli-partner: #111827;
    --wpli-partner-soft: #f3f4f6;
    --wpli-ok: #16a34a;
    max-width: 1040px;
    margin: 2rem auto;
    color: var(--wpli-ink);
    font-family: inherit;
}
.wpli-shell {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    border: 1px solid rgba(37,99,235,.14);
    border-radius: 28px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .12);
    overflow: hidden;
}
.wpli-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 32%), var(--wpli-surface);
    border-bottom: 1px solid var(--wpli-border);
}
.wpli-eyebrow {
    margin: 0 0 .35rem;
    color: var(--wpli-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    font-weight: 800;
}
.wpli-hero h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.05; }
.wpli-hero__copy { margin: .65rem 0 0; color: var(--wpli-muted); max-width: 660px; }
.wpli-room-card {
    min-width: 160px;
    display: grid;
    gap: .45rem;
    padding: .85rem;
    border: 1px solid var(--wpli-border);
    border-radius: 18px;
    background: rgba(255,255,255,.85);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
.wpli-room-card span { font-size: .78rem; color: var(--wpli-muted); font-weight: 700; }
.wpli-setup-card {
    margin: 1rem 1.5rem 0;
    padding: 1rem;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(229,231,235,.9);
    border-radius: 22px;
    display: grid;
    gap: 1rem;
}
.wpli-language-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.wpli-room label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 700; color: #344054; }
.wpli-room select,
.wpli-room button {
    min-height: 42px;
    padding: .55rem .8rem;
    border-radius: 12px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: var(--wpli-ink);
}
.wpli-room button { cursor: pointer; font-weight: 800; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.wpli-room button:hover:not(:disabled) { transform: translateY(-1px); }
.wpli-room button:disabled { cursor: not-allowed; opacity: .55; }
.wpli-primary-button {
    color: #fff !important;
    border-color: var(--wpli-primary) !important;
    background: linear-gradient(180deg, var(--wpli-primary), var(--wpli-primary-dark)) !important;
    box-shadow: 0 10px 20px rgba(37,99,235,.24);
}
.wpli-secondary-button, .wpli-copy-link-button { background: #fff !important; }
.wpli-action-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.wpli-source-toggle { display: inline-flex !important; align-items: center; grid-template-columns: none !important; gap: .45rem; min-height: 42px; font-weight: 700; color: var(--wpli-muted); }
.wpli-source-toggle input { margin: 0; }
.wpli-consent { border:1px solid #fedf89; background:#fffbeb; padding:1rem; border-radius:16px; margin:1rem 1.5rem 0; }
.wpli-consent button { margin-top:.5rem; }
.wpli-live-panel { margin: 1rem 1.5rem 1.25rem; background: var(--wpli-surface); border: 1px solid var(--wpli-border); border-radius: 24px; overflow: hidden; }
.wpli-live-panel__top { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding: 1rem 1.15rem; border-bottom: 1px solid var(--wpli-border); background: rgba(249,250,251,.9); }
.wpli-status-wrap { display:flex; align-items:center; gap:.75rem; }
.wpli-pulse { width: 12px; height: 12px; border-radius: 999px; background: #9ca3af; box-shadow: 0 0 0 6px rgba(156,163,175,.14); }
.wpli-room[data-wpli-state="listening"] .wpli-pulse { background: var(--wpli-ok); box-shadow: 0 0 0 7px rgba(22,163,74,.12); animation: wpliPulse 1.3s infinite; }
.wpli-room[data-wpli-state="processing"] .wpli-pulse { background: #f59e0b; box-shadow: 0 0 0 7px rgba(245,158,11,.15); }
.wpli-room[data-wpli-state="error"] .wpli-pulse { background: #dc2626; box-shadow: 0 0 0 7px rgba(220,38,38,.12); }
@keyframes wpliPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.26); } 100% { box-shadow: 0 0 0 12px rgba(22,163,74,0); } }
.wpli-status-label { font-size: .74rem; color: var(--wpli-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.wpli-status { color: var(--wpli-ink); font-weight: 750; }
.wpli-participant-key { display:flex; gap:.5rem; align-items:center; color:var(--wpli-muted); font-size:.86rem; font-weight:700; }
.wpli-key-dot { width:10px; height:10px; border-radius:999px; display:inline-block; }
.wpli-key-dot--you { background: var(--wpli-you); }
.wpli-key-dot--partner { background: var(--wpli-partner); }
.wpli-captions {
    height: min(62vh, 650px);
    min-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.wpli-empty-state {
    margin: auto;
    max-width: 440px;
    display: grid;
    gap: .5rem;
    text-align: center;
    padding: 1.25rem;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    color: var(--wpli-muted);
    background: rgba(255,255,255,.82);
}
.wpli-empty-state strong { color: var(--wpli-ink); font-size: 1.05rem; }
.wpli-chat-message { display: flex; max-width: 82%; }
.wpli-chat-message--you { align-self: flex-end; justify-content: flex-end; }
.wpli-chat-message--partner { align-self: flex-start; }
.wpli-chat-bubble {
    border-radius: 22px;
    padding: .9rem 1rem;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .08);
    border: 1px solid transparent;
}
.wpli-chat-message--you .wpli-chat-bubble { background: linear-gradient(180deg, #2b6ff2, #1d4ed8); color: #fff; border-bottom-right-radius: 7px; }
.wpli-chat-message--partner .wpli-chat-bubble { background: #fff; color: var(--wpli-ink); border-color: var(--wpli-border); border-bottom-left-radius: 7px; }
.wpli-chat-message--processing .wpli-chat-bubble,
.wpli-chat-message--transcribed .wpli-chat-bubble { opacity: .82; }
.wpli-chat-message--failed .wpli-chat-bubble { background:#fff1f2; color:#991b1b; border-color:#fecdd3; }
.wpli-chat-meta { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; margin-bottom:.35rem; font-size:.72rem; font-weight:800; opacity:.78; }
.wpli-chat-state { padding:.1rem .38rem; border-radius:999px; background:rgba(255,255,255,.18); }
.wpli-chat-message--partner .wpli-chat-state { background:#f1f5f9; }
.wpli-chat-primary { font-size: clamp(1rem, 2vw, 1.24rem); font-weight: 800; line-height: 1.35; white-space: pre-wrap; }
.wpli-chat-secondary { margin-top:.55rem; padding-top:.55rem; border-top:1px solid rgba(255,255,255,.22); font-size:.93rem; line-height:1.38; opacity:.86; white-space: pre-wrap; }
.wpli-chat-message--partner .wpli-chat-secondary { border-top-color:#e5e7eb; color:var(--wpli-muted); }
.wpli-hide-source .wpli-chat-secondary { display:none; }
.wpli-room__footer { padding: 0 1.5rem 1.35rem; color: var(--wpli-muted); }
.wpli-create-room { display: grid; gap: .75rem; }
.wpli-create-room button { max-width: max-content; }
.wpli-create-room-result { color: var(--wpli-muted); }
[dir="rtl"] { direction: rtl; text-align: right; }
@media (max-width: 720px) {
    .wpli-room { margin: 1rem auto; }
    .wpli-hero, .wpli-live-panel__top { flex-direction: column; align-items: stretch; }
    .wpli-language-grid { grid-template-columns: 1fr; }
    .wpli-chat-message { max-width: 94%; }
    .wpli-captions { height: 62vh; min-height: 340px; padding: .85rem; }
}

/* Mode picker and local interpreter mode */
.wpli-mode-card {
    margin: 1rem 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.wpli-mode-button {
    text-align: left;
    display: grid;
    gap: .35rem;
    min-height: 88px !important;
    padding: 1rem !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid rgba(208,213,221,.9) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}
.wpli-mode-button strong { font-size: 1rem; color: var(--wpli-ink); }
.wpli-mode-button span { color: var(--wpli-muted); font-size: .86rem; line-height: 1.35; }
.wpli-mode-button.is-active {
    border-color: rgba(37,99,235,.72) !important;
    box-shadow: 0 14px 34px rgba(37,99,235,.14);
    background: linear-gradient(180deg, #ffffff, #eef5ff) !important;
}
.wpli-action-card { margin: 1rem 1.5rem 0; }
.wpli-room[data-mode="remote"] .wpli-local-setup,
.wpli-room[data-mode="remote"] .wpli-local-stage { display: none; }
.wpli-room[data-mode="local"] .wpli-remote-setup,
.wpli-room[data-mode="local"] .wpli-room-card,
.wpli-room[data-mode="local"] .wpli-participant-key { display: none; }
.wpli-local-speaker-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.wpli-speaker-button {
    min-height: 86px !important;
    padding: .95rem !important;
    display: grid;
    gap: .35rem;
    text-align: left;
    background: #fff !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 18px !important;
}
.wpli-speaker-button span { color: var(--wpli-muted); font-size: .82rem; font-weight: 800; }
.wpli-speaker-button strong { font-size: 1.08rem; color: var(--wpli-ink); }
.wpli-speaker-button.is-active {
    color: #fff !important;
    background: linear-gradient(180deg, var(--wpli-primary), var(--wpli-primary-dark)) !important;
    border-color: var(--wpli-primary) !important;
    box-shadow: 0 12px 24px rgba(37,99,235,.22);
}
.wpli-speaker-button.is-active span,
.wpli-speaker-button.is-active strong { color: #fff; }
.wpli-local-hint { margin: 0; color: var(--wpli-muted); font-size: .9rem; }
.wpli-local-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.1rem;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border-bottom: 1px solid var(--wpli-border);
}
.wpli-local-display {
    min-height: 240px;
    border-radius: 26px;
    padding: 1rem;
    display: grid;
    align-content: center;
    gap: .7rem;
    border: 1px solid var(--wpli-border);
    background: #fff;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .08);
}
.wpli-local-display--a { background: linear-gradient(180deg, #ffffff, #f8fafc); }
.wpli-local-display--b { background: linear-gradient(180deg, #eff6ff, #ffffff); border-color: rgba(37,99,235,.18); }
.wpli-local-display__label {
    color: var(--wpli-muted);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .76rem;
}
.wpli-local-display__text {
    font-size: clamp(1.7rem, 4.7vw, 3.35rem);
    line-height: 1.08;
    font-weight: 900;
    color: var(--wpli-ink);
    white-space: pre-wrap;
}
.wpli-local-display__source {
    color: var(--wpli-muted);
    border-top: 1px solid var(--wpli-border);
    padding-top: .65rem;
    font-size: clamp(.95rem, 2vw, 1.15rem);
    line-height: 1.35;
    white-space: pre-wrap;
}
.wpli-room[data-mode="local"] .wpli-captions {
    height: min(36vh, 360px);
    min-height: 220px;
}
@media (max-width: 720px) {
    .wpli-mode-card,
    .wpli-local-speaker-switch,
    .wpli-local-stage { grid-template-columns: 1fr; }
    .wpli-local-display { min-height: 190px; }
}

.wpli-voice-diagnostics {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #14532d;
    font-size: 14px;
}
.wpli-voice-diagnostics.is-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}
.wpli-speak-button {
    margin-top: 10px;
    border: 0;
    border-radius: 999px;
    padding: 6px 11px;
    background: rgba(15, 23, 42, 0.08);
    cursor: pointer;
    font-weight: 650;
}
.wpli-speak-button:hover { background: rgba(15, 23, 42, 0.14); }
.wpli-chat-message--partner .wpli-speak-button { background: rgba(255,255,255,0.2); }

/* v0.3.9 cleanup: quieter frontend, mode-specific controls only */
.wpli-room {
    max-width: 980px;
    margin: 1.25rem auto;
}
.wpli-shell {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 14px 42px rgba(15,23,42,.10);
}
.wpli-hero {
    padding: 1.15rem 1.25rem;
    background: #fff;
}
.wpli-hero h2 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
.wpli-hero__copy { font-size: .95rem; }
.wpli-room-card { box-shadow: none; }
.wpli-setup-card,
.wpli-action-card,
.wpli-live-panel {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
.wpli-setup-card {
    padding: .85rem;
    border-radius: 18px;
    background: #f9fafb;
}
.wpli-action-card {
    padding: .25rem 0 0;
}
.wpli-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    flex-wrap: wrap;
}
.wpli-action-row > button,
.wpli-action-row > .wpli-client-settings,
.wpli-action-row > .wpli-source-toggle {
    flex: 0 0 auto;
}
.wpli-start-button,
.wpli-stop-button {
    min-width: 116px;
}
.wpli-live-panel {
    border-radius: 20px;
}
.wpli-live-panel__top {
    padding: .85rem 1rem;
}
.wpli-captions {
    height: min(56vh, 540px);
    min-height: 300px;
    padding: .9rem;
}
.wpli-chat-message { max-width: 78%; }
.wpli-chat-bubble {
    padding: .78rem .9rem;
    box-shadow: 0 5px 18px rgba(15,23,42,.07);
}
.wpli-chat-primary { font-size: clamp(.98rem, 1.8vw, 1.15rem); }
.wpli-chat-secondary { font-size: .88rem; }
.wpli-room__footer { padding: 0 1.25rem 1.1rem; }
.wpli-room--locked .wpli-mode-card { display: none !important; }
.wpli-room[data-mode="local"] .wpli-hero { border-bottom: 0; }
.wpli-room[data-mode="local"] .wpli-setup-card { margin-top: .6rem; }
.wpli-room[data-mode="local"] .wpli-live-panel { margin-top: .85rem; }
.wpli-room[data-mode="local"] .wpli-live-panel__top { border-top: 1px solid var(--wpli-border); }
.wpli-room[data-mode="local"] .wpli-captions {
    height: min(28vh, 260px);
    min-height: 170px;
}
.wpli-local-stage {
    gap: .85rem;
    padding: .85rem;
}
.wpli-local-display {
    min-height: 190px;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(15,23,42,.07);
}
.wpli-local-display__text {
    font-size: clamp(1.55rem, 4.2vw, 3rem);
}
.wpli-local-hint { display: none; }
.wpli-voice-diagnostics {
    margin: .75rem 1.25rem 0;
}
@media (max-width: 720px) {
    .wpli-room { margin: .5rem auto; }
    .wpli-shell { border-radius: 16px; }
    .wpli-hero,
    .wpli-live-panel__top { gap: .75rem; }
    .wpli-setup-card,
    .wpli-action-card,
    .wpli-live-panel,
    .wpli-voice-diagnostics {
        margin-left: .65rem;
        margin-right: .65rem;
    }
    .wpli-chat-message { max-width: 96%; }
    .wpli-captions { min-height: 280px; }
    .wpli-local-display { min-height: 165px; }
}

/* v0.4.0: focused local mode for shortcode-selected language pairs */
.wpli-room--fixed-local-languages .wpli-shell { display: flex; flex-direction: column; }
.wpli-room--fixed-local-languages .wpli-hero { padding-bottom: .75rem; }
.wpli-room--fixed-local-languages .wpli-hero__copy { display: none; }
.wpli-room--fixed-local-languages .wpli-action-card { order: 2; margin-top: .5rem; }
.wpli-room--fixed-local-languages .wpli-consent { order: 3; }
.wpli-room--fixed-local-languages .wpli-voice-diagnostics { order: 4; }
.wpli-room--fixed-local-languages .wpli-local-setup { order: 5; }
.wpli-room--fixed-local-languages .wpli-live-panel { order: 6; }
.wpli-room--fixed-local-languages .wpli-local-setup .wpli-language-grid,
.wpli-room--fixed-local-languages .wpli-local-hint { display: none !important; }
.wpli-fixed-language-summary { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem .85rem; border-radius: 999px; background: #f7fbff; border: 1px solid var(--wpli-border); color: var(--wpli-ink); margin-bottom: .75rem; }
.wpli-fixed-language-summary span { color: var(--wpli-muted); font-weight: 700; }
.wpli-room--fixed-local-languages .wpli-action-row { justify-content: center; }
.wpli-room--fixed-local-languages .wpli-start-button { font-size: 1.08rem; padding: .95rem 1.35rem; }
.wpli-room--fixed-local-languages .wpli-source-toggle { display: none; }

/* v0.4.1: ultra-compact local interpreter on phones */
@media (max-width: 720px) {
    .wpli-room--fixed-local-languages { margin: 0 auto; min-height: 100svh; }
    .wpli-room--fixed-local-languages .wpli-shell { min-height: 100svh; border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; }
    .wpli-room--fixed-local-languages .wpli-hero { padding: .55rem .7rem .25rem; border-bottom: 0; }
    .wpli-room--fixed-local-languages .wpli-eyebrow,
    .wpli-room--fixed-local-languages .wpli-hero h2,
    .wpli-room--fixed-local-languages .wpli-room__footer,
    .wpli-room--fixed-local-languages .wpli-empty-state,
    .wpli-room--fixed-local-languages .wpli-status-label { display: none !important; }
    .wpli-room--fixed-local-languages .wpli-action-card { order: 1; margin: .35rem .55rem 0; }
    .wpli-room--fixed-local-languages .wpli-action-row { display: grid; grid-template-columns: 1fr auto; gap: .45rem; }
    .wpli-room--fixed-local-languages .wpli-start-button { min-height: 46px; width: 100%; font-size: 1rem; padding: .7rem .8rem; }
    .wpli-room--fixed-local-languages .wpli-stop-button { min-width: 62px; min-height: 46px; padding: .5rem .65rem; font-size: .86rem; }
    .wpli-room--fixed-local-languages .wpli-local-setup { order: 2; margin: .45rem .55rem 0; padding: .45rem; border-radius: 14px; }
    .wpli-room--fixed-local-languages .wpli-fixed-language-summary { width: 100%; justify-content: center; margin: 0 0 .45rem; padding: .32rem .5rem; font-size: .82rem; }
    .wpli-room--fixed-local-languages .wpli-local-speaker-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
    .wpli-room--fixed-local-languages .wpli-speaker-button { min-height: 48px !important; padding: .42rem .5rem !important; border-radius: 12px !important; text-align: center; gap: .12rem; }
    .wpli-room--fixed-local-languages .wpli-speaker-button span { font-size: .64rem; line-height: 1; }
    .wpli-room--fixed-local-languages .wpli-speaker-button strong { font-size: .88rem; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wpli-room--fixed-local-languages .wpli-live-panel { order: 3; margin: .45rem .55rem .4rem; border-radius: 16px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .wpli-room--fixed-local-languages .wpli-live-panel__top { padding: .42rem .55rem; min-height: 34px; }
    .wpli-room--fixed-local-languages .wpli-status-wrap { gap: .45rem; }
    .wpli-room--fixed-local-languages .wpli-pulse { width: 9px; height: 9px; box-shadow: 0 0 0 4px rgba(156,163,175,.12); }
    .wpli-room--fixed-local-languages .wpli-status { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wpli-room--fixed-local-languages .wpli-local-stage { grid-template-columns: 1fr; gap: .45rem; padding: .45rem; flex: 1; min-height: 0; }
    .wpli-room--fixed-local-languages[data-latest-target-side="a"] .wpli-local-display--b,
    .wpli-room--fixed-local-languages[data-latest-target-side="b"] .wpli-local-display--a { display: none; }
    .wpli-room--fixed-local-languages:not([data-latest-target-side]) .wpli-local-display { min-height: 112px; }
    .wpli-room--fixed-local-languages:not([data-latest-target-side]) .wpli-local-display__source { display: none; }
    .wpli-room--fixed-local-languages .wpli-local-display { min-height: 175px; padding: .75rem; border-radius: 18px; box-shadow: none; align-content: center; }
    .wpli-room--fixed-local-languages .wpli-local-display__label { font-size: .65rem; }
    .wpli-room--fixed-local-languages .wpli-local-display__text { font-size: clamp(1.45rem, 8.5vw, 2.75rem); line-height: 1.06; max-height: 8.4rem; overflow: hidden; }
    .wpli-room--fixed-local-languages .wpli-local-display__source { font-size: .82rem; max-height: 2.4rem; overflow: hidden; padding-top: .35rem; }
    .wpli-room--fixed-local-languages .wpli-captions { height: auto; min-height: 0; max-height: 116px; overflow: hidden; padding: .45rem; gap: .35rem; border-top: 1px solid var(--wpli-border); flex: 0 0 auto; }
    .wpli-room--fixed-local-languages .wpli-captions .wpli-chat-message { display: none; max-width: 100%; }
    .wpli-room--fixed-local-languages .wpli-captions .wpli-chat-message:nth-last-child(-n+2) { display: flex; }
    .wpli-room--fixed-local-languages .wpli-chat-bubble { width: 100%; padding: .38rem .5rem; border-radius: 12px; box-shadow: none; }
    .wpli-room--fixed-local-languages .wpli-chat-meta,
    .wpli-room--fixed-local-languages .wpli-speak-button { display: none !important; }
    .wpli-room--fixed-local-languages .wpli-chat-primary { font-size: .86rem; line-height: 1.18; max-height: 2.1em; overflow: hidden; }
    .wpli-room--fixed-local-languages .wpli-chat-secondary { display: none !important; }
    .wpli-room--fixed-local-languages .wpli-consent { margin: .45rem .55rem 0; padding: .55rem; font-size: .85rem; }
    .wpli-room--fixed-local-languages .wpli-consent button { width: 100%; }
}


/* v0.4.2: app-shell mode and ultra-minimal mobile local display */
html.wpli-app-page-active,
body.wpli-app-page-active {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100%;
    background: #f8fafc !important;
    overflow-x: hidden;
}
body.wpli-app-page header,
body.wpli-app-page footer,
body.wpli-app-page nav,
body.wpli-app-page .site-header,
body.wpli-app-page .site-footer,
body.wpli-app-page .main-header,
body.wpli-app-page .main-footer,
body.wpli-app-page #masthead,
body.wpli-app-page #colophon,
body.wpli-app-page #site-header,
body.wpli-app-page #site-footer,
body.wpli-app-page .elementor-location-header,
body.wpli-app-page .elementor-location-footer,
body.wpli-app-page .wp-site-blocks > header,
body.wpli-app-page .wp-site-blocks > footer,
body.wpli-app-page .entry-header,
body.wpli-app-page .entry-footer,
body.wpli-app-page .page-header,
body.wpli-app-page .comments-area,
body.wpli-app-page aside,
body.wpli-app-page .sidebar {
    display: none !important;
}
body.wpli-app-page .site,
body.wpli-app-page .site-content,
body.wpli-app-page .content-area,
body.wpli-app-page main,
body.wpli-app-page article,
body.wpli-app-page .entry-content,
body.wpli-app-page .wp-site-blocks,
body.wpli-app-page .wp-block-post-content,
body.wpli-app-page .elementor,
body.wpli-app-page .elementor-section,
body.wpli-app-page .elementor-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wpli-room--app-mode {
    width: 100%;
    max-width: none;
    margin: 0 auto;
}
.wpli-room--app-mode .wpli-shell {
    max-width: 1120px;
    margin: 0 auto;
}
.wpli-fullscreen-button { min-width: 104px; }
.wpli-room--app-mode:fullscreen {
    background: #f8fafc;
    overflow: auto;
}
.wpli-room--app-mode:fullscreen .wpli-shell {
    min-height: 100vh;
    max-width: none;
    border-radius: 0;
}

@media (min-width: 721px) {
    .wpli-room--app-mode .wpli-action-row {
        justify-content: center;
    }
}

@media (max-width: 720px) {
    body.wpli-app-page .wpli-room { margin: 0 !important; }
    .wpli-room--app-mode .wpli-shell {
        border-radius: 0;
        box-shadow: none;
        min-height: 100svh;
    }
    .wpli-room--app-mode .wpli-room-card,
    .wpli-room--app-mode .wpli-hero,
    .wpli-room--app-mode .wpli-voice-diagnostics,
    .wpli-room--app-mode .wpli-room__footer {
        display: none !important;
    }
    .wpli-room--app-mode .wpli-action-card {
        order: 1;
        margin: 0 !important;
        padding: .45rem .55rem .35rem;
        position: sticky;
        top: 0;
        z-index: 20;
        background: rgba(248, 250, 252, .96);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(226,232,240,.9);
    }
    .wpli-room--app-mode .wpli-action-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: .4rem;
        align-items: stretch;
    }
    .wpli-room--app-mode .wpli-action-row > button,
    .wpli-room--app-mode .wpli-settings-button {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: .55rem .4rem;
        font-size: .86rem;
        border-radius: 12px;
        white-space: nowrap;
    }
    .wpli-room--app-mode .wpli-source-toggle { display: none !important; }
    .wpli-room--fixed-local-languages .wpli-local-setup {
        order: 2;
        margin: .35rem .45rem 0 !important;
        padding: .35rem !important;
    }
    .wpli-room--fixed-local-languages .wpli-fixed-language-summary {
        display: none !important;
    }
    .wpli-room--fixed-local-languages .wpli-local-speaker-switch {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: .35rem;
    }
    .wpli-room--fixed-local-languages .wpli-speaker-button {
        min-height: 44px !important;
        padding: .32rem .42rem !important;
        border-radius: 12px !important;
    }
    .wpli-room--fixed-local-languages .wpli-speaker-button span {
        display: none !important;
    }
    .wpli-room--fixed-local-languages .wpli-speaker-button strong {
        font-size: .9rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wpli-room--fixed-local-languages .wpli-live-panel {
        order: 3;
        margin: .35rem .45rem .45rem !important;
        border-radius: 16px;
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    .wpli-room--fixed-local-languages .wpli-live-panel__top {
        padding: .35rem .45rem !important;
        min-height: 30px;
    }
    .wpli-room--fixed-local-languages .wpli-participant-key,
    .wpli-room--fixed-local-languages .wpli-status-label {
        display: none !important;
    }
    .wpli-room--fixed-local-languages .wpli-status {
        font-size: .78rem;
        max-width: 92vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .wpli-room--fixed-local-languages .wpli-local-stage {
        display: block;
        padding: .45rem;
        flex: 1 1 auto;
        min-height: 0;
    }
    .wpli-room--fixed-local-languages .wpli-local-display {
        display: none !important;
        min-height: calc(100svh - 185px) !important;
        height: calc(100svh - 185px);
        padding: .75rem !important;
        border-radius: 18px !important;
        box-shadow: none !important;
        align-content: center;
        overflow: hidden;
    }
    .wpli-room--fixed-local-languages:not([data-latest-target-side]) .wpli-local-display--b,
    .wpli-room--fixed-local-languages[data-latest-target-side="b"] .wpli-local-display--b,
    .wpli-room--fixed-local-languages[data-latest-target-side="a"] .wpli-local-display--a {
        display: grid !important;
    }
    .wpli-room--fixed-local-languages:not([data-latest-target-side]) .wpli-local-display--b .wpli-local-display__label,
    .wpli-room--fixed-local-languages:not([data-latest-target-side]) .wpli-local-display--b .wpli-local-display__source {
        display: none !important;
    }
    .wpli-room--fixed-local-languages:not([data-latest-target-side]) .wpli-local-display--b .wpli-local-display__text::before {
        content: 'Press Start and speak';
    }
    .wpli-room--fixed-local-languages:not([data-latest-target-side]) .wpli-local-display--b .wpli-local-display__text {
        color: transparent;
    }
    .wpli-room--fixed-local-languages:not([data-latest-target-side]) .wpli-local-display--b .wpli-local-display__text::before {
        color: #64748b;
    }
    .wpli-room--fixed-local-languages .wpli-local-display__label {
        font-size: .68rem !important;
        margin-bottom: .4rem;
    }
    .wpli-room--fixed-local-languages .wpli-local-display__text {
        font-size: clamp(1.7rem, 11vw, 3.5rem) !important;
        line-height: 1.04 !important;
        max-height: calc(100svh - 260px) !important;
        overflow: hidden;
    }
    .wpli-room--fixed-local-languages .wpli-local-display__source {
        display: none !important;
    }
    .wpli-room--fixed-local-languages .wpli-captions {
        display: none !important;
    }
    .wpli-room--fixed-local-languages .wpli-consent {
        margin: .45rem .55rem 0 !important;
        padding: .55rem !important;
    }
}


/* v0.4.4 remote speaker voice and tighter local controls */
.wpli-remote-voice-gender {
    display:flex;
    flex-wrap:wrap;
    gap:.6rem .85rem;
    align-items:center;
    margin-top:.75rem;
    color:var(--wpli-muted);
    font-size:.88rem;
}
.wpli-remote-voice-gender label { display:inline-flex; align-items:center; gap:.28rem; color:var(--wpli-ink); font-weight:700; }
.wpli-speaker-button { align-items:center !important; justify-items:center; text-align:center; }
.wpli-speaker-button span, .wpli-speaker-button strong { align-self:center; }
.wpli-history-chat { max-width: 920px; display:grid; gap:.75rem; }
.wpli-history-message { background:#fff; border:1px solid #dcdcde; border-radius:10px; padding:.85rem 1rem; }
.wpli-history-message--b { background:#f8fafc; }
.wpli-history-meta { display:flex; gap:.5rem; flex-wrap:wrap; color:#646970; font-size:12px; margin-bottom:.45rem; }
.wpli-history-original { color:#475569; margin-bottom:.35rem; }
.wpli-history-translation { font-size:1.05rem; font-weight:700; color:#111827; }
.wpli-history-error { color:#b91c1c; }
@media (max-width: 720px) {
    .wpli-room--fixed-local-languages .wpli-speaker-button { display:flex !important; align-items:center !important; justify-content:center !important; }
    .wpli-room--fixed-local-languages .wpli-speaker-button strong { line-height:1 !important; }
}

/* v0.5.0: adaptive local translation text sizing */
.wpli-local-display__text {
    overflow-wrap: anywhere;
    word-break: normal;
}
.wpli-local-display__text--fitted {
    transition: font-size .12s ease;
}
@media (max-width: 720px) {
    .wpli-room--fixed-local-languages .wpli-local-display__text {
        max-height: clamp(8.4rem, 45svh, 18rem);
        overflow: hidden;
    }
}

/* v0.5.2: TTS pacing warnings and stronger adaptive text fitting */
.wpli-tts-queue-warning {
    margin: .75rem 1.25rem 0;
    padding: .72rem .9rem;
    border-radius: 14px;
    border: 1px solid #fbbf24;
    background: #fffbeb;
    color: #78350f;
    font-weight: 800;
    line-height: 1.35;
}
.wpli-tts-queue-warning.is-visible { animation: wpliQueuePulse 1.1s ease-in-out 2; }
@keyframes wpliQueuePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
.wpli-local-display__text--fitted {
    word-break: break-word;
    overflow-wrap: anywhere;
}
@media (max-width: 720px) {
    .wpli-room--fixed-local-languages .wpli-tts-queue-warning {
        margin: .35rem .55rem 0;
        padding: .45rem .55rem;
        font-size: .78rem;
        border-radius: 12px;
    }
    .wpli-room--fixed-local-languages .wpli-local-display__text {
        max-height: none;
    }
}

/* v0.5.9: Pause / Resume capture control */
.wpli-start-button.is-paused {
    background: #fff7ed !important;
    border-color: #fb923c !important;
    color: #9a3412 !important;
    box-shadow: 0 8px 20px rgba(251,146,60,.12) !important;
}
.wpli-start-button.is-capturing {
    box-shadow: 0 10px 24px rgba(37,99,235,.22), 0 0 0 4px rgba(37,99,235,.10) !important;
}
.wpli-room[data-wpli-state="paused"] .wpli-pulse {
    background: #f97316;
    box-shadow: 0 0 0 5px rgba(249,115,22,.12);
}
@media (max-width: 720px) {
    .wpli-room--app-mode .wpli-action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .wpli-room--app-mode .wpli-action-row > button,
    .wpli-room--app-mode .wpli-settings-button {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: .5rem .35rem;
        font-size: .78rem;
        border-radius: 12px;
        white-space: nowrap;
    }
}

/* v0.6.0 shared room controls */
.wpli-host-controls{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.5rem}
.wpli-host-controls[hidden]{display:none!important}
.wpli-host-controls button{border:1px solid rgba(15,23,42,.14);background:#fff;border-radius:999px;padding:.42rem .65rem;font-size:.82rem;cursor:pointer;color:#0f172a}
.wpli-host-controls button:hover{background:#f8fafc}
.wpli-host-controls .wpli-end-room-button{color:#b91c1c;border-color:rgba(185,28,28,.22)}
.wpli-host-controls .wpli-lock-room-button.is-locked{background:#0f172a;color:#fff;border-color:#0f172a}
.wpli-speech-toggle-button.is-off{background:#f1f5f9!important;color:#64748b!important;border-color:#cbd5e1!important}
.wpli-participant-status{display:inline-flex;align-items:center;gap:.45rem;border:1px solid rgba(15,23,42,.1);background:#fff;border-radius:999px;padding:.38rem .65rem;font-size:.86rem;color:#64748b;white-space:nowrap}
.wpli-participant-status__dot{width:.55rem;height:.55rem;border-radius:999px;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.14)}
.wpli-participant-status.is-connected{color:#047857;background:#ecfdf5;border-color:rgba(4,120,87,.18)}
.wpli-participant-status.is-connected .wpli-participant-status__dot{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.16)}
.wpli-participant-status.is-ended{color:#b91c1c;background:#fef2f2;border-color:rgba(185,28,28,.18)}
.wpli-participant-status.is-ended .wpli-participant-status__dot{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.14)}
@media (max-width:720px){.wpli-host-controls{justify-content:center}.wpli-participant-status{font-size:.78rem;padding:.32rem .52rem}.wpli-speech-toggle-button{min-width:auto}}

/* v0.6.2: remote room as a chat-first interface */
.wpli-room[data-mode="remote"] .wpli-share-link-button,
.wpli-room[data-mode="remote"] .wpli-copy-link-button {
    background: linear-gradient(180deg, #eff6ff, #dbeafe) !important;
    border-color: rgba(37, 99, 235, .35) !important;
    color: #1d4ed8 !important;
}
.wpli-room[data-mode="local"] .wpli-share-link-button { display: none !important; }
.wpli-room[data-mode="remote"] .wpli-live-panel {
    display: flex;
    flex-direction: column;
}
.wpli-room[data-mode="remote"] .wpli-captions {
    flex: 1;
    height: min(68vh, 720px);
    min-height: 460px;
    padding: 1.25rem 1.35rem;
    gap: .7rem;
}
.wpli-room[data-mode="remote"] .wpli-empty-state {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.wpli-room[data-mode="remote"] .wpli-chat-message {
    max-width: min(78%, 720px);
}
.wpli-room[data-mode="remote"] .wpli-chat-bubble {
    box-shadow: 0 4px 16px rgba(15, 23, 42, .07);
}
.wpli-room[data-mode="remote"] .wpli-chat-primary {
    font-size: clamp(1rem, 1.35vw, 1.16rem);
    font-weight: 750;
}
.wpli-room[data-mode="remote"] .wpli-chat-secondary {
    font-size: .88rem;
}
.wpli-room[data-mode="remote"] .wpli-local-stage {
    display: none !important;
}
@media (max-width: 720px) {
    .wpli-room[data-mode="remote"] .wpli-captions {
        height: calc(100svh - 210px);
        min-height: 280px;
        padding: .75rem;
        gap: .55rem;
    }
    .wpli-room[data-mode="remote"] .wpli-chat-message { max-width: 92%; }
    .wpli-room[data-mode="remote"] .wpli-chat-bubble { padding: .7rem .78rem; border-radius: 18px; }
    .wpli-room[data-mode="remote"] .wpli-chat-meta { font-size: .66rem; margin-bottom: .25rem; }
    .wpli-room[data-mode="remote"] .wpli-chat-primary { font-size: .98rem; line-height: 1.28; }
    .wpli-room[data-mode="remote"] .wpli-chat-secondary { font-size: .78rem; margin-top: .35rem; padding-top: .35rem; }
    .wpli-room[data-mode="remote"] .wpli-action-row { gap: .38rem; }
    .wpli-room[data-mode="remote"] .wpli-action-row button { padding: .45rem .55rem; min-height: 38px; font-size: .78rem; }
}

/* v0.7.1 member account dashboard */
.wpli-account{max-width:1100px;margin:2rem auto;padding:0 1rem;color:#0f172a;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wpli-account-hero,.wpli-account-card,.wpli-account-header{background:rgba(255,255,255,.92);border:1px solid rgba(15,23,42,.08);border-radius:24px;box-shadow:0 14px 42px rgba(15,23,42,.08)}
.wpli-account-hero{padding:2rem;text-align:center;max-width:680px;margin:2rem auto}
.wpli-account-hero h2,.wpli-account h2,.wpli-account h3{margin:.1rem 0 .55rem;line-height:1.15;color:#0f172a}
.wpli-account-hero p,.wpli-account-card p{color:#64748b;margin:.35rem 0 1rem;line-height:1.55}
.wpli-account-primary,.wpli-account .wpli-create-room-button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:linear-gradient(180deg,#2563eb,#1d4ed8);color:#fff!important;text-decoration:none;padding:.82rem 1.25rem;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(37,99,235,.22)}
.wpli-account .wpli-create-room-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.wpli-account-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.25rem 1.4rem;margin-bottom:1rem}
.wpli-account-eyebrow{margin:0;color:#64748b;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.74rem}
.wpli-account-balance{text-align:right;background:#f8fafc;border:1px solid rgba(15,23,42,.06);border-radius:18px;padding:.8rem 1rem;min-width:220px}
.wpli-account-balance span,.wpli-account-balance small{display:block;color:#64748b;font-size:.82rem}
.wpli-account-balance strong{display:block;font-size:1.75rem;color:#047857;line-height:1.05;margin:.15rem 0}
.wpli-account-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.wpli-account-grid--wide{grid-template-columns:1.35fr 1fr}
.wpli-account-card{padding:1.25rem}
.wpli-account-warning{border-radius:14px;background:#fff7ed;border:1px solid rgba(234,88,12,.18);color:#9a3412;padding:.7rem .85rem;margin:.6rem 0;font-weight:700}
.wpli-create-room-result{margin-top:.75rem;font-weight:700}.wpli-create-room-result a{color:#1d4ed8}
.wpli-credit-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.9rem}
.wpli-credit-pack{border:1px solid rgba(15,23,42,.1);background:#f8fafc;border-radius:18px;padding:.85rem .7rem;font-size:1.15rem;font-weight:900;color:#0f172a}.wpli-credit-pack span{display:block;font-size:.72rem;font-weight:700;color:#64748b;margin-top:.2rem}
.wpli-account-table-wrap{overflow:auto}.wpli-account-table{width:100%;border-collapse:collapse;font-size:.88rem}.wpli-account-table th,.wpli-account-table td{padding:.55rem .45rem;border-bottom:1px solid rgba(15,23,42,.08);text-align:left}.wpli-account-table th{color:#64748b;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}.wpli-account-table code{background:#f1f5f9;border-radius:8px;padding:.12rem .35rem}
.wpli-ledger-row{display:grid;grid-template-columns:88px 88px 1fr;gap:.55rem;padding:.55rem 0;border-bottom:1px solid rgba(15,23,42,.08);align-items:center}.wpli-ledger-row span,.wpli-ledger-row small{color:#64748b}.wpli-ledger-row strong{color:#0f172a}.wpli-buy-placeholder{background:#fff;border-radius:24px;border:1px solid rgba(15,23,42,.08);box-shadow:0 14px 42px rgba(15,23,42,.08);padding:1.5rem}
@media(max-width:760px){.wpli-account{margin:.75rem auto;padding:.75rem}.wpli-account-header,.wpli-account-grid,.wpli-account-grid--wide{display:block}.wpli-account-header{padding:1rem}.wpli-account-balance{text-align:left;margin-top:.8rem}.wpli-account-card{margin-bottom:.85rem;padding:1rem}.wpli-credit-packs{grid-template-columns:1fr 1fr 1fr}.wpli-ledger-row{grid-template-columns:74px 72px 1fr;font-size:.82rem}.wpli-account-table{font-size:.8rem}}

/* Phase 3D commercial package polish */
.wpli-credit-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}
.wpli-credit-pack-form { margin: 0; }
.wpli-credit-pack {
    width: 100%;
    min-height: 150px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #f8fafc);
    color: #0f172a;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wpli-credit-pack:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10); }
.wpli-credit-pack:disabled { opacity: .55; cursor: not-allowed; }
.wpli-credit-pack em {
    align-self: flex-start;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: #0f766e;
    background: #ccfbf1;
    border-radius: 999px;
    padding: 3px 8px;
}
.wpli-credit-pack strong { font-size: 30px; line-height: 1; }
.wpli-credit-pack span { font-weight: 800; }
.wpli-credit-pack small { color: #64748b; line-height: 1.35; }
.wpli-credit-pack-desc { margin-top: 2px; }
.wpli-account-ledger--compact .wpli-ledger-row small { max-width: 100%; }

/* v0.7.5: mobile local controls use Start as Pause/Resume to save space. */
@media (max-width: 720px) {
    .wpli-room--fixed-local-languages[data-mode="local"].wpli-room--app-mode .wpli-action-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-start-button,
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-stop-button,
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-fullscreen-button,
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-speech-toggle-button,
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-settings-button {
        min-width: 0 !important;
        width: 100% !important;
        padding-left: .25rem !important;
        padding-right: .25rem !important;
        font-size: .74rem !important;
        white-space: nowrap !important;
    }
}
.wpli-language-grid--remote-listen {
    grid-template-columns: minmax(220px, 420px);
}

.wpli-client-settings {
    position: relative;
    display: inline-flex;
    align-items: stretch;
}
.wpli-settings-button {
    min-width: 104px;
}
.wpli-client-settings.is-open .wpli-settings-button {
    background: #f8fafc !important;
    border-color: rgba(37,99,235,.28) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.10);
}
.wpli-client-settings-panel {
    position: absolute;
    right: 0;
    top: calc(100% + .55rem);
    width: min(360px, calc(100vw - 2rem));
    padding: .85rem;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 42px rgba(15,23,42,.16);
    z-index: 40;
    text-align: left;
}
.wpli-client-settings-panel[hidden] { display: none !important; }
.wpli-client-settings__header {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: baseline;
    margin-bottom: .7rem;
}
.wpli-client-settings__header strong {
    color: var(--wpli-ink);
    font-size: .98rem;
}
.wpli-client-settings__header span {
    color: var(--wpli-muted);
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}
.wpli-client-setting-label {
    display: block;
    color: #475569;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .01em;
    margin-bottom: .45rem;
}
.wpli-capture-mode-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}
.wpli-capture-mode-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .24rem;
    min-height: 92px;
    padding: .72rem .75rem;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 16px;
    background: #f8fafc;
    color: var(--wpli-ink);
    text-align: left;
    box-shadow: none;
}
.wpli-capture-mode-option:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #fff;
}
.wpli-capture-mode-option strong {
    font-size: .88rem;
    line-height: 1.15;
}
.wpli-capture-mode-option span {
    color: var(--wpli-muted);
    font-size: .74rem;
    line-height: 1.25;
    font-weight: 700;
}
.wpli-capture-mode-option.is-active {
    background: linear-gradient(180deg, #eff6ff, #dbeafe);
    border-color: rgba(37,99,235,.45);
    color: #1d4ed8;
    box-shadow: 0 8px 20px rgba(37,99,235,.12);
}
.wpli-capture-mode-option.is-active span {
    color: #2563eb;
}
.wpli-client-settings-hint {
    margin: .65rem .05rem 0;
    color: var(--wpli-muted);
    font-size: .78rem;
    line-height: 1.35;
}
@media (max-width: 900px) {
    .wpli-room--app-mode .wpli-client-settings { width: 100%; }
    .wpli-room--app-mode .wpli-settings-button { width: 100%; min-width: 0; }
    .wpli-room--app-mode .wpli-client-settings-panel {
        position: fixed !important;
        left: max(.75rem, env(safe-area-inset-left));
        right: max(.75rem, env(safe-area-inset-right));
        top: auto !important;
        bottom: max(.75rem, env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        max-height: min(70svh, 460px);
        overflow: auto;
        border-radius: 22px;
        z-index: 1000;
    }
    .wpli-room--app-mode .wpli-capture-mode-options { grid-template-columns: 1fr; }
    .wpli-room--app-mode .wpli-capture-mode-option { min-height: auto; }
}
@media (max-width: 720px) {
    .wpli-client-settings { width: 100%; }
    .wpli-settings-button { width: 100%; min-width: 0; }
}
.wpli-room__footer small {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* v0.7.13: standalone local interpreter UX reset. */
.wpli-room[data-mode="remote"] .wpli-settings-local-only { display: none !important; }
.wpli-room[data-mode="local"] .wpli-local-setup,
.wpli-room[data-mode="local"] .wpli-local-stage,
.wpli-room[data-mode="local"] .wpli-source-toggle,
.wpli-room[data-mode="local"] .wpli-fullscreen-button,
.wpli-room[data-mode="local"] .wpli-speech-toggle-button,
.wpli-room[data-mode="local"] .wpli-share-link-button,
.wpli-room[data-mode="local"] .wpli-copy-link-button {
    display: none !important;
}
.wpli-room[data-mode="local"] .wpli-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(88px, .42fr) minmax(112px, .55fr);
    gap: .55rem;
    align-items: stretch;
    justify-content: stretch;
}
.wpli-room[data-mode="local"] .wpli-action-row > .wpli-client-settings,
.wpli-room[data-mode="local"] .wpli-start-button,
.wpli-room[data-mode="local"] .wpli-stop-button,
.wpli-room[data-mode="local"] .wpli-settings-button {
    width: 100% !important;
    min-width: 0 !important;
}
.wpli-room[data-mode="local"] .wpli-live-panel {
    display: flex;
    flex-direction: column;
}
.wpli-room[data-mode="local"] .wpli-live-panel__top {
    flex: 0 0 auto;
}
.wpli-room[data-mode="local"] .wpli-captions,
.wpli-room--fixed-local-languages[data-mode="local"] .wpli-captions {
    display: flex !important;
    flex-direction: column;
    height: min(68vh, 720px) !important;
    min-height: 420px !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 1rem !important;
    gap: .72rem !important;
    border-top: 0 !important;
}
.wpli-room[data-mode="local"] .wpli-chat-message,
.wpli-room--fixed-local-languages[data-mode="local"] .wpli-captions .wpli-chat-message,
.wpli-room--fixed-local-languages[data-mode="local"] .wpli-captions .wpli-chat-message:nth-last-child(-n+2) {
    display: flex !important;
    width: 100%;
    max-width: 100% !important;
    align-self: stretch;
}
.wpli-room[data-mode="local"] .wpli-chat-bubble {
    width: 100%;
    border-radius: 20px !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    border-left: 5px solid rgba(37,99,235,.65) !important;
    background: #fff !important;
    color: var(--wpli-ink) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.07) !important;
    padding: .9rem 1rem !important;
}
.wpli-room[data-mode="local"] .wpli-chat-meta,
.wpli-room--fixed-local-languages[data-mode="local"] .wpli-chat-meta {
    display: flex !important;
    color: #64748b;
    font-size: .73rem;
    margin-bottom: .4rem;
}
.wpli-room[data-mode="local"] .wpli-chat-state {
    background: #eef2ff;
    color: #1d4ed8;
}
.wpli-room[data-mode="local"] .wpli-chat-primary {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem) !important;
    line-height: 1.34 !important;
    color: var(--wpli-ink);
    max-height: none !important;
    overflow: visible !important;
}
.wpli-room[data-mode="local"] .wpli-chat-secondary,
.wpli-room--fixed-local-languages[data-mode="local"] .wpli-chat-secondary {
    display: block !important;
    border-top-color: #e5e7eb;
    color: var(--wpli-muted);
    font-size: .9rem;
}
.wpli-room[data-mode="local"] .wpli-speak-button {
    display: inline-flex !important;
}
.wpli-settings-language-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}
.wpli-settings-language-grid label {
    display: grid;
    gap: .35rem;
    font-size: .82rem;
    color: #475569;
}
.wpli-settings-language-grid select {
    width: 100%;
}
.wpli-settings-language-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .65rem .8rem;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    background: #f8fafc;
    color: var(--wpli-ink);
}
.wpli-settings-toggle-list {
    display: grid;
    gap: .5rem;
}
.wpli-settings-toggle {
    width: 100%;
    min-height: 58px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    text-align: left;
    padding: .65rem .7rem !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15,23,42,.1) !important;
    box-shadow: none !important;
}
.wpli-settings-toggle:hover:not(:disabled) {
    transform: translateY(-1px);
    background: #fff !important;
}
.wpli-settings-toggle span {
    display: grid;
    gap: .16rem;
    min-width: 0;
}
.wpli-settings-toggle strong {
    color: var(--wpli-ink);
    font-size: .88rem;
    line-height: 1.15;
}
.wpli-settings-toggle small {
    color: var(--wpli-muted);
    font-size: .73rem;
    line-height: 1.25;
    font-weight: 700;
}
.wpli-settings-toggle b {
    flex: 0 0 auto;
    min-width: 44px;
    padding: .26rem .45rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .74rem;
    text-align: center;
}
.wpli-settings-toggle.is-on {
    background: linear-gradient(180deg, #eff6ff, #dbeafe) !important;
    border-color: rgba(37,99,235,.35) !important;
}
.wpli-settings-toggle.is-on b {
    background: #1d4ed8;
    color: #fff;
}
@media (max-width: 900px) {
    .wpli-room--app-mode .wpli-client-settings-panel {
        padding: .95rem !important;
    }
    .wpli-room--app-mode .wpli-client-settings__header {
        position: sticky;
        top: 0;
        background: rgba(255,255,255,.98);
        padding-bottom: .55rem;
        z-index: 1;
    }
}
@media (max-width: 720px) {
    .wpli-room[data-mode="local"].wpli-room--app-mode .wpli-action-row,
    .wpli-room--fixed-local-languages[data-mode="local"].wpli-room--app-mode .wpli-action-row {
        grid-template-columns: minmax(0, 1fr) minmax(72px, .45fr) minmax(86px, .55fr) !important;
        gap: .4rem;
    }
    .wpli-room[data-mode="local"].wpli-room--app-mode .wpli-start-button,
    .wpli-room[data-mode="local"].wpli-room--app-mode .wpli-stop-button,
    .wpli-room[data-mode="local"].wpli-room--app-mode .wpli-settings-button {
        min-height: 42px !important;
        font-size: .82rem !important;
        padding: .5rem .38rem !important;
    }
    .wpli-room[data-mode="local"] .wpli-live-panel,
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-live-panel {
        margin: .45rem .55rem .45rem !important;
        flex: 1 1 auto;
        min-height: 0;
    }
    .wpli-room[data-mode="local"] .wpli-captions,
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-captions {
        height: calc(100svh - 120px) !important;
        min-height: 320px !important;
        padding: .72rem !important;
        gap: .58rem !important;
    }
    .wpli-room[data-mode="local"] .wpli-chat-bubble {
        border-radius: 18px !important;
        padding: .78rem .82rem !important;
    }
    .wpli-room[data-mode="local"] .wpli-chat-meta {
        font-size: .66rem !important;
        gap: .35rem;
    }
    .wpli-room[data-mode="local"] .wpli-chat-primary {
        font-size: 1rem !important;
        line-height: 1.28 !important;
    }
    .wpli-room[data-mode="local"] .wpli-chat-secondary {
        font-size: .8rem !important;
        margin-top: .45rem;
        padding-top: .45rem;
    }
    .wpli-settings-language-grid {
        grid-template-columns: 1fr;
    }
}
.wpli-room[data-mode="local"] .wpli-settings-remote-only { display: none !important; }
.wpli-room[data-mode="remote"] .wpli-settings-remote-only { display: block; }


/* v0.7.14: local UX corrections — usable mobile settings, visible language guidance, two-sided chat bubbles. */
@media (max-width: 900px) {
    .wpli-client-settings-panel,
    .wpli-room--app-mode .wpli-client-settings-panel {
        position: fixed !important;
        left: max(.75rem, env(safe-area-inset-left)) !important;
        right: max(.75rem, env(safe-area-inset-right)) !important;
        top: auto !important;
        bottom: max(.75rem, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(82svh, 560px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform: none !important;
        z-index: 9999 !important;
        border-radius: 22px !important;
    }
}

.wpli-room[data-mode="local"] .wpli-local-setup {
    display: block !important;
    margin: .65rem 1.5rem 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.wpli-room[data-mode="local"] .wpli-local-setup > :not(.wpli-local-speaker-switch) {
    display: none !important;
}
.wpli-room[data-mode="local"] .wpli-local-speaker-switch {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin: 0;
}
.wpli-room[data-mode="local"] .wpli-local-speaker-switch::before {
    content: attr(data-hint);
    grid-column: 1 / -1;
    color: var(--wpli-muted);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
}
.wpli-room[data-mode="local"] .wpli-speaker-button {
    min-height: 54px !important;
    padding: .62rem .7rem !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(15,23,42,.12) !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.06) !important;
}
.wpli-room[data-mode="local"] .wpli-speaker-button.is-active {
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
    border-color: rgba(29,78,216,.75) !important;
    color: #fff !important;
}

.wpli-room[data-mode="local"] .wpli-chat-message,
.wpli-room--fixed-local-languages[data-mode="local"] .wpli-captions .wpli-chat-message,
.wpli-room--fixed-local-languages[data-mode="local"] .wpli-captions .wpli-chat-message:nth-last-child(-n+2) {
    width: auto !important;
    max-width: min(82%, 720px) !important;
    align-self: flex-start;
}
.wpli-room[data-mode="local"] .wpli-chat-message--local-a {
    align-self: flex-end !important;
    justify-content: flex-end !important;
}
.wpli-room[data-mode="local"] .wpli-chat-message--local-b {
    align-self: flex-start !important;
    justify-content: flex-start !important;
}
.wpli-room[data-mode="local"] .wpli-chat-message--local-a .wpli-chat-bubble {
    border-left: 1px solid rgba(37,99,235,.18) !important;
    border-right: 5px solid rgba(37,99,235,.75) !important;
    border-bottom-right-radius: 7px !important;
    background: linear-gradient(180deg, #eff6ff, #ffffff) !important;
}
.wpli-room[data-mode="local"] .wpli-chat-message--local-b .wpli-chat-bubble {
    border-left: 5px solid rgba(15,23,42,.22) !important;
    border-bottom-left-radius: 7px !important;
    background: #fff !important;
}
.wpli-room[data-mode="local"] .wpli-chat-bubble {
    width: auto !important;
    min-width: min(260px, 100%) !important;
}
@media (max-width: 720px) {
    .wpli-room[data-mode="local"] .wpli-local-setup {
        margin: .45rem .7rem 0 !important;
    }
    .wpli-room[data-mode="local"] .wpli-local-speaker-switch {
        gap: .4rem;
    }
    .wpli-room[data-mode="local"] .wpli-local-speaker-switch::before {
        font-size: .7rem;
    }
    .wpli-room[data-mode="local"] .wpli-speaker-button {
        min-height: 48px !important;
        padding: .48rem .5rem !important;
    }
    .wpli-room[data-mode="local"] .wpli-chat-message,
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-captions .wpli-chat-message,
    .wpli-room--fixed-local-languages[data-mode="local"] .wpli-captions .wpli-chat-message:nth-last-child(-n+2) {
        max-width: 92% !important;
    }
}

/* v0.7.15: settings panel is a real viewport modal, not a toolbar dropdown. */
.wpli-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(15, 23, 42, .24);
    backdrop-filter: blur(2px);
}
.wpli-settings-backdrop[hidden] { display: none !important; }
.wpli-room .wpli-client-settings-panel {
    position: fixed !important;
    top: calc(72px + env(safe-area-inset-top)) !important;
    right: max(1rem, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: auto !important;
    width: min(430px, calc(100vw - 2rem)) !important;
    max-width: min(430px, calc(100vw - 2rem)) !important;
    max-height: calc(100svh - 96px - env(safe-area-inset-top)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    transform: none !important;
    z-index: 9999 !important;
    border-radius: 22px !important;
}
.wpli-room .wpli-client-settings-panel[hidden] { display: none !important; }
@media (max-width: 900px) {
    .wpli-room .wpli-client-settings-panel,
    .wpli-room--app-mode .wpli-client-settings-panel {
        position: fixed !important;
        top: auto !important;
        left: max(.75rem, env(safe-area-inset-left)) !important;
        right: max(.75rem, env(safe-area-inset-right)) !important;
        bottom: max(.75rem, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(84svh, 620px) !important;
        transform: none !important;
        z-index: 9999 !important;
        border-radius: 24px !important;
    }
}

/* Original text is off by default and this rule must beat the local display overrides. */
.wpli-room[data-mode="local"] .wpli-chat-message.wpli-hide-source .wpli-chat-secondary,
.wpli-room--fixed-local-languages[data-mode="local"] .wpli-chat-message.wpli-hide-source .wpli-chat-secondary {
    display: none !important;
}

/* Keep plugin version visible on the frontend, including compact app/mobile layouts. */
.wpli-room--app-mode .wpli-room__footer,
.wpli-room--fixed-local-languages .wpli-room__footer {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: max(.2rem, env(safe-area-inset-bottom));
    z-index: 30;
    padding: 0 .75rem !important;
    text-align: center;
    pointer-events: none;
    color: #64748b;
}
.wpli-room--app-mode .wpli-room__footer small,
.wpli-room--fixed-local-languages .wpli-room__footer small {
    display: inline-flex;
    justify-content: center;
    gap: .35rem;
    max-width: min(760px, calc(100vw - 1rem));
    padding: .22rem .55rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, .84);
    box-shadow: 0 4px 14px rgba(15,23,42,.08);
    font-size: .68rem;
    line-height: 1.2;
}
.wpli-room--app-mode .wpli-captions,
.wpli-room--fixed-local-languages .wpli-captions {
    padding-bottom: 2.35rem !important;
}

/* v0.7.16: remote UX clarity and settings cleanup. */
.wpli-quick-start {
    border: 1px solid rgba(37,99,235,.16);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(239,246,255,.82), rgba(255,255,255,.92));
    overflow: hidden;
}
.wpli-quick-start summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    padding: .8rem .95rem;
    cursor: pointer;
    font-weight: 850;
    color: var(--wpli-ink);
    list-style: none;
}
.wpli-quick-start summary::-webkit-details-marker { display: none; }
.wpli-quick-start summary::after {
    content: '⌄';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: rgba(37,99,235,.1);
    color: var(--wpli-primary-dark);
    transition: transform .16s ease;
    flex: 0 0 auto;
}
.wpli-quick-start[open] summary::after { transform: rotate(180deg); }
.wpli-quick-start summary small {
    color: var(--wpli-muted);
    font-weight: 650;
    font-size: .82rem;
    text-align: right;
}
.wpli-quick-start ol {
    margin: 0;
    padding: .1rem .95rem .95rem 2.25rem;
    display: grid;
    gap: .45rem;
    color: #475467;
    font-size: .92rem;
    line-height: 1.38;
}
.wpli-audio-hygiene-warning {
    border: 1px solid rgba(245,158,11,.34);
    background: #fffbeb;
    color: #92400e;
    border-radius: 16px;
    padding: .75rem .9rem;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.35;
}
.wpli-audio-hygiene-warning[hidden] { display: none !important; }
.wpli-client-settings__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
}
.wpli-client-settings__header > div {
    display: grid;
    gap: .16rem;
}
.wpli-settings-close-button {
    display: none;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
    color: #475467 !important;
    background: #f8fafc !important;
    border: 1px solid rgba(15,23,42,.1) !important;
    box-shadow: none !important;
}
.wpli-room .wpli-speech-toggle-button,
.wpli-room .wpli-source-toggle,
.wpli-room .wpli-fullscreen-button {
    display: none !important;
}
.wpli-room[data-mode="remote"] .wpli-settings-speech-toggle small::after {
    content: ' Remote rooms start captions-first by default.';
}
@media (max-width: 900px) {
    .wpli-settings-close-button { display: inline-flex; align-items: center; justify-content: center; }
    .wpli-quick-start summary {
        align-items: flex-start;
    }
    .wpli-quick-start summary small {
        display: none;
    }
}
@media (max-width: 720px) {
    .wpli-room[data-mode="remote"] .wpli-action-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(76px, .45fr) minmax(94px, .55fr);
        gap: .45rem;
        align-items: stretch;
    }
    .wpli-room[data-mode="remote"] .wpli-share-link-button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .wpli-room[data-mode="remote"] .wpli-start-button,
    .wpli-room[data-mode="remote"] .wpli-stop-button,
    .wpli-room[data-mode="remote"] .wpli-settings-button,
    .wpli-room[data-mode="remote"] .wpli-client-settings {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* v0.7.17: narrow remote layout fixes. */
.wpli-room[data-mode="remote"] .wpli-quick-start { display: none; }
.wpli-room[data-mode="remote"][data-initial-role="host"] .wpli-quick-start--host,
.wpli-room[data-mode="remote"]:not([data-initial-role="host"]) .wpli-quick-start--guest {
    display: block;
}
.wpli-remote-preferences-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    gap: .75rem;
    align-items: stretch;
    margin-top: .8rem;
}
.wpli-remote-preferences-row .wpli-language-grid--remote-listen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
}
.wpli-remote-preferences-row .wpli-language-grid--remote-listen label,
.wpli-remote-preferences-row .wpli-remote-voice-gender {
    margin: 0;
    min-height: 72px;
    padding: .75rem .85rem;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(15,23,42,.045);
}
.wpli-remote-preferences-row .wpli-language-grid--remote-listen label {
    display: grid;
    gap: .35rem;
}
.wpli-remote-preferences-row .wpli-language-grid--remote-listen span,
.wpli-remote-preferences-row .wpli-remote-voice-gender > span {
    color: var(--wpli-muted);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .035em;
}
.wpli-remote-preferences-row .wpli-remote-voice-gender {
    display: flex;
    align-items: center;
    gap: .55rem .8rem;
    flex-wrap: wrap;
}
.wpli-room[data-mode="local"] .wpli-remote-preferences-row { display: none !important; }
.wpli-room[data-mode="remote"] .wpli-action-card {
    display: flex;
    flex-direction: column;
}
.wpli-room[data-mode="remote"] .wpli-action-row { order: 1; }
.wpli-room[data-mode="remote"] .wpli-remote-preferences-row { order: 2; }
@media (max-width: 720px) {
    .wpli-room[data-mode="remote"] .wpli-action-card {
        margin-top: .65rem;
    }
    .wpli-room[data-mode="remote"] .wpli-remote-preferences-row {
        order: 1;
        grid-template-columns: 1fr;
        gap: .5rem;
        margin-top: 0;
        margin-bottom: .55rem;
    }
    .wpli-room[data-mode="remote"] .wpli-action-row {
        order: 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(74px, .55fr) minmax(90px, .65fr);
        gap: .45rem;
        align-items: stretch;
    }
    .wpli-room[data-mode="remote"] .wpli-share-link-button {
        order: 1;
        grid-column: 1 / -1;
        width: 100% !important;
    }
    .wpli-room[data-mode="remote"] .wpli-start-button,
    .wpli-room[data-mode="remote"] .wpli-stop-button,
    .wpli-room[data-mode="remote"] .wpli-client-settings {
        order: 2;
        width: 100% !important;
        min-width: 0 !important;
    }
    .wpli-room[data-mode="remote"] .wpli-settings-button {
        width: 100% !important;
        min-width: 0 !important;
    }
    .wpli-remote-preferences-row .wpli-language-grid--remote-listen label,
    .wpli-remote-preferences-row .wpli-remote-voice-gender {
        min-height: 0;
        padding: .65rem .75rem;
    }
}

/* v0.7.18: keep remote voice selector label and radio choices vertically aligned. */
.wpli-remote-preferences-row .wpli-remote-voice-gender {
    display: flex;
    align-items: center;
    gap: .55rem .85rem;
    line-height: 1.25;
}
.wpli-remote-preferences-row .wpli-remote-voice-gender > span,
.wpli-remote-preferences-row .wpli-remote-voice-gender label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: 0;
    line-height: 1.25;
}
.wpli-remote-preferences-row .wpli-remote-voice-gender label input[type="radio"] {
    margin: 0 .28rem 0 0;
    align-self: center;
}

/* v0.7.19: settings/language consistency and cleaner local/remote chat headers. */
.wpli-room[data-mode="local"] .wpli-participant-status {
    display: none !important;
}
.wpli-participant-status {
    margin-left: auto;
    text-align: right;
    justify-content: flex-end;
}
.wpli-room[data-mode="local"] .wpli-empty-state {
    display: grid !important;
}
.wpli-room[data-mode="remote"] .wpli-settings-source-toggle {
    display: flex !important;
}
.wpli-settings-remote-language-grid {
    grid-template-columns: 1fr;
    gap: .65rem;
}
.wpli-settings-remote-language-grid label,
.wpli-settings-remote-language-grid .wpli-remote-voice-gender {
    display: grid;
    gap: .35rem;
    margin: 0;
}
.wpli-settings-remote-language-grid label > span,
.wpli-settings-remote-language-grid .wpli-remote-voice-gender > span {
    color: var(--wpli-muted);
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .035em;
}
.wpli-settings-remote-language-grid .wpli-remote-voice-gender {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding: .65rem .75rem;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 14px;
    background: #f8fafc;
}
.wpli-settings-remote-language-grid .wpli-remote-voice-gender label {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: .28rem;
    color: var(--wpli-ink);
    font-size: .88rem;
    font-weight: 750;
}
.wpli-settings-remote-language-grid .wpli-remote-voice-gender input[type="radio"] {
    margin: 0;
}
.wpli-room[data-mode="remote"] .wpli-action-card {
    display: block;
}
.wpli-room[data-mode="remote"] .wpli-remote-preferences-row {
    display: none !important;
}
@media (max-width: 720px) {
    .wpli-participant-status {
        width: 100%;
        white-space: normal;
        border-radius: 14px;
    }
    .wpli-settings-remote-language-grid .wpli-remote-voice-gender {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .wpli-settings-remote-language-grid .wpli-remote-voice-gender label {
        min-height: 32px;
    }
}


/* TarJoom brand mark */
.wpli-hero-brand { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .25rem; }
.wpli-hero-brand .wpli-eyebrow { margin: 0; }
.wpli-brand-mark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 900; color: var(--wpli-ink); }
.wpli-brand-mark img { max-width: 34px; max-height: 34px; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.wpli-brand-mark--room span { font-size: 1rem; }
.wpli-brand-mark--account { margin-bottom: .45rem; }
.wpli-brand-mark--account img { max-width: 38px; max-height: 38px; }

/* v0.7.30: user conversation archive */
.wpli-account-conversations { min-width: 0; }
.wpli-conversation-open,
.wpli-conversation-back {
    color: #1d4ed8;
    font-weight: 800;
    text-decoration: none;
}
.wpli-conversation-open:hover,
.wpli-conversation-back:hover { text-decoration: underline; }
.wpli-conversation-view { margin-bottom: 1rem; }
.wpli-conversation-view__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.wpli-conversation-view__top p { margin-bottom: 0; }
.wpli-conversation-download { white-space: nowrap; }
.wpli-conversation-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .75rem 0 1rem;
}
.wpli-conversation-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 999px;
    padding: .45rem .75rem;
    background: #f8fafc;
    color: #334155;
    font-weight: 850;
    font-size: .82rem;
    text-decoration: none;
}
.wpli-conversation-filter.is-active {
    background: #dbeafe;
    border-color: rgba(37,99,235,.38);
    color: #1d4ed8;
}
.wpli-conversation-transcript {
    display: grid;
    gap: .75rem;
}
.wpli-conversation-message {
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 18px;
    padding: .85rem;
    background: #f8fafc;
}
.wpli-conversation-message time {
    display: block;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    margin-bottom: .45rem;
}
.wpli-conversation-line + .wpli-conversation-line { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid rgba(15,23,42,.08); }
.wpli-conversation-line span {
    display: block;
    color: #64748b;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .22rem;
}
.wpli-conversation-line p {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.wpli-conversation-line--original p {
    color: #475569;
    font-size: .9rem;
}
@media (max-width: 760px) {
    .wpli-conversation-view__top { display: block; }
    .wpli-conversation-download { margin-top: .75rem; width: 100%; }
    .wpli-conversation-filter { flex: 1 1 auto; }
}

/* v0.7.31: paid-tier conversation archive gate */
.wpli-account-conversations--locked {
    border-style: dashed;
    background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(14,165,233,.04));
}
.wpli-account-conversations--locked .wpli-account-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: .35rem;
}