/* Shared variables and rules loaded by both home-chat.css and side-chat.css */

:root {
  /* CrowdStrike brand colors */
  --cdx-rgb_blue: 47, 139, 170;
  --cdx-color_blue: rgb(var(--cdx-rgb_blue));
  --cdx-color_dark-blue: rgb(39, 120, 145);
  --cdx-color_x-dark-blue: rgb(21, 97, 122);
  --cdx-color_red: rgb(252, 0, 0);

  --welcome-text-color: var(--cdx-color_red);

  /* Shared with cdx_styles.css — mirrored here since cdx_styles.css is not loaded in this iframe */
  --cdx-c-card-color-border: rgba(255, 255, 255, 0.13);
  --cdx-color-background_4x-light-gray: rgb(71, 71, 81);
  --cdx-color-background_dark-gray: rgb(48, 48, 54);
  --cdx-color-text-placeholder: rgba(255, 255, 255, 0.4);
  --cdx-color-text_default: white;

  /* Case participant picker (cdx_caseParticipantPicker): pill hover background, dropdown row hover, border radius */
  --cdx-color-background-hover_dropdown: rgba(var(--cdx-rgb_blue), 0.25);
  --cdx-color-background_2x-light-gray: rgb(62, 62, 68);

  --cdx-radius-border_small: 4px;

  /* Interaction overlay — hover, focus, and disabled state backgrounds */
  --cdx-color-overlay_subtle: rgba(255, 255, 255, 0.125);

  /* Button Icons */
  --slds-c-icon-color-foreground: white;
  --slds-c-button-text-color-hover: var(--cdx-color_dark-blue);

  /* Tooltips */
  --sds-c-tooltip-color-background: var(--cdx-color_x-dark-blue);
  --slds-c-tooltip-color-background: var(--cdx-color_x-dark-blue);

  /* iframe component tokens — consumed by LWC components (e.g. cdx_caseReviewForm) rendered inside this iframe */
  --cdx-iframe-card-background: rgba(255, 255, 255, 0.06);
  --cdx-iframe-card-border: var(--cdx-c-card-color-border);
  --cdx-iframe-input-background: var(--cdx-color-background_4x-light-gray);
  --cdx-iframe-input-border: rgba(255, 255, 255, 0.2);
  --cdx-iframe-input-disabled-background: rgba(71, 71, 81, 0.4);
  --cdx-iframe-label-color: var(--cdx-color-text_default);
  --cdx-iframe-primary-text-color: var(--cdx-color-text_default);
  --cdx-iframe-secondary-text-color: var(--cdx-color-text-placeholder);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
/* Dark theme overrides — mirrors cdx_styles.css */

.slds-button {
  --slds-c-button-inverse-color-border: rgba(255, 255, 255, 0.5);
  --slds-c-button-inverse-text-color: var(--cdx-color-text_default);
  --slds-c-button-inverse-text-color-active: var(--cdx-color-background_dark-gray);
  --slds-c-button-inverse-text-color-hover: var(--cdx-color-background_dark-gray);
}

.slds-button.slds-button_neutral {
  --slds-c-button-neutral-color-background: transparent;
  --slds-c-button-neutral-color-background-active: transparent;
  --slds-c-button-neutral-color-background-hover: transparent;
  --slds-c-button-shadow-focus: transparent;
  --slds-c-button-text-color: var(--cdx-color-text_default);
  --slds-c-button-text-color-active: var(--cdx-color_dark-blue);
  --slds-c-button-text-color-hover: var(--cdx-color_dark-blue);
  --slds-c-button-neutral-color-border: transparent;
  --slds-c-button-neutral-color-border-active: transparent;
  --slds-c-button-neutral-color-border-hover: transparent;
}

.slds-button.slds-button_brand {
  --slds-c-button-brand-color-background: var(--cdx-color_blue);
  --slds-c-button-brand-color-background-active: var(--cdx-color_dark-blue);
  --slds-c-button-brand-color-background-hover: var(--cdx-color_dark-blue);
  --slds-c-button-brand-color-border: var(--cdx-color_blue);
  --slds-c-button-brand-color-border-active: var(--cdx-color_dark-blue);
  --slds-c-button-brand-color-border-hover: var(--cdx-color_dark-blue);
}

/* ─── Form fields ────────────────────────────────────────────────────────── */
/* Dark theme overrides — mirrors cdx_styles.css patterns not loaded in this iframe */

.slds-checkbox_toggle {
  --lwc-colorBorderInputActive: var(--cdx-color_blue);
  --lwc-shadowButtonFocus: var(--cdx-color_dark-blue);
  --sds-c-button-color-background-checked: var(--cdx-color_blue);
  --sds-c-checkbox-toggle-color-background-checked: var(--cdx-color_blue);
  --sds-c-checkbox-toggle-color-background-checked-hover: var(--cdx-color_dark-blue);
  --sds-c-checkbox-toggle-color-border-checked: var(--cdx-color_blue);
  --sds-c-checkbox-toggle-color-border-focus: var(--cdx-color_dark-blue);
  --sds-c-checkbox-toggle-shadow-focus: var(--cdx-color_dark-blue);
  --slds-c-checkbox-toggle-color-background-checked-focus: var(--cdx-color_dark-blue);
  --slds-c-checkbox-toggle-shadow: var(--cdx-color_dark-blue);
  --slds-g-color-brand-base-60: var(--cdx-color_blue);
}

/* Input and textarea */

.slds-input {
  background-color: var(--cdx-color-background_4x-light-gray) !important;
  color: var(--cdx-color-text_default) !important;
}

.slds-input:disabled {
  background-color: var(--cdx-color-overlay_subtle) !important;
  color: var(--cdx-color-text-placeholder) !important;
  -webkit-text-fill-color: var(--cdx-color-text-placeholder) !important;
  opacity: 1 !important;
}

.slds-textarea,
.slds-textarea:focus,
.slds-textarea:active {
  background-color: var(--cdx-color-background_4x-light-gray) !important;
  color: var(--cdx-color-text_default) !important;
}

.slds-textarea:disabled {
  background-color: var(--cdx-color-overlay_subtle) !important;
  color: var(--cdx-color-text-placeholder) !important;
  -webkit-text-fill-color: var(--cdx-color-text-placeholder) !important;
  opacity: 1 !important;
}

/* Combobox and dropdown */

.slds-combobox__input,
.slds-input_faux {
  background-color: var(--cdx-color-background_4x-light-gray) !important;
  color: var(--cdx-color-text_default) !important;
}

.slds-combobox__input:focus,
.slds-combobox__input:active,
.slds-combobox__input[aria-expanded='true'],
.slds-is-open .slds-combobox__input,
.slds-has-focus .slds-combobox__input {
  background-color: var(--cdx-color-background_4x-light-gray) !important;
  color: var(--cdx-color-text_default) !important;
  box-shadow: none !important;
}

.slds-combobox__input[aria-disabled='true'],
.slds-input_faux[aria-disabled='true'] {
  background-color: var(--cdx-color-overlay_subtle) !important;
  color: var(--cdx-color-text-placeholder) !important;
  -webkit-text-fill-color: var(--cdx-color-text-placeholder) !important;
  opacity: 1 !important;
}

.slds-dropdown {
  --lwc-colorBackgroundRowHover: var(--cdx-color-background-hover_dropdown);
  padding: unset !important;
  background-color: var(--cdx-color-background_4x-light-gray) !important;
  border: 1px solid rgb(77, 77, 82);
  border-radius: var(--cdx-radius-border_small);
  min-width: 100%;
  color: var(--cdx-color-text_default) !important;
}

/* Listbox options */

.slds-listbox_vertical .slds-listbox__option_plain,
.slds-listbox_vertical .slds-listbox__option--plain,
.slds-listbox--vertical .slds-listbox__option_plain,
.slds-listbox--vertical .slds-listbox__option--plain,
.slds-listbox__option,
.slds-listbox__option_plain {
  color: var(--cdx-color-text_default) !important;
  background-color: var(--cdx-color-background_4x-light-gray) !important;
}

.slds-listbox__option:hover,
.slds-listbox__option:focus,
.slds-listbox__option_plain:hover,
.slds-has-focus .slds-listbox__option {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--cdx-color-text_default) !important;
}

.slds-listbox__option[aria-selected='true'],
.slds-is-selected .slds-listbox__option {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--cdx-color-text_default) !important;
}

.slds-listbox__option-icon {
  background-color: unset !important;
  color: var(--cdx-color-text_default);
}

.cdx-time-zone-combobox .slds-listbox__option-icon lightning-icon {
  --slds-c-icon-color-background: var(--cdx-color-text_default);
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */

.scroll-spacer {
  height: var(--lwc-spacingXSmall, 0.5rem) !important;
}

/* ─── CWC streaming response ─────────────────────────────────────────────── */

.cwc-streaming-token-validation-message-text {
  background-color: var(--cdx-color-background_4x-light-gray) !important;
  border-color: var(--cdx-color-text-placeholder) !important;
}

.cwc-streaming-token-validation-icon path {
  fill: white !important;
}

.chat-attachment-button:hover {
  background-color: var(--cdx-color_blue) !important;
}

/* ─── Message Icon Alignment and Padding ─────────────────────────────────────────────── */

.slds-chat-message.message-block_inbound {
  flex-direction: row !important;
}

.message-actionable-title.inbound {
  padding: unset !important;
}