/* Gerado por branding/apply-branding.js a partir de branding/theme/. Não edite aqui. */

/* PRIMITIVAS
   ════════════════════════════════════════════════════════════
   O que não muda com o tema nem com o projeto: raio, espaço,
   duração, curva, camada, página.

   A cor NÃO está aqui — está em skin.modelo.css. Essa é a divisão
   que faz o kit viajar: primitivas.css você nunca edita, a skin
   você reescreve por projeto.

   Importado por tailwind.css. Não precisa importar à mão.
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── Raio ────────────────────────────────────────────────── */
  --r-1: 3px;      /* barras de medidor, trilhos finos */
  --r-2: 6px;      /* etiquetas */
  --r-3: 8px;      /* chips, campos pequenos */
  --r-4: 9px;      /* botões */
  --r-5: 10px;     /* painéis, linhas de lista */
  --r-6: 12px;     /* cartões */
  --r-7: 14px;     /* modais, cartões de destaque */
  --r-8: 22px;     /* campo de busca em destaque */
  --r-pill: 999px; /* pílulas, alternadores */
  --r-round: 50%;  /* avatares, pontos de estado */

  /* ── Espaço · grade de 2px ───────────────────────────────── */
  --e-1: 4px;  --e-2: 6px;   --e-3: 8px;   --e-4: 10px;  --e-5: 12px;
  --e-6: 14px; --e-7: 16px;  --e-8: 22px;  --e-9: 28px;  --e-10: 40px;

  /* ── Duração ─────────────────────────────────────────────── */
  /* Movimento responde a uma ação ou indica atividade real.
     Não existe duração para enfeite porque não existe enfeite.   */
  --dur-1: 120ms;  /* hover, press, foco */
  --dur-2: 200ms;  /* padrão: abrir, recolher, trocar */
  --dur-3: 320ms;  /* painel, gaveta, modal */

  /* ── Curva ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, 1, .36, 1);  /* entrar */
  --ease-in:  cubic-bezier(.4, 0, 1, 1);     /* sair */
  --ease-std: cubic-bezier(.4, 0, .2, 1);    /* mover no lugar */

  /* ── Camadas ─────────────────────────────────────────────── */
  /* Deixe buracos entre os números. Um valor novo no meio pede
     um motivo escrito; z-index: 9999 nunca é um motivo.          */
  --z-base: 2;
  --z-fab: 18;
  --z-pop: 60;
  --z-overlay: 70;
  --z-fullscreen: 72;
  --z-modal: 90;
  --z-aviso: 100;

  /* ── Página ──────────────────────────────────────────────── */
  --pg-max: 1120px;        /* leitura e formulários */
  --pg-max-largo: 1440px;  /* telas de trabalho, tabelas largas */
  --pg-margem: 28px;
  --medida: 62ch;          /* largura máxima de linha de texto */

  /* ── Skeleton ────────────────────────────────────────────── */
  /* Derivado da skin: funciona em qualquer tema sem ser redeclarado. */
  --skeleton: color-mix(in srgb, var(--ink) 8%, var(--surface));
  --skeleton-brilho: color-mix(in srgb, var(--ink) 14%, var(--surface));
}


/* SKIN · Agentic4Flow
   ════════════════════════════════════════════════════════════
   O contrato de skin do kit de design (as 30 variáveis [req]),
   preenchido com os tokens do design de referência Agentic4Flow V17.

   Toda a identidade visual mora aqui. primitivas.css (raio, espaço,
   duração, camadas) vem do kit sem alteração, e ponte.json traduz
   estes tokens para as variáveis do LibreChat.

   Onde o V17 reprovava na WCAG AA, o valor foi ajustado pelo menor
   passo para o preto (claro) ou para o branco (escuro), mantendo o tom.
   Cada ajuste está comentado ao lado, com o valor original.

   Antes de publicar uma mudança de paleta:
     python3 checar-contraste.py skin.agentic4flow.css
   ──────────────────────────────────────────────────────────── */

html {

  /* ── Superfícies ─────────────────────────────────────────── */
  --bg:        #F8F8F7;
  --surface:   #FFFFFF;
  --surface-2: #F2F4F4;
  --line:      #DCDDDF;
  --line-forte:#8E8E94;  /* não existe no V17: borda de controle, 3:1 */
  --line-2:    #E9EAEA;
  --contour:   rgba(24,120,136,.16);

  /* ── Texto · três níveis, nunca mais ─────────────────────── */
  --ink:   #2B2A2A;
  --ink-2: #4A4B4D;
  --ink-3: #6C6E73;      /* V17 #7C7F84 reprovava (3,6:1) */

  /* ── Ação ────────────────────────────────────────────────── */
  --accent:       #187888;
  --accent-hover: #136977;
  --accent-soft:  #E2F0F2;
  --on-accent:    #FFFFFF;

  /* ── Estado · sempre ponto + texto ───────────────────────── */
  --ok:        #0C7B5C;  /* V17 #10A078 reprovava (2,9:1) */
  --ok-soft:   #E0F4EE;
  --warn:      #98641A;  /* V17 #B7791F reprovava (3,3:1) */
  --warn-soft: #FDF3DC;
  --risk:      #B24539;  /* V17 #B8473B reprovava (4,35:1) */
  --risk-soft: #F8E6E3;
  --amber:     #976F23;  /* V17 #F0B038 reprovava como texto (1,9:1) */

  /* ── Barra lateral · escura nos dois temas ───────────────── */
  --side:       #212123;
  --side-2:     #1A1A1C;
  --side-ink:   #ECECEC;
  --side-ink-2: #A3A6AA;
  --side-ink-3: #8F9396;  /* não existe no V17: rótulo de grupo */
  --side-line:  rgba(255,255,255,.08);
  --side-ativo: rgba(79,166,181,.18);
  --side-icone: #70A8B8;
  --avatar:     #187888;

  /* ── Capacidade · famílias temáticas ─────────────────────── */
  --cap-blue:   #2563EB;
  --cap-green:  #10B981;
  --cap-amber:  #F59E0B;
  --cap-purple: #7C3AED;
  --cap-cyan:   #06B6D4;

  /* ── Marca · só no logotipo, nunca na interface ──────────── */
  --marca-laranja: #FC6D01;

  /* ── Sombra · só em camadas que flutuam ──────────────────── */
  --shadow: 0 1px 2px rgba(43,42,42,.05), 0 8px 24px rgba(43,42,42,.07);

  /* ── Tipo ────────────────────────────────────────────────── */
  --f:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Tema escuro, o padrão ao abrir. Redeclara só o que muda. */
html.dark {
  --bg:        #272728;
  --surface:   #2B2C2D;
  --surface-2: #2F3234;
  --line:      #3A3C3E;
  --line-forte:#75757E;  /* borda de controle, 3:1 */
  --line-2:    #333537;
  --contour:   rgba(255,255,255,.06);

  --ink:   #EDEDED;
  --ink-2: #C9CBCD;
  --ink-3: #979B9D;      /* V17 #8F9396 reprovava sobre surface-2 (4,2:1) */

  --accent:       #4FA6B5;
  --accent-hover: #63B4C2;
  --accent-soft:  rgba(79,166,181,.16);
  --on-accent:    #16191A;

  --ok:        #2FBF94;  --ok-soft:   rgba(47,191,148,.15);
  --warn:      #F0B038;  --warn-soft: rgba(240,176,56,.15);
  --risk:      #E58F84;  --risk-soft: rgba(224,123,110,.15);  /* V17 #E07B6E: 3,8:1 */
  --amber:     #F0B038;

  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.3);
}


/* Ponte para as variáveis do LibreChat (theme/ponte.json) */

html:not(.high-contrast) {
  --presentation: 248 248 247;
  --surface-primary: 248 248 247;
  --surface-primary-alt: 242 244 244;
  --surface-primary-contrast: 242 244 244;
  --surface-secondary: 255 255 255;
  --surface-secondary-alt: 242 244 244;
  --surface-tertiary: 242 244 244;
  --surface-tertiary-alt: 255 255 255;
  --surface-hover: 242 244 244;
  --surface-hover-alt: 220 221 223;
  --surface-active: 226 240 242;
  --surface-active-alt: 242 244 244;
  --surface-composer-hover: 242 244 244;
  --surface-chat: 255 255 255;
  --surface-dialog: 255 255 255;
  --surface-submit: 24 120 136;
  --surface-submit-hover: 19 105 119;
  --surface-destructive: 178 69 57;
  --surface-destructive-hover: 151 59 48;
  --surface-code: 242 244 244;
  --header-primary: 248 248 247;
  --header-hover: 242 244 244;
  --header-button-hover: 242 244 244;
  --text-primary: 43 42 42;
  --text-secondary: 74 75 77;
  --text-secondary-alt: 108 110 115;
  --text-tertiary: 108 110 115;
  --text-muted: 108 110 115;
  --text-warning: 152 100 26;
  --text-destructive: 178 69 57;
  --link: 24 120 136;
  --link-hover: 19 105 119;
  --link-visited: 24 120 136;
  --accent-primary: 24 120 136;
  --accent-primary-hover: 19 105 119;
  --ring-primary: 24 120 136;
  --brand-purple: 24 120 136;
  --border-light: 220 221 223;
  --border-medium: 220 221 223;
  --border-medium-alt: 220 221 223;
  --border-heavy: 142 142 148;
  --border-xheavy: 142 142 148;
  --border-destructive: 178 69 57;
  --status-success: 12 123 92;
  --status-success-subtle: 224 244 238;
  --status-success-border: 12 123 92;
  --status-success-strong: 12 123 92;
  --status-warning: 152 100 26;
  --status-warning-subtle: 253 243 220;
  --status-warning-border: 152 100 26;
  --status-warning-strong: 152 100 26;
  --status-error: 178 69 57;
  --status-error-subtle: 248 230 227;
  --status-error-border: 178 69 57;
  --status-error-strong: 178 69 57;
  --status-info: 24 120 136;
  --status-info-subtle: 226 240 242;
  --status-info-border: 24 120 136;
  --status-info-strong: 24 120 136;
  --status-neutral: 108 110 115;
  --status-neutral-subtle: 242 244 244;
  --status-neutral-border: 220 221 223;
  --surface-inverted: 43 42 42;
  --surface-inverted-hover: 74 75 77;
  --text-inverted: 248 248 247;
  --chart-widget-surface: 255 255 255;
  --chart-widget-stroke: 220 221 223;
  --switch-unchecked: 142 142 148;
  --series-1: 37 99 235;
  --series-2: 16 185 129;
  --series-3: 245 158 11;
  --series-4: 124 58 237;
  --series-5: 6 182 212;
}

html.dark:not(.high-contrast) {
  --presentation: 39 39 40;
  --surface-primary: 39 39 40;
  --surface-primary-alt: 47 50 52;
  --surface-primary-contrast: 47 50 52;
  --surface-secondary: 43 44 45;
  --surface-secondary-alt: 47 50 52;
  --surface-tertiary: 47 50 52;
  --surface-tertiary-alt: 43 44 45;
  --surface-hover: 47 50 52;
  --surface-hover-alt: 58 60 62;
  --surface-active: 49 64 67;
  --surface-active-alt: 47 50 52;
  --surface-composer-hover: 47 50 52;
  --surface-chat: 43 44 45;
  --surface-dialog: 43 44 45;
  --surface-submit: 79 166 181;
  --surface-submit-hover: 99 180 194;
  --surface-destructive: 229 143 132;
  --surface-destructive-hover: 195 122 112;
  --surface-code: 47 50 52;
  --header-primary: 39 39 40;
  --header-hover: 47 50 52;
  --header-button-hover: 47 50 52;
  --text-primary: 237 237 237;
  --text-secondary: 201 203 205;
  --text-secondary-alt: 151 155 157;
  --text-tertiary: 151 155 157;
  --text-muted: 151 155 157;
  --text-warning: 240 176 56;
  --text-destructive: 229 143 132;
  --link: 79 166 181;
  --link-hover: 99 180 194;
  --link-visited: 79 166 181;
  --accent-primary: 79 166 181;
  --accent-primary-hover: 99 180 194;
  --ring-primary: 79 166 181;
  --brand-purple: 79 166 181;
  --border-light: 58 60 62;
  --border-medium: 58 60 62;
  --border-medium-alt: 58 60 62;
  --border-heavy: 117 117 126;
  --border-xheavy: 117 117 126;
  --border-destructive: 229 143 132;
  --status-success: 47 191 148;
  --status-success-subtle: 44 66 60;
  --status-success-border: 47 191 148;
  --status-success-strong: 47 191 148;
  --status-warning: 240 176 56;
  --status-warning-subtle: 73 64 47;
  --status-warning-border: 240 176 56;
  --status-warning-strong: 240 176 56;
  --status-error: 229 143 132;
  --status-error-subtle: 70 56 55;
  --status-error-border: 229 143 132;
  --status-error-strong: 229 143 132;
  --status-info: 79 166 181;
  --status-info-subtle: 49 64 67;
  --status-info-border: 79 166 181;
  --status-info-strong: 79 166 181;
  --status-neutral: 151 155 157;
  --status-neutral-subtle: 47 50 52;
  --status-neutral-border: 58 60 62;
  --surface-inverted: 237 237 237;
  --surface-inverted-hover: 201 203 205;
  --text-inverted: 39 39 40;
  --chart-widget-surface: 43 44 45;
  --chart-widget-stroke: 58 60 62;
  --switch-unchecked: 117 117 126;
  --series-1: 37 99 235;
  --series-2: 16 185 129;
  --series-3: 245 158 11;
  --series-4: 124 58 237;
  --series-5: 6 182 212;
}

html:not(.high-contrast) aside:has([data-testid="new-chat-button"]),
html:not(.high-contrast) #mobile-drawer {
  --presentation: 33 33 35;
  --header-primary: 33 33 35;
  --surface-primary-alt: 33 33 35;
  --surface-primary: 26 26 28;
  --surface-secondary: 26 26 28;
  --surface-chat: 26 26 28;
  --surface-dialog: 26 26 28;
  --surface-tertiary: 41 57 61;
  --surface-hover: 51 51 53;
  --header-hover: 51 51 53;
  --surface-hover-alt: 41 57 61;
  --surface-active: 41 57 61;
  --surface-active-alt: 41 57 61;
  --text-primary: 236 236 236;
  --text-secondary: 163 166 170;
  --text-secondary-alt: 143 147 150;
  --text-tertiary: 143 147 150;
  --text-muted: 143 147 150;
  --border-light: 51 51 53;
  --border-medium: 51 51 53;
  --border-medium-alt: 51 51 53;
  --border-heavy: 143 147 150;
  --border-xheavy: 143 147 150;
  --ring-primary: 112 168 184;
}

/* LIBRECHAT · componentes
   ════════════════════════════════════════════════════════════
   O que a ponte de cores (ponte.json) não alcança: fontes, raios,
   foco, barra lateral, campo de mensagem e botões. Usa só os tokens
   da skin e das primitivas; nenhuma cor nova aqui.

   Seletores pelo que o LibreChat v0.8.8 desenha (data-testid, id e
   classes). Se uma versão nova mudar a marcação, o pior caso é o
   componente voltar ao visual original; a lógica não depende disto.
   ──────────────────────────────────────────────────────────── */

/* ── Fontes · IBM Plex, servida pelo próprio container ──────── */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-400-normal.woff2?v=77bc026706') format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-400-italic.woff2?v=ac3e6cdbce') format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-500-normal.woff2?v=f7016cd446') format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ibm-plex-sans-latin-600-normal.woff2?v=196e3cbc5f') format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2?v=79936b18df') format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2?v=b1c8a895f5') format("woff2"); }

/* ── Tokens de forma do LibreChat → primitivas do kit ───────── */
html {
  --theme-font-family: var(--f);
  --theme-control-radius: var(--r-4);
  --theme-round-control-radius: var(--r-pill);
  --theme-surface-radius: var(--r-6);
  --theme-large-surface-radius: var(--r-7);
  --theme-elevation-surface: var(--shadow);
  --theme-motion-fast: var(--dur-1);
  --theme-motion-normal: var(--dur-2);
  --resize-ease: var(--ease-out);
  --radius: var(--r-5);
  --markdown-font-size: 0.9375rem; /* 15 px, o texto corrido do kit */
}

/* ── Base ──────────────────────────────────────────────────── */
html, :host, body, .font-sans, .font-theme-ui { font-family: var(--f); }
code, kbd, samp, pre, .font-mono { font-family: var(--mono); }
.mono, code, kbd, samp, pre, table { font-variant-numeric: tabular-nums; }
body { -webkit-font-smoothing: antialiased; }

::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::placeholder { color: var(--ink-3); }
input, textarea, [contenteditable] { caret-color: var(--accent); }

* { scrollbar-width: thin; scrollbar-color: var(--line-forte) transparent; }

/* Borda de controle: 3:1 contra o fundo (--line-forte), não a divisória */
input:not([type="checkbox"]):not([type="radio"])[class*="border"],
select[class*="border"],
textarea[class*="border"]:not(#prompt-textarea) {
  border-color: var(--line-forte);
}

/* Campos do login: o LibreChat pinta o fundo com uma sombra interna de cor fixa
   (contra o autopreenchimento). Aqui ela segue o fundo do rótulo flutuante. */
.webkit-dark-styles,
.webkit-dark-styles:focus,
.dark .webkit-dark-styles,
.dark .webkit-dark-styles:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 50vh rgb(var(--surface-primary));
}

/* ── Texto das respostas ───────────────────────────────────── */
.markdown { line-height: 1.55; }
.markdown :where(h1, h2, h3, h4) { font-weight: 500; letter-spacing: -0.01em; }
.markdown :where(strong) { font-weight: 600; }

/* Título da tela inicial (nome do preset) */
.split-parent { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.02em; }

/* Sugestões da tela inicial: cartões no fluxo da página não têm sombra */
button[class*="max-w-[16rem]"][class*="rounded-2xl"] {
  border-radius: var(--r-6);
  border-color: var(--line);
  box-shadow: none;
  transition: background-color var(--dur-1) var(--ease-std);
}
button[class*="max-w-[16rem]"][class*="rounded-2xl"]:hover { background-color: var(--surface-2); }

/* ── Campo de mensagem · busca em destaque do kit ─────────── */
[data-testid="composer-surface"] {
  border-color: var(--line);
  box-shadow: var(--shadow);
  border-top-left-radius: var(--r-8);
  border-top-right-radius: var(--r-8);
  transition: border-color var(--dur-1) var(--ease-std);
}
@media (min-width: 640px) {
  [data-testid="composer-surface"] { border-radius: var(--r-8); }
}
[data-testid="composer-surface"]:focus-within { border-color: var(--accent); }

/* Botão enviar: a ação principal da tela */
#send-button:not(:disabled),
#during-run-send-button:not(:disabled) {
  background-color: var(--accent);
  color: var(--on-accent);
}
#send-button:not(:disabled):hover,
#during-run-send-button:not(:disabled):hover { background-color: var(--accent-hover); }
#send-button:not(:disabled) svg,
#during-run-send-button:not(:disabled) svg { color: var(--on-accent); }

/*
 * Ferramentas ligadas no campo (Pesquisar, Memória, Código...). O LibreChat dá a cada uma
 * a cor de uma série de gráfico; aqui "ligado" é seleção, então usa a cor de ação.
 * O texto fica em --ink: a cor de ação sobre o próprio fundo suave não passa de 4,5:1.
 */
button[class*="border-series-"][class*="bg-series-"] {
  border-color: var(--accent);
  background-color: var(--accent-soft);
  color: var(--ink);
}
button[class*="border-series-"][class*="bg-series-"] svg { color: var(--accent); }
button[class*="border-series-"][class*="bg-series-"]:hover {
  background-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Alternador ligado é seleção: cor de ação (o LibreChat usa a cor do texto) */
[role="switch"][data-state="checked"] { background-color: var(--accent); }

/* ── Botões de confirmação ─────────────────────────────────── */
[class].bg-surface-submit,
[class].hover\:bg-surface-submit-hover:hover { color: var(--on-accent); }
.btn-primary { background-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background-color: var(--accent-hover); }

/* ── Camadas que flutuam: modais e menus ───────────────────── */
[role="dialog"][class*="rounded"] { border-radius: var(--r-7); }
[role="menu"][class*="rounded"],
[role="listbox"][class*="rounded"] {
  border-radius: var(--r-5);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* ── Barra lateral · logotipo no topo ──────────────────────── */
/* As cores escuras dela vêm da ponte (bloco barraLateral). */
aside:has([data-testid="new-chat-button"]) nav > div::before {
  content: "";
  display: block;
  flex: none;
  height: 24px;
  margin: 14px 14px 6px;
  background: url('logo.svg?v=64f4fd211d') left center / contain no-repeat;
}

/* ── Login · logotipo da versão certa para cada tema ───────── */
div.h-10:has(> img[src='assets/logo.svg']) {
  height: 2.5rem;
  margin-top: 2.5rem;
  background: url('logo.svg?v=64f4fd211d') center / contain no-repeat;
}
html:not(.dark) div.h-10:has(> img[src='assets/logo.svg']) {
  background-image: url('agentic4flow-logo-light.svg?v=9d24c38c21');
}
div.h-10 > img[src='assets/logo.svg'] { opacity: 0; }

/* Título de página do kit (22 px, peso 500) e cantos de campo e botão (9 px) */
div:has(> div.h-10 > img[src='assets/logo.svg']) h1 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
div:has(> div.h-10 > img[src='assets/logo.svg']) :is(.lc-field, button[type="submit"]) {
  border-radius: var(--r-4);
}

/* ── Painéis · Mapa e Gêmeo digital (assets/agentic4flow-paineis.js) ── */
/* Botões no menu: mesmo desenho dos itens do LibreChat; as cores vêm da ponte da barra lateral. */
.a4f-painel-botao {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-3);
  background: transparent;
  color: rgb(var(--text-secondary));
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}
.a4f-painel-botao:hover { background-color: rgb(var(--surface-hover)); color: rgb(var(--text-primary)); }
.a4f-painel-botao[aria-pressed="true"] { background-color: rgb(var(--surface-active-alt)); color: rgb(var(--text-primary)); }
.a4f-painel-botao svg { width: 1.25rem; height: 1.25rem; }

/* Painel encaixado à direita: o chat encolhe para dar lugar a ele, sem sombra (não flutua) */
#a4f-painel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-fab);
  flex-direction: column;
  width: var(--a4f-painel-w, 45vw);
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
html.a4f-painel-aberto #a4f-painel { display: flex; }
@media (min-width: 768px) {
  html.a4f-painel-aberto #root { margin-right: var(--a4f-painel-w, 45vw); }
}
/* Celular: o mapa ocupa a tela, por cima da gaveta */
@media (max-width: 767px) {
  #a4f-painel { left: 0; width: auto; border-left: 0; z-index: var(--z-overlay); }
  .a4f-painel-alca { display: none; }
}

#a4f-painel header {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 3.5rem;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--line);
}
.a4f-painel-titulo { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }
.a4f-painel-titulo span { font-size: 15px; font-weight: 500; }
.a4f-painel-titulo small { font-size: 12px; color: var(--ink-3); }
#a4f-painel header :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: var(--r-4);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-std);
}
#a4f-painel header :is(button, a):hover { background: var(--surface-2); color: var(--ink); }
#a4f-painel header svg { width: 18px; height: 18px; }
#a4f-painel iframe { flex: 1; width: 100%; border: 0; background: var(--surface-2); }

/* Alça de redimensionar: linha na cor de ação ao passar, focar ou arrastar */
.a4f-painel-alca {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  z-index: 1;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}
.a4f-painel-alca:hover,
.a4f-painel-alca:focus-visible,
html.a4f-painel-arrastando .a4f-painel-alca {
  background: linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
  outline: none;
}
html.a4f-painel-arrastando, html.a4f-painel-arrastando * { cursor: col-resize; user-select: none; }
/* Sem isto o iframe engole o ponteiro no meio do arraste */
html.a4f-painel-arrastando #a4f-painel iframe { pointer-events: none; }

/* ── Movimento reduzido · desliga tudo menos opacidade ────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}