:root {
    --background: #ffffff;
    --background-soft: #f8f8fa;
    --surface: #f2f2f4;
    --surface-hover: #e9e9ec;
    --surface-strong: #e4e4e8;

    --text: #19191d;
    --text-soft: #44444a;
    --muted: #77777f;

    --border: #dedee4;
    --border-strong: #cfcfd7;

    --purple: #6f55d9;
    --purple-dark: #5c43c8;
    --purple-soft: #eeeafe;

    --danger: #c73b3b;
    --danger-soft: #fff1f1;

    --success: #237a4b;
    --success-soft: #edf9f2;

    --warning: #8b6417;
    --warning-soft: #fff8e7;
    --warning-border: #ead7a2;

    --user-bubble: #f0f0f3;
    --assistant-bubble: transparent;

    --shadow-soft:
        0 8px 30px rgba(20, 20, 30, 0.06);

    --shadow-medium:
        0 14px 40px rgba(20, 20, 30, 0.12);

    --shadow-auth:
        0 26px 80px rgba(20, 20, 30, 0.11);

    --sidebar-width: 310px;

    --transition-fast: 160ms ease;
    --transition-normal: 240ms ease;

    --mobile-composer-space: 205px;
}


html[data-theme="dark"] {
    --background: #18181b;
    --background-soft: #1d1d21;
    --surface: #252529;
    --surface-hover: #2d2d32;
    --surface-strong: #34343a;

    --text: #f2f2f4;
    --text-soft: #d7d7dc;
    --muted: #a0a0a8;

    --border: #34343a;
    --border-strong: #48484f;

    --purple: #9178ff;
    --purple-dark: #8065f5;
    --purple-soft: #29243a;

    --danger: #ff8d8d;
    --danger-soft: #362326;

    --success: #69d69b;
    --success-soft: #1e3227;

    --warning: #e6c36a;
    --warning-soft: #332d1d;
    --warning-border: #5a4d27;

    --user-bubble: #28282d;
    --assistant-bubble: transparent;

    --shadow-soft:
        0 8px 30px rgba(0, 0, 0, 0.18);

    --shadow-medium:
        0 14px 40px rgba(0, 0, 0, 0.30);

    --shadow-auth:
        0 28px 85px rgba(0, 0, 0, 0.38);
}


/* ==========================================================
   BASE
========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;
}

html {
    background: var(--background);
}

body {
    min-height: 100vh;
    min-height: 100dvh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--background);
    color: var(--text);

    transition:
        background var(--transition-normal),
        color var(--transition-normal);

    overflow: hidden;
}

button,
textarea,
input {
    font: inherit;
}

button {
    color: inherit;
}

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

button:focus-visible,
textarea:focus-visible,
input:focus-visible,
a:focus-visible {
    outline:
        2px
        solid
        var(--purple);

    outline-offset: 2px;
}

img {
    user-select: none;
    -webkit-user-drag: none;
}

.hidden {
    display: none !important;
}


/*
   Mientras FIA comprueba si ya existe una sesión válida,
   no se muestra ni el login ni la aplicación. El fondo sí
   respeta el tema guardado para evitar cualquier destello.
*/
body.auth-resolving .auth-screen,
body.auth-resolving .app-shell {
    visibility: hidden !important;
    opacity: 0 !important;
}


/* ==========================================================
   APP
========================================================== */

.app-shell {
    width: 100%;

    min-height: 100vh;
    height: 100vh;

    min-height: 100dvh;
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background: var(--background);

    transition:
        background var(--transition-normal),
        opacity var(--transition-normal);
}

.app-shell.auth-locked {
    pointer-events: none;
    user-select: none;
}


/* ==========================================================
   PANTALLA DE ACCESO
========================================================== */

.auth-screen {
    position: fixed;

    inset: 0;

    z-index: 200;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow-y: auto;

    padding:
        max(
            24px,
            env(safe-area-inset-top)
        )
        18px
        max(
            24px,
            env(safe-area-inset-bottom)
        );

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(111, 85, 217, 0.09),
            transparent 34%
        ),
        var(--background);
}

html[data-theme="dark"] .auth-screen {
    background:
        radial-gradient(
            circle at 50% 8%,
            rgba(145, 120, 255, 0.12),
            transparent 34%
        ),
        var(--background);
}

.auth-card {
    width: min(460px, 100%);

    padding:
        34px
        34px
        28px;

    border:
        1px
        solid
        var(--border);

    border-radius: 28px;

    background: var(--background);

    box-shadow: var(--shadow-auth);

    animation:
        authAppear
        260ms
        ease-out;
}

@keyframes authAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-brand {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 30px;
}

.auth-logo {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    object-fit: contain;
}

.auth-brand-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.auth-brand-line {
    display: flex;
    align-items: center;

    gap: 8px;
}

.auth-brand-line strong {
    font-size: 22px;
    line-height: 1;

    letter-spacing: -0.025em;
}

.auth-brand-copy > span {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.35;
}

.beta-badge {
    min-height: 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        9px;

    border-radius: 999px;

    background: var(--purple-soft);
    color: var(--purple);

    font-size: 11px;
    font-weight: 750;

    letter-spacing: 0.025em;

    text-transform: uppercase;
}

.auth-heading {
    margin-bottom: 22px;
}

.auth-heading h1 {
    margin:
        0
        0
        7px;

    font-size:
        clamp(
            26px,
            6vw,
            32px
        );

    line-height: 1.15;

    letter-spacing: -0.035em;
}

.auth-heading p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.5;
}

.auth-tabs {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 4px;

    margin-bottom: 22px;

    padding: 4px;

    border-radius: 14px;

    background: var(--surface);
}

.auth-tab {
    min-height: 42px;

    border: 0;
    border-radius: 11px;

    padding:
        0
        12px;

    background: transparent;
    color: var(--muted);

    font-size: 13px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.auth-tab:hover {
    color: var(--text);
}

.auth-tab.active {
    background: var(--background);
    color: var(--text);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.auth-form {
    display: flex;
    flex-direction: column;

    gap: 15px;
}

.auth-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.auth-field > span {
    color: var(--text-soft);

    font-size: 13px;
    font-weight: 650;
}

.auth-field input {
    width: 100%;
    min-height: 48px;

    border:
        1px
        solid
        var(--border);

    border-radius: 13px;

    outline: none;

    padding:
        0
        14px;

    background: var(--background);
    color: var(--text);

    font-size: 16px;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-normal);
}

.auth-field input::placeholder {
    color: var(--muted);
    opacity: 0.8;
}

.auth-field input:focus {
    border-color: var(--purple);

    box-shadow:
        0 0 0 3px
        rgba(111, 85, 217, 0.10);
}

.auth-primary-button {
    width: 100%;

    min-height: 50px;

    margin-top: 5px;

    border: 0;
    border-radius: 14px;

    padding:
        0
        18px;

    background: var(--purple);
    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.auth-primary-button:hover {
    background: var(--purple-dark);
}

.auth-primary-button:active {
    transform: scale(0.985);
}

.auth-primary-button:disabled {
    cursor: wait;

    opacity: 0.65;

    transform: none;
}

.auth-message {
    margin-top: 15px;

    padding:
        11px
        13px;

    border-radius: 11px;

    font-size: 13px;
    line-height: 1.45;
}

.auth-message.error {
    background: var(--danger-soft);
    color: var(--danger);
}

.auth-message.success {
    background: var(--success-soft);
    color: var(--success);
}

.auth-legal {
    margin:
        22px
        0
        0;

    padding-top: 18px;

    border-top:
        1px
        solid
        var(--border);

    color: var(--muted);

    font-size: 11px;
    line-height: 1.5;

    text-align: center;
}


/* ==========================================================
   LOGOS EN MODO OSCURO
========================================================== */

/*
   El PNG no cambia entre modo claro y oscuro.
   No se aplican halos, sombras ni filtros al propio logo.
*/
html[data-theme="dark"] .auth-logo,
html[data-theme="dark"] .sidebar-logo,
html[data-theme="dark"] .hero-logo,
html[data-theme="dark"] .message-logo,
html[data-theme="dark"] .assistant-avatar,
html[data-theme="dark"] .thinking-logo {
    background: transparent;
    padding: 0;
    border-radius: 0;
    filter: none;
}

/*
   El contraste del logo principal se consigue solo
   modificando suavemente el fondo que lo rodea.
*/
html[data-theme="dark"] .hero-logo-wrapper {
    position: relative;
    isolation: isolate;
}

html[data-theme="dark"] .hero-logo-wrapper::before {
    content: "";
    position: absolute;
    inset: 8%;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.025) 44%,
            transparent 72%
        );
    pointer-events: none;
}


/* ==========================================================
   CABECERA
========================================================== */

.topbar {
    height: 72px;
    flex: 0 0 72px;

    display: flex;
    align-items: center;

    padding:
        0
        24px;

    position: relative;

    z-index: 20;
}

.topbar-spacer {
    flex: 1;
}

.icon-button {
    width: 44px;
    height: 44px;

    border:
        1px
        solid
        var(--border);

    border-radius: 50%;

    background: var(--background);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 18px;
    line-height: 1;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.icon-button:hover {
    background: var(--surface);

    border-color: var(--border-strong);
}

.icon-button:active {
    transform: scale(0.96);
}

.menu-icon {
    font-size: 19px;

    transform: translateY(-1px);
}

.theme-icon {
    font-size: 21px;
}


/* ==========================================================
   CONTENIDO PRINCIPAL
========================================================== */

.main-content {
    flex: 1;

    min-height: 0;

    position: relative;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior-y: contain;

    scroll-behavior: smooth;

    padding:
        0
        24px
        225px;

    scroll-padding-bottom: 225px;
}

.main-content::-webkit-scrollbar {
    width: 10px;
}

.main-content::-webkit-scrollbar-thumb {
    background: var(--surface-strong);

    border-radius: 999px;

    border:
        3px
        solid
        var(--background);
}

.main-content::-webkit-scrollbar-track {
    background: transparent;
}


/* ==========================================================
   AVISO DE VERIFICACIÓN DE CORREO
========================================================== */

.verification-banner {
    width: min(900px, 100%);

    margin:
        4px
        auto
        18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding:
        13px
        15px;

    border:
        1px
        solid
        var(--warning-border);

    border-radius: 14px;

    background: var(--warning-soft);

    color: var(--text);

    box-shadow: var(--shadow-soft);

    animation:
        verificationAppear
        180ms
        ease-out;
}

@keyframes verificationAppear {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.verification-banner-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.verification-banner-copy strong {
    color: var(--text);

    font-size: 13px;
    line-height: 1.35;
}

.verification-banner-copy span {
    color: var(--text-soft);

    font-size: 12px;
    line-height: 1.45;

    overflow-wrap: anywhere;
}

.verification-resend-button {
    flex: 0 0 auto;

    min-height: 36px;

    border:
        1px
        solid
        var(--warning-border);

    border-radius: 10px;

    padding:
        0
        12px;

    background: var(--background);

    color: var(--text);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        opacity var(--transition-fast);
}

.verification-resend-button:hover {
    background: var(--surface);
}

.verification-resend-button:active {
    transform: scale(0.98);
}

.verification-resend-button:disabled {
    cursor: default;

    opacity: 0.65;

    transform: none;
}

.verification-banner.success {
    border-color: rgba(35, 122, 75, 0.28);

    background: var(--success-soft);
}

.verification-banner.success
.verification-banner-copy strong,
.verification-banner.success
.verification-banner-copy span {
    color: var(--success);
}

.verification-banner.error {
    border-color: rgba(199, 59, 59, 0.28);

    background: var(--danger-soft);
}

.verification-banner.error
.verification-banner-copy strong,
.verification-banner.error
.verification-banner-copy span {
    color: var(--danger);
}


/* ==========================================================
   BIENVENIDA
========================================================== */

.welcome {
    width: min(820px, 100%);

    margin:
        7vh
        auto
        0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.hero-logo-wrapper {
    width: 230px;
    height: 230px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 4px;
}

.hero-logo {
    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;

    filter:
        drop-shadow(
            0
            14px
            26px
            rgba(111, 85, 217, 0.12)
        );
}

.welcome-subtitle {
    margin-top: 2px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0.01em;
}

.welcome h1 {
    margin:
        16px
        0
        8px;

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    line-height: 1.12;

    letter-spacing: -0.035em;

    font-weight: 650;
}

.welcome-description {
    max-width: 720px;

    margin: 0;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.55;
}


/* ==========================================================
   CHAT
========================================================== */

.chat {
    width: min(900px, 100%);

    margin:
        22px
        auto
        0;

    display: flex;
    flex-direction: column;

    gap: 30px;
}

.chat:empty {
    margin-top: 0;
}


/* ==========================================================
   MENSAJES
========================================================== */

.message {
    width: 100%;

    display: flex;

    animation:
        messageAppear
        180ms
        ease-out;
}

@keyframes messageAppear {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    justify-content: flex-end;
}

.message.assistant {
    justify-content: flex-start;

    align-items: flex-start;

    gap: 15px;
}

.message-logo {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    margin-top: 3px;

    object-fit: contain;

    pointer-events: none;
}

.message-bubble {
    min-width: 0;

    color: var(--text);

    font-size: 16px;
    line-height: 1.68;

    overflow-wrap: anywhere;
}

.message.user .message-bubble {
    max-width: min(660px, 86%);

    padding:
        14px
        18px;

    border-radius:
        20px
        20px
        5px
        20px;

    background: var(--user-bubble);

    line-height: 1.55;

    white-space: pre-wrap;
}

.message.assistant .message-bubble {
    flex: 1;

    width: calc(100% - 45px);

    background: transparent;
}


/* ==========================================================
   COMPATIBILIDAD MENSAJES ANTERIORES
========================================================== */

.message-user {
    justify-content: flex-end;
}

.message-assistant {
    justify-content: flex-start;
}

.user-message-inner {
    max-width: min(660px, 86%);

    padding:
        14px
        18px;

    border-radius:
        20px
        20px
        5px
        20px;

    background: var(--user-bubble);

    color: var(--text);

    line-height: 1.55;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}

.assistant-message-inner {
    width: 100%;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr);

    gap: 16px;

    align-items: flex-start;
}

.assistant-avatar {
    width: 30px;
    height: 30px;

    margin-top: 2px;

    object-fit: contain;

    pointer-events: none;
}

.assistant-content {
    min-width: 0;

    color: var(--text);

    font-size: 16px;
    line-height: 1.68;

    overflow-wrap: anywhere;
}


/* ==========================================================
   MARKDOWN
========================================================== */

.message.assistant .message-bubble > :first-child,
.assistant-content > :first-child {
    margin-top: 0;
}

.message.assistant .message-bubble > :last-child,
.assistant-content > :last-child {
    margin-bottom: 0;
}

.message.assistant .message-bubble h1,
.message.assistant .message-bubble h2,
.message.assistant .message-bubble h3,
.message.assistant .message-bubble h4,
.assistant-content h1,
.assistant-content h2,
.assistant-content h3,
.assistant-content h4 {
    color: var(--text);

    letter-spacing: -0.02em;

    line-height: 1.25;
}

.message.assistant .message-bubble h1,
.assistant-content h1 {
    margin:
        0
        0
        16px;

    font-size: 24px;
}

.message.assistant .message-bubble h2,
.assistant-content h2 {
    margin:
        26px
        0
        12px;

    font-size: 20px;
}

.message.assistant .message-bubble h3,
.assistant-content h3 {
    margin:
        22px
        0
        10px;

    font-size: 17px;
}

.message.assistant .message-bubble h4,
.assistant-content h4 {
    margin:
        18px
        0
        8px;

    font-size: 16px;
}

.message.assistant .message-bubble p,
.assistant-content p {
    margin:
        0
        0
        14px;
}

.message.assistant .message-bubble strong,
.assistant-content strong {
    font-weight: 700;
}

.message.assistant .message-bubble ul,
.message.assistant .message-bubble ol,
.assistant-content ul,
.assistant-content ol {
    margin:
        8px
        0
        16px;

    padding-left: 24px;
}

.message.assistant .message-bubble li,
.assistant-content li {
    margin:
        5px
        0;
}

.message.assistant .message-bubble a,
.assistant-content a {
    color: var(--purple);

    text-decoration: underline;

    text-underline-offset: 2px;

    word-break: break-word;
}

.message.assistant .message-bubble code,
.assistant-content code {
    padding:
        2px
        5px;

    border-radius: 6px;

    background: var(--surface);

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 0.92em;
}

.message.assistant .message-bubble pre,
.assistant-content pre {
    overflow-x: auto;

    padding: 14px;

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    background: var(--surface);
}

.message.assistant .message-bubble pre code,
.assistant-content pre code {
    padding: 0;

    background: transparent;
}

.message.assistant .message-bubble blockquote,
.assistant-content blockquote {
    margin:
        16px
        0;

    padding-left: 15px;

    border-left:
        3px
        solid
        var(--purple);

    color: var(--text-soft);
}


/* ==========================================================
   TABLAS
========================================================== */

.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin:
        16px
        0
        20px;
    -webkit-overflow-scrolling: touch;
}

.message.assistant table,
.assistant-content table {
    width: max-content;
    min-width: 100%;
    max-width: none;

    table-layout: auto;

    border-collapse: separate;
    border-spacing: 0;

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    overflow: hidden;

    font-size: 14px;
}

.message.assistant th,
.message.assistant td,
.assistant-content th,
.assistant-content td {
    padding:
        10px
        12px;

    border-bottom:
        1px
        solid
        var(--border);

    border-right:
        1px
        solid
        var(--border);

    text-align: left;
    vertical-align: top;

    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.message.assistant th,
.assistant-content th {
    background: var(--purple-soft);
    font-weight: 700;
}

.message.assistant tr:last-child td,
.assistant-content tr:last-child td {
    border-bottom: 0;
}

.message.assistant th:last-child,
.message.assistant td:last-child,
.assistant-content th:last-child,
.assistant-content td:last-child {
    border-right: 0;
}

/* ==========================================================
   ARCHIVOS GENERADOS
========================================================== */

.generated-file,
.file-card {
    margin-top: 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    width: fit-content;
    max-width: 100%;

    padding:
        12px
        14px;

    border:
        1px
        solid
        var(--border);

    border-radius: 14px;

    background: var(--background-soft);

    color: var(--text);

    box-shadow: var(--shadow-soft);

    text-decoration: none;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.generated-file:hover,
.file-card:hover {
    background: var(--surface);

    border-color: var(--border-strong);
}

.generated-file:active {
    transform: scale(0.99);
}

.generated-file-icon,
.file-card-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 11px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--purple-soft);

    color: var(--purple);

    font-size: 12px;
    font-weight: 800;
}

.generated-file-copy,
.file-card-main {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.generated-file-copy strong,
.file-card-name {
    overflow: hidden;

    color: var(--text);

    font-size: 13.5px;
    font-weight: 700;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.generated-file-copy span,
.file-card-type {
    margin-top: 2px;

    color: var(--muted);

    font-size: 11.5px;
}

.file-download {
    margin-left: 8px;

    min-width: 86px;
    height: 36px;

    border: 0;
    border-radius: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        14px;

    background: var(--purple);
    color: #ffffff;

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;
}


/* ==========================================================
   FIA PENSANDO
========================================================== */

.thinking-indicator {
    width: min(900px, 100%);

    margin:
        28px
        auto
        0;

    display: grid;

    grid-template-columns:
        34px
        minmax(0, 1fr);

    gap: 15px;

    align-items: center;
}

.thinking-logo {
    width: 30px;
    height: 30px;

    object-fit: contain;

    pointer-events: none;

    animation:
        fiaThinkingPulse
        0.95s
        ease-in-out
        infinite;
}

@keyframes fiaThinkingPulse {
    0% {
        opacity: 0.22;

        transform:
            scale(0.91);
    }

    45% {
        opacity: 1;

        transform:
            scale(1.07);
    }

    100% {
        opacity: 0.22;

        transform:
            scale(0.91);
    }
}

.thinking-dots {
    height: 30px;

    display: flex;
    align-items: center;

    color: var(--muted);

    font-size: 24px;
    line-height: 1;

    letter-spacing: 2px;
}

.thinking-dots span {
    opacity: 0.22;

    animation:
        thinkingDot
        1.05s
        infinite;
}

.thinking-dots span:nth-child(2) {
    animation-delay: 150ms;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 300ms;
}

@keyframes thinkingDot {
    0%,
    65%,
    100% {
        opacity: 0.2;

        transform:
            translateY(0);
    }

    32% {
        opacity: 1;

        transform:
            translateY(-2px);
    }
}


/* ==========================================================
   COMPOSITOR
========================================================== */

.composer-area {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 25;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        22px
        24px
        max(
            10px,
            env(safe-area-inset-bottom)
        );

    background:
        linear-gradient(
            to top,
            var(--background) 75%,
            rgba(255, 255, 255, 0)
        );

    pointer-events: none;
}

html[data-theme="dark"] .composer-area {
    background:
        linear-gradient(
            to top,
            var(--background) 75%,
            rgba(24, 24, 27, 0)
        );
}

.composer,
.voice-status,
.disclaimer {
    pointer-events: auto;
}

.composer {
    width: min(880px, 100%);

    min-height: 64px;

    display: flex;
    align-items: flex-end;

    gap: 12px;

    padding:
        10px
        10px
        10px
        18px;

    border:
        1px
        solid
        var(--border);

    border-radius: 30px;

    background: var(--background);

    box-shadow: var(--shadow-medium);

    transition:
        border-color var(--transition-fast),
        background var(--transition-normal),
        box-shadow var(--transition-fast);
}

.composer:focus-within {
    border-color: var(--border-strong);
}

#messageInput {
    flex: 1;

    min-width: 0;

    min-height: 42px;
    max-height: 180px;

    resize: none;

    border: 0;
    outline: 0;

    padding:
        10px
        0
        8px;

    background: transparent;

    color: var(--text);

    font-size: 16px;
    line-height: 1.45;

    overflow-y: auto;
}

#messageInput::placeholder {
    color: var(--muted);
}

#messageInput::-webkit-scrollbar {
    width: 7px;
}

#messageInput::-webkit-scrollbar-thumb {
    background: var(--surface-strong);

    border-radius: 999px;
}

.composer-actions {
    display: flex;
    align-items: center;

    gap: 7px;

    padding-bottom: 1px;
}

.composer-button,
.send-button {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border-radius: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.composer-button {
    border: 0;

    background: transparent;

    color: var(--text);
}

.composer-button:hover {
    background: var(--surface);
}

.composer-button svg {
    width: 21px;
    height: 21px;

    fill: currentColor;
}

.composer-button:disabled {
    cursor: not-allowed;

    opacity: 0.35;
}

.composer-button.active {
    color: var(--purple);

    background: var(--purple-soft);
}

.voice-button {
    background: var(--purple-soft);

    color: var(--purple);
}

.voice-button:hover {
    background: var(--surface-strong);
}

.voice-button.active {
    background: var(--purple);

    color: #ffffff;
}

.voice-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: currentColor;
}

.send-button {
    border: 0;

    background: var(--text);

    color: var(--background);
}

.send-button:hover {
    opacity: 0.88;
}

.send-button svg {
    width: 21px;
    height: 21px;

    fill: currentColor;
}

.send-button:active,
.composer-button:active {
    transform: scale(0.95);
}

.send-button:disabled {
    cursor: not-allowed;

    opacity: 0.35;

    transform: none;
}

.composer.processing {
    box-shadow:
        var(--shadow-medium),
        0 0 0 1px
        rgba(111, 85, 217, 0.08);
}


/* ==========================================================
   VOZ
========================================================== */

.voice-status {
    width: min(880px, 100%);

    margin-top: 8px;
}

.voice-status-inner {
    display: flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin:
        0
        auto;

    padding:
        7px
        11px;

    border:
        1px
        solid
        var(--border);

    border-radius: 999px;

    background: var(--background-soft);

    color: var(--muted);

    font-size: 12px;
}

.voice-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--purple);

    animation:
        voicePulse
        1.2s
        ease-in-out
        infinite;
}

@keyframes voicePulse {
    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

.stop-voice-button {
    margin-left: 4px;

    border: 0;

    padding:
        3px
        7px;

    border-radius: 7px;

    background: transparent;

    color: var(--text);

    font-size: 12px;

    cursor: pointer;
}

.stop-voice-button:hover {
    background: var(--surface);
}


/* ==========================================================
   AVISO
========================================================== */

.disclaimer {
    margin-top: 8px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.3;

    text-align: center;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    z-index: 60;

    width: min(
        var(--sidebar-width),
        calc(100vw - 36px)
    );

    display: flex;
    flex-direction: column;

    background: var(--background-soft);

    border-right:
        1px
        solid
        var(--border);

    box-shadow: var(--shadow-medium);

    transform:
        translateX(-102%);

    transition:
        transform var(--transition-normal),
        background var(--transition-normal);

    overflow: hidden;
}

.sidebar.open {
    transform:
        translateX(0);
}

.sidebar-top {
    min-height: 122px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        18px
        56px
        14px;
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    min-width: 0;

    font-size: 18px;
    font-weight: 750;

    text-align: center;
}

.sidebar-logo {
    width: 56px;
    height: 56px;

    object-fit: contain;

    pointer-events: none;
}

.sidebar-close {
    position: absolute;

    top: 16px;
    right: 14px;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    background: transparent;
}

.new-chat-button {
    margin:
        0
        14px
        18px;

    min-height: 46px;

    border:
        1px
        solid
        var(--border);

    border-radius: 13px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding:
        0
        14px;

    background: var(--background);

    color: var(--text);

    font-weight: 600;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.new-chat-button:hover {
    background: var(--surface);

    border-color: var(--border-strong);
}

.new-chat-plus {
    font-size: 21px;

    font-weight: 400;
}

.sidebar-section-title {
    padding:
        0
        18px
        8px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.07em;
}

.conversation-list {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        0
        9px
        12px;
}

.conversation-list::-webkit-scrollbar {
    width: 7px;
}

.conversation-list::-webkit-scrollbar-thumb {
    background: var(--surface-strong);

    border-radius: 999px;
}

.conversation-item {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 54px;

    margin-bottom: 3px;

    border-radius: 10px;

    transition:
        background var(--transition-fast);
}

.conversation-item:hover,
.conversation-item.active {
    background: var(--surface);
}

.conversation-select {
    flex: 1;

    min-width: 0;

    border: 0;

    background: transparent;

    color: var(--text);

    cursor: pointer;

    text-align: left;

    padding:
        9px
        40px
        9px
        11px;
}

.conversation-title {
    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 13.5px;
    font-weight: 550;
}

.conversation-meta {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 10.5px;
}

.conversation-delete,
.delete-conversation {
    position: absolute;

    right: 6px;

    width: 30px;
    height: 30px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    opacity: 0;

    transition:
        opacity var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast);
}

.conversation-item:hover .conversation-delete,
.conversation-item.active .conversation-delete,
.conversation-item:hover .delete-conversation,
.conversation-item.active .delete-conversation {
    opacity: 1;
}

.conversation-delete:hover,
.delete-conversation:hover {
    background: var(--surface-strong);

    color: var(--text);
}


/* ==========================================================
   CUENTA EN SIDEBAR
========================================================== */

.sidebar-account {
    margin:
        0
        10px
        10px;

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 9px;

    padding:
        10px;

    border:
        1px
        solid
        var(--border);

    border-radius: 13px;

    background: var(--background);
}

.sidebar-account-avatar {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--purple-soft);

    color: var(--purple);

    font-size: 14px;
    font-weight: 800;
}

.sidebar-account-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}

.sidebar-account-copy strong,
.sidebar-account-copy span {
    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.sidebar-account-copy strong {
    font-size: 12.5px;
}

.sidebar-account-copy span {
    color: var(--muted);

    font-size: 10.5px;
}

.sidebar-logout-button {
    min-height: 32px;

    border: 0;
    border-radius: 8px;

    padding:
        0
        8px;

    background: transparent;

    color: var(--muted);

    font-size: 11px;
    font-weight: 650;

    cursor: pointer;
}

.sidebar-logout-button:hover {
    background: var(--surface);

    color: var(--text);
}

.sidebar-bottom {
    padding:
        12px
        16px
        max(
            16px,
            env(safe-area-inset-bottom)
        );

    border-top:
        1px
        solid
        var(--border);

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.sidebar-overlay {
    position: fixed;

    inset: 0;

    z-index: 55;

    background:
        rgba(
            0,
            0,
            0,
            0.28
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity var(--transition-normal);
}

.sidebar-overlay.visible {
    opacity: 1;

    pointer-events: auto;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 760px) {

    :root {
        --mobile-composer-space: 205px;
    }

    .topbar {
        height: 62px;
        flex-basis: 62px;

        padding:
            0
            14px;
    }

    .icon-button {
        width: 40px;
        height: 40px;
    }

    .main-content {
        padding:
            0
            14px
            calc(
                var(--mobile-composer-space)
                + env(safe-area-inset-bottom)
            );

        scroll-padding-bottom:
            calc(
                var(--mobile-composer-space)
                + env(safe-area-inset-bottom)
            );
    }

    .verification-banner {
        margin:
            0
            auto
            14px;

        align-items: flex-start;

        gap: 12px;

        padding:
            12px
            13px;
    }

    .verification-resend-button {
        min-height: 34px;

        padding:
            0
            10px;

        white-space: nowrap;
    }

    .welcome {
        margin-top: 4vh;
    }

    .hero-logo-wrapper {
        width: 185px;
        height: 185px;
    }

    .welcome h1 {
        margin-top: 12px;
    }

    .chat {
        gap: 24px;
    }

    .message.assistant {
        gap: 11px;
    }

    .message-logo {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }

    .message-bubble {
        font-size: 15px;
    }

    .message.user .message-bubble {
        max-width: 92%;

        padding:
            12px
            15px;
    }

    .assistant-message-inner {
        grid-template-columns:
            29px
            minmax(0, 1fr);

        gap: 11px;
    }

    .assistant-avatar {
        width: 27px;
        height: 27px;
    }

    .assistant-content {
        font-size: 15px;
    }

    .user-message-inner {
        max-width: 92%;

        padding:
            12px
            15px;
    }

    .composer-area {
        padding:
            16px
            10px
            max(
                8px,
                env(safe-area-inset-bottom)
            );
    }

    .composer {
        min-height: 58px;

        padding:
            7px
            7px
            7px
            15px;

        border-radius: 26px;
    }

    #messageInput {
        min-height: 40px;

        font-size: 16px;
    }

    .composer-button,
    .send-button {
        width: 41px;
        height: 41px;

        flex-basis: 41px;
    }

    .disclaimer {
        max-width: 96%;

        font-size: 10px;
    }

    .thinking-indicator {
        grid-template-columns:
            29px
            minmax(0, 1fr);

        gap: 11px;
    }

    .thinking-logo {
        width: 27px;
        height: 27px;
    }

    .generated-file,
    .file-card {
        width: 100%;

        align-items: flex-start;
    }

    .file-download {
        min-width: auto;

        padding:
            0
            10px;
    }

    .auth-card {
        padding:
            28px
            22px
            23px;

        border-radius: 23px;
    }

    .auth-brand {
        margin-bottom: 25px;
    }

}


@media (max-width: 520px) {

    .verification-banner {
        flex-direction: column;

        align-items: stretch;
    }

    .verification-resend-button {
        width: 100%;

        min-height: 39px;
    }

}


@media (max-width: 460px) {

    .hero-logo-wrapper {
        width: 160px;
        height: 160px;
    }

    .welcome-description {
        max-width: 330px;
    }

    .composer-actions {
        gap: 3px;
    }

    .auth-screen {
        align-items: flex-start;

        padding-top:
            max(
                18px,
                env(safe-area-inset-top)
            );
    }

    .auth-card {
        margin: auto 0;
    }

    .auth-logo {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }

    .auth-brand-line strong {
        font-size: 20px;
    }

    .auth-brand-copy > span {
        font-size: 12px;
    }

}


@media (max-width: 360px) {

    .composer {
        gap: 5px;

        padding-left: 12px;
    }

    .composer-button,
    .send-button {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .composer-actions {
        gap: 1px;
    }

    .sidebar {
        width: calc(100vw - 20px);
    }

    .auth-card {
        padding:
            24px
            17px
            20px;
    }

}


/* ==========================================================
   ACCESIBILIDAD
========================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.001ms !important;
    }

}


/* ==========================================================
   ARCHIVOS ADJUNTOS / DRAG & DROP / DETENER RESPUESTA
========================================================== */

.attachment-tray,
.upload-status {
    pointer-events: auto;
}

.attachment-tray {
    width: min(880px, 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-strong) transparent;
}

.attachment-tray::-webkit-scrollbar {
    height: 6px;
}

.attachment-tray::-webkit-scrollbar-thumb {
    background: var(--surface-strong);
    border-radius: 999px;
}

.attachment-card {
    min-width: 220px;
    max-width: 320px;
    height: 64px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--background);
    box-shadow: var(--shadow-soft);
}

.attachment-card-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.attachment-card-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.attachment-card-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
}

.attachment-card-copy span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
}

.attachment-remove {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.attachment-remove:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.attachment-remove:active {
    transform: scale(0.94);
}

.attach-button {
    color: var(--text-soft);
}

.attach-button:hover {
    color: var(--purple);
    background: var(--purple-soft);
}

.upload-status {
    width: min(880px, 100%);
    margin-top: 7px;
    padding: 0 6px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: left;
}

.upload-status.error {
    color: var(--danger);
}

.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(111, 85, 217, 0.12);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}

html[data-theme="dark"] .drop-overlay {
    background: rgba(145, 120, 255, 0.15);
}

.drop-overlay-card {
    width: min(520px, 100%);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 34px 24px;
    border: 2px dashed var(--purple);
    border-radius: 28px;
    background: var(--background);
    color: var(--text);
    box-shadow: var(--shadow-auth);
}

.drop-overlay-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 18px;
    background: var(--purple-soft);
    color: var(--purple);
}

.drop-overlay-icon svg {
    width: 31px;
    height: 31px;
    fill: currentColor;
}

.drop-overlay-card strong {
    font-size: 20px;
    line-height: 1.25;
}

.drop-overlay-card span {
    color: var(--muted);
    font-size: 13px;
}

.send-button.stop-response-button {
    background: var(--danger);
    color: #ffffff;
}

.send-button.stop-response-button:hover {
    opacity: 1;
    background: #ad3030;
}

html[data-theme="dark"] .send-button.stop-response-button:hover {
    background: #e06f6f;
}

.send-button.stop-response-button svg {
    width: 19px;
    height: 19px;
}

.app-shell:has(.attachment-tray:not(.hidden)) .main-content {
    padding-bottom: 305px;
    scroll-padding-bottom: 305px;
}

@media (max-width: 760px) {
    .attachment-tray {
        width: 100%;
        gap: 8px;
        margin-bottom: 7px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .attachment-card {
        min-width: 205px;
        max-width: 275px;
        height: 60px;
        border-radius: 14px;
    }

    .attachment-card-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .upload-status {
        width: 100%;
        padding: 0 4px;
        margin-top: 6px;
    }

    .drop-overlay {
        padding:
            max(18px, env(safe-area-inset-top))
            14px
            max(18px, env(safe-area-inset-bottom));
    }

    .drop-overlay-card {
        min-height: 210px;
        border-radius: 24px;
    }

    .app-shell:has(.attachment-tray:not(.hidden)) .main-content {
        padding-bottom:
            calc(
                285px
                + env(safe-area-inset-bottom)
            );

        scroll-padding-bottom:
            calc(
                285px
                + env(safe-area-inset-bottom)
            );
    }
}

@media (max-width: 460px) {
    .attachment-card {
        min-width: 190px;
        max-width: 245px;
    }

    .attachment-card-copy strong {
        font-size: 12px;
    }

    .attachment-card-copy span {
        font-size: 10px;
    }

    .drop-overlay-card strong {
        font-size: 18px;
    }
}


/* ==========================================================
   EDICIÓN DE CONVERSACIONES Y RESPUESTA A TEXTO SELECCIONADO
========================================================== */

.conversation-title {
    cursor: text;
}

.conversation-title:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.conversation-title-input {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    color: var(--text);
    padding: 6px 8px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    outline: none;
}

.conversation-title-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px var(--purple-soft);
}

.selection-context-menu {
    position: fixed;
    z-index: 10000;
    min-width: 190px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.selection-context-menu button {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    padding: 9px 11px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    text-align: left;
}

.selection-context-menu button:hover {
    background: var(--surface);
}

.reply-quote-tray {
    width: min(820px, calc(100% - 28px));
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    border-radius: 12px;
    background: var(--surface);
}

.reply-quote-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reply-quote-copy strong {
    color: var(--purple);
    font-size: 11px;
}

.reply-quote-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
}

.reply-quote-close {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.reply-quote-close:hover {
    background: var(--surface-strong);
    color: var(--text);
}

/* ==========================================================
   PANEL DE ADMINISTRACIÓN
========================================================== */

.sidebar-admin-button {
    width: calc(100% - 20px);
    min-height: 42px;

    margin:
        0
        10px
        9px;

    display: flex;
    align-items: center;

    gap: 9px;

    border:
        1px
        solid
        var(--border);

    border-radius: 12px;

    padding:
        0
        11px;

    background: var(--background);
    color: var(--text);

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.sidebar-admin-button:hover {
    background: var(--surface);
    border-color: var(--border-strong);
}

.sidebar-admin-button-icon {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--purple-soft);
    color: var(--purple);

    font-size: 16px;
}

.admin-overlay {
    position: fixed;
    inset: 0;

    z-index: 500;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        max(20px, env(safe-area-inset-top))
        20px
        max(20px, env(safe-area-inset-bottom));

    background: rgba(0, 0, 0, 0.42);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.admin-panel {
    width: min(1180px, 100%);
    max-height: min(820px, calc(100dvh - 40px));

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px
        solid
        var(--border);

    border-radius: 22px;

    background: var(--background);

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.24);
}

.admin-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    padding:
        22px
        24px
        18px;

    border-bottom:
        1px
        solid
        var(--border);
}

.admin-panel-header-copy h2 {
    margin: 0;

    color: var(--text);

    font-size: 22px;
    line-height: 1.2;
}

.admin-panel-header-copy p {
    margin:
        5px
        0
        0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.45;
}

.admin-close-button {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border: 0;
    border-radius: 10px;

    background: var(--surface);
    color: var(--text);

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.admin-close-button:hover {
    background: var(--surface-strong);
}

.admin-summary {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px, 1fr)
        );

    gap: 10px;

    padding:
        18px
        24px
        8px;
}

.admin-summary-card {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding:
        13px
        14px;

    border:
        1px
        solid
        var(--border);

    border-radius: 13px;

    background: var(--background-soft);
}

.admin-summary-card span {
    color: var(--muted);

    font-size: 10.5px;
    font-weight: 650;
}

.admin-summary-card strong {
    overflow: hidden;

    color: var(--text);

    font-size: 18px;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-status {
    padding:
        5px
        24px
        12px;

    color: var(--muted);

    font-size: 11px;
}

.admin-status.error {
    color: var(--danger);
}

.admin-table-scroll {
    min-height: 0;

    overflow: auto;

    margin:
        0
        24px
        24px;

    border:
        1px
        solid
        var(--border);

    border-radius: 14px;
}

.admin-table {
    width: 100%;
    min-width: 950px;

    border-collapse: collapse;

    background: var(--background);

    font-size: 12px;
}

.admin-table th,
.admin-table td {
    padding:
        11px
        12px;

    border-bottom:
        1px
        solid
        var(--border);

    text-align: right;
    vertical-align: middle;

    white-space: nowrap;
}

.admin-table th {
    position: sticky;
    top: 0;

    z-index: 1;

    background: var(--background-soft);
    color: var(--muted);

    font-size: 10px;
    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: 0.035em;
}

.admin-table th:first-child,
.admin-table td:first-child {
    text-align: left;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr:hover {
    background: var(--background-soft);
}

.admin-user-cell {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.admin-user-cell strong {
    color: var(--text);

    font-size: 12px;
}

.admin-user-cell span {
    color: var(--muted);

    font-size: 10px;
}

.admin-user-cell small {
    width: fit-content;

    margin-top: 3px;

    padding:
        2px
        6px;

    border-radius: 999px;

    background: var(--purple-soft);
    color: var(--purple);

    font-size: 9px;
    font-weight: 750;
}

.admin-empty {
    padding: 24px !important;

    color: var(--muted);

    text-align: center !important;
}

@media (max-width: 760px) {

    .admin-overlay {
        align-items: stretch;

        padding:
            max(10px, env(safe-area-inset-top))
            8px
            max(10px, env(safe-area-inset-bottom));
    }

    .admin-panel {
        max-height: calc(100dvh - 20px);

        border-radius: 18px;
    }

    .admin-panel-header {
        padding:
            18px
            16px
            14px;
    }

    .admin-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        padding:
            14px
            16px
            8px;
    }

    .admin-status {
        padding:
            4px
            16px
            10px;
    }

    .admin-table-scroll {
        margin:
            0
            16px
            16px;
    }

}


/* ==========================================================
   CONVERSACIONES FIJADAS + REPORTES DE BETA
========================================================== */

.conversation-select {
    padding-right: 76px;
}

.conversation-pin {
    position: absolute;
    right: 38px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    font-size: 14px;
    line-height: 1;
    transition:
        opacity var(--transition-fast),
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.conversation-item:hover .conversation-pin,
.conversation-item.active .conversation-pin,
.conversation-pin.pinned {
    opacity: 1;
}

.conversation-pin.pinned {
    color: var(--purple);
}

.conversation-pin:hover {
    background: var(--surface-strong);
    transform: translateY(-1px);
}

.response-report-row {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.response-report-button {
    border: 0;
    border-radius: 8px;
    padding: 6px 8px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.response-report-button:hover:not(:disabled) {
    background: var(--surface);
    color: var(--text);
}

.response-report-button:disabled {
    cursor: default;
    opacity: 0.72;
}

.report-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.report-dialog {
    width: min(520px, 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    background: var(--background);
    color: var(--text);
    box-shadow: var(--shadow-auth);
}

.report-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.report-dialog-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.report-dialog-header strong {
    font-size: 18px;
}

.report-dialog-header span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.report-dialog-close {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 23px;
    cursor: pointer;
}

.report-dialog-close:hover {
    background: var(--surface);
    color: var(--text);
}

.report-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 13px;
}

.report-field > span {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 650;
}

.report-field select,
.report-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 11px;
    outline: none;
    padding: 10px 12px;
    background: var(--background);
    color: var(--text);
    font: inherit;
}

.report-field textarea {
    resize: vertical;
    min-height: 96px;
}

.report-field select:focus,
.report-field textarea:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px var(--purple-soft);
}

.report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 18px;
}

.report-actions button {
    min-height: 40px;
    border-radius: 10px;
    padding: 0 14px;
    font-weight: 650;
    cursor: pointer;
}

.report-cancel {
    border: 1px solid var(--border);
    background: var(--background);
    color: var(--text);
}

.report-submit {
    border: 0;
    background: var(--purple);
    color: #fff;
}

.report-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.report-status {
    min-height: 18px;
    margin-top: 10px;
    color: var(--success);
    font-size: 12px;
}

.report-status.error {
    color: var(--danger);
}

.admin-reports-title {
    margin: 24px 0 10px;
    font-size: 16px;
}

.admin-reports-table {
    min-width: 1100px;
}

.admin-report-text {
    min-width: 230px;
    max-width: 360px;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .report-overlay {
        align-items: flex-end;
        padding: 12px;
    }

    .report-dialog {
        border-radius: 20px 20px 14px 14px;
    }
}