@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap');

:root {
    --iajus-accent:      #1a56c4;
    --iajus-accent-b:    #2a7cff;
    --iajus-glow:        rgba(42,124,255,0.12);
    --iajus-line:        #1e4faa;
    --iajus-sidebar:     #e8ecf3;
    --iajus-sbdr:        #cdd3e0;
    --iajus-main:        #f5f7fa;
    --iajus-white:       #ffffff;
    --iajus-dark:        #1a1d26;
    --iajus-mid:         #3a4160;
    --iajus-soft:        #6b7591;
    --iajus-muted:       #9aa3b8;
    --iajus-border:      #dde2ee;
    --iajus-user:        #1a3a7a;
    --iajus-danger:      #c0392b;
    --iajus-danger-s:    rgba(192,57,43,0.12);
    --iajus-gold:        #b8912a;
    --iajus-r-s:         6px;
    --iajus-r-m:         10px;
    --iajus-r-l:         16px;
    --iajus-fh:          'Syne', sans-serif;
    --iajus-fb:          'DM Sans', sans-serif;
    --iajus-ease:        0.2s ease;
}

/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */
#iajus-chat {
    display: flex !important;
    flex-direction: row !important;
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    height: calc(100vh - 80px) !important;
    min-height: 580px !important;
    background: var(--iajus-main) !important;
    border-top: 1px solid var(--iajus-border) !important;
    font-family: var(--iajus-fb) !important;
    font-size: 15px !important;
    color: var(--iajus-dark) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}

/* =====================================================
   SIDEBAR
===================================================== */
#iajus-chat .iajus-sidebar {
    width: 270px !important;
    min-width: 270px !important;
    flex-shrink: 0 !important;
    background: var(--iajus-sidebar) !important;
    border-right: 1px solid var(--iajus-sbdr) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
}

#iajus-chat .iajus-sidebar-brand {
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid var(--iajus-sbdr) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    background: var(--iajus-sidebar) !important;
}

#iajus-chat .iajus-brand-icon {
    width: 32px !important; height: 32px !important;
    border-radius: var(--iajus-r-s) !important;
    overflow: hidden !important; flex-shrink: 0 !important;
}

#iajus-chat .iajus-brand-icon img {
    width: 32px !important; height: 32px !important;
    object-fit: cover !important; display: block !important;
}

#iajus-chat .iajus-brand-text {
    font-family: var(--iajus-fh) !important;
    font-weight: 700 !important; font-size: 13px !important;
    color: var(--iajus-dark) !important;
    letter-spacing: 0.04em !important; text-transform: uppercase !important;
    line-height: 1.2 !important; display: block !important;
}

#iajus-chat .iajus-brand-sub {
    font-size: 10px !important; color: var(--iajus-soft) !important;
    display: block !important;
}

#iajus-chat #iajus-new-chat {
    margin: 12px 12px 8px !important;
    padding: 10px 14px !important;
    background: var(--iajus-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--iajus-r-m) !important;
    font-family: var(--iajus-fh) !important;
    font-weight: 600 !important; font-size: 13px !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    transition: background var(--iajus-ease) !important;
    flex-shrink: 0 !important;
}
#iajus-chat #iajus-new-chat:hover { background: var(--iajus-accent-b) !important; }

#iajus-chat .iajus-sidebar-section-label {
    padding: 8px 14px 4px !important;
    font-size: 10px !important; font-family: var(--iajus-fh) !important;
    font-weight: 600 !important; color: var(--iajus-soft) !important;
    letter-spacing: 0.12em !important; text-transform: uppercase !important;
    flex-shrink: 0 !important; background: var(--iajus-sidebar) !important;
    display: block !important;
}

#iajus-chat #iajus-chat-list {
    list-style: none !important;
    padding: 4px 8px !important; margin: 0 !important;
    flex: 1 !important; overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--iajus-sbdr) transparent !important;
    background: var(--iajus-sidebar) !important;
}
#iajus-chat #iajus-chat-list::-webkit-scrollbar { width: 4px; }
#iajus-chat #iajus-chat-list::-webkit-scrollbar-thumb { background: var(--iajus-sbdr); border-radius: 4px; }

#iajus-chat #iajus-chat-list li {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 9px 10px !important; border-radius: var(--iajus-r-s) !important;
    margin-bottom: 2px !important; cursor: pointer !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: background var(--iajus-ease) !important;
    list-style: none !important;
}
#iajus-chat #iajus-chat-list li:hover { background: #d8dde8 !important; border-color: #c0c8d8 !important; }
#iajus-chat #iajus-chat-list li.active { background: var(--iajus-glow) !important; border-color: var(--iajus-line) !important; }

#iajus-chat .iajus-chat-item-icon { color: var(--iajus-soft) !important; font-size: 13px !important; flex-shrink: 0 !important; opacity: 0.7 !important; }
#iajus-chat #iajus-chat-list li.active .iajus-chat-item-icon { color: var(--iajus-accent-b) !important; opacity: 1 !important; }

#iajus-chat .iajus-chat-title {
    flex: 1 !important; overflow: hidden !important;
    white-space: nowrap !important; text-overflow: ellipsis !important;
    font-size: 14px !important; color: var(--iajus-mid) !important;
    background: transparent !important;
}
#iajus-chat #iajus-chat-list li.active .iajus-chat-title { color: var(--iajus-accent) !important; font-weight: 500 !important; }

#iajus-chat .iajus-delete-chat {
    background: none !important; border: none !important;
    color: transparent !important; font-size: 16px !important;
    cursor: pointer !important; padding: 2px 4px !important;
    border-radius: 4px !important; line-height: 1 !important;
    flex-shrink: 0 !important;
}
#iajus-chat #iajus-chat-list li:hover .iajus-delete-chat { color: var(--iajus-soft) !important; }
#iajus-chat .iajus-delete-chat:hover { color: var(--iajus-danger) !important; background: var(--iajus-danger-s) !important; }

/* HERRAMIENTAS */
#iajus-chat .iajus-sidebar-tools {
    padding: 10px 12px !important;
    border-top: 1px solid var(--iajus-sbdr) !important;
    flex-shrink: 0 !important;
    background: var(--iajus-sidebar) !important;
}

#iajus-chat .iajus-tools-toggle {
    width: 100% !important; background: transparent !important;
    border: 1px solid #c0c8d8 !important; border-radius: var(--iajus-r-s) !important;
    padding: 9px 12px !important; color: var(--iajus-mid) !important;
    font-family: var(--iajus-fb) !important; font-size: 12px !important;
    cursor: pointer !important; display: flex !important;
    align-items: center !important; justify-content: space-between !important;
    gap: 8px !important; box-sizing: border-box !important;
}
#iajus-chat .iajus-tools-toggle:hover { border-color: var(--iajus-accent) !important; color: var(--iajus-dark) !important; }
#iajus-chat .iajus-tools-arrow { transition: transform var(--iajus-ease) !important; font-size: 10px !important; }
#iajus-chat .iajus-tools-toggle.open .iajus-tools-arrow { transform: rotate(180deg) !important; }

#iajus-chat .iajus-tools-menu {
    display: none;
    margin-top: 6px !important;
    background: #ffffff !important;
    border: 1px solid var(--iajus-sbdr) !important;
    border-radius: var(--iajus-r-s) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
}
#iajus-chat .iajus-tools-menu.open { display: block !important; animation: iajus-down 0.15s ease; }

@keyframes iajus-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#iajus-chat .iajus-tool-item {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 10px 14px !important; color: var(--iajus-mid) !important;
    font-size: 13px !important; cursor: pointer !important;
    text-decoration: none !important;
    border-bottom: 1px solid #eef1f7 !important;
    background: #ffffff !important;
}
#iajus-chat .iajus-tool-item:last-child { border-bottom: none !important; }
#iajus-chat .iajus-tool-item:hover { background: #f0f3f8 !important; color: var(--iajus-dark) !important; text-decoration: none !important; }
#iajus-chat .iajus-tool-item.iajus-tool-highlight { color: var(--iajus-accent) !important; font-weight: 500 !important; }
#iajus-chat .iajus-tool-item.iajus-tool-highlight:hover { background: #e8f0ff !important; }
#iajus-chat .iajus-tool-icon { font-size: 15px !important; width: 20px !important; text-align: center !important; flex-shrink: 0 !important; }

/* QUOTA */
#iajus-chat .iajus-quota-bar {
    padding: 8px 14px 10px !important;
    border-top: 1px solid var(--iajus-sbdr) !important;
    flex-shrink: 0 !important; background: var(--iajus-sidebar) !important;
}
#iajus-chat .iajus-quota-label { font-size: 10px !important; color: var(--iajus-soft) !important; display: flex !important; justify-content: space-between !important; margin-bottom: 5px !important; }
#iajus-chat .iajus-quota-label span { color: var(--iajus-mid) !important; font-weight: 500 !important; }
#iajus-chat .iajus-quota-track { height: 3px !important; background: var(--iajus-sbdr) !important; border-radius: 3px !important; overflow: hidden !important; }
#iajus-chat .iajus-quota-fill { height: 100% !important; background: linear-gradient(90deg, var(--iajus-accent), var(--iajus-accent-b)) !important; border-radius: 3px !important; transition: width 0.4s ease !important; }
#iajus-chat .iajus-quota-fill.warn { background: linear-gradient(90deg,#c8a84b,#e0b455) !important; }
#iajus-chat .iajus-quota-fill.danger { background: linear-gradient(90deg,var(--iajus-danger),#e74c3c) !important; }

/* USUARIO */
#iajus-chat .iajus-user-panel {
    padding: 10px 14px !important;
    border-top: 1px solid var(--iajus-sbdr) !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
    flex-shrink: 0 !important; background: var(--iajus-sidebar) !important;
    text-decoration: none !important;
    transition: background var(--iajus-ease) !important;
}
#iajus-chat .iajus-user-panel:hover { background: #d8dde8 !important; text-decoration: none !important; }
#iajus-chat .iajus-user-avatar {
    width: 34px !important; height: 34px !important; border-radius: 50% !important;
    background: linear-gradient(135deg, var(--iajus-accent), #0d3a8a) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 14px !important; font-weight: 700 !important; color: white !important;
    overflow: hidden !important; flex-shrink: 0 !important;
}
#iajus-chat .iajus-user-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#iajus-chat .iajus-user-info { flex: 1 !important; overflow: hidden !important; }
#iajus-chat .iajus-user-name { font-size: 12.5px !important; font-weight: 500 !important; color: var(--iajus-dark) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; }
#iajus-chat .iajus-user-role { font-size: 10.5px !important; color: var(--iajus-gold) !important; display: block !important; }

/* =====================================================
   ZONA PRINCIPAL
===================================================== */
#iajus-chat .iajus-main {
    flex: 1 !important; display: flex !important; flex-direction: column !important;
    background: var(--iajus-main) !important; overflow: hidden !important; min-width: 0 !important;
}

#iajus-chat .iajus-header {
    padding: 13px 22px !important;
    background: var(--iajus-white) !important;
    border-bottom: 1px solid var(--iajus-border) !important;
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; flex-shrink: 0 !important;
}
#iajus-chat .iajus-header-left { display: flex !important; align-items: center !important; gap: 10px !important; }
#iajus-chat .iajus-header-dot {
    width: 8px !important; height: 8px !important; background: #22c55e !important;
    border-radius: 50% !important; box-shadow: 0 0 8px rgba(34,197,94,0.5) !important;
    animation: iajus-pulse 2s infinite !important; flex-shrink: 0 !important;
}
@keyframes iajus-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
#iajus-chat .iajus-title { font-family: var(--iajus-fh) !important; font-weight: 700 !important; font-size: 15px !important; color: var(--iajus-dark) !important; }
#iajus-chat .iajus-header-actions { display: flex !important; align-items: center !important; gap: 8px !important; }
#iajus-chat .iajus-header-btn {
    background: none !important; border: 1px solid var(--iajus-border) !important;
    color: var(--iajus-soft) !important; padding: 6px 12px !important;
    border-radius: var(--iajus-r-s) !important; font-size: 12px !important;
    cursor: pointer !important; display: flex !important; align-items: center !important;
    gap: 6px !important; font-family: var(--iajus-fb) !important; text-decoration: none !important;
}
#iajus-chat .iajus-header-btn:hover { border-color: var(--iajus-accent) !important; color: var(--iajus-accent-b) !important; background: var(--iajus-glow) !important; text-decoration: none !important; }
#iajus-chat .iajus-pdf-btn { border-color: rgba(184,145,42,0.5) !important; color: var(--iajus-gold) !important; }
#iajus-chat .iajus-pdf-btn:hover { background: rgba(184,145,42,0.1) !important; }

/* MENSAJES */
#iajus-chat #iajus-messages {
    flex: 1 !important; padding: 24px 28px !important;
    overflow-y: auto !important; display: flex !important;
    flex-direction: column !important; gap: 4px !important;
    background: var(--iajus-main) !important;
}
#iajus-chat #iajus-messages::-webkit-scrollbar { width: 5px; }
#iajus-chat #iajus-messages::-webkit-scrollbar-thumb { background: var(--iajus-border); border-radius: 4px; }

#iajus-chat .iajus-welcome { margin: auto !important; text-align: center !important; max-width: 420px !important; padding: 40px 20px !important; }
#iajus-chat .iajus-welcome-icon { font-size: 40px !important; margin-bottom: 14px !important; display: block !important; }
#iajus-chat .iajus-welcome h2 { font-family: var(--iajus-fh) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--iajus-dark) !important; margin: 0 0 10px !important; }
#iajus-chat .iajus-welcome p { font-size: 14px !important; color: var(--iajus-soft) !important; line-height: 1.7 !important; margin: 0 !important; }
#iajus-chat .iajus-welcome-disclaimer { margin-top: 14px !important; padding: 10px 14px !important; background: rgba(184,145,42,0.08) !important; border: 1px solid rgba(184,145,42,0.2) !important; border-radius: var(--iajus-r-s) !important; font-size: 11.5px !important; color: var(--iajus-gold) !important; line-height: 1.6 !important; }

@keyframes iajus-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

#iajus-chat .iajus-msg {
    max-width: 72% !important; padding: 14px 18px !important;
    border-radius: var(--iajus-r-l) !important; line-height: 1.65 !important;
    font-size: 14.5px !important; word-wrap: break-word !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    animation: iajus-fadein 0.25s ease !important;
}
#iajus-chat .iajus-msg.iajus-user {
    background: linear-gradient(135deg, var(--iajus-user), var(--iajus-accent)) !important;
    color: #ffffff !important; margin-left: auto !important;
    border-bottom-right-radius: 4px !important;
    border: 1px solid rgba(42,124,255,0.3) !important;
}
#iajus-chat .iajus-msg.iajus-ai {
    background: var(--iajus-white) !important; color: var(--iajus-dark) !important;
    margin-right: auto !important; border-bottom-left-radius: 4px !important;
    border: 1px solid var(--iajus-border) !important;
}

#iajus-chat .iajus-typing {
    padding: 14px 18px !important; background: var(--iajus-white) !important;
    border: 1px solid var(--iajus-border) !important;
    border-radius: var(--iajus-r-l) !important; border-bottom-left-radius: 4px !important;
    margin-right: auto !important; width: 70px !important;
}
#iajus-chat .iajus-typing-dots { display: flex !important; gap: 5px !important; align-items: center !important; }
#iajus-chat .iajus-typing-dots span { width: 6px !important; height: 6px !important; background: var(--iajus-accent-b) !important; border-radius: 50% !important; animation: iajus-bounce 1.2s infinite !important; }
#iajus-chat .iajus-typing-dots span:nth-child(2) { animation-delay: 0.2s !important; }
#iajus-chat .iajus-typing-dots span:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes iajus-bounce { 0%,60%,100%{transform:translateY(0);opacity:0.4} 30%{transform:translateY(-5px);opacity:1} }

#iajus-chat .iajus-msg.iajus-ai p { margin: 0 0 10px !important; color: var(--iajus-dark) !important; }
#iajus-chat .iajus-msg.iajus-ai p:last-child { margin-bottom: 0 !important; }
#iajus-chat .iajus-msg.iajus-ai h2 { font-family: var(--iajus-fh) !important; font-size: 15px !important; font-weight: 700 !important; margin: 16px 0 8px !important; color: var(--iajus-dark) !important; border-left: 3px solid var(--iajus-accent-b) !important; padding-left: 10px !important; }
#iajus-chat .iajus-msg.iajus-ai h2:first-child { margin-top: 0 !important; }
#iajus-chat .iajus-msg.iajus-ai ul, #iajus-chat .iajus-msg.iajus-ai ol { margin: 8px 0 !important; padding-left: 20px !important; }
#iajus-chat .iajus-msg.iajus-ai li { margin-bottom: 4px !important; line-height: 1.6 !important; color: var(--iajus-dark) !important; }
#iajus-chat .iajus-msg.iajus-ai strong { color: var(--iajus-dark) !important; font-weight: 600 !important; }

#iajus-chat .iajus-msg.iajus-error { background: var(--iajus-danger-s) !important; border: 1px solid rgba(192,57,43,0.25) !important; color: var(--iajus-danger) !important; max-width: 80% !important; }
#iajus-chat .iajus-msg.iajus-domain-warn { background: rgba(184,145,42,0.07) !important; border: 1px solid rgba(184,145,42,0.25) !important; color: #8a6820 !important; max-width: 80% !important; margin-right: auto !important; border-bottom-left-radius: 4px !important; }
#iajus-chat .iajus-limit-notice { text-align: center !important; padding: 14px !important; background: var(--iajus-danger-s) !important; border: 1px solid rgba(192,57,43,0.2) !important; border-radius: var(--iajus-r-m) !important; font-size: 13px !important; color: var(--iajus-danger) !important; }
#iajus-chat .iajus-loading, #iajus-chat .iajus-empty { color: var(--iajus-soft) !important; font-size: 13px !important; text-align: center !important; padding: 40px 20px !important; margin: auto !important; }

/* INPUT */
#iajus-chat .iajus-input-area {
    padding: 14px 22px 18px !important;
    background: var(--iajus-white) !important;
    border-top: 1px solid var(--iajus-border) !important;
    flex-shrink: 0 !important;
}
#iajus-chat .iajus-file-preview { display:none; align-items:center !important; gap:8px !important; padding:6px 10px !important; background:var(--iajus-glow) !important; border:1px solid var(--iajus-line) !important; border-radius:var(--iajus-r-s) !important; margin-bottom:8px !important; font-size:12px !important; color:var(--iajus-accent) !important; }
#iajus-chat .iajus-file-preview.visible { display: flex !important; }
#iajus-chat .iajus-file-preview-remove { background:none !important; border:none !important; color:var(--iajus-soft) !important; cursor:pointer !important; margin-left:auto !important; }
#iajus-chat #iajus-form { display:flex !important; gap:8px !important; align-items:flex-end !important; }
#iajus-chat #iajus-file-input { display: none !important; }

#iajus-chat .iajus-attach-btn {
    background: #f0f3f8 !important; border: 1px solid var(--iajus-border) !important;
    color: var(--iajus-soft) !important; width: 46px !important; height: 46px !important;
    min-width: 46px !important; border-radius: var(--iajus-r-m) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; font-size: 17px !important; flex-shrink: 0 !important; align-self: flex-end !important;
}
#iajus-chat .iajus-attach-btn:hover { border-color: var(--iajus-accent) !important; color: var(--iajus-accent-b) !important; background: var(--iajus-glow) !important; }
#iajus-chat .iajus-input-wrapper { flex: 1 !important; min-width: 0 !important; }

#iajus-chat #iajus-input {
    width: 100% !important; min-height: 46px !important; max-height: 140px !important;
    resize: none !important; background: #f5f7fa !important; color: var(--iajus-dark) !important;
    border: 1px solid var(--iajus-border) !important; border-radius: var(--iajus-r-m) !important;
    padding: 12px 14px !important; font-family: var(--iajus-fb) !important;
    font-size: 14px !important; line-height: 1.5 !important;
    outline: none !important; box-sizing: border-box !important;
}
#iajus-chat #iajus-input:focus { border-color: var(--iajus-accent) !important; background: var(--iajus-white) !important; box-shadow: 0 0 0 3px rgba(42,124,255,0.1) !important; }
#iajus-chat #iajus-input::placeholder { color: var(--iajus-muted) !important; }

#iajus-chat #iajus-send {
    background: var(--iajus-accent) !important; color: white !important;
    border: none !important; width: 46px !important; height: 46px !important;
    min-width: 46px !important; border-radius: var(--iajus-r-m) !important;
    cursor: pointer !important; display: flex !important; align-items: center !important;
    justify-content: center !important; font-size: 18px !important;
    flex-shrink: 0 !important; align-self: flex-end !important;
}
#iajus-chat #iajus-send:hover { background: var(--iajus-accent-b) !important; }
#iajus-chat #iajus-send:disabled { background: var(--iajus-border) !important; color: var(--iajus-muted) !important; cursor: not-allowed !important; }
#iajus-chat .iajus-input-footer { margin-top: 6px !important; font-size: 10.5px !important; color: var(--iajus-muted) !important; }
#iajus-chat .iajus-input-footer a { color: var(--iajus-accent-b) !important; text-decoration: none !important; }

/* =====================================================
   RESPONSIVE MÓVIL
===================================================== */
@media screen and (max-width: 768px) {

    #iajus-chat {
        flex-direction: column !important;
        width: 100% !important; max-width: 100% !important;
        height: auto !important; min-height: 100dvh !important;
    }

    #iajus-chat .iajus-sidebar {
        width: 100% !important; min-width: unset !important;
        height: auto !important; max-height: 38vh !important;
        border-right: none !important;
        border-bottom: 1px solid var(--iajus-sbdr) !important;
    }

    #iajus-chat #iajus-chat-list { max-height: 100px !important; }

    #iajus-chat .iajus-quota-bar,
    #iajus-chat .iajus-user-panel { display: none !important; }

    #iajus-chat .iajus-main { flex: 1 !important; min-height: 55vh !important; }

    #iajus-chat #iajus-messages { padding: 12px !important; }

    #iajus-chat .iajus-msg { max-width: 90% !important; font-size: 14px !important; }

    #iajus-chat .iajus-input-area { padding: 10px 12px 14px !important; }

    #iajus-chat .iajus-header { padding: 10px 14px !important; }

    #iajus-chat .iajus-title { font-size: 13px !important; }

    #iajus-chat .iajus-header-btn span { display: none !important; }
}