/* Messenger theme tokens — aligned with start-site landing (dark monochrome) */

:root,
[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces — void + floating panels */
    --bg: var(--nexa-void, #000000);
    --bg-subtle: var(--nexa-surface, #0a0a0a);
    --surface: var(--nexa-surface-chat, #0d0d0d);
    --surface-elevated: var(--nexa-surface-elevated, #111111);
    --surface-overlay: var(--nexa-surface-interactive, #181818);
    /* Text — start-site --txt / --txt-2 / --txt-3 */
    --text: #f4f4f5;
    --text-secondary: rgba(212, 212, 216, 0.78);
    --text-tertiary: #9ca3af;
    /* Accent — start-site primary CTA (light gray → white) */
    --accent: #f4f4f5;
    --accent-strong: #ffffff;
    --accent-muted: rgba(244, 244, 245, 0.28);
    --glass-intensity: 50;
    --bubble-own: color-mix(in srgb, #3f3f46 calc(58% + var(--glass-intensity) * 0.32%), transparent);
    --bubble-own-text: #f4f4f5;
    --bubble-other: color-mix(in srgb, #1c1c1c calc(52% + var(--glass-intensity) * 0.34%), transparent);
    --bubble-other-border: color-mix(in srgb, #fff 5%, transparent);
    --bubble-other-text: #f4f4f5;
    --border: color-mix(in srgb, #fff 7%, #12151c);
    --border-strong: color-mix(in srgb, #fff 12%, #12151c);
    --border-subtle: color-mix(in srgb, #fff 5%, #12151c);
    --glass: rgba(14, 14, 14, 0.92);
    --glass-border: color-mix(in srgb, #fff 7%, #12151c);
    --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-bubble: 0 1px 1px rgba(0, 0, 0, 0.28);
    --shadow-bubble-own: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
    --shadow-bubble-other: inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent);
    --green: #86efac;
    --amber: #fbbf24;
    /* The one red for destructive actions (delete, remove, log out) and errors,
       site-wide. Tints below derive from it; --red is kept as an alias. */
    /* Themes override both per palette (public/js/themes.js): #F62834 on
       Dark Neon, #D34B37 on the light themes. */
    --color-danger: #F62834;
    --text-danger: var(--color-danger);
    --danger: var(--color-danger);
    /* Lighter step for hover/pressed text on dark surfaces. */
    --danger-hover: color-mix(in srgb, var(--danger) 70%, #fff);
    --danger-10: color-mix(in srgb, var(--danger) 12%, transparent);
    --danger-20: color-mix(in srgb, var(--danger) 22%, transparent);
    --red: var(--danger);
    --accent-10: rgba(244, 244, 245, 0.1);
    --accent-20: rgba(244, 244, 245, 0.18);
    --green-10: rgba(134, 239, 172, 0.12);
    --green-20: rgba(134, 239, 172, 0.22);
    --red-10: var(--danger-10);
    --red-20: var(--danger-20);
    --focus: rgba(244, 244, 245, 0.45);

    /* Polish tokens */
    --shell-bg: var(--nexa-surface, #0a0a0a);
    --shell-border: color-mix(in srgb, #fff 7%, #0a0a0a);
    --row-hover: rgba(255, 255, 255, 0.045);
    --row-active: rgba(244, 244, 245, 0.1);
    --row-active-border: transparent;
    --row-active-shadow: none;
    --input-fill: rgba(255, 255, 255, 0.04);
    --input-fill-hover: rgba(255, 255, 255, 0.06);
    --input-fill-focus: rgba(255, 255, 255, 0.07);
    --input-border: color-mix(in srgb, #fff 7%, #12151c);
    --input-border-hover: color-mix(in srgb, #fff 12%, #12151c);
    --input-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    --input-shadow-focus: 0 0 0 3px var(--accent-10), 0 1px 2px rgba(0, 0, 0, 0.2);
    --btn-secondary-bg: rgba(255, 255, 255, 0.04);
    --btn-secondary-bg-hover: rgba(255, 255, 255, 0.08);
    --btn-secondary-border: color-mix(in srgb, #fff 7%, #12151c);
    --overlay-bg: #131313;
    --overlay-border: color-mix(in srgb, #fff 7%, #131313);
    --overlay-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
    --backdrop: rgba(0, 0, 0, 0.55);
    --backdrop-modal: rgba(0, 0, 0, 0.72);
    --settings-row-bg: rgba(255, 255, 255, 0.03);
    --chat-dot-grid: rgba(255, 255, 255, 0.02);
    --login-grid: rgba(244, 244, 245, 0.06);
    --login-glow: rgba(244, 244, 245, 0.08);
    --login-vignette: rgba(0, 0, 0, 0.75);
    --login-card-bg: #131313;
    --login-card-border: rgba(255, 255, 255, 0.1);
    --login-card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
    --login-mark-bg: rgba(244, 244, 245, 0.08);
    --login-mark-border: rgba(244, 244, 245, 0.18);
    --login-mark-shadow: 0 4px 20px rgba(244, 244, 245, 0.08);

    /* Legacy aliases (shell / sidebar) */
    --void: var(--bg);
    --panel: var(--surface-elevated);
    --card: #1a1a1a;
    --hover: var(--row-hover);
    --active: rgba(255, 255, 255, 0.08);
    --b0: var(--border-subtle);
    --b1: var(--border);
    --b2: var(--border-strong);
    --b3: rgba(255, 255, 255, 0.22);
    --t1: var(--text);
    --t2: var(--text-secondary);
    --t3: var(--text-tertiary);
    --t4: rgba(156, 163, 175, 0.7);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--f-ui);
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -0.006em;
    text-rendering: optimizeLegibility;
}

/* ─── Chat layout (centered column) ─── */
.chat-main {
    background: transparent;
}

.chat-main::before {
    opacity: 0;
}

/* chat-stage / #messages layout — app-layout.css */

#chat-welcome {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.input-bar {
    background: var(--glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid var(--border);
}

/* ─── Composer (glass textarea) — shell owns chrome; field stays clear ─── */
#page-chat .composer-shell #messageInput,
#messageInput {
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
}

#page-chat .composer-shell #messageInput {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.input-row {
    align-items: center;
}

#sendBtn {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 6%, transparent);
    border: none;
    border-radius: 999px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

#sendBtn:hover {
    background: color-mix(in srgb, var(--theme-text, #ffffff) 10%, transparent);
    box-shadow: none;
}

/* ─── Message rows ─── */
.message-row {
    animation: messageIn var(--duration-slow) var(--ease-out) both;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.message-row--own {
    align-items: flex-end;
}

.message-row--other {
    align-items: flex-start;
}

.message-row + .message-row.message-row--grouped {
    margin-top: 2px;
}

.message-row + .message-row.message-row--new-group,
.message-row + .message-row:not(.message-row--grouped) {
    margin-top: 8px;
}

@keyframes messageIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.message-sender-label {
    color: var(--accent);
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 2px;
    padding: 0 4px;
}

.message-content-wrap {
    display: flex;
    flex-direction: column;
    /* Continuous width vs thread size — no breakpoint jumps while the peer panel eases. */
    max-width: min(
        var(--msg-bubble-cap, 440px),
        calc(56cqi + max(0px, 900px - 100cqi) * 0.28)
    );
    min-width: 0;
    overflow: visible;
}

.message-row--own .message-content-wrap {
    align-items: flex-end;
}

.message-row--other .message-content-wrap {
    align-items: flex-start;
}

.message-shell {
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    position: relative;
    vertical-align: top;
}

.message-row:hover,
.message-row:focus-within {
    z-index: 3;
}

/* ─── Bubbles ─── */
:root {
    --msg-bubble-cap: 440px;
    --msg-bubble-max: min(56%, 440px);
}

.message-bubble {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-bubble);
    box-shadow: var(--shadow-bubble);
    contain: paint;
    display: block;
    font-size: 14px;
    line-height: 1.42;
    max-width: 100%;
    overflow: hidden;
    padding: 8px 12px 11px;
    position: relative;
    transform: translate3d(0, 0, 0);
    transition: border-radius 160ms var(--ease-out);
    width: max-content;
}

.message-bubble--own {
    background: var(--bubble-own);
    border: 1px solid color-mix(in srgb, var(--theme-tint, #fff) 5%, transparent);
    color: var(--bubble-own-text);
}

.message-bubble--other {
    background: var(--bubble-other);
    border: 1px solid var(--bubble-other-border);
    color: var(--bubble-other-text);
}

/* Tail is a tighter corner, only on the last bubble of a sender cluster. */
.message-bubble--own.message-bubble--cluster-single {
    border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail) var(--radius-bubble);
}

.message-bubble--own.message-bubble--cluster-first {
    border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-join) var(--radius-bubble);
}

.message-bubble--own.message-bubble--cluster-middle {
    border-radius: var(--radius-bubble) var(--radius-bubble-join) var(--radius-bubble-join) var(--radius-bubble);
}

.message-bubble--own.message-bubble--cluster-last {
    border-radius: var(--radius-bubble) var(--radius-bubble-join) var(--radius-bubble-tail) var(--radius-bubble);
}

.message-bubble--other.message-bubble--cluster-single {
    border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail);
}

.message-bubble--other.message-bubble--cluster-first {
    border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-join);
}

.message-bubble--other.message-bubble--cluster-middle {
    border-radius: var(--radius-bubble-join) var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-join);
}

.message-bubble--other.message-bubble--cluster-last {
    border-radius: var(--radius-bubble-join) var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail);
}

.message-meta {
    align-items: baseline;
    display: inline-flex;
    float: right;
    font-size: 10px;
    gap: 4px;
    line-height: 1;
    margin-left: 8px;
    opacity: 0.72;
    position: relative;
    top: 5px;
    white-space: nowrap;
}

.message-bubble--own .message-meta {
    color: color-mix(in srgb, var(--bubble-own-text) 75%, transparent);
}

.message-bubble--other .message-meta {
    color: color-mix(in srgb, var(--bubble-other-text) 75%, transparent);
}

.message-time {
    font-variant-numeric: tabular-nums;
}

.message-status {
    font-size: 11px;
    line-height: 1;
}

.message-status[data-status="pending"],
.message-status[data-status="sending"] {
    animation: statusPulse 1.4s ease-in-out infinite;
    opacity: 0.65;
}

.message-status[data-status="read"] {
    color: color-mix(in srgb, var(--bubble-own-text) 70%, var(--green));
}

.message-status[data-status="failed"] {
    color: var(--text-danger);
}

@keyframes statusPulse {
    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

.message-row.is-pending .message-bubble--own {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bubble-own-text) 18%, transparent);
}

.message-action-btn--delete {
    border-color: var(--border);
    color: var(--text-secondary);
}

.message-action-btn:hover {
    background: var(--red-10);
    border-color: var(--red-20);
    color: var(--text-danger);
}

/* Glass surfaces (sidebar, modals) — lighter blur, solid fill */
.sidebar,
.nav-rail {
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-color: var(--shell-border, var(--border));
}

.modal-panel,
.popover-menu {
    background: var(--surface-elevated);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
}

.contact-search-input,
.message-search-panel input {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.contact-search-input:focus,
.message-search-panel input:focus {
    background: var(--surface-elevated);
    border-color: var(--accent-muted);
}

.message-search-panel {
    background: var(--glass);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.ui-backdrop {
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter: blur(6px);
}

/* Settings theme picker */
.theme-picker {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 4px;
}

.theme-picker button {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    padding: 10px 8px;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.theme-picker button:hover {
    background: var(--hover);
    color: var(--text);
}

.theme-picker button.is-active {
    background: var(--accent-10);
    border-color: var(--accent-muted);
    box-shadow: 0 0 0 1px var(--accent-muted);
    color: var(--accent);
}

.settings-label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 640px) {
    .message-content-wrap {
        max-width: min(72%, calc(100% - 36px));
    }
}