/* ORION Web — área de trabalho (usa tokens.css e orion.css) */
.web-app [hidden] { display: none !important; }
body.web-app { min-height: 100vh; background: var(--bg); color: var(--text-2); font-family: var(--font); }
.web-app .shell-top { position: sticky; top: 0; z-index: 20; background: rgba(8, 9, 10, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.web-tag { margin-left: 6px; padding: 2px 8px; border: 1px solid rgba(6, 182, 212, .5); border-radius: 99px; color: var(--cyan); font-size: 11px; letter-spacing: .04em; vertical-align: middle; }

.wa { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 0; height: calc(100vh - 66px); min-height: 520px; }
.wa-col { min-width: 0; min-height: 0; overflow-y: auto; padding: 20px; }
.wa-projetos { border-right: 1px solid var(--line); }
.wa-ias { border-left: 1px solid var(--line); }
.wa-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.wa-h h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.wa-tabs { display: none; }

.wa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wa-lista button { width: 100%; padding: 10px 12px; text-align: left; font: inherit; color: var(--text-2); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; transition: background .15s, border-color .15s; }
.wa-lista button:hover { background: var(--surface); }
.wa-lista button[aria-current='true'] { background: var(--surface-2); border-color: rgba(6, 182, 212, .45); color: var(--text); }
.wa-lista small { display: block; color: var(--dim); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wa-centro { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#vista-chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#vista-editor { overflow-y: auto; padding: 24px; }
.wa-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 12px; }
.wa-topo h1 { margin: 0; font-size: 22px; letter-spacing: -.01em; color: var(--text); }
.wa-topo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 16px; display: flex; flex-direction: column; gap: 14px; }
.wa-vazio { margin: auto; max-width: 440px; text-align: center; color: var(--muted); }
.wa-vazio h2 { color: var(--text); font-size: 20px; margin: 0 0 8px; }
.wa-msg { max-width: min(720px, 92%); padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.wa-msg.eu { align-self: flex-end; background: linear-gradient(135deg, rgba(59, 130, 246, .2), rgba(6, 182, 212, .14)); border-color: rgba(59, 130, 246, .35); color: var(--text); }
.wa-msg.ia { align-self: flex-start; background: var(--surface); color: var(--text-2); }
.wa-msg.erro-msg { align-self: flex-start; background: #1a0f12; border-color: rgba(248, 113, 113, .45); color: #fecaca; }
.wa-meta { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; white-space: normal; }
.wa-meta .falhou { color: var(--err); }
.wa-meta .assumiu { color: var(--ok); }
.wa-digitando { align-self: flex-start; color: var(--muted); font-size: 14px; }
.wa-digitando::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: wa-pts 1.2s steps(4, end) infinite; }
@keyframes wa-pts { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.wa-compor { display: flex; gap: 10px; align-items: flex-end; padding: 14px 24px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.wa-compor textarea { flex: 1; resize: vertical; min-height: 52px; max-height: 200px; padding: 12px 14px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); }
.wa-compor textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, .18); }

.wa-gerar { margin-bottom: 20px; display: grid; gap: 10px; }
.wa-form { display: grid; gap: 4px; max-width: 760px; }

.wa-fila { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; counter-reset: fila; }
.wa-fila li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.wa-fila li::before { counter-increment: fila; content: counter(fila); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #03121a; font-size: 12px; font-weight: 700; }
.wa-fila b { display: block; color: var(--text); font-size: 14px; }
.wa-fila small { display: block; color: var(--dim); font-size: 12px; overflow-wrap: anywhere; }
.wa-fila .acoes { grid-column: 2; display: flex; gap: 4px; flex-wrap: wrap; }
.wa-fila .acoes button { padding: 4px 8px; font: inherit; font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; }
.wa-fila .acoes button:hover:not(:disabled) { border-color: var(--cyan); color: var(--text); }
.wa-fila .acoes button:disabled { opacity: .35; cursor: default; }
.wa-fila .res { grid-column: 2; font-size: 12px; }
.wa-fila .res.bom { color: var(--ok); } .wa-fila .res.ruim { color: var(--err); }
.wa-conectar { display: grid; gap: 4px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.wa-conectar b { color: var(--text); }

@media (min-width: 1101px) { body.web-app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .wa { flex: 1; height: auto; } }
@media (max-width: 1100px) {
  .wa { grid-template-columns: 220px minmax(0, 1fr); }
  .wa-ias { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .wa { height: auto; }
  .wa-centro { height: 70vh; }
}
@media (max-width: 760px) {
  .wa-tabs { display: grid; grid-template-columns: repeat(3, 1fr); position: sticky; top: 66px; z-index: 15; background: var(--bg); border-bottom: 1px solid var(--line); }
  .wa-tabs button { padding: 12px 8px; font: inherit; font-size: 14px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
  .wa-tabs button[aria-selected='true'] { color: var(--text); border-bottom-color: var(--cyan); }
  .wa { display: block; height: auto; }
  .wa-col { display: none; border: 0; }
  .wa[data-aba='projetos'] .wa-projetos, .wa[data-aba='ias'] .wa-ias { display: block; }
  .wa[data-aba='chat'] .wa-centro { display: flex; height: calc(100vh - 124px); }
  .wa-topo, .wa-msgs, .wa-compor { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 760px) { #plano-badge, .top-actions a[href='/docs'] { display: none !important; } .web-app .shell-top { padding-left: 16px; padding-right: 16px; } body.web-app { overflow-x: hidden; } }
@media (prefers-reduced-motion: reduce) { .wa-digitando::after { animation: none; content: '...'; } }