/* asistente.css — the assistant's presence in the shell (asistente design
   file section 3): the topbar entry with the coral sparkle, and the side
   panel in three widths (open 380 px, reduced 56 px rail, closed). Level 1
   utility: white surface, hairline left border, no shadow, no gradient. */

/* ---- topbar entry ---- */
.ai-open { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-3); margin-left: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-decoration: none; }
.ai-open:hover { background: var(--color-primary-soft); }
.ai-open[aria-expanded="true"] { background: var(--color-primary-soft); border-color: var(--navy-200); }
.ai-open:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.ai-open svg { width: 16px; height: 16px; color: var(--coral-600); }
.ai-open.has-avisos svg { animation: ai-breathe 2.4s ease-in-out infinite; }
@keyframes ai-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ai-open.has-avisos svg { animation: none; } }
.ai-badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--coral-600); color: var(--paper); font-size: var(--text-2xs); font-weight: 700; line-height: 18px; text-align: center; }
.ai-badge:empty { display: none; }
.ai-open[aria-expanded="true"] .ai-badge { display: none; }

/* ---- the panel ---- */
.ai-drawer { position: sticky; top: 0; align-self: flex-start; flex: 0 0 380px; width: 380px; height: 100vh; display: flex; flex-direction: column; background: var(--color-surface); border-left: 1px solid var(--color-border); }
.ai-drawer[hidden] { display: none; }
#ai-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ai-head { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.ai-spark { width: 18px; height: 18px; flex: 0 0 18px; color: var(--coral-600); margin-top: 3px; }
.ai-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-title { font-size: var(--text-base); font-weight: 600; color: var(--color-text); }
.ai-ctx { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-hist { min-height: 30px; padding: 0 var(--space-2); }
.ai-hist svg { width: 16px; height: 16px; }
.ai-scroll { flex: 1; min-height: 0; overflow: auto; padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.ai-sec-h { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.ai-sec-h .grp-n { font-weight: 500; }
.ai-quiet { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ai-avisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ai-aviso { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface-muted); border-radius: var(--radius-md); }
.ai-aviso-main p { margin: 0 0 4px; font-size: var(--text-sm); line-height: 1.45; color: var(--color-text); }
.ai-aviso-main .link-action { min-height: 26px; padding: 0; font-size: var(--text-xs); }
.ai-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ai-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500; cursor: pointer; }
.ai-chip:hover { background: var(--color-primary-soft); border-color: var(--navy-200); color: var(--color-primary); }
.ai-chip:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.ai-conv { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.ai-conv-head { display: flex; align-items: center; justify-content: space-between; }
.ai-conv-head .ai-sec-h { margin: 0; }
.ai-conv-head .link-action { min-height: 26px; padding: 0 var(--space-2); font-size: var(--text-xs); }

/* the thread inside the panel: the same turns as /agent, panel-sized */
.ai-drawer .agent-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.ai-drawer .agent-msg { font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; }
.ai-drawer .agent-msg-user { align-self: flex-end; max-width: 88%; padding: var(--space-2) var(--space-3); background: var(--color-primary-soft); color: var(--color-text); border-radius: var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-md); }
.ai-drawer .agent-msg-assistant { color: var(--color-text); }
.ai-drawer .agent-tool-result { font-size: var(--text-xs); color: var(--color-text-muted); }
.ai-drawer .agent-tool-name { font-weight: 600; }
.ai-drawer .agent-tool-text { margin: 2px 0 0; max-height: 120px; overflow: auto; white-space: pre-wrap; font-size: var(--text-2xs); background: var(--color-surface-muted); padding: var(--space-2); border-radius: var(--radius-sm); }
.ai-drawer .agent-action-card { padding: var(--space-3) var(--space-4); border: 1px solid var(--navy-200); border-radius: var(--radius-md); background: var(--color-surface); }
.ai-drawer .agent-action-summary { margin: 0 0 var(--space-2); font-weight: 600; font-size: var(--text-sm); }
.ai-drawer .agent-action-args { display: grid; grid-template-columns: 90px 1fr; gap: 2px var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-xs); }
.ai-drawer .agent-action-args dt { color: var(--color-text-muted); }
.ai-drawer .agent-action-args dd { margin: 0; color: var(--color-text); white-space: pre-wrap; }
.ai-drawer .agent-action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ai-drawer .agent-action-buttons .btn-accent { min-height: 30px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.ai-drawer .agent-action-outcome { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }

/* draft_email result card (Phase 1.5 §3; moved here review round 1, fix 4):
   UNSCOPED (not .ai-drawer-prefixed) because agent/_thread.html renders it
   on BOTH /agent (agent.css, no .agent-draft-* rules of its own any more)
   and the side panel (asistente.css only) — one shared definition, same
   flat hairline-bordered surface as the other result cards. */
.agent-draft-card {
  align-self: flex-start;
  max-width: 70ch;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* show_guide result card (help guides): reuses .agent-draft-card for the
   surface; these are the guide-only inner parts. UNSCOPED for the same
   two-shell reason as the draft card above. */
.agent-guide-title { margin: 0; font-weight: 600; color: var(--color-text); }
.agent-guide-blocked { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.agent-guide-steps {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.agent-draft-fields {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.agent-draft-fields dt { color: var(--color-text-muted); }
.agent-draft-fields dd { margin: 0; color: var(--color-text); }

.agent-draft-body {
  width: 100%;
  min-height: 6em;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  resize: vertical;
}

.agent-draft-attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.agent-draft-attachment {
  display: inline-flex;
  padding: 2px var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
}

.agent-draft-note { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }

.agent-draft-actions { display: flex; align-items: center; gap: var(--space-3); }

.ai-composer { border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); }
.ai-composer textarea { display: block; width: 100%; min-height: 60px; box-sizing: border-box; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-sm); resize: vertical; }
.ai-composer textarea:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }
.ai-composer textarea:disabled { background: var(--color-surface-muted); }
.ai-composer-bar { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.ai-composer-bar .btn-secondary { margin-left: auto; min-height: 30px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.ai-composer-bar .btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
.ai-note { font-size: var(--text-2xs); line-height: 1.35; }

/* ---- @mentions (Phase 1.5 §4): the composer's inline dropdown + chosen
   chips, shared by BOTH composers (#agent-composer on /agent, #ai-composer
   in the panel) — static/agent.js wraps each textarea in a
   .agent-composer-field to host them; the floating list looks identical in
   both contexts so one set of rules covers both. ---- */
.agent-composer-field { position: relative; }
.agent-composer .agent-composer-field { flex: 1; min-width: 0; }

.mention-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-1); }
.mention-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--space-2); background: var(--color-surface-muted); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-text); }
.mention-chip-icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--color-text-muted); }
/* 34x34 hit target (review round 1, fix 5 — the icon-button convention at
   app.css's .kpi-icon): negative margins pull the enlarged box back in so
   the small chip stays visually compact while the clickable/tappable area
   is the full 34px circle. */
.mention-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -5px -4px -5px 0; border: 0; border-radius: 50%; background: none; padding: 0; line-height: 1; color: var(--color-text-muted); font-size: var(--text-sm); cursor: pointer; }
.mention-chip-remove:hover { background: var(--color-surface); color: var(--color-text); }
.mention-chip-remove:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }

.mention-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 2px; max-height: 220px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.mention-hit { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; box-sizing: border-box; text-align: left; padding: var(--space-2) var(--space-3); border: 0; background: none; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text); cursor: pointer; }
.mention-hit:hover, .mention-hit[aria-selected="true"] { background: var(--color-surface-muted); }
.mention-hit:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.mention-hit-kind { color: var(--color-text-muted); font-size: var(--text-xs); }

/* ---- reduced: a 56 px rail with the sparkle and the count ---- */
.ai-rail { display: none; }
.ai-drawer.is-mini { flex-basis: 56px; width: 56px; }
.ai-drawer.is-mini #ai-body { display: none; }
.ai-drawer.is-mini .ai-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 56px; padding: var(--space-4) 0; border: 0; background: transparent; color: var(--coral-600); cursor: pointer; }
.ai-rail svg { width: 22px; height: 22px; }
.ai-rail-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--coral-600); color: var(--paper); font-size: var(--text-2xs); font-weight: 700; line-height: 18px; }
.ai-rail-n:empty { display: none; }
.ai-rail:hover { background: var(--color-surface-muted); }
.ai-rail:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -3px; }
@media (max-width: 1100px) { .ai-drawer { flex-basis: 320px; width: 320px; } }
/* The badge is out-of-band swapped into the topbar; if it ever renders inside the panel body (no htmx), hide it there. */
#ai-body .ai-badge { display: none; }