/* VYRON — layout inspirado em ferramentas de código (barra de tarefas à esquerda, pedido centralizado no início). */

:root,
:root[data-tema="escuro"] {
  --fundo: #0b0b0f;
  --lateral: #111117;
  --painel: #16161d;
  --painel-2: #1c1c25;
  --borda: #262631;
  --borda-forte: #34343f;
  --texto: #ececf1;
  --texto-2: #a9a9b6;
  --texto-3: #73737f;
  --destaque: #8b7bff;
  --destaque-2: #22d3ee;
  --destaque-suave: rgba(139, 123, 255, 0.14);
  --perigo: #f2706b;
  --ok: #34d399;
  --alerta: #fbbf24;
  --codigo-fundo: #0f0f15;
  --codigo-borda: #24242e;
  --sombra: 0 10px 40px rgba(0, 0, 0, 0.45);
  --hl-chave: #c4a7ff;
  --hl-texto: #8ee6b4;
  --hl-numero: #f5b971;
  --hl-comentario: #6e6e7c;
  --hl-funcao: #7cc7ff;
  --hl-tipo: #ffcf7a;
  color-scheme: dark;
}

:root[data-tema="claro"] {
  --fundo: #ffffff;
  --lateral: #f6f6f8;
  --painel: #ffffff;
  --painel-2: #f3f3f6;
  --borda: #e4e4ea;
  --borda-forte: #d2d2db;
  --texto: #15151b;
  --texto-2: #4f4f5c;
  --texto-3: #85858f;
  --destaque: #6a55f5;
  --destaque-2: #0891b2;
  --destaque-suave: rgba(106, 85, 245, 0.1);
  --perigo: #d4413b;
  --ok: #059669;
  --alerta: #b7791f;
  --codigo-fundo: #f7f7fa;
  --codigo-borda: #e4e4ea;
  --sombra: 0 10px 30px rgba(20, 20, 40, 0.12);
  --hl-chave: #7c3aed;
  --hl-texto: #047857;
  --hl-numero: #b45309;
  --hl-comentario: #8a8a96;
  --hl-funcao: #1d6fd1;
  --hl-tipo: #a16207;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
code, pre, kbd { font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

/* ---------- carregando / entrar ---------- */
.carregando { position: fixed; inset: 0; display: grid; place-items: center; }
.carregando img { animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; transform: scale(.94); } }

.entrar { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--destaque-suave), transparent 60%), var(--fundo); }
.cartao-entrar { width: min(380px, 100%); background: var(--painel); border: 1px solid var(--borda); border-radius: 18px;
  padding: 32px 28px 28px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px; }
.marca-grande { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 26px; letter-spacing: .14em; }
.sub { margin: -6px 0 6px; color: var(--texto-2); font-size: 14px; }
.cartao-entrar label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-2); }
.cartao-entrar input { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 10px; padding: 11px 12px; font-size: 15px; color: var(--texto); }
.cartao-entrar input:focus { border-color: var(--destaque); outline: none; }
.erro { margin: 0; color: var(--perigo); font-size: 14px; }
.botao-primario { margin-top: 6px; border: 0; border-radius: 10px; padding: 11px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--destaque), color-mix(in srgb, var(--destaque) 60%, var(--destaque-2))); }
.botao-primario:disabled { opacity: .6; cursor: default; }

/* ---------- estrutura ---------- */
.app { display: flex; height: 100dvh; }
.lateral { width: 272px; flex: none; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 12px;
  background: var(--lateral); border-right: 1px solid var(--borda); min-height: 0; }
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 6px 8px; font-weight: 700; letter-spacing: .16em; font-size: 15px; }
.nova { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 9px 12px; border-radius: 10px;
  border: 1px solid var(--borda-forte); background: var(--painel); font-weight: 600; font-size: 14px; }
.nova:hover { border-color: var(--destaque); background: var(--destaque-suave); }
.busca { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 9px; background: var(--painel-2);
  border: 1px solid transparent; color: var(--texto-3); }
.busca:focus-within { border-color: var(--borda-forte); }
.busca input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; font-size: 14px; color: var(--texto); outline: none; }
.rotulo-lista { padding: 6px 8px 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.lista { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; min-height: 0; }
.item { position: relative; display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 8px 34px 8px 10px;
  border-radius: 9px; border: 0; background: transparent; color: var(--texto-2); }
.item:hover { background: var(--painel-2); color: var(--texto); }
.item.ativo { background: var(--destaque-suave); color: var(--texto); }
.item .nome { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .quando { font-size: 12px; color: var(--texto-3); }
.item .apagar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); opacity: 0; }
.item:hover .apagar, .item:focus-within .apagar, .item.ativo .apagar { opacity: 1; }
.lista-vazia { padding: 10px; color: var(--texto-3); font-size: 13px; }
.rodape-lateral { border-top: 1px solid var(--borda); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.estado { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); padding: 0 6px; }
.estado .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); flex: none; }
.estado.online .ponto { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.estado.ocupada .ponto { background: var(--alerta); animation: pulsar 1.2s infinite; }
.estado.fora .ponto { background: var(--perigo); }
.acoes-lateral { display: flex; align-items: center; justify-content: space-between; }
.icone-botao { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0;
  background: transparent; color: var(--texto-2); }
.icone-botao:hover { background: var(--painel-2); color: var(--texto); }
.texto-botao { border: 0; background: transparent; color: var(--texto-2); font-size: 13px; padding: 6px 8px; border-radius: 8px; }
.texto-botao:hover { background: var(--painel-2); color: var(--texto); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.topo { display: flex; align-items: center; gap: 8px; height: 52px; flex: none; padding: 0 20px; border-bottom: 1px solid var(--borda); }
.topo h1 { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.menu { display: none; }
.rolagem { flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; }
.mensagens { max-width: 820px; margin: 0 auto; padding: 24px 24px 12px; display: flex; flex-direction: column; gap: 26px; }

/* ---------- tela inicial (pedido no centro) ---------- */
.inicio { display: none; }
.principal.vazio .topo { border-bottom-color: transparent; }
.principal.vazio .rolagem { flex: 0 1 auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 34vh; }
.principal.vazio .inicio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 24px 22px; }
.principal.vazio .area-caixa { flex: 1; }
.inicio h2 { margin: 8px 0 0; font-size: clamp(22px, 3.2vw, 30px); font-weight: 650; letter-spacing: -.01em; }
.inicio p { margin: 0; max-width: 520px; color: var(--texto-2); }
.sugestoes { display: none; }
.principal.vazio .sugestoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 820px; margin: 14px auto 0; padding: 0 24px; }
.sugestoes button { border: 1px solid var(--borda); background: var(--painel); color: var(--texto-2); border-radius: 999px; padding: 7px 14px; font-size: 13px; }
.sugestoes button:hover { border-color: var(--destaque); color: var(--texto); background: var(--destaque-suave); }

/* ---------- caixa do pedido ---------- */
.area-caixa { flex: none; padding: 8px 24px calc(18px + env(safe-area-inset-bottom)); }
.caixa { max-width: 820px; margin: 0 auto; background: var(--painel); border: 1px solid var(--borda-forte); border-radius: 18px;
  padding: 12px 12px 8px 14px; box-shadow: var(--sombra); transition: border-color .15s; }
.caixa:focus-within { border-color: color-mix(in srgb, var(--destaque) 70%, var(--borda-forte)); }
.caixa textarea { display: block; width: 100%; border: 0; background: transparent; resize: none; outline: none; min-height: 26px;
  max-height: 40vh; padding: 2px 2px 8px; font-size: 15px; line-height: 1.5; color: var(--texto); }
.caixa textarea::placeholder { color: var(--texto-3); }
.barra { display: flex; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borda); background: transparent; color: var(--texto-3);
  border-radius: 999px; padding: 4px 11px; font-size: 13px; }
.chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--destaque) 60%, transparent); color: var(--destaque); background: var(--destaque-suave); }
.dica { margin-left: auto; font-size: 12px; color: var(--texto-3); padding-right: 6px; }
.enviar { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(135deg, var(--destaque), color-mix(in srgb, var(--destaque) 55%, var(--destaque-2))); }
.enviar:disabled { background: var(--painel-2); color: var(--texto-3); cursor: default; }
.enviar .parar { display: none; }
.enviar.gerando { background: var(--texto); color: var(--fundo); }
.enviar.gerando .seta { display: none; }
.enviar.gerando .parar { display: block; }
.anexos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.anexo { display: inline-flex; align-items: center; gap: 6px; background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px; padding: 3px 4px 3px 9px; font-size: 13px; }
.anexo button { border: 0; background: transparent; color: var(--texto-3); width: 22px; height: 22px; border-radius: 6px; }
.anexo button:hover { background: var(--borda); color: var(--texto); }

/* ---------- mensagens ---------- */
.msg.usuario { display: flex; justify-content: flex-end; }
.bolha { max-width: min(640px, 88%); background: var(--painel-2); border: 1px solid var(--borda); border-radius: 16px 16px 4px 16px;
  padding: 10px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bolha.longa { max-height: 260px; overflow: auto; font-size: 14px; }
.msg.vyron { display: flex; flex-direction: column; gap: 10px; }
.cabeca { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; letter-spacing: .06em; }
.cabeca img { border-radius: 6px; }
.meta { font-weight: 400; letter-spacing: 0; color: var(--texto-3); font-size: 12px; margin-left: 4px; }

.pensamento { border: 1px solid var(--borda); border-radius: 12px; background: var(--painel); overflow: hidden; }
.pensamento summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--texto-2); user-select: none; }
.pensamento summary::-webkit-details-marker { display: none; }
.pensamento summary .seta-abrir { transition: transform .15s; }
.pensamento[open] summary .seta-abrir { transform: rotate(90deg); }
.pensamento.ativo summary .rotulo { background: linear-gradient(90deg, var(--texto-3), var(--texto), var(--texto-3)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilho 1.8s linear infinite; }
@keyframes brilho { to { background-position: -200% 0; } }
.pensamento-texto { padding: 0 14px 12px; font-size: 13px; line-height: 1.55; color: var(--texto-3); white-space: pre-wrap; max-height: 320px; overflow: auto; }

.digitando { display: inline-flex; gap: 4px; padding: 6px 2px; }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); animation: pulo 1.2s infinite; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulo { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.situacao { font-size: 13px; color: var(--texto-3); }
.situacao.erro { color: var(--perigo); }

.acoes { display: flex; gap: 4px; }
.acoes button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--texto-3); font-size: 12px; padding: 4px 8px; border-radius: 7px; }
.acoes button:hover { background: var(--painel-2); color: var(--texto); }

/* ---------- markdown da resposta ---------- */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md table { margin: 0 0 12px; }
.md h1, .md h2, .md h3, .md h4 { margin: 20px 0 8px; line-height: 1.3; }
.md h1 { font-size: 20px; } .md h2 { font-size: 18px; } .md h3 { font-size: 16px; } .md h4 { font-size: 15px; }
.md ul, .md ol { padding-left: 22px; }
.md li { margin: 3px 0; }
.md a { color: var(--destaque); }
.md blockquote { border-left: 3px solid var(--borda-forte); padding-left: 12px; color: var(--texto-2); }
.md hr { border: 0; border-top: 1px solid var(--borda); margin: 18px 0; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 14px; }
.md th, .md td { border: 1px solid var(--borda); padding: 6px 10px; text-align: left; }
.md th { background: var(--painel-2); }
.md :not(pre) > code { background: var(--painel-2); border: 1px solid var(--borda); border-radius: 6px; padding: 1px 6px; font-size: .88em; }
.md pre { margin: 0 0 12px; background: var(--codigo-fundo); border: 1px solid var(--codigo-borda); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.6; }
.md pre code { background: none; padding: 0; border: 0; font-size: inherit; }
.codigo { margin: 0 0 12px; border: 1px solid var(--codigo-borda); border-radius: 12px; overflow: hidden; background: var(--codigo-fundo); }
.codigo pre { margin: 0; border: 0; border-radius: 0; }
.codigo-topo { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px 5px 14px; font-size: 12px; color: var(--texto-3);
  border-bottom: 1px solid var(--codigo-borda); background: color-mix(in srgb, var(--codigo-fundo) 70%, var(--painel-2)); }
.codigo-topo button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--texto-3); font-size: 12px; padding: 3px 8px; border-radius: 6px; }
.codigo-topo button:hover { background: var(--painel-2); color: var(--texto); }

/* cores do código (highlight.js) */
.hljs-keyword, .hljs-built_in, .hljs-literal, .hljs-selector-tag, .hljs-meta .hljs-keyword { color: var(--hl-chave); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-template-tag { color: var(--hl-texto); }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable.constant_ { color: var(--hl-numero); }
.hljs-comment, .hljs-quote, .hljs-deletion { color: var(--hl-comentario); font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-name { color: var(--hl-funcao); }
.hljs-type, .hljs-title.class_, .hljs-class .hljs-title, .hljs-params, .hljs-attr { color: var(--hl-tipo); }
.hljs-meta, .hljs-tag { color: var(--texto-3); }

/* ---------- aviso ---------- */
.aviso { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--texto); color: var(--fundo);
  padding: 8px 14px; border-radius: 10px; font-size: 14px; box-shadow: var(--sombra); z-index: 50; max-width: calc(100vw - 32px); }

/* ---------- esfera da VYRON ---------- */
:root[data-tema="escuro"] { --vidro-1: #f3f1ff; --vidro-2: #cdc6ef; --vidro-borda: rgba(235, 225, 255, .9); --brilho-orbe: rgba(122, 92, 255, .5); }
:root[data-tema="claro"]  { --vidro-1: #ffffff; --vidro-2: #e8e4fb; --vidro-borda: rgba(220, 206, 255, .85); --brilho-orbe: rgba(122, 92, 255, .28); }

.palco-orbe { position: relative; width: 210px; height: 210px; margin: -12px 0 -16px; display: grid; place-items: center; }
.palco-orbe::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; background: var(--brilho-orbe);
  filter: blur(34px); animation: respirar 5s ease-in-out infinite; pointer-events: none; }
.orbe { position: relative; width: 100%; height: 100%; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* versão em CSS: ícones pequenos e reserva quando não há WebGL */
.orbe-mini { --t: 20px; position: relative; display: inline-block; flex: none; width: var(--t); height: var(--t); border-radius: 50%;
  overflow: hidden; isolation: isolate; vertical-align: middle;
  background: radial-gradient(circle at 50% 42%, var(--vidro-1), var(--vidro-2));
  box-shadow: 0 0 calc(var(--t) * .4) var(--brilho-orbe); }
.orbe-mini::before { content: ''; position: absolute; left: -18%; right: -18%; top: 29%; height: 42%; border-radius: 50%;
  background: linear-gradient(90deg, #ff5fbf 0%, #8a4dff 28%, #1f55ff 52%, #5b3dff 76%, #ff6fd0 100%);
  filter: blur(calc(var(--t) * .07)); animation: fita-mini 5.5s ease-in-out infinite; }
.orbe-mini::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .9), transparent 24%),
              radial-gradient(circle, transparent 56%, var(--vidro-borda) 100%); }
.orbe-mini.ativa { animation: respirar 1.3s ease-in-out infinite; }
.orbe-mini.ativa::before { animation-duration: 1.5s; }
.orbe-css { margin: 18px 0 14px; }
@keyframes fita-mini {
  0%, 100% { transform: rotate(-24deg) skewY(-14deg) translateY(-6%); }
  50% { transform: rotate(20deg) skewY(12deg) translateY(6%) scaleX(.9); }
}
@keyframes respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.cabeca .orbe-mini { --t: 20px; }
.nota-lateral { font-size: 11.5px; color: var(--texto-3); line-height: 1.3; }
.rodape-caixa { max-width: 820px; margin: 10px auto 0; text-align: center; font-size: 11.5px; color: var(--texto-3); }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .palco-orbe { width: 160px; height: 160px; margin: -8px 0 -10px; }
  .rodape-caixa { margin-top: 6px; }
  .lateral { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-102%); transition: transform .2s ease; width: min(300px, 86vw); box-shadow: var(--sombra); }
  .lateral.aberta { transform: none; }
  .sombra { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 30; }
  .menu { display: inline-grid; margin-left: -8px; }
  .topo { padding: 0 16px; }
  .mensagens { padding: 18px 16px 8px; }
  .area-caixa { padding: 6px 12px calc(12px + env(safe-area-inset-bottom)); }
  .dica { display: none; }
  .enviar { margin-left: auto; }
  .chip span { display: none; }
  .principal.vazio .sugestoes { padding: 0 12px; }
  .bolha { max-width: 92%; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }