/* ============================================
   Suggest Bar
   ============================================ */

/* Strip the card border from tool-part-wrapper when it contains a suggest bar */
[data-component="tool-part-wrapper"]:has([data-component="suggest-bar"]) {
  border: none !important;
  border-radius: 0;
  overflow: visible;
}

[data-component="suggest-bar"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--background-base) 88%, var(--vscode-textLink-foreground) 12%);

  [data-slot="suggest-bar-copy"] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
  }

  [data-slot="suggest-bar-icon"] {
    display: inline-flex;
    align-items: center;
    color: var(--text-info, var(--vscode-textLink-foreground));
    flex-shrink: 0;
  }

  [data-slot="suggest-bar-text"] {
    min-width: 0;
    color: var(--text-base);
    font-size: var(--kilo-font-size-12);
    line-height: 1.4;
  }

  [data-slot="suggest-bar-actions"] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;

    [data-component="button"] {
      min-width: 100px;
      white-space: normal;
    }
  }
}

@media (max-width: 700px) {
  [data-component="suggest-bar"] {
    flex-direction: column;
    align-items: stretch;
  }
}
