.jarvis { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-overlay); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-base); overflow-wrap: anywhere; }
.jarvis__launcher, .jarvis__panel { pointer-events: auto; }
.jarvis [hidden] { display: none; }
.jarvis button, .jarvis input, .jarvis textarea { font: inherit; }
/* O botão flutuante é uma pílula que carrega o estado da tarefa: um ponto vivo enquanto trabalha (27/10). */
.jarvis__launcher { position: fixed; z-index: var(--z-overlay); right: var(--sp-4); bottom: var(--sp-4); gap: var(--sp-2); padding-inline: var(--sp-4); border-radius: var(--radius-pill); box-shadow: inset 0 1px 0 var(--surface-highlight), var(--shadow-float); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.jarvis__launcher:hover { transform: translateY(var(--lift)); }
.jarvis__spark { flex: none; }
.jarvis__dot { display: none; flex: none; width: var(--sp-2); height: var(--sp-2); border-radius: var(--radius-pill); background: currentColor; }
/* Os seletores que animam ficam em `:where()`: assim a regra de movimento reduzido, no fim da folha, vence todos. */
:where(.jarvis__launcher[data-jarvis-tone]) .jarvis__dot { display: inline-block; }
:where(.jarvis__launcher[data-jarvis-tone="working"]) .jarvis__dot { animation: jarvis-pulse 1.6s var(--ease-out) infinite; }
:where(.jarvis__launcher[data-jarvis-tone="done"]) .jarvis__dot { color: var(--green); }
:where(.jarvis__launcher[data-jarvis-tone="attention"]) .jarvis__dot { color: var(--orange); }
.jarvis__task-status { font-size: var(--text-xs); font-weight: var(--weight-medium); padding-left: var(--sp-2); border-left: 1px solid currentColor; }
.jarvis__panel { position: fixed; z-index: var(--z-overlay); right: var(--sp-4); bottom: calc(var(--sp-4) + var(--control-xl) + var(--sp-3)); width: min(calc(var(--sp-12) * 9), calc(100vw - var(--sp-4) * 2)); height: min(calc(var(--sp-12) * 13), calc(100dvh - var(--sp-4) * 2 - var(--control-xl) - var(--sp-3))); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: inset 0 1px 0 var(--surface-highlight), var(--shadow-float); }
/* Abrir responde ao toque com uma subida curta. Depois de arrastado, o painel guarda a posição no
   `transform` inline, e aí a animação não entra para não puxá-lo de volta. */
.jarvis__panel:where(:not([hidden]):not([style*="transform"])) { animation: jarvis-rise var(--duration-slow) var(--ease-out) backwards; }
.jarvis__header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex: none; }
.jarvis__drag { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); cursor: grab; touch-action: none; user-select: none; }
.jarvis__drag:active { cursor: grabbing; }
.jarvis__drag strong { font-size: var(--text-lg); font-weight: 600; }
.jarvis__tagline { color: var(--fg-secondary); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Abas como seletor segmentado: trilho com fio, aba ativa em pedra. */
.jarvis__tabs { display: flex; gap: var(--sp-1); margin: 0 var(--sp-4) var(--sp-3); padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--radius-pill); flex: none; }
.jarvis__tabs .ds-button { flex: 1; padding-inline: var(--sp-2); border-radius: var(--radius-pill); color: var(--fg-secondary); }
:where(.jarvis__tabs) button { transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.jarvis__tabs [aria-selected="true"] { background: var(--segmented-thumb); color: var(--fg); box-shadow: var(--shadow-card); }
.jarvis__status { padding: var(--sp-2) var(--sp-4); color: var(--fg-secondary); font-size: var(--text-sm); overflow-wrap: anywhere; flex: none; }
.jarvis__status:empty { display: none; }
.jarvis__tab { min-height: 0; flex: 1; }
.jarvis__chat { display: flex; flex-direction: column; }
.jarvis__scroll { overflow: auto; overscroll-behavior: contain; padding: var(--sp-4); min-height: 0; flex: 1; }
.jarvis__messages { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Jarvis fala em texto corrido; a pessoa fala num balão à direita. */
.jarvis__message { margin: 0; padding: var(--sp-1) 0; overflow-wrap: anywhere; }
.jarvis__message--user { align-self: flex-end; max-width: 88%; padding: var(--sp-3); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl); background: var(--accent-soft); }
.jarvis__message--new { animation: jarvis-enter var(--duration-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.jarvis__speaker { font-size: var(--text-sm); font-weight: 600; color: var(--fg-secondary); }
.jarvis__message p { margin: var(--sp-2) 0 0; line-height: var(--leading-normal); white-space: pre-wrap; }
.jarvis__thinking { display: flex; gap: var(--sp-1); padding: var(--sp-3) 0; }
:where(.jarvis__thinking) span { width: var(--sp-2); height: var(--sp-2); border-radius: var(--radius-pill); background: var(--fg-secondary); animation: jarvis-pulse 1.2s var(--ease-out) infinite; }
:where(.jarvis__thinking) span:nth-child(2) { animation-delay: .2s; }
:where(.jarvis__thinking) span:nth-child(3) { animation-delay: .4s; }
.jarvis__greeting { margin: 0 0 var(--sp-4); font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--fg-secondary); text-wrap: balance; }
.jarvis__greeting strong { font-weight: 600; color: var(--fg); }
.jarvis__empty, .jarvis__intro { margin: 0 0 var(--sp-3); color: var(--fg-secondary); line-height: var(--leading-normal); }
/* Atalhos da tela vazia: uma linha por caminho, com o que ele faz, em alvo de toque. */
.jarvis__suggestions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.jarvis__suggestion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); width: 100%; min-height: var(--control-xl); padding: var(--sp-3) var(--sp-4); text-align: left; color: var(--fg); background: var(--well); border: 1px solid transparent; border-radius: var(--radius-xl); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.jarvis__suggestion:hover { border-color: var(--border-strong); transform: translateY(var(--lift)); }
.jarvis__suggestion:active { transform: scale(var(--press)); }
.jarvis__suggestion strong { font-weight: 600; }
.jarvis__suggestion span { color: var(--fg-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.jarvis__actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.jarvis__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); margin-bottom: var(--sp-3); background: var(--well); border-radius: var(--radius-xl); overflow-wrap: anywhere; }
.jarvis__action strong { font-weight: 600; }
.jarvis__action p { margin: 0; white-space: pre-wrap; line-height: var(--leading-normal); }
.jarvis__action .ds-badge { max-width: 100%; white-space: normal; }
/* Tarefa rodando: o ponto do selo pulsa e uma linha fina se move, só opacity e transform. */
:where(.jarvis__action .ds-badge[data-tone="working"])::before { animation: jarvis-pulse 1.6s var(--ease-out) infinite; }
.jarvis__progress { position: relative; width: 100%; height: 2px; overflow: hidden; border-radius: var(--radius-pill); background: var(--border); }
:where(.jarvis__progress) span { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: var(--fg-secondary); animation: jarvis-slide 1.4s var(--ease-out) infinite; }
.jarvis__action-buttons { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.jarvis__consent { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: var(--leading-normal); }
.jarvis__consent input { flex: none; accent-color: var(--accent); min-width: var(--sp-4); min-height: var(--sp-4); }
.jarvis__composer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-2); flex: none; }
.jarvis__input-label { font-size: var(--text-sm); color: var(--fg-secondary); }
.jarvis__composer textarea { width: 100%; box-sizing: border-box; min-height: var(--control-xl); max-height: calc(var(--control-xl) * 3); resize: vertical; }
.jarvis__composer-actions { display: flex; justify-content: space-between; gap: var(--sp-2); }
.jarvis__settings { display: flex; flex-direction: column; gap: var(--sp-3); }
.jarvis__choices { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.jarvis__choices [aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.jarvis__settings .ds-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.jarvis__settings input { width: 100%; box-sizing: border-box; }
.jarvis__settings p, .jarvis__usage, .jarvis__time { color: var(--fg-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); }
.jarvis :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@keyframes jarvis-rise { from { opacity: 0; transform: translateY(var(--sp-3)) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes jarvis-enter { from { opacity: 0; transform: translateY(var(--sp-2)); } to { opacity: 1; transform: none; } }
@keyframes jarvis-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes jarvis-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (max-width: 767px) {
  .jarvis__launcher { bottom: calc(var(--tabbar-height) + var(--sp-3) + env(safe-area-inset-bottom)); right: var(--sp-3); }
  .jarvis__panel { inset: auto var(--sp-2) calc(var(--tabbar-height) + var(--sp-2) + env(safe-area-inset-bottom)); width: auto; height: min(calc(var(--sp-12) * 13), calc(var(--jarvis-viewport-height, 100dvh) - var(--tabbar-height) - var(--sp-4) - env(safe-area-inset-bottom))); }
  .jarvis__panel[data-keyboard="true"] { bottom: calc(var(--jarvis-keyboard-offset) + var(--sp-2)); height: min(calc(var(--sp-12) * 13), calc(var(--jarvis-viewport-height) - var(--sp-4))); }
  .jarvis__drag { cursor: default; touch-action: auto; }
  .jarvis__header { padding: var(--sp-2) var(--sp-3); }
  .jarvis__tabs { margin-inline: var(--sp-3); }
  .jarvis__scroll { padding: var(--sp-3); }
  .jarvis__composer { padding: var(--sp-2) var(--sp-3); }
  .jarvis__composer textarea { font-size: var(--text-lg); }
  .jarvis__consent { align-items: center; min-height: var(--control-md); }
  .jarvis__action-buttons .ds-button { flex: 1 1 auto; }
}
.jarvis__replies { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.jarvis__replies-title { font-size: var(--text-lg); font-weight: 600; margin: 0 0 var(--sp-3); }
.jarvis__replies-warning { background: var(--orange-soft); color: var(--orange); padding: var(--sp-3); border-radius: var(--radius-lg); }
.jarvis__replies .jarvis__message { margin-bottom: var(--sp-3); }
/* Por último, de propósito: com movimento reduzido, nada no Jarvis se move. */
@media (prefers-reduced-motion: reduce) { .jarvis *, .jarvis *::before, .jarvis *::after { transition: none; animation: none; } }