/* =============================================================================
   VOWT CRM — design system
   -----------------------------------------------------------------------------
   CSS moderno, sem framework e sem build:
     @layer            ordem de cascata previsível
     OKLCH             cores perceptualmente uniformes
     color-mix()       variações sem gerar dezenas de tokens
     @starting-style   animacao de entrada em elementos discretos (dialog/popover)
     linear()          easing com sensacao de mola, sem JS
     container queries componentes que reagem ao próprio espaco
     content-visibility listas longas sem travar
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* =============================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  /*
   | Tamanho padrao de icone.
   |
   | Um SVG sem largura declarada, dentro de um container flex, nao tem tamanho
   | intrinseco: ele estica para ocupar tudo. O projeto tem 58 SVGs nessa
   | situacao e apenas seis regras de container para dimensionar icone — ou
   | seja, qualquer container novo herdava um icone gigante. Foi o que
   | aconteceu com o aviso de canal desconectado no inbox: o icone tomou a
   | conversa inteira.
   |
   | Com este padrao, esquecer a regra do container produz um icone levemente
   | fora de escala, nunca uma tela destruida. Quem precisa de outro tamanho
   | declara: no atributo width do proprio SVG, ou numa regra de container mais
   | abaixo neste arquivo — a especificidade empata e a ordem decide.
   */
  svg:not([width]) {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button { background: none; border: none; cursor: pointer; }

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  a { color: inherit; text-decoration: none; }

  :target { scroll-margin-block: 5ex; }

  dialog { padding: 0; border: none; color: inherit; max-width: none; max-height: none; }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }

  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* =============================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: light;

    /* ---- Marca ---- */
    --brand-h: 262;
    --brand: oklch(58% 0.21 var(--brand-h));
    --brand-strong: oklch(50% 0.22 var(--brand-h));
    --brand-soft: oklch(96% 0.03 var(--brand-h));
    --brand-contrast: oklch(99% 0 0);

    --whats: oklch(72% 0.17 152);        /* verde WhatsApp */
    --whats-soft: oklch(95% 0.05 152);

    /* ---- Semanticas ---- */
    --ok: oklch(65% 0.16 152);
    --ok-soft: oklch(95% 0.05 152);
    --warn: oklch(76% 0.15 78);
    --warn-soft: oklch(96% 0.06 85);
    --danger: oklch(60% 0.21 25);
    --danger-soft: oklch(96% 0.04 25);
    --info: oklch(62% 0.16 245);
    --info-soft: oklch(96% 0.04 245);

    /* ---- Superficies ---- */
    --bg: oklch(98.5% 0.003 265);
    --surface: oklch(100% 0 0);
    --surface-2: oklch(97.5% 0.004 265);
    --surface-3: oklch(95% 0.006 265);
    --surface-inset: oklch(96.5% 0.005 265);
    --overlay: oklch(20% 0.02 265 / 0.45);

    /* ---- Texto ---- */
    --text: oklch(24% 0.015 265);
    --text-2: oklch(46% 0.012 265);
    --text-3: oklch(60% 0.01 265);
    --text-invert: oklch(99% 0 0);

    /* ---- Bordas ---- */
    --line: oklch(91% 0.006 265);
    --line-strong: oklch(85% 0.008 265);
    --ring: oklch(58% 0.21 var(--brand-h) / 0.45);

    --scroll-thumb: oklch(85% 0.01 265);
    --scroll-thumb-hover: oklch(75% 0.015 265);

    /* ---- Bolhas de conversa ---- */
    --bubble-in: oklch(100% 0 0);
    --bubble-out: oklch(94% 0.045 152);
    --bubble-note: oklch(96.5% 0.055 85);
    --chat-bg: oklch(97% 0.005 265);

    /* ---- Espacamento (escala 4px) ---- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
    --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;

    /* ---- Raio ---- */
    --r-xs: 6px;  --r-sm: 8px;  --r-md: 12px;
    --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

    /* ---- Sombras: camadas curtas + longas dao profundidade real ---- */
    --sh-1: 0 1px 2px oklch(25% 0.03 265 / 0.06),
            0 1px 3px oklch(25% 0.03 265 / 0.05);
    --sh-2: 0 2px 4px oklch(25% 0.03 265 / 0.05),
            0 4px 12px oklch(25% 0.03 265 / 0.07);
    --sh-3: 0 4px 8px oklch(25% 0.03 265 / 0.06),
            0 12px 28px oklch(25% 0.03 265 / 0.10);
    --sh-4: 0 8px 16px oklch(25% 0.03 265 / 0.08),
            0 24px 56px oklch(25% 0.03 265 / 0.16);
    --sh-brand: 0 4px 14px oklch(58% 0.21 var(--brand-h) / 0.28);

    /* ---- Tipografia ---- */
    --font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
            "Apple Color Emoji", "Segoe UI Emoji";
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
            Consolas, "Liberation Mono", monospace;

    --fs-xs: 0.75rem;   --fs-sm: 0.8125rem;  --fs-base: 0.875rem;
    --fs-md: 0.9375rem; --fs-lg: 1.0625rem;  --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;   --fs-3xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);

    /* ---- Movimento ---- */
    --e-out: cubic-bezier(0.16, 1, 0.3, 1);
    --e-in: cubic-bezier(0.7, 0, 0.84, 0);
    --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
    /* Mola aproximada por linear(): overshoot suave, sem lib de animacao. */
    --e-spring: linear(
      0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 60%, 1.006 76.4%, 1
    );

    --t-fast: 120ms;
    --t-base: 200ms;
    --t-slow: 320ms;

    /* ---- Layout ---- */
    --sidebar-w: 15rem;
    --sidebar-w-collapsed: 4.25rem;
    --list-w: 21.5rem;
    --details-w: 20rem;
    --topbar-h: 3.5rem;
  }

  /* Tema escuro: por preferência do sistema... */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;

      --brand: oklch(70% 0.17 var(--brand-h));
      --brand-strong: oklch(76% 0.16 var(--brand-h));
      --brand-soft: oklch(30% 0.06 var(--brand-h));
      --brand-contrast: oklch(16% 0.02 265);

      --whats: oklch(74% 0.15 152);
      --whats-soft: oklch(30% 0.05 152);

      --ok: oklch(72% 0.15 152);
      --ok-soft: oklch(28% 0.05 152);
      --warn: oklch(80% 0.14 82);
      --warn-soft: oklch(30% 0.05 82);
      --danger: oklch(68% 0.18 25);
      --danger-soft: oklch(30% 0.06 25);
      --info: oklch(70% 0.14 245);
      --info-soft: oklch(29% 0.05 245);

      --bg: oklch(16.5% 0.012 265);
      --surface: oklch(20.5% 0.014 265);
      --surface-2: oklch(23.5% 0.015 265);
      --surface-3: oklch(27% 0.016 265);
      --surface-inset: oklch(18.5% 0.013 265);
      --overlay: oklch(8% 0.01 265 / 0.66);

      --text: oklch(95% 0.005 265);
      --text-2: oklch(76% 0.008 265);
      --text-3: oklch(60% 0.01 265);
      --text-invert: oklch(16% 0.02 265);

      --line: oklch(30% 0.012 265);
      --line-strong: oklch(38% 0.014 265);

      --scroll-thumb: oklch(34% 0.014 265);
      --scroll-thumb-hover: oklch(44% 0.016 265);

      --bubble-in: oklch(24.5% 0.014 265);
      --bubble-out: oklch(31% 0.045 165);
      --bubble-note: oklch(30% 0.04 85);
      --chat-bg: oklch(14.5% 0.012 265);

      --sh-1: 0 1px 2px oklch(0% 0 0 / 0.3);
      --sh-2: 0 2px 6px oklch(0% 0 0 / 0.34);
      --sh-3: 0 6px 18px oklch(0% 0 0 / 0.42);
      --sh-4: 0 16px 48px oklch(0% 0 0 / 0.55);
    }
  }

  /* ...e por escolha explícita do usuário (vence a preferência do sistema). */
  :root[data-theme="dark"] {
    color-scheme: dark;

    --brand: oklch(70% 0.17 var(--brand-h));
    --brand-strong: oklch(76% 0.16 var(--brand-h));
    --brand-soft: oklch(30% 0.06 var(--brand-h));
    --brand-contrast: oklch(16% 0.02 265);

    --whats: oklch(74% 0.15 152);
    --whats-soft: oklch(30% 0.05 152);

    --ok: oklch(72% 0.15 152);
    --ok-soft: oklch(28% 0.05 152);
    --warn: oklch(80% 0.14 82);
    --warn-soft: oklch(30% 0.05 82);
    --danger: oklch(68% 0.18 25);
    --danger-soft: oklch(30% 0.06 25);
    --info: oklch(70% 0.14 245);
    --info-soft: oklch(29% 0.05 245);

    --bg: oklch(16.5% 0.012 265);
    --surface: oklch(20.5% 0.014 265);
    --surface-2: oklch(23.5% 0.015 265);
    --surface-3: oklch(27% 0.016 265);
    --surface-inset: oklch(18.5% 0.013 265);
    --overlay: oklch(8% 0.01 265 / 0.66);

    --text: oklch(95% 0.005 265);
    --text-2: oklch(76% 0.008 265);
    --text-3: oklch(60% 0.01 265);
    --text-invert: oklch(16% 0.02 265);

    --line: oklch(30% 0.012 265);
    --line-strong: oklch(38% 0.014 265);

    --scroll-thumb: oklch(34% 0.014 265);
    --scroll-thumb-hover: oklch(44% 0.016 265);

    --bubble-in: oklch(24.5% 0.014 265);
    --bubble-out: oklch(31% 0.045 165);
    --bubble-note: oklch(30% 0.04 85);
    --chat-bg: oklch(14.5% 0.012 265);

    --sh-1: 0 1px 2px oklch(0% 0 0 / 0.3);
    --sh-2: 0 2px 6px oklch(0% 0 0 / 0.34);
    --sh-3: 0 6px 18px oklch(0% 0 0 / 0.42);
    --sh-4: 0 16px 48px oklch(0% 0 0 / 0.55);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms;
      --e-spring: linear;
    }
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* =============================================================================
   BASE
   ========================================================================== */
@layer base {
  body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
  }

  h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.018em;
    color: var(--text);
  }

  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }
  h4 { font-size: var(--fs-lg); }

  small { font-size: var(--fs-xs); }
  code, kbd, pre { font-family: var(--mono); font-size: 0.92em; }

  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  ::selection { background: color-mix(in oklab, var(--brand) 26%, transparent); }

  /* Transicoes suaves entre páginas onde o navegador suportar. */
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: fade-out 90ms var(--e-in) both; }
  ::view-transition-new(root) { animation: fade-in 180ms var(--e-out) both; }
}

/* =============================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .app {
    display: grid;
    grid-template-columns: auto 1fr;
    min-height: 100dvh;
  }

  /* ---- Barra lateral ---- */
  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: var(--sidebar-w);
    height: 100dvh;
    padding: var(--sp-4) var(--sp-3);
    background: var(--surface);
    border-right: 1px solid var(--line);
    transition: width var(--t-base) var(--e-out);
    z-index: 30;
  }

  .sidebar[data-collapsed="true"] { width: var(--sidebar-w-collapsed); }
  .sidebar[data-collapsed="true"] .nav-item__label,
  .sidebar[data-collapsed="true"] .sidebar__brand-text,
  .sidebar[data-collapsed="true"] .sidebar__section { opacity: 0; pointer-events: none; }

  .sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    margin-bottom: var(--sp-2);
  }

  .sidebar__logo {
    display: grid;
    place-items: center;
    width: 2.25rem;
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: linear-gradient(140deg, var(--brand), oklch(62% 0.19 calc(var(--brand-h) + 40)));
    color: var(--brand-contrast);
    font-weight: 800;
    font-size: var(--fs-base);
    letter-spacing: -0.04em;
    box-shadow: var(--sh-brand);
  }

  .sidebar__brand-text { display: grid; transition: opacity var(--t-fast); }
  .sidebar__brand-text strong { font-size: var(--fs-md); letter-spacing: -0.02em; }
  .sidebar__brand-text span { font-size: var(--fs-xs); color: var(--text-3); }

  .sidebar__nav { display: grid; gap: 2px; }

  .sidebar__section {
    padding: var(--sp-4) var(--sp-3) var(--sp-1);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    transition: opacity var(--t-fast);
  }

  .sidebar__footer { margin-top: auto; display: grid; gap: var(--sp-2); }

  .nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast);
  }

  .nav-item:hover { background: var(--surface-2); color: var(--text); }

  .nav-item[aria-current="page"] {
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-weight: 600;
  }

  .nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset-block: 22%;
    left: -var(--sp-3);
    inset-inline-start: calc(var(--sp-3) * -1);
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand);
  }

  .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
  .nav-item__label { transition: opacity var(--t-fast); }

  .nav-item__badge {
    margin-inline-start: auto;
    min-width: 1.35rem;
    padding: 1px 6px;
    border-radius: var(--r-full);
    background: var(--danger);
    color: oklch(99% 0 0);
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ---- Área principal ---- */
  .main { display: flex; flex-direction: column; min-width: 0; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--topbar-h);
    padding-inline: var(--sp-5);
    background: color-mix(in oklab, var(--surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
  }

  .topbar h1 { font-size: var(--fs-lg); font-weight: 650; }
  .topbar__spacer { margin-inline-start: auto; }

  .page { flex: 1; padding: var(--sp-6); min-width: 0; }
  .page--flush { padding: 0; overflow: hidden; }

  .page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
  }

  .page__title { display: grid; gap: 2px; }
  .page__title p { color: var(--text-2); font-size: var(--fs-sm); }

  /* ---- Grade do inbox: lista | conversa | detalhes ----
     São quatro filhos (lista, conversa, estado vazio, detalhes) em três
     colunas. A conversa é o estado vazio dividem a MESMA celula — só um
     deles fica visível por vez. Sem posicionamento explícito, o painel de
     detalhes cairia numa quarta coluna implícita e ocuparia a tela toda. */
  .inbox {
    display: grid;
    grid-template-columns: var(--list-w) minmax(0, 1fr) 0;
    grid-template-rows: 100%;
    height: calc(100dvh - var(--topbar-h));
    overflow: hidden;
    transition: grid-template-columns var(--t-base) var(--e-out);
  }

  .inbox > .conv-list { grid-area: 1 / 1; }
  .inbox > .thread    { grid-area: 1 / 2; }
  .inbox > .details   { grid-area: 1 / 3; }

  .inbox[data-details-open="true"] {
    grid-template-columns: var(--list-w) minmax(0, 1fr) var(--details-w);
  }

  /* Coluna fechada: não deve vazar conteúdo. */
  .inbox[data-details-open="false"] > .details {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  @media (width < 1200px) {
    .inbox[data-details-open="true"] { grid-template-columns: var(--list-w) minmax(0, 1fr) 0; }
    .inbox[data-details-open="true"] > .details {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      width: min(22rem, 92vw);
      z-index: 40;
      opacity: 1;
      pointer-events: auto;
      box-shadow: var(--sh-4);
    }
  }

  @media (width < 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      transform: translateX(-100%);
      transition: transform var(--t-base) var(--e-out);
      box-shadow: var(--sh-4);
    }
    .sidebar[data-open="true"] { transform: none; }
    /* No celular só uma coluna aparece de cada vez. */
    .inbox { grid-template-columns: 1fr; }
    .inbox > .conv-list,
    .inbox > .thread,
    .inbox > .details { grid-area: 1 / 1; }
    .inbox > .thread { display: none; }
    .inbox[data-view="thread"] > .conv-list { display: none; }
    .inbox[data-view="thread"] > .thread { display: flex; }
    .inbox[data-view="thread"] > .thread.hidden { display: none; }
  }

  .grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--sp-4);
  }
}

/* =============================================================================
   COMPONENTES
   ========================================================================== */
@layer components {

  /* ---------- Botão ---------- */
  .btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-line: var(--line-strong);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--btn-line);
    border-radius: var(--r-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--fs-base);
    font-weight: 550;
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
    transition:
      background var(--t-fast) var(--e-out),
      border-color var(--t-fast),
      transform var(--t-fast) var(--e-spring),
      box-shadow var(--t-fast),
      opacity var(--t-fast);
  }

  .btn:hover:not(:disabled) { background: color-mix(in oklab, var(--btn-bg) 92%, var(--text) 8%); }
  .btn:active:not(:disabled) { transform: scale(0.97); }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn svg { width: 17px; height: 17px; }

  .btn--primary {
    --btn-bg: var(--brand);
    --btn-fg: var(--brand-contrast);
    --btn-line: transparent;
    box-shadow: var(--sh-brand);
  }
  .btn--primary:hover:not(:disabled) { background: var(--brand-strong); }

  .btn--danger { --btn-bg: var(--danger); --btn-fg: oklch(99% 0 0); --btn-line: transparent; }
  .btn--success { --btn-bg: var(--ok); --btn-fg: oklch(99% 0 0); --btn-line: transparent; }
  .btn--ghost { --btn-bg: transparent; --btn-line: transparent; color: var(--text-2); }
  .btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
  .btn--soft { --btn-bg: var(--brand-soft); --btn-fg: var(--brand-strong); --btn-line: transparent; }

  .btn--sm { padding: 0.3rem 0.6rem; font-size: var(--fs-sm); border-radius: var(--r-xs); }
  .btn--lg { padding: 0.7rem 1.25rem; font-size: var(--fs-md); border-radius: var(--r-md); }
  .btn--block { width: 100%; }

  .btn--icon {
    padding: 0;
    width: 2.25rem;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
  }
  .btn--icon.btn--sm { width: 1.85rem; }

  /* Estado de carregamento */
  .btn[data-loading="true"] { color: transparent !important; pointer-events: none; }
  .btn[data-loading="true"]::after {
    content: "";
    position: absolute;
    width: 1rem;
    aspect-ratio: 1;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--btn-fg);
    animation: spin 620ms linear infinite;
  }

  /* ---------- Campos ---------- */
  .field { display: grid; gap: var(--sp-2); }

  .label {
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .label--required::after { content: "*"; color: var(--danger); }

  .input, .textarea, .select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-base);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  }

  .input::placeholder, .textarea::placeholder { color: var(--text-3); }

  .input:hover, .textarea:hover, .select:hover { border-color: var(--text-3); }

  .input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--ring);
  }

  .input[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent);
  }

  .textarea { resize: vertical; min-height: 5rem; line-height: 1.5; }

  .select {
    appearance: none;
    padding-inline-end: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
  }

  .field__hint { font-size: var(--fs-xs); color: var(--text-3); }
  .field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 500; }

  .input-group { display: flex; }
  .input-group .input { border-start-end-radius: 0; border-end-end-radius: 0; }
  .input-group .btn { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }

  /* Busca com ícone */
  .search {
    position: relative;
    display: flex;
    align-items: center;
  }
  .search svg {
    position: absolute;
    inset-inline-start: 0.65rem;
    width: 16px; height: 16px;
    color: var(--text-3);
    pointer-events: none;
  }
  .search .input { padding-inline-start: 2.1rem; }

  /* Switch */
  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    user-select: none;
  }
  .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .switch__track {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: var(--r-full);
    background: var(--surface-3);
    transition: background var(--t-base) var(--e-out);
    flex-shrink: 0;
  }
  .switch__track::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 1.05rem; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--sh-1);
    transition: transform var(--t-base) var(--e-spring);
  }
  .switch input:checked + .switch__track { background: var(--brand); }
  .switch input:checked + .switch__track::after { transform: translateX(1.09rem); }
  .switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--ring); }

  /* ---------- Cartao ---------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
  }

  .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
  }
  .card__header h3 { font-size: var(--fs-md); font-weight: 650; }
  .card__body { padding: var(--sp-5); }
  .card__footer {
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }

  .card--interactive { transition: transform var(--t-base) var(--e-out), box-shadow var(--t-base); }
  .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }

  /* ---------- Indicadores ---------- */
  .stat {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
  }
  .stat__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .stat__delta { font-size: var(--fs-xs); color: var(--text-2); }
  .stat__delta--up { color: var(--ok); }
  .stat__delta--down { color: var(--danger); }

  /* ---------- Distintivos ---------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
  }
  .badge--ok { background: var(--ok-soft); color: color-mix(in oklab, var(--ok) 75%, var(--text)); }
  .badge--warn { background: var(--warn-soft); color: color-mix(in oklab, var(--warn) 65%, var(--text)); }
  .badge--danger { background: var(--danger-soft); color: color-mix(in oklab, var(--danger) 75%, var(--text)); }
  .badge--info { background: var(--info-soft); color: color-mix(in oklab, var(--info) 75%, var(--text)); }
  .badge--brand { background: var(--brand-soft); color: var(--brand-strong); }

  .badge__dot { width: 6px; aspect-ratio: 1; border-radius: 50%; background: currentColor; }

  .badge--pulse .badge__dot { animation: pulse-dot 1.8s var(--e-inout) infinite; }

  /* ---------- Avatar ---------- */
  .avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--avatar-size, 2.5rem);
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--avatar-color, var(--brand));
    color: oklch(99% 0 0);
    font-size: calc(var(--avatar-size, 2.5rem) * 0.36);
    font-weight: 650;
    letter-spacing: -0.02em;
    overflow: hidden;
    user-select: none;
  }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .avatar--sm { --avatar-size: 1.9rem; }
  .avatar--lg { --avatar-size: 3.25rem; }
  .avatar--xl { --avatar-size: 4.5rem; }

  .avatar__status {
    position: absolute;
    inset-block-end: -1px;
    inset-inline-end: -1px;
    width: 32%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--text-3);
  }
  .avatar__status[data-presence="online"] { background: var(--ok); }
  .avatar__status[data-presence="busy"] { background: var(--danger); }
  .avatar__status[data-presence="away"] { background: var(--warn); }

  /* ---------- Lista de conversas ---------- */
  .conv-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
    overflow: hidden;
  }

  .conv-list__head {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--line);
  }

  .conv-list__tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-inset);
    border-radius: var(--r-sm);
  }

  .tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--r-xs);
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--text-2);
    transition: background var(--t-fast), color var(--t-fast);
  }
  .tab:hover { color: var(--text); }
  .tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--sh-1);
  }
  .tab__count {
    padding: 0 0.3rem;
    border-radius: var(--r-full);
    background: var(--surface-3);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
  }
  .tab[aria-selected="true"] .tab__count { background: var(--brand-soft); color: var(--brand-strong); }

  .conv-list__scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .conv {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3);
    text-align: start;
    border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
    cursor: pointer;
    /* Listas longas não pagam layout do que está fora da tela. */
    content-visibility: auto;
    contain-intrinsic-size: auto 4.75rem;
    transition: background var(--t-fast);
  }

  .conv:hover { background: var(--surface-2); }

  .conv[aria-selected="true"] { background: var(--brand-soft); }
  .conv[aria-selected="true"]::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--brand);
  }

  .conv__main { display: grid; gap: 2px; min-width: 0; }

  .conv__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
  }

  .conv__name {
    font-weight: 600;
    font-size: var(--fs-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .conv__time {
    font-size: var(--fs-xs);
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  .conv__preview {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--fs-sm);
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .conv__meta { display: flex; align-items: center; gap: 0.35rem; margin-top: 3px; flex-wrap: wrap; }

  .conv__unread {
    display: grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.3rem;
    border-radius: var(--r-full);
    background: var(--whats);
    color: oklch(20% 0.04 152);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .conv__pin { color: var(--text-3); }

  /* Marcador de canal na lateral do avatar */
  .conv__channel {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 0.85rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--chip, var(--text-3));
  }

  /* ---------- Conversa (thread) ---------- */
  .thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--chat-bg);
  }

  .thread__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    min-height: var(--topbar-h);
  }

  .thread__title { display: grid; gap: 1px; min-width: 0; }
  .thread__title strong { font-size: var(--fs-md); font-weight: 650; }
  .thread__title span { font-size: var(--fs-xs); color: var(--text-2); }

  .thread__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-1); }

  .thread__scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-behavior: smooth;
    /* Textura sutil: pontos quase invisiveis, sem imagem externa. */
    background-image: radial-gradient(
      circle at 1px 1px,
      color-mix(in oklab, var(--text) 5%, transparent) 1px,
      transparent 0
    );
    background-size: 22px 22px;
  }

  .day-sep {
    align-self: center;
    margin-block: var(--sp-4) var(--sp-3);
    padding: 0.2rem 0.7rem;
    border-radius: var(--r-full);
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    backdrop-filter: blur(6px);
    box-shadow: var(--sh-1);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-2);
    position: sticky;
    top: var(--sp-1);
    z-index: 2;
  }

  /* ---------- Bolha ---------- */
  .msg {
    display: flex;
    max-width: min(68ch, 78%);
    animation: bubble-in 260ms var(--e-spring) both;
  }

  .msg--in { align-self: flex-start; }
  .msg--out { align-self: flex-end; }

  .bubble {
    position: relative;
    padding: 0.45rem 0.7rem 0.4rem;
    border-radius: var(--r-md);
    background: var(--bubble-in);
    box-shadow: var(--sh-1);
    font-size: var(--fs-md);
    line-height: 1.45;
    min-width: 5rem;
  }

  .msg--in .bubble { border-start-start-radius: var(--r-xs); }
  .msg--out .bubble { background: var(--bubble-out); border-start-end-radius: var(--r-xs); }
  .msg--note .bubble {
    background: var(--bubble-note);
    border: 1px dashed color-mix(in oklab, var(--warn) 45%, transparent);
  }

  .bubble__author {
    font-size: var(--fs-xs);
    font-weight: 650;
    color: var(--brand-strong);
    margin-bottom: 2px;
  }

  .bubble__text { overflow-wrap: anywhere; white-space: pre-wrap; }
  .bubble__text a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
  .bubble__text code {
    padding: 0.05em 0.3em;
    border-radius: var(--r-xs);
    background: color-mix(in oklab, var(--text) 8%, transparent);
  }

  .bubble__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    margin-top: 2px;
    font-size: 0.6875rem;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    user-select: none;
  }

  .ticks { display: inline-flex; color: var(--text-3); }
  .ticks[data-read="true"] { color: var(--info); }
  .ticks svg { width: 15px; height: 15px; }

  /* Resposta citada */
  .quote {
    display: grid;
    gap: 1px;
    margin-bottom: var(--sp-2);
    padding: 0.35rem 0.55rem;
    border-radius: var(--r-xs);
    border-inline-start: 3px solid var(--brand);
    background: color-mix(in oklab, var(--text) 6%, transparent);
    font-size: var(--fs-sm);
  }
  .quote strong { color: var(--brand-strong); font-size: var(--fs-xs); }
  .quote span { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* Reação */
  .reaction {
    position: absolute;
    inset-block-end: -0.7rem;
    inset-inline-start: 0.6rem;
    padding: 0.05rem 0.3rem;
    border-radius: var(--r-full);
    background: var(--surface);
    box-shadow: var(--sh-1);
    font-size: var(--fs-sm);
    animation: pop-in 320ms var(--e-spring) both;
  }

  /* Mídia dentro da bolha */
  .bubble__media { margin: -0.15rem -0.35rem var(--sp-2); border-radius: var(--r-sm); overflow: hidden; }
  .bubble__media img, .bubble__media video {
    display: block;
    max-height: 20rem;
    width: auto;
    max-width: 100%;
    cursor: zoom-in;
    background: var(--surface-3);
  }

  .file {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--text) 6%, transparent);
  }
  .file__icon {
    display: grid; place-items: center;
    width: 2.25rem; aspect-ratio: 1;
    border-radius: var(--r-xs);
    background: var(--brand-soft);
    color: var(--brand-strong);
    flex-shrink: 0;
  }
  .file__info { display: grid; min-width: 0; }
  .file__name { font-size: var(--fs-sm); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .file__size { font-size: var(--fs-xs); color: var(--text-3); }

  /* Indicador de digitação */
  .typing { display: inline-flex; gap: 3px; padding: 0.55rem 0.75rem; }
  .typing i {
    width: 6px; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--text-3);
    animation: typing-bounce 1.25s var(--e-inout) infinite;
  }
  .typing i:nth-child(2) { animation-delay: 0.15s; }
  .typing i:nth-child(3) { animation-delay: 0.3s; }

  /* ---------- Compositor ---------- */
  .composer {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    background: var(--surface);
    border-top: 1px solid var(--line);
  }

  .composer__box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .composer__box:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--ring);
  }

  .composer__input {
    border: none;
    background: none;
    outline: none;
    resize: none;
    max-height: 9rem;
    padding: 0.35rem 0;
    font-size: var(--fs-md);
    line-height: 1.5;
    field-sizing: content; /* cresce sozinho onde suportado */
  }

  .composer__tools { display: flex; align-items: center; gap: var(--sp-1); }

  .composer__send {
    display: grid; place-items: center;
    width: 2.4rem; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--brand);
    color: var(--brand-contrast);
    box-shadow: var(--sh-brand);
    transition: transform var(--t-fast) var(--e-spring), background var(--t-fast);
  }
  .composer__send:hover:not(:disabled) { background: var(--brand-strong); transform: scale(1.06); }
  .composer__send:active:not(:disabled) { transform: scale(0.92); }
  .composer__send:disabled { background: var(--surface-3); color: var(--text-3); box-shadow: none; }

  .composer__alert {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
  }
  .composer__alert svg { width: 18px; height: 18px; flex-shrink: 0; }
  .composer__alert--warn { background: var(--warn-soft); color: color-mix(in oklab, var(--warn) 60%, var(--text)); }
  .composer__alert--danger { background: var(--danger-soft); color: color-mix(in oklab, var(--danger) 70%, var(--text)); }

  /* Anexos em fila para envio */
  .attachments { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
  .attachment {
    position: relative;
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: var(--surface-3);
    font-size: var(--fs-sm);
    animation: pop-in 220ms var(--e-spring) both;
  }
  .attachment img { width: 2.25rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xs); }

  /* ---------- Painel de detalhes ---------- */
  .details {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--surface);
    border-inline-start: 1px solid var(--line);
  }
  .details__section { padding: var(--sp-4); border-bottom: 1px solid var(--line); }
  .details__section h4 {
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: var(--sp-3);
  }

  .kv { display: grid; gap: var(--sp-2); }
  .kv > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-2); font-size: var(--fs-sm); }
  .kv dt { color: var(--text-3); }
  .kv dd { color: var(--text); overflow-wrap: anywhere; }

  /* ---------- Modal ---------- */
  dialog.modal {
    margin: auto;
    width: min(var(--modal-w, 32rem), calc(100vw - 2rem));
    max-height: calc(100dvh - 4rem);
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-4);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;

    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition:
      opacity var(--t-base) var(--e-out),
      transform var(--t-base) var(--e-spring),
      overlay var(--t-base) allow-discrete,
      display var(--t-base) allow-discrete;
  }

  dialog.modal[open] { opacity: 1; transform: none; }

  /* Estado inicial da animacao de abertura (elemento "discreto"). */
  @starting-style {
    dialog.modal[open] { opacity: 0; transform: translateY(12px) scale(0.97); }
  }

  dialog.modal::backdrop {
    background: var(--overlay);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition:
      opacity var(--t-base) var(--e-out),
      overlay var(--t-base) allow-discrete,
      display var(--t-base) allow-discrete;
  }
  dialog.modal[open]::backdrop { opacity: 1; }
  @starting-style { dialog.modal[open]::backdrop { opacity: 0; } }

  .modal__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
  }
  .modal__head h3 { font-size: var(--fs-lg); }
  .modal__body { padding: var(--sp-5); overflow-y: auto; }
  .modal__foot {
    display: flex; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--line);
    background: var(--surface-2);
  }

  .modal--wide { --modal-w: 46rem; }
  .modal--narrow { --modal-w: 24rem; }

  /* ---------- Popover / menu suspenso ---------- */
  [popover] {
    position: absolute;
    margin: 0;
    padding: var(--sp-1);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--sh-3);
    min-width: 11rem;
    inset: auto;

    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transition:
      opacity var(--t-fast) var(--e-out),
      transform var(--t-fast) var(--e-spring),
      overlay var(--t-fast) allow-discrete,
      display var(--t-fast) allow-discrete;
  }

  [popover]:popover-open { opacity: 1; transform: none; }

  @starting-style {
    [popover]:popover-open { opacity: 0; transform: translateY(-6px) scale(0.98); }
  }

  .menu-item {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: var(--r-xs);
    font-size: var(--fs-base);
    color: var(--text-2);
    text-align: start;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .menu-item:hover { background: var(--surface-2); color: var(--text); }
  .menu-item svg { width: 16px; height: 16px; }
  .menu-item--danger { color: var(--danger); }
  .menu-item--danger:hover { background: var(--danger-soft); }
  .menu-sep { height: 1px; margin: var(--sp-1) 0; background: var(--line); }

  /* ---------- Toast ---------- */
  .toasts {
    position: fixed;
    inset-block-end: var(--sp-5);
    inset-inline-end: var(--sp-5);
    z-index: 100;
    display: grid;
    gap: var(--sp-2);
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
  }

  .toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--brand);
    box-shadow: var(--sh-3);
    pointer-events: auto;
    animation: toast-in 380ms var(--e-spring) both;
  }
  .toast[data-leaving="true"] { animation: toast-out 200ms var(--e-in) both; }
  .toast--ok { border-inline-start-color: var(--ok); }
  .toast--danger { border-inline-start-color: var(--danger); }
  .toast--warn { border-inline-start-color: var(--warn); }
  .toast__body { display: grid; gap: 1px; font-size: var(--fs-sm); }
  .toast__body strong { font-size: var(--fs-base); font-weight: 600; }
  .toast__close { margin-inline-start: auto; color: var(--text-3); }

  /* ---------- Alerta em bloco ---------- */
  .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    border: 1px solid transparent;
  }
  .alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
  .alert--info { background: var(--info-soft); border-color: color-mix(in oklab, var(--info) 25%, transparent); color: color-mix(in oklab, var(--info) 70%, var(--text)); }
  .alert--ok { background: var(--ok-soft); border-color: color-mix(in oklab, var(--ok) 25%, transparent); color: color-mix(in oklab, var(--ok) 70%, var(--text)); }
  .alert--warn { background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn) 30%, transparent); color: color-mix(in oklab, var(--warn) 62%, var(--text)); }
  .alert--danger { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 25%, transparent); color: color-mix(in oklab, var(--danger) 72%, var(--text)); }

  /* ---------- Tabela ---------- */
  .table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
  .table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
  .table th {
    padding: var(--sp-3) var(--sp-4);
    text-align: start;
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid color-mix(in oklab, var(--line) 65%, transparent); vertical-align: middle; }
  .table tbody tr { transition: background var(--t-fast); }
  .table tbody tr:hover { background: var(--surface-2); }
  .table tbody tr:last-child td { border-bottom: none; }
  .table__actions { display: flex; gap: var(--sp-1); justify-content: flex-end; }

  /* ---------- Vazio / carregando ---------- */
  .empty {
    display: grid;
    place-items: center;
    gap: var(--sp-3);
    padding: var(--sp-12) var(--sp-5);
    text-align: center;
    color: var(--text-2);
  }
  .empty__icon {
    display: grid; place-items: center;
    width: 3.5rem; aspect-ratio: 1;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    color: var(--text-3);
  }
  .empty h3 { font-size: var(--fs-md); color: var(--text); }
  .empty p { font-size: var(--fs-sm); max-width: 28rem; }

  .skeleton {
    border-radius: var(--r-sm);
    background: linear-gradient(
      90deg,
      var(--surface-2) 25%,
      var(--surface-3) 50%,
      var(--surface-2) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
  }
  .skeleton--text { height: 0.75rem; }
  .skeleton--avatar { width: 2.5rem; aspect-ratio: 1; border-radius: 50%; }

  /* ---------- Diversos ---------- */
  .chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: color-mix(in oklab, var(--chip) 18%, transparent);
    color: color-mix(in oklab, var(--chip) 72%, var(--text));
    border: 1px solid color-mix(in oklab, var(--chip) 30%, transparent);
  }

  .segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-inset); border-radius: var(--r-sm); }
  .segmented button {
    padding: 0.3rem 0.7rem;
    border-radius: var(--r-xs);
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--text-2);
    transition: background var(--t-fast), color var(--t-fast);
  }
  .segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

  .divider { height: 1px; background: var(--line); border: none; margin-block: var(--sp-4); }

  kbd {
    padding: 0.1rem 0.35rem;
    border-radius: var(--r-xs);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    background: var(--surface-2);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-2);
  }

  .progress {
    height: 6px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    overflow: hidden;
  }
  .progress > i {
    display: block;
    height: 100%;
    width: var(--value, 0%);
    border-radius: inherit;
    background: var(--brand);
    transition: width var(--t-slow) var(--e-out);
  }

  /* Visualizador de imagem em tela cheia */
  .lightbox { background: oklch(8% 0 0 / 0.92); display: grid; place-items: center; }
  .lightbox img { max-width: 92vw; max-height: 88dvh; border-radius: var(--r-md); box-shadow: var(--sh-4); }
}

/* =============================================================================
   UTILITARIOS
   ========================================================================== */
@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .flex { display: flex; }
  .grid { display: grid; }
  .hidden { display: none !important; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-between { justify-content: space-between; }
  .justify-end { justify-content: flex-end; }
  .flex-1 { flex: 1; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-col { flex-direction: column; }
  .ml-auto { margin-inline-start: auto; }
  .w-full { width: 100%; }
  .text-center { text-align: center; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
  .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
  .gap-5 { gap: var(--sp-5); } .gap-6 { gap: var(--sp-6); }

  .mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); }
  .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); }

  .text-xs { font-size: var(--fs-xs); }
  .text-sm { font-size: var(--fs-sm); }
  .text-lg { font-size: var(--fs-lg); }
  .muted { color: var(--text-2); }
  .muted-2 { color: var(--text-3); }
  .strong { font-weight: 650; }
  .mono { font-family: var(--mono); font-size: 0.85em; }
  .nowrap { white-space: nowrap; }
  .tabular { font-variant-numeric: tabular-nums; }

  .c-ok { color: var(--ok); } .c-danger { color: var(--danger); }
  .c-warn { color: var(--warn); } .c-brand { color: var(--brand); }

  .cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--sp-4); }

  @media (width < 700px) { .cols-2 { grid-template-columns: 1fr; } }
}

/* =============================================================================
   ANIMACOES
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(24px) scale(0.96); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

@keyframes highlight {
  from { background: color-mix(in oklab, var(--brand) 22%, transparent); }
  to { background: transparent; }
}

.is-highlighted { animation: highlight 1.6s var(--e-out) both; }

/* Impressao: apenas o conteúdo. */
@media print {
  .sidebar, .topbar, .composer, .details, .toasts { display: none !important; }
  .app { grid-template-columns: 1fr; }
  body { background: white; color: black; }
}