/* Kilo Prompt Input overrides – styled to match legacy ChatTextArea look */

/* Form wrapper: VS Code native input look instead of pill shape */
[data-component="prompt-input-form"] {
  border-radius: 0.25rem;
  background-color: var(--input-base, var(--vscode-input-background, #3c3c3c));
  border: 1px solid var(--border-weak-base, var(--vscode-input-border, #3c3c3c));
  box-shadow: none;

  &:focus-within {
    border-color: var(--border-focus, var(--vscode-focusBorder, #007fd4));
    box-shadow: none;
  }
}

/* Scroll container: VS Code text-area min height and max height */
[data-component="prompt-input-form"] [data-slot="prompt-input-scroll"] {
  max-height: 200px;
  min-height: 90px;
}

/* Editable content div: VS Code text-field sizing and typography */
[data-component="prompt-input-form"] [data-component="prompt-input"] {
  padding: 6px 8px;
  padding-right: 36px;
  font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--text-strong, var(--vscode-input-foreground, #cccccc));
}

/* Placeholder text: match editable div padding */
[data-component="prompt-input-form"] [data-slot="prompt-input-placeholder"] {
  padding: 6px 8px;
  padding-right: 36px;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

/* Bottom toolbar: tighter padding to match legacy control bar */
[data-component="prompt-input-form"] [data-slot="prompt-input-toolbar"] {
  padding: 4px 8px;
}

/*
 * Buttons inside the prompt toolbar:
 * Override the global button.css sizing to match legacy compact style.
 * The model selector trigger & variant cycle buttons use Button variant="ghost"
 * and need to look like the legacy `SelectDropdown` triggers.
 */

[data-component="prompt-input-form"] [data-slot="prompt-input-toolbar"] {
  > div:first-child {
    [data-component="button"] {
      height: auto !important;
      min-height: 22px;
      padding: 4px 6px !important;
      font-size: var(--kilo-font-size-12);
      line-height: normal;
      border-radius: 6px;
      background: var(--surface-base);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: none;
      opacity: 1;
      gap: 6px;
      white-space: nowrap;
      transition: all 150ms;
      color: var(--text-base, var(--vscode-foreground));

      &[data-expanded] {
        background: var(--surface-base-hover) !important;
        background-color: var(--surface-base-hover) !important;
      }

      &:hover:not(:disabled) {
        background: var(--surface-base-hover);
        background-color: var(--surface-base-hover);
      }

      &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 1px var(--border-focus);
      }
    }
  }
  /* Icon buttons in toolbar (attach file, submit) keep their own styling */
  > div:nth-child(2) {
    [data-component="button"] {
      background: transparent;
      border: none;

      [data-slot="icon-svg"] {
        color: var(--icon-base);
      }

      [data-slot="progress-circle-background"] {
        stroke: var(--icon-base);
      }

      [data-slot="progress-circle-progress"] {
        stroke: var(--border-focus, var(--vscode-focusBorder, #007fd4));
      }
    }
    [data-component="icon-button"] {
      [data-slot="icon-svg"] {
        color: var(--icon-base) !important;
      }
    }
  }
}

/* Remove provider icons from prompt input toolbar until we have a good design for them in that context */
[data-component="prompt-input-form"] [data-slot="prompt-input-toolbar"] [data-component="provider-icon"] {
  display: none !important;
}
