/* ============================================================================
 * claudehub — overlay 4a: composer (espaçamento padronizado + menu de "/")
 * Versão: 1.0.0
 * - Espaçamentos/margens do card do input via escala Fibonacci do app (--fib-*).
 * - Regras SEM @layer → vencem as camadas do bundle e do overlay chatpp sem
 *   precisar de !important nem valores crus.
 * ==========================================================================*/

/* Tokens locais derivados da escala Fibonacci já definida pelo app. */
:root {
  --cc-card-pad:  var(--fib-13);   /* respiro interno do card */
  --cc-gap:       var(--fib-8);    /* ritmo entre input e barra de ações */
  --cc-dock-x:    var(--fib-21);   /* margem lateral do card na página */
  --cc-dock-top:  var(--fib-8);
  --cc-dock-bot:  var(--fib-21);
}

/* ---- margens do card na página (dock sticky) ---- */
.composer-dock {
  padding: var(--cc-dock-top) var(--cc-dock-x) var(--cc-dock-bot);
}

/* ---- o card do input propriamente dito ---- */
.composer {
  padding: var(--cc-card-pad);
  gap: var(--cc-gap);
  border-radius: var(--r-21, var(--fib-21));
}

/* ---- a área de texto: padding interno consistente + alvo confortável ---- */
.composer__input {
  padding-block: var(--fib-3);
  padding-inline: var(--fib-2);
  min-block-size: var(--fib-34);
}

/* ---- linha de ações (anexos, enviar) com o mesmo ritmo ---- */
.composer__row {
  gap: var(--cc-gap);
  margin-block-start: var(--fib-2);
}
.composer__tools { gap: var(--fib-5); }

/* telas físicas pequenas: encolhe só a margem lateral, mantém o ritmo interno */
@media (max-width: 40rem) {
  .composer-dock { padding-inline: var(--fib-8); }
}

/* ==================== menu de "/" (minimalista) ====================== */
.cc-slash {
  position: fixed;
  z-index: 9999;
  min-inline-size: var(--fib-144, 11rem);
  max-inline-size: min(24rem, 90vw);
  max-block-size: 40vh;
  overflow-y: auto;
  padding: var(--fib-2);
  background: var(--surface-raised, var(--surface));
  border: var(--fib-1) solid var(--line, var(--line-strong));
  border-radius: var(--r-8, var(--fib-8));
  box-shadow: 0 6px 22px -6px rgba(0,0,0,.32);
  display: none;
  scrollbar-width: thin;
}
.cc-slash[data-show="1"] { display: block; }
.cc-slash__item {
  display: flex;
  align-items: baseline;
  gap: var(--fib-5);
  padding: var(--fib-3) var(--fib-5);
  border-radius: var(--r-5, var(--fib-5));
  cursor: pointer;
  color: var(--ink);
  transition: background-color var(--dur, .12s) var(--ease, ease);
}
.cc-slash__item[aria-selected="true"] { background: color-mix(in srgb, var(--brand, #6ea8fe) 16%, transparent); }
.cc-slash__item:hover { background: color-mix(in srgb, var(--brand, #6ea8fe) 10%, transparent); }
.cc-slash__name {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--text-sm, .84rem);
  color: var(--brand, var(--ink));
  font-weight: 600;
  white-space: nowrap;
}
.cc-slash__desc {
  font-size: var(--text-xs, .76rem);
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-slash__empty {
  padding: var(--fib-5) var(--fib-8);
  font-size: var(--text-xs, .78rem);
  color: var(--ink-faint, var(--ink-dim));
}
@media (prefers-reduced-motion: reduce) {
  .cc-slash__item { transition: none; }
}