/* Configuração da barra de ações junto da textarea de chat */

.kn2-action-bar {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 6px;
    padding: 2px 0;
    opacity: 0.35;
    transition: opacity 0.2s ease;
}
.kn2-action-bar:hover { opacity: 1; }
.kn2-ab-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 7px;
    cursor: pointer;
    color: var(--bs-secondary-color, #6c757d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    line-height: 1;
}
.kn2-ab-btn:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-color: var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color, #212529);
}
.kn2-ab-thumbup.kn2-active  { color: #198754; border-color: #198754; opacity: 1 !important; }
.kn2-ab-thumbdown.kn2-active { color: #dc3545; border-color: #dc3545; opacity: 1 !important; }
.kn2-action-bar.kn2-has-feedback { opacity: 0.7; }

/* Aviso de resposta gerada por IA, gerado junto de cada barra de ações
   (ver gerar_html_action_bar em intercept_stream.py). Nasce oculto
   (d-none); o script de gerar_js_observer_action_bar mantém visível apenas
   o mais recente da conversa. */
.kn2-ai-disclaimer {
    font-size: 0.85em;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 2px;
}



/* ===== Botão paperclip no footer do chat ===== */
/* Agora posicionado diretamente na barra .chat-attach-footer-toolbar
   dentro de .shiny-chat-footer — não mais absoluto dentro do input. */
.chat-attach-btn {
  background-color: transparent;
  color: var(--bs-secondary-color, #6c757d);
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 16px;
  border-radius: 6px;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-attach-btn:hover {
  color: var(--bs-primary, #007bc2);
}
.chat-attach-btn svg {
  width: 1.1em;
  height: 1.1em;
}

/* Barra do footer de anexos */
.shiny-chat-footer {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
  padding: 0;
}
.chat-attach-footer-toolbar {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  min-height: 36px;
  gap: 4px;
}

/* Ajuste do textarea para não precisar de padding-bottom extra
   (o botão não está mais dentro do input) */
.shiny-chat-input textarea {
  padding-right: 12px !important;
  overflow-y: auto !important;
}
/* Botão de envio */
.shiny-chat-input .shiny-chat-btn-send {
  z-index: 2 !important;
}


/* Cards pendentes renderizados dentro do footer, acima da barra de ferramentas */
.chat-attach-pending-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  background: var(--bs-body-bg, #fff);
  animation: fadeInUp 0.2s ease;
  max-height: 300px;
  overflow-y: auto;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Card individual de arquivo ===== */
.chat-attach-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 10px;
  padding: 6px 8px 6px 10px;
  min-width: 180px;
  max-width: 260px;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  transition: box-shadow 0.15s;
  animation: cardAppear 0.18s ease;
}
.chat-attach-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

@keyframes cardAppear {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Preview de imagem */
.chat-attach-card-preview {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Ícone de arquivo genérico */
.chat-attach-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-light, #f8f9fa);
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 1.4em;
}

/* Corpo do card */
.chat-attach-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-attach-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-attach-card-name {
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--bs-body-color, #212529);
}

.chat-attach-card-size {
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Botões de ação */
.chat-attach-card-actions {
  display: flex;
  gap: 0;
  margin-top: 2px;
}

.chat-attach-card-btn {
  padding: 0 4px !important;
  line-height: 1 !important;
  color: var(--bs-secondary-color, #6c757d) !important;
  opacity: 0.7;
  transition: opacity 0.1s, color 0.1s !important;
}
.chat-attach-card-btn:hover { opacity: 1; }
.chat-attach-card-btn-download:hover { color: var(--bs-primary, #0d6efd) !important; }
.chat-attach-card-btn-remove:hover { color: var(--bs-danger, #dc3545) !important; }
.chat-attach-card-btn svg { width: 0.8em; height: 0.8em; }

/* ===== Cards exibidos dentro da mensagem enviada ===== */
.chat-attach-sent-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.chat-attach-sent-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(13, 110, 253, 0.08);
  border: 1px solid rgba(13, 110, 253, 0.2);
  border-radius: 8px;
  padding: 4px 10px 4px 8px;
  font-size: 0.78rem;
  color: var(--bs-body-color, #212529);
  max-width: 220px;
  cursor: default;
  user-select: none;
}
.chat-attach-sent-card svg {
  width: 0.9em;
  height: 0.9em;
  color: var(--bs-primary, #0d6efd);
  flex-shrink: 0;
}
.chat-attach-sent-card-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.shiny-chat-input .tiptap,
.shiny-chat-input textarea {
  min-height: 100px !important;
}

/* Tamanho da letra dos inputs e outputs do chat (usuário e LLM) */
.shiny-chat-input .tiptap,
.shiny-chat-input textarea,
.shiny-chat-messages .shiny-chat-message-content,
.kn2_conteudo_artefato p, table {
  font-size: 1.1rem;
}

/* Adicionando padding ao conteúdo das mensagens do chat */
.shiny-chat-message .shiny-chat-message-content {
  padding-right: 1rem !important;
}

/* ===== Espaçamento dos objetos interativos (gráficos, mapas, tabelas etc.) =====
   Envolve o placeholder retornado por BaseRenderer.output_page (ver
   ToolsPersonalizadas.py) para afastá-lo do texto gerado pelo LLM ao redor,
   já que ambos são inseridos como irmãos diretos dentro do mesmo
   shiny-chat-message-content / shiny-markdown-stream. */
:root {
  --kn2-obj-interativo-spacing: 1rem;
}
.kn2-obj-interativo {
  display: block;
  margin-top: var(--kn2-obj-interativo-spacing);
  margin-bottom: var(--kn2-obj-interativo-spacing);
}

/* Aparência moderna da tabela do DataFrameRenderer (render.DataGrid) */
.data_frame_obj_interativo shiny-data-frame {
  --shiny-datagrid-font-size: 1rem;
  --shiny-datagrid-padding-x: 0.75em;
  --shiny-datagrid-padding-y: 0.55em;
  --shiny-datagrid-grid-header-bgcolor: var(--bs-tertiary-bg, #f3f5f7);
  --shiny-datagrid-grid-header-gridlines-color: transparent;
  --shiny-datagrid-grid-gridlines-color: var(--bs-border-color-translucent, #e9ecef);
  --shiny-datagrid-grid-body-hover-bgcolor: var(--bs-primary-bg-subtle, #e7f3fb);
}

/* Linha de destaque separando o cabeçalho (labels + filtros) do corpo da
   tabela. As variáveis --shiny-datagrid-table-*-border só têm efeito no
   style="table" (DataTable); render.DataGrid usa style="grid", por isso a
   borda é aplicada diretamente na última linha do <thead>. */
.data_frame_obj_interativo shiny-data-frame .shiny-data-grid.shiny-data-grid-grid > table > thead > tr:last-child > th {
  border-bottom: 2px solid var(--bs-primary, #007bc2) !important;
}

/* Cartão com cantos arredondados e sombra leve envolvendo a tabela */
.data_frame_obj_interativo .shiny-data-grid {
  border: 1px solid var(--bs-border-color-translucent, #e9ecef);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

/* Cabeçalho: texto em destaque, sem bordas verticais */
.data_frame_obj_interativo shiny-data-frame .shiny-data-grid > table > thead > tr > th {
  font-weight: 600;
  border-left-style: none !important;
  border-right-style: none !important;
}

/* Remove as bordas verticais entre células (estética "flat", só linhas horizontais) */
.data_frame_obj_interativo shiny-data-frame .shiny-data-grid > table > tbody > tr > td {
  border-left-style: none !important;
  border-right-style: none !important;
}

/* Zebra striping para facilitar a leitura de linhas longas */
.data_frame_obj_interativo shiny-data-frame .shiny-data-grid > table > tbody > tr:nth-child(even) > td {
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}
.data_frame_obj_interativo shiny-data-frame .shiny-data-grid > table > tbody > tr:hover > td {
  background-color: var(--shiny-datagrid-grid-body-hover-bgcolor);
}

/* Transição suave no hover das linhas */
.data_frame_obj_interativo shiny-data-frame .shiny-data-grid > table > tbody > tr > td {
  transition: background-color 0.12s ease-in-out;
}

/* Campos de filtro (linha abaixo do cabeçalho): visual mais discreto e arredondado */
.data_frame_obj_interativo shiny-data-frame .shiny-data-grid > table > thead > tr.filters > th input {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  padding: 0.25em 0.5em;
  font-size: 0.9em;
  font-weight: 400;
}