body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: #1a1a1b;
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #f2f2f7;
    /*padding-bottom: 150px;*/
}

.main{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.sidebar {
    z-index: 10;
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    color: #f2f2f7;
    width: 244px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #111;
    justify-content: space-between;
}

.sidebar .history::-webkit-scrollbar {
    width: 10px; 			 /* width of the entire scrollbar */
    border-radius: 20px;
}

.sidebar .history::-webkit-scrollbar-track {
    background: #1c1c22; 	 /* color of the tracking area */
    border-radius: 20px;
}

.sidebar .history::-webkit-scrollbar-thumb {
    background-color: #202123; 	/* color of the scroll thumb */
    border-radius: 20px; 		/* roundness of the scroll thumb */
    border: 3px solid #1c1c22; 	/* creates padding around scroll thumb */
}



.sidebar button{
    color: #f2f2f7;
    border: none;
    background-color: transparent;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}

.sidebar button:hover{
    background-color: rgba(150,150,150,0.15);
    border: none;
}

.sidebar nav button:hover{
    background-color: rgba(150,150,150,0.15);
    border: none;
}

.sidebar-overview button{
    color: #202123;
    border: solid 0.5px rgba(116, 116, 116, 0.5);
    background-color: transparent;
    border-radius: 20px;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}

.sidebar-overview button:hover{
    background-color: rgba(150,150,150,0.15);
    border: solid 0.5px rgba(255, 255, 255, 0.6);
}

.sidebar-overview nav button:hover{
    background-color: rgba(150,150,150,0.15);
    border: solid 0.5px rgba(255, 255, 255, 0.6);
}

#logOutBtn{
    /* Estilos Log Out na sidebar */
    margin: 0px;
    padding: 8px;
    border-radius: 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
}
#logOutBtn:hover{
    background-color: rgba(150,150,150,0.15);
    border: none;
}

.logout_nav {
    border-top: solid 1px #262729;
    margin: 10px 1em;
    padding: 10px;
}

.history{
    padding: 10px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: scroll;
}

.history p{
    cursor: pointer;
    padding: 5px 6px;
    margin: 0;
}

.history p:hover{
    background-color: transparent;
    color: #f2f2f7ab;
    
}

/* Botões do cabeçalho (Manual/Login) com Glassmorphism - FIXOS NO TOPO */
.manual-button {
    position: fixed;
    top: 20px;
    /* right: 20px é para o Manual. O Login/Register tem o seu right definido inline */
    font-size: 16px;
    font-weight: 500;
    color: #1c1c1e;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s ease-in-out;
}

.manual-button:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* O botão Register/Login herda estes estilos e o seu 'right' é definido inline no HTML */
#registerLoginBtn {
    /*right:efinido no HTML */
    right: 120px; /* Adicionado aqui para demonstrar o posicionamento */
}

.back-button {
    position: fixed;
    top: 20px;
    left: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #1c1c1e;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s ease-in-out;
}

.back-button:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Título e Mensagens */
.main-title, .div_title_tele {
    display: flex;
    color: #f2f2f7;
    margin: 0;
    text-align: center;
    padding-top: 100px;
    width: 100%;
    max-width: 850px;
    transition: font-size 0.5s ease-in-out, padding-top 0.5s ease-in-out;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.main-title h1{
    font-size: 40px;
    font-weight: 600;
}

h1.shrink {
    font-size: 28px;
    padding-top: 30px;
}

.loading-message {
    text-align: center;
    color: #8e8e93; 
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    transition: opacity 0.3s ease-in-out;
}

/* Formulário e Input Bar */
form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    position: sticky;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: transparent;
    margin-top: 5%;
    padding: 20px 0;
    box-shadow: none;
}

.input-bubble {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 40%; 
    background-color: rgba(255, 255, 255);
    border: 1px solid rgba(255, 255, 255);
    border-radius: 25px;
    padding: 8px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

input[type="text"] {
    flex: 1;
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: #1c1c1e;
    padding: 8px 15px;
    box-sizing: border-box;
}

input[type="text"]::placeholder {
    color: #8e8e93;
    text-align: left;
}

/* Área de Tarefas e Botão de Copiar */
.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 850px; 
    padding: 0 15px;
    margin-top: 30px;
}
.tasks-header-btn{
    display: flex;
    align-items: center; 
    padding: 0 15px;
    gap: 15px;
}

.tasks {
    padding: 0 15px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    text-align: left;
    white-space: pre-wrap;
    line-height: 1.6;
    color: #f2f2f7;
    width: 100%;
    max-width: 850px; 
    box-sizing: border-box;
}

.tasks h2 {
    color: #f2f2f7;
}

.copy-button {
    font-size: 14px;
    font-weight: 500;
    color: #f2f2f7;
    padding: 8px 15px;
    border-radius: 25px;
    background-color: #202123;
    border: none;
    cursor: pointer;
}

.copy-button:hover {
   transform: scale(1.05);
   transition: 0.1s;
   background-color: #2c2d2f;
}

.download-button {
    font-size: 14px;
    font-weight: 500;
    color: #f2f2f7;
    padding: 8px 15px;
    border-radius: 25px;
    background-color: #202123;
    border: none;
    cursor: pointer;
}

.download-button:hover {
    transform: scale(1.05);
    transition: 0.1s;
    background-color: #2c2d2f;
}

/* Estilos do Manual */
.manual-container {
    width: 100%;
    max-width: 800px;
    margin-top: 50px;
}
.manual-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.manual-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.manual-card h2 {
    font-size: 24px;
    font-weight: 600;
    color: #4a4a4a;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 10px;
}
.manual-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3c;
    margin-bottom: 20px;
}
.image-container {
    text-align: center;
    border: 1px solid #e5e5ea;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.options_nav{
    border-right: solid 0.5px rgba(255, 255, 255, 0.5);
    padding-right: 10px;
}

/* ESTILO COMPACTO PARA O LAYOUT DE LINHA ÚNICA (OPÇÕES) */
.options-container {
    display: flex;
    align-items: center; 
    width: fit-content;
    max-width: fit-content; 
    padding: 8px 15px; 
    flex-wrap: nowrap; 
    /* Aumentar o GAP entre os grupos para maior separação visual */
    gap: 18px; 
    justify-content: flex-start; 
    background-color: #202123;
    border-radius: 20px;
    /* Adicionar uma sombra sutil para "levantar" a barra */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}



.option-label {
    color: #f2f2f7;
    /* Fonte mais pesada para destacar a categoria (SEM DOIS PONTOS) */
    font-weight: 700; 
    white-space: nowrap; 
    padding-left: 0; 
}

.option-pills {
    display: flex;
    /* Reduzir o gap entre as pílulas individuais */
    gap: 3px; 
    flex-grow: 0; 
    justify-content: flex-start;
}

.activity-type-pills-group {
    /* Permitir que este grupo use o espaço extra para afastar a próxima coluna */
    /*flex-grow: 1;*/
}


/* 🌟 CORREÇÃO FINAL: Garante espaço para Tasks (5 e 7) 🌟 */
.options-container > div:nth-child(8) { 
    min-width: unset; 
}


/* Estilo para todas as pílulas (buttons) - ALTERADO (REMOÇÃO DE BORDAS) */
.audience-pill, .difficulty-pill, .activity-type-pill, .quantity-pill {
    padding: 4px 10px; /* Aumentar o padding horizontal */
    border-radius: 15px;
    background-color: transparent;
    color: #ffffff;
    border: none; /* REMOVIDO: border: 1px solid transparent; */
    cursor: pointer;
    /* AJUSTADO: Fonte ligeiramente mais pequena para aspeto mais limpo */
    font-size: 14px; 
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
}

/* 🌟 Estado Ativo: Foco na Nítidez e Visualização (REMOÇÃO DE BORDAS) 🌟 */
.audience-pill.active, .difficulty-pill.active, .activity-type-pill.active, .quantity-pill.active {
    background-color: #ffffff;
    color: #202123;
    /* Aumentar o peso da fonte para ser mais nítido e profissional */
    /*font-weight: 600; */
    /* Efeito de "Elevado" com sombra */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    border: none; /* REMOVIDO: border: 1px solid rgba(0, 0, 0, 0.1); */
}

/* Hover Aprimorado: Mantido */
.audience-pill:not(.active):hover, .difficulty-pill:not(.active):hover, .activity-type-pill:not(.active):hover, .quantity-pill:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.15); /* Mais claro que o anterior, mais elegante */
}

/* Ajuste específico para as pílulas de quantidade */
.quantity-pill {
    min-width: 25px; 
    text-align: center;
}

/* REMOÇÃO DE ESTILOS OBSOLETOS */
.difficulty-options, .quantity-options, .activity-type-options, .audience-options {
    display: contents; 
}
.difficulty-label, .quantity-label, .activity-type-label { display: none; }
.difficulty-pills, .quantity-pills, .activity-type-pills { display: flex; }
.option-bubble, .custom-select, .options-list, .selected-option, .option { /*display: none;*/ }

.barra-options{
    display: flex;
    gap: 1rem;
}

.icon{
    position: absolute;
    top: 0;
    left: 0;
    margin: 1%;
}

#logo{
    width: 50px; 
    height: 50px; 
}

.hidden_element{
    display: none;
}

.auth-card {
    width: 100%;
    max-width: 300px; /* Largura mais compacta para autenticação */
    /* Glassmorphism */
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
}

.auth-card h2 {
    font-size: 28px;
    font-weight: 600;
    color: #1c1c1e;
    margin-bottom: 10px;
}

.auth-card p {
    font-size: 16px;
    color: #636366;
    margin-bottom: 25px;
}

.auth-card a {
    color: #007aff; /* Cor padrão do iOS Blue */
    text-decoration: none;
    font-weight: 500;
}

.auth-card a:hover {
    text-decoration: underline;
}

.small-text {
    font-size: 14px;
    margin-top: 20px;
}

/* Garante que o container do Google esteja centralizado */
#g-sign-in-container {
    display: flex;
    justify-content: center;
}

/* Botão principal */
.translate-btn {
  text-decoration: none;
  position: fixed;
  font-size: large;
  color: #f2f2f7;
  background-color: transparent;
  border: none;
  border-radius: 15px;
  right: 0;
  top: 0;
  margin: 1%;
  margin-bottom: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.translate-btn:hover {
  cursor: pointer;
}

/* Container do dropdown */
.dropdown {
  position: fixed;
  right: 0;
  top: 0;
  margin: 1%;
  display: inline-block;
}

/* Conteúdo do dropdown (escondido por padrão) */
.dropdown-content {
  display: none;
  position: absolute;
  justify-content: center;
  align-items: center;
  right: 0;
  background-color: #111;
  border-radius: 5px;
  min-width: 2.5em;
  z-index: 1;
  padding: 5px;
  top: 0em;
  
}

/* Estilo dos itens do menu */
.dropdown-content button {
  background: none;
  border: none;
  color: #f2f2f7;
  text-align: left;
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
}

.dropdown-content button:hover {
  background-color: #3a3a3c;
  border-radius: 5px;
}

/* Mostrar dropdown ao passar o mouse */
/*.dropdown:hover .dropdown-content {
  display: block;
}*/


.profile_div{
    margin: 1%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}

.profile_img{
    border-radius: 100%;
    display: block;
}

.profile_img_logged_in{
    width: 40px;
    height: 40px;
}

.profile_name{
    margin: 0;
    font-size: smaller;
}

/* 1. Alvo principal: o conteúdo das tarefas */
#task-content {
    /* É a propriedade mais importante. Garante que os filhos não se dividam, se possível. */
    page-break-inside: avoid;
    /* Para navegadores mais antigos (quebra antes/depois do elemento) */
    break-inside: avoid;
}

/* 2. Alvo específico: cabeçalhos e blocos de texto/tarefa */
/* Ajuste os seletores (h1, h2, p, li) para corresponder ao Markdown gerado */
#task-content h1, 
#task-content h2, 
#task-content p, 
#task-content li {
    /* Tenta evitar que um parágrafo/tarefa comece numa página e termine noutra */
    page-break-inside: avoid;
    break-inside: avoid;
}

/* 3. Tentar fazer com que quebre antes dos títulos principais de cada seção/tarefa */
#task-content h2 {
    page-break-before: always;
    break-before: page; /* Para evitar o corte no topo, força uma quebra antes de novos títulos */
}

/* 4. Garantir que a imagem e o texto adjacente não sejam separados */
/* (Se houver imagens ou tabelas) */
#task-content img,
#task-content table {
    page-break-inside: avoid;
    break-inside: avoid;
}

.edit_modal {
    margin: auto;
    height: 60vh;
    width: 25%;
    border: none;
    border-radius: 1rem;
    opacity: 0;
    scale: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.8s;
    box-shadow: 4px 8px 10px var(--grey);
    background-color: transparent;
    outline: 0px;
}

.edit_modal[open]{
    opacity: 1;
    scale: 1;
}

dialog::backdrop {
    /*background-color: rgba(200,200,200, 0.25);*//* hsl(234, 29%, 20%) */
    background-color: rgba(0, 0, 0, 0.55);
} 



.edit_modal_container {
    /* display: grid;
    grid-template-columns: repeat(1, 1fr); */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
/* position: relative;
    top: 25%; 
    left: 25%;*/
    gap: 1.2rem; 
    background-color: #fff;
    border-radius: 1rem;
    
}

.dismiss__btn {
    padding: 0.9rem;
    background: var(--dark-slate-grey);
    color: var(--white);
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    outline: none;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
    box-shadow: 1px 2px 5px var(--grey);
    transition: all 0.5s ease-in-out;
    width: 100%;
}

.dismiss__btn:hover {
    background: linear-gradient(0.25turn, #e04313, hsl(4, 100%, 67%));

}

.use_flex{
    display: flex;
}

.use_block{
    display: block;
}

#logo-tele{
    display: none;

}

.div_title_tele{
    display: flex;
    flex-direction: column;
    font-size: 40px;
    font-weight: 600;
}

.div_title_tele{
    display: none;
}


.version-title{
    margin-top: 0;
    margin-bottom: 20px;
}

#task-content.black_font{
    color: #111;
}

.limit-reached {
    display: none;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    justify-content: center;
    text-align: center;
    color: red;
    background-color: transparent;
}

.error-happened {
    display: none;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    justify-content: center;
    text-align: center;
    color: red;
    background-color: transparent;
}

#open-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: transparent;
    border: none;
    margin: 1%;
    margin-bottom: 0;
}

#open-sidebar img{
    width: 32px;
    height: 32px;
}

#close-sidebar {
    display: none;
    top: 0;
    right: 0;
    background-color: transparent;
    border: none;
    z-index: 100;
}

#close-sidebar img{
    height: 12px;
    width: 12px;
}

#new-chat-close {
    display: flex;
    width: 100%;
    
}

#createChatBtn {
    width: 100%;
}

.icon_delete{
    width: 20px;
    height: 20px;
    display: none;
}

/* 📱 MOBILE FIX */
@media (max-width: 768px) {
    .barra-options{
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

    body {
        flex-direction: column;
        overflow-x: hidden;
    }


    .sidebar {
        display: none; /* Esconde a sidebar no mobile */
    }

    .main {
        width: 100%;
        padding: 15px;
        margin: 0;
    }

    .main-title {
        font-size: 24px;
        padding-top: 40px;
        display: none;
    }

    .div_title_tele{
        font-size: 24px;
        padding-top: 40px;
        display: flex;
    }

    .div_title_tele h1{
        font-size: 24px;
    }

    .input-bubble {
        max-width: 75%;
        padding: 5px;
        
    }

    /* Opções ficam roláveis horizontalmente */
    .options-container {
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Reduz o gap para caber mais */
        gap: 3px; 
        padding: 6px;
        max-width: 100%;
        width: 18rem;
        
    }

    .audience-pill,
    .difficulty-pill,
    .activity-type-pill,
    .quantity-pill {
        font-size: 12px;
        padding: 4px 8px;
    }

    .tasks,
    .tasks-header {
        max-width: 100%;
        padding: 10px;
    }

    .manual-container {
        margin-top: 20px;
        padding: 10px;
    }

    .manual-card {
        padding: 15px;
    }

    .auth-card {
        max-width: 95%;
        padding: 20px;
    }

    /* Ícones menores */
    .profile_img,
    #logo, #logo-tele {
        width: 32px;
        height: 32px;
    }

    #logo{
        display: none;
    }

    #logo-tele{
        display: block;
    }

    .tasks-header-btn{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 2em;
    }

    .edit_modal{
        
        width: 75%;
    }


    #open-sidebar {
        display: block;
    }

    #close-sidebar {
        display: block;
    }

    .icon_delete{
        width: 16px;
        height: 16px;
        display: inline-block;
    }
}