:root { --bg: #0d1117; --card: #161b22; --card-hover: #1c2129; --border: #30363d; --text: #f0f6fc; --text-dim: #8b949e; --primary: #8b5cf6; --primary-dim: rgba(139, 92, 246, 0.14); --secondary: #3b82f6; --success: #2ea043; --success-dim: rgba(46, 160, 67, 0.14); --error: #da3633; --error-dim: rgba(218, 54, 51, 0.14); /* Cores extraidas do logotipo (images/logotipo.png), usadas como traco de identidade visual no topo do dashboard. */ --logo-orange: #e2500a; --logo-purple: #7a18fc; --logo-blue: #0a6bfd; --logo-gradient: linear-gradient(180deg, var(--logo-orange), var(--logo-purple), var(--logo-blue)); --radius: 10px; --sidebar-w: 260px; --sidebar-collapsed-w: 13px; --chat-w: 420px; --chat-collapsed-w: 22px; /* Fundo do chat: a mesma base escura do resto do app, com um leve tom laranjado (a cor de destaque do Dr. Laureano) para diferenciar visualmente essa area. */ --chat-bg: #17110c; } /* Tema claro: so' redefine os tons de fundo/texto/borda — as cores de marca (--primary, --secondary, --logo-*) continuam as mesmas nos dois temas, ja' que funcionam bem tanto no escuro quanto no claro. Alternado via JS (ver applyTheme em estudos.js), que so' liga/desliga esse atributo em — todo o resto do CSS ja' usa as variaveis, entao se ajusta sozinho. */ :root[data-theme="light"] { --bg: #f6f8fa; --card: #ffffff; --card-hover: #eef1f4; --border: #d0d7de; --text: #1f2328; --text-dim: #59636e; --primary-dim: rgba(139, 92, 246, 0.1); --success: #1a7f37; --success-dim: rgba(26, 127, 55, 0.1); --error: #cf222e; --error-dim: rgba(207, 34, 46, 0.1); --chat-bg: #fdf6f0; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* -------------------------------------------------------- Tela de carga */ /* Cobre a tela inteira (menu, questao, chat) enquanto TODAS as questoes do banco sao carregadas de uma vez (nao so' a pagina atual) — assim, depois que o aluno clica em "Comecar", navegar entre questoes fica instantaneo, sem precisar buscar cada uma na hora. Some so' quando o aluno clica no botao, mesmo que o carregamento em si ja' tenha terminado antes disso. */ .loading-splash { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 22px; } .loading-image { width: min(200px, 45vw); height: auto; animation: loadingPulse 1.7s ease-in-out infinite; transition: width 0.25s ease; } .loading-splash.ready .loading-image { animation: none; /* Uma vez "pronto", a mascote cede espaco pros blocos de funcionalidades e vira so um selo pequeno no topo, nao mais o foco central da tela. */ width: min(84px, 22vw); } @keyframes loadingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: 0.8; } } .loading-message { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.65; max-width: 440px; } .loading-splash.ready .loading-message { color: var(--text); font-size: 17px; font-weight: 600; } /* Lista, nao grade de "cards": de proposito sem borda-ao-redor, sem hover e sem qualquer pista visual de que da' pra clicar em algum item — essa tela e' so' informativa, o UNICO controle nela e' o botao "Comecar" (ver comentario em showLoadingReady, estudos.js). */ .loading-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; width: 100%; max-width: 460px; text-align: left; } /* O atributo HTML "hidden" some por padrao via "[hidden] { display: none }" na folha de estilo do navegador — mas essa regra e' de origem "user agent", que perde pra QUALQUER regra de autor com a mesma especificidade (ver o mesmo comentario, mais completo, em ".raffle-overlay[hidden]" e ".help-overlay[hidden]" mais abaixo). Como ".loading-features" ja define "display: flex" acima, precisa dessa regra extra pra "hidden" continuar escondendo a lista de fato — sem ela, a lista aparecia mesmo antes do carregamento terminar, e pior: como showLoadingReady() so' remove esse atributo explicitamente na primeira vez (ver hasSeenIntro em estudos.js), a lista nunca ficava escondida em visitas seguintes. */ .loading-features[hidden] { display: none; } .loading-feature { display: flex; align-items: flex-start; gap: 14px; padding: 14px 2px; border-bottom: 1px solid var(--border); } .loading-feature:last-child { border-bottom: none; } .loading-feature-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--card); border: 1px solid var(--border); color: var(--primary); display: flex; align-items: center; justify-content: center; } .loading-feature-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .loading-feature-text b { font-size: 13px; color: var(--text); } .loading-feature-text span { font-size: 12px; color: var(--text-dim); line-height: 1.5; } .loading-start-btn { background: linear-gradient(135deg, var(--logo-orange), var(--logo-purple), var(--logo-blue)); color: #fff; border: none; border-radius: 999px; padding: 14px 48px; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; box-shadow: 0 16px 36px -16px rgba(122, 24, 252, 0.6); transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease; } .loading-start-btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 20px 42px -14px rgba(122, 24, 252, 0.7); } .loading-start-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } .loading-error { color: var(--error); } /* ------------------------------------------------------------------ App */ /* Sem barra superior: toda a navegacao (logo, links, avatar) mora dentro da propria barra lateral, que ocupa a tela inteira de cima a baixo (top: 0, height: 100vh) — sem nenhum elemento acima empurrando-a para baixo, ela fica de fato encostada nas bordas da tela. */ .app { display: flex; align-items: stretch; } .sidebar { width: var(--sidebar-collapsed-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; z-index: 25; background: var(--bg); transition: width 0.22s ease; } /* Traco de identidade visual (cores do logotipo) na borda da barra, substituindo a faixa que antes ficava no topo. */ .sidebar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3px; background: var(--logo-gradient); } .sidebar.expanded { width: var(--sidebar-w); } /* Alca flutuante para expandir/recolher: fica sobreposta a borda da barra (metade dentro, metade fora), entao nao exige que a faixa recolhida seja larga o suficiente para caber um botao dentro dela. Icone fixo de tres tracos (menu classico), sem trocar de forma ao abrir/fechar. */ .sidebar-handle { position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); width: 30px; height: 64px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; z-index: 30; padding: 0; transition: border-color 0.12s ease; } .sidebar-handle:hover { border-color: var(--primary); } .sidebar-handle:hover .bar { background: var(--text); } .sidebar-handle .bar { width: 16px; height: 2px; background: var(--text-dim); border-radius: 1px; } /* O recorte (overflow: hidden) fica AQUI, num wrapper interno — nao no .sidebar em si — para nao cortar a .sidebar-handle, que fica de proposito pra fora da faixa (metade dentro, metade fora). Esse wrapper sempre acompanha a largura atual do .sidebar (100%), entao continua escondendo o conteudo largo demais quando a faixa esta recolhida. */ .sidebar-clip { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; } /* Largura sempre igual a do menu aberto. A opacidade some com o conteudo assim que o recolhimento comeca, para nao deixar pedacos de texto cortado a mostra durante a transicao — o menu recolhido deve parecer so uma linha fina, nao um painel truncado. */ .sidebar-scroll { width: var(--sidebar-w); flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 22px; opacity: 0; transition: opacity 0.12s ease; } .sidebar.expanded .sidebar-scroll { opacity: 1; transition: opacity 0.18s ease 0.08s; } /* justify-content: flex-end (nao space-between): a ".brand-logo" e' um elemento FIXO e independente (fora da .sidebar, sempre no canto superior esquerdo da TELA — ver comentario acima de ".brand-logo") que ocupa exatamente essa mesma faixa esquerda quando o menu esta expandido. Um filho aqui alinhado a esquerda ficaria embaixo dela, com a logo roubando os cliques. Por isso o botao de ajuda entra ao lado do avatar, os dois agrupados a direita, longe dessa zona. */ .side-brand { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .sidebar-help-btn { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color 0.12s ease, border-color 0.12s ease; } .sidebar-help-btn:hover { color: var(--text); border-color: var(--primary); } /* Logo fica FORA da barra lateral (nao e' filho do .sidebar, que recorta seu conteudo via overflow: hidden quando recolhido) — assim ela fica sempre visivel por inteiro, recolhido ou expandido, nao sendo cortada pela faixa fina. Cresce um pouco junto quando o menu expande. */ .brand-logo { position: fixed; top: 14px; left: 16px; z-index: 35; display: flex; align-items: center; text-decoration: none; white-space: nowrap; } .brand-logo img { height: 42px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(226, 80, 10, 0.25)) drop-shadow(0 0 10px rgba(10, 107, 253, 0.25)); transition: height 0.22s ease; } .brand-logo.expanded img { height: 54px; } .avatar { width: 28px; height: 28px; border-radius: 999px; background: linear-gradient(135deg, var(--logo-orange), var(--logo-purple), var(--logo-blue)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } .side-nav { display: flex; flex-direction: column; gap: 3px; } .side-nav a { color: var(--text-dim); text-decoration: none; font-size: 13px; padding: 8px 10px; border-radius: 7px; } .side-nav a.active { color: var(--text); background: var(--card); } .side-nav a:hover:not(.soon) { color: var(--text); background: var(--card-hover); } .side-nav a.soon { cursor: default; opacity: 0.45; } /* Links das duas fases da OAB: bem mais evidentes que um item de lista comum (numero em destaque + titulo + descricao curta), pra ficar claro de cara que sao os dois modos principais do app — nao mais um item de navegacao qualquer entre os outros. */ .phase-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; } .phase-link.active { background: var(--card); border-color: var(--border); } .phase-link:hover { background: var(--card-hover); } .phase-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--logo-orange), var(--logo-purple), var(--logo-blue)); color: #fff; font-size: 12px; font-weight: 700; } .phase-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .phase-text b { font-size: 13.5px; font-weight: 600; color: var(--text); } .phase-text small { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0 0 12px; } .field { margin-bottom: 12px; } .field:last-of-type { margin-bottom: 0; } .field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; } select { width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font-size: 13.5px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select:focus { outline: none; border-color: var(--primary); } .result-count { margin: 12px 0 0; font-size: 12px; color: var(--text-dim); } .clear-filters { margin-top: 10px; font-size: 12px; color: var(--primary); border-color: rgba(139, 92, 246, 0.35); } .clear-filters:hover { border-color: var(--primary); color: var(--text); } .mode-switch { display: flex; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .mode-btn { flex: 1; background: transparent; border: none; color: var(--text-dim); font-size: 12.5px; padding: 7px 0; border-radius: 6px; cursor: pointer; } .mode-btn.active { background: var(--primary); color: #fff; } .mode-btn:disabled { cursor: not-allowed; opacity: 0.5; } .mode-btn:disabled.active { background: var(--primary); } .qlist-section { display: flex; flex-direction: column; min-height: 0; } .qlist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .qlist-header .side-title { margin: 0; } .qlist-count { font-size: 11px; color: var(--text-dim); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; } .qlist { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; } .qitem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 7px 8px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; } .qitem:hover { background: var(--card-hover); color: var(--text); } .qitem.active { background: var(--primary-dim); border-color: rgba(139, 92, 246, 0.4); color: var(--text); } .qitem .num { font-variant-numeric: tabular-nums; color: var(--text-dim); } .qitem.active .num { color: var(--primary); } .qitem .status-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; background: transparent; } .qitem .status-dot.correct { background: var(--success); } .qitem .status-dot.wrong { background: var(--error); } .score-section { border-top: 1px solid var(--border); padding-top: 16px; } .score-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 10px; } .score-label { color: var(--text-dim); } .btn-ghost { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; padding: 8px 0; border-radius: 7px; cursor: pointer; } .btn-ghost:hover { color: var(--text); border-color: var(--primary); } /* -------------------------------------------------------------- Content */ .content { flex: 1; min-width: 0; min-height: 100vh; display: flex; flex-direction: column; padding: 20px 16px 60px; } @media (min-width: 900px) { .content { padding: 28px 32px 60px; } } .question-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 48px -28px rgba(0, 0, 0, 0.6); padding: 20px; max-width: 760px; width: 100%; /* margin vertical "auto" centraliza o card quando ha' espaco de sobra (perguntas curtas) e cai graciosamente para o topo quando o conteudo e' maior que a tela — sem cortar o inicio do enunciado. */ margin: auto; min-height: 420px; animation: questionCardIn 0.28s ease; } @keyframes questionCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (min-width: 600px) { .question-card { padding: 32px 36px; } } .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .badge { font-size: 11px; letter-spacing: 0.02em; padding: 5px 11px; border-radius: 999px; background: var(--card-hover); color: var(--text-dim); border: 1px solid var(--border); } .badge.discipline { background: var(--primary-dim); color: var(--primary); border-color: rgba(139, 92, 246, 0.35); } .statement { font-size: 16px; line-height: 1.75; margin-bottom: 26px; white-space: pre-wrap; color: var(--text); } .alternatives { display: flex; flex-direction: column; gap: 11px; margin-bottom: 20px; } .alt-row { display: flex; align-items: stretch; gap: 8px; } .alt-row .alt { flex: 1; } /* Tesoura: risca a alternativa como rascunho de raciocinio, sem responder a questao — o aluno pode marcar/desmarcar quantas quiser. */ .alt-eliminate { flex-shrink: 0; width: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .alt-eliminate:hover:not(:disabled) { border-color: var(--primary); color: var(--text); } .alt-eliminate:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .alt-eliminate.active { border-color: var(--error); color: var(--error); background: var(--error-dim); } .alt-eliminate:disabled { opacity: 0.4; cursor: not-allowed; } .alt.eliminated { opacity: 0.45; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--error); } .alt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 13px 15px; font-size: 14px; line-height: 1.55; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .alt:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(139, 92, 246, 0.5); } .alt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .alt:disabled { cursor: default; } .alt .letter { flex-shrink: 0; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-dim); } .alt.correct { border-color: var(--success); background: var(--success-dim); } .alt.correct .letter { border-color: var(--success); color: var(--success); } .alt.wrong { border-color: var(--error); background: var(--error-dim); } .alt.wrong .letter { border-color: var(--error); color: var(--error); } .feedback { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 12px 14px; border-radius: 9px; margin-bottom: 18px; } .feedback.correct { background: var(--success-dim); color: var(--success); } .feedback.wrong { background: var(--error-dim); color: var(--error); } .nav-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .nav-buttons button { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 500; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .nav-buttons button:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(139, 92, 246, 0.6); } .nav-buttons button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .nav-buttons button:disabled { background: var(--card-hover); color: var(--text-dim); cursor: not-allowed; box-shadow: none; transform: none; } .nav-buttons .pos { color: var(--text-dim); font-size: 12.5px; text-align: center; } .empty, .loading { color: var(--text-dim); font-size: 14px; padding: 60px 0; text-align: center; } .empty .btn-link { display: inline; background: none; border: none; padding: 0; color: var(--primary); font-size: inherit; font-family: inherit; cursor: pointer; text-decoration: underline; } .empty .btn-link:hover { color: var(--text); } .err-box { color: var(--error); background: var(--error-dim); border: 1px solid rgba(218, 54, 51, 0.4); border-radius: 8px; padding: 14px; font-size: 13px; } /* ---------------------------------------------------------- Chat lateral */ /* Espelha a barra de filtros (esquerda): faixa fina encostada na borda direita da tela, com uma alca flutuante para expandir/recolher, e o conteudo (chat) num wrapper de largura fixa que so aparece quando expandido — mesma estrategia usada na .sidebar, ver comentarios la. */ .chat-panel { width: var(--chat-collapsed-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh; z-index: 25; background: var(--chat-bg); transition: width 0.22s ease; } .chat-panel::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: var(--logo-gradient); } .chat-panel.expanded { width: var(--chat-w); } /* Retrato do Dr. Laureano em cima do botao "IA" — mesma ideia da alca do menu esquerdo (metade pra fora da faixa), so' que agrupando os dois elementos numa coluna em vez de um botao sozinho. */ .chat-toggle-group { position: absolute; top: 50%; right: 100%; transform: translate(50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 30; opacity: 1; transition: opacity 0.12s ease; } /* Expandido, o retrato+botao ficariam bem em cima das mensagens (a faixa recolhida e' onde eles moram; expandida, essa mesma posicao cai no meio do texto do chat) — entao somem, e o fechar passa a ser o X no cabecalho. */ .chat-panel.expanded .chat-toggle-group { opacity: 0; pointer-events: none; } .chat-toggle-avatar { width: 60px; height: 60px; border-radius: 999px; object-fit: cover; object-position: top center; border: 2px solid var(--border); background: var(--card); box-shadow: 0 0 0 4px var(--bg); cursor: pointer; transition: border-color 0.12s ease; } .chat-toggle-avatar:hover { border-color: var(--primary); } .chat-handle { width: 36px; height: 34px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); color: var(--text-dim); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; padding: 0; transition: border-color 0.12s ease, color 0.12s ease; } .chat-handle:hover { border-color: var(--primary); color: var(--text); } .chat-clip { position: relative; width: 100%; height: 100%; overflow: hidden; } /* Posicionamento absoluto (em vez de height: 100% encadeado por varios niveis de flex) para garantir, sem ambiguidade, que essa caixa preenche exatamente a altura do .chat-clip — se a altura ficar indefinida em algum nivel da cadeia flex, e' isso que faz o overflow "vazar" pro .chat-clip (que so' esconde, nao rola) em vez de rolar aqui dentro, que era a causa da barra de rolagem sumida. */ .chat-scroll { position: absolute; top: 0; bottom: 0; left: 0; width: var(--chat-w); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.12s ease; } .chat-panel.expanded .chat-scroll { opacity: 1; transition: opacity 0.18s ease 0.08s; } .chat-header { display: flex; align-items: center; gap: 10px; padding: 20px 16px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .chat-close { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: color 0.12s ease, border-color 0.12s ease; } .chat-close:hover { color: var(--text); border-color: var(--primary); } .chat-avatar-wrap { position: relative; flex-shrink: 0; line-height: 0; } .chat-avatar { width: 36px; height: 36px; border-radius: 999px; object-fit: cover; object-position: top center; border: 1px solid var(--border); display: block; } .chat-status-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 999px; background: var(--success); border: 2px solid var(--chat-bg); } .chat-title { font-size: 13.5px; font-weight: 600; } .chat-subtitle { font-size: 11.5px; color: var(--text-dim); } /* Barra de rolagem discreta e no tema do sistema, para qualquer area scrollavel do app (chat, menu de filtros, lista de questoes) — em vez da barra padrao do navegador, que destoa do resto do visual escuro. */ .chat-messages, .sidebar-scroll, .qlist { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .chat-messages::-webkit-scrollbar, .sidebar-scroll::-webkit-scrollbar, .qlist::-webkit-scrollbar { width: 8px; } .chat-messages::-webkit-scrollbar-track, .sidebar-scroll::-webkit-scrollbar-track, .qlist::-webkit-scrollbar-track { background: transparent; } .chat-messages::-webkit-scrollbar-thumb, .sidebar-scroll::-webkit-scrollbar-thumb, .qlist::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .chat-messages::-webkit-scrollbar-thumb:hover, .sidebar-scroll::-webkit-scrollbar-thumb:hover, .qlist::-webkit-scrollbar-thumb:hover { background-color: var(--primary); background-clip: padding-box; } .chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } /* Ancora as mensagens embaixo quando ha' pouco conteudo (em vez do vao vazio estranho entre a ultima bolha e o campo de digitar), sem usar "justify-content: flex-end" — combinado com "overflow-y: auto" isso tem um bug conhecido no Chromium: o navegador simplesmente NAO conta o conteudo que "vaza" pra cima no scrollHeight, entao a barra de rolagem nunca aparece e da' pra "perder" mensagens sem como rolar ate' elas. "margin-top: auto" num spacer (pseudo-elemento, sempre o primeiro filho) empurra o conteudo pra baixo do mesmo jeito quando sobra espaco, mas sem esse bug quando o conteudo excede a altura disponivel. */ .chat-messages::before { content: ""; margin-top: auto; } .chat-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .chat-suggestion { align-self: flex-start; max-width: 92%; text-align: left; background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.4; cursor: pointer; transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease; } .chat-suggestion:hover { border-color: var(--primary); color: var(--text); background: var(--card-hover); } .chat-msg { max-width: 90%; padding: 10px 13px; border-radius: 10px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; } .chat-msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border); } .chat-msg.user { align-self: flex-end; background: var(--primary-dim); border: 1px solid rgba(139, 92, 246, 0.35); } .chat-msg.pending { color: var(--text-dim); font-style: italic; } .chat-interrupted-note { align-self: flex-start; font-size: 11px; font-style: italic; color: var(--text-dim); padding: 0 4px; } .chat-msg.error-msg { border-color: rgba(218, 54, 51, 0.4); background: var(--error-dim); color: var(--error); } .chat-input-area { border-top: 1px solid var(--border); flex-shrink: 0; } .chat-input-row { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px 6px; } .chat-hint { margin: 0; padding: 0 16px 12px; font-size: 10.5px; color: var(--text-dim); opacity: 0.7; } .chat-input-row textarea { flex: 1; resize: none; max-height: 120px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font-size: 15px; font-family: inherit; line-height: 1.4; } .chat-input-row textarea:focus { outline: none; border-color: var(--primary); } .chat-input-row textarea:disabled { opacity: 0.6; } .chat-send { width: 36px; height: 36px; border-radius: 999px; border: none; background: var(--primary); color: #fff; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: filter 0.12s ease, background 0.12s ease, transform 0.12s ease; } .chat-send:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); } .chat-send:disabled { background: var(--card-hover); color: var(--text-dim); cursor: not-allowed; transform: none; } /* Enquanto o Dr. Laureano esta' respondendo, o mesmo botao vira "parar" (ver setSendButtonMode em dr-laureano.js) — cor de alerta discreta pra deixar claro que a acao mudou de sentido. */ .chat-send.stop-mode { background: var(--error); } .chat-send.stop-mode:hover:not(:disabled) { filter: brightness(1.12); } /* --------------------------------------------------- Menu e chat no mobile */ /* Em telas estreitas nao ha' largura de sobra para o menu lateral (260px) ou o chat do Dr. Laureano (420px) crescerem DENTRO do layout flex de sempre sem espremer o .content contra a borda — abaixo do ponto de corte, os dois passam a se comportar como um painel overlay em tela cheia (position: fixed, cobrindo o viewport inteiro) em vez de dividir espaco com o conteudo. Como cada um ja' e' controlado por uma unica classe ".expanded" (ver JS em estudos.js/dr-laureano.js), basta sobrescrever essa mesma classe aqui: nenhuma mudanca de HTML/JS e' necessaria. Os botoes de abrir e fechar tambem crescem para um alvo de toque confortavel (~44px). Este bloco fica DE PROPOSITO no fim do arquivo: ".sidebar.expanded" e ".chat-panel.expanded" (regras normais, la' em cima) tem a MESMA especificidade que as regras aqui dentro (duas classes cada), entao em caso de empate quem vem DEPOIS no arquivo e' que vale — nao quem "parece" mais especifico por estar dentro de @media. Colar esse bloco no meio do arquivo (antes das regras normais de chat, por exemplo) faz a regra de desktop vencer o empate mesmo dentro da media query mobile. */ @media (max-width: 680px) { .sidebar.expanded, .chat-panel.expanded { position: fixed; inset: 0; width: 100%; height: 100dvh; } .sidebar.expanded .sidebar-scroll { width: 100%; } .chat-panel.expanded .chat-scroll { width: 100%; } /* Alca de abrir/fechar o menu: mesma logica de sempre (um so' botao alterna os dois estados), so' maior para tocar com facilidade. */ .sidebar-handle { width: 42px; height: 76px; } .sidebar-handle .bar { width: 18px; } /* Expandido em tela cheia, a alca NAO pode continuar em "left: 100%" (metade dentro, metade fora da borda direita do menu): como o menu agora tem a largura da tela toda, essa borda direita passa a ser a borda direita da PROPRIA TELA — exatamente onde mora, sempre, a faixa recolhida + retrato flutuante do chat do Dr. Laureano (que continua visivel, sticky, do lado direito). As duas alcas colidiam ali, uma por cima da outra. Aqui o botao de fechar o menu vira um botao de canto (estilo "X" de menu mobile), no topo, longe da faixa do chat.*/ .sidebar.expanded .sidebar-handle { top: 16px; left: auto; right: 16px; transform: none; width: 44px; height: 44px; border-radius: 12px; } /* Mesma familia de colisao: ".side-brand" (botao de ajuda "?" + avatar da sessao) e' o primeiro item do conteudo rolavel, alinhado a direita — no desktop isso fica longe da alca (que mora na borda direita, na ALTURA do meio da tela). Aqui, com a alca virando um botao de canto (regra acima), os dois passam a ocupar exatamente o mesmo canto superior direito. Um espaco no topo empurra ".side-brand" pra baixo da alca. */ .side-brand { margin-top: 40px; } /* E, por garantia (mesmo com a alca reposicionada acima), some com o retrato+botao do chat enquanto o menu mobile estiver aberto — os dois paineis em tela cheia nao fazem sentido abertos ao mesmo tempo, e sem isso o avatar do Dr. Laureano ficaria flutuando por cima do menu. */ .sidebar.expanded ~ .chat-panel .chat-toggle-group { opacity: 0; pointer-events: none; } /* Botao "IA" de abrir o chat (visivel so' com o chat fechado) e retrato do Dr. Laureano acima dele, ambos maiores para o toque. */ .chat-handle { width: 46px; height: 44px; font-size: 13px; } .chat-toggle-avatar { width: 56px; height: 56px; } /* X de fechar o chat expandido: era 26x26px (menor que o alvo de toque recomendado de ~44px) — aqui e' o botao de "minimizar" que o usuario efetivamente usa no mobile, entao precisa ser facil de acertar. */ .chat-close { width: 44px; height: 44px; border-radius: 10px; font-size: 24px; } /* Evita o zoom automatico que o iOS Safari faz ao focar um campo de texto com font-size menor que 16px. */ .chat-input-row textarea { font-size: 16px; } /* A logo do site (".brand-logo") fica FORA da ".app" (irma anterior de ".sidebar"/".chat-panel", nao filha) e sempre em position: fixed no canto superior esquerdo. Com o CHAT em tela cheia no mobile, esse canto e' exatamente onde mora o avatar/titulo do Dr. Laureano, e a logo ficava por cima, sobreposta — por isso some so' nesse caso. O menu (".sidebar") nao tem esse problema: o canto superior esquerdo dele fica vazio (o "?" + avatar da sessao moram no canto OPOSTO, empurrados pra baixo da alca de fechar — ver ".side-brand" acima), entao a logo continua aparecendo normalmente com o menu aberto. */ body:has(.chat-panel.expanded) .brand-logo { display: none; } /* A faixa recolhida do chat (22px + friso gradiente) continua no lugar dela, sticky, na borda direita, mesmo com o MENU expandido — e como ela vem DEPOIS do menu no HTML, um empate de z-index (os dois usam 25) faz essa faixa pintar por CIMA do menu em tela cheia, cortando o canto direito de cada linha (ver captura de tela do bug: os dropdowns terminavam antes da borda real da tela). Um z-index maior aqui garante que o menu aberto sempre fique por cima da faixa do chat, nao o contrario. */ .sidebar.expanded { z-index: 26; } } /* --------------------------------------------------- Sortear questões */ /* O painel de sorteio ("filter-mode-panel[data-panel='raffle']") ocupa o mesmo lugar do painel de filtros manuais dentro do menu — os dois nunca ficam visiveis ao mesmo tempo (ver setFilterMode em estudos.js), entao nao precisam de layout proprio de posicionamento, so' o estilo dos campos. */ .field input[type="number"] { width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; } .field input[type="number"]:focus { outline: none; border-color: var(--primary); } .raffle-disc-field { margin-top: 12px; } .raffle-disc-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .raffle-disc-label-row label { font-size: 12px; color: var(--text-dim); } .raffle-disc-quick-actions { display: flex; gap: 10px; } .raffle-disc-quick-actions .btn-link { background: none; border: none; padding: 0; color: var(--primary); font-size: 11.5px; cursor: pointer; text-decoration: underline; } .raffle-disc-quick-actions .btn-link:hover { color: var(--text); } .raffle-disc-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 9px; padding: 6px; } .raffle-disc-item { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 6px; font-size: 13px; cursor: pointer; } .raffle-disc-item:hover { background: var(--card-hover); } .raffle-disc-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; } .raffle-disc-name { flex: 1; min-width: 0; } .raffle-disc-count { font-size: 11px; color: var(--text-dim); background: var(--bg); border-radius: 999px; padding: 1px 8px; flex-shrink: 0; } .raffle-hint { margin: 12px 0 0; font-size: 12px; color: var(--text-dim); } .btn-primary { width: 100%; background: var(--primary); color: #fff; border: none; border-radius: 7px; padding: 10px 0; font-size: 13px; font-weight: 600; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .raffle-confirm-btn { margin-top: 14px; } .btn-primary:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(139, 92, 246, 0.6); } .btn-primary:disabled { background: var(--card-hover); color: var(--text-dim); cursor: not-allowed; transform: none; box-shadow: none; } /* --------------------------------------------------------- Modal de ajuda */ /* Aberto tanto pelo "Como funciona?" da tela de carregamento quanto pelo "?" no topo do menu (ver openHelpModal em estudos.js) — mesmo modal, dois pontos de entrada. z-index maior que a propria tela de carregamento (200) e que sidebar/chat expandidos (25) pra sempre ficar por cima. */ .help-overlay { position: fixed; inset: 0; z-index: 210; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 20px; } /* Ver comentario identico em ".raffle-overlay[hidden]" mais acima: uma regra de autor com "display: flex" sempre vence "[hidden] { display: none }" da folha padrao do navegador, mesmo com especificidade igual — entao precisa dessa sobrescrita explicita pra "hidden" continuar escondendo o modal de fato. */ .help-overlay[hidden] { display: none; } .help-modal { width: 100%; max-width: 480px; max-height: calc(100dvh - 40px); background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; animation: helpModalIn 0.18s ease; } @keyframes helpModalIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .help-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .help-modal-header h2 { margin: 0; font-size: 15px; font-weight: 600; } .help-modal-close { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 17px; line-height: 1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: color 0.12s ease, border-color 0.12s ease; } .help-modal-close:hover { color: var(--text); border-color: var(--primary); } .help-modal-body { padding: 18px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; } .help-step { display: flex; gap: 12px; align-items: flex-start; } .help-step-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border); color: var(--primary); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .help-step b { display: block; font-size: 13.5px; margin-bottom: 3px; } .help-step p { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; } .help-modal-footer { padding: 14px 18px; border-top: 1px solid var(--border); flex-shrink: 0; }