/* ============================================================
   INTER — fuente de industria
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --red:       #E00035;
    --red-hover: #c8002f;
    --red-glow:  rgba(224, 0, 53, 0.30);
    --red-dim:   rgba(224, 0, 53, 0.12);

    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   22px;
    --r-xl:   28px;
    --r-full: 100px;

    --ease:     cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast:   0.18s;
    --t-normal: 0.26s;
    --t-slow:   0.38s;

    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
}

/* ── DARK ── */
:root, [data-theme="dark"] {
    --bg:              #1a1a1a;
    --bg-card:         rgba(255,255,255,0.05);
    --bg-input:        rgba(255,255,255,0.07);
    --bg-input-focus:  rgba(255,255,255,0.10);
    --border:          rgba(255,255,255,0.07);
    --border-hi:       rgba(255,255,255,0.12);
    --t1: #FFFFFF;
    --t2: #999999;
    --t3: #444444;
    --modal-bg:        rgba(26,26,26,0.97);
    --chat-panel:      rgba(26,26,26,0.96);
    --orb1: rgba(224, 0, 53, 0.10);
    --orb2: rgba(120, 0, 240, 0.76);
}

/* ── LIGHT ── */
[data-theme="light"] {
    --bg:              #ffffff;
    --bg-card:         rgba(0,0,0,0.04);
    --bg-input:        rgba(0,0,0,0.06);
    --bg-input-focus:  rgba(0,0,0,0.09);
    --border:          rgba(0,0,0,0.07);
    --border-hi:       rgba(0,0,0,0.13);
    --t1: #0a0a0a;
    --t2: #666666;
    --t3: #aaaaaa;
    --modal-bg:        rgb(255, 255, 255);
    --chat-panel:      rgb(255, 255, 255);
    --orb1: rgba(224, 0, 53, 0.00);
    --orb2: rgba(120, 0, 240, 0.04);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body { height: 100%; overflow: hidden; }

body {
    font-family: var(--font);
    background: var(--bg); color: var(--t1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.4s ease, color 0.4s ease;
}

/* ============================================================
   FONDO DINÁMICO
   ============================================================ */
.bg-layer {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
}

.bg-orb {
    position: absolute; border-radius: 50%; filter: blur(100px);
    transition: background 1.2s ease;
}

.bg-orb.a {
    width: 600px; height: 600px; background: var(--orb1);
    top: -20%; left: -15%;
    animation: orbDrift 32s ease-in-out infinite alternate;
}

.bg-orb.b {
    width: 500px; height: 500px; background: var(--orb2);
    bottom: -20%; right: -10%;
    animation: orbDrift 26s ease-in-out infinite alternate-reverse;
}

[data-theme="dark"] body.playing .bg-orb.a { background: rgba(224, 0, 53, 0.16); }
[data-theme="dark"] body.playing .bg-orb.b { background: rgba(120, 0, 240, 0.09); }

@keyframes orbDrift {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(60px,-40px) scale(1.12); }
    100% { transform: translate(-30px,50px) scale(0.9); }
}

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
    position: fixed; top: var(--safe-t); left: 0; right: 0;
    z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
}

.live-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 9px;
    background: rgba(224,0,53,0.10);
    border: 1px solid rgba(224,0,53,0.18);
    border-radius: var(--r-full);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.live-dot {
    width: 7px; height: 7px; background: var(--red);
    border-radius: 50%; position: relative; flex-shrink: 0;
}

.live-dot::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    background: var(--red); animation: liveRing 2s ease-out infinite;
}

@keyframes liveRing {
    0%   { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(3.2); opacity: 0; }
}

.live-text {
    font-size: 10px; font-weight: 700; color: var(--red);
    letter-spacing: 1.2px; text-transform: uppercase;
}

.top-bar-right { display: flex; align-items: center; gap: 8px; }

.listeners-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-full);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    font-size: 11px; font-weight: 600; color: var(--t2);
}

.listeners-dot { width: 5px; height: 5px; background: #30d158; border-radius: 50%; }

.theme-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg-card);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--t2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--t-fast) var(--ease);
}

.theme-btn:hover { color: var(--t1); background: var(--bg-input); }
.theme-btn svg   { width: 16px; height: 16px; }

/* ============================================================
   PLAYER
   ============================================================ */
.player {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    width: 100%; max-width: 380px;
    padding: 0 24px;
    animation: playerIn 0.7s var(--ease) both;
}

@keyframes playerIn {
    from { opacity: 0; transform: translateY(28px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── ARTWORK ── */
.artwork-wrap {
    position: relative;
    width: min(220px, 55vw);
    aspect-ratio: 1;
    margin-bottom: 32px;
}

/* Reflejo borroso lateral (solo dark) */
.artwork-blur {
    position: absolute;
    inset: 12px -24px;
    z-index: 0;
    border-radius: var(--r-xl);
    background-size: cover;
    background-position: center;
    filter: blur(28px) saturate(0.8);
    opacity: 0;
    mask-image: linear-gradient(90deg, black 0%, transparent 18%, transparent 82%, black 100%);
    -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 18%, transparent 82%, black 100%);
    transition: opacity 0.6s ease;
}

.artwork-wrap.has-blur .artwork-blur { opacity: 0.3; }

/* Halo: resplandor ambiental detrás del artwork */
.artwork-halo {
    position: absolute; inset: -24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 245 247 / 14%) 0%, transparent 70%);
    filter: blur(30px);
    opacity: 0;
    transition: opacity 0.8s ease, background 0.8s ease, filter 0.8s ease, inset 0.8s ease;
    z-index: 0;
}

body.playing .artwork-halo { opacity: 1; }

body.playing .artwork-wrap:has(.has-image) .artwork-halo {
    inset: -40px;
    background: radial-gradient(circle, rgb(255 245 247 / 20%) 0%, transparent 70%);
}


.artwork {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    border-radius: var(--r-xl);
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: box-shadow 0.6s ease, transform 0.6s var(--ease), border-color 0.6s ease;
}

/* Reflejo diagonal — da volumen a la carátula */
.artwork::after {
    content: ''; position: absolute; inset: 0;
    z-index: 3; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.10) 0%,
        transparent 45%,
        transparent 55%,
        rgba(0,0,0,0.12) 100%
    );
    opacity: 0;
    transition: opacity 0.6s ease;
}

.artwork.has-image::after { opacity: 1; }

/* Imagen */
.artwork-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    transform: scale(1.04);
    filter: saturate(0.6);
    transition: opacity 0.6s ease, transform 0.7s var(--ease), filter 0.8s ease;
}

/* Reposo con imagen: visible pero desaturada — "está ahí, dormida" */
.artwork.has-image .artwork-img {
    opacity: 1;
    transform: scale(1);
    filter: saturate(0.6);
}

.artwork.has-image .artwork-img {
    mask-image: radial-gradient(ellipse 80% 80% at center, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 50%, transparent 100%);
}

/* Reproduciendo: saturación completa, imagen viva */
body.playing .artwork.has-image .artwork-img {
    filter: saturate(1);
}

/* Elevación al reproducir */
body.playing .artwork.has-image {
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    transform: scale(1.02);
}

[data-theme="light"] body.playing .artwork.has-image {
    border-color: var(--red-dim);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.3),
        0 4px 20px var(--red-glow);
}

/* ── Ícono SVG (sin imagen) ── */
.artwork-icon {
    position: relative; z-index: 1; color: var(--t3);
    transition: color 0.5s ease;
}

body.playing .artwork-icon { color: var(--red); }
body.playing .artwork-icon svg { animation: iconPulse 3.5s ease-in-out infinite; }

@keyframes iconPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%       { transform: scale(1.08); opacity: 1; }
}

/* ── VISUALIZER ── */
.visualizer {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 3px; height: 22px; margin-bottom: 18px;
    opacity: 0.4; transition: opacity 0.4s ease;
}

body.playing .visualizer { opacity: 1; }

.v-bar {
    width: 3px; border-radius: 3px; background: var(--t3);
    transition: background 0.4s ease;
    transform: scaleY(0.15); transform-origin: bottom;
}

body.playing .v-bar { background: var(--red); animation: vAnim 0.9s ease-in-out infinite; }

.v-bar:nth-child(1)  { height: 35%;  animation-delay: 0.00s; }
.v-bar:nth-child(2)  { height: 60%;  animation-delay: 0.09s; }
.v-bar:nth-child(3)  { height: 85%;  animation-delay: 0.02s; }
.v-bar:nth-child(4)  { height: 100%; animation-delay: 0.15s; }
.v-bar:nth-child(5)  { height: 70%;  animation-delay: 0.06s; }
.v-bar:nth-child(6)  { height: 90%;  animation-delay: 0.12s; }
.v-bar:nth-child(7)  { height: 50%;  animation-delay: 0.08s; }
.v-bar:nth-child(8)  { height: 75%;  animation-delay: 0.01s; }
.v-bar:nth-child(9)  { height: 55%;  animation-delay: 0.17s; }
.v-bar:nth-child(10) { height: 80%;  animation-delay: 0.04s; }
.v-bar:nth-child(11) { height: 40%;  animation-delay: 0.13s; }

@keyframes vAnim {
    0%, 100% { transform: scaleY(0.2); opacity: 0.4; }
    50%       { transform: scaleY(1);   opacity: 1; }
}

/* ── TRACK INFO ── */
.track-info { text-align: center; margin-bottom: 28px; width: 100%; }

.track-name {
    font-size: 24px; font-weight: 800;
    letter-spacing: -0.6px; line-height: 1.15; color: var(--t1);
    white-space: nowrap; overflow: hidden;
    font-feature-settings: 'ss01' on, 'cv01' on; margin-bottom: 6px;
    mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}

.track-name .marquee {
    display: inline-block;
    padding-left: 4%;
}

.track-name.scrolling .marquee {
    animation: marquee var(--marquee-duration, 10s) linear infinite;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.track-sub {
    font-size: 14px; font-weight: 400; color: var(--t2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── CONTROLES ── */
.controls { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.play-btn {
    width: 72px; height: 72px; border-radius: 50%; border: none;
    background: var(--red); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-normal) ease;
    box-shadow: 0 4px 24px var(--red-glow);
    min-width: 44px; min-height: 44px;
}

.play-btn:hover  { transform: scale(1.06); box-shadow: 0 8px 40px rgba(224,0,53,0.45); }
.play-btn:active { transform: scale(0.94); }
.play-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.play-btn svg { width: 28px; height: 28px; }
.play-btn .icon-pause { display: none; }
body.playing .play-btn .icon-play  { display: none; }
body.playing .play-btn .icon-pause { display: block; }

.play-btn::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 1.5px solid var(--red); opacity: 0;
}

body.playing .play-btn::after { animation: playRing 2.5s ease-out infinite; }

@keyframes playRing {
    0%   { transform: scale(1);    opacity: 0.4; }
    100% { transform: scale(1.65); opacity: 0; }
}

.status-text {
    font-size: 11px; font-weight: 500; color: var(--t3);
    height: 14px; transition: color var(--t-normal) ease; letter-spacing: 0.2px;
}

body.playing .status-text { color: var(--t2); }
.status-text.error { color: var(--red); }

.vol-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 0 4px;
}

.vol-icon { color: var(--t3); flex-shrink: 0; }
.vol-icon svg { width: 15px; height: 15px; display: block; }

.vol-slider {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 3px; border-radius: 3px;
    background: var(--border-hi, rgba(255,255,255,0.12));
    outline: none; cursor: pointer; touch-action: none;
}

.vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    border-radius: 50%; background: var(--t1); cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: transform var(--t-fast) var(--ease);
}

.vol-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.vol-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--t1); cursor: pointer; border: none; }

/* ── CHAT BUTTON ── */
.chat-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 20px;
    background: var(--bg-card); border: 1px solid var(--border-hi);
    border-radius: var(--r-md); cursor: pointer;
    color: var(--t1); font-size: 14px; font-weight: 600; font-family: var(--font);
    transition: all var(--t-fast) var(--ease);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    min-height: 44px; position: relative;
}

.chat-btn:hover  { background: var(--bg-input); transform: translateY(-1px); }
.chat-btn:active { transform: translateY(0) scale(0.99); }

.chat-btn.open {
    background: var(--red-dim);
    border-color: rgba(224,0,53,0.25);
}

.chat-btn svg { width: 17px; height: 17px; color: var(--t2); flex-shrink: 0; }
.chat-btn.open svg { color: var(--red); }

.chat-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--red); color: #fff;
    font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: var(--r-full); padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg);
    animation: badgePop 0.25s var(--ease);
    pointer-events: none;
}

.chat-badge.hidden { display: none; }

@keyframes badgePop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ============================================================
   BACKDROP
   ============================================================ */
.chat-backdrop {
    position: fixed; inset: 0; z-index: 49;
    background: rgba(0,0,0,0.20);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
}

.chat-backdrop.visible { opacity: 1; pointer-events: all; }

/* ============================================================
   CHAT PANEL
   ============================================================ */
.chat-panel {
    position: fixed; left: 50%; top: 50%;
    transform: translateX(-50%) translateY(calc(-50% + 18px)) scale(0.96);
    width: min(420px, calc(100vw - 32px));
    height: min(560px, 84vh); height: min(560px, 84dvh);
    display: flex; flex-direction: column;
    background: var(--chat-panel);
    /* border: 1px solid var(--border-hi); */
    border-radius: var(--r-xl); overflow: hidden;
    -webkit-backdrop-filter: blur(48px) saturate(1.6);
    backdrop-filter: blur(48px) saturate(1.6);
    z-index: 50;
    box-shadow:
        0 24px 80px rgba(0,0,0,0.45),
        0 0 0 0.5px rgba(245,158,11,0.06) inset;
    /* box-shadow: 0 24px 80px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.04) inset; */
    opacity: 0; pointer-events: none;
    transition:
        opacity var(--t-normal) var(--ease),
        transform var(--t-slow) var(--ease);
}

.chat-panel.visible {
    opacity: 1; pointer-events: all;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Bottom sheet en móvil */
@media (max-width: 600px) {
    .chat-panel {
        top: auto; left: 0; bottom: 0; width: 100%;
        height: 82vh; height: 82dvh;
        max-height: 82vh; max-height: 82dvh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        transform: translateY(100%);
        padding-bottom: var(--safe-b);
        transition:
            opacity var(--t-normal) var(--ease),
            transform var(--t-slow) var(--ease);
    }

    .chat-panel.visible { transform: translateY(0); opacity: 1; }

    .chat-panel::before {
        content: ''; display: block; flex-shrink: 0;
        width: 32px; height: 3px; background: var(--border-hi);
        border-radius: var(--r-full); margin: 10px auto 0;
    }
}

/* ── TABLET (600–859px) — bottom sheet con más altura ── */
@media (min-width: 601px) and (max-width: 859px) {
    .chat-panel {
        top: auto; left: 0; bottom: 0; width: 100%;
        height: 75vh; height: 75dvh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        transform: translateY(100%);
        padding-bottom: var(--safe-b);
    }

    .chat-panel.visible { transform: translateY(0); opacity: 1; }

    .chat-panel::before {
        content: ''; display: block; flex-shrink: 0;
        width: 32px; height: 3px; background: var(--border-hi);
        border-radius: var(--r-full); margin: 10px auto 0;
    }
}

/* ── DESKTOP (≥860px) — al lado del reproductor, en el flujo normal ── */
@media (min-width: 860px) {
    /* Body pasa a fila — solo player y chat-panel están en el flujo */
    body {
        flex-direction: row;
        gap: 32px;
        align-items: center;
        justify-content: center;
    }

    /* Chat panel: de fixed a relative, entra con ancho */
    .chat-panel {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;

        /* Estado oculto: ancho 0, sin espacio */
        width: 0;
        height: min(640px, 88vh);
        height: min(640px, 88dvh);
        opacity: 0;
        overflow: hidden;
        transform: none;
        border-radius: var(--r-xl);
        margin: 0;
        flex-shrink: 0;

        transition:
            width var(--t-slow) var(--ease),
            opacity var(--t-normal) var(--ease);
    }

    /* Estado visible: aparece con ancho, empuja el player */
    .chat-panel.visible {
        width: 360px;
        opacity: 1;
        pointer-events: all;
        transform: none;
    }

    /* Sin handle bar en desktop */
    .chat-panel::before { display: none; }

    /* Backdrop casi invisible — el player siempre visible */
    .chat-backdrop.visible {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: none; /* clic fuera no cierra en desktop — usa el botón */
    }
}

/* CHAT HEADER */
.chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px; flex-shrink: 0;
}

.chat-header-left { display: flex; align-items: center; gap: 10px; }

.chat-avatar {
    width: 32px; height: 32px; border-radius: var(--r-sm);
    background: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.chat-avatar svg { width: 14px; height: 14px; color: #fff; }

.chat-title { font-size: 14px; font-weight: 700; color: var(--t1); letter-spacing: -0.2px; }
.chat-username { font-size: 11px; color: var(--t3); margin-top: 1px; }

.chat-header-right { display: flex; align-items: center; gap: 6px; }

.chat-viewers {
    display: flex; align-items: center; gap: 5px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-full); padding: 4px 10px 4px 7px;
    font-size: 11px; font-weight: 600; color: var(--t1);
}

.chat-viewers-dot {
    width: 6px; height: 6px; background: var(--red); border-radius: 50%;
    box-shadow: 0 0 6px var(--red);
    animation: viewerPulse 1.8s ease-in-out infinite;
}

@keyframes viewerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

.btn-rename {
    background: none; border: none; cursor: pointer; color: var(--t3);
    width: 36px; height: 36px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    transition: color var(--t-fast) ease, background var(--t-fast) ease;
}

.btn-rename:hover { color: var(--t1); background: var(--bg-card); }
.btn-rename svg   { width: 14px; height: 14px; }

/* MENSAJES */
.chat-messages {
    flex: 1; overflow-y: auto;
    padding: 4px 14px 10px;
    display: flex; flex-direction: column; gap: 4px;
    scroll-behavior: smooth; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 7%);
    scrollbar-width: none;
}

.chat-messages::-webkit-scrollbar { display: none; }

.msg {
    display: flex; flex-direction: column; gap: 3px;
    width: fit-content; max-width: 80%;
    animation: msgUp 0.26s var(--ease) both;
}

@keyframes msgUp {
    from { opacity: 0; transform: translateY(10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.msg.own   { align-self: flex-end;   align-items: flex-end; }
.msg.other { align-self: flex-start; align-items: flex-start; }

/* Nombre encima de la burbuja */
.msg-name {
    font-size: 10px; font-weight: 700;
    padding: 0 4px; white-space: nowrap; letter-spacing: 0.2px;
}
.msg.other .msg-name { color: var(--red); }
.msg.own   .msg-name { color: var(--red); opacity: 0.6; }

/* Burbuja */
.msg-row {
    display: block;
    padding: 8px 13px;
    border-radius: 18px;
    line-height: 1.48;
}
.msg.other .msg-row {
    background: var(--bg-input);
    border-bottom-left-radius: 4px;
}
.msg.own .msg-row {
    background: rgba(224,0,53,0.16);
    border-bottom-right-radius: 4px;
}

.msg-text {
    font-size: 13px; font-weight: 400; color: var(--t1); word-break: break-word;
}

/* Hora debajo */
.msg-time {
    font-size: 9px; font-weight: 400; color: var(--t3); padding: 0 4px;
}
.msg.own .msg-time { text-align: right; }

.msg-system {
    align-self: center; font-size: 10.5px; color: var(--t3);
    padding: 3px 12px; background: var(--bg-card);
    border-radius: var(--r-full); margin: 2px 0;
    animation: msgUp 0.22s var(--ease) both;
}

.chat-empty {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; color: var(--t3); font-size: 13px; text-align: center; padding-bottom: 20%;
}

.chat-empty svg { opacity: 0.18; }

/* INPUT */
.chat-input-wrap {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

.chat-input {
    flex: 1; background: var(--bg-input); border: none; outline: none;
    border-radius: var(--r-full); padding: 10px 16px;
    font-size: 16px; font-weight: 400; color: var(--t1); font-family: var(--font);
    transition: background var(--t-fast) ease;
    resize: none; line-height: 1.4; max-height: 80px; overflow-y: auto;
}

.chat-input::placeholder { color: var(--t3); }
.chat-input:focus { background: var(--bg-input-focus); }

.chat-send {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: var(--red); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) ease;
}

.chat-send:hover    { transform: scale(1.08); }
.chat-send:active   { transform: scale(0.92); }
.chat-send:disabled { opacity: 0.22; cursor: not-allowed; transform: none; }
.chat-send svg { width: 15px; height: 15px; }

/* STATUS BAR */
.chat-status {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 5px; flex-shrink: 0; border-top: 1px solid var(--border);
    font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
    transition: color 0.3s ease;
}

.chat-status.connecting { color: var(--t3); }
.chat-status.connected  { color: #30d158; }
.chat-status.error      { color: var(--red); }
.chat-status.offline    { color: var(--t3); }

.chat-status-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.chat-status.connected .chat-status-dot { animation: connPulse 2s ease-in-out infinite; }

@keyframes connPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-overlay.hidden { display: none; }

.modal {
    background: var(--modal-bg); border: 1px solid var(--border-hi);
    border-radius: var(--r-xl); padding: 36px 28px 28px;
    width: 100%; max-width: 340px; text-align: center;
    animation: modalIn 0.32s var(--ease);
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.93) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-icon {
    width: 52px; height: 52px; background: var(--red-dim);
    border: 1px solid rgba(224,0,53,0.20); border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--red); margin: 0 auto 20px;
}

.modal-icon svg { width: 24px; height: 24px; }

.modal h2 {
    font-size: 20px; font-weight: 800; letter-spacing: -0.4px;
    color: var(--t1); margin-bottom: 7px;
}

.modal p { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 24px; }

.modal-input {
    width: 100%; background: var(--bg-input); border: 1.5px solid var(--border-hi);
    border-radius: var(--r-md); padding: 13px 16px;
    font-size: 16px; font-weight: 500; color: var(--t1); font-family: var(--font);
    outline: none; text-align: center; margin-bottom: 10px;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.modal-input::placeholder { color: var(--t3); font-weight: 400; }
.modal-input:focus { border-color: var(--red); background: var(--bg-input-focus); }

.modal-error {
    font-size: 12px; font-weight: 500; color: var(--red); min-height: 16px; margin-bottom: 10px;
}

.modal-submit {
    width: 100%; padding: 14px; background: var(--red); color: #fff;
    border: none; border-radius: var(--r-md);
    font-size: 15px; font-weight: 700; font-family: var(--font);
    cursor: pointer; min-height: 44px; letter-spacing: 0.1px;
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) ease;
    box-shadow: 0 4px 20px var(--red-glow);
}

.modal-submit:hover  { background: var(--red-hover); transform: scale(1.02); }
.modal-submit:active { transform: scale(0.98); }

.modal-note { font-size: 11px; color: var(--t3); margin-top: 14px; line-height: 1.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    .artwork-wrap { width: min(180px, 50vw); margin-bottom: 24px; }
    .track-name   { font-size: 20px; }
    .player       { max-width: 340px; }
    .top-bar      { padding: 12px 16px; }
}

@media (max-height: 650px) {
    .artwork-wrap { width: min(120px, 35vw); margin-bottom: 16px; }
    .track-info   { margin-bottom: 18px; }
    .controls     { gap: 12px; }
    .play-btn     { width: 60px; height: 60px; }
    .visualizer   { display: none; }
    .track-name   { font-size: 18px; }
}

@media (min-height: 860px) {
    .artwork-wrap { width: min(260px, 62vw); }
    .track-name   { font-size: 26px; }
}

/* ============================================================
   DM — MENSAJE A MODERADORES
   ============================================================ */

/* Botón DM — igual al de chat pero con color ámbar */
.dm-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 20px;
    background: var(--bg-card); border: 1px solid var(--border-hi);
    border-radius: var(--r-md); cursor: pointer;
    color: var(--t1); font-size: 14px; font-weight: 600; font-family: var(--font);
    transition: all var(--t-fast) var(--ease);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    min-height: 44px; position: relative;
}

.dm-btn:hover  { background: var(--bg-input); transform: translateY(-1px);  }
.dm-btn:active { transform: translateY(0) scale(0.99); }
.dm-btn svg    { width: 17px; height: 17px; color: var(--t2); flex-shrink: 0; }
.dm-btn:hover svg { color: var(--t2); }



.dm-btn.open {
    background: rgba(86, 227, 159, 0.12);
    border-color: rgba(86,227,159,0.25);
}

.dm-btn.open svg { color: #56e39f; }


/* Badge de respuesta de mod */
.dm-badge {
    position: absolute; top: -6px; right: -6px;
    background: #56e39f; color: #000;
    font-size: 10px; font-weight: 800;
    min-width: 18px; height: 18px;
    border-radius: var(--r-full); padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg);
    animation: badgePop 0.25s var(--ease);
    pointer-events: none;
}

.dm-badge.hidden { display: none; }

/* Modal DM */
.dm-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    animation: fadeIn 0.2s ease;
}

.dm-overlay.hidden { display: none; }

.dm-modal {
    background: var(--modal-bg); border: 1px solid var(--border-hi);
    border-radius: var(--r-xl); padding: 32px 28px 28px;
    width: 100%; max-width: 360px;
    animation: modalIn 0.32s var(--ease);
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

.dm-modal-icon {
    width: 48px; height: 48px;
    background: rgba(86,227,159,0.12);
    border: 1px solid rgba(245,158,11,0.25);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: #56e39f; margin: 0 auto 16px;
}

.dm-modal-icon svg { width: 22px; height: 22px; }

.dm-modal h2 {
    font-size: 18px; font-weight: 800; letter-spacing: -0.3px;
    color: var(--t1); margin-bottom: 5px; text-align: center;
}

.dm-modal p {
    font-size: 12px; color: var(--t2); line-height: 1.6;
    margin-bottom: 20px; text-align: center;
}

.dm-textarea {
    width: 100%; background: var(--bg-input);
    border: 1.5px solid var(--border-hi); border-radius: var(--r-md);
    padding: 12px 14px; font-size: 15px; font-weight: 400;
    color: var(--t1); font-family: var(--font); outline: none;
    resize: none; height: 100px; line-height: 1.5;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
    margin-bottom: 10px;
}

.dm-textarea::placeholder { color: var(--t3); }
.dm-textarea:focus { border-color: #56e39f; background: var(--bg-input-focus); }

.dm-char-count {
    font-size: 10px; color: var(--t3); text-align: right;
    margin-bottom: 12px; margin-top: -6px;
}

.dm-error {
    font-size: 12px; font-weight: 500; color: var(--red);
    min-height: 14px; margin-bottom: 10px; text-align: center;
}

.dm-submit {
    width: 100%; padding: 13px; background: #56e39f; color: #000;
    border: none; border-radius: var(--r-md);
    font-size: 14px; font-weight: 700; font-family: var(--font);
    cursor: pointer; min-height: 44px;
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) ease;
}

.dm-submit:hover  { background: #49c187; transform: scale(1.02); }
.dm-submit:active { transform: scale(0.98); }
.dm-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.dm-cancel {
    width: 100%; padding: 10px; background: none; border: none;
    color: var(--t3); font-size: 13px; font-weight: 500; font-family: var(--font);
    cursor: pointer; margin-top: 6px;
    transition: color var(--t-fast) ease;
}

.dm-cancel:hover { color: var(--t2); }

/* Notificación de respuesta de moderador — toast flotante */
.dm-reply-toast {
    position: fixed; bottom: 90px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 300;
    background: var(--modal-bg); border: 1px solid rgba(245,158,11,0.30);
    border-radius: var(--r-lg); padding: 14px 18px;
    width: min(340px, calc(100vw - 32px));
    box-shadow: 0 16px 48px rgba(0,0,0,0.4);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.dm-reply-toast.visible {
    opacity: 1; pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.dm-reply-toast-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}

.dm-reply-toast-icon {
    width: 24px; height: 24px; background: rgba(245,158,11,0.15);
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
    color: #56e39f; flex-shrink: 0;
}

.dm-reply-toast-icon svg { width: 13px; height: 13px; }

.dm-reply-toast-label {
    font-size: 11px; font-weight: 700; color: #56e39f;
    text-transform: uppercase; letter-spacing: 0.6px;
}

.dm-reply-toast-time { font-size: 10px; color: var(--t3); margin-left: auto; }

.dm-reply-toast-text {
    font-size: 13px; color: var(--t1); line-height: 1.5;
    word-break: break-word;
}

.dm-reply-toast-close {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; color: var(--t3); cursor: pointer;
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; transition: color var(--t-fast) ease, background var(--t-fast) ease;
}

.dm-reply-toast-close:hover { color: var(--t1); background: var(--bg-card); }
.dm-reply-toast-close svg { width: 14px; height: 14px; }

/* ── Estado enviado exitoso en el modal ── */
.dm-success {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 8px 0 4px; text-align: center;
}

.dm-success-icon {
    width: 52px; height: 52px; background: rgba(48,209,88,0.12);
    border: 1px solid rgba(48,209,88,0.25); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #30d158;
}

.dm-success-icon svg { width: 24px; height: 24px; }
.dm-success h3 { font-size: 17px; font-weight: 700; color: var(--t1); }
.dm-success p  { font-size: 13px; color: var(--t2); line-height: 1.5; }

/* ============================================================
   SESIÓN PRIVADA — panel de chat con moderador
   Reutiliza la estructura del chat público pero en ámbar
   ============================================================ */

/* Panel privado — misma posición/comportamiento que .chat-panel */
.private-panel {
    position: fixed; left: 50%; top: 50%;
    transform: translateX(-50%) translateY(calc(-50% + 18px)) scale(0.96);
    width: min(420px, calc(100vw - 32px));
    height: min(560px, 84vh); height: min(560px, 84dvh);
    display: flex; flex-direction: column;
    background: var(--chat-panel);
    /* border: 1px solid rgba(245,158,11,0.18); */
        /* border: 1px solid var(--border-hi); */
    border-radius: var(--r-xl); overflow: hidden;
    -webkit-backdrop-filter: blur(48px) saturate(1.6);
    backdrop-filter: blur(48px) saturate(1.6);
    z-index: 50;
    box-shadow:
        0 24px 80px rgba(0,0,0,0.45),
        0 0 0 0.5px rgba(245,158,11,0.06) inset;
    opacity: 0; pointer-events: none;
    transition:
        opacity var(--t-normal) var(--ease),
        transform var(--t-slow) var(--ease);
}

.private-panel.visible {
    opacity: 1; pointer-events: all;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

@media (max-width: 600px) {
    .private-panel {
        top: auto; left: 0; bottom: 0; width: 100%;
        height: 82vh; height: 82dvh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        transform: translateY(100%);
        padding-bottom: var(--safe-b);
        transition:
            opacity var(--t-normal) var(--ease),
            transform var(--t-slow) var(--ease);
    }
    .private-panel.visible { transform: translateY(0); opacity: 1; }
    .private-panel::before {
        content: ''; display: block; flex-shrink: 0;
        width: 32px; height: 3px; background: rgba(245,158,11,0.25);
        border-radius: var(--r-full); margin: 10px auto 0;
    }
}

/* Desktop al lado derecho igual que chat público */
@media (min-width: 860px) {
    .private-panel {
        position: relative;
        top: auto; left: auto; right: auto; bottom: auto;
        width: 0; height: min(640px, 88vh); height: min(640px, 88dvh);
        opacity: 0; overflow: hidden; transform: none;
        border-radius: var(--r-xl); flex-shrink: 0;
        transition: width var(--t-slow) var(--ease), opacity var(--t-normal) var(--ease);
    }
    .private-panel.visible { width: 360px; opacity: 1; pointer-events: all; transform: none; }
    .private-panel::before { display: none; }
}

/* Header del panel privado */
.private-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px; flex-shrink: 0;
}

.private-header-left { display: flex; align-items: center; gap: 10px; }

.private-avatar {
    width: 32px; height: 32px; border-radius: var(--r-sm);
     background: rgba(86,227,159,0.12);
    border: 1px solid rgba(86,227,159,0.22);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.private-avatar svg { width: 14px; height: 14px; color: #56e39f; }

.private-title      { font-size: 14px; font-weight: 700; color: var(--t1); letter-spacing: -0.2px; }
.private-subtitle   { font-size: 11px; color: var(--t3); margin-top: 1px; }

.private-header-right { display: flex; align-items: center; gap: 6px; }

/* Indicador "Moderador en línea" */
.mod-online-pill {
    display: flex; align-items: center; gap: 5px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--r-full); padding: 4px 10px 4px 7px;
    font-size: 11px; font-weight: 600; color: var(--t1);
}

.mod-online-dot {
    width: 6px; height: 6px; background: #56e39f;
    border-radius: 50%; box-shadow: 0 0 6px #56e39f;
    animation: modPulse 2s ease-in-out infinite;
}

@keyframes modPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

.btn-close-session {
    background: none; border: none; cursor: pointer; color: var(--t3);
    width: 36px; height: 36px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    transition: color var(--t-fast) ease, background var(--t-fast) ease;
    font-family: var(--font);
}

.btn-close-session:hover { color: var(--t1); background: var(--bg-card); }
.btn-close-session svg   { width: 15px; height: 15px; }

.btn-close-chat {
    background: none; border: none; cursor: pointer; color: var(--t3);
    width: 36px; height: 36px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    transition: color var(--t-fast) ease, background var(--t-fast) ease;
}
.btn-close-chat:hover { color: var(--t1); background: var(--bg-card); }
.btn-close-chat svg   { width: 15px; height: 15px; }

/* Reason banner — motivo al tope del chat */
.session-reason-banner {
    margin: 0 12px 2px;
    padding: 8px 12px;
     /* background: rgba(86,227,159,0.12);
    border: 1px solid rgba(86,227,159,0.22); */
    border-radius: var(--r-md);
    flex-shrink: 0;
}

.session-reason-label { font-size: 9px; font-weight: 700; color: #56e39f; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.session-reason-text  { font-size: 12px; color: var(--t2); line-height: 1.4; }

/* Mensajes — reutiliza .chat-messages pero con tinte ámbar en mensajes de mod */
.private-messages {
    flex: 1; overflow-y: auto;
    padding: 8px 14px 10px;
    display: flex; flex-direction: column; gap: 4px;
    scroll-behavior: smooth; overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 7%);
    scrollbar-width: none;
}

.private-messages::-webkit-scrollbar { display: none; }

/* Ícono escudo "mod" junto al nombre */
.mod-badge {
    display: inline-flex; align-items: center;
    color: #56e39f; margin-left: 4px; vertical-align: middle;
}
.mod-badge svg { width: 10px; height: 10px; }

/* Mensaje de moderador en chat privado */
.msg.mod .msg-row {
    background: rgba(245,158,11,0.13);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 18px;
}
.msg.mod .msg-name { color: #56e39f; }

/* Typing indicator */
.typing-indicator {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; align-self: flex-start;
    animation: msgUp 0.2s var(--ease) both;
}

.typing-dots { display: flex; gap: 3px; }

.typing-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #56e39f; opacity: 0.4;
    animation: typingDot 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%,60%,100% { opacity: 0.2; transform: scale(0.8); }
    30%          { opacity: 1;   transform: scale(1.2); }
}

.typing-label { font-size: 11px; color: var(--t3); font-style: italic; }

/* Timer de sesión */
.session-timer {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 5px; flex-shrink: 0;
    border-top: 1px solid var(--border);
    font-size: 10px; font-weight: 600;
    color: var(--t3); letter-spacing: 0.4px;
}

.session-timer-dot { width: 4px; height: 4px; border-radius: 50%; background: #56e39f; }
.session-timer.warning { color: var(--red); }
.session-timer.warning .session-timer-dot { background: var(--red); animation: connPulse 1s infinite; }

/* Input privado — igual al del chat pero tinte ámbar en focus */
.private-input-wrap {
    padding: 10px 14px 12px;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

.private-input {
    flex: 1; background: var(--bg-input); border: none; outline: none;
    border-radius: var(--r-full); padding: 10px 16px;
    font-size: 16px; color: var(--t1); font-family: var(--font);
    transition: background var(--t-fast) ease;
    resize: none; line-height: 1.4; max-height: 80px; overflow-y: auto;
}

.private-input::placeholder { color: var(--t3); }
.private-input:focus { background: var(--bg-input-focus); }

.private-send {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: #56e39f; color: #000; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) ease;
}

.private-send:hover    { transform: scale(1.08); }
.private-send:active   { transform: scale(0.92); }
.private-send:disabled { opacity: 0.22; cursor: not-allowed; transform: none; }
.private-send svg { width: 15px; height: 15px; }

/* Modal de motivo */
.reason-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    animation: fadeIn 0.2s ease;
}

.reason-overlay.hidden { display: none; }

.reason-modal {
    background: var(--modal-bg); border: 1px solid var(--border-hi);
    border-radius: var(--r-xl); padding: 32px 28px 28px;
    width: 100%; max-width: 360px; text-align: center;
    animation: modalIn 0.32s var(--ease);
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

.reason-icon {
    width: 52px; height: 52px;
    background: rgba(86,227,159,0.12);
    border: 1px solid rgba(86,227,159,0.22);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    color: #56e39f; margin: 0 auto 18px;
}

.reason-icon svg { width: 24px; height: 24px; }
.reason-modal h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; color: var(--t1); margin-bottom: 6px; }
.reason-modal p  { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 20px; }

.reason-input {
    width: 100%; background: var(--bg-input); border: 1.5px solid var(--border-hi);
    border-radius: var(--r-md); padding: 13px 16px;
    font-size: 16px; color: var(--t1); font-family: var(--font); outline: none;
    margin-bottom: 10px; resize: none; height: 90px; line-height: 1.5;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.reason-input::placeholder { color: var(--t3); }
.reason-input:focus { border-color: #56e39f; background: var(--bg-input-focus); }

.reason-error  { font-size: 12px; color: var(--red); min-height: 14px; margin-bottom: 10px; }

.reason-submit {
    width: 100%; padding: 14px; background: #56e39f; color: #000;
    border: none; border-radius: var(--r-md);
    font-size: 15px; font-weight: 700; font-family: var(--font);
    cursor: pointer; min-height: 44px;
    transition: transform var(--t-fast) var(--ease), background var(--t-fast) ease;
}

.reason-submit:hover  { background: #49c187; transform: scale(1.02); }
.reason-submit:active { transform: scale(0.98); }

.reason-cancel {
    width: 100%; padding: 10px; background: none; border: none;
    color: var(--t3); font-size: 13px; font-weight: 500; font-family: var(--font);
    cursor: pointer; margin-top: 6px; transition: color var(--t-fast) ease;
}

.reason-cancel:hover { color: var(--t2); }