/* P2P Chat — quiet editorial surfaces, precise separators, and an ownable deep-teal accent. */
:root {
    color-scheme: light;
    --page: #f3f5f2;
    --paper: #ffffff;
    --ink: #172521;
    --muted: #71807a;
    --line: #dfe6e1;
    --accent: #0f766e;
    --focus: #14b8a6;
}

html.dark {
    color-scheme: dark;
    --page: #101916;
    --paper: #18231f;
    --ink: #e6eeea;
    --muted: #99aaa2;
    --line: #2b3933;
    --accent: #5cc8b5;
    --focus: #5cc8b5;
}

html,
body {
    min-height: 100%;
    overscroll-behavior: none;
}

body {
    background: var(--page) !important;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
    font: inherit;
}

button,
a,
label {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 62%, transparent);
    outline-offset: 2px;
}

::selection {
    background: #a7e4d7;
    color: #12231e;
}

/* Slightly warmer paper and calmer borders counter the stock-dashboard look. */
header {
    background: color-mix(in srgb, var(--paper) 92%, transparent) !important;
    border-color: var(--line) !important;
    box-shadow: 0 1px 0 rgb(23 37 33 / 3%);
    min-height: 64px;
}

.dark header {
    background: color-mix(in srgb, var(--paper) 94%, transparent) !important;
}

#view-home {
    background:
        radial-gradient(ellipse at 78% 0%, rgb(20 184 166 / 6%), transparent 34rem),
        var(--page);
    scrollbar-gutter: stable;
}

#view-home .rounded-2xl {
    border-radius: 1.15rem;
}

#view-home .shadow-xl,
#view-home .shadow-2xl {
    box-shadow: 0 16px 44px rgb(19 40 33 / 6%), 0 2px 8px rgb(19 40 33 / 3%);
}

.dark #view-home .shadow-xl,
.dark #view-home .shadow-2xl {
    box-shadow: 0 18px 46px rgb(0 0 0 / 18%), 0 2px 8px rgb(0 0 0 / 10%);
}

#view-home input,
#view-gateway input,
#composer-input {
    border-color: var(--line);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

#view-home input:focus,
#view-gateway input:focus,
#composer-input:focus {
    border-color: var(--focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 15%, transparent);
}

#form-direct-chat > button,
#form-custom-group > button,
#btn-gateway-unlock {
    min-height: 48px;
    letter-spacing: -0.005em;
}

#view-gateway {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#view-gateway > div {
    max-height: min(92dvh, 720px);
    overflow-y: auto;
    border-radius: 1.25rem;
}

#view-chat {
    min-height: 0;
    background: var(--page);
}

#chat-feed {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.chat-grid-bg {
    background-color: var(--page);
    background-image: linear-gradient(to bottom, rgb(15 118 110 / 2%) 1px, transparent 1px);
    background-size: 100% 36px;
}

.dark .chat-grid-bg {
    background-image: linear-gradient(to bottom, rgb(92 200 181 / 3%) 1px, transparent 1px);
}

#activity-bar {
    background: #183b35 !important;
    border-color: #28534b !important;
}

#form-composer {
    max-width: 58rem;
}

#composer-input {
    min-height: 42px;
    line-height: 1.45;
}

#emoji-drawer {
    max-width: 58rem;
    margin-inline: auto;
    width: 100%;
}

/* Native Audio Player Styling */
audio {
    height: 36px;
    border-radius: 8px;
    outline: none;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(113 128 122 / 26%);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(15 118 110 / 55%);
}

@keyframes pulse-danger {
    0% { transform: scale(.96); box-shadow: 0 0 0 0 rgb(239 68 68 / 56%); }
    70% { transform: scale(1); box-shadow: 0 0 0 9px rgb(239 68 68 / 0%); }
    100% { transform: scale(.96); box-shadow: 0 0 0 0 rgb(239 68 68 / 0%); }
}

.recording-pulse {
    animation: pulse-danger 1.4s infinite;
    background-color: #ef4444 !important;
    color: #fff !important;
}

@media (max-width: 640px) {
    html,
    body {
        height: 100%;
        min-height: 100%;
    }

    body {
        height: 100dvh !important;
        min-height: 100svh;
    }

    header {
        gap: .45rem;
        padding: .55rem .75rem !important;
        min-height: 58px;
    }

    header > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
        gap: .55rem !important;
    }

    header > div:last-child {
        flex: 0 1 auto;
        max-width: 58%;
        gap: .35rem !important;
        justify-content: flex-end;
    }

    header a > div:last-child {
        min-width: 0;
    }

    #ui-brand-name {
        font-size: .9rem;
    }

    #ui-room-subtitle {
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
    }

    header button {
        min-width: 36px;
        min-height: 36px;
        padding-inline: .55rem !important;
    }

    #push-banner {
        align-items: flex-start;
        gap: .6rem;
        padding: .65rem .75rem !important;
        font-size: 11px;
    }

    #push-banner > div {
        align-items: flex-start;
    }

    #btn-allow-push {
        margin-left: 0;
        padding-inline: .65rem;
        min-height: 34px;
    }

    #view-home {
        padding: .9rem .75rem calc(1rem + env(safe-area-inset-bottom)) !important;
    }

    #view-home > div {
        gap: 1rem;
    }

    #view-home .p-6 {
        padding: 1rem;
    }

    #view-home .p-8 {
        padding: 1.1rem;
    }

    #view-home .text-xl {
        font-size: 1.1rem;
        line-height: 1.35;
    }

    #tab-btn-direct,
    #tab-btn-group {
        padding-inline: .45rem;
        font-size: 11px;
        line-height: 1.25;
    }

    #view-gateway {
        align-items: flex-start;
        padding: 1rem .75rem calc(1rem + env(safe-area-inset-bottom)) !important;
    }

    #view-gateway > div {
        max-height: none;
        padding: 1.25rem;
        margin-block: auto;
    }

    #view-chat {
        height: auto;
        flex: 1 1 0%;
    }

    #chat-feed {
        padding: .85rem .75rem;
        gap: .75rem;
    }

    #view-chat footer {
        padding: .5rem .55rem calc(.55rem + env(safe-area-inset-bottom));
    }

    #form-composer {
        gap: .35rem;
    }

    #btn-emoji,
    #btn-voice,
    #form-composer label[for="file-uploader"],
    #form-composer button[type="submit"] {
        width: 38px;
        height: 42px;
        min-width: 38px;
        border-radius: .75rem;
    }

    #composer-input {
        min-height: 42px;
        padding-inline: .75rem;
        font-size: 16px;
    }

    #activity-bar {
        gap: .5rem;
        padding-inline: .75rem;
    }

    #toast-alert {
        right: .75rem;
        bottom: calc(.75rem + env(safe-area-inset-bottom));
        left: .75rem;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    header > div:last-child {
        max-width: 54%;
    }

    #badge-super-admin {
        display: none;
    }

    #btn-copy-link,
    #btn-toggle-lock {
        padding-inline: .45rem !important;
    }

    #btn-copy-link span,
    #label-lock-state {
        display: none;
    }

    #tab-btn-direct,
    #tab-btn-group {
        gap: .35rem;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}