:root {
  color-scheme: dark light;
  --bg: #212121;
  --sidebar-bg: #171717;
  --card-bg: #2f2f2f;
  --border: #3f3f3f;
  --accent: #2f6f4f;
  --accent-strong: #3b8a63;
  --text: #ececec;
  --text-secondary: #9b9b9b;
  --success-text: #5fbb86;
  --danger: #e05252;
  --hover-bg: rgba(255, 255, 255, 0.06);
  --active-bg: rgba(255, 255, 255, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f7f5;
    --sidebar-bg: #ececea;
    --card-bg: #ffffff;
    --border: #ddd;
    --text: #222;
    --text-secondary: #666;
    --success-text: #1e5c1e;
    --danger: #b23;
    --hover-bg: rgba(0, 0, 0, 0.05);
    --active-bg: rgba(0, 0, 0, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.08);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Ecrã de entrada: título centrado que se desfaz para revelar a sidebar e o
   chat por trás. --splash-reveal-ms tem de bater certo com SPLASH_REVEAL_DELAY_MS
   em app.js, que usa o mesmo atraso no primeiro conjunto de cartões renderizado. */
:root {
  --splash-reveal-ms: 800ms;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  animation: splash-fade 0.7s ease var(--splash-reveal-ms) forwards;
}

.splash-title {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  animation: splash-shrink 0.7s ease var(--splash-reveal-ms) forwards;
}

@keyframes splash-fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes splash-shrink {
  to {
    opacity: 0;
    transform: scale(0.75) translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
}

/* ---------- layout: sidebar + main area ---------- */

.app-shell {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem;
  overflow-y: auto;
  min-height: 0;
  animation: fadeIn 0.4s ease var(--splash-reveal-ms) both;
}

.sidebar-header {
  padding: 0.4rem 0.5rem 1.25rem;
}

.sidebar-header h1 {
  font-size: 1.4rem;
}

.sidebar-header .badge.switch {
  display: inline-block;
  margin-top: 0.6rem;
}

.sidebar-footer {
  margin-top: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.accounts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.view-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---------- headings ---------- */

h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Cabeçalho de secção com uma ação secundária alinhada à direita do título
   (ex: "Ver gasto detalhado" ao lado de "Auditoria") — sem isto, `.section-title`
   sozinho não deixa espaço para mais nada na mesma linha. */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.section-icon {
  font-size: 1.05rem;
}

/* ---------- sidebar navigation ---------- */

.tabs {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  opacity: 0.75;
  font-weight: 500;
  cursor: pointer;
  align-self: stretch;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.tab-icon {
  font-size: 1.05rem;
}

.tabs .tab-btn:hover {
  opacity: 1;
  background: var(--hover-bg);
}

.tabs .tab-btn.active {
  opacity: 1;
  font-weight: 600;
  background: var(--active-bg);
}

.mailbox-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.mailbox-controls label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.mailbox-controls select {
  width: auto;
}

.clear-history-btn {
  margin-left: auto;
  background: var(--danger);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.timestamp {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.badge {
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  font-size: 0.85rem;
  line-height: 1.35;
  text-decoration: none;
  display: inline-block;
}

.badge.connected {
  background: rgba(95, 187, 134, 0.15);
  color: var(--success-text);
}

.badge.disconnected {
  background: rgba(224, 82, 82, 0.15);
  color: var(--danger);
}

.badge.switch {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* Indicador "Automação" na barra lateral (ver #automation-status em app.js) —
   reaproveita as mesmas cores de badge.connected/disconnected: verde quando os dois
   ciclos em segundo plano estão desligados (estado seguro, mesmo tom de "conta
   ligada"), vermelho quando algum está ativo (precisa de atenção, mesmo tom de
   "conta desligada") — mesmo com isso a nunca executar nada sozinho, só criar
   ações pendentes. */
.badge.automation-on {
  background: rgba(224, 82, 82, 0.15);
  color: var(--danger);
}

/* ---------- composer (caixa de texto em baixo) ---------- */

.input-section {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  flex-shrink: 0;
  padding: 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: fadeInUp 0.4s ease var(--splash-reveal-ms) both;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.composer:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 79, 0.25);
}

.composer #summary {
  border: none;
  background: transparent;
  padding: 0.4rem 0;
  max-height: 200px;
  resize: none;
  overflow-y: auto;
}

.composer #summary:focus {
  outline: none;
}

.composer-send {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 1.1rem;
  line-height: 1;
}

.mailbox-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: fadeInUp 0.4s ease both;
}

.input-section[hidden],
.chat-input-section[hidden],
.mailbox-section[hidden],
.chat-section[hidden],
.chat-typing[hidden],
.settings-section[hidden],
.planner-watch-section[hidden],
.audit-section[hidden],
.actions[hidden],
.skeleton[hidden],
.batch-bar[hidden],
.history-filters[hidden],
.tasks-bulk-bar[hidden],
.modal-overlay[hidden],
.settings-form[hidden],
.settings-tab-panel[hidden],
.settings-subsection[hidden] {
  display: none;
}

/* ---------- separador Configuração ---------- */

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
  animation: fadeInUp 0.4s ease both;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.settings-checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.settings-checkbox-label input[type="checkbox"] {
  width: auto;
}

.settings-hint {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 400;
}

.settings-range-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settings-range-row input[type="range"] {
  flex: 1;
  width: auto;
  padding: 0;
}

.settings-range-value {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.settings-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* Cabeçalho do separador "Personalidade" (dentro de #settings-form) — nome +
   botão "Guardar personalidade", movido para aqui a pedido do utilizador: guardar
   uma personalidade nova acontece sempre a partir de onde ela é composta, nunca
   do separador "Personalidades guardadas" (que passou a servir só para aplicar
   uma já existente). */
.settings-panel-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.settings-panel-header input {
  flex: 1;
}

.settings-panel-header button {
  flex-shrink: 0;
}

.usage-estimate-summary {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Bloco do relatório periódico de gasto (separador Auditoria), no topo da secção
   (a seguir ao cabeçalho, antes da lista de auditoria) — separador por baixo em
   vez de por cima, ao contrário de quando este bloco vivia no fundo da secção. */
.usage-report-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  max-width: 680px;
}

/* Bloco genérico de subsecção no separador Configuração (personalidades
   guardadas, templates do ciclo do Planner) — cada um é agora um separador
   horizontal próprio (.settings-tab-panel abaixo), por isso já não precisa de
   margem/risca a separá-lo de um formulário que, quando este está visível, está
   sempre escondido. */
.settings-subsection {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 680px;
}

/* Separadores horizontais dentro do próprio separador Configuração ("Modelo e
   comportamento", "Personalidade", "Automação", "Personalidades guardadas",
   "Mensagens do Planner") — substituem os cabeçalhos verticais de uma iteração
   anterior: em vez de tudo visível ao mesmo tempo com títulos a separar grupos,
   só um grupo fica visível de cada vez (.settings-tab-panel[hidden] abaixo),
   escolhido por estes botões. */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-tab-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.settings-tab-btn:hover {
  color: var(--text);
}

.settings-tab-btn.active {
  background: var(--active-bg);
  color: var(--text);
  border-color: var(--accent-strong);
}

.settings-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.personality-preset-apply-btn {
  flex-shrink: 0;
}

/* Envolve .planner-watch-rule (linha existente, inalterada) + o detalhe
   expansível por baixo (quando aberto) — coluna em vez de linha, para o
   detalhe ficar a toda a largura sem partir o layout de .planner-watch-rule
   partilhado com o separador Equipas. */
.personality-preset-item {
  display: flex;
  flex-direction: column;
}

.personality-preset-name-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-weight: 600;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  align-self: flex-start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Especificidade (0,3,0) de propósito, para vencer a regra genérica
   button:hover:not(:disabled) (0,2,1) — mesmo critério já usado em
   .tabs .tab-btn:hover, sem isto o hover pintava o botão com a cor de
   destaque genérica em vez de só sublinhar o texto. */
.personality-preset-item .personality-preset-name-btn:hover {
  text-decoration: underline;
  background: none;
}

/* "Basicamente todas as informações" da personalidade guardada (texto
   completo, não só o indicador "+ instruções adicionais"/"+ limites" da linha
   de cima) — a pedido do utilizador, ao clicar no nome. */
.personality-preset-detail {
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--hover-bg);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.personality-preset-detail p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.usage-estimate-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

.usage-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  /* Sem scroll/max-height próprios de propósito — a pedido do utilizador,
     depois de duas iterações com um scroll interno separado do resto do
     modal (confuso: passar o rato por cima da tabela rolava só a tabela, não
     a página). A tabela estica para a sua altura natural (todas as linhas) e
     é sempre o único scroll do `.modal` (overflow-y:auto) que rola tudo —
     resumo, gráficos e tabela — de uma vez só. `flex-shrink: 0` garante que
     o layout flex-column do `.modal` nunca a comprime abaixo dessa altura
     natural (chegou a acontecer quando ainda tinha max-height, ver histórico
     de commits). */
  flex-shrink: 0;
}

.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: fixed;
}

.usage-table th,
.usage-table td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  overflow-wrap: break-word;
}

.usage-table thead th {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  color: var(--text);
  font-weight: 600;
}

.usage-table tbody td {
  color: var(--text);
}

.usage-table tbody tr:nth-child(even) {
  background: var(--hover-bg);
}

.usage-table tbody tr:hover {
  background: var(--active-bg);
}

/* Quando/Tokens/Custo não quebram — datas e números curtos e de formato fixo,
   uma quebra a meio ficava impossível de ler. Modelo/Canal NÃO estão aqui
   (ao contrário de uma versão anterior): rótulos como "Claude Sonnet 4.6" ou
   "Extração manual (Web)" são mais largos do que a coluna (13%/11%) permite
   sem quebrar — com `nowrap`, esse texto transbordava por cima da coluna
   Ação(ões) a seguir, sobrepondo-se ao texto dela (exatamente o "letras
   desencaixadas" reportado pelo utilizador, confirmado a medir
   scrollWidth > clientWidth nessas células). Sem `nowrap`, quebram como
   Ação(ões) já quebrava — mesmo critério, texto sempre completo e legível,
   nunca cortado/sobreposto. */
.usage-table th:nth-child(1),
.usage-table td:nth-child(1),
.usage-table th:nth-child(5),
.usage-table td:nth-child(5),
.usage-table th:nth-child(6),
.usage-table td:nth-child(6) {
  white-space: nowrap;
}

.usage-table td:nth-child(5),
.usage-table td:nth-child(6) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* `table-layout: fixed` com larguras percentuais fixas por coluna — para a
   tabela caber sempre na largura do modal sem scroll horizontal, mesmo com
   `table-layout: fixed`. Ação(ões) fica com mais espaço (pode ter uma lista de
   vários rótulos) e simplesmente quebra linha (`overflow-wrap: break-word` na
   regra geral acima) em vez de truncar com reticências — para se ver sempre o
   texto completo, ao preço de linhas mais altas quando a lista é longa. */
.usage-table th:nth-child(1) {
  width: 15%;
}
.usage-table th:nth-child(2) {
  width: 13%;
}
.usage-table th:nth-child(3) {
  width: 11%;
}
.usage-table th:nth-child(4) {
  width: 36%;
}
.usage-table th:nth-child(5) {
  width: 12%;
}
.usage-table th:nth-child(6) {
  width: 13%;
}

/* ---------- modal de edição de templates (separador Configuração) ---------- */

/* Enquanto o modal está aberto (classe aplicada ao body por openTemplateModal/
   closeTemplateModal em app.js), impede o scroll dos dois contentores internos com
   overflow próprio — o overlay é fixed e cobre o ecrã todo, mas isso sozinho não
   impede o scroll (roda do rato/trackpad) de continuar a "cair" em .sidebar/
   .view-scroll por trás. */
body.modal-open .sidebar,
body.modal-open .view-scroll {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 100;
}

.modal {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal textarea {
  resize: vertical;
}

/* ---------- popup de gasto na API Anthropic (separador Configuração) ---------- */

.usage-modal {
  max-width: 860px;
}

.usage-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.usage-chart-block h4 {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text-secondary);
}

.usage-bar-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.usage-bar-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.usage-bar-label {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-bar-track {
  background: var(--border);
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  background: var(--accent-strong);
  border-radius: 4px;
}

.usage-bar-value {
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.usage-daily-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding-top: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.usage-daily-row {
  flex: 1;
  min-width: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.usage-daily-bar {
  width: 100%;
  max-width: 14px;
  background: var(--accent-strong);
  border-radius: 3px 3px 0 0;
}

.usage-daily-label {
  margin-top: 0.3rem;
  font-size: 0.62rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.settings-reset-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

/* ---------- separador Equipas ---------- */

.planner-watch-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 560px;
  animation: fadeInUp 0.4s ease both;
}

.planner-watch-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.planner-watch-rule {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.planner-watch-rule.disabled {
  opacity: 0.5;
}

.planner-watch-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.planner-watch-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-watch-info span {
  color: var(--text-secondary);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-watch-delete-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  padding: 0.35rem 0.6rem;
}

.planner-watch-empty {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ---------- separador Auditoria ---------- */

.audit-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 720px;
  animation: fadeInUp 0.4s ease both;
}

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.audit-entry {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
}

.audit-entry-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-weight: 600;
}

.audit-event-criar {
  color: var(--text-secondary);
}

.audit-event-confirmar {
  color: var(--success-text);
}

.audit-event-rejeitar {
  color: var(--danger);
}

.audit-event-confirmar_remetente {
  color: #5b9bd5;
}

.audit-timestamp {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 0.78rem;
  margin-left: auto;
}

.audit-entry-meta {
  color: var(--text-secondary);
  font-size: 0.78rem;
  margin-top: 0.35rem;
  line-height: 1.5;
}

.audit-entry-trigger {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-style: italic;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
  line-height: 1.5;
}

.audit-empty {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ---------- separador Chat ---------- */

.chat-input-section {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  flex-shrink: 0;
  padding: 0 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  animation: fadeInUp 0.4s ease var(--splash-reveal-ms) both;
}

.chat-input-section .composer #chat-input {
  border: none;
  background: transparent;
  padding: 0.4rem 0;
  max-height: 200px;
  resize: none;
  overflow-y: auto;
}

.chat-input-section .composer #chat-input:focus {
  outline: none;
}

.chat-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  animation: fadeInUp 0.4s ease both;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chat-message {
  max-width: 80%;
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  animation: fadeInUp 0.25s ease both;
}

/* A mensagem do utilizador é só texto alinhado à direita — o balão de fala
   (caixa com fundo e cantos arredondados) fica reservado para quando é o
   Ramiro a falar, não para o que a pessoa escreveu. */
.chat-message.role-user {
  align-self: flex-end;
  color: var(--text);
  font-weight: 500;
}

.chat-message.role-assistant {
  align-self: flex-start;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 0.25rem;
  padding: 0.7rem 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}

.chat-typing span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: chat-typing-bounce 1s ease-in-out infinite;
}

.chat-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

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

.history-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.history-filters input[type="search"] {
  flex: 1;
  min-width: 200px;
}

.history-filters select {
  width: auto;
}

.mailbox-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  animation: fadeInUp 0.35s ease both;
}

.mailbox-summary:empty {
  display: none;
}

.mailbox-summary-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.mailbox-summary-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 600;
}

.mailbox-summary-sender {
  color: var(--text);
}

.mailbox-summary-subject {
  color: var(--text-secondary);
  font-weight: 400;
}

.mailbox-summary-gist {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
}

textarea,
input,
select {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  width: 100%;
}

textarea:disabled,
input:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

textarea[data-field] {
  resize: none;
  overflow: hidden;
}

/* Instruções adicionais de personalidade / Limites do Ramiro / Responder
   livremente a estes e-mails (separador Configuração) crescem sozinhas com
   autoResizeTextarea (app.js), mesmo critério de textarea[data-field] acima —
   sem o puxador de redimensionar manual (redundante quando o textarea já
   cresce sozinho) nem scroll interno. */
#settings-custom-personality,
#settings-ramiro-limits,
#settings-free-reply-addresses {
  resize: none;
  overflow: hidden;
}

button {
  font: inherit;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

button:hover:not(:disabled) {
  background: var(--accent-strong);
}

button:active:not(:disabled) {
  transform: scale(0.97);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.status-msg {
  color: var(--danger);
  min-height: 1.2em;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  animation: fadeInUp 0.35s ease both;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--shadow-color);
}

.card.status-executed {
  border-color: var(--accent);
}

.card.status-failed {
  border-color: var(--danger);
}

.card.status-rejected {
  opacity: 0.5;
}

.card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.card-header .timestamp {
  margin-left: auto;
}

.select-checkbox {
  width: auto;
  margin: 0;
}

.type-icon {
  font-size: 1rem;
}

.type-label.type-schedule_meeting {
  color: var(--accent);
}

.type-label.type-send_email {
  color: #5b9bd5;
}

.type-label.type-reply_email {
  color: #cf9765;
}

.type-label.type-create_task {
  color: #7cb342;
}

.type-label.type-assign_task {
  color: #ab7cd9;
}

.type-label.type-edit_task {
  color: #4fb3bf;
}

.type-label.type-delete_task {
  color: var(--danger);
}

.type-label.type-create_document {
  color: #d9a441;
}

.urgent-badge {
  background: #f5deb3;
  color: #6b4e00;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.75rem;
}

.confirmed-badge {
  background: #cdeadd;
  color: #1e5c3f;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.75rem;
}

.auto-badge {
  background: rgba(91, 155, 213, 0.15);
  color: #5b9bd5;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.75rem;
}

.card.card-urgent {
  border-color: #c99a1e;
  box-shadow: 0 0 0 1px #c99a1e;
}

.history-header .status-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.history-header .status-label.status-executed {
  color: var(--success-text);
}

.history-header .status-label.status-rejected,
.history-header .status-label.status-failed {
  color: var(--danger);
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.reject-btn {
  background: #6b6b6b;
}

.error {
  color: var(--danger);
  font-size: 0.85rem;
}

.empty {
  color: var(--text-secondary);
}

.batch-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  animation: fadeInUp 0.3s ease both;
}

#batch-count {
  font-weight: 600;
  margin-right: auto;
}

.batch-reject-btn {
  background: #6b6b6b;
}

.batch-clear-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.tasks-bulk-bar {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  flex-shrink: 0;
  padding: 0 1.5rem 1.5rem;
  display: flex;
  gap: 0.75rem;
  animation: fadeInUp 0.4s ease var(--splash-reveal-ms) both;
}

.tasks-bulk-bar button {
  flex: 1;
}

.accept-all-btn {
  background: var(--accent-strong);
}

.accept-all-btn:hover:not(:disabled) {
  background: var(--accent);
}

.reject-all-btn {
  background: var(--danger);
}

.reject-all-btn:hover:not(:disabled) {
  background: #b23;
}

.skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-line {
  height: 0.9rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--border) 25%, var(--card-bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line.short {
  width: 60%;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1000;
  max-width: 320px;
}

.toast {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  border-left-color: var(--accent);
}

.toast-error {
  border-left-color: var(--danger);
}

.toast-info {
  border-left-color: #5b9bd5;
}

/* ---------- dashboard.html: painel de escolha de bot ---------- */

.dashboard-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.dashboard-header {
  margin-bottom: 2rem;
}

.dashboard-header h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.bot-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.bot-card:hover {
  border-color: var(--accent-strong);
  transform: translateY(-2px);
}

.bot-card-icon {
  font-size: 2rem;
}

.bot-card-name {
  font-size: 1.1rem;
  font-weight: 600;
}

.bot-card-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ---------- dashboard.html: grelha de retratos (estilo Sims) ---------- */
/* Um retrato por bot (gerado em dashboard.js a partir de GET /api/bots — se
   acrescentares um bot novo em backend/bots.py, ganha logo o seu próprio
   retrato, sem tocar aqui): ícone grande num círculo colorido, com um emblema
   "a conversar" (💬) sobreposto no canto — todos os bots desta app só
   conversam, por isso é sempre o mesmo emblema — e as iniciais do nome por
   baixo, tal como a grelha de personagens do Sims na imagem de referência.
   Cada retrato é um <button> — clicar mostra/esconde a descrição e a
   especialidade desse bot em #avatar-detail (ver mais abaixo). */

.avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--bg) 100%);
}

.avatar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 64px;
  padding: 0.4rem 0.2rem;
  border: none;
  border-radius: 8px;
  background: none;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.avatar-card:hover,
.avatar-card[aria-expanded="true"] {
  background: var(--hover-bg);
}

.avatar-portrait {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 2px 6px var(--shadow-color);
}

.avatar-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.avatar-name {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--accent-strong);
}

/* Painel com a descrição/especialidade do retrato selecionado em .avatar-grid —
   um só de cada vez (openAvatarBotId em dashboard.js), por baixo da grelha. */
.avatar-detail {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
}

.avatar-detail[hidden] {
  display: none;
}

.avatar-detail-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.avatar-detail-text strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.avatar-detail-text p {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.avatar-detail-specialty {
  color: var(--text) !important;
}

.avatar-detail-select {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.6rem;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.avatar-detail-select:hover {
  background: var(--accent-strong);
}

/* ---------- bot.html: shell mínimo de conversa (bots que não o Ramiro) ---------- */

.bot-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.bot-page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.bot-page-header h1 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
}

.bot-page-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 1.5rem;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- mobile: collapse sidebar to a top bar ---------- */

@media (max-width: 720px) {
  .app-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-header {
    padding: 0.4rem 0.5rem;
  }

  .tabs {
    flex-direction: row;
    flex: 1;
  }

  .tab-btn {
    width: auto;
  }

  .sidebar-footer {
    margin-top: 0;
    padding: 0.4rem 0.5rem;
  }

  .main-area,
  main {
    height: auto;
  }

  .view-scroll {
    overflow-y: visible;
  }
}