/*
 * TagSuggest — the per-page tag-suggestion trust surface (TAG-01/TAG-02).
 * Token-only; no new token, no new dependency. It reuses the base modal shell
 * (.dialog-backdrop / .dialog / .dialog-title / .dialog-footer) from Dialog.css
 * and the agent stale-banner classes (.diff-stale*) from DiffReviewDialog.css,
 * imported here so the styles ship even though TagSuggest renders its own markup
 * (it cannot delegate to Dialog because of the Apply-not-auto-focused inversion).
 */
@import "./Dialog.css";
@import "./DiffReviewDialog.css";

.tagsuggest {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* The trigger reuses the .agentpanel-suggestion chip language: a ghost button
   that warms to accent-soft on hover/active. Min-height meets the hit target. */
.tagsuggest-trigger {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--hit-min-height);
  font-size: var(--font-size-label);
}

.tagsuggest-trigger:hover:not(:disabled) {
  border-color: var(--color-accent-border);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

/* The approval surface is a compact dialog (narrower than the diff modal); it is
   viewport-bounded with an internal scroll on the row list. */
.tagsuggest-dialog {
  max-width: 440px;
  max-height: calc(100vh - var(--space-xl) * 2);
}

.tagsuggest-subline {
  margin: 0;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
}

.tagsuggest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.tagsuggest-selectall {
  display: inline-flex;
  gap: var(--space-xs);
}

.tagsuggest-selectall .btn {
  min-height: var(--hit-min-height);
  font-size: var(--font-size-label);
}

.tagsuggest-count {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
}

/* The per-tag checkbox list: bordered, internally scrollable so a capped-but-long
   set stays reviewable without growing the modal past the viewport. */
.tagsuggest-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: 50vh;
  background: var(--color-bg);
}

/* Each row is the full hit target — a <label> wrapping the checkbox + name. */
.tagsuggest-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--hit-min-height);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
}

.tagsuggest-row:hover {
  background: var(--color-hover);
}

.tagsuggest-row:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* The checked accent is the ONLY accent on a row (accent reserved to Apply +
   checked + trigger-hover + focus rings). */
.tagsuggest-checkbox {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.tagsuggest-tagname {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  word-break: break-word;
}

/* The "new" badge clones .role-badge exactly: surface fill, border outline, muted
   text. Color is a SECONDARY signal only — the word "new" + the unchecked default
   are the primary distinctions (color is never the sole signal). */
.tagsuggest-newbadge {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Quiet muted state lines (loading/empty/error) — identical to .backlinks-status
   / .diff-empty: a single muted Label line, hidden-Git-safe. */
.tagsuggest-empty {
  margin: 0;
  padding: var(--space-lg);
  text-align: center;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
}

.tagsuggest-status {
  margin: 0;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-text-muted);
}

/* The footer is space-between so Cancel (left) and Apply (right) are positionally
   separated — never two same-weight adjacent buttons (mirrors .diff-footer). */
.tagsuggest-footer {
  justify-content: space-between;
}

.tagsuggest-apply {
  gap: var(--space-xs);
}

@media (prefers-reduced-motion: reduce) {
  .tagsuggest-trigger .spinner {
    animation: none;
  }
}
