/* ElevenDrop visual layer — overrides + extensions on top of styles-main.css
   Brand: emerald #00bb7f, violet #7a5fb8, dark #0a0a0a, Geist typeface. */

/* ─────────────────────────────────────────────────────────────
   Global tokens
   ───────────────────────────────────────────────────────────── */
:root {
    --ed-radius-sm: 8px;
    --ed-radius-md: 12px;
    --ed-radius-lg: 20px;
    --ed-radius-xl: 28px;
    --ed-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 0 0 1px rgba(255, 255, 255, 0.06);
    --ed-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 40px -12px rgba(0, 0, 0, 0.6);
    --ed-emerald: #00bb7f;
    --ed-violet: #7a5fb8;
    --ed-yellow: #e9e200;
}

body {
    letter-spacing: -0.005em;
}

/* Refine heading look (was emerald — too dominant; use brand-tinted text) */
x-no-peers h2,
[data-i18n-key="instructions.no-peers-title"] {
    color: rgb(var(--text-color));
    font-weight: 600;
    letter-spacing: -0.025em;
    font-size: 26px;
    line-height: 1.15;
    margin-bottom: 14px;
}

/* In dark theme, apply a subtle vertical gradient on the heading text */
body.dark-theme x-no-peers h2 {
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (prefers-color-scheme: dark) {
    body:not(.light-theme) x-no-peers h2 {
        background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* ─────────────────────────────────────────────────────────────
   Header — brand wordmark + glass panel
   ───────────────────────────────────────────────────────────── */
header {
    padding-left: 16px !important;
    padding-right: 12px !important;
    min-height: 60px !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0) 100%);
}

body.light-theme header {
    background: linear-gradient(180deg, rgba(250, 250, 250, 0.85) 0%, rgba(250, 250, 250, 0) 100%);
}

@media (prefers-color-scheme: light) {
    body:not(.dark-theme) header {
        background: linear-gradient(180deg, rgba(250, 250, 250, 0.85) 0%, rgba(250, 250, 250, 0) 100%);
    }
}

/* Brand wordmark sits OUTSIDE the header so the overflow-evaluator
   (which inspects header's direct children) is not confused. */
.brand-wordmark {
    position: absolute;
    top: 12px;
    left: 18px;
    z-index: 21;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgb(var(--text-color));
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 16px;
    padding: 6px 6px;
    border-radius: 10px;
    transition: opacity 200ms ease, background-color 200ms ease;
}

html[dir="rtl"] .brand-wordmark { left: auto; right: 18px; }

.brand-wordmark:hover {
    opacity: 0.85;
    background-color: rgba(255, 255, 255, 0.03);
}

.brand-glyph {
    width: 22px;
    height: 22px;
    color: var(--ed-emerald);
    filter: drop-shadow(0 0 12px rgba(0, 187, 127, 0.35));
}

.brand-name {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-theme .brand-name {
    background: linear-gradient(180deg, #0a0a0a 0%, #444 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (prefers-color-scheme: light) {
    body:not(.dark-theme) .brand-name {
        background: linear-gradient(180deg, #0a0a0a 0%, #444 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* Icon buttons — refined to feel less Material */
header .icon-button {
    border-radius: 10px;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
    color: rgba(255, 255, 255, 0.75);
}

header .icon-button:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: rgb(var(--text-color));
}

header .icon-button.accent-button {
    color: var(--ed-emerald);
}

header .icon-button.accent-button:hover {
    background-color: rgba(0, 187, 127, 0.12);
    color: var(--ed-emerald);
}

header .icon-button.active {
    background-color: rgba(0, 187, 127, 0.22) !important;
    box-shadow: 0 0 0 1px rgba(0, 187, 127, 0.4), 0 0 18px rgba(0, 187, 127, 0.35);
    transform: scale(0.96);
}

body.light-theme header .icon-button {
    color: rgba(20, 20, 20, 0.7);
}

body.light-theme header .icon-button:hover {
    background-color: rgba(10, 10, 10, 0.06);
    color: #0a0a0a;
}

@media (prefers-color-scheme: light) {
    body:not(.dark-theme) header .icon-button {
        color: rgba(20, 20, 20, 0.7);
    }
    body:not(.dark-theme) header .icon-button:hover {
        background-color: rgba(10, 10, 10, 0.06);
        color: #0a0a0a;
    }
}

/* ─────────────────────────────────────────────────────────────
   Background — much subtler radial waves
   ───────────────────────────────────────────────────────────── */
canvas.circles {
    opacity: 0.35;
    filter: blur(0.4px);
}

/* ─────────────────────────────────────────────────────────────
   Footer — identity card
   ───────────────────────────────────────────────────────────── */
footer {
    padding: 0 16px 22px;
    align-items: center !important;
}

.identity-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--ed-radius-lg);
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    text-align: left;
}

body.light-theme .identity-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: light) {
    body:not(.dark-theme) .identity-card {
        background: rgba(0, 0, 0, 0.02);
        border-color: rgba(0, 0, 0, 0.08);
    }
}

.identity-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: radial-gradient(circle at 30% 30%, rgba(0, 187, 127, 0.16), rgba(122, 95, 184, 0.08) 60%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--ed-shadow-1);
}

.identity-avatar-glyph {
    width: 38px;
    height: 38px;
}

.identity-avatar-glyph .start-color { stop-color: var(--ed-emerald); }
.identity-avatar-glyph .stop-color  { stop-color: var(--ed-violet); }

.identity-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ed-emerald);
    border: 3px solid rgb(var(--bg-color));
    box-shadow: 0 0 12px rgba(0, 187, 127, 0.65);
    animation: ed-pulse 2.4s ease-in-out infinite;
}

@keyframes ed-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0, 187, 127, 0.65); }
    50%      { box-shadow: 0 0 18px rgba(0, 187, 127, 0.95); }
}

.identity-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.identity-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--text-color), 0.55);
}

.identity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
}

footer .edit-pen {
    margin: 0 !important;
}

footer #display-name {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: rgb(var(--text-color)) !important;
    outline: none !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    line-height: 1.3 !important;
    transition: background-color 160ms ease;
    min-width: 1ch;
    background-clip: padding-box !important;
}

#display-name:hover,
#display-name:focus {
    background-color: rgba(255, 255, 255, 0.04);
}

body.light-theme #display-name:hover,
body.light-theme #display-name:focus {
    background-color: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: light) {
    body:not(.dark-theme) #display-name:hover,
    body:not(.dark-theme) #display-name:focus {
        background-color: rgba(0, 0, 0, 0.04);
    }
}

footer .edit-pen {
    width: 14px;
    height: 14px;
    color: rgba(var(--text-color), 0.4);
    flex-shrink: 0;
    transition: color 160ms ease;
}

.identity-row:hover .edit-pen { color: var(--ed-emerald); }

.identity-discovery {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 0 !important;
    flex-direction: row !important;
}

.discovery-label {
    font-size: 11px;
    color: rgba(var(--text-color), 0.5);
    letter-spacing: -0.01em;
}

/* Chips — refined, thin border, no chunky bg.
   We win over .badge from styles-main.css via specificity + !important on bg. */
.identity-discovery .chip,
footer .identity-card .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid;
    background-color: transparent !important;
    color: var(--ed-emerald);
    white-space: nowrap;
    line-height: 1;
}

.identity-discovery .chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}

.identity-discovery .chip-room-ip {
    color: var(--ed-emerald);
    border-color: rgba(0, 187, 127, 0.35);
    background-color: rgba(0, 187, 127, 0.06) !important;
}

.identity-discovery .chip-room-secret {
    color: var(--ed-violet);
    border-color: rgba(122, 95, 184, 0.4);
    background-color: rgba(122, 95, 184, 0.06) !important;
}

.identity-discovery .chip-room-public-id {
    color: var(--ed-yellow);
    border-color: rgba(233, 226, 0, 0.4);
    background-color: rgba(233, 226, 0, 0.06) !important;
}

/* ─────────────────────────────────────────────────────────────
   Peer cards — generative avatar gradient + initials
   ───────────────────────────────────────────────────────────── */
x-peer {
    --peer-gradient: linear-gradient(135deg, hsl(160, 65%, 45%), hsl(200, 70%, 40%));
    --peer-hue: 160;
}

x-peer .icon-wrapper {
    position: relative;
    background: var(--peer-gradient) !important;
    background-image: var(--peer-gradient) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 36px -10px hsla(var(--peer-hue), 70%, 30%, 0.5);
    overflow: hidden;
}

x-peer .icon-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 60%);
    pointer-events: none;
}

x-peer .icon-wrapper svg.icon {
    opacity: 0.0;
    display: none;
}

.peer-initials {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
    font-feature-settings: "ss01";
}

/* Variant for paired (violet) and public (yellow) — keep brand band */
x-peer.type-secret .icon-wrapper {
    box-shadow: 0 0 0 1px rgba(122, 95, 184, 0.5), 0 12px 36px -10px rgba(122, 95, 184, 0.5);
}

x-peer.type-public-id:not(.type-ip):not(.type-secret) .icon-wrapper {
    box-shadow: 0 0 0 1px rgba(233, 226, 0, 0.5), 0 12px 36px -10px rgba(233, 226, 0, 0.4);
}

x-peer .device-descriptor .name {
    font-weight: 600;
    letter-spacing: -0.015em;
}

x-peer .device-descriptor .device-name {
    color: rgba(var(--text-color), 0.55);
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────
   Overlay primitives (QR + Onboarding)
   ───────────────────────────────────────────────────────────── */
.ed-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ed-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    transition: opacity 200ms ease;
}

.ed-overlay.open .ed-overlay-backdrop {
    opacity: 1;
}

.ed-modal {
    position: relative;
    background: #0e0e0e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--ed-radius-xl);
    padding: 32px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), opacity 200ms ease;
}

.ed-overlay.open .ed-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.ed-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease, color 160ms ease;
}

.ed-modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgb(255, 255, 255);
}

.ed-modal-close .icon {
    width: 18px;
    height: 18px;
}

.ed-modal-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ed-emerald);
    margin-bottom: 10px;
}

.ed-modal-title {
    color: #fff;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
}

.ed-modal-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 22px;
}

.ed-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 100ms ease;
}

.ed-btn .icon {
    width: 16px;
    height: 16px;
}

.ed-btn-ghost {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

.ed-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.ed-btn-ghost.copied {
    color: var(--ed-emerald);
    border-color: rgba(0, 187, 127, 0.5);
    background: rgba(0, 187, 127, 0.08);
}

.ed-btn-primary {
    background: var(--ed-emerald);
    color: #062013;
    font-weight: 600;
}

.ed-btn-primary:hover {
    background: #00d18e;
    transform: translateY(-1px);
}

.ed-btn-primary:active {
    transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────
   QR share modal
   ───────────────────────────────────────────────────────────── */
.qr-share-canvas {
    background: #fff;
    border-radius: var(--ed-radius-lg);
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    margin-bottom: 16px;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
    width: 100%;
    box-sizing: border-box;
}

.qr-share-canvas svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 280px;
    max-height: 280px;
}

.qr-share-loading {
    color: #0a0a0a;
    font-size: 13px;
}

.qr-share-url-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px 4px 4px 14px;
}

.qr-share-url {
    flex: 1;
    font-family: "Geist Mono", "SF Mono", monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────
   Welcome onboarding modal
   ───────────────────────────────────────────────────────────── */
.welcome-modal {
    max-width: 480px;
}

.welcome-glyph {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: radial-gradient(circle at 30% 30%, rgba(0, 187, 127, 0.2), rgba(122, 95, 184, 0.12) 60%, transparent 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.welcome-glyph svg {
    width: 38px;
    height: 38px;
}

.welcome-title {
    margin-bottom: 20px;
}

.welcome-step {
    display: flex;
    gap: 14px;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.55;
}

.welcome-step strong {
    color: #fff;
    font-weight: 600;
}

.welcome-step code {
    background: rgba(0, 187, 127, 0.1);
    color: var(--ed-emerald);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 12px;
    font-family: "Geist Mono", "SF Mono", monospace;
}

.welcome-step em {
    color: rgba(255, 255, 255, 0.9);
    font-style: normal;
    font-weight: 500;
}

.welcome-step-num {
    flex-shrink: 0;
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--ed-emerald);
    letter-spacing: 0.05em;
    padding-top: 2px;
}

.welcome-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

/* ─────────────────────────────────────────────────────────────
   Light theme overrides for overlays (modal still dark — intentional)
   ───────────────────────────────────────────────────────────── */
/* Overlays stay dark in light theme for consistency with brand. */

/* ─────────────────────────────────────────────────────────────
   Hide upstream radial pulse if there's already too much going on
   (keep it subtle — the canvas.circles class above handles opacity)
   ───────────────────────────────────────────────────────────── */

/* Mobile tweaks */
@media (max-width: 520px) {
    .brand-name { display: none; }
    header { padding: 8px 12px !important; }
    .ed-modal { padding: 24px 20px; border-radius: 22px; }
    .ed-modal-title { font-size: 20px; }
    .identity-card { padding: 8px 12px 8px 8px; gap: 10px; }
    .identity-avatar { width: 48px; height: 48px; border-radius: 14px; }
    .identity-avatar-glyph { width: 32px; height: 32px; }
    #display-name { font-size: 16px; }
}