/* Assistente de IA (guia 2.29). Cores só por token; alturas pela escala --size-*. */

/* o painel: encaixado (uma coluna do .app, o conteúdo encolhe) ou folha da direita com véu */
.ia{display:flex;flex-direction:column;min-width:0;background:var(--sidebar);color:var(--sidebar-foreground);border-left:1px solid var(--border)}
.ia-dock{position:sticky;top:0;height:100dvh;width:384px}
.ia-folha{position:fixed;top:0;right:0;bottom:0;z-index:50;width:384px;max-width:100%;box-shadow:var(--shadow-sheet);padding-bottom:env(safe-area-inset-bottom);animation:ia-entra .2s ease-out}
.ia-veu{z-index:49}
@keyframes ia-entra{from{translate:24px 0;opacity:.6}}
@media (max-width:639px){.ia-folha{width:100%;border-left:0}}

/* cabeçalho na altura do header do app, com a borda de baixo na linha dele */
.ia-head{flex-shrink:0;display:flex;align-items:center;gap:8px;height:64px;padding:0 16px;border-bottom:1px solid var(--border);transition:height .15s}
.app.collapsed .ia-head{height:48px}
/* com uma faixa do shell (40px: "Ver como" ou empresa) acima do header, o cabeçalho cresce por cima e a linha dele continua na do header; com as duas, 80px */
.app:has(.band) .ia-head{height:104px;padding-top:40px}
.app.collapsed:has(.band) .ia-head{height:88px}
.app:has(.band~.band) .ia-head{height:144px;padding-top:80px}
.app.collapsed:has(.band~.band) .ia-head{height:128px}
.ia-title{flex:1;min-width:0;font-size:14px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* contexto: "Nesta tela: Contatos" */
.ia-ctx{flex-shrink:0;display:flex;align-items:center;gap:4px;padding:12px 16px 0;font-size:12px;line-height:16px;color:var(--muted-foreground)}
.ia-ctx-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-ctx b{font-weight:500;color:var(--foreground)}

/* a conversa */
.ia-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.ia-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:16px}
.ia-vazio{display:flex;flex-direction:column;gap:12px}
.ia-sugs{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ia-sugs .btn{max-width:100%;height:auto;min-height:var(--size-sm);padding-top:4px;padding-bottom:4px;white-space:normal;text-align:left}
.ia-log{display:flex;flex-direction:column;gap:16px}
.ia-msg{display:flex;flex-direction:column;gap:8px;min-width:0}
.ia-eu{align-items:flex-end}
.ia-bolha{max-width:80%;padding:8px 12px;border-radius:var(--radius-surface);background:var(--muted);color:var(--foreground);white-space:pre-wrap;overflow-wrap:anywhere}
.ia-md{display:flex;flex-direction:column;gap:8px;overflow-wrap:anywhere}
.ia-md ul,.ia-md ol{display:grid;gap:4px;padding-left:20px}
.ia-md ul{list-style:disc}
.ia-md ol{list-style:decimal}
.ia-md strong{font-weight:600}
.ia-link{color:var(--link);text-decoration:underline;text-underline-offset:4px}
.ia-code{font-family:var(--font-mono);font-size:12px;line-height:16px;padding:0 4px;border-radius:4px;background:var(--muted)}
.ia-acts{display:flex;gap:4px}
.ia-acts .btn{color:var(--muted-foreground)}
.ia-acts .btn:hover,.ia-acts .btn[aria-pressed=true]{color:var(--foreground)}
.ia-acts .btn[aria-pressed=true]{background:var(--muted)}
.ia-erro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}

/* "Pensando…": o shimmer feito com os tokens; parado (texto liso) para quem pede movimento reduzido */
.ia-pensando{align-self:flex-start;color:var(--muted-foreground);background:linear-gradient(90deg,var(--muted-foreground) 35%,var(--foreground) 50%,var(--muted-foreground) 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ia-brilho 1.6s linear infinite}
@keyframes ia-brilho{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.ia-pensando{background:none;-webkit-text-fill-color:currentColor;animation:none}}

/* cartão de confirmação (Item outline do shadcn): ícone, pergunta, o que muda; Cancelar e Confirmar à direita */
.ia-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px;border:1px solid var(--edge);border-radius:var(--radius-control)}
.ia-item-media{display:grid;place-items:center;width:var(--size-default);height:var(--size-default);border:1px solid var(--border);border-radius:var(--radius-item);background:var(--muted);color:var(--foreground)}
.ia-item-texto{display:grid;gap:4px;min-width:0}
.ia-item-titulo{font-weight:500}
.ia-item-titulo strong{font-weight:700}
.ia-item-erro,.ia-item-acoes{grid-column:1/-1}
.ia-item-acoes{display:flex;justify-content:flex-end;gap:8px}
.ia-resultado{display:flex;align-items:center;gap:8px;min-height:var(--size-sm)}

/* ir ao fim: aparece quando a pessoa rola para cima */
.ia-fim{position:absolute;left:50%;bottom:8px;translate:-50% 0;border-radius:999px;box-shadow:var(--shadow)}

/* o campo de mensagem (Prompt Input): o texto em cima, o enviar embaixo à direita */
.ia-form{flex-shrink:0;padding:0 16px 12px}
.ia-prompt{display:flex;flex-direction:column;border:1px solid var(--input);border-radius:var(--radius-control);background:var(--input-bg);transition:border-color .15s,box-shadow .15s}
.ia-prompt:has(.ia-campo:focus){border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--ring) 50%,transparent)}
.ia-campo{display:block;width:100%;min-height:calc(1lh + 12px);max-height:calc(6lh + 12px);padding:8px 10px 4px;border:0;background:transparent;color:var(--foreground);line-height:20px;resize:none;overflow-y:auto;field-sizing:content;outline:none}
.ia-campo:focus-visible{box-shadow:none}
.ia-campo::placeholder{color:var(--muted-foreground)}
.ia-prompt-barra{display:flex;justify-content:flex-end;padding:0 8px 8px}
.ia-aviso{padding-top:8px;text-align:center;font-size:12px;line-height:16px;color:var(--muted-foreground)}

/* os toasts não cobrem o painel: vão para o canto do conteúdo; com a folha na tela toda, para o topo */
body:has(.ia-dock) .toaster,body:has(.ia-folha) .toaster{right:calc(384px + 16px)}
@media (max-width:639px){body:has(.ia-folha) .toaster{right:16px;top:80px;bottom:auto}}