/*
Nexus AI Living Presence - Approved Practical Redesign CSS
Scope: Only styles under .nxv4-redesign to avoid damaging the rest of HeirsNexus.
Codex must load this after the existing nexus-ai-v4-presence.css.
*/

:root {
    /* Retuned to actually share the orb's own palette (nexus-orb-vnext.js: RED #e30613,
       HOT_RED #ff2a1c, graphite/chrome seam greys #7c8591/#8a919c/#dce4ec) instead of an
       unrelated blue/purple "SaaS" accent that shared nothing with the orb but a coincidentally
       similar red. Card surfaces stay light for legibility on a dense settings/chat form - the
       orb's own dark void isn't reproduced wholesale - but every accent (icons, buttons, badges,
       focus rings) now comes from the same red/graphite/chrome family the orb actually renders. */
    --nxv4-red: #E30613;
    --nxv4-red-hot: #FF2A1C;
    --nxv4-red-dark: #A80510;
    --nxv4-red-soft: #FFF1F1;
    --nxv4-graphite: #7C8591;
    --nxv4-graphite-dark: #3F4552;
    --nxv4-chrome: #DCE4EC;
    --nxv4-chrome-deep: #55585D;
    --nxv4-green: #14A44D;
    --nxv4-amber: #F59F00;
    --nxv4-surface: #FFFFFF;
    --nxv4-surface-soft: #F7F6F6;
    --nxv4-surface-tint: #FAFAFA;
    --nxv4-border: #E7E4E3;
    --nxv4-border-strong: #D6D2D0;
    --nxv4-text: #17181C;
    --nxv4-muted: #6B7280;
    --nxv4-soft-muted: #9CA3AF;
    --nxv4-shadow: 0 18px 55px rgba(17, 15, 15, 0.14);
    --nxv4-card-shadow: 0 10px 28px rgba(17, 15, 15, 0.07);
    --nxv4-radius-xl: 24px;
    --nxv4-radius-lg: 18px;
    --nxv4-radius-md: 14px;
    --nxv4-radius-sm: 10px;
}

.nxv4-redesign,
.nxv4-redesign * {
    box-sizing: border-box;
}

.nxv4-redesign .nxv4-rail.nxv4-shell {
    width: min(400px, calc(100vw - 32px)) !important;
    height: min(760px, calc(100dvh - 132px)) !important;
    max-height: min(760px, calc(100dvh - 132px)) !important;
    position: fixed;
    right: 18px;
    top: 14px;
    bottom: auto;
    z-index: 9999;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: var(--nxv4-radius-xl);
    box-shadow: var(--nxv4-shadow);
    color: var(--nxv4-text);
    overflow: hidden !important;
}

.nxv4-redesign .nxv4-header {
    min-height: 68px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nxv4-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}

.nxv4-redesign .nxv4-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.nxv4-redesign .nxv4-brand-orb {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    position: relative;
    display: grid;
    place-items: center;
    /* Same red emissive-core-into-dark-void identity as the real 3D orb (nexus-orb-vnext.js),
       not a decoy blue/purple icon that shared nothing with it. */
    background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #FF2A1C 24%, #E30613 55%, #1A1015 100%);
    box-shadow: 0 0 0 5px rgba(227, 6, 19, 0.10), 0 10px 22px rgba(227, 6, 19, 0.28);
    flex: 0 0 auto;
}

.nxv4-redesign .nxv4-brand-orb-core {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.9);
}

.nxv4-redesign .nxv4-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nxv4-redesign .nxv4-brand-copy strong {
    font-size: 15px;
    line-height: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.nxv4-redesign .nxv4-brand-copy span {
    color: var(--nxv4-muted);
    font-size: 12px;
    line-height: 16px;
}

.nxv4-redesign .nxv4-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nxv4-redesign .nxv4-mode-pill {
    border: 1px solid #D9DADC;
    background: #F3F3F4;
    color: var(--nxv4-graphite-dark);
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.nxv4-redesign .nxv4-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: #3F4552;
    font-size: 18px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.nxv4-redesign .nxv4-icon-btn:hover {
    background: #F0EFEF;
    border-color: #E4E1E0;
}

.nxv4-redesign .nxv4-body {
    min-height: 0;
    overflow: auto;
    padding: 12px !important;
    display: flex;
    flex-direction: column;
    gap: 10px !important;
    scrollbar-width: thin;
}

.nxv4-redesign .nxv4-insight-card,
.nxv4-redesign .nxv4-form-assist-card,
.nxv4-redesign .nxv4-voice-status-card,
.nxv4-redesign .nxv4-transcript-panel,
.nxv4-redesign .nxv4-voice-preferences {
    background: var(--nxv4-surface);
    border: 1px solid var(--nxv4-border);
    border-radius: var(--nxv4-radius-lg);
    box-shadow: var(--nxv4-card-shadow);
}

.nxv4-redesign .nxv4-insight-card {
    padding: 13px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: linear-gradient(135deg, #FAFAFA 0%, #FFFFFF 60%, #FFF5F5 100%);
    border-color: #E4E1E0;
}

.nxv4-redesign .nxv4-insight-icon,
.nxv4-redesign .nxv4-form-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: white;
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--nxv4-graphite), var(--nxv4-red));
    box-shadow: 0 10px 18px rgba(227, 6, 19, 0.22);
}

.nxv4-redesign .nxv4-insight-title {
    font-weight: 800;
    font-size: 13.5px;
    line-height: 18px;
    margin-bottom: 3px;
}

.nxv4-redesign .nxv4-insight-text {
    color: var(--nxv4-muted);
    font-size: 12.5px;
    line-height: 17px;
}

.nxv4-redesign .nxv4-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nxv4-redesign .nxv4-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px;
}

.nxv4-redesign .nxv4-section-head h3,
.nxv4-redesign .nxv4-form-assist-card h3 {
    font-size: 12px;
    line-height: 16px;
    font-weight: 850;
    margin: 0;
    color: #17181C;
}

.nxv4-redesign .nxv4-link-btn {
    border: 0;
    background: transparent;
    color: var(--nxv4-muted);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.nxv4-redesign .nxv4-cue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.nxv4-redesign .nxv4-cue {
    min-height: 78px;
    background: var(--nxv4-surface);
    border: 1px solid var(--nxv4-border);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.nxv4-redesign .nxv4-cue h4 {
    font-size: 11.3px;
    line-height: 15px;
    margin: 0 0 4px;
    font-weight: 850;
    color: #17181C;
}

.nxv4-redesign .nxv4-cue p {
    font-size: 10.8px;
    line-height: 14px;
    color: var(--nxv4-muted);
    margin: 0;
}

.nxv4-redesign .nxv4-cue.high,
.nxv4-redesign .nxv4-cue.critical,
.nxv4-redesign .nxv4-cue.danger {
    border-color: #FECACA;
    background: #FFF7F7;
}

.nxv4-redesign .nxv4-cue.medium,
.nxv4-redesign .nxv4-cue.warning {
    border-color: #FED7AA;
    background: #FFFBEB;
}

.nxv4-redesign .nxv4-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.nxv4-redesign .nxv4-action {
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid var(--nxv4-border-strong);
    border-radius: 999px;
    background: #FFFFFF;
    color: #17181C;
    font-size: 11.5px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.nxv4-redesign .nxv4-action:hover {
    background: #F7F6F6;
    border-color: var(--nxv4-red);
    transform: translateY(-1px);
}

.nxv4-redesign .nxv4-ask-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nxv4-redesign .nxv4-ask-redesign {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
}

.nxv4-redesign .nxv4-ask-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nxv4-redesign .nxv4-ask-chip {
    border: 1px solid var(--nxv4-border);
    background: #FFFFFF;
    color: var(--nxv4-muted);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.nxv4-redesign .nxv4-ask-chip:hover {
    border-color: var(--nxv4-red);
    color: var(--nxv4-red);
    background: var(--nxv4-red-soft);
}

.nxv4-redesign .nxv4-ask-redesign input {
    height: 38px;
    flex: 1;
    min-width: 0;
    border: 1px solid var(--nxv4-border);
    border-radius: 12px;
    background: #FFFFFF;
    color: #17181C;
    padding: 0 12px;
    font-size: 12.5px;
    outline: none;
}

.nxv4-redesign .nxv4-ask-redesign input:focus {
    border-color: var(--nxv4-red);
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.12);
}

.nxv4-redesign .nxv4-ask-btn,
.nxv4-redesign .nxv4-secondary-action {
    border: 0;
    background: linear-gradient(135deg, var(--nxv4-red-hot), var(--nxv4-red));
    color: #FFFFFF;
    border-radius: 12px;
    height: 38px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(227, 6, 19, 0.20);
}

.nxv4-redesign .nxv4-form-assist-card {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
}

.nxv4-redesign .nxv4-form-assist-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.nxv4-redesign .nxv4-form-assist-card ul {
    margin: 4px 0 0;
    padding-left: 14px;
    color: var(--nxv4-muted);
    font-size: 11.2px;
    line-height: 15px;
}

.nxv4-redesign .nxv4-secondary-action {
    height: 34px;
    border-radius: 10px;
    white-space: nowrap;
    background: #FFFFFF;
    color: var(--nxv4-red);
    border: 1px solid #FECACA;
    box-shadow: none;
}

.nxv4-redesign .nxv4-compact-voice-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--nxv4-border);
    border-radius: 14px;
    background: #FFFFFF;
    padding: 9px 11px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.04);
}

.nxv4-redesign .nxv4-compact-voice-summary strong {
    display: block;
    font-size: 12.5px;
    line-height: 16px;
    font-weight: 850;
}

.nxv4-redesign .nxv4-compact-voice-summary small {
    display: block;
    font-size: 11px;
    line-height: 14px;
    color: var(--nxv4-muted);
}

.nxv4-redesign .nxv4-voice-preferences {
    padding: 10px;
}

.nxv4-redesign .nxv4-pref-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.nxv4-redesign .nxv4-pref-row {
    min-height: 43px;
    display: grid;
    grid-template-columns: 30px 1fr 46px;
    align-items: center;
    gap: 9px;
    padding: 6px 4px;
    border-radius: 12px;
    cursor: pointer;
}

.nxv4-redesign .nxv4-pref-row:hover {
    background: #F7F6F6;
}

.nxv4-redesign .nxv4-pref-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #F0EFEF;
    color: #3F4552;
    font-size: 13px;
}

.nxv4-redesign .nxv4-pref-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nxv4-redesign .nxv4-pref-copy strong {
    font-size: 12px;
    font-weight: 850;
    line-height: 15px;
}

.nxv4-redesign .nxv4-pref-copy small {
    color: var(--nxv4-muted);
    font-size: 10.8px;
    line-height: 14px;
}

/* Real accessible toggle switch. Input remains focusable and screen-reader available. */
.nxv4-redesign .nxv4-switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nxv4-redesign .nxv4-switch {
    width: 42px;
    height: 24px;
    border-radius: 999px;
    position: relative;
    background: #C9CACC;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    transition: background .18s ease, box-shadow .18s ease;
}

.nxv4-redesign .nxv4-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.22);
    transition: transform .18s ease;
}

.nxv4-redesign .nxv4-switch-input:checked + .nxv4-switch {
    background: var(--nxv4-red);
    box-shadow: inset 0 0 0 1px rgba(168, 5, 16, 0.12), 0 7px 15px rgba(227, 6, 19, 0.20);
}

.nxv4-redesign .nxv4-switch-input:checked + .nxv4-switch::after {
    transform: translateX(18px);
}

.nxv4-redesign .nxv4-switch-input:focus-visible + .nxv4-switch {
    outline: 3px solid rgba(227, 6, 19, 0.25);
    outline-offset: 2px;
}

.nxv4-redesign .nxv4-voice-status-card {
    min-height: 58px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 42px 1fr 78px;
    gap: 10px;
    align-items: center;
    border-color: #DFDBD9;
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFAFA 100%);
}

.nxv4-redesign .nxv4-live-ring {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: conic-gradient(from 220deg, var(--nxv4-red), var(--nxv4-graphite), var(--nxv4-chrome), var(--nxv4-red));
}

.nxv4-redesign .nxv4-live-ring span {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #FFFFFF;
}

.nxv4-redesign .nxv4-live-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nxv4-redesign .nxv4-live-copy strong {
    font-size: 13px;
    font-weight: 850;
}

.nxv4-redesign .nxv4-live-copy small {
    font-size: 11.2px;
    color: var(--nxv4-muted);
}

.nxv4-redesign .nxv4-wave {
    height: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
}

.nxv4-redesign .nxv4-wave span {
    width: 3px;
    height: 13px;
    border-radius: 999px;
    background: var(--nxv4-red);
    opacity: 0.8;
    animation: nxv4-wave 900ms ease-in-out infinite alternate;
}

.nxv4-redesign .nxv4-wave span:nth-child(2) { animation-delay: 80ms; height: 20px; }
.nxv4-redesign .nxv4-wave span:nth-child(3) { animation-delay: 160ms; height: 11px; }
.nxv4-redesign .nxv4-wave span:nth-child(4) { animation-delay: 240ms; height: 24px; }
.nxv4-redesign .nxv4-wave span:nth-child(5) { animation-delay: 320ms; height: 16px; }
.nxv4-redesign .nxv4-wave span:nth-child(6) { animation-delay: 400ms; height: 22px; }

@keyframes nxv4-wave {
    from { transform: scaleY(.55); opacity: .42; }
    to { transform: scaleY(1.05); opacity: 1; }
}

.nxv4-redesign .nxv4-transcript-panel {
    overflow: hidden;
}

.nxv4-redesign .nxv4-transcript-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid var(--nxv4-border);
}

.nxv4-redesign .nxv4-transcript-title {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--nxv4-text);
    cursor: pointer;
}

.nxv4-redesign .nxv4-transcript-title strong {
    font-size: 12px;
}

.nxv4-redesign .nxv4-transcript-title span {
    font-size: 11px;
    color: var(--nxv4-muted);
}

.nxv4-redesign .nxv4-transcript-actions {
    display: flex;
    gap: 4px;
}

.nxv4-redesign .nxv4-transcript-actions button {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--nxv4-border);
    background: #FFFFFF;
    color: var(--nxv4-muted);
    cursor: pointer;
}

.nxv4-redesign .nxv4-transcript-log {
    max-height: 138px;
    overflow: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nxv4-redesign .nxv4-turn {
    display: grid;
    grid-template-columns: 46px 1fr 54px;
    gap: 8px;
    align-items: start;
    font-size: 11.3px;
    line-height: 15px;
}

.nxv4-redesign .nxv4-turn-role {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    color: #FFFFFF;
    font-weight: 850;
    font-size: 10px;
    background: var(--nxv4-graphite-dark);
}

.nxv4-redesign .nxv4-turn-nexus .nxv4-turn-role {
    background: var(--nxv4-red);
}

.nxv4-redesign .nxv4-turn p {
    margin: 2px 0 0;
    color: #26282C;
}

.nxv4-redesign .nxv4-turn time {
    margin-top: 2px;
    color: var(--nxv4-muted);
    text-align: right;
    font-size: 10.5px;
}

.nxv4-redesign .nxv4-voice-transcript {
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    resize: vertical;
    min-height: 54px;
    border: 1px solid var(--nxv4-border);
    border-radius: 12px;
    padding: 9px 10px;
    font: inherit;
    font-size: 11.5px;
    color: var(--nxv4-text);
    background: #FFFFFF;
}

.nxv4-redesign .nxv4-voice-error {
    min-height: 0;
    padding: 0 10px 9px;
    font-size: 11px;
    color: var(--nxv4-red-dark);
    font-weight: 750;
}

.nxv4-redesign .nxv4-transcript-panel.is-collapsed .nxv4-transcript-log,
.nxv4-redesign .nxv4-transcript-panel.is-collapsed .nxv4-voice-transcript,
.nxv4-redesign .nxv4-transcript-panel.is-collapsed .nxv4-voice-error {
    display: none;
}

.nxv4-redesign .nxv4-footer {
    border-top: 1px solid var(--nxv4-border);
    padding: 12px 14px 14px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nxv4-redesign .nxv4-main-voice-controls {
    min-height: 62px;
    display: grid;
    grid-template-columns: 1fr 68px 1fr;
    align-items: center;
    gap: 0;
    border: 1px solid var(--nxv4-border-strong);
    background: #FAFAFA;
    border-radius: 999px;
    padding: 6px;
    position: relative;
}

.nxv4-redesign .nxv4-type-btn,
.nxv4-redesign .nxv4-stop-conversation {
    border: 0;
    background: transparent;
    color: #3F4552;
    font-size: 11.5px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 46px;
    cursor: pointer;
    border-radius: 999px;
}

.nxv4-redesign .nxv4-type-btn:hover,
.nxv4-redesign .nxv4-stop-conversation:hover {
    background: #F0EFEF;
}

.nxv4-redesign .nxv4-mic-button {
    width: 68px;
    height: 68px;
    margin: -13px auto;
    border-radius: 999px;
    border: 6px solid #FFFFFF;
    /* Same hot-red-into-deep-red emissive gradient as the orb's own core, not an unrelated
       purple/blue button. */
    background: linear-gradient(135deg, #FF2A1C 0%, #E30613 55%, #A80510 100%);
    color: #FFFFFF;
    font-size: 28px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 17px 32px rgba(227, 6, 19, 0.36);
    transition: transform .18s ease, box-shadow .18s ease;
}

.nxv4-redesign .nxv4-mic-button:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 20px 38px rgba(227, 6, 19, 0.42);
}

.nxv4-redesign .nxv4-stop-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--nxv4-red);
    display: inline-block;
}

.nxv4-redesign .nxv4-utility-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.nxv4-redesign .nxv4-utility-controls button {
    height: 39px;
    border: 1px solid var(--nxv4-border);
    background: #FFFFFF;
    color: #17181C;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.nxv4-redesign .nxv4-utility-controls button:hover {
    border-color: var(--nxv4-red);
    background: #FFF7F7;
}

.nxv4-redesign .nxv4-legacy-voice-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.nxv4-redesign .nxv4-legacy-voice-controls button {
    height: 32px;
    border: 1px solid var(--nxv4-border);
    background: #FFFFFF;
    color: #3F4552;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 750;
    cursor: pointer;
}

.nxv4-redesign button:disabled,
.nxv4-redesign input:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.nxv4-redesign .nxv4-settings-panel[hidden] {
    display: none !important;
}

.nxv4-redesign .nxv4-settings-panel {
    position: fixed;
    right: 18px;
    top: 14px;
    width: min(400px, calc(100vw - 32px));
    max-height: min(690px, calc(100dvh - 120px));
    min-height: 420px;
    z-index: 10020;
    pointer-events: auto;
}

.nxv4-redesign .nxv4-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(3px);
}

.nxv4-redesign .nxv4-settings-card {
    position: absolute;
    right: 10px;
    top: 10px;
    bottom: 10px;
    left: 10px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid var(--nxv4-border);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
    overflow: hidden;
}

.nxv4-redesign .nxv4-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--nxv4-border);
}

.nxv4-redesign .nxv4-settings-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
}

.nxv4-redesign .nxv4-settings-head p {
    margin: 3px 0 0;
    color: var(--nxv4-muted);
    font-size: 11.5px;
}

.nxv4-redesign .nxv4-settings-body {
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nxv4-redesign .nxv4-settings-group {
    border: 1px solid var(--nxv4-border);
    border-radius: 14px;
    padding: 10px;
    background: #FAFAFA;
}

.nxv4-redesign .nxv4-settings-group h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 850;
}

.nxv4-redesign .nxv4-setting-field {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

.nxv4-redesign .nxv4-setting-field label {
    font-size: 11.5px;
    font-weight: 800;
}

.nxv4-redesign .nxv4-setting-field small {
    color: var(--nxv4-muted);
    font-size: 10.5px;
}

.nxv4-redesign .nxv4-device-diagnostics {
    display: grid;
    gap: 6px;
    margin: 0 0 10px;
}

.nxv4-redesign .nxv4-device-diagnostics div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
}

.nxv4-redesign .nxv4-device-diagnostics dt {
    color: var(--nxv4-muted);
    font-weight: 700;
}

.nxv4-redesign .nxv4-device-diagnostics dd {
    margin: 0;
    font-weight: 800;
}

@media (max-width: 640px) {
    .nxv4-redesign .nxv4-rail.nxv4-shell {
        width: calc(100vw - 16px);
        right: 8px;
        top: 8px;
        bottom: 8px;
        border-radius: 20px;
    }

    .nxv4-redesign .nxv4-cue-grid {
        grid-template-columns: 1fr;
    }

    .nxv4-redesign .nxv4-action-grid {
        grid-template-columns: 1fr;
    }

    .nxv4-redesign .nxv4-header {
        padding: 12px;
    }

    .nxv4-redesign .nxv4-mode-pill {
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nxv4-redesign .nxv4-settings-panel {
        right: 8px;
        top: 8px;
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nxv4-redesign *,
    .nxv4-redesign *::before,
    .nxv4-redesign *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*
Dashboard dark mode (:root[data-theme="dark"] button, app.css) paints every
<button> on the page with a dark navy fill. That selector's specificity
(0,2,1) beats this file's ghost/transparent button rules (0,2,0), so icon
buttons, "View all", the transcript toggle and "Type instead" rendered as
solid dark boxes instead of transparent ghost controls even though the
Nexus panel is a fixed light card that never follows the app-wide theme.
Re-assert transparency here with matching specificity.
*/
:root[data-theme="dark"] .nxv4-redesign .nxv4-icon-btn,
:root[data-theme="dark"] .nxv4-redesign .nxv4-link-btn,
:root[data-theme="dark"] .nxv4-redesign .nxv4-transcript-title,
:root[data-theme="dark"] .nxv4-redesign .nxv4-type-btn,
:root[data-theme="dark"] .nxv4-redesign .nxv4-stop-conversation {
    background: transparent;
    border-color: transparent;
}