/* File Suggestions Component Styles */
/* Aligned with agent-skills.css for consistency */

.file-suggestions {
  @apply overflow-x-hidden;
  position: absolute;
  /* top and left are set dynamically by FileSearchManager.positionSuggestions() */
  max-height: 40vh; /* 40% of viewport height */
  min-width: 200px;
  /* Width is determined by content, with max-width set dynamically via JS */
  width: max-content;
  overflow-y: auto;
  background: var(--color-neutral-900);
  /*border: 1px solid #444;*/
  border-radius: 6px;
  box-shadow: 0 4px 12px oklch(from var(--color-black) l c h / 0.3);
  z-index: 100;
}

.file-suggestion-header {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-secondary, #888);
  background: var(--bg-tertiary, #2a2a2a);
  border-bottom: 1px solid var(--border-color, var(--color-neutral-700));
  /*font-family: monospace;*/
}

.file-suggestion-item {
  @apply flex flex-row flex-nowrap items-center cursor-pointer min-w-0;
  padding: 4px 10px;
  gap: 6px;
  /*border-bottom: 1px solid var(--border-color, var(--color-neutral-700));*/
  transition: background-color 0.1s ease;
}

.file-suggestion-item:last-child {
  border-bottom: none;
}

/* Note: :hover is intentionally NOT used here.
   Mouse hover highlighting is handled via JavaScript (mousemove event)
   to prevent accidental highlighting when menu appears under stationary mouse cursor.
   The .hovered class is added only when mouse actually moves over an item. */

.file-suggestion-item.hovered {
  background: var(--bg-hover, var(--color-neutral-900));
}

.file-suggestion-item.selected {
  background: var(--bg-active, oklch(from var(--color-white) l c h / 0.15));
}

.file-icon {
  @apply shrink-0 flex items-center justify-center;
  width: 16px;
  height: 16px;
}

.file-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.file-name {
  @apply shrink min-w-0 font-medium overflow-hidden text-ellipsis whitespace-nowrap;
  color: var(--text-primary, #fff);
  font-size: 11px;
}

.file-name .highlight {
  background: oklch(from var(--color-amber-400) l c h / 0.3);
  color: var(--text-primary, #fff);
  border-radius: 2px;
  padding: 0 1px;
}

.file-name .file-count {
  color: var(--text-secondary, #888);
  font-weight: normal;
  font-size: 10px;
  margin-left: 4px;
}

.file-path {
  @apply flex-1 overflow-hidden text-ellipsis whitespace-nowrap;
  color: var(--text-secondary, #888);
  font-size: 10px;
}

.file-suggestion-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary, #888);
  font-size: 13px;
}

.file-suggestion-empty.indexing {
  color: var(--text-tertiary, #666);
  font-style: italic;
}

/* Section headers for Agents/Files */
.suggestion-section-header {
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #888);
  background: var(--bg-tertiary, #2a2a2a);
  border-bottom: 1px solid var(--border-color, var(--color-neutral-700));
}

/* Agent-specific styles */
.agent-suggestion-item {
  /* Inherits from .file-suggestion-item */
}

.mention-icon {
  /* SVG icon styling handled by .file-icon */
}

/* Codicon icons in agent/customSearch items - match symbol icon size */
.agent-suggestion-item .file-icon.codicon {
  font-size: 16px;
}

.agent-name {
  color: var(--text-primary, #fff);
}

.agent-description {
  @apply flex-1 overflow-hidden text-ellipsis whitespace-nowrap;
  color: var(--text-secondary, #888);
  font-size: 10px;
}

/* Symbol-specific styles (for code/symbol search @ts:, @go:, etc.) */
.symbol-suggestion-item,
.file-suggestion-item.symbol-item {
  /* Inherits from .file-suggestion-item */
}

.symbol-icon,
.file-suggestion-icon.symbol-icon {
  /* Symbol icon uses codicon font */
  font-size: 16px;
  line-height: 1;
}

.symbol-name {
  color: var(--text-primary, #fff);
  font-weight: 500;
}

.symbol-type-badge,
.file-suggestion-type {
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary, #888);
  background: var(--bg-tertiary, #2a2a2a);
  border-radius: 3px;
  margin-left: 4px;
  flex-shrink: 0;
}

.symbol-path {
  @apply flex-1 overflow-hidden text-ellipsis whitespace-nowrap;
  color: var(--text-secondary, #888);
  font-size: 10px;
  margin-left: auto;
}

/* Back button for symbol navigation */
.file-suggestion-item.back-item {
  background: var(--bg-tertiary, #2a2a2a);
  border-bottom: 1px solid var(--border-color, var(--color-neutral-700));
}

.file-suggestion-item.back-item:hover {
  background: var(--bg-hover, var(--color-neutral-800));
}

.file-suggestion-item.back-item .file-suggestion-icon {
  font-size: 12px;
  color: var(--text-secondary, #888);
}

/* Scrollbar styling */
.file-suggestions::-webkit-scrollbar {
  width: 3px;
}

.file-suggestions::-webkit-scrollbar-track {
  background: transparent;
}

.file-suggestions::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, var(--color-neutral-600));
  border-radius: 3px;
}

.file-suggestions::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, var(--color-neutral-500));
}

/* Frontmatter Popup Styles */
.frontmatter-popup {
  position: fixed;
  background: var(--color-neutral-950); /* Darker than menu for contrast */
  border: 1px solid oklch(from var(--color-white) l c h / 0.2);
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 150px;
  overflow-y: auto;
  z-index: 101; /* Above suggestions container */
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-secondary, #aaa);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 6px 20px oklch(from var(--color-black) l c h / 0.5), 0 2px 8px oklch(from var(--color-black) l c h / 0.3);
  box-sizing: border-box;
}

.frontmatter-popup::-webkit-scrollbar {
  width: 4px;
}

.frontmatter-popup::-webkit-scrollbar-track {
  background: transparent;
}

.frontmatter-popup::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, var(--color-neutral-600));
  border-radius: 4px;
}

.frontmatter-popup::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, var(--color-neutral-500));
}

/* Frontmatter Content */
.frontmatter-content {
  white-space: pre-wrap;
  word-break: break-word;
}

.frontmatter-line {
  margin-bottom: 2px;
}

.frontmatter-key {
  color: var(--text-secondary, #888);
}

.frontmatter-value {
  color: var(--text-secondary, #888);
}

.frontmatter-link {
  color: var(--color-blue-400);
  text-decoration: none;
  cursor: pointer;
}

.frontmatter-link:hover {
  text-decoration: underline;
  color: var(--color-blue-300);
}

/* Frontmatter Hint */
.frontmatter-hint {
  margin-top: 6px;
  font-size: 9px;
  color: var(--text-tertiary, #666);
  text-align: right;
}

/* Frontmatter Info Icon */
.frontmatter-info-icon {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
  color: var(--text-tertiary, #666);
  opacity: 0.6;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.frontmatter-info-icon:hover {
  opacity: 1;
  color: var(--text-secondary, #aaa);
}
