/* * ======================================================================================
 * [PROMPTLAB] SWITCH.CSS - OPTIMIZED ARCHITECTURE v2060
 * ======================================================================================
 */

/* --- [SECTOR 1: CORE PHYSICS (BASE GEOMETRY)] --- */
.ring-btn {
    /* Estrutura */
    position: relative;
    width: 39px !important;
    height: 39px !important;
    border-radius: 50%;
    margin: 0 !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Material */
    background: none;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    z-index: 20;

    /* Cinética */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    perspective: 1000px;
    will-change: transform, opacity;

    /* [FIX] Elimina delay de 300ms em mobile */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Header switch-btn - cinzento */
#switch-btn.ring-btn {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 2px solid #666666 !important;
    box-shadow: none !important;
}





/* --- [SECTOR 2: HOLOGRAPHIC MASKS (ICONOGRAPHY MIGRATION)] --- */
/* 1. ESTRUTURA BASE (Estado Normal) */
/* Define aqui a cor que queres por defeito (ex: var(--accent)) */
#smart-btn .avatar-glow::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    
    /* [CORREÇÃO] Estado Normal = Accent */
    background-color: var(--accent); 
    
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
    z-index: 100;
    pointer-events: none;
}

/* 2. ESTADO ATIVO (Apenas quando o slider abre) */
/* Substitui a cor por var(--text) apenas neste contexto */
body.agenda-slider-open #smart-btn .avatar-glow::after {
    background-color: var(--text) !important;
}


/* Base Icon Structure inside Avatar Glow */
#smart-btn .avatar-glow::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 22px; height: 22px;
    
    /* [ALTERAÇÃO CRÍTICA] Cor do ícone = Cor do fundo da página */
    background-color: var(--accent); 
    
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
    pointer-events: none;
}

/* 2.1 Mode: Settings (Gear) */
#smart-btn.mode-settings .avatar-glow::after {
    opacity: 1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4l-55.6 17.8c-8.8 2.8-18.6 .3-24.5-6.8-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4c-1.1-8.4-1.7-16.9-1.7-25.5s.6-17.1 1.7-25.4l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2 5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8 12.2-2 24.7-3.1 37.4-3.1s25.2 1.1 37.4 3.1c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8 8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4l-55.6 17.8c-8.8 2.8-18.6 .3-24.5-6.8-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4c-1.1-8.4-1.7-16.9-1.7-25.5s.6-17.1 1.7-25.4l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2 5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8 12.2-2 24.7-3.1 37.4-3.1s25.2 1.1 37.4 3.1c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8 8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") no-repeat center / contain;
    animation: gear-spin 8s linear infinite; 
}

/* 2.2 Mode: Search (Magnifier) */
#smart-btn.mode-search .avatar-glow::after {
    opacity: 1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7' /%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' /%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7' /%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' /%3E%3C/svg%3E") no-repeat center / contain;
}

/* 2.2.1 Mode: Lock (Padlock - Closed) */
#smart-btn.mode-lock .avatar-glow::after {
    opacity: 1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}

/* 2.2.2 Mode: Lock Open (Padlock - Unlocked, opens to left) */
#smart-btn.mode-lock.lock-open .avatar-glow::after {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M17 11V7a5 5 0 0 0-9.9-1'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M17 11V7a5 5 0 0 0-9.9-1'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}

/* 2.3 Agenda Icon - Disponibilidade (default quando activeAgendaType === 'notes') - mostra ícone com linhas para ir para notas */
body.mode-agenda.agenda-type-notes:not(.nav-stack-active) #smart-btn:not(.mode-search):not(.mode-settings):not(.mode-edit) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3Cline x1='9' y1='10' x2='9' y2='22'%3E%3C/line%3E%3Cline x1='15' y1='10' x2='15' y2='22'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3Cline x1='9' y1='10' x2='9' y2='22'%3E%3C/line%3E%3Cline x1='15' y1='10' x2='15' y2='22'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain; }

/* 2.3.0 Agenda Icon - Notas/Texto (quando activeAgendaType === 'availability') - mostra ícone com check para ir para disponibilidade */
body.mode-agenda.agenda-type-availability:not(.nav-stack-active) #smart-btn:not(.mode-search):not(.mode-settings):not(.mode-edit) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3Cpath d='m9 16 2 2 4-4'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3Cpath d='m9 16 2 2 4-4'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}

/* 2.3 Agenda Icon - Fallback (ícone lista quando não há classe específica) */
body.mode-agenda:not(.agenda-type-notes):not(.agenda-type-availability):not(.nav-stack-active) #smart-btn:not(.mode-search):not(.mode-settings):not(.mode-edit):not(.mode-advanced) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

/* 2.3.1 Library List Icon Active (quando magnet track está aberto) */
body.mode-agenda.agenda-slider-open:not(.nav-stack-active) #smart-btn:not(.mode-search):not(.mode-settings):not(.mode-edit) .avatar-glow::after {
    background-color: var(--text) !important;
}

/* 2.3.2 Mode List Icon (smart button no modo list - usado em home e library) */
#smart-btn.mode-list:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

/* 2.3.7 Mode List Icon Active (quando slider está aberto - library ou home) */
body.library-slider-open #smart-btn.mode-list:not(.nav-stack-active) .avatar-glow::after,
body.home-slider-open #smart-btn.mode-list:not(.nav-stack-active) .avatar-glow::after {
    background-color: var(--text) !important;
}

/* Slider Open - Button shrinks (library ou home) */
body.library-slider-open #smart-btn,
body.home-slider-open #smart-btn {
    transform: scale(0.88) !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- [NOVAS FERRAMENTAS: EDIT, PALETTE & MAGIC] --- */

/* D. Mode: Edit (Pencil icon - for article authors) */
#smart-btn.mode-edit .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;
    /* Filled pencil/edit icon - Font Awesome style */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0z'/%3E%3C/svg%3E") no-repeat center / 85%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0z'/%3E%3C/svg%3E") no-repeat center / 85%;
}

/* Edit mode active/clicked state */
#smart-btn.mode-edit.receiving-power .avatar-glow::after,
#smart-btn.mode-edit:active .avatar-glow::after {
    background-color: var(--text) !important;
}

/* Edit mode active - button glows with accent color */
body.reader-edit-mode #smart-btn.mode-edit .avatar-glow::after {
    background-color: var(--accent) !important;
}

body.reader-edit-mode #smart-btn.mode-edit .avatar-glow {
    animation: edit-btn-glow 2s ease-in-out infinite;
}

@keyframes edit-btn-glow {
    0%, 100% { box-shadow: 0 0 8px 2px var(--accent); }
    50% { box-shadow: 0 0 20px 6px var(--accent); }
}

/* Palette mode - REMOVIDO - Funcionalidade agora no logo */

/* B. Modo Brain (AI Level) - Ícone cérebro com número */
#smart-btn.mode-brain:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;

    /* Ícone: Cérebro - Font Awesome (MIT License) */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56H120c-30.9 0-56-25.1-56-56V56C64 25.1 89.1 0 120 0h64zm88 56c0-30.9 25.1-56 56-56h64c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56H328c-30.9 0-56-25.1-56-56V56zM120 96h64v64H120V96zm0 96h64v64H120V192zm0 96h64v64H120V288zm0 96h64v64H120V384zm208-288h64v64H328V96zm0 96h64v64H328V192zm0 96h64v64H328V288zm0 96h64v64H328V384z'/%3E%3C/svg%3E") no-repeat center / 75%;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56H120c-30.9 0-56-25.1-56-56V56C64 25.1 89.1 0 120 0h64zm88 56c0-30.9 25.1-56 56-56h64c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56H328c-30.9 0-56-25.1-56-56V56zM120 96h64v64H120V96zm0 96h64v64H120V192zm0 96h64v64H120V288zm0 96h64v64H120V384zm208-288h64v64H328V96zm0 96h64v64H328V192zm0 96h64v64H328V288zm0 96h64v64H328V384z'/%3E%3C/svg%3E") no-repeat center / 75%;
}

/* AI Level indicator badge on brain icon */
#smart-btn.mode-brain[data-ai-level]::before {
    content: attr(data-ai-level);
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: var(--accent);
    color: var(--bg-color, #000);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

/* C. Modo Magic (Sparkles) - Deslocado 0.03px à Esquerda */
#smart-btn.mode-magic:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;

    /* [AJUSTE] Posição alterada para 'calc(50% - 0.03px) 50%' */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z'/%3E%3C/svg%3E") no-repeat calc(50% - 0.03px) 50% / 90%;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z'/%3E%3C/svg%3E") no-repeat calc(50% - 0.03px) 50% / 90%;
}

/* C. Modo Transmit (Plus - Workspace) */
#smart-btn.mode-transmit:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;

    /* Ícone: Plus (+) */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") no-repeat center / 75%;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") no-repeat center / 75%;
}

/* D. Modo Add (Plus - Home) */
#smart-btn.mode-add:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;

    /* Ícone: Plus (+) */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") no-repeat center / 75%;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") no-repeat center / 75%;
}

/* E. Modo Advanced (Agenda Avançada) */
#smart-btn.mode-advanced:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;

    /* Ícone: Calendário com colunas (igual ao agenda-type-notes) */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3Cline x1='9' y1='10' x2='9' y2='22'%3E%3C/line%3E%3Cline x1='15' y1='10' x2='15' y2='22'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3Cline x1='9' y1='10' x2='9' y2='22'%3E%3C/line%3E%3Cline x1='15' y1='10' x2='15' y2='22'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

/* F. Modo Categories (Folder - Workspace) */
#smart-btn.mode-categories:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;
    transform: translate(-50%, -50%);

    /* Ícone: Folder/Pasta - Design limpo */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z'/%3E%3C/svg%3E") no-repeat center / 75%;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z'/%3E%3C/svg%3E") no-repeat center / 75%;
}

/* Categories open state - button shrinks when magnet track is open (--accent color) */
body.workspace-categories-mode #smart-btn.mode-categories:not(.nav-stack-active) {
    transform: scale(0.9) !important;
}

/* Categories closed state - icon becomes --text color, button returns to normal size */
#smart-btn.mode-categories.categories-closed:not(.nav-stack-active) .avatar-glow::after {
    background-color: var(--text) !important;
}

/* [STATE: RETURN / BACK NAVIGATION] */
body.nav-stack-active #smart-btn .avatar-glow::after {
    opacity: 1 !important;
    background-color: var(--accent) !important;
    
    /* [MODIFICADO] Seta Curvada com stroke-width='3.5' */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11'/%3E%3C/svg%3E") no-repeat center / contain;
    
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translate(-50%, -50%) scale(1);
}

/* Efeito Hover na Seta */
body.nav-stack-active #smart-btn:hover .avatar-glow::after {
    transform: translate(-50%, -50%) scale(1) translateX(0px);
}


/* --- [SECTOR 3: KINETIC ENGINE (ANIMATIONS)] --- */
@keyframes gear-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- [SECTOR 4: GLOBAL CONTEXT (SEARCH REACTOR)] --- */

/* 4.1 Physics Engine (Nav Tools) */
.nav-tools { transform-style: preserve-3d; }
#smart-btn, #upload-btn-wrapper, .nav-tools .nav-btn {
    transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), background 0.3s ease, box-shadow 0.3s ease;
    will-change: transform, opacity;
    transform-origin: center center;
}

/* 4.2 Ghost Protocol (Vanish State) */
.ui-vanish #upload-btn-wrapper,
.ui-vanish .nav-btn,
body.header-search-mode .brand,
body.header-search-mode #upload-btn-wrapper,
body.header-search-mode .separator {
    display: none !important; /* Force vanish logic update */
    opacity: 0 !important;
    transform: scale(0.5) !important;
    visibility: hidden !important; 
    pointer-events: none !important;
}

/* 4.3 Search Input Injection */
body.header-search-mode #header-search-field {
    display: block !important;
    opacity: 1 !important;
    animation: fadeIn 0.3s ease forwards;
    
    /* [CORREÇÃO] Removemos position absolute para usar o fluxo natural */
    position: relative !important;
    flex-grow: 1 !important; /* Ocupa todo o espaço disponível */
    margin: 0 10px !important; /* Margem segura nas laterais */
    width: auto !important; /* Deixa o flexbox decidir a largura */
}

/* Garante que o botão de fechar (agora rodado) fica fixo à direita */
body.header-search-mode .nav-tools {
    display: flex !important;
    flex-shrink: 0 !important; /* Impede que seja esmagado */
    margin-left: auto !important; /* Empurra para a direita */
    z-index: 1000 !important;
    width: auto !important;
}

/* 4.4 The "X" Transformation (Auth Button -> Close) */
body.header-search-mode #smart-btn {
    background: transparent !important;       
    box-shadow: none !important;              
    border-color: transparent !important;     
    opacity: 1 !important;           
    visibility: visible !important;  
    pointer-events: auto !important; 
    transform: rotate(90deg) scale(1) !important; 
}

/* Hide Avatar */
body.header-search-mode #smart-btn .avatar-glow,
body.header-search-mode #smart-btn svg {
    opacity: 0 !important;
    transform: scale(0) rotate(-90deg) !important; 
    transition: all 0.1s ease !important;
}

/* Draw "X" Lines */
#smart-btn::before, #smart-btn::after {
    content: ''; position: absolute;
    width: 0px; height: 2.5px; 
    background-color: var(--text);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: width 0.3s ease 0.2s, transform 0.3s ease 0.2s;
    border-radius: 4px;
    pointer-events: none;
}

body.header-search-mode #smart-btn::before { width: 20px; transform: translate(-50%, -50%) rotate(45deg); }
body.header-search-mode #smart-btn::after  { width: 20px; transform: translate(-50%, -50%) rotate(-45deg); }



body.header-search-mode #switch-btn {
    opacity: 0 !important;
    transform: scale(0.1) rotate(180deg) !important;
    pointer-events: none;
}



/* [ARCHITECT FIX] REPLICA EXATA DA FÍSICA ORIGINAL */
.pulse-remote {
    transform: scale(0.1) !important;
    filter: brightness(0.8) !important;
    box-shadow: none !important;

    /* A tua curva de suavidade específica */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* [DOCK CLICK] Animação mais lenta para cliques na dock */
.pulse-dock {
    transform: scale(0.1) !important;
    filter: brightness(0.8) !important;
    box-shadow: none !important;

    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}



/* 1. Física do Botão (O código que já tinhas) */
body.agenda-slider-open #smart-btn {
    transform: scale(0.88) !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* [WORKSPACE TRANSMIT STATES] */
#smart-btn.transmitting {
    animation: transmit-pulse 0.8s ease-in-out infinite;
}

#smart-btn.transmit-success {
    animation: transmit-success 0.5s ease forwards;
}

#smart-btn.transmit-error {
    animation: transmit-error 0.5s ease forwards;
}

@keyframes transmit-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
    }
    50% {
        transform: scale(0.92);
        box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.6);
    }
}

@keyframes transmit-success {
    0% { transform: scale(1); }
    30% { transform: scale(0.85); }
    60% {
        transform: scale(1.15);
        box-shadow: 0 0 30px rgba(0, 255, 136, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
    }
}

@keyframes transmit-error {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}


/* =====================================================================
   [WORKSPACE ADD MODE] Header transformation when adding new items
   ===================================================================== */

/* Default state: brand items visible, workspace-add-controls hidden */
.brand-default-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.workspace-add-controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex: 1;
    margin-left: 20px;
    pointer-events: auto;
}

/* Workspace Add Mode Active */
body.workspace-add-mode .brand-default-item {
    display: none !important;
}

body.workspace-add-mode .workspace-add-controls {
    display: flex;
    opacity: 1;
    transform: translateX(0);
}

/* Workspace Tab Ring Buttons */
.workspace-add-controls .ring-btn {
    width: 39px !important;
    height: 39px !important;
    background: none !important;
    backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

.workspace-add-controls .ring-btn:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05);
}

.workspace-add-controls .ring-btn:active {
    transform: scale(0.95);
}

/* Suggestion state - dashed border, subtle appearance */
.workspace-add-controls .ring-btn.suggestion {
    border: 2px dashed rgba(255, 255, 255, 0.15) !important;
    opacity: 0.6;
}

.workspace-add-controls .ring-btn.suggestion:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    opacity: 0.9;
}

/* Tab Door state - solid, shows it's an active tab entry point */
.workspace-add-controls .ring-btn.tab-door {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    opacity: 1;
}

/* Active tab - highlighted with accent color */
.workspace-add-controls .ring-btn.tab-door.active {
    border-color: var(--accent) !important;
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4) !important;
}

/* Divider bar to the left of switch-btn when workspace-add-mode is active */
body.workspace-add-mode #switch-btn::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
}

/* =====================================================================
   [WORKSPACE CATEGORIES MODE] Header transformation for categories
   ===================================================================== */

/* Default state: workspace-categories-controls hidden (same as library-controls-container) */
.workspace-categories-controls {
    display: none !important;
    position: absolute;
    top: 0;
    height: 100%;
    left: 20px;
    right: 20px;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    mask-image: linear-gradient(90deg,
        transparent 0%,
        black 9%,
        black 70%,
        transparent 87%
    );
}

/* Workspace Categories Mode Active - Show the track */
body.workspace-categories-mode .workspace-categories-controls {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1);
}

/* Hide track content until positioned (prevents flash) */
body.workspace-categories-mode .workspace-magnet-track:not(.positioned) .magnet-item {
    opacity: 0 !important;
}

/* Show items only after track is positioned */
body.workspace-categories-mode .workspace-magnet-track.positioned .magnet-item {
    opacity: 0.3;
}

body.workspace-categories-mode .workspace-magnet-track.positioned .magnet-item.active {
    opacity: 1;
}

/* Hide brand when categories mode is active */
body.workspace-categories-mode .brand {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-15px);
}

/* Hide other workspace controls when categories mode is active */
body.workspace-categories-mode .workspace-add-controls {
    display: none !important;
}

/* Workspace Magnet Track */
.workspace-magnet-track {
    display: flex;
    align-items: center;
    gap: 25px;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
}

.workspace-magnet-track::-webkit-scrollbar { display: none; }

/* Workspace Magnet Spacers (same as library) */
.workspace-magnet-track .magnet-spacer {
    min-width: 50vw;
    margin-left: -50px;
    flex-shrink: 0;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.workspace-magnet-track .magnet-spacer:last-child {
    margin-left: 0;
    margin-right: -130px;
}

/* Workspace Magnet Items (same style as library) */
.workspace-magnet-track .magnet-item {
    background: transparent;
    border: none;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: 0.3;
    /* REMOVED transform from transition to stop JS conflict (same as library) */
    transition: opacity 0.2s, text-shadow 0.2s, color 0.2s;
    transform: scale(1);
    will-change: transform, opacity; /* Hardware acceleration */
    scroll-snap-align: center;
    flex-shrink: 0;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    padding: 10px 0;
}

.workspace-magnet-track .magnet-item.active {
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), text-shadow 0.7s ease;
    transform: scale(1.05) !important;
    opacity: 1;
    color: var(--text);
    text-shadow: 0 0 13px color-mix(in srgb, var(--text), transparent 85%);
}

/* NEW + Button in workspace (same as library) */
.workspace-magnet-track .magnet-new-btn {
    color: #888;
    opacity: 0.7;
}

/* NEW + Button active state */
.workspace-magnet-track .magnet-new-btn.active {
    color: var(--text);
    opacity: 1;
    transform: scale(1.05) !important;
    text-shadow: 0 0 13px color-mix(in srgb, var(--text), transparent 85%);
}

/* Workspace Category Input (for creating new categories) */
.workspace-category-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    width: 100px;
    padding: 4px 0;
    outline: none;
    caret-color: var(--accent);
    user-select: text;
    -webkit-user-select: text;
}

.workspace-category-input::placeholder {
    color: #888;
    opacity: 0.5;
}

/* Custom workspace category button */
.workspace-custom-category {
    cursor: pointer;
}

/* Only active custom category has --text color */
.workspace-custom-category.active {
    color: var(--text) !important;
    opacity: 1 !important;
    text-shadow: 0 0 13px color-mix(in srgb, var(--text), transparent 85%);
}

/* Divider bar when workspace-categories-mode is active */
body.workspace-categories-mode #switch-btn::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
}

/* Hide standard tool items when categories mode active */
body.workspace-categories-mode .brand-group-standard,
body.workspace-categories-mode .standard-tool-item {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-15px);
}


/* =====================================================================
   [CHAT MODE] Play/Pause button and Settings dropdown for Chat section
   ===================================================================== */

/* F. Mode: Chat Mode - Play icon (customer mode - atendimento) - DEFAULT */
#smart-btn.mode-chat-mode:not(.chat-paused):not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--text) !important;
    transition: transform 0.15s ease;

    /* Ícone: Play - modo customer/atendimento */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.8 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E") no-repeat calc(50% + 1.2px) center / 65%;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.8 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/%3E%3C/svg%3E") no-repeat calc(50% + 1.2px) center / 65%;
}

/* F. Mode: Chat Mode - Pause icon (dev mode - pensamento crítico) */
#smart-btn.mode-chat-mode.chat-paused:not(.nav-stack-active) {
    transform: scale(0.9);
}

#smart-btn.mode-chat-mode.chat-paused:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--text) !important;

    /* Ícone: Pause - modo dev/análise */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z'/%3E%3C/svg%3E") no-repeat center / 55%;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z'/%3E%3C/svg%3E") no-repeat center / 55%;
}

/* G. Mode: Chat Settings (Gear icon - igual ao perfil) */
#smart-btn.mode-chat-settings:not(.nav-stack-active) .avatar-glow::after {
    opacity: 1;
    background-color: var(--accent) !important;

    /* Ícone: Gear (engrenagem) - igual ao das definições do perfil */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4l-55.6 17.8c-8.8 2.8-18.6 .3-24.5-6.8-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4c-1.1-8.4-1.7-16.9-1.7-25.5s.6-17.1 1.7-25.4l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2 5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8 12.2-2 24.7-3.1 37.4-3.1s25.2 1.1 37.4 3.1c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8 8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") no-repeat center / contain;

    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4l-55.6 17.8c-8.8 2.8-18.6 .3-24.5-6.8-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4c-1.1-8.4-1.7-16.9-1.7-25.5s.6-17.1 1.7-25.4l-43.3-39.4c-6.9-6.2-9.6-15.9-6.4-24.6 4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2 5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8 12.2-2 24.7-3.1 37.4-3.1s25.2 1.1 37.4 3.1c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8 8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/svg%3E") no-repeat center / contain;
    animation: gear-spin 8s linear infinite;
}

/* Chat Settings Dropdown Active State */
#smart-btn.mode-chat-settings.settings-open:not(.nav-stack-active) .avatar-glow::after {
    background-color: var(--text) !important;
}

/* =====================================================================
   [CHAT SETTINGS DROPDOWN] Styling for the dropdown menu
   ===================================================================== */

.chat-settings-dropdown {
    position: fixed;
    min-width: 220px;
    background: rgba(20, 20, 25, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    z-index: 10000;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.chat-settings-dropdown.hidden {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    pointer-events: none;
}

/* Dropdown Header */
.chat-settings-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-settings-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text, #fff);
}

/* Dropdown Section */
.chat-settings-section {
    margin-bottom: 12px;
}

.chat-settings-section:last-child {
    margin-bottom: 0;
}

.chat-settings-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
    padding-left: 4px;
}

/* AI Model Buttons Grid */
.chat-settings-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ai-model-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-model-btn .model-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.ai-model-btn .model-desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    font-weight: 500;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-model-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.ai-model-btn.active {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.ai-model-btn.active .model-desc {
    opacity: 0.8;
}

/* AI Provider Buttons - same style as model buttons */
.ai-provider-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-provider-btn .model-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.ai-provider-btn .model-desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    font-weight: 500;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-provider-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.ai-provider-btn.active {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.ai-provider-btn.active .model-desc {
    opacity: 0.8;
}

/* DeepSeek Model Buttons - same style as other buttons */
.deepseek-model-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
}

.deepseek-model-btn .model-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.deepseek-model-btn .model-desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    font-weight: 500;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.deepseek-model-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.deepseek-model-btn.active {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.deepseek-model-btn.active .model-desc {
    opacity: 0.8;
}

/* Chat Mode Toggle Buttons */
.chat-mode-toggle {
    display: flex;
    gap: 6px;
}

.chat-mode-btn {
    flex: 1;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.chat-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.chat-mode-btn.active {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--accent);
    color: var(--accent);
}

.chat-mode-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}


/* =====================================================================
   [CHAT SETTINGS PANEL] Full-screen futuristic settings overlay
   ===================================================================== */

.chat-settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 9997; /* Acima da navbar (100) mas abaixo do profile (9998) e settings (9999) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    padding-top: calc(80px + env(safe-area-inset-top, 0px));
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 100px;
}

.chat-settings-panel.active {
    opacity: 1;
    visibility: visible;
}

/* Hide chat content when settings panel is open */
body:has(.chat-settings-panel.active) #chatMessages,
body:has(.chat-settings-panel.active) #chatKeyboard,
body:has(.chat-settings-panel.active) .msg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Panel Spacer - space for main header */
.chat-settings-panel-spacer {
    height: 20px;
}

/* Panel Header */
.chat-settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.chat-settings-panel-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
}

.chat-settings-panel-title svg {
    width: 24px;
    height: 24px;
    stroke: var(--accent);
}

.chat-settings-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.chat-settings-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    transform: rotate(90deg);
}

.chat-settings-close-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Settings Groups */
.chat-settings-group {
    background: rgba(25, 25, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.chat-settings-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.chat-settings-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
}

.chat-settings-group-icon svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.chat-settings-group-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
}

/* Setting Item Row */
.chat-setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.chat-setting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.chat-setting-info {
    flex: 1;
    padding-right: 16px;
}

.chat-setting-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.chat-setting-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
}

/* Custom Toggle Switch */
.chat-setting-toggle {
    position: relative;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.chat-setting-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.chat-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background: rgba(255, 255, 255, 0.9);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.chat-setting-toggle input:checked + .chat-toggle-slider {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4);
}

.chat-setting-toggle input:checked + .chat-toggle-slider:before {
    transform: translateX(22px);
    background: #000;
}

/* System Prompt Textarea */
.chat-system-prompt-container {
    margin-top: 0;
}

.chat-system-prompt-textarea {
    width: 100%;
    min-height: 100px;
    max-height: 250px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 0.85rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.chat-system-prompt-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
}

.chat-system-prompt-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

/* Number Input Stepper */
.chat-setting-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 4px;
}

.chat-stepper-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.chat-stepper-btn:hover {
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
}

.chat-stepper-btn:active {
    transform: scale(0.95);
}

.chat-stepper-value {
    min-width: 40px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

/* Range Slider */
.chat-setting-range-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
}

.chat-setting-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
}

.chat-setting-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
    transition: transform 0.15s ease;
}

.chat-setting-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.chat-setting-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.chat-range-labels {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
}

.chat-range-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
}

/* Contact Selector */
.chat-contact-selector {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.chat-contact-selector.hidden {
    display: none;
}

.chat-contact-dropdown {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.chat-contact-dropdown:hover {
    border-color: var(--accent);
}

.chat-contact-dropdown:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2);
}

/* AI Model Grid - Enhanced */
.chat-ai-model-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.chat-ai-model-card {
    position: relative;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.chat-ai-model-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.chat-ai-model-card.active {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2);
}

.chat-ai-model-card.active::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent);
}

.chat-model-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-model-icon svg {
    width: 20px;
    height: 20px;
}

.chat-model-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.chat-model-desc {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cost Estimator */
.chat-cost-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
}

.chat-cost-input {
    width: 70px;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: right;
    outline: none;
    -moz-appearance: textfield;
}

.chat-cost-input::-webkit-outer-spin-button,
.chat-cost-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.chat-cost-input-suffix {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', monospace;
}

.chat-cost-result {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 12px;
    text-align: center;
}

.chat-cost-model-name {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.chat-cost-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.8rem;
    font-weight: 700;
    color: #22c55e;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
    margin-bottom: 6px;
}

.chat-cost-breakdown {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', monospace;
}

/* Expandable sub-settings */
.chat-sub-settings {
    margin-top: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.chat-sub-settings.hidden {
    display: none;
}

/* Glow Effects for Futuristic Feel */
.chat-settings-group:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.05);
}

/* Ambient background lines */
.chat-settings-panel::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, transparent 49.5%, rgba(var(--accent-rgb), 0.03) 49.5%, rgba(var(--accent-rgb), 0.03) 50.5%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(var(--accent-rgb), 0.03) 49.5%, rgba(var(--accent-rgb), 0.03) 50.5%, transparent 50.5%);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: -1;
}

/* Scanline effect overlay */
.chat-settings-panel::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    z-index: -1;
    opacity: 0.3;
}

/* =====================================================================
   [CHAT SEARCH MODE] Icon styling (uses same header search as profile/library)
   ===================================================================== */

/* H. Mode: Chat Search (Magnifying glass icon) - identical to mode-search */
#smart-btn.mode-chat-search .avatar-glow::after {
    opacity: 1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7' /%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' /%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7' /%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65' /%3E%3C/svg%3E") no-repeat center / contain;
}

/* Chat Search Results - Hidden messages */
.chat-message.search-hidden {
    display: none !important;
}

/* Chat Search Results - Matching messages */
.chat-message.search-match {
    animation: searchMatchPulse 0.3s ease;
}

@keyframes searchMatchPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

/* Search Highlight */
.search-highlight {
    background: rgba(var(--accent-rgb), 0.4);
    color: var(--text);
    padding: 1px 3px;
    border-radius: 3px;
    font-weight: 600;
}




/* =====================================================================
   [DELETE ARTICLE POPUP] Confirmation dialog for deleting articles
   ===================================================================== */

.delete-article-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999; /* Must be higher than all other modals (appointment-details has 100000) */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.delete-article-overlay.visible {
    opacity: 1;
}

.delete-article-popup {
    background: var(--bg);
    border: 1px solid var(--nav-border-color);
    border-radius: 16px;
    padding: 24px;
    max-width: 280px;
    width: 90%;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.delete-article-overlay.visible .delete-article-popup {
    transform: scale(1);
}

.delete-article-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.delete-article-title {
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.delete-article-text {
    color: var(--text);
    opacity: 0.7;
    font-size: 14px;
    margin: 0 0 20px 0;
}

.delete-article-buttons {
    display: flex;
    gap: 12px;
}

.delete-article-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.delete-article-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

.delete-article-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.delete-article-btn.confirm {
    background: #ff453a;
    color: white;
}

.delete-article-btn.confirm:hover {
    background: #ff6961;
}

/* [FINAL OVERRIDE] Trigger button - CINZENTO 80% transparência */
button#switch-btn.ring-btn,
#switch-btn.ring-btn.brand-group-standard {
    border: 2px solid rgba(102, 102, 102, 0.2) !important;
    border-color: rgba(102, 102, 102, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DEPRECATED: Antigo painel de chat settings (substituído por sub-página)
   ═══════════════════════════════════════════════════════════════ */
#chat-settings-panel {
    display: none !important;
}