/* ============================================================================
 * claudehub — chat enhancements (overlay)
 * Alvo: console web claudecode.rafaeltondin.com.br (projeto EasyPanel "claudehub")
 * Estratégia: camada de refino APENAS da conversa com o agente. Não toca no
 *   bundle minificado — carrega por cima e vence a cascata via @layer dedicada,
 *   sem !important nem guerra de especificidade.
 * Sistema: reusa a escala Fibonacci (--fib-*), os raios (--r-*) e os tokens
 *   semânticos (--brand/--surface/--ink/--line…) já definidos pelo app.
 *   Zero valor cru; propriedades lógicas; container-queries de componente.
 * Versão: 1.1.0  ·  2026-07-01
 * ==========================================================================*/

/* A camada entra por último na ordem da cascata → ganha do CSS do app sem
   precisar de !important. Se o app já declara @layer, esta soma no fim. */
@layer chatpp;

@layer chatpp {

  /* ----------------------------------------------------------------------
   * 0) Tokens locais — TODOS derivados dos tokens do app (não redefine os
   *    globais; só cria derivados de enhancement num escopo previsível).
   * -------------------------------------------------------------------- */
  :root {
    /* superfícies do chat derivadas das existentes */
    --chatpp-user-bg:      color-mix(in srgb, var(--brand) 14%, var(--surface-raised));
    --chatpp-user-border:  color-mix(in srgb, var(--brand) 34%, var(--line-strong));
    --chatpp-ai-accent:    color-mix(in srgb, var(--think) 60%, var(--brand));
    --chatpp-ai-rail:      color-mix(in srgb, var(--think) 40%, transparent);
    --chatpp-code-bg:      color-mix(in srgb, var(--c-void) 60%, var(--surface));
    --chatpp-scrim:        color-mix(in srgb, var(--bg) 88%, transparent);

    /* ritmo/curvas alinhados ao Fibonacci do app */
    --chatpp-gap:          var(--fib-13);
    --chatpp-pad-bubble-b: var(--fib-13);
    --chatpp-pad-bubble-i: var(--fib-21);
    --chatpp-ease:         var(--ease-out, cubic-bezier(.22,.61,.36,1));
    --chatpp-dur:          var(--dur, .18s);

    /* tipografia fluida só na conversa (com teto p/ a11y de zoom) */
    --chatpp-msg-size:     clamp(var(--text-sm, .875rem), .82rem + .30vw, var(--text-base, 1rem));
    --chatpp-msg-lh:       var(--leading-relaxed, 1.6);

    /* auto-grow do input: min/max em sintonia com o teto do JS (40vh) */
    --chatpp-input-min:    var(--fib-34);
    --chatpp-input-max:    40vh;
  }

  /* ----------------------------------------------------------------------
   * 1) Coluna da conversa — ritmo, rolagem suave, fade nas bordas
   * -------------------------------------------------------------------- */
  .canvas__inner {
    scroll-behavior: smooth;
    scroll-padding-block-end: var(--fib-89);
    container-type: inline-size;
    container-name: chatpp-thread;
  }
  @media (prefers-reduced-motion: reduce) {
    .canvas__inner { scroll-behavior: auto; }
  }

  .turn { gap: var(--chatpp-gap); scroll-margin-block: var(--fib-21); }

  /* entrada suave de cada turno novo */
  .turn { animation: chatpp-rise var(--chatpp-dur) var(--chatpp-ease) both; }
  @media (prefers-reduced-motion: reduce) {
    .turn { animation: none; }
  }
  @keyframes chatpp-rise {
    from { opacity: 0; translate: 0 var(--fib-8); }
    to   { opacity: 1; translate: 0 0; }
  }

  /* ----------------------------------------------------------------------
   * 2) Bolhas — legibilidade, distinção user × assistant, código, links
   * -------------------------------------------------------------------- */
  .bubble {
    font-size: var(--chatpp-msg-size);
    line-height: var(--chatpp-msg-lh);
    padding-block: var(--chatpp-pad-bubble-b);
    padding-inline: var(--chatpp-pad-bubble-i);
    box-shadow: var(--shadow-s, 0 1px 2px rgba(0,0,0,.3));
    overflow-wrap: anywhere;              /* nunca estoura em URLs longas */
    hyphens: auto;
  }

  /* bolha do usuário: leve tom de marca + cauda à direita */
  .turn--user .bubble {
    background: var(--chatpp-user-bg);
    border-color: var(--chatpp-user-border);
    border-end-end-radius: var(--r-5);
  }

  /* bolha do assistente: trilho de acento à esquerda (identidade do agente) */
  .turn:not(.turn--user) .bubble {
    position: relative;
    border-inline-start: var(--fib-2) solid var(--chatpp-ai-rail);
  }

  /* ênfase tipográfica dentro da resposta */
  .bubble strong { color: var(--ink); font-weight: 650; }
  .bubble a {
    color: var(--brand-soft);
    text-underline-offset: var(--fib-2);
    text-decoration-thickness: from-font;
  }
  .bubble a:hover { color: var(--brand); }

  /* listas e parágrafos com respiro Fibonacci */
  .bubble p + p,
  .bubble ul, .bubble ol { margin-block-start: var(--fib-8); }
  .bubble li + li { margin-block-start: var(--fib-3); }
  .bubble ul, .bubble ol { padding-inline-start: var(--fib-21); }

  /* código inline */
  .bubble :not(pre) > code {
    font-family: var(--font-mono);
    font-size: .92em;
    padding-block: var(--fib-1);
    padding-inline: var(--fib-3);
    border-radius: var(--r-5);
    background: var(--chatpp-code-bg);
    border: var(--fib-1) solid var(--line);
  }

  /* blocos de código: fundo, scroll horizontal contido, cabeçalho p/ copiar */
  .bubble pre {
    margin-block: var(--fib-8);
    padding: var(--fib-13);
    border-radius: var(--r-13);
    background: var(--chatpp-code-bg);
    border: var(--fib-1) solid var(--line-strong);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  .bubble pre code {
    font-family: var(--font-mono);
    font-size: var(--text-xs, .8rem);
    line-height: var(--leading-snug, 1.35);
  }
  /* botão "copiar" que o JS injeta no bloco de código */
  .chatpp-copy {
    position: absolute;
    inset-block-start: var(--fib-5);
    inset-inline-end: var(--fib-5);
    display: inline-flex;
    align-items: center;
    gap: var(--fib-2);
    padding-block: var(--fib-2);
    padding-inline: var(--fib-5);
    font-size: var(--text-2xs, .7rem);
    font-family: var(--font-ui);
    color: var(--ink-dim);
    background: var(--surface-raised);
    border: var(--fib-1) solid var(--line-strong);
    border-radius: var(--r-5);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast, .12s) var(--chatpp-ease),
                color var(--dur-fast, .12s) var(--chatpp-ease);
  }
  .chatpp-pre-wrap { position: relative; }
  .chatpp-pre-wrap:hover .chatpp-copy,
  .chatpp-copy:focus-visible { opacity: 1; }
  .chatpp-copy:hover { color: var(--ink); }
  .chatpp-copy[data-copied="1"] { color: var(--ok); }

  /* citações */
  .bubble blockquote {
    margin-block: var(--fib-8);
    padding-inline-start: var(--fib-13);
    border-inline-start: var(--fib-2) solid var(--line-strong);
    color: var(--ink-dim);
  }

  /* ----------------------------------------------------------------------
   * 3) Streaming — cursor pulsante enquanto o agente digita a resposta
   *    (JS marca .chatpp-streaming no .bubble em geração)
   * -------------------------------------------------------------------- */
  .bubble.chatpp-streaming::after {
    content: "";
    display: inline-block;
    inline-size: var(--fib-5);
    block-size: 1.1em;
    margin-inline-start: var(--fib-2);
    translate: 0 var(--fib-2);
    border-radius: var(--r-2, 2px);
    background: var(--chatpp-ai-accent);
    animation: chatpp-caret .9s steps(2, jump-none) infinite;
  }
  @keyframes chatpp-caret { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .bubble.chatpp-streaming::after { animation: none; opacity: .6; }
  }

  /* indicador "digitando" (3 pontos) — refino de brilho e ritmo */
  .typing span { background: var(--chatpp-ai-accent); }

  /* ----------------------------------------------------------------------
   * 4) Composer — foco, auto-grow suave, barra de meta (contador + dica)
   * -------------------------------------------------------------------- */
  .composer { gap: var(--fib-5); }

  .composer:focus-within {
    box-shadow: var(--shadow-md), 0 0 0 var(--fib-3) var(--brand-wash),
                var(--shadow-glow);
  }

  /* auto-grow: a altura é setada pelo JS; aqui garantimos limites e transição */
  .composer__input {
    min-block-size: var(--chatpp-input-min);
    max-block-size: var(--chatpp-input-max);
    field-sizing: content;                 /* progressive enhancement nativo  */
    transition: block-size var(--dur-fast, .12s) var(--chatpp-ease);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .composer__input::-webkit-scrollbar { inline-size: var(--fib-5); }
  .composer__input::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-8);
  }
  @media (prefers-reduced-motion: reduce) {
    .composer__input { transition: none; }
  }

  /* barra de meta que o JS injeta: contador de caracteres + dica de atalho */
  .chatpp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fib-8);
    padding-block-start: var(--fib-3);
    font-size: var(--text-2xs, .7rem);
    font-family: var(--font-ui);
    color: var(--ink-faint);
    user-select: none;
  }
  .chatpp-hint { display: inline-flex; align-items: center; gap: var(--fib-3); }
  .chatpp-kbd {
    font-family: var(--font-mono);
    font-size: .95em;
    padding-block: 0;
    padding-inline: var(--fib-3);
    border-radius: var(--r-5);
    background: var(--surface-raised);
    border: var(--fib-1) solid var(--line);
    color: var(--ink-dim);
  }
  .chatpp-count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .chatpp-count[data-warn="1"] { color: var(--brand-soft); }
  .chatpp-count[data-warn="2"] { color: var(--danger, #ff6b6b); }

  /* ----------------------------------------------------------------------
   * 5) Botão "rolar p/ o fim" — some quando já está no fim (JS controla)
   * -------------------------------------------------------------------- */
  .chatpp-scrolldown {
    position: absolute;
    inset-block-end: var(--fib-89);
    inset-inline-end: var(--fib-21);
    display: grid;
    place-items: center;
    inline-size: var(--fib-34);
    block-size: var(--fib-34);
    border-radius: var(--r-21, 50%);
    color: var(--ink);
    background: var(--surface-raised);
    border: var(--fib-1) solid var(--line-strong);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    translate: 0 var(--fib-8);
    pointer-events: none;
    transition: opacity var(--chatpp-dur) var(--chatpp-ease),
                translate var(--chatpp-dur) var(--chatpp-ease);
    z-index: 5;
  }
  .chatpp-scrolldown[data-show="1"] {
    opacity: 1; translate: 0 0; pointer-events: auto;
  }
  .chatpp-scrolldown:hover { border-color: var(--brand); color: var(--brand-soft); }
  .chatpp-scrolldown svg { inline-size: var(--fib-13); block-size: var(--fib-13); }

  /* ----------------------------------------------------------------------
   * 6) Responsividade DE COMPONENTE (container-query da thread)
   * -------------------------------------------------------------------- */
  @container chatpp-thread (inline-size < 34rem) {
    .bubble { max-inline-size: 92%; }
    .turn--user .bubble { max-inline-size: 92%; }
  }
  @container chatpp-thread (inline-size >= 60rem) {
    .bubble { max-inline-size: 70%; }
  }

  /* telas físicas pequenas: composer respira menos, dica encurta */
  @media (max-width: 480px) {
    .composer-dock { padding-inline: var(--fib-8); }
    .chatpp-hint   { display: none; }         /* mantém só o contador */
    .bubble        { padding-inline: var(--fib-13); }
  }

  /* ----------------------------------------------------------------------
   * 7) Acessibilidade & foco visível coerente com a marca
   * -------------------------------------------------------------------- */
  .chatpp-copy:focus-visible,
  .chatpp-scrolldown:focus-visible {
    outline: var(--fib-2) solid var(--brand);
    outline-offset: var(--fib-2);
  }
  @media (prefers-contrast: more) {
    .bubble { border-color: var(--line-strong); }
    .turn--user .bubble { border-color: var(--brand); }
  }
}


/* ============================================================================
 * chatpp v1.1.0 — markdown das respostas da IA (.prose)
 * Regras SEM @layer de propósito: precisam vencer regras unlayered do app
 * (o bundle carrega antes; este arquivo carrega depois → ganha por ordem).
 * O landmine `.prose{color:#000!important}` é neutralizado na fonte (main css).
 * Reusa tokens do app (--ink/--line/--brand*/--font-*/--fib-*/--r-*) e os
 * derivados --chatpp-* já definidos no overlay. Zero valor cru.
 * ==========================================================================*/

.prose{
  font-size: var(--chatpp-msg-size, var(--text-base));
  line-height: var(--chatpp-msg-lh, var(--leading-body, 1.6));
  color: var(--ink);
  overflow-wrap: anywhere;
}
.prose > * + *{ margin-block-start: var(--fib-8); }

/* títulos */
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{
  font-family: var(--font-display);
  line-height: var(--leading-snug, 1.25);
  color: var(--ink);
  margin-block-start: var(--fib-21);
  margin-block-end: 0;
}
.prose h1{ font-size: var(--text-lg); }
.prose h2{ font-size: var(--text-md); }
.prose h3{ font-size: var(--text-base); }
.prose h4,.prose h5,.prose h6{ font-size: var(--text-sm); color: var(--ink-dim); }

/* ênfase e links */
.prose strong{ color: var(--ink); font-weight: 650; }
.prose em{ font-style: italic; }
.prose del{ color: var(--ink-dim); }
.prose a{
  color: var(--brand-soft);
  text-decoration: underline;
  text-underline-offset: var(--fib-2);
  text-decoration-thickness: from-font;
}
.prose a:hover{ color: var(--brand); }

/* listas */
.prose ul,.prose ol{ padding-inline-start: var(--fib-21); }
.prose li + li{ margin-block-start: var(--fib-3); }
.prose li > ul,.prose li > ol{ margin-block-start: var(--fib-3); }

/* código inline */
.prose :not(pre) > code{
  font-family: var(--font-mono);
  font-size: .92em;
  padding-block: var(--fib-1);
  padding-inline: var(--fib-3);
  border-radius: var(--r-5);
  background: var(--chatpp-code-bg);
  border: var(--fib-1) solid var(--line);
  color: var(--brand-soft);
  overflow-wrap: break-word;
}

/* blocos de código — as "caixas" pedidas */
.prose pre{
  position: relative;
  margin-block: var(--fib-8);
  padding: var(--fib-13);
  border-radius: var(--r-13);
  background: var(--chatpp-code-bg);
  border: var(--fib-1) solid var(--line-strong);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.prose pre code{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs, .8rem);
  line-height: var(--leading-snug, 1.4);
  white-space: pre;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
}
/* rótulo da linguagem no topo do bloco */
.prose pre[data-lang]{ padding-block-start: var(--fib-21); }
.prose pre[data-lang]::before{
  content: attr(data-lang);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-family: var(--font-ui);
  font-size: var(--text-2xs, .7rem);
  color: var(--ink-faint);
  padding-block: var(--fib-1);
  padding-inline: var(--fib-8);
  text-transform: lowercase;
  letter-spacing: .02em;
  border-end-end-radius: var(--r-5);
  background: color-mix(in srgb, var(--line) 40%, transparent);
}

/* citações */
.prose blockquote{
  margin-block: var(--fib-8);
  padding-inline-start: var(--fib-13);
  border-inline-start: var(--fib-2) solid var(--line-strong);
  color: var(--ink-dim);
}

/* régua */
.prose hr{
  border: 0;
  block-size: var(--fib-1);
  background: var(--line-strong);
  margin-block: var(--fib-21);
}

/* imagens */
.prose img{ max-inline-size: 100%; block-size: auto; border-radius: var(--r-8); }

/* tabelas */
.chatpp-tablewrap{ overflow-x: auto; margin-block: var(--fib-8); scrollbar-width: thin; }
.prose table{ border-collapse: collapse; inline-size: 100%; font-size: var(--text-sm); }
.prose th,.prose td{
  padding-block: var(--fib-3);
  padding-inline: var(--fib-8);
  border: var(--fib-1) solid var(--line);
  text-align: start;
}
.prose thead th{ background: var(--chatpp-code-bg); color: var(--ink); font-weight: 650; }

/* o botão "copiar" (injetado pelo JS) precisa de contexto posicional na .prose */
.prose .chatpp-pre-wrap{ position: relative; }