/* admin-view-ask.css — docked assistant panel (mockups 11/12, ISA ISC-70..77).
 * Layout + skin for #ask-panel. Zero literals: tokens/classes only.
 * The dock is a fixed right rail; .ask-open on body/#dashboard-view narrows
 * .dashboard-content with a margin so the content never sits under the panel.
 * The pipeline drawer (backdrop z40 / drawer z50) still overlays the dock. */

/* ── Open state: narrow the main column ─────────────────────────────────── */
body.ask-open .dashboard-content,
#dashboard-view.ask-open .dashboard-content { margin-right: 460px; }
body.ask-open.ask-wide .dashboard-content,
#dashboard-view.ask-open.ask-wide .dashboard-content { margin-right: min(760px, 92vw); }

/* ── Floating trigger (kept; ⌘J is the primary affordance) ─────────────── */
.ask-fab {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 30;
  padding: var(--sp-2) var(--sp-4);
  min-height: 0;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 600;
  box-shadow: var(--shadow-pop);
}
.ask-fab:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
body.ask-open .ask-fab { display: none; }

/* ── Docked panel shell ─────────────────────────────────────────────────── */
#ask-panel.ask-dock {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
}
#ask-panel.ask-dock.ask-expanded { width: min(760px, 92vw); }

/* Header: icon + title + actions, then the context row (mockup 11/12). */
.ask-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) 18px var(--sp-3);
  border-bottom: 1px solid var(--tint-2);
  flex-shrink: 0;
}
.ask-head-row { display: flex; align-items: center; justify-content: space-between; }
.ask-head-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ask-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ask-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
}
.ask-head-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.ask-head-actions .icon { border-radius: var(--r-md); }
.ask-head-actions .icon[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-deep); }

/* Context row: "Respondiendo sobre" + removable chip + dashed add chip. */
.ask-context { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-height: 28px; }
.ask-context-label { font-size: var(--fs-label); color: var(--ink-muted); }
#ask-context-chip { padding: var(--sp-1) var(--sp-2) var(--sp-1) 10px; }
.ask-chip-remove {
  min-height: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  font-size: var(--fs-body);
  line-height: 1;
}
.ask-chip-remove:hover { background: var(--accent-border); }
.ask-add-context { height: 28px; min-height: 28px; padding: 0 10px; font-size: var(--fs-label); }

/* ── Thread ─────────────────────────────────────────────────────────────── */
.ask-messages,
.ask-empty,
.ask-recents {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
}
.ask-messages { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.ask-msg-bot { display: flex; flex-direction: column; gap: var(--sp-3); }
.ask-msg-bot.ask-error {
  padding: 10px var(--sp-3);
  border-radius: var(--r-md);
  background: var(--danger-bg);
  color: var(--danger-ink);
}
.ask-msg-body { overflow-wrap: anywhere; }
.ask-msg-body a { color: var(--accent-deep); }
.ask-msg-body code { background: var(--ink-alpha-06); border-radius: var(--r-xs); padding: 0 var(--sp-1); font-size: var(--fs-small); }
.ask-msg-user a { color: inherit; text-decoration: underline; }

/* Inline table rendering (markdown tables in answers). */
.ask-table { border-collapse: collapse; margin: var(--sp-2) 0; font-size: var(--fs-small); }
.ask-table th,
.ask-table td { border: 1px solid var(--tint-2); padding: var(--sp-1) 10px; text-align: left; }
.ask-table th { background: var(--surface-2); font-weight: 600; }

/* Mismatch callout (ISC-71) — .callout.callout-info supplies the skin. */
.ask-callout a { color: inherit; font-weight: 600; }

/* "Fuentes" row (ISC-72/77): numbered chips, or the explicit no-source line. */
.ask-sources {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--fs-label);
  color: var(--ink-muted);
}
.ask-source {
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--tint);
  color: var(--accent-deep);
  font-weight: 500;
  text-decoration: none;
}
.ask-source:hover { background: var(--tint-2); }
.ask-sources-empty { color: var(--ink-faint); }

/* Per-answer actions (ISC-73): icon buttons + optional Export CSV. */
.ask-acts { display: flex; gap: 2px; align-items: center; }
.ask-act { width: 34px; height: 34px; border-radius: var(--r-sm); color: var(--ink-muted); }
.ask-act[aria-pressed="true"] { background: var(--accent-bg); color: var(--accent-deep); }
.ask-csv {
  margin-left: auto;
  height: 34px;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-label);
  font-weight: 500;
}

/* Action confirmation cards (skin lives in admin-views.css .ask-action). */
.ask-action { align-self: stretch; max-width: none; }

/* ── Empty state (mockup 12) ────────────────────────────────────────────── */
.ask-empty { padding: 36px var(--sp-6); display: flex; flex-direction: column; gap: 26px; }
.ask-empty-greeting { display: flex; flex-direction: column; gap: var(--sp-2); }
.ask-empty-greeting h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}
.ask-empty-greeting p { margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink-2); }
.ask-empty-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.ask-group-label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.ask-suggestion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  font-size: var(--fs-body);
  color: var(--ink);
  text-align: left;
}
.ask-suggestion:hover { border-color: var(--accent-border); background: var(--accent-bg); }
.ask-suggestion .arr { color: var(--ink-muted); flex-shrink: 0; }
.ask-suggestion.flat { min-height: 44px; background: var(--paper); }

/* ── Recents / history view ─────────────────────────────────────────────── */
.ask-recents { padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.ask-recent {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  min-height: 0;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--tint);
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-body);
  color: var(--ink);
  text-align: left;
}
.ask-recent:hover { color: var(--accent-deep); }
.ask-recent .ask-recent-age { font-size: var(--fs-label); color: var(--ink-muted); flex-shrink: 0; }

/* ── Composer ───────────────────────────────────────────────────────────── */
.ask-composer {
  position: relative;
  flex-shrink: 0;
  padding: var(--sp-3) 18px var(--sp-4);
  border-top: 1px solid var(--tint-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
}
.ask-suggestions { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-suggestions:empty { display: none; }
.ask-suggestion-chip {
  height: 32px;
  min-height: 32px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-label);
}
.ask-suggestion-chip:hover { border-color: var(--accent-border); background: var(--accent-bg); }
.ask-input-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
}
.ask-input-box:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.ask-input-box textarea {
  border: 0;
  resize: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink);
  min-height: 46px;
}
.ask-input-row { display: flex; align-items: center; gap: var(--sp-2); }
.ask-mention {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.ask-mention:hover { background: var(--surface-2); }
.ask-scope { display: flex; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--ink-2); }
.ask-scope select {
  height: 32px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-label);
  color: var(--ink);
}
.ask-send {
  margin-left: auto;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ask-send:hover:not(:disabled) { background: var(--accent-deep); }
.ask-send:disabled { background: var(--accent-border); color: var(--accent-deep); }
.ask-note { margin: 0; font-size: var(--fs-eyebrow); text-align: center; }

/* ── "@ Mencionar" popover (context chip insertion, ISC-71) ─────────────── */
.ask-mention-pop {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 100%;
  margin-bottom: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  z-index: 2;
}
.ask-mention-pop input {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-small);
  color: var(--ink);
}
.ask-mention-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.ask-mention-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  width: 100%;
  min-height: 0;
  padding: var(--sp-2) 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-small);
  color: var(--ink);
  text-align: left;
}
.ask-mention-item:hover { background: var(--tint); }
.ask-mention-item .meta-mono { flex-shrink: 0; }
.ask-mention-empty { padding: var(--sp-2) 10px; font-size: var(--fs-small); color: var(--ink-muted); }

/* ── Narrow viewports: dock becomes a full-width overlay ────────────────── */
@media (max-width: 900px) {
  body.ask-open .dashboard-content,
  #dashboard-view.ask-open .dashboard-content,
  body.ask-open.ask-wide .dashboard-content,
  #dashboard-view.ask-open.ask-wide .dashboard-content { margin-right: 0; }
  #ask-panel.ask-dock,
  #ask-panel.ask-dock.ask-expanded { width: 100vw; }
}