/* cmdk.css — estilos da paleta ⌘K (injetada dentro do .chat-modal)
 *
 * O .cmdk-input-wrap e .cmdk-footer são injetados pelo cmdk.js dentro
 * do .chat-modal. Em cmdk-mode são visíveis. Fora de cmdk-mode,
 * colapsam com transição CSS.
 *
 * O .chat-modal em cmdk-mode ganha dimensões e posição do cmdk antigo
 * (mais largo, mais pra cima) via overrides CSS.
 */

/* ════════════════════════════════════════════
   .chat-modal overrides em cmdk-mode
   Dimensões e posição do cmdk antigo
   ════════════════════════════════════════════ */
/* cmdk-mode: posicionamento via fixed+transform (igual cmdk antigo, sem flex) */
.au-chat.mode-lobby.cmdk-mode .chat-modal {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(840px, calc(100vw - 24px));
  max-height: min(490px, calc(100vh - 120px));
  height: auto;
  margin: 0;
}

/* ════════════════════════════════════════════
   .cmdk-input-wrap — barra de busca no topo
   ════════════════════════════════════════════ */
.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--au-line);
  /* Transição para colapsar quando sai de cmdk-mode */
  transition:
    height .3s cubic-bezier(.2,.8,.2,1),
    opacity .22s ease,
    padding .3s cubic-bezier(.2,.8,.2,1),
    border-bottom-color .22s ease;
  overflow: hidden;
  box-sizing: border-box;
}
.cmdk-input-wrap svg {
  width: 16px; height: 16px;
  stroke: var(--au-ink-400);
  stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
}
.cmdk-input-wrap .cmdk-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--au-ink-900);
  background: transparent;
}
.cmdk-input-wrap .cmdk-input::placeholder { color: var(--au-ink-400); }

.cmdk-esc {
  font-size: 10.5px;
  color: var(--au-ink-400);
  padding: 2px 6px;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius-sm);
  font-family: var(--au-font-mono);
  flex-shrink: 0;
}

/* Fora de cmdk-mode: input-wrap colapsado */
.au-chat:not(.cmdk-mode) .cmdk-input-wrap {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  border-bottom-color: transparent;
  pointer-events: none;
}

/* ════════════════════════════════════════════
   .cmdk-footer — rodapé com dicas de teclado
   ════════════════════════════════════════════ */
.cmdk-footer {
  padding: 8px 18px;
  border-top: 1px solid var(--au-line);
  background: var(--au-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--au-ink-500);
  flex-shrink: 0;
  /* Transição para colapsar quando sai de cmdk-mode */
  transition:
    height .3s cubic-bezier(.2,.8,.2,1),
    opacity .22s ease,
    padding .3s cubic-bezier(.2,.8,.2,1),
    border-top-color .22s ease;
  overflow: hidden;
  box-sizing: border-box;
}
.cmdk-footer-left {
  display: flex; gap: 12px;
}
.cmdk-footer-hints {
  display: flex; gap: 12px;
}
.cmdk-footer kbd {
  font-family: var(--au-font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius-sm);
  background: var(--au-bg-panel);
  color: var(--au-ink-700);
  margin-right: 3px;
}

/* Fora de cmdk-mode: footer colapsado */
.au-chat:not(.cmdk-mode) .cmdk-footer {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  border-top-color: transparent;
  pointer-events: none;
}