/* ============================================
   AI CHAT - UNIFIED STYLES
   Panel, Modal, History, Reindex
   
   Variables are defined in css/themes/variables.css
   Theme overrides in css/themes/theme-*.css
   ============================================ */

/* ============================================
   1. SHARED BACKGROUNDS & TEXTURES
   ============================================ */
.ai-noise-bg {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, rgba(40, 40, 55, 0.7) 0%, rgba(20, 20, 28, 0.8) 100%);
}

/* ============================================
   2. CHAT MESSAGES (Shared between Panel & Modal)
   ============================================ */
.chat-message {
    padding: 12px;
    border-radius: 12px;
    max-width: 80%;
    animation: slideIn 0.2s ease-out;
    line-height: 1.5;
    word-wrap: break-word;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.chat-message.user {
    align-self: flex-end;
    background: var(--ai-user-bg);
    border-left: 3px solid var(--ai-user-accent);
}

.chat-message.ai {
    align-self: flex-start;
    border-left: 3px solid var(--ai-accent);
    background: var(--ai-accent-light);
    border: 1px solid var(--ai-border);
    color: var(--ai-text);
}

.chat-message.chat-loading {
    /* removed opacity: 0.7 to keep it full color during generation */
    opacity: 1;
}

/* Message header */
.msg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    opacity: 0.8;
}

.msg-avatar {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.companion-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.msg-label {
    font-weight: 600;
    font-size: 16px;
}

.msg-time {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.6;
}

.msg-content {
    position: relative;
    /* watermark positioning context */
    line-height: 1.5;
    word-wrap: break-word;
}

/* 🖼️ Thematic watermark image — floated right in AI response text.
   Core styles (float, opacity, size, mask) are set inline via JS. */
.msg-watermark {
    shape-outside: circle(50%);
}

@media (prefers-reduced-motion: reduce) {
    .msg-watermark {
        transition: none !important;
    }
}

/* ============================================
   AI TIPS READ MORE
   ============================================ */
.tip-content-wrapper {
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.tip-content-wrapper.expanded {
    max-height: 2000px;
    /* Allow enough expansion for long tips */
}

.tip-content-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--ai-accent-light, #282837) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0;
    /* hidden when collapsed — only appears briefly during expansion */
}

.tip-content-wrapper.expanded::after {
    opacity: 0;
}

.tip-read-more-btn {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-primary, #dda030);
    cursor: pointer;
    user-select: none;
    transition: color 0.2s, opacity 0.2s;
}

.tip-read-more-btn:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ============================================
   MATH FORMULAS (KaTeX) IN CHAT MESSAGES
   ============================================ */

/* Inline math: inherits font size from message */
.msg-content .katex {
    font-size: 1.05em;
}

/* Display math: centered with subtle background */
.msg-content .katex-display {
    margin: 12px 0;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
}

.msg-content .katex-display>.katex {
    font-size: 1.15em;
}

/* Prevent long formulas from breaking chat bubble layout */
.msg-content .katex-html {
    max-width: 100%;
    overflow-x: auto;
}

/* Loading status text */
.loading-status {
    display: block;
    font-size: 0.8rem;
    color: var(--ai-text-muted, #888);
    margin-bottom: 4px;
    min-height: 1.2em;
    opacity: 1;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    letter-spacing: 0.02em;
}

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

.loading-status.updating {
    opacity: 0;
    transform: translateY(-2px);
}

/* Loading dots */
.loading-dots {
    display: flex;
    gap: 4px;
    padding: 8px 0;
    margin-top: 16px;
    /* Gap between status text and dots */
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--ai-accent);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* ============================================
   PREFLIGHT QUESTION — in-chat interactive buttons
   for modify flow (trust vs supervise)
   ============================================ */

.preflight-question {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.preflight-question.preflight-enter {
    opacity: 0;
    transform: translateY(10px);
}

.preflight-question.preflight-visible {
    opacity: 1;
    transform: translateY(0);
}

.preflight-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preflight-text {
    color: var(--text-primary);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.preflight-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
}

.preflight-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--bg-medium, #1e1e3a);
    border: 2px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.preflight-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.preflight-btn.trust:hover:not(:disabled) {
    border-color: var(--color-success, #22c55e);
    background: var(--color-success-bg, rgba(34, 197, 94, 0.08));
}

.preflight-btn.supervise:hover:not(:disabled) {
    border-color: var(--accent-primary, #d4a44a);
    background: rgba(212, 164, 74, 0.08);
}

.preflight-btn__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.preflight-btn__text {
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

.preflight-btn__label {
    font-weight: 600;
    font-size: 0.95rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preflight-btn__desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Marquee scroll on hover when text overflows */
.preflight-btn:hover .preflight-btn__label,
.preflight-btn:hover .preflight-btn__desc {
    text-overflow: clip;
    animation: preflightMarquee 5s ease-in-out infinite;
}

@keyframes preflightMarquee {

    0%,
    10% {
        transform: translateX(0);
    }

    40%,
    60% {
        transform: translateX(-40%);
    }

    90%,
    100% {
        transform: translateX(0);
    }
}

.preflight-btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.preflight-btn.chosen {
    opacity: 1 !important;
    border-color: var(--color-success, #22c55e);
    background: var(--color-success-bg, rgba(34, 197, 94, 0.1));
}

.preflight-btn.dimmed {
    opacity: 0.3;
}

.preflight-btn.cancel:hover:not(:disabled) {
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.06);
    color: rgba(239, 68, 68, 0.9);
}

.preflight-btn.cancel .preflight-btn__icon {
    font-size: 1rem;
    opacity: 0.7;
}

.preflight-question.preflight-exit {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Thinking dots inside preflight button label */
.preflight-thinking {
    display: inline-flex !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
    vertical-align: middle;
    opacity: 0;
    animation: preflightDotsIn 0.3s ease-out forwards;
}

.preflight-thinking.fading-out {
    animation: preflightDotsOut 0.3s ease-out forwards;
}

.preflight-thinking span {
    width: 5px !important;
    height: 5px !important;
}

@keyframes preflightDotsIn {
    from {
        opacity: 0;
        transform: translateX(-4px);
    }

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

@keyframes preflightDotsOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(4px);
    }
}

/* ============================================
   POST-TRUST REVIEW — "¿Deseas ver los cambios?"
   button after trust-mode auto-modify
   ============================================ */

.post-trust-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.post-trust-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.post-trust-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: var(--bg-medium, #1e1e3a);
    border: 2px solid var(--accent-primary, #d4a44a);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
}

.post-trust-btn:hover:not(:disabled) {
    background: rgba(212, 164, 74, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.post-trust-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.post-trust-btn__icon {
    font-size: 1.1rem;
}

.post-trust-btn__label {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.post-trust-btn:hover .post-trust-btn__label {
    text-overflow: clip;
    animation: preflightMarquee 5s ease-in-out infinite;
}

/* ─── Manual review fallback button ─── */
.manual-review-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.manual-review-text {
    color: var(--text-secondary, #aaa);
    font-size: 0.9rem;
}

.manual-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--accent-primary, #d4a44a);
    border-radius: 8px;
    background: rgba(212, 164, 74, 0.08);
    color: var(--accent-primary, #d4a44a);
    cursor: pointer;
    font-size: 0.88rem;
    transition: all 0.2s ease;
}

.manual-review-btn:hover:not(:disabled) {
    background: rgba(212, 164, 74, 0.18);
    box-shadow: 0 2px 8px rgba(212, 164, 74, 0.15);
    transform: translateY(-1px);
}

.manual-review-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.manual-review-btn__icon {
    font-size: 1rem;
}

.manual-review-btn__label {
    font-weight: 600;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manual-review-btn:hover .manual-review-btn__label {
    text-overflow: clip;
    animation: preflightMarquee 5s ease-in-out infinite;
}

/* ============================================
   WORKFLOW INDICATOR — in-chat animated status
   for modify/create/search flows
   ============================================ */

.workflow-indicator {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.workflow-indicator.workflow-enter {
    opacity: 0;
    transform: translateY(12px);
}

.workflow-indicator.workflow-visible {
    opacity: 1;
    transform: translateY(0);
}

.workflow-indicator.workflow-exit {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
}

.workflow-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}

/* Pulsing icon container */
.workflow-animation {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.workflow-icon {
    font-size: 1.4rem;
    z-index: 1;
    animation: workflowBob 2s ease-in-out infinite;
    transition: opacity 0.2s ease;
}

.workflow-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent-primary, #d4a44a);
    opacity: 0;
    animation: workflowPulse 2s ease-out infinite;
}

@keyframes workflowPulse {
    0% {
        transform: scale(0.6);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes workflowBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Text body */
.workflow-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.workflow-text {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.workflow-text.workflow-fade-out {
    opacity: 0;
}

.workflow-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Animated dots */
.workflow-dots {
    display: inline;
    margin-left: 0;
}

.workflow-dots span {
    animation: workflowDot 1.4s infinite ease-in-out;
    opacity: 0;
    font-weight: 700;
    color: var(--accent-primary, #d4a44a);
    font-size: 1.1rem;
}

.workflow-dots span:nth-child(1) {
    animation-delay: 0s;
}

.workflow-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.workflow-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes workflowDot {

    0%,
    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60%,
    100% {
        opacity: 0;
    }
}

/* ============================================
   MULTI-FILE LOADING INDICATOR
   ============================================ */
.multi-file-loading .msg-content {
    min-width: 280px;
}

.multi-file-loading-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.multi-file-loading-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ai-accent, #3b82f6);
}

.multi-file-loading-header .multi-file-icon {
    font-size: 24px;
    animation: pulse 2s ease-in-out infinite;
}

.multi-file-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 8px;
}

.loading-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.4;
    transition: all 0.4s ease;
}

.loading-step.active {
    opacity: 1;
}

.loading-step.active .step-icon {
    animation: stepPulse 1s ease-in-out infinite;
}

.loading-step .step-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

.loading-step .step-text {
    color: var(--ai-text, #e0e0e0);
}

.multi-file-loading-progress {
    margin-top: 4px;
}

.multi-file-loading-progress .progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.multi-file-loading-progress .progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
            var(--ai-accent, #3b82f6),
            #8b5cf6,
            var(--ai-accent, #3b82f6));
    background-size: 200% 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
    animation: progressShimmer 2s linear infinite;
}

@keyframes stepPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes progressShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* ============================================
   3. MODE BUTTONS (Shared)
   ============================================ */
.mode-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid var(--muted, #666);
    background: transparent;
    color: var(--muted, #888);
    cursor: pointer;
    transition: all 0.2s;
}

.mode-btn:hover {
    border-color: var(--ai-accent);
    color: var(--ai-accent);
}

.mode-btn.active {
    background: var(--ai-accent);
    border-color: var(--ai-accent);
    color: var(--text-inverse, #0b0b0f);
    font-weight: 600;
}

/* ============================================
   4. AI CHAT PANEL (1D View)
   ============================================ */
.ai-chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ai-bg-dark, rgba(12, 12, 24, 0.95));
    border: 1px solid var(--ai-border-light);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* allow layered "glass" overlays */
}

/* 1D only: animated multicolor gradient border (holo/aurora vibe) */
@keyframes aiChatBorderShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Use mask-composite trick so only the border ring is visible. */
@supports ((-webkit-mask: linear-gradient(#000 0 0)) and (-webkit-mask-composite: xor)) or (mask-composite: exclude) {

    /* Exclude the header area from the animated border (1D only). */
    .oneD-ai-chat .ai-chat-panel {
        /* Header height used to start the animated border right below it */
        --ai-chat-holo-skip: var(--ai-chat-header-height, 50px);
    }

    .oneD-ai-chat .ai-chat-panel::before {
        content: '';
        position: absolute;
        top: var(--ai-chat-holo-skip, 64px);
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0.5px;
        /* border thickness */
        border-radius: 0 0 12px 12px;
        /* only body area, keep header clean */
        /* Quita la “línea” superior del degradado animado */
        clip-path: inset(1px 0 0 0);
        pointer-events: none;
        z-index: 2;
        opacity: 0.9;
        background: linear-gradient(90deg,
                hsl(calc((var(--ai-header-hue, 210) + 0) * 1deg), 85%, 55%),
                hsl(calc((var(--ai-header-hue, 210) + 40) * 1deg), 85%, 55%),
                hsl(calc((var(--ai-header-hue, 210) + 80) * 1deg), 85%, 55%),
                hsl(calc((var(--ai-header-hue, 210) + 120) * 1deg), 85%, 55%),
                hsl(calc((var(--ai-header-hue, 210) + 160) * 1deg), 85%, 55%),
                hsl(calc((var(--ai-header-hue, 210) + 0) * 1deg), 85%, 55%));
        background-size: 200% 100%;
        animation: aiChatBorderShift 3.5s linear infinite;

        /* Cut out the center (leave only border ring) */
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    /* If we render the border with canvas, disable the CSS border ring */
    .oneD-ai-chat .ai-chat-panel.has-canvas-border::before {
        display: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .oneD-ai-chat .ai-chat-panel::before {
            animation: none;
        }
    }
}

/* 1D only: canvas-driven border ring (continuous with header canvas) */
@supports ((-webkit-mask: linear-gradient(#000 0 0)) and (-webkit-mask-composite: xor)) or (mask-composite: exclude) {
    .oneD-ai-chat .ai-chat-panel.has-canvas-border .ai-chat-holo-canvas {
        /* Canvas is masked in JS; keep it above panel bg, below content */
        z-index: 0;
    }
}

/* 1D only: remove the static top border line */
.oneD-ai-chat .ai-chat-panel {
    border-top: 0;
}

.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Padding simétrico para altura compacta */
    padding: 12px 16px;
    background: color-mix(in srgb, #2CDDC8 15%, var(--bg-medium, #1e2430));
    border-bottom: 1px solid var(--ai-border-light);
    position: relative;
    overflow: visible;
    margin-bottom: 12px;
    z-index: 101;
    /* Above .web-search-warning-overlay (z-index: 100) */
}

/* Light theme override */
[data-theme^="light"] .ai-chat-header {
    background: color-mix(in srgb, #2CDDC8 12%, var(--bg-medium, #eef0f5));
}

/* When the holo canvas is active, let the canvas paint the header background */
.has-canvas-border .ai-chat-header {
    background: transparent;
}

.ai-chat-header h2,
.ai-chat-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ai-accent);
    position: relative;
    z-index: 1;
}

.ai-chat-header .ai-chat-actions {
    position: relative;
    z-index: 10;
    overflow: visible;
    /* Crucial for absolute menus */
}

.ai-chat-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

/* ── 3-dot dropdown menu in header ── */
.ai-chat-menu-wrapper {
    position: relative;
}

.ai-chat-menu-trigger {
    width: 44px !important;
    height: 38px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    letter-spacing: 1px;
    padding: 0 !important;
}

.ai-chat-menu-dropdown {
    display: none;
    position: fixed;
    min-width: 200px;
    background: var(--ctx-menu-bg, var(--bg-dark, #161a22));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14));
    border-radius: 10px;
    padding: 4px;
    box-shadow: var(--ctx-menu-shadow, var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.35)));
    z-index: 9999999;
    animation: chatMenuFadeIn 0.15s ease-out;
}

.ai-chat-menu-dropdown.open {
    display: flex;
    flex-direction: column;
}

.ai-chat-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary, #e0e0e0);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
    white-space: nowrap;
}

.ai-chat-menu-item .menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 15px;
    opacity: 0.85;
    flex-shrink: 0;
}
.ai-chat-menu-item .menu-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.ai-chat-menu-dropdown .dropdown-separator {
    height: 1px;
    background: var(--border-subtle, rgba(255, 255, 255, 0.1));
    margin: 4px;
}

[data-theme^="light"] .ai-chat-menu-dropdown .dropdown-separator {
    background: var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.ai-chat-menu-item:hover {
    background: var(--hover-overlay, rgba(255, 255, 255, 0.06));
    color: var(--accent-primary, var(--ai-accent, #60a5fa));
}

.ai-chat-menu-item:active {
    background: var(--active-overlay, rgba(255, 255, 255, 0.1));
}

.ai-chat-menu-item.active {
    color: var(--ai-accent, #60a5fa);
    background: rgba(96, 165, 250, 0.1);
}

.ai-chat-menu-item.active .web-search-icon,
.ai-chat-menu-item.active .tts-icon {
    opacity: 1;
    filter: none;
}

.ai-chat-menu-item .web-search-icon,
.ai-chat-menu-item .tts-icon {
    opacity: 0.7;
    filter: grayscale(100%);
}

[data-theme^="light"] .ai-chat-menu-item.active {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.08);
}

@media (min-width: 769px) {
    .ai-chat-menu-item {
        font-size: 0.9rem;
        padding: 8px 14px;
    }
}

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

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

/* Group button wrapping mode icon + mode label — single click target */
.header-mode-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 10px 4px 6px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.header-mode-group:hover {
    background: var(--ai-accent-light, rgba(96, 165, 250, 0.12));
}

.header-mode-group:hover .header-mode-icon {
    transform: scale(1.18);
    filter: brightness(1.2);
}

.header-mode-group:active {
    background: var(--ai-accent-light, rgba(96, 165, 250, 0.18));
}

.header-mode-group:active .header-mode-icon {
    transform: scale(0.95);
}

/* Mode emoji icon — transitions driven by parent group hover */
/* Mode emoji/SVG icon circle wrapper in the chat header */
.header-mode-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: var(--mode-circle-bg, var(--bg-darkest, #0a0c10)) !important;
    border: 2px solid var(--mode-circle-border, var(--ai-accent, #3b82f6)) !important;
    box-shadow: var(--shadow-sm);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: transform 0.18s ease, filter 0.18s ease, border-color 0.2s ease, background-color 0.2s ease;
    user-select: none;
    flex-shrink: 0;
    pointer-events: none;
    line-height: 1;
}

.header-mode-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Ensure mode SVG icons are always visible and high-contrast in dark themes */
.header-mode-icon {
    color: var(--ai-accent, #3b82f6) !important;
}

.header-mode-icon svg path,
.header-mode-icon svg circle,
.header-mode-icon svg rect,
.header-mode-icon svg polygon {
    stroke: var(--mode-svg-primary, var(--ai-accent, currentColor)) !important;
}

.header-mode-icon svg path[fill^="var(--mode-svg-primary)"],
.header-mode-icon svg circle[fill^="var(--mode-svg-primary)"] {
    fill: var(--mode-svg-primary, var(--ai-accent, currentColor)) !important;
}

.header-mode-icon svg path[fill^="var(--mode-svg-secondary)"],
.header-mode-icon svg circle[fill^="var(--mode-svg-secondary)"] {
    fill: var(--mode-svg-secondary, var(--mode-svg-primary, var(--ai-accent, currentColor))) !important;
}

/* 🎨 Mode SVG Variable Mapping for Contrast */
.header-mode-icon[data-mode="qa"] {
    --mode-svg-primary: var(--mode-svg-primary-qa);
    --mode-svg-secondary: var(--mode-svg-secondary-qa);
}

.header-mode-icon[data-mode="paseo"] {
    --mode-svg-primary: var(--mode-svg-primary-paseo);
    --mode-svg-secondary: var(--mode-svg-secondary-paseo);
    --mode-svg-tertiary: var(--mode-svg-tertiary-paseo);
}

.header-mode-icon[data-mode="work"] {
    --mode-svg-primary: var(--mode-svg-primary-work);
    --mode-svg-secondary: var(--mode-svg-secondary-work);
}

.header-mode-icon[data-mode="support"] {
    --mode-svg-primary: var(--mode-svg-primary-support);
    --mode-svg-secondary: var(--mode-svg-secondary-support);
}


/* Clickable mode name — inside the group button */
.header-mode-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ai-accent);
    user-select: none;
    white-space: nowrap;
    line-height: 1.2;
    pointer-events: none;
}

/* Mobile: icon-only (hide label to save space for gamification badge) */
html[data-platform="mobile"] .header-mode-label {
    display: none;
}

html[data-platform="mobile"] .header-mode-group {
    padding: 4px 6px;
}

html[data-platform="mobile"] .header-mode-icon {
    font-size: 1.4rem;
}

@media (max-width: 768px) {
    .header-mode-label {
        display: none;
    }

    .header-mode-group {
        padding: 4px 6px;
    }

    .header-mode-icon {
        font-size: 1.4rem;
    }
}

/* Thin vertical separator between mode group and speaker pill */
.header-sep {
    color: var(--border-subtle, rgba(255, 255, 255, 0.2));
    font-size: 16px;
    line-height: 1;
    margin: 0 2px;
    user-select: none;
    flex-shrink: 0;
}

.ai-chat-header-left {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    z-index: 1;
}

/* Web Search Pill Toggle */
.web-search-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 16px;
    border: 1px solid var(--gray-300, #d1d5db);
    background: var(--gray-100, #f3f4f6);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1;
}

.web-search-pill:hover {
    border-color: var(--gray-400, #9ca3af);
    background: var(--gray-200, #e5e7eb);
}

.web-search-pill .web-search-icon {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.2s ease;
}

.web-search-pill.active {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-color: #3b82f6;
    /* Stay above the warning overlay (z-index: 100) so user can click to disable */
    position: relative;
    z-index: 101;
}

.web-search-pill.active .web-search-icon {
    filter: grayscale(0%);
    opacity: 1;
}

/* TTS Voice Pill Toggle */
.tts-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 16px;
    border: 1px solid var(--gray-300, #d1d5db);
    background: var(--gray-100, #f3f4f6);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1;
}

.tts-pill:hover {
    border-color: var(--gray-400, #9ca3af);
    background: var(--gray-200, #e5e7eb);
}

.tts-pill .tts-icon {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.2s ease;
}

.tts-pill.active {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: #22c55e;
    position: relative;
    z-index: 101;
}

.tts-pill.active .tts-icon {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================================
   Web Search Warning Modal
   ============================================ */
.web-search-warning-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.web-search-warning-overlay.visible {
    opacity: 1;
}

.web-search-warning-overlay.closing {
    opacity: 0;
}

.web-search-warning-modal {
    background: linear-gradient(145deg,
            rgba(30, 30, 40, 0.98) 0%,
            rgba(20, 20, 30, 0.98) 100%);
    border: 1px solid rgba(255, 180, 50, 0.3);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 90%;
    width: 380px;
    text-align: center;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 180, 50, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: warningModalSlide 0.3s ease-out;
}

@keyframes warningModalSlide {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

.web-search-warning-icon {
    font-size: 48px;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(255, 180, 50, 0.4));
}

.web-search-warning-title {
    color: var(--color-warning, #fbbf24);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    text-shadow: 0 2px 8px rgba(255, 180, 50, 0.3);
}

.web-search-warning-text {
    color: var(--text-secondary, rgba(255, 255, 255, 0.85));
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.web-search-warning-text strong {
    color: var(--color-warning, #fbbf24);
}

.web-search-warning-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.web-search-warning-btn {
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.web-search-warning-btn.confirm {
    background: linear-gradient(135deg, var(--color-info, #3b82f6) 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.web-search-warning-btn.confirm:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.web-search-warning-btn.cancel {
    background: var(--hover-overlay, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    border: 1px solid var(--border-faint, rgba(255, 255, 255, 0.15));
}

.web-search-warning-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Theme adaptations for light mode */
[data-theme^="light"] .web-search-warning-modal {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(245, 245, 250, 0.98) 100%);
    border-color: rgba(251, 191, 36, 0.4);
}

[data-theme^="light"] .web-search-warning-title {
    color: #b45309;
}

[data-theme^="light"] .web-search-warning-text {
    color: var(--text-primary, rgba(0, 0, 0, 0.75));
}

[data-theme^="light"] .web-search-warning-text strong {
    color: #b45309;
}

[data-theme^="light"] .web-search-warning-btn.cancel {
    background: var(--hover-overlay, rgba(0, 0, 0, 0.05));
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
    border-color: var(--border-faint, rgba(0, 0, 0, 0.1));
}

[data-theme^="light"] .web-search-warning-btn.cancel:hover {
    background: var(--active-overlay, rgba(0, 0, 0, 0.08));
    color: var(--text-primary, rgba(0, 0, 0, 0.8));
}

/* Hover mode specific styles */
.web-search-warning-overlay.hover-mode {
    pointer-events: none;
    background: rgba(0, 0, 0, 0.75);
}

.web-search-warning-overlay.hover-mode .web-search-warning-modal {
    transform: scale(0.92);
    padding: 24px 20px;
    animation: none;
}

.web-search-warning-hint {
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    font-size: 0.85rem;
    margin: 8px 0 0 0;
    font-style: italic;
}

[data-theme^="light"] .web-search-warning-hint {
    color: var(--text-muted, rgba(0, 0, 0, 0.45));
}

.ai-btn-icon {
    background: transparent;
    border: 1px solid var(--ai-accent-border);
    border-radius: 6px;
    color: var(--ai-accent);
    font-size: 16px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.ai-btn-icon:hover {
    background: var(--ai-accent-light);
    border-color: var(--ai-accent);
}

/* ── Processing bubble (shown while topics are being created) ── */
.processing-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
    box-shadow:
        0 0 10px rgba(34, 197, 94, 0.5),
        0 0 20px rgba(14, 165, 233, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    animation: processing-bubble-pulse 2s ease-in-out infinite;
    animation-play-state: paused;
    /* paused by default */
    position: relative;
    flex-shrink: 0;
    overflow: visible;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.processing-bubble:hover {
    transform: scale(1.15);
    box-shadow:
        0 0 14px rgba(34, 197, 94, 0.6),
        0 0 28px rgba(14, 165, 233, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

/* Activate animation only when files are being processed */
.processing-bubble.active {
    animation-play-state: running;
}

/* Spinning ring around the bubble during processing */
.processing-bubble.active::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.8);
    border-right-color: rgba(34, 197, 94, 0.5);
    animation: processing-ring-spin 1.2s linear infinite;
    pointer-events: none;
    z-index: 4;
}

.processing-bubble.active::after {
    animation-play-state: running;
}

/* Green tick overlay when all processing is done */
.processing-bubble.done {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow:
        0 0 12px rgba(34, 197, 94, 0.6),
        0 0 24px rgba(34, 197, 94, 0.3);
    animation: processing-done-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.processing-bubble.done .processing-bubble-icon svg {
    color: #fff !important;
}

/* Document icon */
.processing-bubble-icon {
    font-size: 15px;
    line-height: 1;
    display: inline-block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Scanline effect: a bright line sweeps up and down */
.processing-bubble::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    border-radius: 2px;
    animation: processing-scanline 2s ease-in-out infinite;
    animation-play-state: paused;
    /* paused by default */
    z-index: 2;
    pointer-events: none;
}

@keyframes processing-scanline {
    0% {
        top: 4px;
        opacity: 0.3;
    }

    50% {
        top: 24px;
        opacity: 1;
    }

    100% {
        top: 4px;
        opacity: 0.3;
    }
}

@keyframes processing-bubble-pulse {

    0%,
    100% {
        box-shadow:
            0 0 10px rgba(34, 197, 94, 0.5),
            0 0 20px rgba(14, 165, 233, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow:
            0 0 18px rgba(34, 197, 94, 0.7),
            0 0 35px rgba(14, 165, 233, 0.45);
        transform: scale(1.08);
    }
}

@keyframes processing-ring-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes processing-done-pop {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes processing-check-bounce {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-20deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* ── Sparkle burst particles (firework effect on processing start) ── */
.sparkle-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    animation: sparkle-fly 0.7s ease-out forwards;
}

@keyframes sparkle-fly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }

    60% {
        opacity: 0.8;
        transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(0.7);
    }

    100% {
        opacity: 0;
        transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(0);
    }
}

/* ── Processing status panel (inside .ai-chat-panel, full width) ── */
.processing-panel {
    display: none;
    box-sizing: border-box;
}

.processing-panel.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #161a22 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 150;
    padding: 24px;
    animation: processingPanelIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
}

@media (max-width: 768px) {
    .processing-panel.open {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100dvh;
        height: 100vh;
        z-index: 9999999;
        padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    }
}

/* Header */
.processing-panel-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    margin-bottom: 24px;
    flex-shrink: 0;
    background: transparent;
}

.processing-panel-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.processing-panel-header-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.processing-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.processing-panel-title svg {
    width: 20px;
    height: 20px;
    color: #3b82f6;
    flex-shrink: 0;
}

.processing-panel-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.processing-panel-close-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.15));
    border-radius: 50%;
    background: var(--hover-overlay, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #ffffff);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.processing-panel-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
    transform: rotate(90deg);
}

/* File list */
.processing-panel-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px;
}

.processing-panel-list:empty::after {
    content: 'Sin archivos en proceso';
    display: block;
    text-align: center;
    padding: 40px 14px;
    color: var(--text-muted, #777);
    font-size: 1.1rem;
    font-style: italic;
}

/* Individual file item */
.processing-panel-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.processing-panel-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.processing-panel-item-icon {
    font-size: 1.8rem;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1;
    flex-shrink: 0;
}

.processing-panel-item.done .processing-panel-item-icon {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

.processing-panel-item.error .processing-panel-item-icon {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.processing-panel-item-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.processing-panel-item.done .processing-panel-item-name {
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}

/* Processing status with animated dots */
.processing-panel-item-status {
    grid-column: 1 / 3;
    grid-row: 2;
    font-size: 0.9rem;
    color: var(--text-muted, #9ca3af);
    margin-left: 0;
    line-height: 1.4;
}

.processing-panel-item-status.processing {
    color: #34d399;
    font-weight: 600;
}

.processing-dots::after {
    content: '';
    animation: processingDots 1.5s steps(4, end) infinite;
}

@keyframes processingDots {
    0% {
        content: '';
    }
    25% {
        content: '.';
    }
    50% {
        content: '..';
    }
    75% {
        content: '...';
    }
    100% {
        content: '';
    }
}

/* Completed item: actions */
.processing-panel-item-actions {
    grid-column: 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.processing-panel-item-view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary, #cccccc);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.processing-panel-item-view:hover {
    background: var(--ai-accent-light, rgba(59, 130, 246, 0.15));
    border-color: var(--ai-accent, #3b82f6);
    color: var(--accent-primary, #60a5fa);
    transform: scale(1.05);
}

.processing-panel-item-view:active {
    transform: scale(0.95);
}

/* Dismiss button (red X circle) */
.processing-panel-item-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted, #777777);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.processing-panel-item-dismiss:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.processing-panel-item-dismiss:active {
    transform: scale(0.9);
}

/* Panel slide-in animation */
@keyframes processingPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Light theme overrides */
[data-theme^="light"] .processing-panel {
    background: #f5f5fa !important;
}

[data-theme^="light"] .processing-panel-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme^="light"] .processing-panel-item:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

[data-theme^="light"] .processing-panel-close-btn {
    border-color: var(--border-medium, rgba(0, 0, 0, 0.12));
    background: var(--hover-overlay, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, #333333);
}

/* Chat messages container (shared) */
.ai-chat-messages,
#chatMessages {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    /* always reserve scrollbar lane to avoid layout shift */
    padding: 22px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;

}



/* Mobile (chat-only): keep scrolling but hide the scrollbar UI */
html[data-platform="mobile"] #mobileChatRoot .ai-chat-messages,
html[data-platform="mobile"] #mobileChatRoot #panelChatMessages {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge legacy */
    -webkit-overflow-scrolling: touch;
}

html[data-platform="mobile"] #mobileChatRoot .ai-chat-messages::-webkit-scrollbar,
html[data-platform="mobile"] #mobileChatRoot #panelChatMessages::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Chat input textarea (Panel 1D): keep scrolling but hide scrollbar UI
   Applies to collapsed + expanded states (.is-expanded changes margins, not overflow). */
.ai-chat-panel .ai-chat-input-container textarea,
.ai-chat-panel textarea#panelChatInput {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge legacy */
}

.ai-chat-panel .ai-chat-input-container textarea::-webkit-scrollbar,
.ai-chat-panel textarea#panelChatInput::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

html[data-platform="mobile"] #mobileChatApp,
html[data-platform="mobile"] body {
    overflow: hidden;
}

/* Mobile: ensure hamburger menu overlays the chat (no clipping, higher stacking) */
html[data-platform="mobile"] #mobileChatRoot .ai-chat-panel {
    overflow: visible;
    /* allow toolbar panel to escape */
}

#mobileChatRoot .ai-chat-header,
html[data-platform="mobile"] #mobileChatRoot .ai-chat-header {
    overflow: visible !important;
    position: relative !important;
    z-index: 200 !important;
    order: 10;
    border-bottom: none;
    border-top: 1px solid var(--ai-border-light);
    margin-bottom: 0;
    margin-top: 0;
    background: var(--bg-medium, #1e2430);
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    padding: 12px 10px 4px 10px !important;
    gap: 6px !important;
}

#mobileChatRoot .gam-topbar-progress,
.ai-chat-header .gam-topbar-progress {
    bottom: auto !important;
    top: -8px !important;
}

html[data-platform="mobile"] #mobileChatRoot .ai-chat-header-left,
html[data-platform="mobile"] #mobileChatRoot .ai-chat-header-center,
html[data-platform="mobile"] #mobileChatRoot .ai-chat-header .ai-chat-actions {
    display: contents !important;
}

/* Force header mode group and gamification badge on top of the immersive backdrop canvas on mobile */
html[data-platform="mobile"] #mobileChatRoot .ai-chat-header .header-mode-group,
html[data-platform="mobile"] #mobileChatRoot .ai-chat-header .gam-header-badge {
    position: relative !important;
    z-index: 5 !important;
}

@media (max-width: 768px) {
    #mobileChatRoot .ai-chat-header .header-mode-group,
    #mobileChatRoot .ai-chat-header .gam-header-badge {
        position: relative !important;
        z-index: 5 !important;
    }
}

.ai-chat-bookmark-btn-mobile {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    transition: transform 0.2s ease;
}

.ai-chat-bookmark-btn-mobile:hover,
.ai-chat-bookmark-btn-mobile:active {
    transform: scale(1.15);
}

/* ── Hand preference: invert mobile bottom bar ── */
html[data-hand="left"] #mobileChatRoot .ai-chat-header {
    flex-direction: row-reverse !important;
}

/* Swap hamburger ≡ and three-dots ⋯ so hamburger is on the far left */
html[data-hand="left"] #mobileChatRoot .ai-chat-actions {
    flex-direction: row-reverse !important;
}



html[data-platform="mobile"] #mobileChatRoot #toolbarMenu {
    position: relative;
    z-index: 50000;
}

html[data-platform="mobile"] #mobileChatRoot #toolbarMenuPanel {
    /* Mobile: fullscreen main menu (the hamburger is behind it) */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    z-index: 50000;
}

/* Mobile chat: particle strips on both sides (like 1D desktop gaps) */
/* Use position: fixed so they cover the entire viewport regardless of container */
html[data-platform="mobile"] #mobileChatRoot .ai-chat-side-particles-canvas {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 14px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

html[data-platform="mobile"] #mobileChatRoot .ai-chat-side-particles-canvas--left {
    left: 0;
}

html[data-platform="mobile"] #mobileChatRoot .ai-chat-side-particles-canvas--right {
    right: 0;
}

/* In the 1D panel, the mode banner should look like "glass" and actually blur
   something: we overlap it over the scrollable messages area. */
.ai-chat-panel .ai-mode-banner {
    z-index: 5;
    border-radius: 0;
    /* Sin margen arriba/izquierda */
    margin-top: 0;
    margin-left: 1px;
    margin-right: 15px;
    /* escritorio */
    margin-bottom: 0;
}

/* 1D: make the banner cover full width so the border doesn't peek behind it.
   Keep a right "safe area" via padding to avoid touching the scrollbar. */
.oneD-ai-chat .ai-chat-panel .ai-mode-banner {
    /* Leave 1px on both sides so the animated border is visible */
    margin-left: 1px;
    /* Also reserve space for the scrollbar so it stays visible above the banner */
    margin-right: calc(var(--ai-chat-scrollbar-safe, 15px) + 1px);
    box-sizing: border-box;
}

/* 1D: reserve the scrollbar strip on desktop; mobile gets 0 */
.oneD-ai-chat .ai-chat-panel {
    --ai-chat-scrollbar-safe: 15px;
}

html[data-platform="mobile"] .oneD-ai-chat .ai-chat-panel {
    --ai-chat-scrollbar-safe: 0px;
}

/* Móvil: sin margen derecho */
html[data-platform="mobile"] .ai-chat-panel .ai-mode-banner {
    margin-right: 0;
}

.ai-chat-panel .ai-chat-header {
    /* Evita la “banda” entre header y banner: quitamos el borde inferior del header
       (el banner ya tiene su propio borde/sombra glass). */
    border-bottom: none;
    margin-bottom: 0;
}



.ai-chat-panel #panelChatMessages {
    position: relative;
    z-index: 1;
    padding-top: 25px;
}

#chatMessages {
    background: var(--ai-bg-darker);
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Mode gradient overlay - flows from mode color to transparent */
.ai-chat-messages::before,
#chatMessages::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    background: linear-gradient(to bottom,
            var(--mode-color, #3b82f6) 0%,
            transparent 100%);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    transition: all 0.5s ease;
}

.ai-chat-messages .chat-message,
#chatMessages .chat-message {
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    margin-top: -12px;
}

/* Chat input (shared styles) */
.ai-chat-input-container,
.ai-chat-input-row {
    display: flex;
    align-items: flex-end;
    /* keep bottom aligned so textarea grows upward */
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--ai-border-light);
}

.ai-chat-input-row {
    padding: 0;
    border-top: none;
}

.ai-chat-input-container {
    position: relative;
    overflow: visible;
    z-index: 10;
    /* stack above chat messages so textarea can shift upward */
}

.ai-chat-input-container>button {
    position: relative;
    z-index: 1;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0ms linear 160ms;
}

/* While textarea is expanded, push side buttons behind it */
.ai-chat-input-container.is-expanded>button {
    z-index: 0;
}

/* Modal input row: hide send button while expanded/focused */
.ai-chat-input-row>button {
    transition: opacity 160ms ease, transform 160ms ease, visibility 0ms linear 160ms;
}

.ai-chat-input-row.is-expanded>button {
    z-index: 0;
}

.ai-chat-input-row input,
.ai-chat-input-row textarea,
.ai-chat-input-container input,
.ai-chat-input-container textarea {
    flex: 1;
    background: var(--input-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--ai-border);
    border-radius: 6px;
    color: var(--ai-text);
    font-size: 15px;
    padding: 8px 12px;
    outline: none;
    transition: all 0.2s ease;
}

.ai-chat-input-row input:focus,
.ai-chat-input-row textarea:focus,
.ai-chat-input-container input:focus,
.ai-chat-input-container textarea:focus {
    background: var(--bg-medium) !important;
    border-color: var(--ai-accent);
    box-shadow: 0 0 0 2px var(--ai-accent-light), 0 4px 16px rgba(0, 0, 0, 0.15);
}

.ai-chat-input-row input::placeholder,
.ai-chat-input-row textarea::placeholder,
.ai-chat-input-container input::placeholder,
.ai-chat-input-container textarea::placeholder {
    color: #666;
    font-size: 12px;
}

.ai-chat-input-container textarea,
.ai-chat-input-row textarea {
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
    height: 52px;
    /* collapsed */
    min-height: 52px;
    position: relative;
    z-index: 1;
    transform: scaleX(1);
    transform-origin: center bottom;
    will-change: transform, opacity;
    /* First grow up, then widen slightly */
    transition:
        height 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 0ms,
        transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms,
        margin-left 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms,
        margin-right 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms,
        box-shadow 200ms ease 0ms,
        background 200ms ease 0ms,
        border-color 200ms ease 0ms;
}

.ai-chat-input-container.force-collapsed textarea,
.ai-chat-input-row.force-collapsed textarea {
    /* Colapsar incluso si el textarea sigue enfocado (override de :focus) */
    height: 52px !important;
    min-height: 52px;
}

.ai-chat-input-container.force-collapsed textarea:focus,
.ai-chat-input-row.force-collapsed textarea:focus {
    height: 52px !important;
    transform: scaleX(1) !important;
}

.ai-chat-input-container textarea:focus,
.ai-chat-input-row textarea:focus {
    height: 140px;
    /* ~3x */
    transform: scaleX(1) translateY(-60px);
    /* shift up above button row (52px btn + 8px gap) */
    z-index: 150;
}

.ai-chat-input-container.has-focus-pills textarea:focus,
.ai-chat-input-row.has-focus-pills textarea:focus {
    transform: scaleX(1) translateY(-104px);
}

/* Dynamic expansion logic (Universal) */
/* 1. Base Container Adjustments */
.ai-chat-input-container {
    min-height: 52px;
}

.ai-chat-input-container textarea,
.ai-chat-input-row textarea {
    box-sizing: border-box !important;
    height: 52px !important;
    min-height: 52px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Keep transitions smooth */
    transition: height 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 0ms,
        transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms,
        margin-left 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms,
        margin-right 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms,
        box-shadow 200ms ease 0ms,
        background 200ms ease 0ms,
        border-color 200ms ease 0ms !important;
}

/* 2. Attach button base (Unexpanded) */
.ai-chat-input-container .ai-btn-attach,
.ai-chat-input-row .ai-btn-attach {
    box-sizing: border-box !important;
    height: 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    flex: 0 0 auto !important;
    position: relative;
    /* Revert in case of overrides */
    transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms, transform 160ms ease, background 0.2s, border-color 0.2s, color 0.2s !important;
}

/* 3. Send button hidden base (Unexpanded) */
.ai-chat-input-container .ai-btn-send,
.ai-chat-input-row .ai-btn-send {
    box-sizing: border-box !important;
    height: 52px !important;
    width: 0px !important;
    min-width: 0px !important;
    padding: 0 !important;
    border-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-left: -8px !important;
    /* Cancels the flex gap! */
    flex: 0 0 auto !important;
    position: relative;
    /* Revert absolute */
    pointer-events: none !important;
    transition: width 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms,
        margin-left 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms,
        opacity 200ms ease 90ms,
        transform 160ms ease,
        padding 240ms ease 90ms,
        border-width 240ms ease 90ms !important;
}

/* 4. EXPANDED STATE: Textarea expands to overlay perfectly */
.ai-chat-input-container.is-expanded textarea,
.ai-chat-input-row.is-expanded textarea,
.ai-chat-input-container.is-expanded textarea:focus,
.ai-chat-input-row.is-expanded textarea:focus {
    z-index: 200 !important;
    /* Make it taller while keeping the exact same position relative to buttons */
    height: 136px !important;
    transform: scaleX(1) translateY(-60px) !important;
    /* Flex formula to perfectly overlap the container width: -(button width + gap) */
    margin-left: calc(-50% - 4px) !important;
    margin-right: calc(-50% - 4px) !important;
}

.ai-chat-input-container.is-expanded.has-focus-pills textarea,
.ai-chat-input-row.is-expanded.has-focus-pills textarea,
.ai-chat-input-container.is-expanded.has-focus-pills textarea:focus,
.ai-chat-input-row.is-expanded.has-focus-pills textarea:focus {
    transform: scaleX(1) translateY(-104px) !important;
}

/* 5. Expand the buttons to fill the gap */
.ai-chat-input-container.is-expanded .ai-btn-attach,
.ai-chat-input-row.is-expanded .ai-btn-attach {
    width: calc(50% - 4px) !important;
}

.ai-chat-input-container.is-expanded .ai-btn-send,
.ai-chat-input-row.is-expanded .ai-btn-send {
    width: calc(50% - 4px) !important;
    margin-left: 0 !important;
    /* Restore gap */
    opacity: 1 !important;
    border-width: 1px !important;
    pointer-events: auto !important;
}

/* 6. Bring buttons above the rest */
.ai-chat-input-container.is-expanded>button,
.ai-chat-input-row.is-expanded>button {
    z-index: 100 !important;
}

/* ── 7. ATTACHMENT-AWARE SEND BUTTON ──
   When files are attached (.has-attachments), show the send button
   as a compact 52×52 square next to attach — even without expanding.
   The textarea shrinks to accommodate. */
.ai-chat-input-container.has-attachments:not(.is-expanded) .ai-btn-send {
    width: 52px !important;
    min-width: 52px !important;
    opacity: 1 !important;
    border-width: 1px !important;
    pointer-events: auto !important;
    margin-left: 0 !important;
}

.ai-chat-input-container.has-attachments:not(.is-expanded) textarea {
    /* Shrink to accommodate the send button (52px + 8px gap) */
    flex: 1 1 0 !important;
}


.ai-chat-input-container button,
.ai-btn-send {
    background: var(--ai-accent-medium);
    border: 1px solid var(--ai-accent);
    border-radius: 10px;
    color: var(--ai-accent);
    font-size: 16px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Panel send button should match side buttons (desktop) */
.ai-chat-input-container .ai-btn-send {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 0;
    font-size: 18px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-input-container button:hover,
.ai-btn-send:hover {
    background: var(--ai-accent-medium);
    transform: translateY(-1px);
}

.ai-chat-input-container button:disabled,
.ai-btn-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}


/* Focus RAG routing pills container inside expanded input area */
.chat-focus-container {
    position: absolute;
    bottom: 56px;
    left: 8px;
    right: 8px;
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 250;
    pointer-events: auto;
}

.ai-chat-input-container.is-expanded .chat-focus-container {
    display: flex;
}

/* Add custom padding to expanded textarea to keep text from scrolling behind pills */
.ai-chat-input-container.is-expanded textarea,
.ai-chat-input-row.is-expanded textarea {
    padding-bottom: 8px !important;
}

.chat-focus-header {
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    padding: 0 4px;
}

.chat-focus-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ai-text-muted, #888);
}

.chat-focus-info-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.chat-focus-info-btn {
    background: none !important;
    border: none !important;
    color: var(--color-info, #2196f3) !important;
    cursor: pointer;
    padding: 2px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.8;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
}

.chat-focus-info-btn:hover {
    transform: scale(1.1);
    opacity: 1;
}


.chat-focus-pills {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 1px 2px 2px;
    scrollbar-width: none; /* Firefox */
}

.chat-focus-pills::-webkit-scrollbar {
    display: none; /* Safari/Chrome */
}

.ai-chat-input-container .chat-focus-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--bg-medium, rgba(120, 120, 120, 0.05)) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    white-space: nowrap;
}

.chat-focus-tooltip {
    position: absolute;
    bottom: 24px;
    right: 0;
    left: auto;
    transform: translateY(4px);
    width: 260px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    background: var(--bg-medium, rgba(30, 30, 45, 0.95)) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--ai-border, rgba(255, 255, 255, 0.1)) !important;
    color: var(--ai-text, #fff) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    z-index: 300;
    text-align: left;
}

.chat-focus-info-wrapper:hover .chat-focus-tooltip,
.chat-focus-info-wrapper.active .chat-focus-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.chat-focus-pill[data-focus="topics"] {
    border: 1px solid color-mix(in srgb, var(--color-info, #2196f3) 30%, var(--ai-border, rgba(255, 255, 255, 0.15))) !important;
    color: color-mix(in srgb, var(--color-info, #2196f3) 70%, var(--ai-text-muted, #888)) !important;
}
.chat-focus-pill[data-focus="topics"]:hover {
    background: color-mix(in srgb, var(--color-info, #2196f3) 8%, transparent) !important;
    color: var(--color-info, #2196f3) !important;
    border-color: var(--color-info, #2196f3) !important;
    transform: translateY(-1px);
}

.chat-focus-pill[data-focus="calendar"] {
    border: 1px solid color-mix(in srgb, var(--accent-primary, #ffc107) 30%, var(--ai-border, rgba(255, 255, 255, 0.15))) !important;
    color: color-mix(in srgb, var(--accent-primary, #ffc107) 70%, var(--ai-text-muted, #888)) !important;
}
.chat-focus-pill[data-focus="calendar"]:hover {
    background: color-mix(in srgb, var(--accent-primary, #ffc107) 8%, transparent) !important;
    color: var(--accent-primary, #ffc107) !important;
    border-color: var(--accent-primary, #ffc107) !important;
    transform: translateY(-1px);
}

.chat-focus-pill[data-focus="tasks"] {
    border: 1px solid color-mix(in srgb, var(--color-success, #4caf50) 30%, var(--ai-border, rgba(255, 255, 255, 0.15))) !important;
    color: color-mix(in srgb, var(--color-success, #4caf50) 70%, var(--ai-text-muted, #888)) !important;
}
.chat-focus-pill[data-focus="tasks"]:hover {
    background: color-mix(in srgb, var(--color-success, #4caf50) 8%, transparent) !important;
    color: var(--color-success, #4caf50) !important;
    border-color: var(--color-success, #4caf50) !important;
    transform: translateY(-1px);
}

.chat-focus-pill[data-focus="updates"] {
    border: 1px solid color-mix(in srgb, var(--paseo-accent, #ff5722) 30%, var(--ai-border, rgba(255, 255, 255, 0.15))) !important;
    color: color-mix(in srgb, var(--paseo-accent, #ff5722) 70%, var(--ai-text-muted, #888)) !important;
}
.chat-focus-pill[data-focus="updates"]:hover {
    background: color-mix(in srgb, var(--paseo-accent, #ff5722) 8%, transparent) !important;
    color: var(--paseo-accent, #ff5722) !important;
    border-color: var(--paseo-accent, #ff5722) !important;
    transform: translateY(-1px);
}

.chat-focus-pill[data-focus="emails"] {
    border: 1px solid color-mix(in srgb, var(--accent-secondary, #e91e63) 30%, var(--ai-border, rgba(255, 255, 255, 0.15))) !important;
    color: color-mix(in srgb, var(--accent-secondary, #e91e63) 70%, var(--ai-text-muted, #888)) !important;
}
.chat-focus-pill[data-focus="emails"]:hover {
    background: color-mix(in srgb, var(--accent-secondary, #e91e63) 8%, transparent) !important;
    color: var(--accent-secondary, #e91e63) !important;
    border-color: var(--accent-secondary, #e91e63) !important;
    transform: translateY(-1px);
}

/* Color-coded states for each pill using theme-compatible color-mix */
.chat-focus-pill.active {
    border-width: 2px !important;
    padding: 2px 7px !important;
}

.chat-focus-pill[data-focus="topics"].active {
    background: color-mix(in srgb, var(--color-info, #2196f3) 15%, transparent) !important;
    border-color: var(--color-info, #2196f3) !important;
    color: var(--color-info, #2196f3) !important;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.2) !important;
}

.chat-focus-pill[data-focus="calendar"].active {
    background: color-mix(in srgb, var(--accent-primary, #ffc107) 15%, transparent) !important;
    border-color: var(--accent-primary, #ffc107) !important;
    color: var(--accent-primary, #ffc107) !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.2) !important;
}

.chat-focus-pill[data-focus="tasks"].active {
    background: color-mix(in srgb, var(--color-success, #4caf50) 15%, transparent) !important;
    border-color: var(--color-success, #4caf50) !important;
    color: var(--color-success, #4caf50) !important;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.2) !important;
}

.chat-focus-pill[data-focus="updates"].active {
    background: color-mix(in srgb, var(--paseo-accent, #ff5722) 15%, transparent) !important;
    border-color: var(--paseo-accent, #ff5722) !important;
    color: var(--paseo-accent, #ff5722) !important;
    box-shadow: 0 0 8px rgba(255, 87, 34, 0.2) !important;
}

.chat-focus-pill[data-focus="emails"].active {
    background: color-mix(in srgb, var(--accent-secondary, #e91e63) 15%, transparent) !important;
    border-color: var(--accent-secondary, #e91e63) !important;
    color: var(--accent-secondary, #e91e63) !important;
    box-shadow: 0 0 8px rgba(233, 30, 99, 0.2) !important;
}

/* Attach button */
.ai-btn-attach {
    background: transparent;
    border: 2px dashed var(--ai-border);
    border-radius: 10px;
    width: 52px;
    height: 52px;
    min-width: 52px;
    color: var(--ai-text-muted);
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2px;
}

.ai-btn-attach:hover {
    border-color: var(--ai-accent);
    color: var(--ai-accent);
    background: var(--ai-accent-light);
}

.ai-btn-attach:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Chat Attachment Modal — size/position set by JS to cover the chat panel */
.chat-attachment-modal {
    z-index: 100040;
    padding: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    background: transparent !important;
    /* Remove backdrop tint if any */
    transition: none !important;
    animation: none !important;
}

.chat-attachment-modal[data-chat-scoped="true"] {
    border-radius: 12px;
    overflow: hidden;
}

.chat-attachment-dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;

    /* Remove ANY texture, glassmorphism, background images or shadows */
    background: var(--ai-bg-dark) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;

    /* Remove all transitions / slide effects */
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Ensure no transitions when it opens (.show state) */
.chat-attachment-modal.show,
.chat-attachment-modal.show .chat-attachment-dialog {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Mobile touch scrolling for attachment options */
html[data-platform="mobile"] .chat-attachment-modal .chat-attachment-options {
    -webkit-overflow-scrolling: touch;
}

.chat-attachment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ai-border);
}

.chat-attachment-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ai-text);
}

.chat-attachment-header .close-btn {
    background: transparent;
    border: none;
    color: var(--ai-text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.chat-attachment-header .close-btn:hover {
    color: var(--ai-accent);
}

.chat-attachment-options {
    padding: 16px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
    box-sizing: border-box;
}

.chat-attachment-options > .chat-attachment-option {
    flex: 1;
    min-height: 72px;
}

.chat-attachment-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: transparent;
    border: 1px solid var(--ai-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.chat-attachment-option:hover {
    border-color: var(--ai-accent);
    background-color: var(--ai-accent-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.chat-attachment-option .option-icon {
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    margin-bottom: 0;
}

.chat-attachment-option .option-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-attachment-option .option-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--ai-text);
    margin-bottom: 0;
}

.chat-attachment-option .option-hint {
    font-size: 13px;
    color: var(--ai-text-muted);
}

/* ════════════════════════════════════════════════════════════════
   DRAG & DROP OVERLAY - Para el modal de attachments
   ════════════════════════════════════════════════════════════════ */

.chat-attachment-dialog {
    position: relative;
}

.chat-attachment-dialog.dragging {
    border-color: var(--ai-accent, #4f46e5);
    box-shadow: 0 0 0 2px var(--ai-accent, #4f46e5), 0 8px 32px rgba(79, 70, 229, 0.3);
}

.chat-attachment-drop-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.95) 0%, rgba(99, 102, 241, 0.95) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: none;
}

.chat-attachment-drop-overlay.active {
    opacity: 1;
    visibility: visible;
}

.drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: white;
    animation: dropPulse 1.5s ease-in-out infinite;
}

.drop-overlay-icon {
    font-size: 48px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    animation: dropBounce 0.6s ease infinite alternate;
}

.drop-overlay-text {
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Show close button at bottom on mobile, hide on desktop */
.chat-attachment-footer-mobile {
    display: none;
    padding: 16px 20px;
    border-top: 1px solid var(--ai-border);
    justify-content: center;
    background: var(--ai-bg-dark);
}

.btn-close-modal-bottom {
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid var(--ai-border);
    border-radius: 12px;
    color: var(--ai-text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.btn-close-modal-bottom:hover {
    border-color: var(--ai-accent);
    background-color: var(--ai-accent-light);
}

/* Platform specific visibility for close buttons and styling */
html[data-platform="mobile"] .chat-attachment-modal[data-chat-scoped="true"] {
    border-radius: 0 !important;
}

html[data-platform="mobile"] .chat-attachment-header .btn-close-modal {
    display: none !important;
}

html[data-platform="mobile"] .chat-attachment-footer-mobile {
    display: flex !important;
    padding: 10px 16px !important;
}

html[data-platform="mobile"] .chat-attachment-options {
    gap: 6px !important;
    padding: 10px 16px 10px 16px !important;
}

html[data-platform="mobile"] .chat-attachment-options > .chat-attachment-option {
    min-height: 46px !important;
}

html[data-platform="mobile"] .chat-attachment-option {
    padding: 8px 14px !important;
    border-radius: 8px !important;
}

html[data-platform="mobile"] .chat-attachment-option .option-icon {
    width: 28px !important;
}

html[data-platform="mobile"] .chat-attachment-option .option-icon svg {
    width: 24px !important;
    height: 24px !important;
}

html[data-platform="mobile"] .chat-attachment-option .option-text {
    font-size: 14px !important;
}

html[data-platform="mobile"] .chat-attachment-option .option-hint {
    font-size: 11px !important;
}

html[data-platform="mobile"] .btn-close-modal-bottom {
    padding: 8px 16px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
}

@media (max-width: 768px) {
    .chat-attachment-modal[data-chat-scoped="true"] {
        border-radius: 0 !important;
    }
    .chat-attachment-header .btn-close-modal {
        display: none !important;
    }
    .chat-attachment-footer-mobile {
        display: flex !important;
        padding: 10px 16px !important;
    }
    .chat-attachment-options {
        gap: 6px !important;
        padding: 10px 16px 10px 16px !important;
    }
    .chat-attachment-options > .chat-attachment-option {
        min-height: 46px !important;
    }
    .chat-attachment-option {
        padding: 8px 14px !important;
        border-radius: 8px !important;
    }
    .chat-attachment-option .option-icon {
        width: 28px !important;
    }
    .chat-attachment-option .option-icon svg {
        width: 24px !important;
        height: 24px !important;
    }
    .chat-attachment-option .option-text {
        font-size: 14px !important;
    }
    .chat-attachment-option .option-hint {
        font-size: 11px !important;
    }
    .btn-close-modal-bottom {
        padding: 8px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
}

@keyframes dropPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

@keyframes dropBounce {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-8px);
    }
}

/* Voice Recorder Modal */
.voice-recorder-modal .dialog {
    max-width: 360px;
}

.voice-recorder-dialog {
    background: var(--ai-bg);
    border: 1px solid var(--ai-border);
    border-radius: 16px;
    overflow: hidden;
}

.voice-recorder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ai-border);
}

.voice-recorder-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ai-text);
}

.voice-recorder-body {
    padding: 32px 20px;
    text-align: center;
}

.voice-recorder-visualizer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

.voice-recorder-icon {
    font-size: 64px;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.voice-recorder-waves {
    display: flex;
    gap: 4px;
    height: 32px;
    align-items: center;
}

.voice-recorder-waves span {
    width: 4px;
    height: 8px;
    background: var(--ai-accent);
    border-radius: 2px;
    transition: height 0.1s ease;
}

.voice-recorder-waves.recording span {
    animation: voice-wave 0.5s ease-in-out infinite;
}

.voice-recorder-waves.recording span:nth-child(1) {
    animation-delay: 0s;
}

.voice-recorder-waves.recording span:nth-child(2) {
    animation-delay: 0.1s;
}

.voice-recorder-waves.recording span:nth-child(3) {
    animation-delay: 0.2s;
}

.voice-recorder-waves.recording span:nth-child(4) {
    animation-delay: 0.1s;
}

.voice-recorder-waves.recording span:nth-child(5) {
    animation-delay: 0s;
}

@keyframes voice-wave {

    0%,
    100% {
        height: 8px;
    }

    50% {
        height: 28px;
    }
}

.voice-recorder-timer {
    font-size: 36px;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--ai-text);
    margin-bottom: 8px;
}

.voice-recorder-status {
    font-size: 14px;
    color: var(--ai-text-muted);
}

.voice-recorder-status.error {
    color: var(--color-error, #ef4444);
}

.voice-recorder-controls {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--ai-border);
    justify-content: center;
}

.voice-recorder-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.voice-recorder-btn.record {
    background: var(--color-error, #ef4444);
    color: white;
}

.voice-recorder-btn.record:hover {
    background: #dc2626;
    /*transform: scale(1.05);*/
}

.voice-recorder-btn.stop {
    background: var(--color-warning, #f59e0b);
    color: white;
}

.voice-recorder-btn.stop:hover {
    background: #d97706;
}

.voice-recorder-btn.send {
    background: var(--ai-accent);
    color: white;
}

.voice-recorder-btn.send:hover {
    background: var(--ai-accent-hover);
    /*transform: scale(1.05);*/
}

.voice-recorder-btn.discard {
    background: rgba(255, 255, 255, 0.1);
    color: var(--ai-text-muted);
}

.voice-recorder-btn.discard:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--color-error, #ef4444);
}

.voice-recorder-btn.hidden {
    display: none;
}

.voice-recorder-btn .btn-icon {
    font-size: 18px;
}

/* Voice Button (next to attach) */
.ai-btn-voice {
    box-sizing: border-box !important;
    height: 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    flex: 0 0 auto !important;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: transform 160ms ease, background 0.2s, color 0.2s, box-shadow 0.2s, width 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2px;
}

.ai-btn-voice:hover {
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.ai-btn-voice:active {
    transform: scale(0.95);
}

/* Hide voice button when chat input container is expanded */
.ai-chat-input-container.is-expanded .ai-btn-voice,
.ai-chat-input-row.is-expanded .ai-btn-voice {
    display: none !important;
}

/* Immersive Voice Recorder Overlay */
.immersive-voice-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    /*background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);*/
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.immersive-voice-overlay.show {
    opacity: 1;
}

.immersive-voice-overlay canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(1px);
}

.immersive-voice-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

/* 🎤 Estado de preparación */
.immersive-voice-status {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.immersive-voice-status.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

/* 🎤 Contenedor del contenido listo (todo junto) */
.immersive-voice-ready-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.immersive-voice-ready-content.hidden-fade {
    opacity: 0;
    transform: translateY(15px);
}

.immersive-voice-ready-content.visible-fade {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.immersive-voice-ready-content.fade-out {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 🎤 Texto "Te escucho" */
.immersive-voice-listening {
    position: absolute;
    top: calc(50% - 130px);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
    z-index: 10;
}

.immersive-voice-listening.hidden-fade {
    opacity: 0;
    transform: translateY(15px);
}

.immersive-voice-listening.visible-fade {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.immersive-voice-listening.fade-out {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.immersive-voice-hint {
    position: absolute;
    top: calc(50% + 100px);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    max-width: 300px;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.immersive-voice-hint.hidden-fade {
    opacity: 0;
    transform: translateY(15px);
}

.immersive-voice-hint.visible-fade {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.immersive-voice-hint.fade-out {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.immersive-voice-hint.error {
    color: var(--color-error, #ef4444);
}

/* 🤖 Estado Asistente Pensando / Hablando */
.immersive-voice-assistant {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 10;
}

.immersive-voice-assistant.hidden-fade {
    opacity: 0;
    transform: translateY(-30%);
    pointer-events: none;
}

.immersive-voice-assistant.visible-fade {
    opacity: 1;
    transform: translateY(-50%);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.immersive-voice-assistant.fade-out {
    opacity: 0;
    transform: translateY(-70%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.immersive-assistant-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    cursor: pointer;
}

.immersive-assistant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.immersive-assistant-avatar .default-ai-icon {
    font-size: 40px;
}

.immersive-assistant-dots {
    position: absolute;
    bottom: -35px;
    /* Por debajo de la caja principal del avatar */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
    height: 24px;
}

.immersive-assistant-status {
    position: absolute;
    bottom: -65px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 13.5px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
}

.immersive-assistant-status.visible {
    opacity: 1;
}

.immersive-assistant-status.updating {
    opacity: 0;
    transform: translate(-50%, 5px);
}

.immersive-assistant-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    animation: immersiveDotBounce 1.4s infinite ease-in-out both;
}

.immersive-assistant-dots .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.immersive-assistant-dots .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.immersive-assistant-dots .dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes immersiveDotBounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes immersiveSpeakerWave {
    0% {
        width: 22px;
        height: 22px;
        opacity: 0.6;
    }

    100% {
        width: 44px;
        height: 44px;
        opacity: 0;
    }
}

.immersive-voice-cancel {
    position: fixed;
    bottom: 40px;
    left: 50%;
    margin-left: -80px;
    /* Half of button width instead of transform */
    width: 160px;
    padding: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    /* Isolate from canvas animations */
    will-change: opacity;
    contain: layout style;
    z-index: 10001;
}

.immersive-voice-cancel:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--color-error, #ef4444);
}

.immersive-voice-maximize {
    position: fixed;
    bottom: 90px;
    left: 50%;
    margin-left: -80px;
    width: 160px;
    padding: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    will-change: opacity;
    contain: layout style;
    z-index: 10001;
}

.immersive-voice-maximize:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    color: var(--accent-primary, #6366f1);
}

/* Fade animations for immersive voice */
.immersive-voice-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.immersive-voice-timer.hidden-fade,
.immersive-voice-hint.hidden-fade {
    opacity: 0;
    transform: translateY(20px);
}

.immersive-voice-timer.visible-fade,
.immersive-voice-hint.visible-fade {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.immersive-voice-timer.fade-out,
.immersive-voice-hint.fade-out,
.immersive-voice-cancel.fade-out {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 🎤 Light theme: dark text for voice overlay (blobs are darker on light bg) */
[data-theme^="light"] .immersive-voice-status {
    color: rgba(0, 0, 0, 0.85);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5);
}

[data-theme^="light"] .immersive-voice-listening {
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.4);
}

[data-theme^="light"] .immersive-voice-timer {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
}

[data-theme^="light"] .immersive-voice-hint {
    color: rgba(0, 0, 0, 0.7);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.5);
}

[data-theme^="light"] .immersive-assistant-dots .dot {
    background-color: rgba(0, 0, 0, 0.7);
}

[data-theme^="light"] .immersive-voice-cancel {
    border-color: rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.5);
    color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

[data-theme^="light"] .immersive-voice-cancel:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: var(--color-error, #dc2626);
}

[data-theme^="light"] .immersive-voice-maximize {
    border-color: rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.5);
    color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

[data-theme^="light"] .immersive-voice-maximize:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    color: var(--accent-primary, #4f46e5);
}

/* Fly to chat animation */
.immersive-voice-overlay.fly-to-chat {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.immersive-voice-overlay canvas.fly-to-chat {
    transform: translateX(-50vw) scale(0.15);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.5s ease 0.5s;
}

/* Voice Message Bubble (animated canvas) */
.voice-message-bubble {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: visible;
}

.voice-message-link {
    display: block;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.voice-message-link:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

.voice-message-canvas {
    display: block;
    border-radius: 16px;
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 280 / 180;
    background: transparent;
}

.voice-message-label {
    text-align: center;
    font-size: 13px;
    color: var(--ai-text-muted, rgba(255, 255, 255, 0.6));
    margin-top: 8px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ═══ Floating Words Overlay (transcription reveal) ═══ */
.voice-message-bubble {
    position: relative;
}

.voice-words-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 28px;
    /* above the label */
    overflow: hidden;
    pointer-events: none;
    border-radius: 16px;
    z-index: 5;
    /* above the canvas + link */
}

.voice-word {
    position: absolute;
    bottom: -20px;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    text-shadow:
        0 1px 6px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(100, 120, 255, 0.35);
    opacity: 0;
    will-change: transform, opacity;
    left: var(--vw-x, 50%);
    font-size: var(--vw-size, 14px);
    transform: translateX(-50%) rotate(var(--vw-rot, 0deg));
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* The rise animation */
    animation: voiceWordRise var(--vw-duration, 2.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--vw-delay, 0s);
}

@keyframes voiceWordRise {
    0% {
        opacity: 0;
        bottom: -20px;
        transform: translateX(-50%) rotate(var(--vw-rot, 0deg)) scale(0.85);
    }

    10% {
        opacity: 0.9;
    }

    25% {
        transform: translateX(calc(-50% + 4px)) rotate(calc(var(--vw-rot, 0deg) * 0.7)) scale(0.95);
    }

    50% {
        opacity: 1;
        transform: translateX(calc(-50% - 3px)) rotate(calc(var(--vw-rot, 0deg) * 0.4)) scale(1);
    }

    75% {
        transform: translateX(calc(-50% + 2px)) rotate(calc(var(--vw-rot, 0deg) * 0.15)) scale(1);
    }

    100% {
        opacity: 1;
        bottom: var(--vw-target-y, 70%);
        transform: translateX(-50%) rotate(0deg) scale(1);
    }
}

/* After all words settle, a gentle breathing pulse */
.voice-word.settled {
    animation: voiceWordBreathe 3.5s ease-in-out infinite;
    animation-delay: var(--vw-breathe-delay, 0s);
}

@keyframes voiceWordBreathe {

    0%,
    100% {
        opacity: 0.88;
        bottom: var(--vw-target-y, 70%);
        transform: translateX(-50%) translateY(0) scale(1);
    }

    50% {
        opacity: 1;
        bottom: var(--vw-target-y, 70%);
        transform: translateX(-50%) translateY(-2px) scale(1.02);
    }
}

/* Chat Attachment Bubble (in messages) */
.chat-attachment-bubble {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ai-border);
    border-radius: 12px;
    padding: 12px;
    margin: 4px 0;
}

.chat-attachment-header-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    opacity: 0.7;
    font-size: 12px;
}

.chat-attachment-icon {
    font-size: 16px;
}

.chat-attachment-type {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.chat-attachment-preview {
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.chat-attachment-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

/* ── Animated rainbow border while analyzing ── */
@keyframes rainbowRotate {
    0% {
        --rainbow-angle: 0deg;
    }

    100% {
        --rainbow-angle: 360deg;
    }
}

@property --rainbow-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.chat-attachment-preview--analyzing {
    position: relative;
    padding: 3px;
    border-radius: 11px;
    background: conic-gradient(from var(--rainbow-angle),
            #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0088, #ff0000);
    animation: rainbowRotate 2s linear infinite;
    overflow: visible;
    width: fit-content;
    margin: 8px auto;
    filter: drop-shadow(0 0 6px rgba(120, 100, 255, 0.35));
}

.chat-attachment-preview--analyzing>a,
.chat-attachment-preview--analyzing>img,
.chat-attachment-preview--analyzing>a>img {
    border-radius: 8px;
}

/* Force image and link to shrink to actual visual size (not container width) */
.chat-attachment-preview--analyzing>a {
    display: inline-block;
    line-height: 0;
    /* Remove extra space below image */
}

.chat-attachment-preview--analyzing img {
    display: inline-block;
    width: auto;
    max-height: 200px;
    max-width: 100%;
}

/* Inner background to create the "border" effect (content area is opaque) */
.chat-attachment-preview--analyzing::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 8px;
    background: var(--ai-surface, #1a1a2e);
    z-index: 0;
    pointer-events: none;
}

/* Doc-preview uses 3.5px padding for a slightly thicker rainbow */
.chat-attachment-doc-preview.chat-attachment-preview--analyzing::after {
    inset: 3.5px;
    border-radius: 10px;
}

/* Ensure image/link sits above the ::after pseudo-element */
.chat-attachment-preview--analyzing>a,
.chat-attachment-preview--analyzing>.chat-attachment-pending-overlay,
.chat-attachment-preview--analyzing>img {
    position: relative;
    z-index: 1;
}

/* Remove the rainbow border once analysis is done — smooth transition */
.chat-attachment-preview--analyzing.analysis-done {
    animation: none;
    background: transparent;
    padding: 0;
    border-radius: 8px;
    filter: none;
    transition: padding 0.5s ease, border-radius 0.3s ease, background 0.5s ease, filter 0.5s ease;
}

.chat-attachment-preview--analyzing.analysis-done::after {
    inset: 0;
    border-radius: 8px;
    background: transparent;
    transition: inset 0.5s ease, background 0.5s ease;
}

/* Document preview (for non-image files) */
.chat-attachment-doc-preview {
    margin: 8px 0;
    display: flex;
    justify-content: center;
}

/* When doc-preview has rainbow analyzing border */
.chat-attachment-doc-preview.chat-attachment-preview--analyzing {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.5px;
    border-radius: 14px;
}

.chat-attachment-doc-preview.chat-attachment-preview--analyzing>* {
    position: relative;
    z-index: 1;
}

/* During analysis: solid background, no dashed border, clean look */
.chat-attachment-doc-preview.chat-attachment-preview--analyzing .doc-preview-link {
    background: var(--ai-surface, #1a1a2e);
    border: none;
    border-radius: 10px;
    padding: 28px 52px;
}

/* Hide "Clic para abrir" hint during analysis */
.chat-attachment-doc-preview.chat-attachment-preview--analyzing .doc-preview-hint {
    display: none;
}

/* For no-link variants during analysis */
.chat-attachment-doc-preview.no-link.chat-attachment-preview--analyzing {
    flex-direction: column;
    align-items: center;
    padding: 3.5px;
}

.chat-attachment-doc-preview .doc-preview-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed var(--ai-border);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.5s ease;
}

.chat-attachment-doc-preview .doc-preview-link:hover {
    background: var(--ai-accent-light);
    border-color: var(--ai-accent);
    transform: scale(1.02);
}

.chat-attachment-doc-preview .doc-preview-icon {
    font-size: 72px;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.chat-attachment-doc-preview .doc-preview-hint {
    font-size: 12px;
    color: var(--ai-text-muted);
    transition: opacity 0.3s ease;
}

/* After analysis done: restore normal doc preview style */
.chat-attachment-doc-preview.chat-attachment-preview--analyzing.analysis-done {
    padding: 0;
    border-radius: 12px;
}

.chat-attachment-doc-preview.chat-attachment-preview--analyzing.analysis-done .doc-preview-link {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed var(--ai-border);
    border-radius: 12px;
    padding: 24px 48px;
}

.chat-attachment-doc-preview.chat-attachment-preview--analyzing.analysis-done .doc-preview-hint {
    display: block;
}

/* Image pending placeholder (before upload completes) */
.chat-attachment-preview--pending {
    margin: 8px 0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

/* When pending AND analyzing (upload in progress), analyzing styles take precedence */
.chat-attachment-preview--pending.chat-attachment-preview--analyzing {
    padding: 3px;
    border-radius: 11px;
    overflow: visible;
}

.chat-attachment-pending-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 24px;
    background: var(--surface-hover, rgba(255, 255, 255, 0.05));
    border-radius: 8px;
    border: 1px dashed var(--border-color, rgba(255, 255, 255, 0.15));
}

.chat-attachment-pending-overlay .doc-preview-icon {
    font-size: 48px;
}

/* Dynamic status text inside attachment bubbles */
.chat-attachment-status {
    font-size: 12px;
    color: var(--ai-accent, #7c8aff);
    font-weight: 500;
    text-align: center;
    padding: 8px 0 4px;
    min-height: 20px;
    transition: opacity 0.4s ease, max-height 0.4s ease;
    animation: statusPulse 1.8s ease-in-out infinite;
    letter-spacing: 0.3px;
    max-height: 40px;
    overflow: hidden;
}

.chat-attachment-status:empty {
    display: none;
    animation: none;
    max-height: 0;
    padding: 0;
}

@keyframes statusPulse {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

/* Attachment info message (before file links) */
.chat-message-attachment-info {
    padding: 12px 16px;
    animation: fadeInUp 0.3s ease;
}

/* Inline file attachment bubbles reuse .chat-attachment-bubble styles above */

.attachment-info-message {
    background: linear-gradient(135deg, rgba(45, 138, 78, 0.1) 0%, rgba(26, 92, 51, 0.15) 100%);
    border: 1px solid rgba(45, 138, 78, 0.3);
    border-radius: 12px;
    padding: 16px;
}

.attachment-info-header {
    margin-bottom: 8px;
}

.attachment-info-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-success, #4ade80);
}

.attachment-info-found {
    font-size: 14px;
    color: var(--ai-text);
    margin-bottom: 12px;
}

.attachment-info-hint {
    font-size: 12px;
    color: var(--ai-text-muted);
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    line-height: 1.5;
}

/* Attachment link in chat (when AI mentions a file) */
.chat-message-attachment-link {
    padding: 8px 16px;
    animation: fadeInUp 0.3s ease;
}

.chat-attachment-link {
    display: inline-block;
    max-width: 100%;
}

.chat-attachment-link .attachment-link-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(45, 138, 78, 0.15) 0%, rgba(26, 92, 51, 0.25) 100%);
    border: 1px solid rgba(45, 138, 78, 0.4);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ai-text);
    transition: all 0.2s ease;
}

.chat-attachment-link .attachment-link-btn:hover {
    background: linear-gradient(135deg, rgba(45, 138, 78, 0.25) 0%, rgba(26, 92, 51, 0.35) 100%);
    border-color: rgba(45, 138, 78, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 138, 78, 0.3);
}

.chat-attachment-link .attachment-link-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.chat-attachment-link .attachment-link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.chat-attachment-link .attachment-link-name {
    font-weight: 600;
    color: var(--color-success, #4ade80);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-attachment-link .attachment-link-action {
    font-size: 12px;
    color: var(--ai-text-muted);
}

.chat-attachment-link .attachment-link-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-attachment-link .detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.chat-attachment-link .detail-label {
    color: var(--ai-text-muted);
    min-width: 50px;
    font-weight: 500;
}

.chat-attachment-link .detail-value {
    color: var(--ai-text);
}

.chat-attachment-link .type-value {
    color: #f472b6;
    font-weight: 600;
}

.chat-attachment-link .where-value {
    color: var(--color-success, #4ade80);
}

.chat-attachment-link .who-value {
    color: var(--color-info, #60a5fa);
}

.chat-attachment-link .date-value {
    color: #a78bfa;
}

.chat-attachment-link .attachment-link-arrow {
    font-size: 18px;
    color: var(--color-success, #4ade80);
    flex-shrink: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.chat-attachment-name {
    font-weight: 500;
    color: var(--ai-accent);
    margin-bottom: 8px;
    font-size: 14px;
}

.chat-attachment-description {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--ai-accent);
}

.chat-attachment-description .desc-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.chat-attachment-description p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ai-text);
}

/* Hidden messages (for RAG indexing, invisible to user) */
.chat-message-hidden {
    display: none !important;
}

/* Hidden description container (inside hidden message) */
.chat-attachment-hidden-description {
    padding: 8px;
    background: rgba(100, 100, 100, 0.1);
    border-radius: 6px;
    font-size: 12px;
}

.chat-attachment-hidden-description .hidden-desc-label {
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0.7;
}

.chat-attachment-hidden-description .hidden-desc-content {
    line-height: 1.4;
}

/* ============================================
   ATTACHMENTS BADGE (inside mode banner)
   ============================================ */
.ai-mode-attachments-badge {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #2d8a4e 0%, #1a5c33 100%);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(45, 138, 78, 0.4);
    margin-left: auto;
    position: relative;
    z-index: 2;
}

/* ============================================
   ATTACHMENTS BADGE (floating overlay)
   - Se saca del banner para no ocupar altura
   ============================================ */
/* Floating container deshabilitado — badge de adjuntos eliminado */
.chat-attachments-floating-container {
    display: none;
}

.chat-attachments-floating-container .ai-mode-attachments-badge {
    pointer-events: auto;
    margin-left: 0;
}

.ai-mode-attachments-badge.floating {
    display: none;
    /* visibility controlled by .visible */
}

.ai-mode-attachments-badge.floating.visible {
    display: none;
}

/* Badge de adjuntos deshabilitado — funcionalidad eliminada */
.ai-mode-attachments-badge.visible {
    display: none;
}

.ai-mode-attachments-badge:hover {
    /*transform: scale(1.05);*/
    box-shadow: 0 4px 12px rgba(45, 138, 78, 0.5);
    background: linear-gradient(135deg, #38a85e 0%, #228b44 100%);
}

.attachments-badge-icon {
    font-size: 14px;
}

.attachments-badge-count {
    font-size: 13px;
    font-weight: 700;
    color: white;
    min-width: 18px;
    text-align: center;
}

/* ============================================
   ATTACHMENTS MANAGER MODAL
   ============================================ */
.attachments-manager-modal {
    z-index: 100045;
}

.attachments-manager-dialog {
    width: 500px;
    max-width: 95vw;
    max-height: 80vh;
    /*  background: var(--ai-bg-secondary);*/
    border-radius: 16px;
    border: 1px solid var(--ai-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.attachments-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ai-border);
    background: rgba(45, 138, 78, 0.1);
}

.attachments-manager-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--ai-text);
}

.attachments-manager-header .close-btn {
    background: transparent;
    border: none;
    color: var(--ai-text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

.attachments-manager-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ai-border);
}

.attachments-manager-btn {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--ai-border);
    background: var(--active-overlay);
    color: var(--ai-text);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.attachments-manager-btn.toggle:hover {
    background: rgba(45, 138, 78, 0.2);
    border-color: #2d8a4e;
}

.attachments-manager-btn.delete {
    background: rgba(255, 80, 80, 0.1);
    border-color: rgba(255, 80, 80, 0.3);
    color: #ff6b6b;
}

.attachments-manager-btn.delete:hover:not(:disabled) {
    background: rgba(255, 80, 80, 0.2);
}

.attachments-manager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.attachments-manager-count {
    font-size: 12px;
    color: var(--ai-text-muted);
    margin-left: auto;
}

.attachments-manager-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachments-manager-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--hover-overlay);
    border: 1px solid var(--ai-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.attachments-manager-item:hover {
    background: rgba(45, 138, 78, 0.1);
    border-color: rgba(45, 138, 78, 0.3);
}

.attachments-manager-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
}

.attachments-manager-checkbox {
    display: none;
}

.attachments-manager-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ai-border);
    border-radius: 4px;
    background: var(--active-overlay);
    transition: all 0.2s ease;
    position: relative;
}

.attachments-manager-checkbox:checked+.attachments-manager-checkbox-custom {
    background: #2d8a4e;
    border-color: #2d8a4e;
}

.attachments-manager-checkbox:checked+.attachments-manager-checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.attachments-manager-item-preview {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--active-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attachments-manager-item-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachments-manager-item-preview .file-icon {
    font-size: 24px;
}

.attachments-manager-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.attachments-manager-item-name {
    font-weight: 500;
    color: var(--ai-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachments-manager-item-type {
    font-size: 12px;
    color: var(--ai-text-muted);
}

.attachments-manager-item-open {
    padding: 8px;
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.2s;
}

.attachments-manager-item-open:hover {
    transform: scale(1.2);
}

.attachments-manager-item-delete {
    background: transparent;
    border: none;
    padding: 8px;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}

.attachments-manager-item-delete:hover {
    opacity: 1;
    transform: scale(1.1);
}

#btnSendMessage {
    padding: 12px 24px;
    background: var(--gradient-primary, linear-gradient(135deg, #ffb86b 0%, #ff79c6 100%));
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
}

#btnSendMessage:hover {
    /*transform: scale(1.05);*/
}

#btnSendMessage:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Panel message content spacing */
.ai-chat-messages p,
.ai-chat-messages h3,
.ai-chat-messages ol,
.ai-chat-messages ul,
.ai-chat-messages li {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 12px;
}

.ai-chat-messages ol,
.ai-chat-messages ul {
    padding: 0 0 0 20px;
    list-style-position: outside;
}

.ai-chat-messages li {
    padding: 0;
    line-height: 1.5;
}

.ai-chat-messages li>p {
    margin: 0;
    display: inline;
}

.ai-chat-messages *:last-child {
    margin-bottom: 0;
}

/* ============================================
   5. AI CHAT MODAL (Wrapper for Panel)
   ============================================ */
.ai-chat-modal-wrapper {
    z-index: 100060;
    /* Above messaging panel (100050) */
}

/* All modals inside AI chat should be above it */
#aiConfirmModal,
#reindexConfirmModal,
#reindexProgressModal,
#aiHistoryModal {
    z-index: 100080 !important;
    /* Above AI Chat Modal and Mode Selector */
}

.ai-chat-modal-dialog {
    max-width: 1250px;
    width: 95%;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
}

.ai-chat-modal-close {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    color: var(--text-secondary, #aaa);
    background: transparent;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    /* NO animations or transitions */
    transition: none !important;
    animation: none !important;
}

.ai-chat-modal-close:hover {
    color: var(--text-danger, #ef4444);
    border-color: var(--text-danger, #ef4444);
    background: var(--bg-danger, rgba(239, 68, 68, 0.2));
}

.ai-chat-modal-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Panel inside modal adjustments */
.ai-chat-modal-content .ai-chat-panel {
    height: 100%;
    border-radius: 16px;
}

.ai-chat-modal-content .ai-chat-messages {
    flex: 1;
    min-height: 0;
}

/* Legacy support */
#aiChatModal .dialog {
    max-width: 1250px;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

#aiChatModal {
    z-index: 100060;
    /* Above messaging panel (100050) */
}

/* ── Window Minimizer — matar transiciones durante drag/resize ── */
body.wm-dragging .ai-chat-modal-dialog,
body.wm-resizing .ai-chat-modal-dialog {
    transition: none !important;
}

/* ── Alinear tamaño del botón ⋯ con los botones WM (36×36) ── */
.ai-chat-modal-dialog .ai-btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ============================================
   6. HISTORY MODAL
   ============================================ */
.ai-history-modal .dialog,
#aiHistoryModal .dialog {
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.ai-history-modal .body,
#aiHistoryModal .body {
    max-height: 60vh;
    overflow-y: auto;
    flex: 1;
    padding: 10px;
}

#aiHistoryModal {
    z-index: 100100;
}

#aiUnifiedHistoryModal,
.ai-history-modal {
    z-index: 100100;
}

/* Mobile: History modal should be full-screen */
@media (max-width: 768px) {

    .ai-history-modal,
    #aiHistoryModal,
    #aiUnifiedHistoryModal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .ai-history-modal .dialog,
    #aiHistoryModal .dialog,
    #aiUnifiedHistoryModal .dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        overflow: hidden;
        box-sizing: border-box;
        margin: 0 !important;
        border: none !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .ai-history-modal .body,
    #aiHistoryModal .body,
    #aiUnifiedHistoryModal .body {
        max-height: none !important;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
        /* Padding bottom to account for the fixed toolbar */
        padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
        display: flex;
        flex-direction: column;
    }

    .ai-history-modal .history-toolbar,
    #aiHistoryModal .history-toolbar,
    #aiUnifiedHistoryModal .history-toolbar {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bg-dark, #161a22) !important;
        padding: 12px 16px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        border-top: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12)) !important;
        border-bottom: none !important;
        display: flex !important;
        justify-content: space-between !important;
        z-index: 10 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2) !important;
    }
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* History Toolbar */
.history-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ai-border);
}

.history-btn-toggle,
.history-btn-delete-selected {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--ai-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--ai-text);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-btn-toggle:hover {
    background: var(--ai-accent-light);
    border-color: var(--ai-accent-border);
}

.history-btn-delete-selected {
    background: rgba(255, 80, 80, 0.1);
    border-color: rgba(255, 80, 80, 0.3);
    color: #ff6b6b;
}

.history-btn-delete-selected:hover:not(:disabled) {
    background: rgba(255, 80, 80, 0.2);
}

.history-btn-delete-selected:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.history-selection-count {
    font-size: 12px;
    color: var(--ai-text-muted);
    margin-left: auto;
}

/* History Item with Checkbox */
.history-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ai-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.history-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
}

.history-checkbox {
    display: none;
}

.history-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ai-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    position: relative;
}

.history-checkbox:checked+.history-checkbox-custom {
    background: var(--ai-accent);
    border-color: var(--ai-accent);
}

.history-checkbox:checked+.history-checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #1a1a2e;
    font-size: 12px;
    font-weight: bold;
}

.history-checkbox-wrapper:hover .history-checkbox-custom {
    border-color: var(--ai-accent);
}

.history-item:hover {
    background: var(--ai-accent-light);
    border-color: var(--ai-accent-border);
}

.history-item-info {
    flex: 1;
}

.history-item-title {
    font-weight: 500;
    color: var(--ai-text);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-item-title strong {
    color: var(--ai-accent);
}

.history-item-meta {
    font-size: 12px;
    color: var(--ai-text-muted);
    opacity: 0.6;
}

/* ============================================
   SHARED CHAT STYLES
   ============================================ */

/* Shared chat item - green tint */
.history-item.shared-chat {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
}

.history-item.shared-chat:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
}

/* Shared by line */
.history-item-shared-by {
    font-size: 11px;
    color: #22c55e;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.history-item-shared-by strong {
    color: #4ade80;
}

/* Light theme adjustments */
[data-theme^="light"] .history-item.shared-chat {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
}

[data-theme^="light"] .history-item.shared-chat:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

[data-theme^="light"] .history-item-shared-by {
    color: #16a34a;
}

[data-theme^="light"] .history-item-shared-by strong {
    color: #15803d;
}

/* Chat container when viewing shared chat */
#chatMessages.shared-chat-view,
#panelChatMessages.shared-chat-view {
    background: rgba(34, 197, 94, 0.03);
    border-left: 3px solid rgba(34, 197, 94, 0.3);
}

[data-theme^="light"] #chatMessages.shared-chat-view,
[data-theme^="light"] #panelChatMessages.shared-chat-view {
    background: rgba(34, 197, 94, 0.05);
    border-left: 3px solid rgba(34, 197, 94, 0.4);
}

/* ============================================
   SHARED BY ME STYLES (Blue) - Chats I shared
   ============================================ */

.history-item.shared-by-me {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}

.history-item.shared-by-me:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

.history-item-shared-with {
    margin-top: 4px;
}

/* Light theme */
[data-theme^="light"] .history-item.shared-by-me {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme^="light"] .history-item.shared-by-me:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
}

.history-empty {
    text-align: center;
    padding: 40px;
    color: var(--ai-text-muted);
}

.btn-delete-chat {
    background: var(--ai-danger-bg);
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--ai-danger);
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-delete-chat:hover {
    background: rgba(255, 100, 100, 0.3);
}

/* ============================================
   7. REINDEX MODAL
   ============================================ */
.reindex-modal .dialog {
    width: 480px;
    max-width: 90vw;
    text-align: center;
    overflow: visible;
}

.reindex-modal .title {
    justify-content: center;
}

.reindex-modal .body {
    padding: 20px;
    overflow: visible;
}

.reindex-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.reindex-icon.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.reindex-message {
    color: var(--text, var(--ai-text));
    margin-bottom: 15px;
    line-height: 1.6;
    text-align: left;
}

.reindex-useful-when {
    color: var(--text, var(--ai-text));
    font-weight: 600;
    margin-bottom: 10px;
    text-align: left;
}

.reindex-list {
    color: var(--text, var(--ai-text));
    font-size: 15px;
    text-align: left;
    margin: 0 0 20px 25px;
    padding: 0;
}

.reindex-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.reindex-time {
    color: var(--muted, var(--ai-text-muted));
    font-size: 13px;
    margin-bottom: 20px;
    text-align: center;
}

.reindex-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.reindex-btn-cancel {
    padding: 10px 24px;
    border-radius: 8px;
    border: 1px solid var(--ai-accent-border);
    background: transparent;
    color: var(--text, var(--ai-text));
    cursor: pointer;
    transition: all 0.2s;
}

.reindex-btn-cancel:hover {
    background: var(--ai-accent-light);
}

.reindex-btn-confirm {
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    background: var(--gradient-primary, linear-gradient(135deg, var(--ai-accent), #ff9a56));
    color: var(--text-inverse, #000);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.reindex-btn-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--ai-accent-border);
}

.reindex-progress {
    background: var(--ai-accent-light);
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
    margin-bottom: 10px;
}

.reindex-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--ai-accent), #ff9a56);
    transition: width 0.3s ease;
}

.reindex-status {
    color: var(--text, var(--ai-text));
    margin-bottom: 15px;
}

.reindex-detail {
    color: var(--muted, var(--ai-text-muted));
    font-size: 12px;
}

/* ============================================
   8. CITATIONS & SOURCES
   ============================================ */
.ai-sources {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ai-border);
}

.ai-sources a {
    display: block;
    font-size: 12px;
    color: var(--ai-accent);
    margin: 2px 0;
    text-decoration: none;
    transition: opacity 0.2s;
}

.ai-sources a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.ai-images {
    margin-top: 10px;
}

.ai-images img {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 8px;
}

.citation-container {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--ai-border);
    white-space: normal;
}

.citation-header {
    font-size: 11px;
    font-weight: 600;
    color: #4CAF50;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}

.citation-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.citation-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ai-text);
}

.citation-number {
    color: #4CAF50;
    font-size: 10px;
    font-weight: 700;
    background: rgba(76, 175, 80, 0.1);
    padding: 1px 5px;
    border-radius: 4px;
    min-width: 18px;
    text-align: center;
}

.citation-content {
    flex: 1;
}

.citation-link {
    color: #8BC34A;
    text-decoration: none;
    transition: all 0.2s;
    border-bottom: 1px solid transparent;
}

.citation-link:hover {
    color: #a2cf6e;
    border-bottom-color: #a2cf6e;
}

/* ============================================
   9. LINKS IN CHAT MESSAGES
   ============================================ */
.msg-content a,
.ai-chat-messages a {
    /* color: var(--accent-primary, #ffb86b) !important; */
    text-decoration: none !important;
    /* background: rgba(var(--accent-primary-rgb, 255, 184, 107), 0.1); */
    padding: 2px 6px;
    /* border-radius: 4px; */
    border-bottom: 1px dashed rgba(var(--accent-primary-rgb, 255, 184, 107), 0.4);
    font-weight: 500;
    transition: all 0.2s ease;
}

.ai-chat-messages a {
    font-size: 10px;
    font-weight: 300;
}

.msg-content a:visited,
.ai-chat-messages a:visited {
    color: var(--accent-primary, #ffb86b) !important;
}

/* File links */
.file-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ai-accent) !important;
    text-decoration: none !important;
    background: rgba(var(--accent-primary-rgb, 255, 184, 107), 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    border: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.file-inline-link:hover {
    color: var(--ai-accent) !important;
    background: rgba(var(--accent-primary-rgb, 255, 184, 107), 0.2);
    text-decoration: none !important;
}

.file-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 2px 0;
    background: rgba(var(--accent-primary-rgb, 255, 184, 107), 0.1);
    border: 1px solid var(--ai-accent-border);
    border-radius: 6px;
    color: var(--ai-accent);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.file-attachment-link:hover {
    background: rgba(var(--accent-primary-rgb, 255, 184, 107), 0.2);
    border-color: var(--ai-accent);
}

/* ============================================
   10. AI SOURCES SECTION (Topics at bottom)
   ============================================ */
.ai-sources-section {
    margin-top: 20px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.ai-sources-header {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    opacity: 0.7;
}

.ai-sources-text {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

.ai-sources-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-source-btn,
.ai-source-file {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    text-decoration: none;
}

.ai-source-btn {
    background: linear-gradient(135deg,
            rgba(var(--accent-primary-rgb, 255, 184, 107), 0.08) 0%,
            rgba(var(--accent-primary-rgb, 255, 184, 107), 0.02) 100%);
    border: 1px solid rgba(var(--accent-primary-rgb, 255, 184, 107), 0.2);
    color: var(--accent-primary, #ffb86b);
}

.ai-source-file {
    background: linear-gradient(135deg,
            rgba(100, 180, 255, 0.08) 0%,
            rgba(100, 180, 255, 0.02) 100%);
    border: 1px solid rgba(100, 180, 255, 0.2);
    color: #7cb8f7;
}

.ai-source-btn:hover {
    background: linear-gradient(135deg,
            rgba(var(--accent-primary-rgb, 255, 184, 107), 0.15) 0%,
            rgba(var(--accent-primary-rgb, 255, 184, 107), 0.05) 100%);
    border-color: rgba(var(--accent-primary-rgb, 255, 184, 107), 0.4);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb, 255, 184, 107), 0.15);
}

.ai-source-file:hover {
    background: linear-gradient(135deg,
            rgba(100, 180, 255, 0.15) 0%,
            rgba(100, 180, 255, 0.05) 100%);
    border-color: rgba(100, 180, 255, 0.4);
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(100, 180, 255, 0.15);
    text-decoration: none;
}

.ai-source-btn .source-icon,
.ai-source-file .source-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.ai-source-btn .source-title,
.ai-source-file .source-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-source-btn .source-arrow,
.ai-source-file .source-arrow {
    font-size: 16px;
    opacity: 0.4;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ai-source-btn:hover .source-arrow,
.ai-source-file:hover .source-arrow {
    opacity: 1;
    transform: translateX(3px);
}

/* Topic reference link */
.topic-reference-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(100, 180, 255, 0.1);
    border-radius: 4px;
    color: #7cb8f7;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.topic-reference-link:hover {
    background: rgba(100, 180, 255, 0.2);
    color: #a8d4ff;
}

/* ============================================
   10b. RAG CITATION CARDS
   IMPORTANT section: KB sources used to build the AI response.
   Each row has a distinct accent color for visual hierarchy.
   ============================================ */

/* ── 5 color palette for per-row differentiation ── */
.rag-citation-cards {
    --rag-c0: 94, 234, 212;
    /* teal     */
    --rag-c1: 167, 139, 250;
    /* violet   */
    --rag-c2: 251, 191, 36;
    /* amber    */
    --rag-c3: 251, 113, 133;
    /* rose     */
    --rag-c4: 96, 165, 250;
    /* sky-blue */
}

.rag-citation-cards {
    margin-top: 24px;
    padding: 20px;
    border-radius: 14px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    animation: ragCitationFadeIn 0.5s ease-out;
}

@keyframes ragCitationFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* ── Header: icon + descriptive text (float wrap) ── */
.rag-citation-header {
    margin-bottom: 16px;
    line-height: 1.45;
    overflow: hidden;
    /* clearfix for float */
}

.rag-citation-icon {
    float: left;
    font-size: 28px;
    margin: 2px 10px 4px 0;
    line-height: 1;
}

/* Companion avatar inside the citation header — smaller than chat bubbles */
.rag-citation-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.rag-citation-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, rgba(255, 255, 255, 0.88));
    letter-spacing: 0.01em;
}

/* ── Card list ── */
.rag-citation-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Individual card (row) ── */
.rag-citation-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
}

/* ── Per-row color schemes ── */
.rag-citation-card.rag-color-0 {
    background: linear-gradient(135deg,
            rgba(var(--rag-c0), 0.10) 0%,
            rgba(var(--rag-c0), 0.03) 100%);
    border-color: rgba(var(--rag-c0), 0.25);
    color: rgb(var(--rag-c0));
}

.rag-citation-card.rag-color-1 {
    background: linear-gradient(135deg,
            rgba(var(--rag-c1), 0.10) 0%,
            rgba(var(--rag-c1), 0.03) 100%);
    border-color: rgba(var(--rag-c1), 0.25);
    color: rgb(var(--rag-c1));
}

.rag-citation-card.rag-color-2 {
    background: linear-gradient(135deg,
            rgba(var(--rag-c2), 0.10) 0%,
            rgba(var(--rag-c2), 0.03) 100%);
    border-color: rgba(var(--rag-c2), 0.25);
    color: rgb(var(--rag-c2));
}

.rag-citation-card.rag-color-3 {
    background: linear-gradient(135deg,
            rgba(var(--rag-c3), 0.10) 0%,
            rgba(var(--rag-c3), 0.03) 100%);
    border-color: rgba(var(--rag-c3), 0.25);
    color: rgb(var(--rag-c3));
}

.rag-citation-card.rag-color-4 {
    background: linear-gradient(135deg,
            rgba(var(--rag-c4), 0.10) 0%,
            rgba(var(--rag-c4), 0.03) 100%);
    border-color: rgba(var(--rag-c4), 0.25);
    color: rgb(var(--rag-c4));
}

/* ── Hover states: intensify the row's own color ── */
.rag-citation-card.rag-color-0:hover {
    background: linear-gradient(135deg, rgba(var(--rag-c0), 0.18) 0%, rgba(var(--rag-c0), 0.06) 100%);
    border-color: rgba(var(--rag-c0), 0.45);
    box-shadow: 0 4px 18px rgba(var(--rag-c0), 0.15);
    transform: translateX(4px);
}

.rag-citation-card.rag-color-1:hover {
    background: linear-gradient(135deg, rgba(var(--rag-c1), 0.18) 0%, rgba(var(--rag-c1), 0.06) 100%);
    border-color: rgba(var(--rag-c1), 0.45);
    box-shadow: 0 4px 18px rgba(var(--rag-c1), 0.15);
    transform: translateX(4px);
}

.rag-citation-card.rag-color-2:hover {
    background: linear-gradient(135deg, rgba(var(--rag-c2), 0.18) 0%, rgba(var(--rag-c2), 0.06) 100%);
    border-color: rgba(var(--rag-c2), 0.45);
    box-shadow: 0 4px 18px rgba(var(--rag-c2), 0.15);
    transform: translateX(4px);
}

.rag-citation-card.rag-color-3:hover {
    background: linear-gradient(135deg, rgba(var(--rag-c3), 0.18) 0%, rgba(var(--rag-c3), 0.06) 100%);
    border-color: rgba(var(--rag-c3), 0.45);
    box-shadow: 0 4px 18px rgba(var(--rag-c3), 0.15);
    transform: translateX(4px);
}

.rag-citation-card.rag-color-4:hover {
    background: linear-gradient(135deg, rgba(var(--rag-c4), 0.18) 0%, rgba(var(--rag-c4), 0.06) 100%);
    border-color: rgba(var(--rag-c4), 0.45);
    box-shadow: 0 4px 18px rgba(var(--rag-c4), 0.15);
    transform: translateX(4px);
}

.rag-citation-card:active {
    transform: translateX(2px) scale(0.99);
}

/* ── Numbered index badge (replaces old 📖 icon) ── */
.rag-card-index {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Tint the index badge to match the row color */
.rag-color-0 .rag-card-index {
    background: rgba(var(--rag-c0), 0.15);
    border-color: rgba(var(--rag-c0), 0.25);
}

.rag-color-1 .rag-card-index {
    background: rgba(var(--rag-c1), 0.15);
    border-color: rgba(var(--rag-c1), 0.25);
}

.rag-color-2 .rag-card-index {
    background: rgba(var(--rag-c2), 0.15);
    border-color: rgba(var(--rag-c2), 0.25);
}

.rag-color-3 .rag-card-index {
    background: rgba(var(--rag-c3), 0.15);
    border-color: rgba(var(--rag-c3), 0.25);
}

.rag-color-4 .rag-card-index {
    background: rgba(var(--rag-c4), 0.15);
    border-color: rgba(var(--rag-c4), 0.25);
}

/* ── Card body (title + category) ── */
.rag-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rag-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 15.5px;
    /* 📚 Título oscuro neutro — no hereda los colores de fila.
       Usa variable CSS para compatibilidad con temas light/dark. */
    color: var(--text-primary, rgba(255, 255, 255, 0.88));
}

.rag-card-category {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted, rgba(255, 255, 255, 0.45));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Score badge — neutral scheme for contrast on all row colors ── */
.rag-card-score {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 10px;
    flex-shrink: 0;
    min-width: 40px;
    text-align: center;
    line-height: 1.3;
}

.rag-card-score.high {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.rag-card-score.mid {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.rag-card-score.low {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Arrow ── */
.rag-card-arrow {
    font-size: 18px;
    font-weight: 300;
    opacity: 0.4;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: inherit;
}

.rag-citation-card:hover .rag-card-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ── Light theme adjustments ── */
[data-theme^="light"] .rag-citation-cards {
    background: linear-gradient(145deg,
            rgba(0, 0, 0, 0.02) 0%,
            rgb(255, 248, 206) 100%);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

[data-theme^="light"] .rag-citation-text {
    color: var(--text-secondary, rgba(0, 0, 0, 0.65));
}

[data-theme^="light"] .rag-card-index {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme^="light"] .rag-card-score.high {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme^="light"] .rag-card-score.mid {
    background: rgba(0, 0, 0, 0.07);
    color: rgba(0, 0, 0, 0.65);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme^="light"] .rag-card-score.low {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.45);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── Mobile responsiveness ── */
@media (max-width: 768px) {
    .rag-citation-cards {
        padding: 16px 14px;
        margin-top: 20px;
    }

    .rag-citation-card {
        padding: 12px 14px;
        gap: 10px;
    }

    .rag-card-title {
        font-size: 13px;
    }

    .rag-card-index {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .rag-card-score {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ── RAG Multi-Fragment Navigation ──
   Applied by readEditModal._highlightAllChunks when a citation card
   is clicked. Highlights ALL matching paragraphs and provides a
   floating ↑/↓ navigator to jump between them. */

/* All matched paragraphs get a subtle highlight */
.rag-highlight-paragraph {
    background-color: rgba(254, 240, 138, 0.12) !important;
    border-left: 3px solid rgba(253, 224, 71, 0.4) !important;
    padding-left: 12px !important;
    border-radius: 4px !important;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* The ACTIVE paragraph (currently focused) gets stronger emphasis */
.rag-highlight-paragraph.rag-highlight-active {
    background-color: rgba(254, 240, 138, 0.25) !important;
    border-left: 3px solid #fde047 !important;
    box-shadow: inset 0 0 0 1px rgba(253, 224, 71, 0.15),
        0 0 20px rgba(253, 224, 71, 0.08);
    animation: ragActivePulse 2s ease-in-out 1;
}

@keyframes ragActivePulse {
    0% {
        box-shadow: inset 0 0 0 1px rgba(253, 224, 71, 0.15), 0 0 20px rgba(253, 224, 71, 0.08);
    }

    50% {
        box-shadow: inset 0 0 0 1px rgba(253, 224, 71, 0.3), 0 0 30px rgba(253, 224, 71, 0.15);
    }

    100% {
        box-shadow: inset 0 0 0 1px rgba(253, 224, 71, 0.15), 0 0 20px rgba(253, 224, 71, 0.08);
    }
}

/* ── Floating Navigation Pill ── */
.rag-nav-pill {
    position: sticky;
    bottom: 12px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 12px auto 0;
    width: fit-content;
    padding: 4px 6px;
    border-radius: 20px;
    background: rgba(30, 30, 50, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(253, 224, 71, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    font-family: inherit;
    animation: ragPillSlideIn 0.35s ease-out;
}

@keyframes ragPillSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

.rag-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(253, 224, 71, 0.9);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    padding: 0;
}

.rag-nav-btn:hover {
    background: rgba(253, 224, 71, 0.15);
    color: #fde047;
    transform: scale(1.1);
}

.rag-nav-btn:active {
    transform: scale(0.95);
}

.rag-nav-close {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    width: 24px;
    height: 24px;
    margin-left: 2px;
}

.rag-nav-close:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.08);
}

.rag-nav-counter {
    display: flex;
    align-items: center;
    gap: 1px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(253, 224, 71, 0.9);
    padding: 0 4px;
    min-width: 32px;
    justify-content: center;
    user-select: none;
}

.rag-nav-sep {
    color: rgba(255, 255, 255, 0.25);
    margin: 0 1px;
}

.rag-nav-total {
    color: rgba(255, 255, 255, 0.45);
}

/* Light theme adjustments */
[data-theme^="light"] .rag-highlight-paragraph {
    background-color: rgba(254, 240, 138, 0.25) !important;
    border-left-color: rgba(250, 204, 21, 0.5) !important;
}

[data-theme^="light"] .rag-highlight-paragraph.rag-highlight-active {
    background-color: rgba(254, 240, 138, 0.45) !important;
    border-left-color: #facc15 !important;
}

[data-theme^="light"] .rag-nav-pill {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(250, 204, 21, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

[data-theme^="light"] .rag-nav-btn {
    color: rgba(180, 140, 0, 0.8);
}

[data-theme^="light"] .rag-nav-btn:hover {
    background: rgba(250, 204, 21, 0.15);
    color: #b8860b;
}

[data-theme^="light"] .rag-nav-counter {
    color: #b8860b;
}

[data-theme^="light"] .rag-nav-close {
    color: rgba(0, 0, 0, 0.3);
}

[data-theme^="light"] .rag-nav-close:hover {
    color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   11. SCROLLBAR STYLES
   Now using global theme scrollbars from layout.css
   ============================================ */

/* ============================================
   12. TOKEN USAGE & GENERATED IMAGES
   ============================================ */
.token-usage {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--bg-elevated, rgba(0, 0, 0, 0.15));
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    font-size: 11px;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.token-usage .model-name {
    color: var(--accent-primary, #ffb86b);
    font-weight: 600;
    font-size: 12px;
}

.token-usage span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.token-usage .cost {
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    margin-left: auto;
    font-weight: 500;
}

.token-usage .cost-total {
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    font-size: 10px;
}

/* RAG Debug Links (admin only) */
.token-usage .rag-debug-links {
    margin-left: auto;
    padding-left: 12px;
    border-left: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.token-usage .rag-log-link {
    color: var(--accent-primary, #8b5cf6);
    text-decoration: none;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    background: rgba(139, 92, 246, 0.1);
}

.token-usage .rag-log-link:hover {
    background: rgba(139, 92, 246, 0.25);
    color: #a78bfa;
    text-decoration: none;
}

.generated-image {
    margin-top: 10px;
}

.generated-image img {
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid #333;
}

.generated-image .caption {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}

/* ============================================
   13. CONFIRM MODAL
   ============================================ */
#aiConfirmModal {
    z-index: 100200 !important;
    /* Must be above #aiHistoryModal (100100) */
}

#aiConfirmModal .dialog {
    max-width: 420px;
    width: 90%;
    text-align: center;
    padding: 24px;
}

#aiConfirmModal h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

#aiConfirmModal p {
    margin-bottom: 24px;
}

#aiConfirmModal .confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

#aiConfirmModal .btn-danger {
    background: #d32f2f;
}

/* ============================================
   14. RAG LOADING STATE
   ============================================ */
.rag-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    padding: 32px;
    text-align: center;
    animation: ragFadeIn 0.4s ease-out;
    position: relative;
    z-index: 1;
}

@keyframes ragFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rag-loading-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: ragPulse 2s ease-in-out infinite;
}

@keyframes ragPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.rag-loading-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ai-accent, #64b5f6);
    margin: 0 0 12px 0;
    letter-spacing: 0.02em;
}

.rag-loading-message {
    font-size: 0.95rem;
    color: var(--ai-text-muted, #a0a0a0);
    margin: 0 0 24px 0;
    max-width: 400px;
    line-height: 1.6;
}

.rag-loading-progress {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.rag-loading-bar {
    width: 100%;
    height: 6px;
    background: var(--ai-bg-darker, #1a1a2e);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.rag-loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
            var(--ai-accent, #64b5f6) 0%,
            var(--ai-accent-bright, #90caf9) 50%,
            var(--ai-accent, #64b5f6) 100%);
    background-size: 200% 100%;
    border-radius: 3px;
    transition: width 0.3s ease-out;
    animation: ragShimmer 1.5s linear infinite;
}

@keyframes ragShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.rag-loading-text {
    font-size: 0.85rem;
    color: var(--ai-text-dim, #888);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   OFFLINE STATE STYLES
   ============================================ */
.ai-chat-input-container input.offline-disabled,
.ai-chat-input-container textarea.offline-disabled,
.ai-chat-input-container button.offline-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(100, 100, 100, 0.2) !important;
    border-color: rgba(150, 150, 150, 0.3) !important;
}

.ai-chat-input-container input.offline-disabled::placeholder,
.ai-chat-input-container textarea.offline-disabled::placeholder {
    color: #ff9999;
    font-style: italic;
}

.ai-chat-input-container input.offline-disabled:hover,
.ai-chat-input-container textarea.offline-disabled:hover,
.ai-chat-input-container button.offline-disabled:hover {
    cursor: not-allowed;
}

/* Tooltip for offline state */
.ai-chat-input-container input.offline-disabled[title]:hover::after,
.ai-chat-input-container textarea.offline-disabled[title]:hover::after,
.ai-chat-input-container button.offline-disabled[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   VOICE TRANSCRIBING — animated input border while processing
   ═══════════════════════════════════════════════════════════════ */
.voice-transcribing {
    border-image: linear-gradient(var(--voice-transcribing-angle, 0deg),
            #8b5cf6, #3b82f6, #ec4899, #f97316, #8b5cf6) 1 !important;
    border-width: 2px !important;
    border-style: solid !important;
    animation: voiceTranscribingRotate 2.5s linear infinite,
        voiceTranscribingGlow 1.5s ease-in-out infinite alternate !important;
}

@property --voice-transcribing-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes voiceTranscribingRotate {
    to {
        --voice-transcribing-angle: 360deg;
    }
}

@keyframes voiceTranscribingGlow {
    from {
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.3),
            0 0 16px rgba(59, 130, 246, 0.15);
    }

    to {
        box-shadow: 0 0 12px rgba(236, 72, 153, 0.3),
            0 0 24px rgba(249, 115, 22, 0.15);
    }
}

/* Fallback for browsers without @property — simple border-color animation */
@supports not (background: paint(something)) {
    .voice-transcribing {
        border-image: none !important;
        animation: voiceTranscribingFallback 2s ease-in-out infinite,
            voiceTranscribingGlow 1.5s ease-in-out infinite alternate !important;
    }

    @keyframes voiceTranscribingFallback {

        0%,
        100% {
            border-color: #8b5cf6 !important;
        }

        25% {
            border-color: #3b82f6 !important;
        }

        50% {
            border-color: #ec4899 !important;
        }

        75% {
            border-color: #f97316 !important;
        }
    }
}

/* ═══════════════════════════════════════════════════════════════
   TEXTAREA RAINBOW BORDER — permanent, always-on animated border
   Independent copy of voice-transcribing so it can be tweaked separately.
   ═══════════════════════════════════════════════════════════════ */
@property --textarea-rainbow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes textareaRainbowRotate {
    to {
        --textarea-rainbow-angle: 360deg;
    }
}

@keyframes textareaRainbowGlow {
    from {
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.3),
            0 0 16px rgba(59, 130, 246, 0.15);
    }

    to {
        box-shadow: 0 0 12px rgba(236, 72, 153, 0.3),
            0 0 24px rgba(249, 115, 22, 0.15);
    }
}

.ai-chat-input-container textarea,
.ai-chat-input-row textarea {
    border: 2px solid transparent !important;
    border-radius: 18px !important;
    /* Bordes redondeados! */
    background:
        linear-gradient(var(--input-bg, rgba(255, 255, 255, 0.05)), var(--input-bg, rgba(255, 255, 255, 0.05))) padding-box,
        linear-gradient(var(--textarea-rainbow-angle, 0deg),
            #8b5cf6, #3b82f6, #ec4899, #f97316, #8b5cf6) border-box !important;
    animation: textareaRainbowRotate 2.5s linear infinite,
        textareaRainbowGlow 1.5s ease-in-out infinite alternate;
}

.ai-chat-input-container textarea:focus,
.ai-chat-input-row textarea:focus {
    background:
        linear-gradient(var(--bg-medium, #1e2430), var(--bg-medium, #1e2430)) padding-box,
        linear-gradient(var(--textarea-rainbow-angle, 0deg),
            #8b5cf6, #3b82f6, #ec4899, #f97316, #8b5cf6) border-box !important;
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO PROCESSING MODAL
   ═══════════════════════════════════════════════════════════════ */
.video-processing-modal {
    z-index: 100000;
}

.video-processing-dialog {
    max-width: 420px;
    padding: 0;
    border-radius: 16px;
    background: var(--video-modal-bg);
    border: 1px solid var(--video-modal-border);
    box-shadow: var(--video-modal-shadow);
    overflow: hidden;
}

.video-processing-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    padding-right: 60px;
    /* Espacio para el botón de cerrar */
    background: var(--video-modal-header-bg);
    border-bottom: 1px solid var(--video-modal-border-subtle);
}

.video-processing-header .video-icon {
    font-size: 32px;
    animation: videoIconPulse 2s ease-in-out infinite;
}

.video-processing-header .video-modal-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--video-modal-close-bg);
    border: 1px solid var(--video-modal-close-border);
    color: var(--video-modal-text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.video-processing-header .video-modal-close:hover {
    background: var(--video-modal-close-bg);
    color: var(--video-modal-text);
}

.video-processing-modal.minimized {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

/* ── Fade-out animation for modals ── */
.video-processing-modal.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* ── Fly-to-bubble animation (modal → processing bubble) ── */
.video-processing-modal.fly-to-bubble {
    pointer-events: none;
    transition: background 500ms ease, backdrop-filter 500ms ease, -webkit-backdrop-filter 500ms ease;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.video-processing-modal.fly-to-bubble .batch-context-dialog,
.video-processing-modal.fly-to-bubble .video-processing-dialog {
    animation: flyToBubble 750ms cubic-bezier(0.4, 0.0, 0.8, 0.3) forwards;
}

@keyframes flyToBubble {
    0% {
        opacity: 1;
        transform: scale(1);
        border-radius: 16px;
    }
    65% {
        opacity: 0.4;
        transform: scale(0.12);
        border-radius: 50%;
    }
    100% {
        opacity: 0;
        transform: scale(0.03);
        border-radius: 50%;
    }
}

/* ── T10: Batch Context Modal (per-file context input) ── */
.batch-context-dialog {
    max-width: 900px;
    width: 92%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.batch-context-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.batch-context-intro {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--video-modal-text, var(--text-primary));
    margin: 0 0 12px 0;
}

.batch-context-original {
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    background: var(--hover-overlay, rgba(0, 0, 0, 0.04));
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 16px 0;
    border-left: 3px solid var(--ai-accent, #60a5fa);
}

.batch-context-file-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.batch-context-file-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.batch-context-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-context-file-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.batch-context-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
}

.batch-context-file-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--video-modal-text, var(--text-primary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.batch-context-textarea {
    width: 100%;
    min-height: 48px;
    max-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    background: var(--video-modal-close-bg, rgba(0, 0, 0, 0.04));
    color: var(--video-modal-text, var(--text-primary));
    font-size: 0.85rem;
    line-height: 1.4;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.batch-context-textarea:focus {
    outline: none;
    border-color: var(--ai-accent, #60a5fa);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}

.batch-context-textarea::placeholder {
    color: var(--text-muted, #999);
    font-style: italic;
}

/* ── Textarea wrapper (for mic hint icon positioning) ── */
.batch-context-textarea-wrapper {
    position: relative;
    width: 100%;
}

html[data-platform="mobile"] .batch-context-textarea-wrapper .batch-context-textarea {
    padding-right: 38px;
}

/* ── Mic hint button — MOBILE ONLY ── */
.batch-context-mic-hint {
    display: none; /* Hidden on desktop */
}

html[data-platform="mobile"] .batch-context-mic-hint {
    display: flex;
    position: absolute;
    right: 6px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
    opacity: 0.65;
}

html[data-platform="mobile"] .batch-context-mic-hint:hover {
    background: rgba(34, 197, 94, 0.25);
    transform: scale(1.15);
    opacity: 1;
}

html[data-platform="mobile"] .batch-context-mic-hint:active {
    transform: scale(0.95);
}

.batch-context-mic-hint svg {
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   DICTATION HINT POPUP
   ══════════════════════════════════════════════════════════ */

.dictation-hint-overlay {
    position: fixed;
    inset: 0;
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dictation-hint-overlay.open {
    opacity: 1;
}

.dictation-hint-overlay.closing {
    opacity: 0;
}

.dictation-hint-popup {
    width: 90%;
    max-width: 380px;
    max-height: 80vh;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-dark, #1a1e2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dictation-hint-overlay.open .dictation-hint-popup {
    transform: scale(1) translateY(0);
}

.dictation-hint-overlay.closing .dictation-hint-popup {
    transform: scale(0.9) translateY(20px);
}

.dictation-hint-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(14, 165, 233, 0.15));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dictation-hint-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #e4e8f0);
}

.dictation-hint-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #aaa);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.dictation-hint-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.dictation-hint-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary, #b0b8c8);
}

.dictation-hint-intro {
    margin: 0 0 12px;
}

.dictation-hint-recommend {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.08);
    border-left: 3px solid #22c55e;
    font-size: 12.5px;
    color: var(--text-primary, #e4e8f0);
}

.dictation-hint-platform {
    margin-bottom: 14px;
}

.dictation-hint-platform h4 {
    margin: 0 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #e4e8f0);
}

.dictation-hint-platform ol {
    margin: 0;
    padding-left: 8px;
    list-style: none;
}

.dictation-hint-platform li {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12.5px;
    line-height: 1.45;
}

.dictation-hint-platform li b {
    color: var(--text-primary, #e4e8f0);
}

.dictation-hint-platform li i {
    opacity: 0.75;
    font-size: 12px;
}

.dictation-hint-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
}

.dictation-hint-ok {
    padding: 10px 32px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #0ea5e9);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.dictation-hint-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

.dictation-hint-ok:active {
    transform: translateY(0);
}

/* Light theme */
[data-theme^="light"] .dictation-hint-popup {
    background: var(--bg-light, #fff);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme^="light"] .dictation-hint-body {
    color: var(--text-secondary, #555);
}

[data-theme^="light"] .dictation-hint-platform li {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.batch-context-submit {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 4px auto 0;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
    transition: all 0.2s ease;
}

.batch-context-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
    background: linear-gradient(135deg, #34d369, #22c55e);
}

.batch-context-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

@keyframes videoIconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.video-processing-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--video-modal-text);
}

.video-processing-content {
    padding: 24px;
}

.video-intro-message {
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--video-modal-text-muted, rgba(100, 80, 120, 0.8));
    margin: 0 0 16px 0;
    padding: 10px 16px;
    background: linear-gradient(135deg,
            rgba(139, 92, 246, 0.06) 0%,
            rgba(59, 130, 246, 0.04) 100%);
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.12);
    animation: introFadeIn 0.6s ease-out;
}

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

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

.video-filename {
    text-align: center;
    font-size: 14px;
    color: var(--video-modal-text-muted);
    margin: 0 0 20px 0;
    padding: 8px 16px;
    background: var(--video-modal-surface);
    border-radius: 8px;
    word-break: break-all;
}

.video-progress-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.video-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--video-modal-progress-track);
    border-radius: 4px;
    overflow: hidden;
}

.video-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8b5cf6, #3b82f6);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.video-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #8b5cf6;
    min-width: 40px;
    text-align: right;
}

.video-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.video-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--video-modal-surface);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.video-step.pending {
    opacity: 0.4;
}

.video-step.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
    opacity: 1;
}

.video-step.active .step-icon {
    animation: stepIconBounce 1s ease-in-out infinite;
}

.video-step.active .step-text {
    animation: stepTextSlideIn 0.5s ease-out;
}

@keyframes stepTextSlideIn {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

@keyframes stepIconBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.video-step.completed {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    opacity: 1;
}

.video-step.completed .step-icon::after {
    content: ' ✓';
    color: #22c55e;
}

.video-step .step-icon {
    font-size: 20px;
}

.video-step .step-text {
    font-size: 14px;
    color: var(--video-modal-text);
}

.video-hint {
    text-align: center;
    font-size: 12px;
    color: var(--video-modal-text);
    margin: 20px 0 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO RESULT CARD
   ═══════════════════════════════════════════════════════════════ */
.video-result-card {
    background: var(--video-card-bg);
    border: 1px solid var(--video-card-border);
    border-radius: 12px;
    padding: 16px;
    margin: 8px 0;
}

.video-result-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.video-result-icon {
    font-size: 32px;
}

.video-result-title h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--video-card-text);
}

.video-result-meta {
    font-size: 12px;
    color: var(--video-card-text-muted);
}

.video-result-summary {
    font-size: 14px;
    line-height: 1.5;
    color: var(--video-card-text);
    margin-bottom: 16px;
    padding: 12px;
    background: var(--video-card-surface);
    border-radius: 8px;
}

.video-frames-preview {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding: 4px 0;
}

.video-frame-preview {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.video-frame-preview img {
    width: 120px;
    height: 68px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid var(--video-card-border);
}

.video-frame-preview span {
    font-size: 11px;
    color: var(--video-card-text-muted);
}

.video-result-actions {
    display: flex;
    gap: 8px;
}

.btn-view-document {
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-view-document:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}


/* ═══════════════════════════════════════════════════════════════
   VIDEO DOCUMENT MODAL
   ═══════════════════════════════════════════════════════════════ */
.video-document-modal {
    z-index: 100001;
}

.video-document-dialog {
    max-width: 900px;
    max-height: 90vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.video-document-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.video-document-header h3 {
    margin: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-document-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
}

.video-document-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.video-document-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.video-document-content .chapter {
    margin-bottom: 24px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border-left: 3px solid #8b5cf6;
}

.video-document-content .chapter-timestamp {
    font-size: 12px;
    color: #8b5cf6;
    font-weight: 600;
    margin-bottom: 8px;
}

.video-document-content .chapter-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
}

.video-document-content .chapter-frame {
    margin-top: 12px;
}

.video-document-content .chapter-frame img {
    max-width: 100%;
    border-radius: 8px;
    border: 2px solid rgba(139, 92, 246, 0.3);
}

.video-document-content .chapter-frame-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 8px;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE: Aumentar tamaño de fuentes para mejor legibilidad
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Mensajes del chat */
    .ai-chat-message {
        font-size: 16px;
    }

    .ai-chat-message p,
    .ai-chat-message li {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Input de chat */
    .ai-chat-input textarea {
        font-size: 16px;
    }

    /* Títulos y headers */
    .ai-chat-header h3 {
        font-size: 18px;
    }

    /* Botones de modo */
    .mode-button-label {
        font-size: 14px;
    }

    /* Metadata de mensajes */
    .ai-chat-message-meta {
        font-size: 12px;
    }

    /* Sugerencias */
    .ai-suggestions button {
        font-size: 14px;
    }

    /* Código en mensajes */
    .ai-chat-message code {
        font-size: 14px;
    }

    .ai-chat-message pre code {
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RAG DEBUG LOG MODAL (Prompt / Reranker)
   Mobile: fullscreen + no rounded outer borders
   Note: This modal is created dynamically with inline styles in `aiMessages.js`,
   so we use `!important` to override.
   ═══════════════════════════════════════════════════════════════ */
html[data-platform="mobile"] .rag-debug-modal {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

html[data-platform="mobile"] .rag-debug-modal .rag-debug-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

html[data-platform="mobile"] .rag-debug-modal .rag-debug-header {
    padding: 16px 14px !important;
}

html[data-platform="mobile"] .rag-debug-modal .rag-debug-content {
    padding: 14px 14px 16px !important;
}

/* Fallback: if viewport is narrow but html[data-platform] isn't set */
@media (max-width: 700px) {
    .rag-debug-modal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .rag-debug-modal .rag-debug-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .rag-debug-modal .rag-debug-header {
        padding: 16px 14px !important;
    }

    .rag-debug-modal .rag-debug-content {
        padding: 14px 14px 16px !important;
    }
}

/* ============================================
   FUN TOOLTIP (for share-before-chat, etc.)
   ============================================ */
.fun-tooltip {
    position: fixed;
    z-index: 99999999;
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(45, 35, 65, 0.95));
    color: #f0e6ff;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    width: 260px;
    border: 1px solid rgba(180, 130, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 12px rgba(180, 130, 255, 0.15);
    backdrop-filter: blur(12px);
    animation: funTooltipIn 0.3s ease-out;
    pointer-events: none;
}

.fun-tooltip.fade-out {
    animation: funTooltipOut 0.4s ease-in forwards;
}

@keyframes funTooltipIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }

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

@keyframes funTooltipOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(6px) scale(0.95);
    }
}

/* ============================================
   WELCOME DASHBOARD (chatWelcomeDashboard.js)
   ============================================ */

.wdb-wrapper {
    max-width: 100% !important;
    width: 100%;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Hide dashboard in desktop chat; it will be accessed via the top-bar bell */
@media (min-width: 769px) {

    .ai-chat-messages .wdb-wrapper,
    #chat-messages .wdb-wrapper,
    #panelChatMessages .wdb-wrapper {
        display: none !important;
    }

    /* Hide the mobile search bar from the PC version */
    #wdbSearchContainer {
        display: none !important;
    }
}

/* Mobile: show dashboard ABOVE the greeting bubble */
@media (max-width: 768px) {

    .ai-chat-messages>.wdb-wrapper,
    #panelChatMessages>.wdb-wrapper {
        order: -1;
    }
}

.wdb-root {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.wdb-subtitle {
    margin: 0 0 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
    color: var(--ai-text);
    padding: 0 2px;
}

/* ── Sections container ── */
.wdb-sections {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 10px;
    overflow: hidden;
}

/* ── Section ── */
.wdb-section {
    background: var(--section-bg);
    border-left: 3px solid var(--accent);
    border-radius: 0;
    overflow: hidden;
    transition: background 0.2s;
}

.wdb-section:first-child {
    border-radius: 8px 8px 0 0;
}

.wdb-section:last-child {
    border-radius: 0 0 8px 8px;
}

/* ── Section header (the clickable row) ── */
.wdb-section-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.wdb-section-header:hover {
    background: var(--hover-overlay);
}

.wdb-icon {
    font-size: 1.35rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.wdb-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.wdb-label {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ai-text);
}

.wdb-badge {
    background: #22C55E;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 99px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.wdb-chevron {
    font-size: 1.1rem;
    opacity: 0.45;
    transition: transform 0.2s;
    flex-shrink: 0;
    line-height: 1;
    font-weight: 300;
}

.wdb-section-header.open .wdb-chevron {
    transform: rotate(90deg);
}

.wdb-section-header.open::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent, var(--accent-primary, #60a5fa)) 0%, transparent 100%);
    z-index: 5;
    pointer-events: none;
}

/* ── Open button (↗) — appears between badge and chevron ── */
.wdb-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    padding: 0;
}

.wdb-open-btn:hover {
    background: var(--accent, #60a5fa);
    color: #fff;
    border-color: var(--accent, #60a5fa);
    transform: scale(1.1);
}

[data-theme^="light"] .wdb-open-btn {
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.35);
}

[data-theme^="light"] .wdb-open-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.wdb-section-body {
    border-top: 1px solid var(--ai-border);
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.wdb-section-body[hidden] {
    display: none;
}

.wdb-section-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent, var(--accent-primary, #60a5fa)) 0%, transparent 100%);
    z-index: 5;
    pointer-events: none;
}

/* ── Individual item ── */
.wdb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 16px;
    border-bottom: 1px solid var(--ai-border);
    cursor: pointer;
    transition: background 0.15s;
}

.wdb-item:last-child {
    border-bottom: none;
}

.wdb-item:hover {
    background: var(--hover-overlay);
}

.wdb-tap-animate {
    position: relative !important;
    overflow: hidden !important;
}

@keyframes wdbRippleAnim {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0.9;
        filter: blur(0px);
    }
    100% {
        transform: translate(-50%, -50%) scale(8);
        opacity: 0;
        filter: blur(4px);
    }
}

.wdb-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, var(--accent-primary, #60a5fa));
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    animation: wdbRippleAnim 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.wdb-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.wdb-item-title {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ai-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wdb-item-preview {
    font-size: 0.75rem;
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wdb-item-date {
    font-size: 0.7rem;
    opacity: 0.4;
    flex-shrink: 0;
    white-space: nowrap;
}

.wdb-empty {
    padding: 10px 16px;
    font-size: 0.78rem;
    opacity: 0.4;
    color: var(--ai-text);
    font-style: italic;
}

/* ── Email filter toggle ── */
.wdb-toggle-label {
    font-weight: 500;
    /* Dark themes: white text */
    color: rgba(255, 255, 255, 0.92);
}

.wdb-toggle-track {
    /* Dark themes: semi-transparent white track */
    background: rgba(255, 255, 255, 0.15);
}

/* Light themes: adapt to dark text */
[data-theme^="light"] .wdb-toggle-label {
    color: var(--text-secondary, #4a5568);
}

[data-theme^="light"] .wdb-toggle-track {
    /* Light themes: use accent color tinted track */
    background: color-mix(in srgb, var(--accent) 18%, rgba(0, 0, 0, 0.06));
}

/* ── Email items: date above title, full-width summary ── */
.wdb-item[data-type="email"] {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.wdb-item[data-type="email"] .wdb-item-date {
    order: -1;
    align-self: flex-end;
    font-size: 0.68rem;
    opacity: 0.45;
    margin-bottom: 0;
}

.wdb-item[data-type="email"] .wdb-item-body {
    width: 100%;
}

.wdb-item[data-type="email"] .wdb-item-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.wdb-item[data-type="email"] .wdb-item-preview {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    opacity: 0.65;
    line-height: 1.4;
}

/* ── Footer ── */
.wdb-footer {
    padding: 10px 4px 0;
    border-top: 1px solid var(--ai-border);
    margin-top: 4px;
}

.wdb-footer-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 6px;
    opacity: 0.7;
    color: var(--ai-text);
}

.wdb-footer-list {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wdb-footer-list li {
    font-size: 0.78rem;
    opacity: 0.55;
    color: var(--ai-text);
    line-height: 1.4;
}

/* ============================================
   AI TIP BUBBLE (.chat-message.ai.ai-tip)
   Appears randomly after AI responses.
   ============================================ */

.chat-message.ai-tip {
    border-left-color: #F59E0B !important;
    background: rgba(245, 158, 11, 0.06) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.ai-tip-badge {
    margin-left: auto;
    background: #F59E0B;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 2px 8px;
    flex-shrink: 0;
}

/* Light theme tip adaption */
[data-theme="light-midday"] .chat-message.ai-tip,
[data-theme="light-sunset"] .chat-message.ai-tip {
    background: rgba(245, 158, 11, 0.08) !important;
}



/* ============================================
   AI TIPS INLINE
   ============================================ */
.ai-tip-inline {
    background: rgba(255, 179, 71, 0.05);
    /* very subtle yellow/orange tint */
    border: 1px solid rgba(255, 179, 71, 0.2);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-tip-inline-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-tip-inline-icon {
    font-size: 1.1rem;
}

.ai-tip-inline-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
    flex: 1;
}

.ai-tip-inline-badge {
    background: var(--accent-primary, #dda030);
    color: #111;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-tip-inline-body {
    color: var(--text-secondary, #e0e0e0);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ai-tip-inline-body p {
    margin: 0 0 8px 0;
}

.ai-tip-inline-body p:last-child {
    margin: 0;
}

/* ============================================================
   LIGHT THEME — Chat panel colour corrections
   All dark-assuming hardcoded values are overridden here.
   Selector [data-theme^="light"] matches both light-midday
   and light-sunset.
   ============================================================ */

/* ── Panel root ── */
[data-theme^="light"] .ai-chat-panel {
    background: var(--ai-bg-dark, #ffffff);
    border-color: var(--ai-border, rgba(0, 0, 0, 0.12));
}

/* ── Messages area & chat messages ── */
[data-theme^="light"] .ai-chat-messages,
[data-theme^="light"] #panelChatMessages,
[data-theme^="light"] #chatMessages {
    background: transparent;
}

[data-theme^="light"] .chat-message {
    color: var(--ai-text);
}

[data-theme^="light"] .chat-message.ai {
    background: var(--ai-accent-light, rgba(56, 178, 172, 0.06));
}

[data-theme^="light"] .chat-message.user {
    background: var(--ai-user-bg, rgba(237, 100, 166, 0.07));
}

/* ── Input textarea ── */
[data-theme^="light"] .ai-chat-input-container,
[data-theme^="light"] .ai-chat-input-row {
    background: var(--ai-bg-dark, #ffffff);
    border-color: var(--ai-border, rgba(0, 0, 0, 0.12));
}

[data-theme^="light"] .ai-chat-input-row input,
[data-theme^="light"] .ai-chat-input-row textarea,
[data-theme^="light"] .ai-chat-input-container input,
[data-theme^="light"] .ai-chat-panel .ai-chat-input-container textarea,
[data-theme^="light"] .ai-chat-panel textarea#panelChatInput {
    background: var(--input-bg, #ffffff);
    color: var(--ai-text);
    border-color: var(--ai-border);
}

[data-theme^="light"] .ai-chat-input-row input::placeholder,
[data-theme^="light"] .ai-chat-input-row textarea::placeholder,
[data-theme^="light"] .ai-chat-input-container input::placeholder,
[data-theme^="light"] .ai-chat-input-container textarea::placeholder {
    color: var(--ai-text-muted, #718096);
}

/* ── Mode banner ── */
[data-theme^="light"] .ai-mode-banner {
    background: var(--ai-bg-darker, #f0f4f8);
    border-color: var(--ai-border);
    color: var(--ai-text-muted);
}

/* ── Progress bar track (multi-file loading) ── */
[data-theme^="light"] .multi-file-loading-progress .progress-bar {
    background: rgba(0, 0, 0, 0.08);
}

/* ── KaTeX display math ── */
[data-theme^="light"] .msg-content .katex-display {
    background: rgba(0, 0, 0, 0.04);
}

/* ── Attachment picker options ── */
[data-theme^="light"] .chat-attachment-option {
    background: var(--glass-bg, rgba(255, 255, 255, 0.9));
    border-color: var(--border-faint);
    color: var(--text-primary);
}

/* ── Inline AI tip blocks ── */
[data-theme^="light"] .ai-tip-inline-body {
    color: var(--text-secondary);
}

/* ── Step text in multi-file loading ── */
[data-theme^="light"] .loading-step .step-text {
    color: var(--ai-text);
}

/* ── Chat history sidebar items ── */
[data-theme^="light"] .history-item {
    color: var(--text-primary);
    border-color: var(--border-faint);
}

[data-theme^="light"] .history-item:hover,
[data-theme^="light"] .history-item.active {
    background: var(--ai-accent-light);
}

/* ── Processing status panel ── */
[data-theme^="light"] .ai-processing-status {
    background: var(--ai-bg-darker, #f0f4f8);
    border-color: var(--ai-border);
    color: var(--text-primary);
}

/* ── Greeting / welcome dashboard wrapper ── */
[data-theme^="light"] .wdb-section {
    /* Pastel suave = accent al 12% de opacidad sobre blanco */
    background: color-mix(in srgb, var(--accent) 11%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
    border-left-color: var(--accent) !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 10%, transparent);
    transition: background 0.2s, box-shadow 0.2s;
}

[data-theme^="light"] .wdb-section-header:hover {
    background: color-mix(in srgb, var(--accent) 16%, #ffffff) !important;
}

[data-theme^="light"] .wdb-item:hover {
    background: color-mix(in srgb, var(--accent) 14%, #ffffff) !important;
}

[data-theme^="light"] .wdb-item {
    border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

[data-theme^="light"] .wdb-item-title {
    color: var(--text-primary);
}

[data-theme^="light"] .wdb-item-preview,
[data-theme^="light"] .wdb-item-date,
[data-theme^="light"] .wdb-subtitle,
[data-theme^="light"] .wdb-empty {
    color: var(--text-muted);
}

[data-theme^="light"] .wdb-footer {
    color: var(--text-secondary);
    border-color: var(--border-faint);
}

[data-theme^="light"] .wdb-section-body {
    border-top-color: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   HAND PREFERENCE — Dashboard & input bar inversions
   ─────────────────────────────────────────────────────────────
   DESKTOP: Always behaves as right-hand (border-left accent,
            open button at end, input standard row).
   MOBILE:  Follows user's dominant hand preference.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hide chevron › globally (both hands) — it adds clutter ── */
.wdb-chevron {
    display: none !important;
}

/* ── Left-hand: move only the ↗ arrow to the start of the row (MOBILE ONLY) ── */
html[data-platform="mobile"][data-hand="left"] .wdb-open-btn {
    order: -1;
}

/* Border accent moves from left to right (MOBILE ONLY) */
html[data-platform="mobile"][data-hand="left"] .wdb-section {
    border-left: none;
    border-right: 3px solid var(--accent);
}

/* Light theme: keep border-right accent (MOBILE ONLY) */
html[data-platform="mobile"][data-hand="left"][data-theme^="light"] .wdb-section {
    border-left: none !important;
    border-right-color: var(--accent) !important;
}

/* ── Chat input container: Send button on the right, attach on the left (DEFAULT for PC & mobile right-hand) ── */
.ai-chat-input-container,
.ai-chat-input-row {
    flex-direction: row;
}

/* Left-hand: Send button on the left, attach on the right (MOBILE ONLY) ── */
html[data-platform="mobile"][data-hand="left"] .ai-chat-input-container,
html[data-platform="mobile"][data-hand="left"] .ai-chat-input-row {
    flex-direction: row-reverse;
}

/* ── PC/Desktop Layout Order ──────────────────────────────────────────────────
   Always fixed in this order on PC/Desktop:
   1. Textarea (input field)
   2. Attach button (+)
   3. Voice button (🎙️)
   4. Send button (➤)
   ─────────────────────────────────────────────────────────────────────────── */
html:not([data-platform="mobile"]) .ai-chat-input-container textarea,
html:not([data-platform="mobile"]) .ai-chat-input-row textarea {
    order: 1 !important;
}

html:not([data-platform="mobile"]) .ai-chat-input-container .ai-btn-attach,
html:not([data-platform="mobile"]) .ai-chat-input-row .ai-btn-attach {
    order: 2 !important;
}

html:not([data-platform="mobile"]) .ai-chat-input-container .ai-btn-voice,
html:not([data-platform="mobile"]) .ai-chat-input-row .ai-btn-voice {
    order: 3 !important;
    margin-right: 0 !important; /* Reset standard right margin on PC to keep spacing even */
}

html:not([data-platform="mobile"]) .ai-chat-input-container .ai-btn-send,
html:not([data-platform="mobile"]) .ai-chat-input-row .ai-btn-send {
    order: 4 !important;
}

/* ── PC/Desktop Expanded State Overlaps ──────────────────────────────────────
   Since the textarea is first (order 1) instead of in the middle on PC,
   we override the negative margins to grow to the right to fill the bar.
   ─────────────────────────────────────────────────────────────────────────── */
html:not([data-platform="mobile"]) .ai-chat-input-container.is-expanded textarea,
html:not([data-platform="mobile"]) .ai-chat-input-row.is-expanded textarea,
html:not([data-platform="mobile"]) .ai-chat-input-container.is-expanded textarea:focus,
html:not([data-platform="mobile"]) .ai-chat-input-row.is-expanded textarea:focus {
    margin-left: 0 !important;
    margin-right: calc(-100% - 8px) !important;
}

/* Fallback for narrow viewports where data-platform may not be set */
@media (max-width: 768px) {
    html[data-hand="left"] .wdb-open-btn {
        order: -1;
    }

    html[data-hand="left"] .wdb-section {
        border-left: none;
        border-right: 3px solid var(--accent);
    }

    html[data-hand="left"][data-theme^="light"] .wdb-section {
        border-left: none !important;
        border-right-color: var(--accent) !important;
    }

    html[data-hand="left"] .ai-chat-input-container,
    html[data-hand="left"] .ai-chat-input-row {
        flex-direction: row-reverse;
    }

    /* On narrow viewports, reset desktop-specific order rules so normal mobile
       flex-direction flow takes over. */
    html:not([data-platform="mobile"]) .ai-chat-input-container textarea,
    html:not([data-platform="mobile"]) .ai-chat-input-row textarea {
        order: 0 !important;
    }
    html:not([data-platform="mobile"]) .ai-chat-input-container .ai-btn-attach,
    html:not([data-platform="mobile"]) .ai-chat-input-row .ai-btn-attach {
        order: 0 !important;
    }
    html:not([data-platform="mobile"]) .ai-chat-input-container .ai-btn-voice,
    html:not([data-platform="mobile"]) .ai-chat-input-row .ai-btn-voice {
        order: 0 !important;
    }
    html:not([data-platform="mobile"]) .ai-chat-input-container .ai-btn-send,
    html:not([data-platform="mobile"]) .ai-chat-input-row .ai-btn-send {
        order: 0 !important;
    }
}

/* ============================================
   IMPL_024 — TOPIC EXPERT MODE
   Burbujas de arranque + chips de sugerencias
   cuando el usuario abre el chat desde un tema
   ============================================ */

/* Burbuja de bienvenida — badge "Modo Experto Activo" */
.topic-expert-greeting {
    border-left-color: #f59e0b !important;
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.06) 0%,
            var(--ai-accent-light) 100%) !important;
    animation: slideIn 0.3s ease-out;
}

.topic-expert-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: 8px;
}

.tec-icon {
    font-size: 0.85rem;
}

.tec-label {
    line-height: 1;
}

/* Burbuja de sugerencias / chips */
.topic-expert-suggestions {
    border-left-color: #6366f1 !important;
    background: var(--ai-accent-light) !important;
    animation: slideIn 0.35s ease-out 0.1s both;
}

.tec-hint {
    font-size: 0.8rem;
    opacity: 0.7;
    margin: 0 0 8px 0;
    font-weight: 500;
}

.tec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.tec-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
        transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.tec-chip:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.15);
}

.tec-chip:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Tema claro */
[data-theme^="light"] .topic-expert-greeting {
    background: linear-gradient(135deg,
            rgba(245, 158, 11, 0.07) 0%,
            var(--ai-accent-light) 100%) !important;
}

[data-theme^="light"] .topic-expert-context-badge {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.45);
    color: #d97706;
    /* Oscurecido para alto contraste */
}

[data-theme^="light"] .tec-chip {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.2);
}

[data-theme^="light"] .tec-chip:hover {
    background: rgba(99, 102, 241, 0.13);
    border-color: rgba(99, 102, 241, 0.45);
}

/* ─────────────────────────────────────────────────────────
   EXPERT MODES (Split Views) — Hide the (+) attach button 
   and allow the textarea to fully expand horizontally 
   ───────────────────────────────────────────────────────── */
[id*="SplitView"] .ai-btn-attach,
[class*="split-container"] .ai-btn-attach,
[id*="split"] .ai-btn-attach,
[class*="split-msg"] .ai-btn-attach,
.em-ai-split-chat .ai-btn-attach,
#splitChatContent .ai-btn-attach {
    display: none !important;
}

/* ─── Expert Mode textarea: EXPANDED STATE ───
   Strategy: Use position:absolute to take the textarea OUT of the flex
   flow when expanded. This completely avoids the fragile negative-margin
   trick that collides with the base rule's own margins.
   The textarea sits above the buttons via absolute positioning. */

/* Selectors cover all split-view variants (normal + :focus) */
[id*="SplitView"] .ai-chat-input-container.is-expanded textarea,
[class*="split-container"] .ai-chat-input-container.is-expanded textarea,
[id*="split"] .ai-chat-input-container.is-expanded textarea,
[class*="split-msg"] .ai-chat-input-container.is-expanded textarea,
.em-ai-split-chat .ai-chat-input-container.is-expanded textarea,
#splitChatContent .ai-chat-input-container.is-expanded textarea,
#msgSplitChatContent .ai-chat-input-container.is-expanded textarea,
#emailSplitChatContent .ai-chat-input-container.is-expanded textarea,
#paseoSplitChatContent .ai-chat-input-container.is-expanded textarea,
[id*="SplitView"] .ai-chat-input-container.is-expanded textarea:focus,
[class*="split-container"] .ai-chat-input-container.is-expanded textarea:focus,
[id*="split"] .ai-chat-input-container.is-expanded textarea:focus,
[class*="split-msg"] .ai-chat-input-container.is-expanded textarea:focus,
.em-ai-split-chat .ai-chat-input-container.is-expanded textarea:focus,
#splitChatContent .ai-chat-input-container.is-expanded textarea:focus,
#msgSplitChatContent .ai-chat-input-container.is-expanded textarea:focus,
#emailSplitChatContent .ai-chat-input-container.is-expanded textarea:focus,
#paseoSplitChatContent .ai-chat-input-container.is-expanded textarea:focus {
    /* Take out of flex flow — immune to margin collisions */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(100% + 10px) !important;
    width: 100% !important;
    /* Reset the base rule's negative margins that cause the shift */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Keep the visual properties from the base rule */
    height: 180px !important;
    transform: none !important;
    z-index: 200 !important;
    box-sizing: border-box !important;
}

/* Center send button smoothly via flex/relative properties */
[id*="SplitView"] .ai-chat-input-container .ai-btn-send,
[class*="split-container"] .ai-chat-input-container .ai-btn-send,
[id*="split"] .ai-chat-input-container .ai-btn-send,
[class*="split-msg"] .ai-chat-input-container .ai-btn-send,
.em-ai-split-chat .ai-chat-input-container .ai-btn-send,
#splitChatContent .ai-chat-input-container .ai-btn-send {
    position: relative !important;
    right: 0;
    width: 44px;
    /* Default collapsed width for calculation & transition */
    transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, width 300ms ease, right 300ms ease !important;
}

[id*="SplitView"] .ai-chat-input-container.is-expanded .ai-btn-send,
[class*="split-container"] .ai-chat-input-container.is-expanded .ai-btn-send,
[id*="split"] .ai-chat-input-container.is-expanded .ai-btn-send,
[class*="split-msg"] .ai-chat-input-container.is-expanded .ai-btn-send,
.em-ai-split-chat .ai-chat-input-container.is-expanded .ai-btn-send,
#splitChatContent .ai-chat-input-container.is-expanded .ai-btn-send {
    right: 0 !important;
    width: 100% !important;
    /* Widen nicely */
    z-index: 210 !important;
}

/* Paseo Program Button */
#paseoProgramBtnContainer {
    padding: 0 31px 8px 16px;
    /* Right padding handles scrollbar lane centering */
    display: none;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 100%;
    pointer-events: none;
    z-index: 100;
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms;
}

.ai-chat-input-container.is-expanded~#paseoProgramBtnContainer {
    transform: translateY(-205px);
}

/* ═══════════════════════════════════════════════════════════════
   SUPPORT MODE UI / UX EXTENSIONS
   ═══════════════════════════════════════════════════════════════ */

/* 1. Slow down loading dots in support mode */
.support .loading-dots span {
    animation-duration: 2.8s !important;
}
.support .loading-dots span:nth-child(1) {
    animation-delay: -0.64s !important;
}
.support .loading-dots span:nth-child(2) {
    animation-delay: -0.32s !important;
}

/* 2. Support Mode Controls Bar */
.support-controls-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 8px 12px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.04);
    border: 1px solid rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    z-index: 50;
    transition: all 0.3s ease;
}

.support-bar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    padding: 8px 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-color, #e2e8f0);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme^="light"] .support-bar-btn {
    color: #374151;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.support-bar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.support-bar-btn:active {
    transform: translateY(0);
}

.support-bar-btn.breathe-btn {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.08);
}
.support-bar-btn.breathe-btn:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
}

.support-bar-btn.help-btn {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
}
.support-bar-btn.help-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
}

.support-bar-btn.escape-btn {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
}
.support-bar-btn.escape-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
}

.support-bar-btn .btn-text {
    overflow: hidden;
    text-overflow: ellipsis;
}



/* 3. Speak to a Human Modal */
.support-help-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    animation: fadeInModal 0.25s ease-out;
}

.support-help-modal.closing {
    animation: fadeOutModal 0.25s ease-in forwards;
}

.support-help-dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    background: #1e293b;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUpModal 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme^="light"] .support-help-dialog {
    background: #ffffff;
    border: none;
    box-shadow: none;
}

.support-help-modal.closing .support-help-dialog {
    animation: slideDownModal 0.25s ease-in forwards;
}

.support-help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme^="light"] .support-help-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.support-help-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #e2e8f0;
}

[data-theme^="light"] .support-help-header h3 {
    color: #0f172a;
}

.support-help-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.2s;
}

.support-help-close:hover {
    color: #ef4444;
}

.support-help-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #cbd5e1;
}

[data-theme^="light"] .support-help-body {
    color: #475569;
}

.support-help-body p {
    margin: 0 0 16px 0;
}

.support-country-section {
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme^="light"] .support-country-section {
    background: rgba(0, 0, 0, 0.01);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.support-country-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
}

[data-theme^="light"] .support-country-section h4 {
    color: #1e293b;
}

.support-country-section ul {
    margin: 0;
    padding-left: 18px;
}

.support-country-section li {
    margin-bottom: 4px;
}

.support-help-note {
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.7;
    margin-top: 16px;
}

.support-help-footer {
    padding: 16px 20px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme^="light"] .support-help-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.support-btn-primary {
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    color: white;
    background: #10b981;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.support-btn-primary:hover {
    background: #059669;
}

/* 4. Guided Breathing Widget Overlay */
.support-breathing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
    animation: fadeInModal 0.25s ease-out;
}

.support-breathing-overlay.closing {
    animation: fadeOutModal 0.25s ease-in forwards;
}

.breathing-widget-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    padding: 32px 24px;
    text-align: center;
    background: #1e293b;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    animation: slideUpModal 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme^="light"] .breathing-widget-container {
    background: #ffffff;
    border: none;
    box-shadow: none;
}

.breathing-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

[data-theme^="light"] .breathing-close-btn {
    background: rgba(0, 0, 0, 0.03);
}

.breathing-close-btn:hover {
    background: #ef4444;
    color: white;
}

.breathing-widget-header h3 {
    margin: 0 0 16px 0;
    font-size: 1.25rem;
    color: #f1f5f9;
}

[data-theme^="light"] .breathing-widget-header h3 {
    color: #0f172a;
}

.breathing-selector {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 12px;
    margin-bottom: 24px;
    gap: 6px;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

[data-theme^="light"] .breathing-selector {
    background: rgba(0, 0, 0, 0.04);
}

.breathing-select-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.breathing-select-btn.active {
    background: #10b981;
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.breathing-animation-area {
    position: relative;
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.breathing-circle-wrapper {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.breathing-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #10b981;
    transform: scale(1);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.35);
}

.breathing-glow-ring {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px dashed rgba(16, 185, 129, 0.4);
    animation: spinRing 12s linear infinite;
}

.breathing-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    color: white;
    z-index: 10;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.breathing-instruction {
    margin-top: 16px;
    font-size: 1.15rem;
    font-weight: 500;
    color: #f1f5f9;
    min-height: 28px;
    transition: color 0.3s ease;
}

[data-theme^="light"] .breathing-instruction {
    color: #1e293b;
}

.breathing-tips {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.4;
    padding: 0 16px;
}

/* Animations Keyframes */
@keyframes spinRing {
    to { transform: rotate(360deg); }
}

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

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

@keyframes slideUpModal {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDownModal {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(40px); opacity: 0; }
}

/* Hide 'Insert response' button if there is no email composer active in the DOM */
body:not(:has(#emComposeBody)) .msg-insert-resp-btn {
    display: none !important;
}