/* at-trigger-menu.css — floating @-autofill list for #videoPrompt /
   #imagePrompt. Theme-aware via the existing dashboard CSS vars
   (--violet, --text, --mute, --line-strong, --glass-strong) so it
   tracks both [data-theme="dark"] and [data-theme="light"] without
   per-theme overrides. */

.at-trigger-menu {
  position: absolute;
  z-index: 10000;
  display: none;
  background: var(--glass-strong, rgba(20, 23, 42, 0.96));
  color: var(--text, #fff);
  border: 1px solid var(--line-strong, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  font-family: 'Inter', system-ui, sans-serif;
}

.at-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.at-menu-row:last-child { border-bottom: none; }

.at-menu-row.is-highlighted {
  background: rgba(124, 109, 250, 0.18);
}

.at-menu-row.is-empty { opacity: 0.5; }

.at-menu-row__thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.at-menu-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.at-menu-row__placeholder {
  color: var(--text3, rgba(240, 242, 255, 0.4));
  font-size: 13px;
  font-weight: 700;
}

.at-menu-row__body {
  flex: 1;
  min-width: 0;
}

.at-menu-row__token {
  color: var(--violet, #7c6dfa);
  font-family: 'Space Grotesk', monospace;
  font-size: 13px;
  font-weight: 600;
}

.at-menu-row__preview {
  color: var(--mute, rgba(240, 242, 255, 0.62));
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Light-theme rebalance: surfaces and shadow get inverted; the
   --violet token stays accent. The existing CSS vars handle text
   colour automatically — these overrides just nudge the surface. */
[data-theme="light"] .at-trigger-menu {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(124, 109, 250, 0.32);
  box-shadow: 0 12px 40px rgba(60, 60, 130, 0.18);
}
[data-theme="light"] .at-menu-row {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .at-menu-row.is-highlighted {
  background: rgba(124, 109, 250, 0.12);
}