/* Cornélio, o assistente do site: botão redondo, balão e painel de conversa.
   Cores da marca: noite (cabeçalho), creme, lumi (ação dos clientes), rosa (acento dos estudantes). */

.c-cornelio { position: relative; display: block; }

/* ---------------------------------------------------------------- botão redondo */
.c-cornelio__botao { position: relative; display: block; width: 3.75rem; height: 3.75rem; padding: 0; border: 3px solid var(--lumi); border-radius: 50%; background: var(--creme); box-shadow: var(--sombra-forte); cursor: pointer; overflow: hidden; transition: transform var(--t-rapida), border-color var(--t-rapida); }
.c-cornelio__botao img, .c-cornelio__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-cornelio__botao img.is-lamparina, .c-cornelio__avatar img.is-lamparina { object-fit: contain; padding: .5rem; background: var(--noite); }
/* emoji 3D do Cornélio (SVG com fundo transparente): sobre um fundo petróleo com luz, para a lã creme aparecer */
.c-cornelio__botao:has(img[src$=".svg"]), .c-cornelio__avatar:has(img[src$=".svg"]) { background: radial-gradient(circle at 35% 28%, #2a7a7b 0, #125354 45%, #062123 100%); }
.c-cornelio__botao img[src$=".svg"], .c-cornelio__avatar img[src$=".svg"] { object-fit: contain; padding: .15rem; transform: translateY(1px); }
.c-cornelio__botao:hover img[src$=".svg"] { animation: arch-cornelio-oi .7s var(--curva); }
@keyframes arch-cornelio-oi { 0%, 100% { transform: translateY(1px) rotate(0); } 35% { transform: translateY(-1px) rotate(-8deg); } 70% { transform: translateY(1px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .c-cornelio__botao:hover img[src$=".svg"] { animation: none; } }
.c-cornelio__botao:hover { transform: translateY(-2px); border-color: var(--lumi-forte); }
.c-cornelio__botao:focus-visible { outline: 3px solid var(--noite); outline-offset: 3px; box-shadow: 0 0 0 6px var(--lumi); }
.c-cornelio.is-aberto .c-cornelio__botao { visibility: hidden; }

/* ---------------------------------------------------------------- balão "Oi! Posso ajudar?" */
.c-cornelio__balao { position: absolute; right: calc(100% + .75rem); bottom: .55rem; display: flex; align-items: flex-start; gap: .25rem; width: max-content; max-width: min(15rem, calc(100vw - 7rem)); padding: .55rem .35rem .55rem .9rem; background: var(--noite); color: var(--creme); box-shadow: var(--sombra); border: 1px solid rgba(248, 245, 211, .25); animation: cornelio-balao .35s ease-out both; }
.c-cornelio__balao[hidden] { display: none; }
.c-cornelio__balao p { margin: .15rem 0; font-size: .92rem; font-weight: 500; line-height: 1.3; cursor: pointer; }
.c-cornelio__balao::after { content: ''; position: absolute; right: -.45rem; bottom: .95rem; width: .8rem; height: .8rem; background: var(--noite); border-top: 1px solid rgba(248, 245, 211, .25); border-right: 1px solid rgba(248, 245, 211, .25); transform: rotate(45deg); }
.c-cornelio__balao-fechar { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--creme); cursor: pointer; }
.c-cornelio__balao-fechar:hover { background: var(--noite-3); }
.c-cornelio__balao-fechar:focus-visible { outline: 2px solid var(--lumi); outline-offset: 1px; }
.c-cornelio__balao-fechar .c-icone { width: 1rem; height: 1rem; }
@keyframes cornelio-balao { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- painel */
.c-cornelio__painel { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 5; display: flex; flex-direction: column; width: min(24.5rem, calc(100vw - 2rem)); height: min(40rem, calc(100vh - 2rem)); height: min(40rem, calc(100dvh - 2rem)); background: var(--branco); color: var(--tinta); border: 1px solid var(--linha-forte); box-shadow: var(--sombra-forte); overflow: hidden; }
.c-cornelio__painel[hidden] { display: none; }
.c-cornelio__cab { flex: none; display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem .7rem 1rem; background: var(--noite); color: var(--creme); }
.c-cornelio__avatar { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; background: var(--creme); border: 2px solid var(--lumi); }
.c-cornelio__titulo { flex: 1; min-width: 0; margin: 0; font-family: var(--fonte); font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--creme); }
.c-cornelio__titulo:focus-visible { outline: 2px solid var(--lumi); outline-offset: 3px; }
.c-cornelio__fechar { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--creme); cursor: pointer; }
.c-cornelio__fechar:hover { background: var(--noite-3); }
.c-cornelio__fechar:focus-visible { outline: 3px solid var(--lumi); outline-offset: 1px; }

.c-cornelio__msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .8rem; padding: 1rem; background: var(--nevoa); }
.c-cornelio__msgs:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.c-cornelio__msg { display: flex; flex-direction: column; max-width: 92%; }
.c-cornelio__msg--bot { align-self: flex-start; }
.c-cornelio__msg--eu { align-self: flex-end; align-items: flex-end; }
.c-cornelio__bolha { padding: .7rem .9rem; background: var(--branco); border: 1px solid var(--linha); font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.c-cornelio__bolha p { margin: 0; white-space: pre-line; }
.c-cornelio__bolha p + p { margin-top: .5rem; }
.c-cornelio__msg--eu .c-cornelio__bolha { background: var(--petroleo); border-color: var(--petroleo); color: var(--creme); }
.c-cornelio__painel[data-perfil="estudante"] .c-cornelio__msg--eu .c-cornelio__bolha { background: var(--rosa); border-color: var(--rosa); color: var(--noite); }
.c-cornelio__msg--digitando .c-cornelio__bolha { color: var(--tinta-3); font-style: italic; }

.c-cornelio__acoes { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; margin-top: .55rem; }
.c-cornelio .c-botao { min-height: 2.75rem; padding: .5em 1em; font-size: .9rem; }
.c-cornelio .c-botao--contorno { background: transparent; border-color: var(--petroleo); color: var(--petroleo); }
.c-cornelio .c-botao--contorno:hover { background: var(--petroleo); color: var(--creme); }
.c-cornelio .c-botao:focus-visible { outline: 3px solid var(--noite); outline-offset: 2px; }

/* respostas rápidas */
.c-cornelio__rapidas { flex: none; display: flex; flex-wrap: nowrap; gap: .45rem; overflow-x: auto; overflow-y: hidden; padding: .6rem .75rem .55rem; background: var(--branco); border-top: 1px solid var(--linha); scroll-snap-type: x proximity; scroll-padding-inline: .75rem; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(18, 83, 84, .3) transparent; }
/* fileira lateral: as opções deslizam para o lado e não tomam a altura da conversa; o esmaecido mostra que há mais */
.c-cornelio__rapidas.tem-mais-dir { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.75rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.75rem), transparent); }
.c-cornelio__rapidas.tem-mais-esq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.75rem); mask-image: linear-gradient(90deg, transparent, #000 2.75rem); }
.c-cornelio__rapidas.tem-mais-esq.tem-mais-dir { -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent); }
.c-cornelio__rapidas[hidden] { display: none; }
.c-cornelio__rapida { flex: none; white-space: nowrap; scroll-snap-align: start; min-height: 2.5rem; padding: .35rem .85rem; border: 1.5px solid var(--petroleo); border-radius: 0; background: transparent; color: var(--petroleo); font: inherit; font-size: .9rem; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; transition: background-color var(--t-rapida), color var(--t-rapida); }
.c-cornelio__rapida:hover { background: var(--lumi); border-color: var(--lumi); color: var(--noite); }
.c-cornelio__painel[data-perfil="estudante"] .c-cornelio__rapida:hover { background: var(--rosa); border-color: var(--rosa); }
.c-cornelio__rapida:focus-visible { outline: 3px solid var(--noite); outline-offset: 2px; }

/* campo de texto */
.c-cornelio__form { flex: none; display: flex; gap: .5rem; padding: .65rem .75rem; background: var(--branco); border-top: 1px solid var(--linha); }
.c-cornelio__form input { flex: 1; min-width: 0; min-height: 2.9rem; padding: 0 .85rem; border: 1.5px solid var(--linha-forte); border-radius: 0; background: var(--branco); color: var(--tinta); font: inherit; font-size: 1rem; }
.c-cornelio__form input:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--petroleo); }
.c-cornelio__enviar { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 50%; background: var(--lumi); color: var(--noite); cursor: pointer; transition: background-color var(--t-rapida); }
.c-cornelio__painel[data-perfil="estudante"] .c-cornelio__enviar { background: var(--rosa); }
.c-cornelio__enviar:hover { background: var(--lumi-forte); }
.c-cornelio__painel[data-perfil="estudante"] .c-cornelio__enviar:hover { background: var(--rosa-medio); }
.c-cornelio__enviar:focus-visible { outline: 3px solid var(--noite); outline-offset: 2px; }
.c-cornelio__rodape { flex: none; margin: 0; padding: .1rem .9rem .65rem; background: var(--branco); color: var(--tinta-3); font-size: .78rem; line-height: 1.35; text-align: center; }
.c-cornelio__rodape a { color: var(--petroleo); text-decoration: underline; }

/* "enviar para a equipe" dentro da conversa */
.c-cornelio__bloco { display: grid; gap: .7rem; padding: .9rem; background: var(--branco); border: 1px solid var(--linha-forte); border-left: 4px solid var(--lumi); }
.c-cornelio__linha { display: grid; gap: .25rem; }
.c-cornelio__linha label { font-size: .85rem; font-weight: 600; color: var(--tinta-2); }
.c-cornelio__linha input, .c-cornelio__linha textarea { width: 100%; padding: .6rem .7rem; border: 1.5px solid var(--linha-forte); border-radius: 0; background: var(--branco); color: var(--tinta); font: inherit; font-size: 1rem; }
.c-cornelio__linha textarea { resize: vertical; min-height: 4.5rem; }
.c-cornelio__linha input:focus-visible, .c-cornelio__linha textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; }
.c-cornelio__aceite { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; line-height: 1.4; color: var(--tinta-2); cursor: pointer; }
.c-cornelio__aceite input { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: var(--petroleo); }
.c-cornelio__aviso { margin: 0; min-height: 0; font-size: .85rem; font-weight: 600; color: #a8123a; }
.c-cornelio__aviso:empty { display: none; }

/* ---------------------------------------------------------------- tela cheia no celular */
@media (max-width: 37.5em) {
	.c-cornelio__painel { right: 0; bottom: 0; left: 0; top: 0; width: 100%; height: 100vh; height: 100dvh; border: 0; box-shadow: none; }
	html.cornelio-aberto { overflow: hidden; }
	.admin-bar .c-cornelio__painel { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); }
	.c-cornelio__msg { max-width: 95%; }
	.c-cornelio__rapidas { padding-bottom: .7rem; }
	.c-cornelio__botao { width: 3.5rem; height: 3.5rem; }
}
@media (max-width: 24em) {
	.c-cornelio__balao { max-width: calc(100vw - 6.5rem); }
}
@media (prefers-reduced-motion: reduce) {
	.c-cornelio__balao { animation: none; }
	.c-cornelio__botao, .c-cornelio__rapida, .c-cornelio__enviar { transition: none; }
	.c-cornelio__botao:hover { transform: none; }
}

/* 1.0.3: botão do Cornélio 20% maior e flutuando de leve o tempo todo */
.c-cornelio__botao { width: 4.5rem; height: 4.5rem; }
.c-cornelio__botao img, .c-cornelio__botao:hover img[src$=".svg"] { animation: arch-cornelio-flutua 3.4s ease-in-out infinite; }
@keyframes arch-cornelio-flutua { 0%, 100% { transform: translateY(1px) rotate(0); } 25% { transform: translateY(-2px) rotate(-5deg); } 50% { transform: translateY(-3px) rotate(0); } 75% { transform: translateY(-2px) rotate(5deg); } }
@media (max-width: 37.5em) { .c-cornelio__botao { width: 4.2rem; height: 4.2rem; } }
@media (prefers-reduced-motion: reduce) { .c-cornelio__botao img, .c-cornelio__botao:hover img[src$=".svg"] { animation: none; } }

/* 1.0.3: no computador, as opções ficam AO LADO da conversa (coluna à esquerda do painel), sem tomar espaço dela */
@media (min-width: 52em) {
	.c-cornelio__painel { overflow: visible; }
	.c-cornelio__rapidas, .c-cornelio__rapidas.tem-mais-dir, .c-cornelio__rapidas.tem-mais-esq { position: absolute; right: calc(100% + .75rem); bottom: 0; width: 15.5rem; max-height: 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-end; gap: .5rem; overflow-x: hidden; overflow-y: auto; padding: .25rem; background: transparent; border: 0; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
	.c-cornelio__rapida { white-space: normal; text-align: left; background: var(--branco); box-shadow: var(--sombra); }
}