/* ==========================================================================
   ShareMyFile - Neo-Brutalist "Komi-Store" Comic Paper Theme
   Version: 10.0.0
   ========================================================================== */

/* Screen-reader and Search Engine Crawler Semantic Utility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 1. Permanent Fallback Warning Removal */
#websocket-fallback,
[id="websocket-fallback"],
.websocket-fallback {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
}

/* 2. STRICT SUPPRESSION FOR HIDDEN ELEMENTS (Never override [hidden] with !important) */
[hidden],
[hidden="true"],
.icon-button[hidden],
button[hidden],
div[hidden],
a[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0 0 0 0) !important;
}

/* 3. Dialog Display & Event Interception Safety */
x-dialog:not([show]) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

x-dialog:not([show]) * {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

#about:not(:target):not(.active) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

#about:not(:target):not(.active) * {
    pointer-events: none !important;
    visibility: hidden !important;
}

/* 4. Global Neo-Brutalist Palette & Retro Comic Canvas */
:root {
    --ink-black: #18181b;
    --paper-bg: #faf7f2;
    --paper-surface: #ffffff;
    --candy-red: #e11d48;
    --candy-red-dark: #be123c;
    --candy-red-light: #ffe4e6;
    --candy-stripes: repeating-linear-gradient(
        -45deg,
        #f43f5e 0px,
        #f43f5e 12px,
        #fecdd3 12px,
        #fecdd3 24px
    );
    --mint-green: #10b981;
    --mint-green-light: #d1fae5;
    --mint-green-dark: #065f46;
    --amber-tag: #f59e0b;
    --amber-tag-light: #fef3c7;
    --amber-tag-dark: #92400e;
    --border-ink: 2px solid #18181b;
    --border-ink-thick: 2.5px solid #18181b;
    --border-ink-heavy: 3px solid #18181b;
    --shadow-hard-sm: 2px 2px 0px #18181b;
    --shadow-hard: 3.5px 3.5px 0px #18181b;
    --shadow-hard-lg: 6px 6px 0px #18181b;
}

/* Dark Theme Overrides */
body.dark-theme {
    --paper-bg: #111114 !important;
    --paper-surface: #1e1e24 !important;
    --ink-black: #f4f4f5 !important;
    --border-ink: 2px solid #3f3f46 !important;
    --border-ink-thick: 2.5px solid #3f3f46 !important;
    --border-ink-heavy: 3px solid #3f3f46 !important;
    --shadow-hard-sm: 2px 2px 0px #09090b !important;
    --shadow-hard: 3.5px 3.5px 0px #09090b !important;
    --shadow-hard-lg: 6px 6px 0px #09090b !important;
    background-color: #111114 !important;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
    color: #f4f4f5 !important;
}

body.dark-theme #main-header,
body.dark-theme header.komi-navbar {
    background-color: #1e1e24 !important;
    border-color: #3f3f46 !important;
    box-shadow: 4px 4px 0px #09090b !important;
}

body.dark-theme .brand-pill,
body.dark-theme .icon-button,
body.dark-theme x-no-peers,
body.dark-theme x-peer label,
body.dark-theme footer > .column,
body.dark-theme .about-card,
body.dark-theme x-dialog x-paper {
    background-color: #1e1e24 !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

body.dark-theme .icon-button {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

body.dark-theme .icon-button:hover {
    background-color: #3f3f46 !important;
    color: #ffffff !important;
}

body.dark-theme .brand-title,
body.dark-theme x-no-peers h2,
body.dark-theme x-peer .device-descriptor .name,
body.dark-theme .known-as-wrapper {
    color: #f4f4f5 !important;
}

body.dark-theme #display-name {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

body.dark-theme .about-legal-card {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

body.dark-theme .about-legal-card p {
    color: #d4d4d8 !important;
}

html {
    background-color: #faf7f2 !important;
    min-height: 100%;
}

body,
body.light-theme {
    background-color: #faf7f2 !important;
    background-image: 
        linear-gradient(to right, rgba(180, 160, 140, 0.26) 1.5px, transparent 1.5px),
        linear-gradient(to bottom, rgba(180, 160, 140, 0.26) 1.5px, transparent 1.5px) !important;
    background-size: 24px 24px !important;
    color: var(--ink-black) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", system-ui, sans-serif !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
}

/* Radar Canvas Circles (Candy Red Waves) */
canvas.circles {
    opacity: 0.65 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* 5. Unified Top Navigation Bar (Desktop & Mobile) */
#main-header,
header.komi-navbar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    margin: 22px auto 16px !important;
    padding: 10px 22px !important;
    background: #ffffff !important;
    border: 2.5px solid #18181b !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0px #18181b !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
}

#main-header.overflow-hidden,
header.komi-navbar.overflow-hidden {
    overflow: visible !important;
    height: auto !important;
}

#expand {
    display: none !important;
}

/* Brand Pill (Left Side) */
#brand-header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    z-index: 102 !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.brand-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    margin: 0 !important;
}

.brand-pill:hover {
    transform: translate(-1px, -1px) !important;
}

/* Brand Wordmark (Exact Logo Typography + Red Swoosh + Tagline) */
.brand-wordmark-img {
    height: 36px !important;
    width: auto !important;
    max-width: 175px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
}

/* Visibility strictly governed by theme - NEVER show both */
img.brand-wordmark-dark,
body.light-theme img.brand-wordmark-dark,
body:not(.dark-theme) img.brand-wordmark-dark {
    display: none !important;
}

body.light-theme img.brand-wordmark-light,
body:not(.dark-theme) img.brand-wordmark-light {
    display: block !important;
}

body.dark-theme img.brand-wordmark-light {
    display: none !important;
}

body.dark-theme img.brand-wordmark-dark {
    display: block !important;
}

.brand-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: var(--candy-red) !important;
    border: 1.5px solid #18181b !important;
    box-shadow: 2px 2px 0px #18181b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
}

.brand-icon-wrap svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #ffffff !important;
}

.brand-title {
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    color: #18181b !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    user-select: none !important;
}

.brand-title-share {
    color: #18181b !important;
}

.brand-title-my {
    color: var(--candy-red) !important;
}

.brand-title-file {
    color: #18181b !important;
}

body.dark-theme .brand-title,
body.dark-theme .brand-title-share,
body.dark-theme .brand-title-file {
    color: #f4f4f5 !important;
}

body.dark-theme .brand-title-my {
    color: #fb7185 !important;
}

.brand-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    background: var(--mint-green-light) !important;
    color: var(--mint-green-dark) !important;
    border: 1.5px solid var(--mint-green) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    box-shadow: 1px 1px 0px #18181b !important;
    margin-left: 2px !important;
    white-space: nowrap !important;
}

.brand-status-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--mint-green) !important;
    animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

@keyframes status-ping {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.8); }
}

/* Action Buttons (Right Side - Exactly 5 buttons) */
.komi-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 102 !important;
    flex-shrink: 0 !important;
}

.icon-button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    background: #faf7f2 !important;
    border: var(--border-ink) !important;
    box-shadow: var(--shadow-hard-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: #18181b !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 102 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.icon-button:hover {
    background: var(--candy-red-light) !important;
    color: var(--candy-red) !important;
    box-shadow: 3px 3px 0px #18181b !important;
    transform: translate(-1px, -1px) !important;
}

.icon-button:active {
    box-shadow: 1px 1px 0px #18181b !important;
    transform: translate(1.5px, 1.5px) !important;
}

.icon-button svg,
.icon-button svg.icon {
    width: 19px !important;
    height: 19px !important;
    fill: currentColor !important;
    pointer-events: none !important;
}

/* Theme Toggle Button */
#theme-wrapper {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
}

#theme-wrapper::before,
#theme-wrapper::after,
#theme-wrapper:hover::before,
#theme-wrapper:hover::after,
#theme-wrapper:focus::before,
#theme-wrapper:focus::after,
#theme-wrapper .icon-button::before,
#theme-wrapper .icon-button::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    box-shadow: none !important;
}

#theme-wrapper div {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 6. Center Container & Compact Proportioned Empty State */
#center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    flex: 1 0 auto !important;
    position: relative !important;
    z-index: 35 !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Compact Neo-Brutalist Empty State Card (NEVER stretched vertically) */
x-no-peers {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    background: #ffffff !important;
    border: var(--border-ink-heavy) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-hard-lg) !important;
    padding: 30px 24px 24px !important;
    max-width: 440px !important;
    width: 90% !important;
    text-align: center !important;
    margin: 16px auto !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.no-peers-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px auto 14px auto !important;
}

.no-peers-logo-img {
    width: 68px !important;
    height: 68px !important;
    object-fit: contain !important;
    filter: drop-shadow(2px 2px 0px rgba(24, 24, 27, 0.25)) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

x-no-peers:hover .no-peers-logo-img {
    transform: scale(1.08) rotate(-2deg) !important;
}

/* Candy Stripes Tape on Top of Card */
x-no-peers:not([drop-bg])::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 14px !important;
    background: var(--candy-stripes) !important;
    border-bottom: 2px solid #18181b !important;
}

x-no-peers[drop-bg] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 150px !important;
    border: 3px dashed var(--candy-red) !important;
    background: var(--candy-red-light) !important;
    box-shadow: var(--shadow-hard) !important;
}

x-no-peers[drop-bg]::before {
    content: attr(data-drop-bg) !important;
    position: static !important;
    height: auto !important;
    width: auto !important;
    background: none !important;
    border: none !important;
    color: var(--candy-red) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    display: block !important;
}

x-no-peers[drop-bg] * {
    display: none !important;
}

x-no-peers h2 {
    color: #18181b !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    margin: 6px 0 10px 0 !important;
    line-height: 1.35 !important;
}

.sharemyfile-link {
    color: var(--candy-red) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--candy-red) !important;
    text-underline-offset: 3px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline !important;
}

.sharemyfile-link:hover {
    color: var(--candy-red-dark) !important;
    text-decoration-color: var(--candy-red-dark) !important;
    text-decoration-thickness: 2px !important;
}

body.dark-theme .sharemyfile-link {
    color: #fb7185 !important;
    text-decoration-color: #fb7185 !important;
}

body.dark-theme .sharemyfile-link:hover {
    color: #fda4af !important;
}

x-no-peers div {
    color: #52525b !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

x-peers:not(:empty) + x-no-peers {
    display: none !important;
}

x-peers:empty ~ x-instructions {
    display: none !important;
}

/* Active Instruction Line */
x-instructions {
    color: #3f3f46 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 12px !important;
    margin-bottom: 16px !important;
    pointer-events: none !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 7. Peers Grid & Neo-Brutalist Peer Cards (x-peer) */
x-peers {
    gap: 16px !important;
    padding: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 900px !important;
    width: 100% !important;
    z-index: 10 !important;
    overflow: visible !important;
}

x-peer {
    padding: 4px !important;
    position: relative !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: grab !important;
    will-change: transform !important;
    overflow: visible !important;
}

x-peer label {
    position: relative !important;
    background: #ffffff !important;
    border: var(--border-ink-thick) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-hard) !important;
    padding: 16px 12px 14px !important;
    width: 138px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    cursor: grab !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

x-peer:not(.is-dragging) label:hover {
    box-shadow: var(--shadow-hard-lg) !important;
    transform: translate(-2px, -2px) !important;
}

x-peer:not(.is-dragging) label:active {
    box-shadow: 1px 1px 0px #18181b !important;
    transform: translate(2px, 2px) !important;
}

x-peer.is-dragging {
    z-index: 1000 !important;
    cursor: grabbing !important;
}

#center.has-dragging,
#center:has(x-peer.is-dragging) {
    z-index: 50 !important;
}

x-peer.is-dragging label {
    cursor: grabbing !important;
    box-shadow: 8px 8px 0px #18181b !important;
    transform: scale(1.05) !important;
    opacity: 0.95 !important;
    transition: none !important;
}

body.dark-theme x-peer.is-dragging label {
    box-shadow: 8px 8px 0px #09090b !important;
}

/* Peer Avatar Icon */
x-peer .icon-wrapper {
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: var(--candy-red) !important;
    border: 2px solid #18181b !important;
    box-shadow: var(--shadow-hard-sm) !important;
    color: #ffffff !important;
    position: relative !important;
}

x-peer .icon-wrapper svg {
    width: 26px !important;
    height: 26px !important;
    fill: #ffffff !important;
}

/* Paired Device Icon (Mint Green) */
x-peer.type-secret .icon-wrapper {
    background: var(--mint-green) !important;
}

/* Public Room Device Icon (Amber) */
x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
    background: var(--amber-tag) !important;
}

/* Peer Descriptor Text */
x-peer .device-descriptor {
    margin-top: 8px !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
    overflow: hidden !important;
}

x-peer .device-descriptor .name {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #18181b !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Peer Descriptor Status vs Device Name (Fix blank border bug) */
x-peer:not([status]) .device-descriptor .status,
x-peer[status] .device-descriptor .device-name,
x-peer .device-descriptor .status:empty {
    display: none !important;
}

x-peer:not([status]) .device-descriptor .device-name,
x-peer[status] .device-descriptor .status:not(:empty) {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--candy-red-dark) !important;
    background: var(--candy-red-light) !important;
    border: 1.5px solid var(--candy-red) !important;
    border-radius: 6px !important;
    padding: 2px 7px !important;
    margin-top: 5px !important;
    display: inline-block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    line-height: 1.3 !important;
}

body.dark-theme x-peer:not([status]) .device-descriptor .device-name,
body.dark-theme x-peer[status] .device-descriptor .status:not(:empty) {
    color: #fb7185 !important;
    background: rgba(244, 63, 94, 0.15) !important;
    border-color: #fb7185 !important;
}

/* Peer Circular Progress Ring Indicator (Centered perfectly over avatar icon) */
x-peer .progress,
x-peer.ws-peer .progress {
    position: absolute !important;
    top: 1px !important;
    left: 50% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    transform: translateX(-50%) scale(0.9) !important;
    transform-origin: center center !important;
    pointer-events: none !important;
    z-index: 5 !important;
    width: 80px !important;
    height: 80px !important;
    clip: rect(0px, 80px, 80px, 40px) !important;
}

x-peer .circle {
    width: 72px !important;
    height: 72px !important;
    border: 4px solid var(--primary-color, #4285f4) !important;
    border-radius: 50% !important;
    position: absolute !important;
    clip: rect(0px, 40px, 80px, 0px) !important;
    will-change: transform !important;
    transform: var(--progress) !important;
}

x-peer .progress.over50 {
    clip: rect(auto, auto, auto, auto) !important;
}

x-peer .progress.over50 .circle.right {
    transform: rotate(180deg) !important;
}

/* 8. Footer: Pulsing Radar Beacon & Bottom Card Dock */
footer {
    position: relative !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: auto auto 16px !important;
    padding: 0 16px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Candy Red Beacon Transmitter */
footer .logo {
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 10px !important;
    filter: drop-shadow(2px 2px 0px #18181b) !important;
    animation: beacon-pulse 2.5s ease-in-out infinite alternate !important;
}

@keyframes beacon-pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

#primaryGradient .start-color {
    stop-color: #e11d48 !important;
}

#primaryGradient .stop-color {
    stop-color: #be123c !important;
}

/* Bottom Neo-Brutalist Dock Card */
footer > .column {
    background: #ffffff !important;
    border: var(--border-ink-thick) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-hard) !important;
    padding: 16px 22px !important;
    max-width: min(92vw, 520px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* "You are known as:" */
.known-as-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    color: #18181b !important;
    font-weight: 700 !important;
}

#display-name {
    background: var(--candy-red-light) !important;
    border: 2px solid #18181b !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-hard-sm) !important;
    color: #18181b !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    padding: 4px 14px !important;
    margin: 0 !important;
    height: auto !important;
    transition: all 0.15s ease !important;
}

#display-name:hover,
#display-name:focus {
    background: #ffffff !important;
    border-color: var(--candy-red) !important;
}

.edit-pen {
    width: 15px !important;
    height: 15px !important;
    fill: #18181b !important;
    margin: 0 !important;
    transition: fill 0.2s ease !important;
}

.known-as-wrapper:hover .edit-pen {
    fill: var(--candy-red) !important;
}

/* Discovery Badges (Neat, clean tag pills - NOT giant solid red blocks) */
.discovery-wrapper {
    margin: 12px auto 0 !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.discovery-wrapper span {
    font-size: 12px !important;
    color: #52525b !important;
    font-weight: 600 !important;
}

.discovery-wrapper .badge {
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    background: #ffffff !important;
    color: #18181b !important;
    border: 1.5px solid #18181b !important;
    box-shadow: 2px 2px 0px #18181b !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.discovery-wrapper .badge:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0px #18181b !important;
}

/* "on this network" badge */
.discovery-wrapper .badge:not(.badge-room-secret):not(.badge-room-public-id) {
    background: #ffe4e6 !important;
    color: #be123c !important;
    border-color: #e11d48 !important;
}

.discovery-wrapper .badge-room-secret {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-color: #10b981 !important;
}

.discovery-wrapper .badge-room-public-id {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #f59e0b !important;
}

/* Legal Footer Bar */
.footer-compliance-bar {
    margin-top: 10px !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #71717a !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
}

.footer-compliance-p2p {
    color: #71717a !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

.footer-compliance-links {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.footer-compliance-links .footer-sep {
    color: #a1a1aa !important;
    font-weight: 700 !important;
}

.footer-compliance-bar a {
    color: var(--candy-red) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.15s ease !important;
}

.footer-compliance-bar a:hover {
    color: var(--candy-red-dark) !important;
}

body.dark-theme .footer-compliance-p2p {
    color: #a1a1aa !important;
}

body.dark-theme .footer-compliance-links .footer-sep {
    color: #71717a !important;
}

body.dark-theme .footer-compliance-bar a {
    color: #fb7185 !important;
}

/* 9. Dialogs & Modals (Komi Neo-Brutalist Cards with Scroll Support) */
x-dialog[show] {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
}

x-dialog[show] form {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

x-dialog[show] x-background {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(24, 24, 27, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 10000 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

x-dialog x-paper {
    background: #ffffff !important;
    border: var(--border-ink-heavy) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-hard-lg) !important;
    color: #18181b !important;
    max-width: min(92vw, 460px) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding: 24px 20px 20px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    z-index: 10001 !important;
    position: relative !important;
    margin: auto !important;
}

x-dialog h2,
x-dialog .dialog-title {
    color: #18181b !important;
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    text-align: center !important;
    margin: 0 0 16px !important;
}

/* Dialog Button Container & Responsive Button Layout */
x-dialog .btn-row {
    display: flex !important;
    flex-direction: row-reverse !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 16px 0 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
}

x-dialog .btn,
.komi-btn {
    border-radius: 10px !important;
    font-weight: 800 !important;
    background: var(--candy-red) !important;
    border: 2px solid #18181b !important;
    box-shadow: var(--shadow-hard) !important;
    color: #ffffff !important;
    transition: all 0.15s ease !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    width: auto !important;
    min-width: 110px !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 44px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Download Again / Download Button Specific Responsiveness */
#receive-file-dialog #download-btn,
#receive-file-dialog #share-btn,
#receive-request-dialog #accept-request {
    min-width: max-content !important;
    padding: 10px 22px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex: 1.2 1 auto !important;
}

x-dialog .btn:hover,
.komi-btn:hover {
    background: var(--candy-red-dark) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: var(--shadow-hard-lg) !important;
}

x-dialog .btn:active,
.komi-btn:active {
    box-shadow: 1px 1px 0px #18181b !important;
    transform: translate(2px, 2px) !important;
}

/* Disabled button state (Clear visual feedback across all dialogs) */
x-dialog .btn:disabled,
x-dialog .btn[disabled],
.komi-btn:disabled,
.komi-btn[disabled] {
    background: #e4e4e7 !important;
    color: #a1a1aa !important;
    border-color: #a1a1aa !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
}

body.dark-theme x-dialog .btn:disabled,
body.dark-theme x-dialog .btn[disabled] {
    background: #27272a !important;
    color: #71717a !important;
    border-color: #3f3f46 !important;
    box-shadow: none !important;
}

/* Secondary Dialog Buttons (Cancel, Decline, Close, Leave Room) */
x-dialog .btn[close],
x-dialog #decline-request,
x-dialog #close,
x-dialog .leave-room,
.cancel-btn {
    background: #ffffff !important;
    color: #18181b !important;
    border: 2px solid #18181b !important;
    box-shadow: var(--shadow-hard-sm) !important;
}

x-dialog .btn[close]:hover,
x-dialog #decline-request:hover,
x-dialog #close:hover,
x-dialog .leave-room:hover,
.cancel-btn:hover {
    background: var(--candy-red-light) !important;
    color: var(--candy-red) !important;
    border-color: var(--candy-red) !important;
}

body.dark-theme x-dialog .btn[close],
body.dark-theme x-dialog #decline-request,
body.dark-theme x-dialog #close,
body.dark-theme x-dialog .leave-room,
body.dark-theme .cancel-btn {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

/* Key Digits Input Boxes (Pair Device & Public Room) */
.input-key-container {
    margin: 12px 0 !important;
}

.input-key-container > input {
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    border-radius: 10px !important;
    box-shadow: 2px 2px 0px #18181b !important;
    font-weight: 900 !important;
    color: var(--candy-red) !important;
    outline: none !important;
    transition: all 0.15s ease !important;
    margin: 0 4px !important;
}

.input-key-container > input:focus {
    border-color: var(--candy-red) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0px #18181b !important;
}

body.dark-theme .input-key-container > input {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
    color: #f43f5e !important;
}

/* Textarea for messages */
.textarea {
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    border-radius: 12px !important;
    color: #18181b !important;
    box-shadow: inset 1px 1px 0px rgba(0,0,0,0.06) !important;
    padding: 14px 18px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
}

.textarea:focus {
    border-color: var(--candy-red) !important;
}

body.dark-theme .textarea {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #f4f4f5 !important;
}

/* Toast Notifications */
x-toast {
    background: #18181b !important;
    color: #ffffff !important;
    border: 2px solid #18181b !important;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.25) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    z-index: 10005 !important;
}

body.dark-theme x-toast {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border: 2px solid #3f3f46 !important;
    box-shadow: 4px 4px 0px #09090b !important;
}

x-toast .icon-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* Language Selection Grid */
#language-select-dialog .language-buttons {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 8px !important;
    max-height: 52vh !important;
    overflow-y: auto !important;
    padding: 8px 4px !important;
}

#language-select-dialog .language-buttons .btn {
    background: #ffffff !important;
    color: #18181b !important;
    border: 2px solid #18181b !important;
    border-radius: 8px !important;
    padding: 7px 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    box-shadow: 2px 2px 0px #18181b !important;
    transition: all 0.15s ease !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#language-select-dialog .language-buttons .btn:hover,
#language-select-dialog .language-buttons .btn.current {
    background: var(--candy-red) !important;
    color: #ffffff !important;
    border-color: #18181b !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0px #18181b !important;
}

#language-select-dialog .language-buttons span {
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Pair Key & Public Room Digits */
#pair-device-dialog .key,
#public-room-dialog .key {
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    color: var(--candy-red) !important;
    background: var(--candy-red-light) !important;
    border: 2px solid #18181b !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    margin: 12px auto !important;
    box-shadow: var(--shadow-hard-sm) !important;
    display: inline-block !important;
}

.key-qr-code {
    border: 2.5px solid #18181b !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-hard) !important;
    padding: 10px !important;
    background: #ffffff !important;
    display: inline-block !important;
    margin: 12px auto !important;
}

/* 10. About Modal Dialog (Komi Brutalist Card - Clean Information Screen Layout) */
#about {
    color: #18181b !important;
}

#about * {
    box-sizing: border-box !important;
}

/* Hide PairDrop's old blue radial background completely */
#about x-background {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#about:target,
#about.active {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18, 18, 20, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

#about:target .about-card,
#about.active .about-card {
    background: #ffffff !important;
    border: var(--border-ink-heavy) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-hard-lg) !important;
    max-width: min(92vw, 440px) !important;
    width: 100% !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    padding: 20px 20px 18px !important;
    position: relative !important;
    z-index: 10001 !important;
    box-sizing: border-box !important;
    margin: auto !important;
    text-align: left !important;
}

body.dark-theme #about:target .about-card,
body.dark-theme #about.active .about-card {
    background: #1e1e24 !important;
    border-color: #3f3f46 !important;
    box-shadow: 6px 6px 0px #09090b !important;
}

.about-card-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.about-card-header .close.icon-button {
    margin: 0 !important;
}

.about-tag {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--candy-red) !important;
    background: var(--candy-red-light) !important;
    border: 1.5px solid var(--candy-red) !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px !important;
}

body.dark-theme .about-tag {
    color: #fb7185 !important;
    background: rgba(244, 63, 94, 0.15) !important;
    border-color: #fb7185 !important;
}

.about-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    gap: 8px !important;
}

.about-hero-logo {
    max-width: 220px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.about-logo-dark {
    display: none !important;
}

body.dark-theme .about-logo-light {
    display: none !important;
}

body.dark-theme .about-logo-dark {
    display: block !important;
}

.about-hero-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.about-version-badge {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--candy-red) !important;
    background: var(--candy-red-light) !important;
    border: 1.5px solid var(--candy-red) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    letter-spacing: 0.3px !important;
}

body.dark-theme .about-version-badge {
    color: #fb7185 !important;
    background: rgba(244, 63, 94, 0.15) !important;
    border-color: #fb7185 !important;
}

.about-legal-card {
    background: #faf7f2 !important;
    border: 2px solid #18181b !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin: 0 0 12px 0 !important;
    box-shadow: 2px 2px 0px #18181b !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

body.dark-theme .about-legal-card {
    background: #18181b !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

.about-legal-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: #27272a !important;
}

body.dark-theme .about-legal-item {
    color: #d4d4d8 !important;
}

.about-legal-icon {
    font-size: 13px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.about-legal-item strong {
    color: #18181b !important;
    font-weight: 800 !important;
}

body.dark-theme .about-legal-item strong {
    color: #f4f4f5 !important;
}

.about-legal-item a {
    color: var(--candy-red) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    word-break: break-word !important;
    transition: color 0.15s ease !important;
}

.about-legal-item a:hover {
    color: var(--candy-red-dark) !important;
}

body.dark-theme .about-legal-item a {
    color: #fb7185 !important;
}

body.dark-theme .about-legal-item a:hover {
    color: #fda4af !important;
}

/* Secondary Actions Grid (Legal Terms, FAQ, GitHub) */
.about-secondary-actions {
    display: grid !important;
    grid-template-columns: 1.25fr 0.85fr 0.9fr !important;
    gap: 8px !important;
    margin: 0 0 12px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.about-sub-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 6px !important;
    background: #faf7f2 !important;
    color: #18181b !important;
    border: 2px solid #18181b !important;
    border-radius: 10px !important;
    box-shadow: 2px 2px 0px #18181b !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.about-sub-btn span {
    white-space: nowrap !important;
}

.about-sub-btn svg.icon {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
    flex-shrink: 0 !important;
}

.about-sub-btn:hover {
    background: #ffffff !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0px #18181b !important;
    color: var(--candy-red) !important;
}

.about-sub-btn:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #18181b !important;
}

body.dark-theme .about-sub-btn {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

body.dark-theme .about-sub-btn:hover {
    background: #3f3f46 !important;
    color: #fb7185 !important;
}

/* Primary Button (Got it!) */
.about-primary-action {
    width: 100% !important;
    margin: 0 !important;
}

.about-btn-primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 11px 16px !important;
    background: var(--candy-red) !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    border: 2px solid #18181b !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0px #18181b !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
}

.about-btn-primary:hover {
    background: var(--candy-red-dark) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0px #18181b !important;
    color: #ffffff !important;
}

.about-btn-primary:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0px #18181b !important;
}

body.dark-theme .about-btn-primary {
    border-color: #3f3f46 !important;
    box-shadow: 3px 3px 0px #09090b !important;
}

/* 11. Mobile Responsive Layout (Phones down to 320px) */
@media (max-width: 640px) {
    body {
        padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    }

    #main-header,
    header.komi-navbar {
        margin: max(10px, env(safe-area-inset-top)) auto 8px !important;
        width: calc(100% - 16px) !important;
        max-width: 640px !important;
        padding: 6px 10px !important;
        border: 2px solid #18181b !important;
        border-radius: 14px !important;
        box-shadow: 3px 3px 0px #18181b !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        min-height: 52px !important;
    }

    body.dark-theme #main-header,
    body.dark-theme header.komi-navbar {
        border-color: #3f3f46 !important;
        box-shadow: 3px 3px 0px #09090b !important;
    }

    #brand-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 0 0 2px !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .brand-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 8px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        line-height: 1 !important;
    }

    .brand-wordmark-img {
        height: clamp(29px, 7.6vw, 33px) !important;
        max-width: clamp(125px, 33vw, 150px) !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
        vertical-align: middle !important;
        transform: translateY(1.5px) !important;
    }

    body.light-theme img.brand-wordmark-dark,
    body:not(.dark-theme) img.brand-wordmark-dark {
        display: none !important;
    }

    body.dark-theme img.brand-wordmark-light {
        display: none !important;
    }

    .brand-status {
        display: none !important; /* Hide tiny status badge on narrow screens to guarantee plenty of breathing room */
    }

    /* Redesigned Mobile Action Controls: Unified Neo-Brutalist Segmented Toolstrip */
    .komi-actions {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        background: #faf7f2 !important;
        border: 2px solid #18181b !important;
        border-radius: 10px !important;
        box-shadow: 2px 2px 0px #18181b !important;
        padding: 2px 3px !important;
        gap: 2px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    body.dark-theme .komi-actions {
        background: #27272a !important;
        border-color: #3f3f46 !important;
        box-shadow: 2px 2px 0px #09090b !important;
    }

    .komi-actions .icon-button:not([hidden]) {
        width: clamp(25px, 6.4vw, 29px) !important;
        height: clamp(25px, 6.4vw, 29px) !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #18181b !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        outline: none !important;
        transition: background-color 0.12s ease, transform 0.1s ease, color 0.12s ease !important;
        flex-shrink: 0 !important;
    }

    body.dark-theme .komi-actions .icon-button:not([hidden]) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #f4f4f5 !important;
    }

    .komi-actions .icon-button:hover,
    .komi-actions .icon-button:focus-visible {
        background: #ffe4e6 !important;
        color: #e11d48 !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .komi-actions .icon-button:active {
        background: #fecdd3 !important;
        color: #be123c !important;
        transform: scale(0.92) !important;
        box-shadow: none !important;
    }

    body.dark-theme .komi-actions .icon-button:hover,
    body.dark-theme .komi-actions .icon-button:focus-visible {
        background: #3f3f46 !important;
        color: #fb7185 !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.dark-theme .komi-actions .icon-button:active {
        background: rgba(244, 63, 94, 0.25) !important;
        color: #fda4af !important;
        transform: scale(0.92) !important;
        box-shadow: none !important;
    }

    .komi-actions .icon-button svg,
    .komi-actions .icon-button svg.icon {
        width: clamp(14px, 3.8vw, 17px) !important;
        height: clamp(14px, 3.8vw, 17px) !important;
        display: block !important;
        margin: auto !important;
        pointer-events: none !important;
    }

    #theme-wrapper div {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Dialog close buttons on mobile retain their own standalone compact style */
    .close.icon-button {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .close.icon-button svg,
    .close.icon-button svg.icon {
        width: 16px !important;
        height: 16px !important;
    }

    /* Responsive About Secondary Actions (Legal Terms, FAQ, GitHub) */
    .about-secondary-actions {
        grid-template-columns: 1.25fr 0.85fr 0.9fr !important;
        gap: 6px !important;
    }

    .about-sub-btn {
        padding: 7px 4px !important;
        gap: 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .about-sub-btn svg.icon {
        width: 13px !important;
        height: 13px !important;
    }

    @media (max-width: 390px) {
        #main-header,
        header.komi-navbar {
            width: calc(100% - 14px) !important;
            padding: 5px 8px !important;
            margin: max(10px, env(safe-area-inset-top)) auto 8px !important;
            border-radius: 12px !important;
            gap: 6px !important;
        }

        #brand-header {
            padding: 0 0 0 2px !important;
        }

        .brand-wordmark-img {
            height: clamp(28px, 7.2vw, 31px) !important;
            max-width: 135px !important;
            transform: translateY(1.5px) !important;
        }

        .komi-actions {
            padding: 2px 2px !important;
            gap: 1.5px !important;
        }

        .komi-actions .icon-button:not([hidden]) {
            width: 25px !important;
            height: 25px !important;
            border-radius: 6px !important;
        }

        .komi-actions .icon-button svg,
        .komi-actions .icon-button svg.icon {
            width: 14.5px !important;
            height: 14.5px !important;
        }

        .about-secondary-actions {
            grid-template-columns: 1.3fr 0.8fr 0.9fr !important;
            gap: 4px !important;
        }

        .about-sub-btn {
            padding: 6px 3px !important;
            gap: 3px !important;
            font-size: 10.5px !important;
            border-radius: 8px !important;
            white-space: nowrap !important;
        }

        .about-sub-btn svg.icon {
            width: 12px !important;
            height: 12px !important;
        }
    }

    @media (max-width: 340px) {
        #main-header,
        header.komi-navbar {
            width: calc(100% - 10px) !important;
            padding: 4px 6px !important;
            gap: 4px !important;
            border-radius: 10px !important;
        }

        #brand-header {
            padding: 0 0 0 1px !important;
        }

        .brand-wordmark-img {
            height: 25px !important;
            max-width: 110px !important;
            transform: translateY(1px) !important;
        }

        .komi-actions {
            padding: 1px 2px !important;
            gap: 1px !important;
            border-radius: 8px !important;
        }

        .komi-actions .icon-button:not([hidden]) {
            width: 23px !important;
            height: 23px !important;
            border-radius: 5px !important;
        }

        .komi-actions .icon-button svg,
        .komi-actions .icon-button svg.icon {
            width: 13px !important;
            height: 13px !important;
        }

        .about-sub-btn {
            font-size: 9.5px !important;
            padding: 5px 2px !important;
        }
    }

    /* Mobile Peer Cards Grid */
    x-peers {
        gap: 12px !important;
        padding: 6px !important;
        overflow: visible !important;
    }

    x-peer {
        overflow: visible !important;
    }

    x-peer label {
        width: 128px !important;
        padding: 14px 8px 12px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    x-peer .icon-wrapper {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
    }

    x-peer .icon-wrapper svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Mobile Peer Progress Ring (Centered over 44px icon) */
    x-peer .progress,
    x-peer.ws-peer .progress {
        top: -4px !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.78) !important;
        transform-origin: center center !important;
    }

    x-peer .device-descriptor {
        margin-top: 7px !important;
        padding: 0 4px !important;
    }

    x-peer .device-descriptor .name {
        font-size: 12.5px !important;
    }

    x-peer:not([status]) .device-descriptor .device-name,
    x-peer[status] .device-descriptor .status:not(:empty) {
        font-size: 9.5px !important;
        padding: 2px 6px !important;
        max-width: 100% !important;
    }

    /* Mobile Compact Empty State Card */
    x-no-peers {
        padding: 26px 18px 20px !important;
        border-radius: 16px !important;
        max-width: 92% !important;
        margin: 12px auto !important;
    }

    x-no-peers h2 {
        font-size: 1.15rem !important;
    }

    x-no-peers div {
        font-size: 0.88rem !important;
    }

    /* Mobile Footer */
    footer {
        margin-bottom: 14px !important;
        padding: 0 10px !important;
    }

    footer .logo {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 6px !important;
    }

    footer > .column {
        padding: 12px 14px !important;
        border-radius: 16px !important;
    }

    .known-as-wrapper {
        font-size: 12px !important;
    }

    #display-name {
        font-size: 12px !important;
        padding: 3px 8px !important;
        max-width: 9em !important;
    }

    .discovery-wrapper {
        flex-wrap: wrap !important;
        margin-top: 8px !important;
    }

    .discovery-wrapper .badge {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    .footer-compliance-bar {
        font-size: 10px !important;
        margin-top: 8px !important;
        gap: 2px !important;
    }

    .footer-compliance-p2p {
        font-size: 10px !important;
    }

    .footer-compliance-links {
        font-size: 10px !important;
        gap: 5px !important;
        white-space: nowrap !important;
    }

    #language-select-dialog .language-buttons {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Mobile Dialog Buttons */
    x-dialog .btn-row {
        gap: 8px !important;
        margin-top: 14px !important;
    }

    x-dialog .btn,
    .komi-btn {
        min-width: 95px !important;
        padding: 9px 14px !important;
        font-size: 12px !important;
        min-height: 42px !important;
        white-space: nowrap !important;
    }

    #receive-file-dialog #download-btn,
    #receive-file-dialog #share-btn,
    #receive-request-dialog #accept-request {
        padding: 9px 16px !important;
        min-width: max-content !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 360px) {
    x-dialog .btn,
    .komi-btn {
        min-width: 80px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .footer-compliance-p2p,
    .footer-compliance-links {
        font-size: 9px !important;
        gap: 4px !important;
    }
}

/* 10. PWA Install UI (Header Button & Mobile Banner) */
#install {
    color: var(--candy-red) !important;
    border-color: var(--candy-red) !important;
}

#install:hover {
    background: var(--candy-red-light) !important;
    color: var(--candy-red-dark) !important;
}

body.dark-theme #install {
    color: #fb7185 !important;
    border-color: #fb7185 !important;
}

body.dark-theme #install:hover {
    background: rgba(244, 63, 94, 0.15) !important;
}

.pwa-install-banner {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 440px) !important;
    background: #ffffff !important;
    border: var(--border-ink-heavy) !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0px #18181b !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
    animation: pwa-banner-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes pwa-banner-slide-up {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.pwa-install-banner[hidden] {
    display: none !important;
}

.pwa-banner-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #18181b !important;
    line-height: 1.35 !important;
    text-align: left !important;
    flex: 1 !important;
}

.pwa-banner-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.pwa-banner-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.pwa-btn-install {
    background: var(--candy-red) !important;
    color: #ffffff !important;
    border: 1.5px solid #18181b !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    box-shadow: 2px 2px 0px #18181b !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.pwa-btn-install:hover {
    background: var(--candy-red-dark) !important;
    transform: translate(-1px, -1px) !important;
    box-shadow: 3px 3px 0px #18181b !important;
}

.pwa-btn-install:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #18181b !important;
}

.pwa-btn-dismiss {
    background: transparent !important;
    border: none !important;
    font-size: 14px !important;
    color: #71717a !important;
    cursor: pointer !important;
    padding: 4px 6px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.pwa-btn-dismiss:hover {
    color: #18181b !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.dark-theme .pwa-install-banner {
    background: #1e1e24 !important;
    border-color: #3f3f46 !important;
    box-shadow: 4px 4px 0px #09090b !important;
}

body.dark-theme .pwa-banner-content {
    color: #f4f4f5 !important;
}

body.dark-theme .pwa-btn-install {
    background: #f43f5e !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

body.dark-theme .pwa-btn-dismiss {
    color: #a1a1aa !important;
}

body.dark-theme .pwa-btn-dismiss:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Productivity & Transfer Feature Styles
   ========================================================================== */

/* Transfer History Modal & Card */
.history-paper {
    max-width: 500px !important;
    width: 92% !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: var(--border-ink-heavy) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-hard-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.dark-theme .history-paper {
    background: #1e1e24 !important;
    border-color: #3f3f46 !important;
    box-shadow: 6px 6px 0px #09090b !important;
}

.history-header {
    padding: 12px 16px !important;
    border-bottom: 2px solid #18181b !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

.history-header .close.icon-button {
    position: static !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    box-shadow: 2px 2px 0px #18181b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.history-header .close.icon-button:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #18181b !important;
}

.history-header .close.icon-button svg,
.history-header .close.icon-button svg.icon {
    width: 16px !important;
    height: 16px !important;
    fill: #18181b !important;
    display: block !important;
    margin: auto !important;
}

body.dark-theme .history-header .close.icon-button {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

body.dark-theme .history-header .close.icon-button svg,
body.dark-theme .history-header .close.icon-button svg.icon {
    fill: #f4f4f5 !important;
}

body.dark-theme .history-header {
    border-color: #3f3f46 !important;
}

.history-header .dialog-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    color: #18181b !important;
}

body.dark-theme .history-header .dialog-title {
    color: #f4f4f5 !important;
}

.history-list-wrapper {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 16px !important;
    max-height: 52vh !important;
}

.history-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.history-card-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-hard-sm) !important;
    transition: transform 0.15s ease !important;
}

body.dark-theme .history-card-item {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

.history-icon-badge {
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    border: 1.5px solid #18181b !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.history-icon-badge.sent {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.history-icon-badge.received {
    background: #ffe4e6 !important;
    color: #e11d48 !important;
    border-color: #e11d48 !important;
}

body.dark-theme .history-icon-badge.sent {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

body.dark-theme .history-icon-badge.received {
    background: rgba(244, 63, 94, 0.2) !important;
    color: #fb7185 !important;
    border-color: #fb7185 !important;
}

.history-item-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.history-item-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #18181b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.dark-theme .history-item-title {
    color: #f4f4f5 !important;
}

.history-item-meta {
    font-size: 11.5px !important;
    color: #71717a !important;
    display: flex !important;
    gap: 6px !important;
    margin-top: 2px !important;
}

body.dark-theme .history-item-meta {
    color: #a1a1aa !important;
}

.history-item-time {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a1a1aa !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.history-empty-state {
    text-align: center !important;
    padding: 36px 16px !important;
    color: #71717a !important;
}

.history-empty-icon {
    font-size: 36px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.history-empty-state p {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #18181b !important;
    margin: 0 0 4px 0 !important;
}

body.dark-theme .history-empty-state p {
    color: #f4f4f5 !important;
}

.history-empty-sub {
    font-size: 12px !important;
}

.history-footer {
    padding: 12px 18px !important;
    border-top: 2px solid #18181b !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 10px !important;
}

body.dark-theme .history-footer {
    border-color: #3f3f46 !important;
}

/* Enhanced In-Browser File Preview Box */
.file-preview {
    margin: 12px auto !important;
    max-width: 100% !important;
    text-align: center !important;
}

.preview-media {
    border: 2px solid #18181b !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-hard-sm) !important;
    margin: 6px auto !important;
    display: block !important;
}

.preview-image {
    max-height: 200px !important;
    max-width: 92% !important;
    object-fit: contain !important;
    background: #000000 !important;
}

.preview-audio {
    width: 95% !important;
    max-width: 320px !important;
}

.preview-video {
    max-height: 200px !important;
    max-width: 92% !important;
    background: #000000 !important;
}

.preview-doc {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    background: #ffe4e6 !important;
    color: #18181b !important;
    max-width: 90% !important;
}

.preview-doc-icon {
    font-size: 24px !important;
}

.preview-doc-name {
    font-weight: 700 !important;
    font-size: 13.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.preview-doc-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   Security & Control Feature Styles
   ========================================================================== */

/* PIN Protect Toggle Button in Share Panel */
.pin-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 800 !important;
    font-size: 11.5px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.pin-toggle-btn.active {
    background: #ffe4e6 !important;
    color: #e11d48 !important;
    border-color: #e11d48 !important;
    box-shadow: 2px 2px 0px #e11d48 !important;
}

body.dark-theme .pin-toggle-btn.active {
    background: rgba(225, 29, 72, 0.25) !important;
    color: #fb7185 !important;
    border-color: #fb7185 !important;
}

/* PIN Badge in Request & Receive Dialogs */
.req-pin-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    background: #ffe4e6 !important;
    color: #e11d48 !important;
    border: 1.5px solid #e11d48 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    margin-top: 6px !important;
}

body.dark-theme .req-pin-badge {
    background: rgba(225, 29, 72, 0.2) !important;
    color: #fb7185 !important;
    border-color: #fb7185 !important;
}

.req-pin-badge .icon {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}

/* Trust Device Checkbox Label in Receive Request */
.trust-device-wrapper {
    margin: 8px auto !important;
    max-width: 90% !important;
}

.trust-device-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #18181b !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    background: #faf7f2 !important;
    border: 1.5px solid #18181b !important;
}

body.dark-theme .trust-device-label {
    background: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

.trust-device-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #e11d48 !important;
    cursor: pointer !important;
}

/* PIN Unlock Section in Receive File Dialog */
.receive-pin-section {
    background: #faf7f2 !important;
    border: 2px dashed #18181b !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin: 12px auto !important;
    max-width: 320px !important;
    width: 90% !important;
    text-align: center !important;
}

body.dark-theme .receive-pin-section {
    background: #27272a !important;
    border-color: #3f3f46 !important;
}

.pin-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #18181b !important;
    margin-bottom: 10px !important;
}

body.dark-theme .pin-section-title {
    color: #f4f4f5 !important;
}

.pin-section-title .icon {
    width: 15px !important;
    height: 15px !important;
    fill: currentColor !important;
}

.pin-input-group {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}

#receive-pin-input {
    width: 100px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 6px !important;
    text-align: center !important;
    padding: 8px 10px !important;
    border: 2px solid #18181b !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #18181b !important;
    -webkit-text-fill-color: #18181b !important;
    caret-color: #18181b !important;
    box-shadow: 2px 2px 0px #18181b !important;
    outline: none !important;
}

#receive-pin-input::placeholder {
    color: #a1a1aa !important;
    -webkit-text-fill-color: #a1a1aa !important;
    opacity: 0.45 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    letter-spacing: 4px !important;
}

body.dark-theme #receive-pin-input {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
    -webkit-text-fill-color: #f4f4f5 !important;
    caret-color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

body.dark-theme #receive-pin-input::placeholder {
    color: #71717a !important;
    -webkit-text-fill-color: #71717a !important;
    opacity: 0.45 !important;
}

#btn-unlock-pin {
    background-color: #e11d48 !important;
    color: #ffffff !important;
    border: 2px solid #18181b !important;
    font-weight: 800 !important;
    padding: 8px 14px !important;
    box-shadow: 2px 2px 0px #18181b !important;
    white-space: nowrap !important;
}

body.dark-theme #btn-unlock-pin {
    background-color: #e11d48 !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

/* Hard Lock: Hide download button, share button, and preview box when locked */
#receive-file-dialog.is-pin-locked #download-btn,
#receive-file-dialog.is-pin-locked #share-btn,
#receive-file-dialog.is-pin-locked .center.file-preview,
#receive-file-dialog.is-pin-locked .file-preview {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

#receive-file-dialog #download-btn[hidden],
#receive-file-dialog #share-btn[hidden] {
    display: none !important;
}

.pin-error-msg {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
    margin-top: 8px !important;
}

/* Security & Control Dialog Paper */
.security-paper {
    max-width: 480px !important;
    width: 92% !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: var(--border-ink-heavy) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-hard-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.dark-theme .security-paper {
    background: #1e1e24 !important;
    border-color: #3f3f46 !important;
    box-shadow: 6px 6px 0px #09090b !important;
}

.security-header {
    padding: 12px 16px !important;
    border-bottom: 2px solid #18181b !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

.security-header .close.icon-button {
    position: static !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    box-shadow: 2px 2px 0px #18181b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.security-header .close.icon-button:active {
    transform: translate(1px, 1px) !important;
    box-shadow: 1px 1px 0px #18181b !important;
}

.security-header .close.icon-button svg,
.security-header .close.icon-button svg.icon {
    width: 16px !important;
    height: 16px !important;
    fill: #18181b !important;
    display: block !important;
    margin: auto !important;
}

body.dark-theme .security-header .close.icon-button {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

body.dark-theme .security-header .close.icon-button svg,
body.dark-theme .security-header .close.icon-button svg.icon {
    fill: #f4f4f5 !important;
}

body.dark-theme .security-header {
    border-color: #3f3f46 !important;
}

.security-header .dialog-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    color: #18181b !important;
}

body.dark-theme .security-header .dialog-title {
    color: #f4f4f5 !important;
}

.security-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.security-card-box {
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    box-shadow: var(--shadow-hard-sm) !important;
}

body.dark-theme .security-card-box {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

.security-box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.security-box-title {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #18181b !important;
}

body.dark-theme .security-box-title {
    color: #f4f4f5 !important;
}

.security-box-title .icon {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

.security-box-desc {
    font-size: 12px !important;
    color: #71717a !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.4 !important;
}

body.dark-theme .security-box-desc {
    color: #a1a1aa !important;
}

/* Neo Brutalist Switch */
.neo-switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}

.neo-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.neo-slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e4e4e7 !important;
    border: 2px solid #18181b !important;
    border-radius: 24px !important;
    transition: 0.2s !important;
}

.neo-slider:before {
    position: absolute !important;
    content: "" !important;
    height: 14px !important;
    width: 14px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: #18181b !important;
    border-radius: 50% !important;
    transition: 0.2s !important;
}

body.dark-theme .neo-slider {
    background-color: #3f3f46 !important;
    border-color: #71717a !important;
}

body.dark-theme .neo-slider:before {
    background-color: #f4f4f5 !important;
}

.neo-switch input:checked + .neo-slider {
    background-color: #e11d48 !important;
    border-color: #18181b !important;
}

.neo-switch input:checked + .neo-slider:before {
    transform: translateX(18px) !important;
    background-color: #ffffff !important;
}

.sec-pin-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed #d4d4d8 !important;
}

body.dark-theme .sec-pin-input-row {
    border-color: #3f3f46 !important;
}

.sec-pin-input-row label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #18181b !important;
}

body.dark-theme .sec-pin-input-row label {
    color: #f4f4f5 !important;
}

.sec-pin-input-row input {
    width: 85px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 5px !important;
    padding: 6px 8px !important;
    border: 2px solid #18181b !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #18181b !important;
    -webkit-text-fill-color: #18181b !important;
    caret-color: #18181b !important;
    box-shadow: 2px 2px 0px #18181b !important;
    outline: none !important;
}

.sec-pin-input-row input::placeholder {
    color: #a1a1aa !important;
    -webkit-text-fill-color: #a1a1aa !important;
    opacity: 0.45 !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: 4px !important;
}

body.dark-theme .sec-pin-input-row input {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
    -webkit-text-fill-color: #f4f4f5 !important;
    caret-color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

body.dark-theme .sec-pin-input-row input::placeholder {
    color: #71717a !important;
    -webkit-text-fill-color: #71717a !important;
    opacity: 0.45 !important;
}

/* Trusted Devices list */
.trusted-devices-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 10px !important;
}

.trusted-device-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    background: #faf7f2 !important;
    border: 1.5px solid #18181b !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #18181b !important;
}

body.dark-theme .trusted-device-item {
    background: #18181b !important;
    border-color: #3f3f46 !important;
    color: #f4f4f5 !important;
}

.trusted-device-empty {
    font-size: 11.5px !important;
    color: #a1a1aa !important;
    font-style: italic !important;
    padding: 4px 0 !important;
}

.btn-revoke-peer {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #e11d48 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.btn-revoke-peer:hover {
    background: #ffe4e6 !important;
}

body.dark-theme .btn-revoke-peer:hover {
    background: rgba(225, 29, 72, 0.25) !important;
}

.security-footer {
    padding: 12px 18px !important;
    border-top: 2px solid #18181b !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.dark-theme .security-footer {
    border-color: #3f3f46 !important;
}

/* 13. Floating Notification Permission Banner */
.neo-notification-banner {
    position: fixed !important;
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10000 !important;
    width: calc(100% - 24px) !important;
    max-width: 440px !important;
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0px #18181b !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    animation: banner-slide-down 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.dark-theme .neo-notification-banner {
    background: #1e1e24 !important;
    border-color: #3f3f46 !important;
    box-shadow: 4px 4px 0px #09090b !important;
    color: #f4f4f5 !important;
}

@keyframes banner-slide-down {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.notification-banner-inner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.notification-banner-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.notification-banner-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
    text-align: left !important;
}

.notification-banner-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #18181b !important;
}

body.dark-theme .notification-banner-title {
    color: #f4f4f5 !important;
}

.notification-banner-sub {
    font-size: 11.5px !important;
    color: #71717a !important;
    line-height: 1.3 !important;
}

body.dark-theme .notification-banner-sub {
    color: #a1a1aa !important;
}

.notification-banner-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.notification-banner-actions .btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* 14. Custom Notification Sounds Chime Selector */
.sound-chime-selector {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    width: 100% !important;
}

.btn-sound-option {
    padding: 9px 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 9px !important;
    border: 2px solid #d4d4d8 !important;
    background: #ffffff !important;
    color: #18181b !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    transition: all 0.12s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    white-space: nowrap !important;
}

body.dark-theme .btn-sound-option {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    color: #f4f4f5 !important;
}

.btn-sound-option:hover {
    border-color: #18181b !important;
    transform: translateY(-1px) !important;
}

.btn-sound-option.active {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #18181b !important;
    box-shadow: 2px 2px 0px #18181b !important;
    transform: translateY(-1px) !important;
}

body.dark-theme .btn-sound-option.active {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #f4f4f5 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

/* 15. Public Room / Vanity Custom Room Dialog */
.public-room-paper {
    max-width: 460px !important;
    width: 92% !important;
    background: #ffffff !important;
    border: var(--border-ink-heavy) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-hard-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.dark-theme .public-room-paper {
    background: #1e1e24 !important;
    border-color: #3f3f46 !important;
    box-shadow: 6px 6px 0px #09090b !important;
}

.public-room-header {
    padding: 12px 16px !important;
    border-bottom: 2px solid #18181b !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

body.dark-theme .public-room-header {
    border-color: #3f3f46 !important;
}

.public-room-header .dialog-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    color: #18181b !important;
}

body.dark-theme .public-room-header .dialog-title {
    color: #f4f4f5 !important;
}

.public-room-header .close.icon-button {
    position: static !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    box-shadow: 2px 2px 0px #18181b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
}

body.dark-theme .public-room-header .close.icon-button {
    background: #27272a !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}

.public-room-header .close.icon-button svg {
    width: 16px !important;
    height: 16px !important;
    fill: #18181b !important;
    display: block !important;
    margin: auto !important;
}

body.dark-theme .public-room-header .close.icon-button svg {
    fill: #f4f4f5 !important;
}

.key-qr-code {
    border-radius: 12px !important;
    padding: 8px !important;
    background: #ffffff !important;
    border: 2px solid #18181b !important;
    box-shadow: 3px 3px 0px #18181b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px auto !important;
}

.key-qr-code svg {
    display: block !important;
    width: 130px !important;
    height: 130px !important;
}

.center.key {
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    color: #e11d48 !important;
    margin: 4px 0 6px !important;
}

body.dark-theme .center.key {
    color: #fb7185 !important;
}

body.dark-theme .vanity-room-box input {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    box-shadow: 2px 2px 0px #09090b !important;
}