/* ==========================================================================
   CSS Específico para o Menu de Navegação
   ========================================================================== */

/* --- Estilos Gerais da Navbar --- */

.lqd-navbar .lqd-navbar-link:hover {
    text-decoration: none !important;
}

.theme-dark .lqd-navbar .lqd-navbar-link:hover {
    background: #303032 !important;
}

.lqd-navbar-label {
    font-family: orbitron, sans-serif !important;
    color: #fff !important;
    box-shadow: rgb(0, 0, 0) 0 0 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding-bottom: 5px !important;
    filter: hue-rotate(300deg);
    padding-right: 0.5rem !important;
    padding-left: 0.5em !important;
}

li.lqd-navbar-item {
    text-transform: none !important;
}

.theme-dark .border-navbar-divider {
    border-image: linear-gradient(to right, #201c1cc4, #f2586f7d, #b70823) 1 !important;
    background-image: linear-gradient(117deg, #a20f267a, #740214d4, transparent);
    text-shadow: 2px 2px 9px #00000045;
}

#navbar-menu.lqd-navbar-ul .lqd-navbar-item .lqd-navbar-divider {
    border-image: linear-gradient(to left, #201c1cc4, #f2586f7d, #fd2c2cd9) 1 !important;
}

.theme-dark .border-navbar-border {
    border-color: hsl(0deg 0% 43.53%/45.1%) !important;
}

.lqd-navbar-logo a {
    z-index: 999999999;
}

.lqd-navbar-affiliation.border-navbar-divider.text-2xs.transition-border.inline-block.w-full.rounded-xl.border.px-8.py-4.text-center.leading-tight {
    background-image: linear-gradient(117deg, #a20f267a, #740214d4, transparent) !important;
}

:is(.theme-dark .lqd-navbar .lqd-navbar-link.active) {
    background-color: hsl(351deg 81.11% 38.48%/11%) !important;
}

/* --- Ícones da Navbar --- */

.theme-dark .text-navbar-icon-foreground {
    color: #fd4360 !important;
}

.lqd-navbar .lqd-nav-link-icon svg {
    width: 120% !important;
}

.text-navbar-foreground {
    color: rgb(238 58 58/85%) !important;
}

/* --- Menu de Navegação Personalizado (Sintaxe Original Mantida) --- */

#assistants,
#app-library,
#image-studio,
#voice-studio,
#visual-analyzer,
#texts,
#studio-musical,
#video-lab {
    .\[\&\.active\]\:text-navbar-foreground-active {
        padding: 3.5px;
    }
}

#assistants,
#app-library,
#image-studio,
#voice-studio,
#visual-analyzer,
#texts,
#studio-musical,
#video-lab {
    .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
        background-size: 20px 20px !important;
        font-size: 1px;
        color: rgba(253, 67, 96, 0.04) !important
    }
}

#assistants,
#app-library,
#image-studio,
#voice-studio,
#visual-analyzer,
#texts,
#studio-musical,
#video-lab,
#chat_settings_extension ul,
#my-nerd-aplications ul {
    .\[\&\.active\]\:text-navbar-foreground-active .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active .size-navbar-icon path {
        transform: scale(0.83) !important;
    }
}

#chat_settings_extension .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active,
#my-nerd-aplications .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    transform: scale(1.15)
}

#assistants .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    background-image: url(/assets/custom/nerd-icons/eyeglasses.svg);
    transform: scale(1.2)
}

#app-library .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    background-image: url(/assets/custom/nerd-icons/productivity-app.svg);
    transform: scale(1.25)
}

#image-studio .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    background-image: url(/assets/custom/nerd-icons/camera.svg);
    transform: scale(1.2)
}

#voice-studio .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    background-size: 20px 20px;
    background-image: url(/assets/custom/nerd-icons/mic-nerdgpt.svg);
    transform: scale(1.02)
}

#visual-analyzer .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    background-size: 20px 20px;
    background-image: url(/assets/custom/nerd-icons/nerd-scan.svg);
    transform: scale(1.2)
}

#texts .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    background-image: url(/assets/custom/nerd-icons/copywriting.svg);
    transform: scale(1.2)
}

#video-lab .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    background-image: url(/assets/custom/nerd-icons/video-camera.svg);
    transform: scale(1.15)
}

#studio-musical .group-\[\&\.active\]\/link\:text-navbar-icon-foreground-active {
    background-image: url(/assets/custom/nerd-icons/music.svg);
    transform: scale(1.1)
}

#studio-musical .lqd-navbar-item .size-navbar-icon,
#video-lab .lqd-navbar-item .size-navbar-icon,
#assistants .lqd-navbar-item .size-navbar-icon,
#image-studio .lqd-navbar-item .size-navbar-icon,
#voice-studio .lqd-navbar-item .size-navbar-icon,
#visual-analyzer .lqd-navbar-item .size-navbar-icon,
#texts .lqd-navbar-item .size-navbar-icon,
#app-library .lqd-navbar-item .size-navbar-icon {
    color: #fd4360;
    background-image: linear-gradient(277deg, #262626, #2c2c2c), linear-gradient(84deg, #fd446000 17.86%, #e2286100 96.88%, #763cd400 107.47%) !important;
}

#assistants,
#app-library,
#image-studio,
#voice-studio,
#visual-analyzer,
#texts,
#studio-musical,
#video-lab {
    .\[\&\.active\]\:text-navbar-foreground-active:hover {
        background-image: linear-gradient(277deg, #4a4a4a, #212020), linear-gradient(84deg, #fd446000 17.86%, #e2286100 96.88%, #763cd400 107.47%) !important
    }
}

#navbar-menu .lqd-nav-link-label {
    margin: 6px 0 !important;
    font-weight: 300 !important;
    font-size: 13.3px !important;
    line-height: 2px !important;
    padding: 4px 0 !important;
    text-shadow: rgba(0, 0, 0, 0.5) 0 2px 2px !important;
}

#video-lab .lqd-navbar-item a,
#studio-musical .lqd-navbar-item a,
#assistants .lqd-navbar-item a,
#image-studio .lqd-navbar-item a,
#voice-studio .lqd-navbar-item a,
#visual-analyzer .lqd-navbar-item a,
#texts .lqd-navbar-item a,
#app-library .lqd-navbar-item a {
    padding-left: 0px !important;
}

#video-lab .active,
#studio-musical .active,
#app-library .active,
#assistants .active,
#image-studio .active,
#voice-studio .active,
#visual-analyzer .active,
#texts .active {
    border-right-color: rgb(253, 68, 96) !important;
    border-right-width: 8px;
    text-decoration-line: none;
    background-color: rgba(36, 36, 36, 1);
}

/* --- Menu "Meu NerdGPT" --- */

#chat_settings_extension,
#my-nerd-aplications {
    padding-right: 15px !important;
    color: rgb(0, 204, 41) !important;
    font-weight: 900 !important;
}

#chat_settings_extension .lqd-navbar-item a,
#my-nerd-aplications .lqd-navbar-item a {
    height: 25px;
    color: rgb(0, 204, 41) !important;
}

#chat_settings_extension ul,
#my-nerd-aplications ul {
    padding-left: 19px;
}

.lqd-navbar-ul .lqd-navbar-item:nth-child(18) .lqd-navbar-label {
    color: rgb(0, 204, 41) !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    filter: contrast(2);
}

#my-nerd-aplications,
#chat_settings_extension {
    .\[\&\.active\]\:text-navbar-foreground-active .size-navbar-icon {
        color: rgb(0, 204, 41)
    }
}

/* --- Menu "Escreva com IA" --- */

#navbar-menu lqd-navbar .lqd-navbar-label {
    padding-right: 0.2rem !important;
    padding-left: 0.5em !important;
}

#navbar-menu>ul>li:nth-child(8) {
    color: #fafafa !important;
    font-family: orbitron, sans-serif;
    font-weight: 400 !important;
    font-size: 15px !important;
    letter-spacing: 1.15px !important;
    margin: 0 0 0 -5px;
    opacity: 0.99;
    padding: 4px 3px;
    margin-left: 0.15rem;
    max-width: 94%;
    border-radius: 30px;
    background-image: linear-gradient(145deg, rgb(169, 255, 246) 0%, rgb(67, 160, 253) 20%, rgb(253, 67, 95) 78%);
    filter: contrast(150%);
    transform: scale(0.96);
    transition: transform 0.3s ease;
    box-shadow: rgba(253, 255, 255, 0.4) 0 0 5px;
}

#navbar-menu .lqd-navbar-ul > .lqd-navbar-item:nth-child(8) {
    padding-bottom: 4px;
    margin-bottom: 9px;
}

#navbar-menu>ul>li:nth-child(8)>a {
    filter: contrast(5);
    filter: brightness(150%);
    transition: filter 1s, transform 0.7s;
}

#navbar-menu>ul>li:nth-child(8)>a:hover {
    transform: scale(1.01);
    filter: contrast(2);
}

#navbar-menu>ul:nth-child(1)>li:nth-child(8)>a:nth-child(1) {
    box-shadow: rgba(0, 0, 0, 0.51) 0 2px 3px;
    margin-bottom: 0.5px;
    color: rgba(238, 58, 58, 0.85);
    background-color: rgb(22, 22, 22);
    border-radius: 2rem !important;
    padding-left: 16px !important;
    gap: 0.575rem;
    align-content: baseline;
}

#navbar-menu>ul:nth-child(1)>li:nth-child(8)>a:nth-child(1)>span:nth-child(1)>svg:nth-child(1) {
    height: 21px;
    max-height: 21px;
    width: 19px;
    color: #fff;
}

#navbar-menu>ul:nth-child(n + 1)>li:nth-child(n + 1)>a:nth-child(1) {
    height: 40px;
    max-height: 40px;
    padding: 3px 22px 3px 12px;
}

#navbar-menu>ul:nth-child(1)>li:nth-child(n + 1)>hr:nth-child(1) {
    border-width: 1px !important;
    border-style: solid !important;
}

li:nth-child(2) #OBJECT,
li:nth-child(3) #OBJECT,
li:nth-child(4) #OBJECT,
li:nth-child(5) #OBJECT {
    width: 90% !important;
    filter: saturate(200%);
}

#navbar-menu>ul>li:nth-child(1) {
    margin-top: 8px;
}

#navbar-menu>ul>li:nth-child(2),
#navbar-menu>ul>li:nth-child(3),
#navbar-menu>ul>li:nth-child(4),
#navbar-menu>ul>li:nth-child(5)>span:nth-child(1) {
    margin-top: 1.5px;
    margin-bottom: 1.5px;
    height: 28px;
    max-height: 28px;
}

#navbar-menu .lqd-navbar-ul>.lqd-navbar-item:nth-child(1) {
    color: #fd4460 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1em !important;
}

@media (min-width: 1025px) {
    #navbar-menu .lqd-navbar-ul .lqd-navbar-item:nth-child(21) {
        display: block;
    }
    
    #navbar-menu .lqd-navbar-ul .lqd-navbar-item:nth-child(23),
    #navbar-menu .lqd-navbar-ul .lqd-navbar-item:nth-child(24),
    #navbar-menu .lqd-navbar-ul .lqd-navbar-item:nth-child(25),
    #navbar-menu .lqd-navbar-ul .lqd-navbar-item:nth-child(26) {
        display: inline-block;
        width: 126px;
        max-width: 130px;
    }
}




/* ==========================================================================
   Estilos para a Lista de Filtros com Scroll Horizontal
   ========================================================================== */

/* 1. Estilos para o Contêiner da Lista (UL) */
ul#lqd-chats-filter-list {
    display: flex;          /* Ativa o layout flexível */
    flex-wrap: nowrap;      /* Impede que os itens quebrem para a próxima linha */
    overflow-x: auto;       /* Adiciona a barra de rolagem horizontal quando necessário */
    overflow-y: hidden;     /* Esconde a barra de rolagem vertical */
    position: relative;     /* Necessário para o posicionamento dos gradientes de borda */
    padding-top: 10px;
    margin: 5px;
    padding: 5px;
    /* Estilização da barra de scroll para Firefox */
    scrollbar-width: thin;
    scrollbar-color: #f1f1f1;
}

/* Estilização da barra de scroll para WebKit (Chrome, Safari) */
ul#lqd-chats-filter-list::-webkit-scrollbar {
    height: 8px;
}

ul#lqd-chats-filter-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

ul#lqd-chats-filter-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

ul#lqd-chats-filter-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 2. Estilos para os Itens da Lista (LI) */
ul#lqd-chats-filter-list li {
    flex-shrink: 0;         /* Impede que os itens encolham */
}

/* 3. Estilos para os Botões dentro dos Itens da Lista */
ul#lqd-chats-filter-list li button {
    white-space: nowrap;    /* Impede que o texto do botão quebre a linha */
    overflow: hidden;       /* Esconde o texto que ultrapassa o limite */
    text-overflow: ellipsis;/* Adiciona "..." ao texto cortado */
}

/* 4. Gradientes nas Bordas para Indicar Rolagem */
ul#lqd-chats-filter-list::before,
ul#lqd-chats-filter-list::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;            /* Largura do efeito de gradiente */
    pointer-events: none;   /* Permite clicar através do gradiente */
    z-index: 1;
}

ul#lqd-chats-filter-list::before {
    left: 0;
    /* Ajuste a cor de fundo (rgba(37,37,37,1)) para corresponder ao fundo do seu contêiner */
    background: linear-gradient(to right, rgba(37, 37, 37, 1), rgba(37, 37, 37, 0));
}

ul#lqd-chats-filter-list::after {
    right: 0;
    /* Ajuste a cor de fundo (rgba(37,37,37,1)) para corresponder ao fundo do seu contêiner */
    background: linear-gradient(to left, rgba(37, 37, 37, 1), rgba(37, 37, 37, 0));
}

/* ==========================================================================
   Outros Estilos Relacionados
   ========================================================================== */

/* Estilo genérico que parece ser aplicado dinamicamente */


#lqd-titlebar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

/* Reset de borda */
*, :before, :after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    /*border-color: rgba(0, 0, 0, 0.3) !important;*/
}

/* Cor de fundo para o tema escuro */
/*.theme-dark .lqd-input {*/
/*    background-color: #000 !important;*/
/*}*/

/* Estilo para texto em telas pequenas */
.header-search-input .sm\:text-2xs {
    font-size: .8125rem;
    letter-spacing: 0.2px;
    width: 435px;
}

.border-none {
    border-style: solid;
}

/* ==========================================================================
   Layout Responsivo para Mobile
   ========================================================================== */

@media (max-width: 768px) {
    /* NOTA: O seletor 'seu-seletor-do-pai-comum' abaixo é um placeholder.
       Você precisa substituí-lo pelo seletor real do contêiner que 
       envolve tanto o campo de busca quanto a lista de filtros.
    */
    seu-seletor-do-pai-comum {
        flex-direction: column; /* Empilha a busca e os filtros verticalmente */
    }

    seu-seletor-do-pai-comum > .lqd-input-container,
    seu-seletor-do-pai-comum > ul#lqd-chats-filter-list {
        width: 100%; /* Faz com que ambos ocupem a largura total */
    }
}