* {
box-sizing: border-box;
}
html {
background-color: #161b22 !important;
height: 100%;
min-height: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #0e1117;
color: #e6edf3;
margin: 0;
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
padding-top: env(safe-area-inset-top);
max-width: 100%;
overflow-x: hidden;
}
header {
background: #0e1117;
padding: 16px 20px;
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 3000; /* Maior que a sidebar */
border-bottom: 1px solid #2e2e2e;
}
.header-right {
display: flex;
align-items: center;
gap: 5px;
margin-left: auto;
}
.header-right img {
width: 36px;
height: 36px;
object-fit: contain;
}
.header-right span {
color: #e6edf3;
font-size: 18px;
font-weight: bold;
}
.chat-container {
display: flex;
flex: 1;
overflow: hidden;
}
.chat-list button {
width: 100%;
margin-bottom: 5px;
padding: 8px;
font-size: 14px;
border: none;
border-radius: 4px;
background-color: #fffffff6;
color: rgb(0, 0, 0);
cursor: pointer;
}
.message {
margin-bottom: 10px;
white-space: pre-wrap;
}
.input-area {
display: flex;
flex-direction: row;
gap: 10px;
border-top: 1px solid #30363d;
background: #161b22;
padding: 10px;
}
textarea {
flex: 1;
resize: none;
padding: 10px;
background: #07090c;
color: #e6edf3;
border-radius: 5px;
font-size: 14px;
}
button {
width: 44px ;
height: 44px ;
min-width: 44px ;
min-height: 44px ;
border-radius: 50% ;
aspect-ratio: 1 / 1 ;
padding: 0 ;
display: flex ;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: #ffffff;
}
.chat-title {
color: #c9d1d9;
font-weight: bold;
margin-bottom: 10px;
}
.code-block {
background: #07090c;
padding: 10px;
border-radius: 5px;
font-family: monospace;
overflow-x: auto;
margin-top: 5px;
}
.code-toolbar {
position: relative;
display: flex;
justify-content: flex-end;
margin-bottom: 5px;
}
.code-toolbar button {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: #fff;
font-size: 12px;
cursor: pointer;
padding: 4px 8px; /* melhora o clique */
}
.code-toolbar button i {
display: inline-block; /* garante que o ícone respeite o gap */
}
.chat-container, .chat-main, .chat-list {
max-width: 100%;
}
/* MELHORIAS DE VISUAL GERAL */
.chat-main {
overflow-y: auto;
scroll-behavior: smooth;
}
.input-area textarea:focus {
outline: none;
}
pre code {
white-space: pre-wrap;
word-wrap: break-word;
}
.input-chat {
padding: 8px;
border-radius: 4px;
border: 1px solid #30363d;
background: #0d1117;
color: #e6edf3;
font-size: 14px;
}
.dictate-btn {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 50%;
aspect-ratio: 1 / 1;
padding: 0;
background-color: #88888800;
display: flex;
align-items: center;
justify-content: center;
border: none;
flex-shrink: 0;
flex: 0 0 auto;
}
.dictate-btn i {
font-size: 1.3rem;
line-height: 1;
color: #d4d4d4;
}
.dictate-btn.listening {
background-color: #88888800;
}
.input-area {
display: flex;
gap: 8px;
padding: 10px ;
background-color: #1e1e1e;
border-radius: 35px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.input-area textarea {
flex: 1;
padding: 10px;
background-color: #161b22;
color: #ffffff;
resize: none;
font-family: inherit;
font-size: 1rem;
min-height: 50px;
}
.enviar-btn,
.dictate-btn.listening {
background-color: none;
}
* {
box-sizing: border-box;
}
.menu-toggle {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
z-index: 6001; /* maior que a sidebar */
position: fixed;
top: 16px;
left: 260px;
transition: left 0.3s ease;
}
.chat-list:not(.hidden) ~ .menu-toggle {
left: 260px; /* move para a direita quando menu estiver aberto */
}
.chat-container {
display: flex;
flex: 1;
overflow: hidden;
}
.chat-list {
position: fixed;
top: 0;
left: 0;
max-width: 300px;
height: 100%;
width: 250px;
background: #161b22;
padding: 10px;
overflow-y: auto;
border-right: 1px solid #000000;
transition: transform 0.3s ease;
z-index: 5000;
padding-top: 49px;
}
.chat-list.hidden {
transform: translateX(-100%);
position: absolute;
z-index: 5000;
height: 100%;
}
.chat-list button,
.chat-list input,
.chat-list select {
width: 100%;
margin-bottom: 8px;
}
.chat-list button:hover {
background-color: #ffffffe8;
}
.message {
margin-bottom: 10px;
white-space: pre-wrap;
}
.message.user {
color: #58a6ff;
text-align: right;
}
.message.bot {
color: #c9d1d9;
text-align: left;
}
.input-area {
display: flex;
gap: 10px;
padding: 10px;
background: #161b22;
border-top: 1px solid #30363d;
flex-wrap: wrap;
}
textarea {
flex: 1;
resize: none;
padding: 10px;
background: #07090c;
border: none;
color: #e6edf3;
border-radius: 5px;
font-size: 16px;
width: 100%;
}
button {
background: #a19090;
color: rgb(255, 255, 255);
border: none;
padding: 10px 16px;
cursor: pointer;
border-radius: 5px;
}
.enviar-button {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
border-radius: 50% !important;
aspect-ratio: 1 / 1 !important;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: #ffffff;
color: #0d1117;
font-size: 26px;
}
.chat-title {
color: #c9d1d9;
font-weight: bold;
margin-bottom: 10px;
text-align: center;
}
@media (max-width: 991px) {
.chat-main {
width: 100%;
padding: 10px;
}
.chat-container {
position: relative;
}
body {
flex-direction: column;
padding-top: env(safe-area-inset-top);
}
header {
background: #0e1117;
padding: 16px 20px;
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding-top: env(safe-area-inset-top);
}
.menu-toggle {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
z-index: 6001; /* maior que a sidebar */
position: fixed;
top: 4px;
left: 260px;
transition: left 0.3s ease;
}
.chat-container {
flex-direction: column;
overflow: hidden;
}
.chat-list {
position: fixed;
top: 0;
left: 0;
max-width: 300px;
height: 100%;
width: 250px;
background: #161b22;
padding: 10px;
overflow-y: auto;
border-right: 1px solid #000000;
transition: transform 0.3s ease;
z-index: 5000;
padding-top: 52px !important;
}
.chat-list.hidden {
transform: translateX(-100%);
position: fixed;
z-index: 5000;
height: 100%;
}
.chat-main {
order: 1;
padding: 10px;
}
.input-area {
flex-direction: row; /* <-- Mantém horizontal mesmo no mobile */
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 6px;
}
.input-area textarea {
flex: 1;
min-height: 40px;
}
.input-area button {
width: auto;
min-width: 60px;
padding: 8px 8px;
font-size: 0.9rem;
}
@media (max-width: 991px) {
.input-area {
flex-wrap: wrap;
}
.dictate-btn {
width: 44px;
height: 44px;
aspect-ratio: 1 / 1;
}
}
.chat-title {
font-size: 1rem;
text-align: center;
margin-bottom: 10px;
}
.message {
font-size: 0.95rem;
}
.chat-list input,
.chat-list button,
.chat-list select {
width: 100%;
}
}
@media (max-width: 991px) {
.dictate-btn {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
border-radius: 50% !important;
aspect-ratio: 1 / 1 !important;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: #88888800;
}
.dictate-btn i {
font-size: 1.3rem;
line-height: 1;
}
.chat-main {
position: relative;
display: flex;
/* 100vh menos header e input */
overflow-y: auto;
}
.input-area {
position: sticky;
bottom: 0;
z-index: 100;
}
}
.modal {
position: fixed !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.modal.hidden {
display: none !important;
}
/* --- ESTILO MODAL CONFIRMAÇÃO (Igual à Foto) --- */
.modal-content {
background-color: #202123; /* Fundo cinza escuro estilo GPT */
color: #ececec;
padding: 18px;
border-radius: 12px;
text-align: left; /* Alinhamento à esquerda importante */
max-width: 420px;
width: 90%;
border: 1px solid #2c2c2c; /* Borda sutil */
box-shadow: 0 10px 40px rgba(0,0,0,0.6); /* Sombra difusa */
position: relative;
display: flex;
flex-direction: column;
}
/* Título "Excluir chat?" */
.modal-title {
margin-top: 0;
margin-bottom: 12px;
font-size: 18px;
font-weight: 400;
color: #ffffff;
}
/* Texto de descrição */
#confirmText {
color: #c5c5c5;
font-size: 14px;
margin-top: 0;
margin-bottom: 24px;
line-height: 1.5;
}
.modal-buttons {
display: flex;
justify-content: flex-end; /* Alinha botões à direita */
gap: 10px;
margin-top: auto;
}
/* Estilo base dos botões (Pílula) */
.modal-buttons button {
padding: 6px 20px;
font-size: 14px;
font-weight: 600 !important;
border-radius: 24px; /* Arredondamento forte */
cursor: pointer;
border: none;
transition: all 0.2s ease;
min-width: 90px !important;
}
/* Botão Cancelar (Cinza Escuro com borda clara) */
#confirmNo {
background-color: #343541;
color: #ececec;
border: 1px solid #565869;
}
#confirmNo:hover {
background-color: #40414f;
border-color: #6e7081;
}
/* Botão Excluir (Vermelho) */
#confirmYes {
background-color: #dc2626; /* Vermelho alerta */
color: white;
border: 1px solid #dc2626;
}
#confirmYes:hover {
background-color: #b91c1c;
box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}
pre, pre code {
background-color: transparent !important; /* ou a cor que você desejar */
}
#arquivoInput {
background: none;
border: 1px solid #444;
padding: 4px;
border-radius: 4px;
}
.input-area {
position: sticky;
bottom: 0;
z-index: 100;
}
/* Para navegadores baseados em WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
width: 8px; /* largura da barra vertical */
height: 8px; /* altura da barra horizontal (se houver) */
}
::-webkit-scrollbar-track {
background: #0e1117; /* cor do fundo da trilha da barra */
}
::-webkit-scrollbar-thumb {
background-color: #444444; /* cor da parte que desliza */
border-radius: 4px;
border: 2px solid #0c0f13; /* espaço em volta para dar aparência mais suave */
}
::-webkit-scrollbar-thumb:hover {
background-color: #575757; /* cor ao passar o mouse */
}
#uploadBtn {
background: none !important;
border: none !important;
padding: 0;
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
#uploadBtn i {
font-size: 1.5rem !important; /* ajuste conforme o tamanho desejado */
color: #d4d4d4 !important; /* cor do ícone, ajuste conforme o tema */
}
.chat-container {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
overflow: hidden !important;
min-height: 0;
}
.chat-main {
flex: 1 !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
padding: 20px;
position: relative;
}
.input-area {
position: sticky!important ;
bottom: 0!important;
z-index: 100!important;
background: #161b22!important;
padding: 10px!important;
border-top: 1px solid #30363d!important;
}
/* modal de alerta, caso aja uploud de arquivos */
.alert-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.56);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000000;
}
.alert-modal.hidden {
display: none;
}
.alert-content {
background: linear-gradient(180deg, rgba(39,39,42,0.98), rgba(24,24,27,0.98));
color: #f7f7f8;
padding: 24px 26px 20px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
max-width: 420px;
width: min(88vw, 420px);
text-align: center;
transform: translateY(8px) scale(0.96);
opacity: 0;
transition: transform 0.18s ease, opacity 0.18s ease;
box-shadow: 0 22px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.alert-content::before {
content: '!';
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin-bottom: 14px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
color: #f7f7f8;
font-size: 18px;
font-weight: 750;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.alert-content p {
margin: 0;
font-size: 1rem;
line-height: 1.45;
letter-spacing: 0;
}
.alert-buttons {
margin-top: 22px;
display: flex;
justify-content: center;
}
.alert-buttons button {
min-width: 96px;
min-height: 42px;
padding: 10px 18px;
font-size: 0.96rem;
font-weight: 650;
background-color: #f2f2f3;
border: none;
border-radius: 999px;
cursor: pointer;
color: #111;
}
.alert-buttons button:hover {
background-color: #fff;
}
.alert-modal:not(.hidden) .alert-content {
transform: translateY(0) scale(1);
opacity: 1;
}
html[data-theme="light"] .alert-content {
background: rgba(255,255,255,0.96);
color: #1d1d1f;
border-color: rgba(0,0,0,0.08);
box-shadow: 0 22px 70px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
}
html[data-theme="light"] .alert-content::before {
background: rgba(0,0,0,0.06);
color: #1d1d1f;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
/* para smartwatch */
@media (max-width: 200px) {
body {
font-size: 11px;
margin: 0;
padding: 0;
}
header {
padding: 6px 8px;
font-size: 12px;
}
.header-right img {
width: 24px;
height: 24px;
}
.chat-container {
padding: 0;
flex-direction: column;
}
.chat-main {
padding: 4px;
}
.input-area {
flex-direction: column;
gap: 4px;
padding: 4px;
}
.input-area textarea {
min-height: 25px;
font-size: 11px;
}
.input-area button {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
font-size: 12px;
}
.chat-title {
font-size: 12px;
}
.chat-list {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: 100%;
z-index: 9999;
background: #161b22;
padding-top: 40px;
}
.chat-list.show {
display: block;
}
.chat-list button {
font-size: 11px;
padding: 4px;
}
.menu-toggle {
display: block;
position: fixed;
top: 6px;
left: 6px;
z-index: 10000;
font-size: 20px;
background: none;
border: none;
color: white;
}
.alert-content {
padding: 8px 12px;
font-size: 11px;
}
.alert-buttons button {
padding: 5px 10px;
font-size: 0.8rem;
}
pre, code {
font-size: 10px;
}
}
/* Botão scroll com liquid glass */
#scrollToBottomBtn {
position:sticky;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 32px;
min-width: unset;
min-height: unset;
padding: 0;
border-radius: 50%;
overflow: hidden;
background: none;
border: none;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px) saturate(300%) contrast(110%);
-webkit-backdrop-filter: blur(2px) saturate(300%) contrast(110%);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1),
inset 0 0 20px rgba(255, 255, 255, 0.1);
cursor: pointer;
}
#scrollToBottomBtn canvas {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
#scrollToBottomBtn i {
position: relative;
z-index: 1;
color: #e6edf3;
font-size: 20px;
}
#scrollToBottomBtn::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
animation: borderGlow 2s infinite linear;
pointer-events: none;
}
@keyframes borderGlow {
0% {
transform: rotate(0deg);
border-color: rgba(255, 255, 255, 0.2);
}
50% {
border-color: rgba(255, 255, 255, 0.4);
}
100% {
transform: rotate(360deg);
border-color: rgba(255, 255, 255, 0.2);
}
}
/* Distancia dos icones desses botões */
button.copiar i,
button.novo-chat svg {
margin-right: 2px;
}
/* Tittle dos botões */
.botao-tooltip {
position: relative;
}
.tooltip-text {
visibility: hidden;
background-color: #292929;
color: #fff;
text-align: center;
padding: 4px 8px;
border-radius: 4px;
position: absolute;
bottom: 125%; /* acima do botão */
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 12px;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s;
}
.botao-tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.botao-tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* Tooltip para baixo */
.tooltip-bottom .tooltip-text {
bottom: auto;
top: 125%; /* aparece abaixo do botão */
}
@media (hover: none) {
.tooltip-text {
display: none !important;
}
}
/* Nome chats no chat-list */
.chats {
color: #aaaaaa; display: block; margin-top: 10px; margin-left: 5px;
}
/* Seu CSS atual do overlay (pode manter como está) */
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(17, 17, 17, 0.7);
z-index: 4999;
display: none;
transition: opacity 0.3s ease;
}
.overlay.active {
display: block;
}
/* Adicione isso para mobile/tablet */
@media (max-width: 1024px) {
.overlay.active {
display: block;
}
/* Isso fará com que o overlay feche o menu quando clicado */
.overlay {
cursor: pointer;
}
}
.input-botoes {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
}
/* MOBILE */
@media (max-width: 767px) {
.input-area {
flex-direction: column;
align-items: stretch;
border-radius: 16px;
}
.input-botoes {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: -6px;
}
.grupo-envio {
display: flex;
gap: 6px;
}
.input-botoes .botao-tooltip {
display: flex;
justify-content: center;
}
/* Botão de adicionar alinhado à direita */
.input-botoes > .botao-tooltip:last-child {
justify-content: flex-end;
}
}
textarea {
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.3) transparent;
}
textarea::-webkit-scrollbar {
width: 6px;
height: 6px;
}
textarea::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 4px;
}
textarea::-webkit-scrollbar-track {
background: transparent;
}
/* Estilo geral do input-area em desktop */
.input-area {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
/* Agrupamento dos botões à esquerda */
.input-botoes {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
/* Botões já possuem tamanho padrão */
.botao-tooltip button {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Textarea deve ocupar o resto do espaço */
.input-area textarea {
flex: 1;
resize: none;
min-height: 50px;
}
.grupo-envio {
display: flex;
justify-content: flex-start;
gap: 8px;
}
@media (max-width: 767px) {
#scrollToBottomBtn {
bottom: 145px !important; /* antes estava 110px */
}
}
.dictate-btn:hover,
.botao-tooltip:hover {
background-color: #1f252e;
}
.botao-tooltip {
border-radius: 50%;}
.botao-tooltipp:hover {
background-color: #44444400!important;
}
@media (max-width: 767px) {
.input-botoes .botao-tooltip button,
.enviar-button,
.dictate-btn
{
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
font-size: 18px !important;
}
.dictate-btn i,
.enviar-button i,
#uploadBtn i {
font-size: 1.3rem !important;
}
.input-area {
bottom: 10px !important;
margin-bottom: 6px; /* opcional: dá mais espaço extra */
}
}
.mensagem-inicial {
text-align: center;
font-size: 30px;
color: #cacaca;
margin-top: 50px;
margin-bottom: 70px;
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease, margin 0.3s ease;
}
.mensagem-inicial.oculta {
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}
@media (max-width: 767px) {
.mensagem-inicial {
font-size: 18px;
margin-bottom: 36px !important;
}
}
.input-fundo-fixo {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 80px;
background-color: #0e1117;
z-index: 0;
pointer-events: none;
}
/* Ajuste para mensagens do usuário */
.message.user .miniatura-imagem {
margin-left: auto;
}
.preview-imagem {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0;
border-radius: 12px;
background: rgba(0,0,0,0.08);
width: 100%;
max-width: 900px;
}
.preview-imagem img {
max-width: 120px;
max-height: 120px;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.hidden {
display: none;
}
/* =========================
QUICK MEDIA ACTIONS (Imagem / Vídeo / Música)
Botões de ação rápida exibidos na tela vazia (boas-vindas).
========================= */
.quick-media-actions {
width: min(900px, calc(100% - 4px));
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 auto 2px;
padding: 6px 2px 4px;
overflow: visible;
}
.quick-media-actions.hidden {
display: none !important;
}
body.quick-media-actions-visible #quickMediaActions {
display: flex !important;
}
/* Plano free: vídeo e música são exclusivos de planos pagos. Esconde tanto
os itens do plus-menu quanto os botões de ação rápida (Vídeo/Música).
A classe `plano-free` é mantida no body por _sincronizarClassePlano(). */
body.plano-free .plus-menu .btn-video-item,
body.plano-free .plus-menu .btn-music-item,
body.plano-free .quick-media-btn.quick-video,
body.plano-free .quick-media-btn.quick-music {
display: none !important;
}
.quick-media-btn {
--quick-color: #ffffff;
--quick-bg: transparent;
--quick-border: rgba(255,255,255,0.14);
aspect-ratio: auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: 38px !important;
min-height: 38px !important;
border-radius: 999px !important;
border: 1px solid var(--quick-border);
background: var(--quick-bg);
color: var(--quick-color);
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 15px !important;
font-size: 13px;
font-weight: 700;
line-height: 1 !important;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(0,0,0,0.10);
transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.quick-media-btn i {
font-size: 13px;
margin: 0 !important;
color: currentColor;
}
.quick-media-btn:hover,
.quick-media-btn.active {
background:
radial-gradient(circle at 18% 12%, rgba(255,255,255,0.16), transparent 32%),
var(--quick-bg);
border-color: color-mix(in srgb, var(--quick-color) 55%, transparent);
}
.quick-media-btn:active {
transform: translateY(0) scale(0.98);
}
/* Light mode: texto preto pra contraste */
html[data-theme="light"] .quick-media-btn {
--quick-color: #000000;
--quick-border: rgba(13,13,13,0.10);
box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}
@media (max-width: 520px) {
.quick-media-actions {
justify-content: center;
overflow: visible;
padding-inline: 4px;
scrollbar-width: none;
}
.quick-media-actions::-webkit-scrollbar { display: none; }
.quick-media-btn {
height: 36px !important;
min-height: 36px !important;
padding: 0 13px !important;
font-size: 12.5px;
flex: 0 0 auto !important;
}
}
.input-wrapper {
position: sticky;
bottom: 0;
z-index: 100;
background: #fdfdfd00;
display: flex;
flex-direction: column;
padding: 6px 10px;
gap: 6px;
}
#preview-imagem-container {
background: #161b22;
}
/* Adicione/substitua estas regras no seu styles.css */
/* Container do bloco de código */
.code-block {
background: #07090c;
border-radius: 12px; /* Arredondado */
overflow: hidden; /* Importante para o border-radius funcionar */
margin: 10px 0;
position: relative;
}
/* Toolbar com botão copiar DENTRO do bloco */
.code-toolbar {
position: relative;
right: 8px;
z-index: 10;
display: flex;
justify-content: flex-end;
}
/* Ajuste do pre/code para dar espaço ao botão */
pre {
margin: 0 !important;
padding: 0px 15px 15px 15px !important; /* Espaço no topo para o botão */
background: #07090c !important;
border-radius: 12px;
overflow-x: auto;
}
/* Container das miniaturas do usuário */
.message.user .miniaturas-imagem {
justify-content: flex-end;
align-self: flex-end;
}
/* Miniaturas */
.miniatura-chat {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 6px;
}
#preview-imagem-container {
padding: 6px;
}
.preview-item {
position: relative;
width: 64px;
height: 64px;
}
.preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
border: 1px solid #444;
}
.preview-item button {
position: absolute;
top: -5px !important;
right: -5px !important;
width: 22px !important;
height: 22px !important;
min-width: unset !important;
min-height: unset !important;
padding: 0 !important;
border-radius: 50%;
border: solid 1px #303131;
background-color: #07090c;
color: #fff;
font-size: 12px !important;
line-height: 22px !important; /* Mantém centralizado verticalmente */
text-align: center;
z-index: 5;
cursor: pointer;
/* --- MUDANÇAS PARA ANIMAÇÃO E CENTRALIZAÇÃO --- */
display: flex !important; /* Sempre flex para alinhar o conteúdo */
align-items: center !important;
justify-content: center !important;
/* Estado Inicial (Escondido) */
opacity: 0;
visibility: hidden; /* Impede clique quando invisível */
/* Configuração da transição suave */
transition: all 0.2s ease-out; /* Efeito elástico (bouncy) */
}
.preview-item:hover button {
/* Estado Final (Visível) */
opacity: 1;
visibility: visible;
}
/* Miniaturas de arquivo no chat */
.miniaturas-arquivo {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
padding: 10px;
background: transparent;
border-radius: 8px;
justify-content: right;
}
.arquivo-item {
display: flex;
align-items: center;
padding: 8px 12px;
background: #252525;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
border: 1px solid transparent;
max-width: 200px;
}
.arquivo-item:hover {
background: #2d2d2d;
border-color: #58a6ff;
transform: translateY(-2px);
}
/* Visualizador de arquivo */
.visualizador-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
}
.visualizador-container {
background: #1e1e1e;
border-radius: 12px;
width: 90%;
max-width: 1000px;
height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid #333;
}
.botao-visualizador {
color: white;
border: none;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
transition: background 0.2s;
}
/* Para o código no visualizador */
pre code {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.icone-arquivo {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
border: 1px solid #444;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px; /* mantém o visual antigo */
font-weight: bold;
font-size: 16px;
box-sizing: border-box;
}
/* Container do Loader */
.yuna-loader-container {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background: none;
border-radius: 12px;
width: fit-content;
border: none;
}
.loader-text {
font-size: 14px;
color: #ccc;
font-family: 'Inter', sans-serif;
}
/* Esferas pulsantes */
.typing-dots {
display: flex;
gap: 4px;
}
.typing-dots span {
width: 6px;
height: 6px;
background-color: #58a6ff; /* Cor azul do seu projeto */
border-radius: 50%;
animation: typing-bounce 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing-bounce {
0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
40% { transform: scale(1); opacity: 1; }
}
.code-block {
position: relative;
margin: 10px 0;
background: #07090c;
border-radius: 12px;
overflow: visible;
padding: 0;
border: 1px solid #2e2e2e;
padding-right: 1px;
padding-left: 1px;
}
.code-toolbar {
position: sticky;
top: -22px !important; /* distância do topo da viewport */
z-index: 4;
display: flex;
justify-content: flex-end;
padding: 0 12px;
pointer-events: auto;
}
.code-block pre {
margin: 0;
padding: 16px 18px 18px;
border-radius: 0 0 12px 12px;
background: transparent !important;
}
/* --- Rótulo de Linguagem no Código --- */
.code-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 16px;
padding: 4px 22px 4px 12px;
background: #07090c;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.8);
border-radius: 12px 12px 0 0;
}
.code-lang {
font-size: 12px;
font-weight: bold;
color: #8b949e;
text-transform: uppercase;
font-family: sans-serif;
user-select: none;
margin-right: auto;
}
/* Ajuste para o botão de copiar ficar na direita */
.code-toolbar button {
margin-left: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 32px;
padding: 6px 12px;
border-radius: 8px;
white-space: nowrap;
}
.code-toolbar .code-lang + button {
margin-left: auto !important;
}
.code-toolbar button + button {
margin-left: 24px !important;
}
/* Ajuste o pre para não ter padding no topo, pois a toolbar já ocupa espaço */
.code-block pre {
margin: 0;
padding: 15px;
border-radius: 0 0 12px 12px;
background: transparent;
}
/* --- Botões de Ação na Mensagem do Usuário (Editar/Copiar) --- */
.message-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
opacity: 0; /* Invisível por padrão no Desktop */
transition: opacity 0.2s ease;
}
/* No hover da mensagem, mostra os botões */
.message.user:hover .message-actions {
opacity: 1;
}
/* No celular, mostra sempre */
@media (max-width: 834px) {
.message.user .message-actions {
opacity: 1 !important;
}
}
.action-btn {
background: transparent;
border: none;
color: #8b949e;
cursor: pointer;
/* Troque flex por inline-flex para ele se comportar como um elemento de linha */
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
border-radius: 4px;
transition: background 0.2s, color 0.2s;
/* Reset total de tamanhos */
width: max-content !important; /* Força a largura para o tamanho do conteúdo */
height: auto !important;
min-width: unset !important;
min-height: unset !important;
line-height: 1; /* Evita que a altura da linha aumente o botão */
}
.action-btn:hover {
background-color: #353535dc;
color: #e6edf3;
}
/* --- Ajuste do Contêiner de Ações (o "quadrado" invisível) --- */
.message-actions {
display: flex;
justify-content: flex-end; /* Alinha os botões à direita */
margin-top: 2px; /* Espaço mínimo entre o texto e os botões */
opacity: 0;
transition: opacity 0.2s ease;
/* SEGREDOS PARA DIMINUIR O QUADRADO: */
height: auto; /* Altura automática conforme os botões */
line-height: 0; /* Remove espaços de linha de texto residuais */
pointer-events: none; /* Evita que o quadrado invisível bloqueie cliques quando oculto */
}
/* Garante que os botões voltem a aceitar clique quando aparecerem */
.message.user:hover .message-actions {
opacity: 1;
pointer-events: auto;
}
/* --- Ajuste fino nos Botões (para ficarem bem pequenos e rentes) --- */
.action-btn {
background: transparent;
border: none;
color: #8b949e;
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 2px 0px; /* Zero padding lateral para colar no canto */
margin: 0;
border-radius: 50%;
width: 30px !important;
height: 30px !important; /* Altura fixa bem baixa */
min-width: unset !important;
min-height: unset !important;
line-height: 1;
}
.action-btn i {
font-size: 16px; /* Ícone um pouco menor que o texto */
}
/* Estilo para as setas de navegação de versões */
.version-controls {
display: inline-flex;
align-items: center;
gap: 8px;
margin-right: 8px;
font-size: 11px;
color: #8b949e;
user-select: none;
}
/* Versão ULTRA FINA */
.version-btn {
background: transparent !important;
border: none !important;
color: #8b949e;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s ease;
width: 22px !important; /* EXTREMAMENTE fino */
height: 30px !important;
min-width: 22px !important;
min-height: 30px !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 !important;
margin: 0 1px !important;
box-sizing: border-box !important;
}
.version-btn i {
font-size: 16px; /* Ícone ainda menor */
}
.version-btn:hover:not(:disabled) {
background: #353535dc !important;
color: #e6edf3 !important;
}
.version-btn:disabled {
opacity: 0.3;
cursor: default;
}
/* Garante que o container de ações alinhe tudo verticalmente */
.message-actions {
display: flex;
align-items: center; /* Alinha setas e botões */
justify-content: flex-end;
gap: 8px;
margin-top: -23px;
opacity: 0;
transition: opacity 0.2s ease;
}
.liquidCanvas {
z-index: 6;}
/* ========== BOTÕES DE AÇÃO DO BOT ========== */
.message.bot .bot-actions {
display: flex;
gap: 8px;
justify-content: flex-start; /* Alinha à esquerda para o bot */
margin-top: -23px;
opacity: 0;
transition: opacity 0.2s ease;
}
.message.bot:hover .bot-actions {
opacity: 1;
}
/* Em mobile, mostra sempre */
@media (max-width: 834px) {
.message.bot .bot-actions {
opacity: 1 !important;
}
.version-btn {
font-size: 17px !important;
z-index: 100 !important;
}
}
/* Botão de fala específico */
.speak-btn {
color: #8b949e !important;
background: transparent !important;
border: none !important;
}
.speak-btn:hover {
background: #353535dc !important;
color: #e6edf3 !important;
}
.speak-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Animação do spinner */
.fa-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.message-actions {
z-index: 100;
position: relative;
}
.action-btn {
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 101;
}
/* Adicione ao seu arquivo CSS */
.speak-btn {
-webkit-tap-highlight-color: transparent; /* Remove o highlight azul no iOS */
touch-action: manipulation; /* Melhora a responsividade do toque */
}
/* Garante que botões sejam clicáveis no iOS */
.action-btn {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Tooltips para os botões dentro das mensagens */
.message-actions .botao-tooltip {
position: relative;
display: inline-block;
z-index: 50; /* Garante que fique acima da mensagem */
}
/* Tooltips nos botões de ação das mensagens */
.message-actions .tooltip-text {
visibility: hidden;
background-color: #1b1b1b;
color: #fff;
text-align: center;
padding: 9px 13px;
border-radius: 6px;
position: absolute;
top: 120%; /* Mude de bottom para top */
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 13px;
z-index: 1001;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
min-width: max-content;
}
/* Seta aponta para CIMA — tooltip aparece abaixo do botão */
.message-actions .tooltip-text::after {
content: '';
position: absolute;
top: auto;
bottom: 100%; /* seta no TOPO da caixa do tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
/* triângulo ▲ apontando para cima em direção ao botão */
border-color: transparent transparent #1b1b1b transparent;
}
.message-actions .botao-tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
/* IMPORTANTE: Garantir que as mensagens não cortem os tooltips */
.message {
position: relative;
overflow: visible !important;
}
.message.bot, .message.user {
overflow: visible !important;
z-index: auto;
}
/* Ajuste específico para mensagens do bot */
.message.bot .message-actions {
position: relative;
z-index: 100;
}
/* Ajuste para tooltips em telas pequenas */
@media (max-width: 767px) {
.message-actions .tooltip-text {
padding: 5px 8px;
font-size: 11px;
top: 130%; /* Ajuste para mobile também */
}
}
.message.user .message-actions {
position: relative !important;
z-index: 1000 !important;
pointer-events: auto !important;
transform: translateZ(0); /* Força layer GPU */
will-change: transform; /* Otimiza animações */
}
.version-controls {
display: inline-flex !important;
align-items: center;
gap: 6px;
position: relative !important;
z-index: 1001 !important;
pointer-events: auto !important;
}
.version-btn {
z-index: 1002 !important;
}
/* Garantir que o container da mensagem não tenha overflow que esconda */
.message.user {
position: relative;
overflow: visible !important;
}
/* Prevenir que qualquer elemento sobreponha */
#mensagens {
overflow-anchor: none; /* Evita comportamento nativo de scroll */
transform: translateZ(0); /* Cria novo contexto de stacking */
}
.enviar-button.parar {
font-size: 16px;
background: #353535dc !important;
color: #e6edf3 !important;
}
/* Forçar que botões permaneçam clicáveis após scroll */
@media (max-width: 767px) {
.message.user {
isolation: isolate; /* Cria novo contexto de stacking */
}
.version-btn {
width: auto !important;
height: auto !important;
min-width: 20px !important;
min-height: 20px !important;
font-size: 15px !important;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.version-btn:hover:not(:disabled) {
background: none !important;
color: #e6edf3 !important;
}
.enviar-button.parar {
font-size: 1.1rem;
}
}
.message.user p {
align-self: flex-end; /* 👉 joga para a direita */
background: #303030 !important; /* cor do fundo (exemplo) */
color: #fff;
padding: 10px 14px;
border-radius: 14px 7px 14px 14px;
margin-left: auto;
max-width: 75%; /* evita ficar gigante */
width: fit-content; /* 🔥 tamanho do texto */
}
#mensagens {
margin-bottom: 42px;}
;
/* Estilos para edição inline */
.texto-mensagem {
transition: opacity 0.2s ease;
}
.texto-mensagem.hidden {
display: none;
}
.textarea-edicao {
width: 100%;
min-height: 60px;
padding: 10px;
background: #252525;
color: #fff;
border: 1px solid #58a6ff;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
margin: 5px 0;
transition: all 0.2s ease;
}
.textarea-edicao:focus {
outline: none;
border-color: #1f6feb;
box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
}
.textarea-edicao.hidden {
display: none;
}
.botoes-edicao {
display: inline-flex;
gap: 8px;
margin-left: 8px;
transition: opacity 0.2s ease;
}
.botoes-edicao.hidden {
display: none !important;
}
.botoes-edicao .action-btn {
color: #8b949e;
background: transparent;
border: 1px solid #30363d;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.botoes-edicao .action-btn:hover {
background: #353535dc;
color: #e6edf3;
}
.botoes-edicao .action-btn:first-child:hover {
background: #238636;
border-color: #238636;
}
.botoes-edicao .action-btn:last-child:hover {
background: #da3633;
border-color: #da3633;
}
.conteudo-usuario {
position: relative;
margin-bottom: 8px;
}
/* Garantir que os botões de tooltip sejam visíveis */
.botao-tooltip.hidden {
display: none;
}
/* Estilos para os containers de botões */
.botoes-normais {
display: inline-flex;
align-items: center;
gap: 8px;
}
.botoes-edicao {
display: inline-flex;
align-items: center;
gap: 8px;
}
.botoes-normais.hidden,
.botoes-edicao.hidden {
display: none !important;
}
/* Botões de ação durante edição */
.botoes-edicao .action-btn {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
border-radius: 50%;
background: #4d4b4b96;
border: 1px solid #22272c;
color: #8b949e;
transition: all 0.2s ease;
}
.botoes-edicao .action-btn:hover {
transform: scale(1.1);
}
.botoes-edicao .action-btn:first-child:hover {
background: #81787896;
border-color: #238636;
color: white;
}
.botoes-edicao .action-btn:last-child:hover {
background: #81787896;
border-color: #da3633;
color: white;
}
/* Textarea de edição */
.textarea-edicao {
width: 100%;
min-height: 60px;
max-height: 200px;
padding: 10px;
background: #252525;
color: #fff;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
margin: 5px 0;
transition: all 0.2s ease;
}
.textarea-edicao:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
}
.textarea-edicao.hidden {
display: none;
}
/* Garantir que o conteúdo da mensagem ocupe espaço quando editado */
.conteudo-usuario {
position: relative;
margin-bottom: 8px;
min-height: 40px;
}
.texto-mensagem.hidden {
display: none;
}
/* Melhorar visibilidade durante edição */
.message.user.editing {
background: rgba(88, 166, 255, 0.05);
border-radius: 8px;
padding: 8px;
margin-bottom: 12px;
}
/* ========== ESTILOS DO MODO DE VOZ ========== */
/* Botão de Modo de Voz */
.modo-voz-btn {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
border-radius: 50% !important;
background-color: #88888800;
color: #fff;
border: none;
cursor: pointer;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
}
.modo-voz-btn i {
font-size: 1.3rem;
}
.modo-voz-btn:hover {
background-color: #1f252e;
}
.modo-voz-btn.ativo {
background-color: #58a6ff !important;
color: #000 !important;
animation: pulse-voice 2s infinite;
}
.modo-voz-btn.escutando {
background-color: #ff4444 !important;
animation: pulse-listening 1s infinite;
}
@keyframes pulse-voice {
0%, 100% {
box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.7);
}
50% {
box-shadow: 0 0 0 10px rgba(88, 166, 255, 0);
}
}
@keyframes pulse-listening {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
}
50% {
box-shadow: 0 0 0 10px rgba(255, 68, 68, 0);
}
}
/* Overlay do Modo de Voz */
#voice-mode-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(10px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Container Principal */
.voice-mode-container {
background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
border-radius: 20px;
padding: 30px;
max-width: 500px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
animation: slideUp 0.4s ease;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Header */
.voice-mode-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #444;
}
.voice-mode-header h3 {
margin: 0;
color: #fff;
font-size: 24px;
font-weight: 600;
}
.close-voice-btn {
background: transparent;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
border-radius: 50%;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.close-voice-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
}
/* Status de Voz */
.voice-status {
text-align: center;
padding: 40px 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
margin-bottom: 30px;
}
.voice-indicator {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-bottom: 20px;
height: 60px;
}
.voice-wave {
width: 8px;
background: linear-gradient(180deg, #58a6ff 0%, #1f6feb 100%);
border-radius: 4px;
animation: voice-wave-animation 1.2s ease-in-out infinite;
}
.voice-wave:nth-child(1) {
animation-delay: 0s;
}
.voice-wave:nth-child(2) {
animation-delay: 0.2s;
}
.voice-wave:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes voice-wave-animation {
0%, 100% {
height: 20px;
}
50% {
height: 60px;
}
}
#voice-status-text {
color: #fff;
font-size: 18px;
margin: 0;
font-weight: 500;
}
/* Comandos Disponíveis */
.voice-commands {
background: rgba(88, 166, 255, 0.1);
border: 1px solid rgba(88, 166, 255, 0.3);
border-radius: 12px;
padding: 20px;
}
.voice-commands p {
margin: 0 0 15px 0;
color: #58a6ff;
font-size: 16px;
font-weight: 600;
}
.voice-commands ul {
margin: 0;
padding-left: 20px;
color: #ccc;
line-height: 1.8;
}
.voice-commands li {
margin-bottom: 8px;
}
/* Responsivo Mobile */
@media (max-width: 767px) {
.modo-voz-btn {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
font-size: 18px !important;
}
.modo-voz-btn i {
font-size: 1.1rem !important;
}
.voice-mode-container {
padding: 20px;
max-width: 95%;
}
.voice-mode-header h3 {
font-size: 20px;
}
.voice-indicator {
height: 50px;
}
.voice-wave {
width: 6px;
}
@keyframes voice-wave-animation {
0%, 100% {
height: 15px;
}
50% {
height: 50px;
}
}
#voice-status-text {
font-size: 16px;
}
.voice-commands p {
font-size: 14px;
}
.voice-commands ul {
font-size: 13px;
}
}
/* Estado quando está ouvindo */
.modo-voz-btn.escutando .voice-wave {
background: linear-gradient(180deg, #ff4444 0%, #cc0000 100%);
}
/* Animação de fala */
@keyframes speaking-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.voice-status.speaking {
animation: speaking-pulse 1s infinite;
}
.voice-status.speaking .voice-wave {
background: linear-gradient(180deg, #4caf50 0%, #2e7d32 100%);
}
/* Esconder elementos */
.hidden {
display: none !important;
}
/* Garantir que o grupo-envio ajuste o espaço */
.grupo-envio {
display: flex;
align-items: center;
gap: 8px; /* Ajuste o espaçamento entre botões */
}
/* Ajuste para o botão de modo de voz no lugar do enviar */
.modo-voz-btn {
/* Herda os estilos do enviar-button para ficar igual em tamanho e forma */
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
border-radius: 50% !important;
aspect-ratio: 1 / 1 !important;
padding: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: #ffffff;
color: #0d1117;
font-size: 30px;
}
.modo-voz-btn:hover {
background-color: #c5c5c5;
}
/* Ajustes para mobile */
@media (max-width: 767px) {
.modo-voz-btn {
width: 38px !important;
height: 38px !important;
font-size: 20px;
}
}
.enviar-button, .modo-voz-btn {
display: flex !important; /* Ativa o Flexbox */
align-items: center !important; /* Centraliza verticalmente */
justify-content: center !important; /* Centraliza horizontalmente */
padding: 0 !important; /* Remove paddings que podem deslocar o ícone */
border: none !important; /* Garante que bordas não empurrem o ícone */
cursor: pointer !important;
overflow: hidden !important; /* Garante que nada saia do círculo */
}
/* Caso os ícones () tenham margens internas, remova-as */
.enviar-button i, .modo-voz-btn i {
margin: 0;
padding: 0;
display: inline-block; /* Garante que o ícone se comporte previsivelmente */
line-height: 1; /* Evita altura de linha extra do texto */
}
/* Aplica-se ao botão de enviar e ao de voz */
.enviar-button, .modo-voz-btn {
display: flex;
align-items: center;
justify-content: center;
position: relative; /* Necessário para o posicionamento do ícone */
padding: 0;
}
/* Ajuste específico para o ícone e seu ::before */
.enviar-button i, .modo-voz-btn i {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px; /* Ajuste conforme o tamanho que você quer do ícone */
height: 20px; /* Deve ser igual à largura */
line-height: 1;
}
.enviar-button i::before, .modo-voz-btn i::before {
display: block;
position: absolute;
/* Força o alinhamento no centro exato do elemento */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
}
/* Adicione logo após as regras do header */
.header-left {
display: flex;
align-items: center;
gap: 10px;
position: relative;
z-index: 3000;
margin-left: 44px;
}
.novo-chat {
border-radius: 20px !important;
margin-top: -20px !important;
min-height: 40px !important;
height: 40px !important;
}
/* Estilize o botão novo-chat1 */
.novo-chat1 {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 50%;
aspect-ratio: 1 / 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
background-color: none;
}
.novo-chat1:hover {
background-color: rgba(78, 78, 78, 0.15);
}
/* Tooltip específico para o botão no header (aparece embaixo) */
.header-left .botao-tooltip .tooltip-text {
top: 120%; /* Aparece embaixo do botão */
bottom: auto;
background-color: #1b1b1b;
}
/* Seta apontando para cima (fica acima do tooltip) */
.header-left .botao-tooltip .tooltip-text::after {
content: '';
position: absolute;
top: 100%; /* Seta aponta para baixo */ /* Fica acima do tooltip */
top: auto;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #1b1b1b transparent transparent transparent; /* Seta apontando pra cima */
}
/* ====================================================================
CORREÇÃO DE DESKTOP: ANIMAÇÃO LATERAL (PUSH)
==================================================================== */
@media (min-width: 992px) {
/* 1. FORÇAR layout lado-a-lado (corrige o problema de ir para baixo) */
.chat-container {
flex-direction: row !important;
position: relative;
overflow: hidden; /* Evita barra de rolagem durante a animação */
}
/* 2. Configura a Sidebar para ocupar espaço físico e empurrar o chat */
.chat-list {
position: relative !important; /* Deixa de ser fixed */
top: auto !important;
left: auto !important;
height: 100vh !important; /* Altura total da viewport */
padding-top: 10px !important; /* Remove o espaçamento do header fixo */
width: 260px !important;
min-width: 260px !important;
/* Configuração da Animação */
margin-left: 0;
transform: none !important; /* Desativa o translate do mobile */
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.3s ease,
opacity 0.2s ease;
z-index: 3001 !important;
opacity: 1;
border-right: 1px solid #30363d; /* Opcional: borda para separar */
}
/* 3. Estado FECHADO no Desktop */
/* Usamos margem negativa para "puxar" a sidebar para fora da tela */
.chat-list.hidden {
margin-left: -260px !important; /* Puxa para a esquerda */
opacity: 0;
pointer-events: none;
/* Não alteramos display para manter a transição suave */
}
/* 4. O Chat Principal se expande automaticamente */
.chat-main {
flex: 1 !important; /* Ocupa o espaço restante */
width: auto !important;
max-width: 100% !important;
transition: all 0.3s ease; /* Suaviza o redimensionamento */
}
/* 5. Remove o Overlay no Desktop (não é necessário no modo push) */
.overlay,
.overlay.active {
display: none !important;
pointer-events: none;
}
/* Quando a sidebar fecha, o botão volta para a esquerda */
.chat-list.hidden ~ .menu-toggle {
left: 20px !important;
}
header {
z-index: 3000 !important; /* Mantém abaixo da sidebar */
position: relative;
}
/* 2. Sidebar com z-index mais alto */
.chat-list {
height: 100vh !important; /* Altura total da viewport */
background: #161b22 !important;
border-right: 1px solid #000000 !important;
}
}
/* Regras gerais para a sidebar */
.chat-list {
position: fixed;
top: 0;
left: 0;
width: 260px;
height: 100vh;
background: #161b22;
overflow-y: auto;
transition: transform 0.3s ease;
transform: translateX(-100%); /* Inicialmente escondida */
padding-top: 10px;
}
.chat-list:not(.hidden) {
transform: translateX(0); /* Mostra a sidebar */
}
/* Header com z-index menor */
header {
position: relative;
z-index: 3000;
}
/* No desktop, ajuste a sidebar */
@media (min-width: 992px) {
.chat-list {
position: fixed !important; /* Mantém fixa no desktop */
transform: none !important; /* Remove transform */
margin-left: 0 !important;
padding-top: 50px !important;
}
.chat-list.hidden {
transform: translateX(-100%) !important;
}
/* Ajuste do container principal */
.chat-container {
padding-left: 260px; /* Espaço para a sidebar */
transition: padding-left 0.3s ease;
}
.chat-list.hidden ~ .chat-container {
padding-left: 0;
}
/* Ajuste do menu toggle */
.menu-toggle {
position: fixed;
top: 16px;
left: 260px;
z-index: 5000 !important; /* Acima de tudo */
transition: left 0.3s ease;
}
.chat-list.hidden ~ .menu-toggle {
left: 20px !important;
}
}
@media (max-width: 767px) {
.header-left {
top: 4px;
}
}
/* ====================================================================
ANIMAÇÕES MOBILE (SIDEBAR E OVERLAY)
==================================================================== */
@media (max-width: 991px) {
.novo-chat {
margin-top: 0px !important;
}
/* 3. Animação do Fundo Escuro (Overlay) */
.overlay {
display: block !important; /* Força o display para controlar via opacity */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 4999;
/* Estado Inicial (Invisível) */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
pointer-events: none; /* Deixa clicar através quando invisível */
}
.overlay.active {
/* Estado Ativo (Visível) */
opacity: 1;
visibility: visible;
pointer-events: auto; /* Captura cliques para fechar */
}
/* 4. Suavizar o movimento do Botão Menu */
.menu-toggle {
/* O JS muda o 'left', isso fará o botão deslizar em vez de pular */
transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 5001; /* Garante que fique acima da sidebar */
}
}
@media (max-width: 991px) {
/* ESTADO BASE E ENTRADA */
.chat-list {
display: block !important; /* Impede que o display: none mate a animação */
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 260px !important;
height: 100vh !important;
z-index: 5000 !important;
background: #161b22 !important;
/* A mágica acontece aqui: transição de transform */
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
transform: translateX(0) !important; /* Visível por padrão */
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
visibility: visible !important;
}
/* ESTADO SAÍDA (Quando tem a classe .hidden) */
.chat-list.hidden {
/* Em vez de sumir com display: none, apenas jogamos para fora da tela */
transform: translateX(-105%) !important;
/* Mantemos display block para o navegador animar o movimento de volta */
display: block !important;
/* Remove a sombra para não aparecer um risco no canto da tela */
box-shadow: none !important;
/* Opcional: esconde após a transição para não atrapalhar cliques */
visibility: hidden !important;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s 0.4s !important;
}
}
/* 1. CONFIGURAÇÃO GLOBAL DA SIDEBAR (Mobile e Desktop) */
.chat-list {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 260px !important;
height: 100vh !important;
z-index: 5000 !important;
background: #161b22 !important;
border-right: 1px solid #30363d !important;
/* ANIMAÇÃO: Mesma curva para entrada e saída */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 0s !important;
/* Estado Aberto (Padrão) */
transform: translateX(0) !important;
visibility: visible !important;
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3);
}
/* 2. ESTADO FECHADO (Universal) */
.chat-list.hidden {
transform: translateX(-100%) !important;
visibility: hidden !important;
box-shadow: none !important;
/* Delay na visibilidade para a animação de saída completar */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 0.4s !important;
}
/* 3. AJUSTE DO CONTEÚDO PRINCIPAL (Desktop) */
/* Para que o chat não fique "por baixo" da sidebar no PC */
@media (min-width: 992px) {
.main-content {
margin-left: 260px; /* Espaço da sidebar */
transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Quando a sidebar fecha no PC, o chat expande para a esquerda */
body:has(.chat-list.hidden) .main-content {
margin-left: 0;
}
}
/* 4. OVERLAY (Apenas Mobile) */
@media (max-width: 991px) {
.overlay.active {
display: block;
opacity: 1;
visibility: visible;
}
}
/* Esconde o overlay no Desktop para não escurecer a tela */
@media (min-width: 992px) {
.overlay {
display: none !important;
}
}
/* ====================================================================
ESTILO DOS CHATS NO MENU LATERAL
==================================================================== */
/* Container de cada item de chat */
.chat-item-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
padding: 0px 4px 0px 0px;
border-radius: 8px;
transition: background-color 0.2s ease;
position: relative;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
overflow: visible;
}
.chat-item-container:hover {
background-color: rgba(255, 255, 255, 0.05);
}
/* Botão principal do chat */
.chat-button {
flex: 1;
background: none !important;
border: none !important;
color: #e6edf3 !important;
text-align: left;
padding: 8px 12px;
font-size: 14px !important;
border-radius: 6px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.2s ease;
margin: 0 !important;
justify-content: left;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
line-height: 20px;
box-sizing: border-box;
display: block;
width: 100%;
}
/* Chat ativo */
.chat-item-container.active .chat-button {
background-color: rgba(88, 166, 255, 0.2);
color: #58a6ff;
font-weight: 500;
}
/* Container das ações (três pontos) */
.chat-actions {
position: relative;
}
/* Botão de três pontos - ESCONDIDO por padrão */
.chat-menu-btn {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
border-radius: 6px;
background: none !important;
border: none;
color: #8b949e !important;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
font-size: 16px;
margin-bottom: 0px !important;
/* Escondido por padrão */
opacity: 0 !important;
visibility: hidden;
transform: scale(0.8);
border-radius: 50% !important;
}
/* MOSTRAR os três pontos no hover do container ou quando dropdown está aberto */
.chat-item-container:hover .chat-menu-btn,
.chat-menu-btn.dropdown-open {
opacity: 1 !important;
visibility: visible;
transform: scale(1);
}
.chat-menu-btn:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Dropdown menu */
.chat-dropdown {
position: absolute;
top: 100%;
right: 0;
background: #1e1e1e;
border: 1px solid #30363d;
border-radius: 8px;
padding: 6px;
min-width: 150px !important;
z-index: 10000;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
animation: fadeIn 0.15s ease;
}
.chat-dropdown.hidden {
display: none;
}
/* Itens do dropdown */
.dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 16px;
background: none !important;
border: none;
color: #e6edf3 !important;
font-size: 14px;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
justify-content: left;
height: 36px !important;
min-height: 36px !important;
margin-bottom: 0px !important;
}
.dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.dropdown-item.excluir-chat {
color: #ff6b6b !important;
}
.dropdown-item.excluir-chat:hover {
background-color: rgba(255, 107, 107, 0.1) !important;
}
.dropdown-item i {
font-size: 14px;
width: 16px;
text-align: center;
}
/* Animações */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Ajuste para destacar o chat ativo */
.chat-item-container.active {
background-color: rgba(88, 166, 255, 0.1);
}
/* MOSTRAR sempre os três pontos no chat ativo */
.chat-item-container.active .chat-menu-btn {
opacity: 1;
visibility: visible;
transform: scale(1);
}
/* Responsivo */
@media (max-width: 767px) {
.chat-button {
padding: 10px 12px;
font-size: 15px;
}
.chat-dropdown {
min-width: 140px;
}
/* No mobile, mostrar sempre os três pontos para facilitar o toque */
.chat-menu-btn {
opacity: 1 !important;
visibility: visible !important;
transform: scale(1) !important;
}
}
/* Ajuste para quando o dropdown está aberto */
.chat-item-container .chat-menu-btn.dropdown-open {
background-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.dropdown-item.renomear-chat:hover {
background-color: rgba(88, 166, 255, 0.1);
}
/* Ícone do botão renomear */
.dropdown-item.renomear-chat i {
color: #ffffff !important;
}
/* Ajuste do dropdown para dois itens */
.chat-dropdown {
min-width: 160px;
}
/* ========== ESTILOS PARA RENOMEAR CHAT DIRETAMENTE ========== */
/* Input para edição do nome do chat */
.chat-edit-input {
flex: 1;
background: transparent !important;
border: none !important;
color: #e6edf3 !important;
padding: 8px !important;
font-size: 14px !important;
border-radius: 6px !important;
outline: none !important;
margin: 0 !important;
font-family: inherit !important;
height: 36px !important;
min-height: 36px !important;
max-height: 36px !important;
line-height: 20px !important;
box-sizing: border-box !important;
display: block !important;
width: 100%;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.2s ease;
}
.chat-edit-input.hidden {
display: none !important;
}
.chat-edit-input:focus {
border: none !important;
outline: none !important;
}
.chat-item-container.editing .chat-button.hidden {
display: none !important;
}
.chat-item-container.editing .chat-actions {
opacity: 0.5;
pointer-events: none;
}
/* ========== TOOL INDICATOR — indicador inline de uso de tool ========== */
.tool-indicator {
display: inline-flex;
align-items: center;
margin-top: 10px;
margin-bottom: 2px;
user-select: none;
pointer-events: none;
}
.tool-indicator-wrapper {
position: relative;
display: inline-block;
overflow: hidden;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.09em;
line-height: 1.2;
}
.tool-indicator-text {
display: block;
color: #6e7681;
}
.tool-indicator-sweep {
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(14, 17, 23, 0.72) 50%,
transparent 100%
);
transform: translateX(-100%);
animation: tool-sweep-anim 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes tool-sweep-anim {
0% { transform: translateX(-100%); }
100% { transform: translateX(167%); }
}
html[data-theme="light"] .tool-indicator-text {
color: #57606a;
}
html[data-theme="light"] .tool-indicator-sweep {
background: linear-gradient(
90deg,
transparent 0%,
rgba(240, 244, 248, 0.75) 50%,
transparent 100%
);
}
/* Quando o indicador de tool precede os botões, anula o margin negativo */
.tool-indicator + .bot-actions {
margin-top: 6px !important;
}
/* Alerta rápido para confirmações */
.alerta-rapido {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
z-index: 10001;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
max-width: 300px;
text-align: center;
pointer-events: none;
}
.alerta-rapido.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Ajuste do dropdown para dois itens */
.chat-dropdown {
min-width: 160px;
}
/* Ajustes para o modo de edição */
.chat-item-container.editing {
background-color: #1d2939 !important;
}
/* Para evitar que o hover persista em dispositivos touch durante a edição */
@media (hover: none) and (pointer: coarse) {
.chat-item-container.editing .chat-menu-btn {
opacity: 0.3 !important;
}
}
/* Feedback visual durante a edição */
.chat-item-container.editing::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: none;
border-radius: 10px;
pointer-events: none;
animation: pulse-edit 2s infinite;
z-index: -1;
}
@keyframes pulse-edit {
0%, 100% {
border-color: rgba(88, 166, 255, 0.3);
}
50% {
border-color: rgba(88, 166, 255, 0.6);
}
}
/* Responsividade para mobile */
@media (max-width: 767px) {
.chat-button {
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
padding: 10px 12px;
font-size: 15px;
}
.chat-edit-input {
font-size: 15px !important;
padding: 10px 12px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
}
.chat-item-container {
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
}
.alerta-rapido {
bottom: 150px;
font-size: 13px;
padding: 10px 16px;
max-width: 90%;
}
}
/* ========== POSICIONAMENTO DO DROPDOWN ========== */
/* Posição padrão (para baixo) */
.chat-dropdown.dropdown-down {
top: 100%;
bottom: auto;
margin-top: 5px;
}
/* Posição para cima (quando não há espaço abaixo) */
.chat-dropdown.dropdown-up {
top: auto;
bottom: 100%; /* ← Agora posiciona acima do botão! */
margin-bottom: 5px;
}
/* Seta para baixo (posição padrão) */
.chat-dropdown.dropdown-down::before {
content: '';
position: absolute;
top: -5px;
right: 15px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #1e1e1e;
}
/* Seta para cima (quando dropdown-up) */
.chat-dropdown.dropdown-up::before {
content: '';
position: absolute;
bottom: -5px;
right: 15px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1e1e1e;
}
/* Melhorar a visibilidade das setas */
.chat-dropdown::before {
z-index: 10001;
}
/* Ajustes na sidebar principal */
.chat-list {
display: flex !important; /* Ativa Flexbox */
flex-direction: column !important; /* Coluna vertical */
justify-content: flex-start; /* Conteúdo começa no topo */
align-items: stretch; /* Itens ocupam toda a largura */
padding: 10px; /* Padding existente */
overflow-y: hidden; /* Remove overflow da sidebar principal para delegar ao conteúdo */
/* Mantenha as propriedades existentes como position: fixed; height: 100vh; etc. */
}
/* Faz a lista de chats crescer e rolar se necessário */
#listaChats {
flex: 1 1 auto; /* Cresce para ocupar o espaço disponível */
overflow-y: auto; /* Adiciona scroll vertical se o conteúdo for longo */
padding: 5px 5px 0 5px !important; /* Padding apenas top e laterais */
}
/* ====================================================================
SCROLLBAR DA LISTA DE CHATS
==================================================================== */
#listaChats::-webkit-scrollbar {
width: 8px;
}
#listaChats::-webkit-scrollbar-track {
background: #161b22; /* Mesmo background da sidebar */
border-radius: 4px;
}
#listaChats::-webkit-scrollbar-thumb {
background-color: #444444;
border-radius: 4px;
border: 2px solid #161b22; /* Borda com o mesmo background */
}
#listaChats::-webkit-scrollbar-thumb:hover {
background-color: #575757;
}
/* Para Firefox */
#listaChats {
scrollbar-width: thin;
scrollbar-color: #444444 #161b22;
}
/* Para garantir que o background da trilha seja consistente */
#listaChats::-webkit-scrollbar-track-piece {
background: #161b22;
}
/* Fixa a seção de configurações no fundo */
.sidebar-footer {
margin-top: auto; /* Empurra para o fundo do Flexbox */
border-top: 1px solid #30363d; /* Linha separadora opcional para visual */
}
/* Adicione isso ao final de styles.css para ajustes finos */
.chat-dropdown {
/* Propriedades existentes... */
transition: all 0.2s ease; /* Animação suave para mudança de posição */
}
/* Garanta que o dropdown não saia da tela horizontalmente */
.chat-dropdown {
right: 0; /* Alinha à direita do botão, ajuste se necessário */
left: auto;
min-width: 160px;
}
/* ====================================================================
CORREÇÃO DEFINITIVA PARA O SIDEBAR FOOTER NO MOBILE
==================================================================== */
@media (max-width: 991px) {
/* RESET completo da altura da sidebar para mobile */
.chat-list {
top: 0 !important;
left: 0 !important;
width: 260px !important;
max-width: 85% !important;
/* ALTURA DINÂMICA - corrige o problema do 100vh */
height: 100% !important;
height: -webkit-fill-available !important;
height: fill-available !important;
max-height: 100% !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important; /* Remove todo padding do container principal */
margin: 0 !important;
z-index: 5000 !important;
transform: translateX(-100%) !important;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
background: #161b22 !important;
border-right: 1px solid #30363d !important;
}
.chat-list:not(.hidden) {
transform: translateX(0) !important;
}
/* Header fixo dentro da sidebar */
.chat-list > div:first-child {
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
background: #161b22 !important;
padding: 15px 10px 10px 10px !important;
margin: 0 !important;
border-bottom: 1px solid #30363d !important;
flex-shrink: 0 !important; /* Não encolhe */
}
/* Área de rolagem da lista de chats */
#listaChats {
flex: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 10px 10px 0 10px !important; /* Padding apenas top e laterais */
margin: 0 !important;
min-height: 200px; /* Altura mínima */
/* FIX PRINCIPAL: Enable momentum scrolling on iOS */
-webkit-overflow-scrolling: touch !important; /* <-- ADICIONE ISSO: Corrige scroll em fixed no iOS */
/* Optional: Ensure vertical touch scrolling is allowed */
touch-action: pan-y !important; /* <-- ADICIONE ISSO: Permite panning vertical, bloqueia horizontal se necessário */
}
/* Footer ABSOLUTO no fundo da sidebar */
.sidebar-footer {
position: sticky !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
padding: 15px 10px !important;
background: #161b22 !important;
border-top: 1px solid #30363d !important;
border-bottom: 1px solid #30363d !important;
flex-shrink: 0 !important; /* Não encolhe */
z-index: 10 !important;
/* Sombra para destacar */
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2) !important;
/* Garante que não tenha margens extras */
width: 100% !important;
box-sizing: border-box !important;
}
/* Ajustes nos elementos dentro do footer */
.sidebar-footer label {
display: block !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
width: 100% !important;
}
.sidebar-footer label:last-of-type {
margin-bottom: 0 !important;
}
/* Ajuste para o select de Voz */
.sidebar-footer label:last-of-type select {
margin-bottom: 0 !important;
}
}
/* Add this globally or in the media query to prevent body scroll when menu is open */
body.menu-open { /* <-- Add a class like this in JS when menu opens */
overflow: hidden !important; /* Prevent body scroll */
}
/* Ensure overlay doesn't capture scrolls (add to your .overlay styles) */
.overlay.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /* Assuming this is your overlay */
z-index: 4999 !important; /* <-- ADICIONE: Lower than sidebar's 5000 */
touch-action: none !important; /* <-- ADICIONE: Block touches on overlay to prevent body scroll */
}
/* ==================================================================== */
/* ESTILIZAÇÃO DOS SELECTS - MODELO E VOZ */
/* ==================================================================== */
/* Estilo base para todos os selects */
.sidebar-footer select {
width: 100%;
background-color: #0d1117;
color: #e6edf3;
border: 1px solid #30363d;
border-radius: 8px;
padding: 4px 8px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s ease;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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;
padding-right: 36px;
font-family: 'Segoe UI', sans-serif;
}
/* Remove a seta padrão do IE */
.sidebar-footer select::-ms-expand {
display: none;
}
/* Hover effect */
.sidebar-footer select:hover {
border-color: #58a6ff;
background-color: #0f1620;
}
/* Focus state */
.sidebar-footer select:focus {
outline: none;
border-color: #58a6ff;
box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
background-color: #0f1620;
}
/* Estilo para as opções */
.sidebar-footer select option {
background-color: #1e1e1e;
color: #e6edf3;
padding: 10px;
font-size: 14px;
}
/* Estilo para opções em hover (funciona em alguns navegadores) */
.sidebar-footer select option:hover {
background-color: #58a6ff;
color: #000;
}
/* Estilo para opções selecionadas */
.sidebar-footer select option:checked {
background-color: #58a6ff;
color: #000;
font-weight: 600;
}
/* Estilo para grupos de opções */
.sidebar-footer select optgroup {
background-color: #1a1a1a;
color: #8b949e;
font-weight: bold;
font-size: 13px;
}
/* Estilo para desabilitado */
.sidebar-footer select:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #0a0e14;
}
/* Estilo específico para o select de modelo (primeiro select) */
#modeloSelecionado {
margin-top: 4px;
}
/* Estilo específico para o select de voz */
#elevenlabsVoice {
margin-top: 4px;
}
/* Ajuste para labels */
.sidebar-footer label {
display: block;
margin-bottom: 8px;
color: #8b949e;
font-size: 13px;
font-weight: 500;
}
/* Ajuste para o input de API Key */
#elevenlabsKey {
margin-top: 4px;
}
/* Animação suave para mudanças de valor */
.sidebar-footer select {
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* Estilo para quando o select tem um valor inválido */
.sidebar-footer select:invalid {
border-color: #da3633;
}
/* Adicionar um efeito de glow quando aberto */
.sidebar-footer select:focus-within {
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
/* Responsividade para mobile */
@media (max-width: 991px) {
.sidebar-footer select {
padding: 2px 4px;
font-size: 15px;
background-size: 18px;
padding-right: 40px;
}
.sidebar-footer label {
font-size: 14px;
}
}
/* Estilo para a seta personalizada (melhor compatibilidade) */
.sidebar-footer .select-wrapper {
position: relative;
width: 100%;
}
.sidebar-footer .select-wrapper::after {
content: '';
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
pointer-events: none;
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: transform 0.2s ease;
}
.sidebar-footer select:focus + .select-wrapper::after {
transform: translateY(-50%) rotate(180deg);
}
/* Container das mensagens */
.message-content {
max-width: 100%;
overflow-wrap: break-word;
}
/* MathJax - bloco */
mjx-container[jax="CHTML"][display="true"] {
display: block;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
}
/* MathJax - inline */
mjx-container {
max-width: 100%;
overflow-x: auto;
}
/* Evita estourar layout do chat */
.message,
.message * {
box-sizing: border-box;
}
/* Tamanho padrão das fórmulas */
mjx-container {
font-size: 0.95em;
}
/* Fórmulas em bloco (as grandes) */
mjx-container[display="true"] {
font-size: 0.9em;
}
@media (max-width: 767px) {
mjx-container {
font-size: 0.85em;
}
mjx-container[display="true"] {
font-size: 0.8em;
}
.preview-item button {
/* --- MUDANÇAS PARA ANIMAÇÃO E CENTRALIZAÇÃO --- */
display: flex !important; /* Sempre flex para alinhar o conteúdo */
align-items: center !important;
justify-content: center !important;
/* Estado Inicial (Escondido) */
opacity: 1;
visibility: visible; /* Impede clique quando invisível */
}
}
/* ========================================= */
/* BOTÃO SIDEBAR (Estilo Texto Simples) */
/* ========================================= */
.sidebar-footer {
padding: 8px;
background: transparent !important;
margin-top: auto;
border-top: 1px solid #30363d ; /* Linha sutil separando chats */
}
.btn-settings-plain {
width: 100%;
background: transparent !important;
color: #ececec !important;
border: none;
padding: 10px 12px !important;
border-radius: 6px !important;
cursor: pointer;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important; /* <--- Garante alinhamento à esquerda */
gap: 12px !important;
font-size: 14px !important;
font-weight: 400 !important;
text-align: left !important; /* <--- Garante alinhamento de texto */
transition: background-color 0.2s !important;
}
.btn-settings-plain:hover {
background-color: #21262d !important;
}
.btn-settings i {
font-size: 16px !important;
color: #ececec !important;
}
/* ========================================= */
/* MODAL ESTILO GPT (Window) */
/* ========================================= */
#settingsModal.modal {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5); /* Overlay escuro */
backdrop-filter: none; /* Remove blur se preferir igual ao print */
z-index: 9999;
}
.settings-window {
display: flex;
width: 800px; /* Largura fixa estilo desktop */
height: 500px;
max-width: 95vw;
max-height: 90vh;
background-color: #171717; /* Fundo bem escuro */
border-radius: 12px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 15px 40px rgba(0,0,0,0.5);
overflow: hidden;
position: relative;
animation: modalPop 0.2s ease-out;
}
@keyframes modalPop {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.settings-sidebar-header {
margin-bottom: 20px;
}
/* Botão Fechar (X) no canto esquerdo ou onde preferir */
.close-modal-btn {
background: transparent;
border: none;
color: #9b9b9b;
font-size: 18px;
cursor: pointer;
padding: 5px;
transition: color 0.2s;
}
.close-modal-btn:hover { color: #fff; }
/* Navegação Lateral */
.settings-nav {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Sidebar Esquerda do Modal */
.settings-sidebar {
background-color: #171717;
border-right: 1px solid #303030;
padding: 16px 10px;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
/* Botões do Menu Interno */
.nav-item {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start; /* <--- Conteúdo forçado para a esquerda */
gap: 12px;
background: transparent;
border: none;
color: #9b9b9b;
font-size: 14px;
font-weight: 500;
text-align: left;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.nav-item i {
width: 20px;
text-align: center; /* O ícone fica centralizado no espaço dele, mas o conjunto fica à esquerda */
font-size: 16px;
display: flex; /* Garante que o ícone se comporte bem */
justify-content: center;
}
.nav-item:hover {
background-color: rgba(255, 255, 255, 0.04);
color: #e6edf3;
}
.nav-item.active {
background-color: #2f2f2f;
color: #ffffff;
}
/* Coluna da Direita (Conteúdo) */
.settings-content-area {
flex: 1;
background-color: #171717;
padding: 40px 40px;
overflow-y: auto;
}
.tab-content.hidden { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.2s; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-title {
margin-top: 0;
margin-bottom: 30px;
font-size: 20px;
font-weight: 500;
color: #fff;
border-bottom: 1px solid #303030;
padding-bottom: 15px;
}
/* Linhas de Configuração (Row: Label --- Control) */
.setting-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #303030; /* Linha fina entre itens */
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
color: #ececec;
font-size: 14px;
max-width: 50%;
}
.setting-control {
max-width: 50%;
display: flex;
justify-content: flex-end;
width: 100%;
}
/* Botão "Fazer upgrade" inline — usado no seletor de Voz da YUNA quando o
usuário é free (em vez do