/* Harbor Drop — web app theme (aligned with landing page) */

:root {
    --harbor-bg: #06080c;
    --harbor-bg-elevated: #0c1018;
    --harbor-bg-card: #141a24;
    --harbor-teal: #5eead4;
    --harbor-teal-dim: rgba(94, 234, 212, 0.14);
    --harbor-indigo: #818cf8;
    --harbor-indigo-dim: rgba(129, 140, 248, 0.12);
    --harbor-amber: #fbbf24;
    --harbor-border: rgba(255, 255, 255, 0.08);
    --harbor-border-strong: rgba(255, 255, 255, 0.12);
    --harbor-text-muted: rgba(240, 242, 248, 0.55);
    --harbor-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --harbor-radius: 14px;
    --harbor-radius-lg: 20px;
}

/* Brand colors */
body {
    --primary-color: var(--harbor-teal);
    --paired-device-color: var(--harbor-indigo);
    --public-room-color: var(--harbor-amber);
    --accent-color: var(--harbor-teal);
    --ws-peer-color: #f87171;
}

/* Dark theme — Harbor palette */
body {
    --dt-text-color: 240, 242, 248;
    --dt-dialog-bg-color: #141a24;
    --dt-bg-color: 6, 8, 12;
    --dt-bg-color-secondary: #1a2230;
    --dt-border-color: var(--harbor-border-strong);
    --dt-badge-color: #3d4a5c;
    --dt-lang-hr-color: #2a3344;
}

body.dark-theme {
    --text-color: var(--dt-text-color);
    --dialog-bg-color: var(--dt-dialog-bg-color);
    --bg-color: var(--dt-bg-color);
    --bg-color-secondary: var(--dt-bg-color-secondary);
    --border-color: var(--dt-border-color);
    --badge-color: var(--dt-badge-color);
    --lang-hr-color: var(--dt-lang-hr-color);
}

@media (prefers-color-scheme: dark) {
    body:not(.light-theme) {
        --text-color: var(--dt-text-color);
        --dialog-bg-color: var(--dt-dialog-bg-color);
        --bg-color: var(--dt-bg-color);
        --bg-color-secondary: var(--dt-bg-color-secondary);
        --border-color: var(--dt-border-color);
        --badge-color: var(--dt-badge-color);
        --lang-hr-color: var(--dt-lang-hr-color);
    }
}

/* Light theme */
body.light-theme {
    --lt-text-color: 30, 35, 45;
    --lt-dialog-bg-color: #f8fafc;
    --lt-bg-color: 248, 250, 252;
    --lt-bg-color-secondary: #eef2f7;
    --lt-border-color: #c5cdd8;
    --primary-color: #0d9488;
    --paired-device-color: #6366f1;
    --harbor-border: rgba(0, 0, 0, 0.08);
    --harbor-border-strong: rgba(0, 0, 0, 0.1);
    --harbor-text-muted: rgba(30, 35, 45, 0.55);
    --harbor-teal-dim: rgba(13, 148, 136, 0.1);
    --harbor-indigo-dim: rgba(99, 102, 241, 0.08);
}

/* Typography */
.font-body1,
body,
.btn {
    font-family: "Outfit", system-ui, -apple-system, sans-serif;
}

h1 {
    font-weight: 600;
    letter-spacing: -0.03em;
}

h2 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Ambient background */
body {
    background-color: transparent !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 45% at 15% -5%, rgba(94, 234, 212, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 10%, rgba(129, 140, 248, 0.11) 0%, transparent 50%),
        radial-gradient(ellipse 40% 30% at 50% 100%, rgba(251, 191, 36, 0.05) 0%, transparent 45%),
        var(--harbor-bg);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.4;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 15%, transparent 75%);
}

body.light-theme::before {
    background:
        radial-gradient(ellipse 55% 45% at 15% -5%, rgba(13, 148, 136, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 10%, rgba(99, 102, 241, 0.07) 0%, transparent 50%),
        rgb(var(--lt-bg-color));
}

body.light-theme::after {
    opacity: 0.25;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

#center,
footer {
    position: relative;
    z-index: 1;
}

/* Above ambient layers, below dialogs (header stays z-index: 20 from styles-main) */
canvas.circles {
    z-index: -1;
}

/* Header */
header {
    backdrop-filter: blur(20px) saturate(1.25);
    -webkit-backdrop-filter: blur(20px) saturate(1.25);
    background: rgba(6, 8, 12, 0.78);
    border-bottom: 1px solid var(--harbor-border);
    min-height: 52px;
    padding: 6px 14px;
    box-shadow: 0 1px 0 rgba(94, 234, 212, 0.04);
}

body.light-theme header {
    background: rgba(248, 250, 252, 0.88);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    box-shadow: none;
}

header > .harbor-brand {
    flex-direction: row !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
    touch-action: auto;
}

.harbor-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    padding: 6px 10px 6px 6px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    order: 999;
    transition: background 0.25s var(--harbor-ease);
}

.harbor-brand:hover {
    background: var(--harbor-teal-dim);
}

.harbor-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.harbor-brand span {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1;
}

.harbor-brand em {
    font-style: normal;
    color: var(--harbor-teal);
}

body.light-theme .harbor-brand em {
    color: #0d9488;
}

.icon-button:hover::before {
    background: var(--harbor-teal);
}

.icon-button::before {
    border-radius: 12px;
}

/* Center / empty state */
x-no-peers h2 {
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 1.35rem;
}

x-no-peers > div {
    color: var(--harbor-text-muted);
    max-width: 28em;
    line-height: 1.5;
}

x-instructions {
    opacity: 0.8;
    color: var(--harbor-text-muted);
}

#websocket-fallback {
    font-size: 12px;
    color: var(--harbor-text-muted);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--harbor-border);
}

body.light-theme #websocket-fallback {
    background: rgba(0, 0, 0, 0.03);
}

/* Peer avatars */
x-peer .icon-wrapper {
    background-image: linear-gradient(135deg, var(--harbor-teal) 0%, color-mix(in srgb, var(--harbor-indigo) 85%, white) 100%);
    box-shadow:
        0 8px 28px -6px rgba(94, 234, 212, 0.35),
        0 0 0 1px rgba(94, 234, 212, 0.15);
    transition: transform 0.2s var(--harbor-ease), box-shadow 0.2s var(--harbor-ease);
}

x-peer label:hover .icon-wrapper {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 12px 32px -4px rgba(94, 234, 212, 0.4),
        0 0 0 1px rgba(94, 234, 212, 0.25);
}

x-peer.type-secret .icon-wrapper {
    background-image: linear-gradient(135deg, var(--harbor-indigo) 0%, #a5b4fc 100%);
    box-shadow:
        0 8px 28px -6px rgba(129, 140, 248, 0.35),
        0 0 0 1px rgba(129, 140, 248, 0.15);
}

x-peer:not(.type-ip):not(.type-secret).type-public-id .icon-wrapper {
    background-image: linear-gradient(135deg, var(--harbor-amber) 0%, #f59e0b 100%);
    box-shadow:
        0 8px 28px -6px rgba(251, 191, 36, 0.3),
        0 0 0 1px rgba(251, 191, 36, 0.12);
}

x-peer .device-name {
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Footer */
footer .logo {
    color: var(--harbor-teal);
    filter: drop-shadow(0 4px 16px rgba(94, 234, 212, 0.25));
}

.known-as-wrapper {
    font-weight: 500;
    color: var(--harbor-text-muted);
}

/* Footer display name: avoid overlap with long “known as” label (e.g. Chinese) */
footer .known-as-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    max-width: min(100%, 26rem);
    margin-inline: auto;
    padding: 0 12px;
    box-sizing: border-box;
}

footer .known-as-wrapper > span:first-of-type {
    flex: 0 1 auto;
    line-height: 1.35;
    text-align: center;
}

#display-name {
    background: var(--harbor-teal-dim) !important;
    border: 1px solid rgba(94, 234, 212, 0.2);
    font-weight: 600;
    color: var(--harbor-teal);
}

footer #display-name {
    margin: 0 !important;
    flex: 0 1 auto;
    min-width: min(10em, 100%);
    max-width: 100%;
    height: auto;
    min-height: 34px;
    padding: 6px 12px;
    line-height: 1.25;
    border-radius: 10px;
    border: 1px solid rgba(94, 234, 212, 0.2) !important;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

footer .known-as-wrapper .edit-pen {
    margin: 0 !important;
    flex-shrink: 0;
}

html[dir="rtl"] footer #display-name,
html[dir="rtl"] footer .known-as-wrapper .edit-pen {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.light-theme #display-name {
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.25);
}

body.light-theme footer #display-name {
    border-color: rgba(13, 148, 136, 0.25) !important;
}

.discovery-wrapper {
    margin-top: 18px;
    padding: 10px 14px !important;
    gap: 8px;
    border-radius: var(--harbor-radius) !important;
    border: 1px solid var(--harbor-border) !important;
    background: rgba(20, 26, 36, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.4);
}

body.light-theme .discovery-wrapper {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

.discovery-wrapper > .row:first-child span {
    font-size: 13px;
    color: var(--harbor-text-muted);
}

.badge {
    border-radius: 999px;
    padding: 0.25em 0.75em;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
}

.badge-room-ip {
    background: var(--harbor-teal-dim);
    color: var(--harbor-teal);
    border-color: rgba(94, 234, 212, 0.25);
}

.badge-room-secret {
    background: var(--harbor-indigo-dim);
    color: var(--harbor-indigo);
    border-color: rgba(129, 140, 248, 0.25);
}

.badge-room-public-id {
    background: rgba(251, 191, 36, 0.12);
    color: var(--harbor-amber);
    border-color: rgba(251, 191, 36, 0.25);
}

/* Panels */
.panel.column {
    border-radius: var(--harbor-radius);
    border: 1px solid var(--harbor-border);
    background: rgba(20, 26, 36, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.light-theme .panel.column {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
}

/* Buttons */
.btn {
    letter-spacing: 0.06em;
    font-weight: 600;
    transition: filter 0.2s var(--harbor-ease), transform 0.15s var(--harbor-ease);
}

.btn:not([disabled]):active {
    transform: scale(0.98);
}

.btn-primary,
.btn[type="submit"]:not([disabled]):not(.btn-grey) {
    background: linear-gradient(135deg, var(--harbor-teal) 0%, color-mix(in srgb, var(--harbor-indigo) 40%, var(--harbor-teal)) 100%);
    color: #06080c;
    border: none;
}

.btn-grey {
    background: var(--harbor-bg-card);
    border: 1px solid var(--harbor-border);
    color: rgb(var(--text-color));
}

body.light-theme .btn-grey {
    background: #fff;
}

.btn-rounded {
    border-radius: 12px;
}

/* Share panel */
.shr-panel {
    background-image: linear-gradient(
        225deg,
        var(--harbor-teal) 0%,
        color-mix(in srgb, var(--harbor-indigo) 70%, #06080c) 100%
    );
    border-radius: var(--harbor-radius);
    border: 1px solid rgba(94, 234, 212, 0.25);
    box-shadow: 0 16px 48px -12px rgba(94, 234, 212, 0.35);
}

/* Toast */
x-toast {
    border-radius: var(--harbor-radius);
    border: 1px solid var(--harbor-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(20, 26, 36, 0.92) !important;
}

body.light-theme x-toast {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* About overlay */
#about x-background {
    background: var(--harbor-teal);
    background-image: radial-gradient(
        circle at calc(50% - 36px),
        var(--harbor-teal) 0%,
        var(--harbor-bg) 75%
    );
}

#about .about-content {
    max-width: 22em;
    padding: 0 24px 48px;
    gap: 12px;
}

#about .about-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 4px;
    filter: drop-shadow(0 8px 24px rgba(94, 234, 212, 0.35));
}

#about .about-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
}

#about .about-title em {
    font-style: normal;
    color: var(--harbor-teal);
}

#about .about-tagline {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.4;
}

#about .about-description {
    margin: 4px 0 0;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
}

#about .icon-button::before {
    background: rgba(255, 255, 255, 0.9);
}

/* Selection */
::selection {
    background: rgba(94, 234, 212, 0.35);
    color: #fff;
}

body.light-theme ::selection {
    color: #06080c;
}

#primaryGradient .start-color,
#primaryGradient .stop-color {
    stop-color: var(--harbor-teal);
}

@supports (stop-color: color-mix(in srgb, blue 50%, black)) {
    #primaryGradient .start-color {
        stop-color: color-mix(in srgb, var(--harbor-teal) 80%, white);
    }
    #primaryGradient .stop-color {
        stop-color: color-mix(in srgb, var(--harbor-indigo) 60%, var(--harbor-teal));
    }
}

/* Switch toggle */
.switch .slider {
    background: var(--harbor-bg-card);
    border: 1px solid var(--harbor-border);
}

input:checked + .slider {
    background: var(--harbor-teal);
}