import styled from "@emotion/styled";
const AddInstructionsButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: 1px dashed var(--canvas-border-de-emp);
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--canvas-foreground-de-emp);
  line-height: 16px;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;

  &:hover {
    border-color: var(--canvas-selection-indicator);
    color: var(--canvas-selection-indicator);
  }
`;
const InstructionsLabel = styled.div`
  font-size: 11px;
  font-weight: 600;
  color: var(--canvas-foreground);
  line-height: 16px;
`;
const InstructionsPreview = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  font-size: 9px;
  line-height: 13px;
  color: var(--canvas-foreground-de-emp);
  cursor: pointer;
`;
const InstructionsLine = styled.div`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  > strong {
    font-weight: 600;
  }
`;
const SettingsPreviewContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
  min-width: 280px;
  max-width: 320px;
`;
const SettingsPreviewHeader = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--canvas-border-de-emp);
`;
const SettingsPreviewTitle = styled.div`
  font-size: 14px;
  font-weight: 600;
  color: var(--canvas-foreground-emp);
`;
const SettingsPreviewSubtitle = styled.div`
  font-size: 12px;
  color: var(--canvas-foreground-de-emp);
`;
const SettingsSection = styled.div`
  display: flex;
  flex-direction: column;
  gap: 4px;
`;
const SettingsSectionLabel = styled.div`
  font-size: 12px;
  font-weight: 500;
  color: var(--canvas-foreground-de-emp);
`;
const SettingsSectionValue = styled.div`
  font-size: 14px;
  color: var(--canvas-foreground-emp);
`;
const SettingsPromptBox = styled.div`
  font-size: 13px;
  color: ${({ isEmpty })=>isEmpty ? 'var(--canvas-foreground-de-emp)' : 'var(--canvas-foreground)'};
  font-style: ${({ isEmpty })=>isEmpty ? 'italic' : 'normal'};
  background: var(--canvas-background-hover);
  border: 1px solid var(--canvas-border-de-emp);
  border-radius: 6px;
  padding: 8px 10px;
  max-height: 80px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--canvas-border-de-emp);
    border-radius: 2px;
  }
`;
const SettingsRow = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
`;
const SettingsRowLabel = styled.span`
  color: var(--canvas-foreground-de-emp);
`;
const SettingsRowValue = styled.span`
  color: var(--canvas-foreground-emp);
  font-weight: 500;
`;
const SubLabelContainer = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 6px;
`;
const HealthScoreBadge = styled.span`
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background-color: var(--canvas-background-secondary);
  border-radius: 16px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  color: var(--canvas-foreground-de-emp);
  cursor: pointer;
`;
export { AddInstructionsButton, HealthScoreBadge, InstructionsLabel, InstructionsLine, InstructionsPreview, SettingsPreviewContainer, SettingsPreviewHeader, SettingsPreviewSubtitle, SettingsPreviewTitle, SettingsPromptBox, SettingsRow, SettingsRowLabel, SettingsRowValue, SettingsSection, SettingsSectionLabel, SettingsSectionValue, SubLabelContainer };
