/* kilocode_change - new file */
/* Kilo Model Selector Popover overrides – styled to match VSCode look */

/* ModelSelectorPopover content panel */
[data-component="model-selector-popover"] {
  border-radius: 2px;
  border: 1px solid var(--border-focus, var(--vscode-focusBorder, #007fd4));
  background-color: var(--background-stronger);
  padding: 0;
  width: 288px;
  height: 320px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.36);

  /* List inside the popover */
  [data-component="list"] {
    padding: 0;
    gap: 0;

    /* Search area */
    [data-slot="list-search-wrapper"] {
      border-radius: 6px;
      padding: 4px 8px;
      margin-bottom: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      margin: 8px;
      background-color: var(--input-base, var(--vscode-input-background, #3c3c3c));

      [data-component="input"] input {
        font-size: 12px;
      }
    }

    [data-slot="list-search"] {
      padding: 0;
      border-radius: 0;
      background: transparent;
      gap: 8px;

      [data-slot="list-search-container"] {
        gap: 6px;
      }
    }

    /* Scroll container */
    [data-slot="list-scroll"] {
      gap: 0;
      padding: 4px 0;
      max-height: 328px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* Group headers */
    [data-slot="list-header"] {
      padding: 6px 12px 4px;
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-weak);
      background: var(--background-stronger);

      &::after {
        display: none;
      }
    }

    /* Last group remove extra bottom padding */
    [data-slot="list-group"]:last-child {
      padding-bottom: 4px;
    }

    /* List items */
    [data-slot="list-item"] {
      padding: 6px 12px;
      font-size: 12px;
      line-height: 16px;
      border-radius: 0;
      cursor: pointer;

      &[data-active="true"] {
        border-radius: 0;
        background-color: var(--surface-interactive-base);
        color: var(--text-on-interactive-base, var(--text-strong));
      }

      &[data-selected="true"] {
        background-color: var(--surface-interactive-base);
        color: var(--text-on-interactive-base, var(--text-strong));
      }
    }

    /* Empty state */
    [data-slot="list-empty-state"] {
      padding: 16px 12px;

      [data-slot="list-message"] {
        font-size: 12px;
      }
    }
  }
}
