/*
 * Diseño conversacional en tonos rojos.
 * El CSS está escrito sin frameworks externos para máxima compatibilidad con Apache/PHP compartido.
 */
:root{
  --bg:#fff7f7;
  --panel:#ffffff;
  --sidebar:#240606;
  --sidebar-soft:#3a0b0b;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#f1d4d4;
  --primary:#b91c1c;
  --primary-dark:#991b1b;
  --primary-soft:#fee2e2;
  --danger:#dc2626;
  --code:#111827;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--sidebar),#130202);color:#fff;padding:18px;display:flex;flex-direction:column;gap:18px;box-shadow:6px 0 28px rgba(83,0,0,.16)}
.brand{font-size:21px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.brand::before{content:"";width:12px;height:28px;border-radius:20px;background:#ef4444;box-shadow:0 0 18px rgba(239,68,68,.75)}
.sidebar .sub{color:#fecaca;font-size:13px;line-height:1.4}.nav-card{background:rgba(58,11,11,.82);border:1px solid rgba(254,202,202,.16);border-radius:16px;padding:12px}.nav-link{display:block;text-decoration:none;padding:11px 12px;border-radius:12px;color:#fff1f2;margin:4px 0;font-weight:600}.nav-link:hover,.nav-link.active{background:#b91c1c;color:#fff}.main{display:flex;flex-direction:column;min-width:0}.topbar{height:64px;background:rgba(255,255,255,.90);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:10}.topbar strong{color:#7f1d1d}.content{width:min(1040px,100%);margin:0 auto;padding:24px}.chat-content{padding-top:20px}.chat-window{display:flex;flex-direction:column;gap:18px;padding-bottom:250px}.message{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:flex-start}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca}.message.assistant .avatar{background:var(--primary);color:#fff;border-color:#ef4444}.bubble{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:16px 18px;box-shadow:0 6px 22px rgba(127,29,29,.06);line-height:1.58;overflow:hidden}.message.user .bubble{background:#fffafa}.message-text{white-space:pre-wrap}.meta{font-size:12px;color:var(--muted);margin-top:8px}.composer-wrap{position:fixed;left:280px;right:0;bottom:0;background:linear-gradient(180deg,rgba(255,247,247,0),var(--bg) 24%);padding:42px 24px 22px}.composer{width:min(1040px,100%);margin:0 auto;background:var(--panel);border:1px solid #fecaca;border-radius:24px;box-shadow:0 14px 38px rgba(127,29,29,.16);padding:12px}.composer textarea{width:100%;min-height:96px;resize:vertical;border:none;outline:none;font:inherit;line-height:1.5;padding:12px;background:transparent}.composer-row,.tool-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.tool-row{border-bottom:1px solid var(--border);padding-bottom:10px}.composer-row{border-top:1px solid var(--border);padding-top:10px}.image-options{display:none;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding:10px 0}.image-options input{min-width:280px;flex:1}.select,input,textarea{border:1px solid var(--border);border-radius:13px;padding:10px 12px;background:#fff;color:var(--text);outline-color:#ef4444}.task-select{font-weight:700;color:#7f1d1d}.btn{border:none;border-radius:13px;padding:10px 18px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 20px rgba(185,28,28,.20)}.btn:hover{background:var(--primary-dark)}.btn.secondary{background:#7f1d1d}.btn.ghost{background:#fee2e2;color:#7f1d1d;box-shadow:none}.btn.danger{background:var(--danger)}.alert{border-radius:14px;padding:12px 14px;margin:12px 0}.alert.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}.alert.success{background:#fff1f2;border:1px solid #fecaca;color:#7f1d1d}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.card,.welcome-card{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:20px;box-shadow:0 6px 22px rgba(127,29,29,.06)}.card h3,.card h4{margin-top:0;color:#7f1d1d}.welcome-card{text-align:center;padding:42px}.welcome-logo{width:58px;height:58px;border-radius:20px;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:12px;box-shadow:0 12px 28px rgba(185,28,28,.24)}.quick-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}.quick-pills button{border:1px solid #fecaca;background:#fff1f2;color:#7f1d1d;border-radius:999px;padding:9px 13px;cursor:pointer;font-weight:700}.quick-pills button:hover{background:#fee2e2}.table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;font-size:14px}.table th{background:#fff1f2;color:#7f1d1d}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,#fee2e2 0,#fff7f7 42%,#fff 100%);padding:20px}.login-card{width:min(430px,100%);background:#fff;border:1px solid #fecaca;border-radius:26px;box-shadow:0 24px 70px rgba(127,29,29,.18);padding:30px}.login-card h2{color:#7f1d1d}.login-card input{width:100%;margin-bottom:12px}.code-block{background:var(--code);border-radius:16px;margin:12px 0;overflow:hidden;border:1px solid #263244}.code-head{display:flex;align-items:center;justify-content:space-between;background:#1f2937;color:#e5e7eb;padding:8px 12px;font-size:12px}.copy-code{border:1px solid #4b5563;background:#374151;color:#fff;border-radius:8px;padding:5px 9px;cursor:pointer}.code-block pre{margin:0;padding:15px;overflow:auto}.code-block code{color:#f9fafb;font-family:"Cascadia Code","Fira Code",Consolas,monospace;font-size:14px}.image-result img{max-width:100%;border-radius:18px;border:1px solid var(--border)}.history-list{max-height:360px;overflow:auto}.small{font-size:13px;color:var(--muted)}.footer-copy{margin-top:auto;color:#fecaca;font-size:12px;line-height:1.4;border-top:1px solid rgba(254,202,202,.18);padding-top:14px}.footer-copy strong{color:#fff}.copyright-main{text-align:center;color:var(--muted);font-size:12px;padding:18px 12px 28px}
@media(max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative}.composer-wrap{left:0}.topbar{position:relative}.content{padding:16px}.composer-wrap{padding:30px 14px 14px}.message{grid-template-columns:34px 1fr}.avatar{width:34px;height:34px}.sidebar{display:block}.nav-card{margin-top:12px}.tool-row select{width:100%}.image-options{flex-direction:column}.image-options input{min-width:0}.welcome-card{padding:28px 16px}}


/* Indicador de espera mientras se procesa una consulta LLM. */
.thinking-overlay {
  position: fixed;
  left: 280px;
  right: 0;
  bottom: 142px;
  display: none;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
}
.thinking-overlay.show { display: flex; }
.thinking-card {
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(160, 0, 0, .20);
  box-shadow: 0 16px 40px rgba(90,0,0,.18);
  border-radius: 999px;
  padding: 12px 18px;
  color: #6f1111;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.thinking-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #b91c1c;
  animation: thinkingPulse 1s infinite ease-in-out;
}
@keyframes thinkingPulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.25); }
}
@media (max-width: 900px) {
  .thinking-overlay { left: 0; bottom: 155px; }
}

/* Historial de conversaciones independiente tipo ChatGPT. */
.chat-page-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:calc(100vh - 64px);
}
.conversation-panel{
  border-right:1px solid var(--border);
  background:#fffafa;
  padding:18px 14px 280px;
  position:sticky;
  top:64px;
  height:calc(100vh - 64px);
  overflow:auto;
}
.conversation-panel h4{color:#7f1d1d;margin:18px 8px 10px}.new-chat-btn{width:100%;box-shadow:none}.conversation-list{display:flex;flex-direction:column;gap:8px}.conversation-item{display:grid;grid-template-columns:1fr 28px;gap:6px;align-items:center;border:1px solid #fecaca;background:#fff;border-radius:14px;padding:8px;transition:.15s ease}.conversation-item.active{background:#fee2e2;border-color:#ef4444}.conversation-item a{text-decoration:none;min-width:0}.conversation-item strong{display:block;color:#7f1d1d;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item span{display:block;font-size:11px;color:var(--muted);margin-top:4px}.conversation-item form{margin:0}.conversation-item button{width:26px;height:26px;border:none;border-radius:999px;background:#fff1f2;color:#991b1b;font-weight:900;cursor:pointer}.conversation-item button:hover{background:#fecaca}.with-conversations{width:min(980px,100%)}.conversation-composer{left:560px}.conversation-title-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px 15px;margin-bottom:16px;box-shadow:0 6px 22px rgba(127,29,29,.05)}.conversation-title-card span{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}.conversation-title-card strong{color:#7f1d1d}.full{width:100%;margin-bottom:10px}.textarea-small{min-height:82px}.form-label{display:block;font-size:12px;font-weight:800;color:#7f1d1d;margin:8px 0 5px}.form-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.inline-form{display:inline}.action-cell{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.btn.tiny{padding:6px 9px;border-radius:10px;font-size:12px;box-shadow:none}.status-badge{display:inline-block;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:800}.status-badge.active{background:#dcfce7;color:#166534}.status-badge.inactive{background:#fee2e2;color:#991b1b}.admin-table code{font-size:12px;white-space:normal}
@media(max-width:1100px){.chat-page-layout{grid-template-columns:1fr}.conversation-panel{position:relative;top:0;height:auto;padding-bottom:18px;border-right:none;border-bottom:1px solid var(--border)}.conversation-composer{left:280px}.with-conversations{width:100%}}
@media(max-width:820px){.conversation-composer{left:0}.price-grid{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}.conversation-panel{padding:14px}}

/* Rebranding premium AI LIEUNA Agent */
:root{
  --bg:#fff8f8;
  --panel:#ffffff;
  --sidebar:#1d0303;
  --sidebar-soft:#360808;
  --primary:#c4121a;
  --primary-dark:#8f1014;
  --primary-soft:#ffe7e7;
  --border:#f3caca;
}
.brand{font-size:20px;line-height:1.1;gap:10px;letter-spacing:-.04em}
.brand::before{display:none}
.brand-logo{width:42px;height:42px;border-radius:14px;box-shadow:0 12px 28px rgba(185,28,28,.35);background:#fff;padding:2px;flex:none}
.sidebar{background:radial-gradient(circle at 18% 0%,rgba(239,68,68,.35),transparent 28%),linear-gradient(180deg,#250404 0%,#150202 58%,#0b0101 100%)}
.sidebar .sub{margin-top:8px;color:#ffd7d7}.nav-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.nav-link.active{box-shadow:0 10px 22px rgba(185,28,28,.32)}
.topbar{box-shadow:0 10px 25px rgba(127,29,29,.05)}.topbar strong{font-size:18px}.welcome-card{background:linear-gradient(180deg,#fff,#fff7f7);border-color:#facaca}.welcome-logo{background:linear-gradient(135deg,#ef4444,#8f1014);border-radius:22px}.card{transition:transform .15s ease, box-shadow .15s ease}.card:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(127,29,29,.09)}
.btn{background:linear-gradient(135deg,#dc2626,#991b1b)}.btn:hover{filter:brightness(.96)}.btn.ghost{background:#fff0f0;color:#8f1014;border:1px solid #fecaca}.composer{border-color:#f8b4b4}.composer:focus-within{box-shadow:0 16px 44px rgba(185,28,28,.22);border-color:#ef4444}.bubble{border-color:#f4d1d1}.message.assistant .avatar{background:linear-gradient(135deg,#ef4444,#8f1014)}
.login-page{background:radial-gradient(circle at top left,#fecaca 0,#fff5f5 34%,#ffffff 78%)}.login-card{border-radius:30px;position:relative;overflow:hidden}.login-card::before{content:"";position:absolute;inset:0 0 auto 0;height:7px;background:linear-gradient(90deg,#7f1d1d,#dc2626,#fecaca)}.login-brand{text-align:center;margin-bottom:10px}.login-brand img{width:86px;height:86px;border-radius:24px;box-shadow:0 18px 38px rgba(185,28,28,.24);margin-bottom:10px}.login-brand h2{margin:0;color:#7f1d1d;letter-spacing:-.04em}.login-card label{display:block;font-weight:800;color:#7f1d1d;margin:8px 0 5px}.login-card .btn{margin-top:8px}.footer-copy strong,.copyright-main{letter-spacing:.01em}
@media(max-width:820px){.brand-logo{width:38px;height:38px}.brand{font-size:18px}}


/* Ajuste final de tamaños de logo - AI LIEUNA Agent */
.logo-login,
.login-brand img.logo-login {
    width: auto !important;
    height: 72px !important;
    max-width: 180px !important;
    max-height: 72px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 12px auto !important;
    border-radius: 18px !important;
}

.brand-logo,
.logo-navbar,
.logo-sidebar {
    width: auto !important;
    height: 36px !important;
    max-width: 130px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
    border-radius: 10px !important;
}

.brand {
    align-items: center !important;
}

.brand span {
    line-height: 1.05 !important;
}

@media (max-width: 820px) {
    .logo-login,
    .login-brand img.logo-login {
        height: 60px !important;
        max-height: 60px !important;
        max-width: 150px !important;
    }

    .brand-logo,
    .logo-navbar,
    .logo-sidebar {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 115px !important;
    }
}

/* =========================================================
   Ajustes finales: sin logo visual, favicon conservado,
   modo claro/oscuro y tipografía estilo ChatGPT.
   ========================================================= */
:root,
html[data-theme="light"] {
    --bg: #fff7f7;
    --panel: #ffffff;
    --panel-soft: #fff1f2;
    --text: #171717;
    --muted: #6b7280;
    --border: #fecaca;
    --primary: #b91c1c;
    --primary-dark: #7f1d1d;
    --danger: #dc2626;
    --code: #111827;
    color-scheme: light;
}

html[data-theme="dark"] {
    --bg: #0f0f10;
    --panel: #171717;
    --panel-soft: #201213;
    --text: #f5f5f5;
    --muted: #a3a3a3;
    --border: #3a1d1f;
    --primary: #ef4444;
    --primary-dark: #dc2626;
    --danger: #f87171;
    --code: #050505;
    color-scheme: dark;
}

html, body {
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Oculta cualquier logo visual del sistema, pero no toca el favicon. */
.brand-logo,
.logo-login,
.logo-navbar,
.logo-sidebar,
.login-brand img,
.brand img {
    display: none !important;
}

.brand.brand-text-only,
.login-brand.text-only {
    display: flex;
    align-items: center;
    gap: 0;
}

.app-name,
.brand span,
.login-brand h2 {
    font-weight: 750;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.login-brand h2 {
    color: var(--primary-dark);
    text-align: center;
    width: 100%;
    font-size: 30px;
    margin: 0 0 8px;
}

html[data-theme="dark"] .login-brand h2 {
    color: #ffffff;
}

.sidebar {
    background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
}

html[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
    border-right: 1px solid var(--border);
}

.topbar {
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border-bottom: 1px solid var(--border);
}

.topbar strong,
.card h3,
.card h4,
.task-select {
    color: var(--primary-dark);
}

html[data-theme="dark"] .topbar strong,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .task-select {
    color: #fecaca;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 13px;
    background: var(--panel);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(127, 29, 29, .08);
}

.theme-toggle:hover {
    border-color: var(--primary);
}

.login-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 50;
}

.login-page {
    background: radial-gradient(circle at top, #fee2e2 0, var(--bg) 42%, var(--panel) 100%);
}

html[data-theme="dark"] .login-page {
    background: radial-gradient(circle at top, #3f1212 0, #0f0f10 45%, #050505 100%);
}

.login-card,
.card,
.welcome-card,
.bubble,
.composer {
    background: var(--panel);
    border-color: var(--border);
    color: var(--text);
}

.message.user .bubble,
.table,
.select,
input,
textarea,
.quick-pills button {
    background: var(--panel);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .message.user .bubble,
html[data-theme="dark"] .welcome-card {
    background: #171717;
}

html[data-theme="dark"] .composer-wrap {
    background: linear-gradient(180deg, rgba(15,15,16,0), var(--bg) 24%);
}

html[data-theme="dark"] .nav-card {
    background: rgba(23, 23, 23, .88);
    border-color: rgba(255,255,255,.08);
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
    background: #27272a;
}

html[data-theme="dark"] .footer-copy {
    color: #a3a3a3;
    border-top-color: rgba(255,255,255,.08);
}

@media(max-width: 820px) {
    .topbar-actions {
        gap: 8px;
    }
    .theme-toggle {
        padding: 7px 10px;
        font-size: 12px;
    }
}

.user-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
}

.user-form-actions {
    align-self: end;
}

.status-badge.blocked {
    background: rgba(127, 29, 29, .12);
    color: #991b1b;
    border: 1px solid rgba(153, 27, 27, .25);
}

@media(max-width: 980px) {
    .user-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Correcciones finales solicitadas:
   1) Menú lateral fijo al hacer scroll.
   2) Mejor comportamiento de scroll interno del menú.
   3) Ajustes responsivos para móviles.
   ========================================================= */
@media (min-width: 821px) {
    .app-shell {
        align-items: start;
    }

    .sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        z-index: 40 !important;
    }

    .main {
        min-height: 100vh;
    }
}

@media (max-width: 820px) {
    .sidebar {
        position: relative !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   Corrección definitiva de menú fijo en escritorio.
   Se usa position: fixed para que la barra administrativa no se mueva
   aunque el chat tenga mucho contenido y el usuario haga scroll.
   ========================================================= */
@media (min-width: 821px) {
    .app-shell {
        display: block !important;
        min-height: 100vh;
    }

    .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1000 !important;
    }

    .main {
        margin-left: 280px !important;
        width: calc(100% - 280px) !important;
        min-height: 100vh;
    }

    .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
    }

    .composer-wrap {
        left: 280px !important;
    }

    .conversation-composer {
        left: 560px !important;
    }
}

@media (max-width: 1100px) and (min-width: 821px) {
    .conversation-composer {
        left: 280px !important;
    }
}

@media (max-width: 820px) {
    .app-shell {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    .main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .composer-wrap,
    .conversation-composer {
        left: 0 !important;
    }
}

/* Carga de archivos de texto dentro del chat */
.file-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
}
.file-upload-label {
    border: 1px solid var(--border);
    background: var(--panel-soft, #fff1f2);
    color: var(--primary-dark);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    cursor: pointer;
}
.file-upload-label:hover {
    border-color: var(--primary);
}
#attachmentsInput {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}
.file-notice {
    margin-top: 8px;
    border: 1px solid var(--border);
    background: var(--panel-soft, #fff1f2);
    color: var(--primary-dark);
    border-radius: 14px;
    padding: 8px 11px;
    font-size: 12px;
    font-weight: 700;
}
html[data-theme="dark"] .file-upload-label,
html[data-theme="dark"] .file-notice {
    background: #201213;
    color: #fecaca;
}

/* =========================================================
   Composer estilo ChatGPT: botón +, menú de adjuntos y dictado.
   ========================================================= */
.composer-plus-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 6px;
}

.plus-button {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--primary-dark);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(127, 29, 29, .08);
}

.plus-button:hover,
.plus-button[aria-expanded="true"] {
    border-color: var(--primary);
    background: var(--panel-soft);
}

.plus-menu {
    display: none;
    position: absolute;
    left: 0;
    bottom: 46px;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
    z-index: 30;
}

.plus-menu.show {
    display: grid;
    gap: 6px;
}

.plus-menu button {
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--text);
    padding: 11px 12px;
    cursor: pointer;
    text-align: left;
    font-weight: 700;
}

.plus-menu button:hover {
    background: var(--panel-soft);
}

#attachmentsInput {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.file-status {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#voiceButton.recording {
    color: #dc2626;
    background: #fee2e2;
}

html[data-theme="dark"] .plus-button,
html[data-theme="dark"] .plus-menu {
    background: #171717;
}

html[data-theme="dark"] #voiceButton.recording {
    background: #3f1212;
    color: #fecaca;
}

/* Resultado de imágenes */
.image-preview-card {
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 12px;
    background: var(--panel);
}

.image-preview-card img {
    width: 100%;
    max-height: 640px;
    object-fit: contain;
    border-radius: 16px;
    display: block;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.image-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border);
}

/* =========================================================
   Ajuste final del composer: botón + limpio dentro del campo
   y sin botones visibles debajo del chat.
   ========================================================= */
.composer-input-shell {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: end;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--panel);
    border-radius: 26px;
    padding: 8px;
    box-shadow: 0 14px 40px rgba(127, 29, 29, .08);
}

.composer-input-shell textarea {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 44px;
    max-height: 180px;
    resize: none;
    padding: 12px 4px 8px !important;
    outline: none;
}

.composer-input-shell textarea:focus {
    box-shadow: none !important;
}

.composer-input-shell .plus-button {
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    border: 0;
    background: var(--panel-soft);
    color: var(--text);
    font-size: 24px;
    font-weight: 400;
    box-shadow: none;
    transition: transform .15s ease, background .15s ease;
}

.composer-input-shell .plus-button:hover,
.composer-input-shell .plus-button[aria-expanded="true"] {
    background: #fee2e2;
    color: var(--primary-dark);
    transform: rotate(45deg);
}

.send-icon-btn {
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.send-icon-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.composer-input-shell .plus-menu {
    left: 4px;
    bottom: 56px;
    min-width: 275px;
    border-radius: 18px;
    padding: 8px;
}

.composer-input-shell .plus-menu button {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px;
    font-weight: 600;
}

.composer-input-shell .plus-menu button span {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--panel-soft);
}

.composer-input-shell .plus-menu button strong,
.composer-input-shell .plus-menu button small {
    display: block;
    line-height: 1.25;
}

.composer-input-shell .plus-menu button small {
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
}

.composer-status-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px 0;
}

.file-status:empty {
    display: none;
}

#attachmentsInput {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html[data-theme="dark"] .composer-input-shell .plus-button:hover,
html[data-theme="dark"] .composer-input-shell .plus-button[aria-expanded="true"] {
    background: #3f1212;
    color: #fecaca;
}

html[data-theme="dark"] .send-icon-btn {
    background: #ef4444;
}

.voice-unavailable {
    opacity: .55;
}

/* =========================================================
   Versión limpia del composer: sin menú "+", con adjuntar,
   voz y enviar integrados de forma estética.
   ========================================================= */
.clean-composer {
    display: grid !important;
    grid-template-columns: 40px 1fr 40px 42px !important;
    align-items: end !important;
    gap: 8px !important;
    border: 1px solid var(--border) !important;
    background: var(--panel) !important;
    border-radius: 26px !important;
    padding: 8px !important;
    box-shadow: 0 14px 40px rgba(127, 29, 29, .08) !important;
}

.clean-composer textarea {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-height: 44px !important;
    max-height: 180px !important;
    resize: none !important;
    padding: 12px 4px 8px !important;
    outline: none !important;
}

.composer-tool-btn {
    width: 38px;
    height: 38px;
    margin-bottom: 2px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.composer-tool-btn:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.composer-tool-btn.recording,
#voiceButton.recording {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(185, 28, 28, .24);
}

.send-icon-btn {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 1px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(185, 28, 28, .25) !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}

.send-icon-btn:hover:not(:disabled) {
    filter: brightness(.96);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(185, 28, 28, .32) !important;
}

.send-icon-btn:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Oculta completamente elementos de la versión anterior del menú + si quedaran en caché o plantillas viejas. */
.plus-button,
.plus-menu,
.composer-plus-row {
    display: none !important;
}

html[data-theme="dark"] .clean-composer {
    background: var(--panel) !important;
    border-color: #3f2020 !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .composer-tool-btn:hover {
    background: #3f1212;
    color: #fecaca;
}

@media(max-width:820px){
    .clean-composer {
        grid-template-columns: 38px 1fr 38px 40px !important;
        gap: 6px !important;
    }
}