/* =============================================================================
   <cf-search> Web Component Styles
   Shared panel styles + mode-specific layouts (dialog / inline)

   Colors are mapped straight to the shared design-system tokens
   (confluent-design-system.css) rather than a parallel component-scoped set —
   those tokens already flip between light/dark via [data-theme='dark'], so
   there's nothing extra to maintain here. A handful of overlay tints (row
   hover, close-button background, scrollbar thumb) have no shared token
   equivalent and are written as literal rgba() pairs with an explicit
   [data-theme='dark'] override instead.
   ============================================================================= */

/* ── Shared panel internals ─────────────────────────────────────────────────── */
.cf-search-panel,
.cf-search-dropdown {
  background: var(--cf-surface-01);
  border: 1px solid var(--cf-border-subtle);
  border-radius: 12px;
  box-shadow: var(--cf-elevation-04);
  flex-direction: column;
  overflow: hidden;
  color: var(--cf-text-primary);
}

.cf-search-dropdown {
  border: 1px solid var(--color-neutral-50) !important;
}

.cf-search-panel {
  display: flex;
}

/* ── Input row (dialog only) ────────────────────────────────────────────────── */
.cf-search-input-row {
  display: flex;
  align-items: center;
  gap: var(--cf-space-08);
  padding: var(--cf-space-16) var(--cf-space-24);
  border-bottom: 1px solid var(--cf-border-subtle);
  flex-shrink: 0;
}

.cf-search-icon {
  flex-shrink: 0;
}

/* Light mode (default): show the dark-glyph icon, hide the light-glyph one. */
.cf-search-icon[data-theme-icon='dark'] {
  display: none;
}

/* Dark mode: show the light-glyph icon, hide the dark-glyph one. */
[data-theme='dark'] .cf-search-icon[data-theme-icon='light'] {
  display: none;
}

[data-theme='dark'] .cf-search-icon[data-theme-icon='dark'] {
  display: block;
}

.cs-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: var(--cf-text-primary);
  font-family: var(--cf-font-family);
  min-width: 0;
}

.cs-search-input::placeholder {
  color: var(--cf-text-disabled);
}

.cf-search-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  font-size: 12px;
  color: var(--cf-text-disabled);
  font-family: var(--cf-font-family-mono, monospace);
  flex-shrink: 0;
}

[data-theme='dark'] .cf-search-shortcut {
  border-color: rgba(255, 255, 255, 0.14);
}

.cf-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--cf-text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}

[data-theme='dark'] .cf-search-close {
  background: rgba(255, 255, 255, 0.08);
}

.cf-search-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--cf-text-primary);
}

[data-theme='dark'] .cf-search-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ── Filter chips ───────────────────────────────────────────────────────────── */
.cf-search-filters {
  display: flex;
  align-items: center;
  gap: var(--cf-space-08);
  padding: var(--cf-space-08) var(--cf-space-24);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cf-search-filters:empty {
  display: none;
}

.cf-search-filters__label {
  font-size: 12px;
  color: var(--cf-text-primary);
  white-space: nowrap;
  margin-right: 2px;
}

.cf-search-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 20px;
  background: var(--color-neutral-60);
  color: var(--cf-text-on-color);
  font-size: 14px;
  font-family: var(--cf-font-family);
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s,
    color 0.12s;
  white-space: nowrap;
  border: none;
}

.cf-search-filter-chip:hover {
  filter: brightness(1.1);
}

.cf-search-filter-chip__check {
  display: none;
  width: 11px;
  height: 8px;
  flex-shrink: 0;
}

.cf-search-filter-chip--active .cf-search-filter-chip__check {
  display: block;
}

/* ── Body (everything below the search input field) ─────────────────────────── */
/* Shared by dialog and inline modes so both hold the same 653px height,
   regardless of the dialog's separate input row. */
.cf-search-body {
  display: flex;
  flex-direction: column;
  height: 653px;
  overflow: hidden;
}

/* ── Results container ──────────────────────────────────────────────────────── */
.cf-search-results {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

[data-theme='dark'] .cf-search-results {
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.cf-search-results::-webkit-scrollbar {
  width: 5px;
}
.cf-search-results::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

[data-theme='dark'] .cf-search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* Subtle row hover shared across results, AI prompts, and view-more. */
.cf-search-result-link:hover,
.cf-search-result-item.cf-search-item--focused .cf-search-result-link,
.cf-search-ai__prompt:hover,
.cf-search-ai__item.cf-search-item--focused .cf-search-ai__prompt,
.cf-search-view-more:hover,
.cf-search-view-more.cf-search-item--focused {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme='dark'] .cf-search-result-link:hover,
[data-theme='dark'] .cf-search-result-item.cf-search-item--focused .cf-search-result-link,
[data-theme='dark'] .cf-search-ai__prompt:hover,
[data-theme='dark'] .cf-search-ai__item.cf-search-item--focused .cf-search-ai__prompt,
[data-theme='dark'] .cf-search-view-more:hover,
[data-theme='dark'] .cf-search-view-more.cf-search-item--focused {
  background: rgba(255, 255, 255, 0.05);
}

/* ── Results list ───────────────────────────────────────────────────────────── */
.cf-search-results-header {
  display: flex;
  align-items: center;
  gap: var(--cf-space-08);
  padding: var(--cf-space-32) var(--cf-space-16) var(--cf-space-24);
}

.cf-search-results-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--cf-radius-md, 8px);
  background: var(--illustration_gradient_background_01);
  color: var(--cf-text-primary);
  flex-shrink: 0;
}

/* Light mode (default): show the black icon, hide the white one. */
.cf-search-results-header__badge img[data-theme-icon='dark'] {
  display: none;
}

/* Dark mode: show the white icon, hide the black one. */
[data-theme='dark'] .cf-search-results-header__badge img[data-theme-icon='light'] {
  display: none;
}

[data-theme='dark'] .cf-search-results-header__badge img[data-theme-icon='dark'] {
  display: block;
}

.cf-search-results-header__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cf-text-primary);
}

.cf-search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cf-search-result-item {
  list-style: none;
}

.cf-search-result-item:last-child {
  margin-bottom: 0;
}

.cf-search-result-link {
  display: flex;
  flex-direction: column;
  gap: var(--cf-space-16);
  padding: var(--cf-space-16) var(--cf-space-24);
  text-decoration: none;
  transition: background 0.1s;
  outline: none;
}

.cf-search-result-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--cf-text-primary);
  line-height: 24px;
}

.cf-search-result-title mark {
  background: transparent;
  color: var(--cf-link-primary);
  font-weight: 700;
  font-style: normal;
}

.cf-search-result-snippet {
  font-size: 14px;
  color: var(--cf-text-primary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cf-search-result-snippet mark {
  background: transparent;
  color: var(--cf-link-primary-hover);
  font-weight: 500;
  font-style: normal;
}

.cf-search-result-path {
  font-size: 14px;
  color: var(--cf-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── View more ──────────────────────────────────────────────────────────────── */
.cf-search-view-more {
  display: flex;
  align-items: center;
  gap: var(--cf-space-08);
  padding: var(--cf-space-16) var(--cf-space-24);
  font-size: 16px;
  color: var(--color-purple-70);
  background: none;
  cursor: pointer;
  font-family: var(--cf-font-family);
  width: 100%;
  text-align: left;
  transition:
    color 0.12s,
    background 0.1s;
  outline: none;
  border: none;
}

[data-theme='dark'] .cf-search-view-more {
  color: var(--color-purple-30);
}

.cf-search-view-more:hover,
.cf-search-view-more.cf-search-item--focused {
  color: var(--cf-link-primary-hover);
}

.cf-search-view-more:disabled {
  color: var(--cf-text-disabled);
  cursor: default;
}

/* Light mode (default): show the purple-60 icon, hide the purple-30 one. */
.cf-search-view-more__icon[data-theme-icon='dark'] {
  display: none;
}

/* Dark mode: show the purple-30 icon, hide the purple-60 one. */
[data-theme='dark'] .cf-search-view-more__icon[data-theme-icon='light'] {
  display: none;
}

[data-theme='dark'] .cf-search-view-more__icon[data-theme-icon='dark'] {
  display: block;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */
.cf-search-empty-section {
  padding: var(--cf-space-16) 0 4px;
}

.cf-search-empty-section + .cf-search-empty-section {
  margin-top: 4px;
  padding-top: var(--cf-space-16);
}

.cf-search-empty-header {
  display: flex;
  align-items: center;
  gap: var(--cf-space-08);
  padding: 0 var(--cf-space-24) var(--cf-space-08);
}

.cf-search-empty-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--cf-radius-md, 8px);
  background: var(--illustration_gradient_background_01);
  color: var(--cf-text-primary);
  flex-shrink: 0;
}

/* Light mode (default): show the black icon, hide the white one. */
.cf-search-empty-header__badge img[data-theme-icon='dark'] {
  display: none;
}

/* Dark mode: show the white icon, hide the black one. */
[data-theme='dark'] .cf-search-empty-header__badge img[data-theme-icon='light'] {
  display: none;
}

[data-theme='dark'] .cf-search-empty-header__badge img[data-theme-icon='dark'] {
  display: block;
}

.cf-search-empty-header__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--cf-text-primary);
}

/* Ask AI Assistant section shown above results after a query */
.cf-search-ai-section {
  padding-top: var(--cf-space-24);
}

.cf-search-ai-section__header {
  display: flex;
  align-items: center;
  gap: var(--cf-space-08);
  padding: 0 var(--cf-space-16) var(--cf-space-24);
}

.cf-search-ai-section__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--cf-radius-md, 8px);
  background: var(--illustration_gradient_background_01);
  color: var(--cf-text-primary);
  flex-shrink: 0;
}

.cf-search-ai-section__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cf-text-primary);
}

.cf-search-ai {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cf-search-ai__item {
  list-style: none;
}

.cf-search-ai__prompt {
  display: flex;
  align-items: center;
  gap: var(--cf-space-08);
  padding: var(--cf-space-08) var(--cf-space-24);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--cf-font-family);
  font-size: 16px;
  color: var(--cf-text-primary);
  transition:
    background 0.1s,
    color 0.1s;
  outline: none;
}

.cf-search-ai__prompt:hover,
.cf-search-ai__item.cf-search-item--focused .cf-search-ai__prompt {
  color: var(--cf-text-primary);
}

.cf-search-ai__icon {
  flex-shrink: 0;
  color: var(--cf-link-primary);
}

/* ── Loading / error / no-results ───────────────────────────────────────────── */
.cf-search-no-results,
.cf-search-error,
.cf-search-loading {
  padding: var(--cf-space-40) var(--cf-space-24);
  text-align: center;
  font-size: 14px;
  color: var(--cf-text-secondary);
}

.cf-search-no-results strong {
  color: var(--cf-text-primary);
}
.cf-search-error {
  color: var(--cf-support-failure);
}

.cf-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-08);
  color: var(--cf-text-secondary);
}

.cf-search-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--cf-border-subtle);
  border-top-color: var(--cf-link-primary);
  border-radius: 50%;
  animation: cf-search-spin 0.6s linear infinite;
}

@keyframes cf-search-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================================
   DIALOG MODE
   ============================================================================ */
cf-search[mode='dialog'] {
  display: contents;
}

.cf-search-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(217, 217, 217, 0.6);
  align-items: flex-start;
  justify-content: center;
  padding-top: max(var(--cf-space-40), calc(50vh - 356px));
}

[data-theme='dark'] .cf-search-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.cf-search-backdrop.cf-search--open {
  display: flex;
}

body.cf-search-dialog-active {
  overflow: hidden;
}

.cf-search-backdrop .cf-search-panel {
  width: 847px;
  max-width: calc(100vw - var(--cf-space-32));
  max-height: calc(100vh - var(--cf-space-80));
}

/* ============================================================================
   INLINE MODE
   <cf-search mode="inline"> renders only the dropdown panel.
   The anchor input lives outside the component in a position:relative wrapper.
   ============================================================================ */
cf-search[mode='inline'] {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 420px;
  z-index: 1000;
  pointer-events: none;
}

cf-search[mode='inline']:has(.cf-search-dropdown--open) {
  pointer-events: auto;
}

.cf-search-dropdown {
  display: none;
  flex-direction: column;
  border-radius: 8px;
  width: 100%;
}

.cf-search-dropdown--open {
  display: flex;
}

/* ── Mobile (dialog mode) ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cf-search-backdrop {
    padding-top: 0;
    align-items: flex-end;
  }

  .cf-search-backdrop .cf-search-panel {
    width: 100%;
    height: 85vh;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }

  .cf-search-backdrop .cf-search-panel .cf-search-body {
    height: auto;
    flex: 1;
    min-height: 0;
  }
}