/* Align the third-party thread UI with Beacon's shared theme tokens. */
.xhaitool-thread-container {
  --xhai-thread-primary-color: var(--bc-accent-orange);
  --xhai-thread-secondary-color: var(--bc-accent-orange);
  --xhai-thread-text-color: var(--bc-ink);
  --xhai-thread-light-text-color: var(--bc-body);
  --xhai-thread-background-color: var(--bc-canvas);
  --xhai-thread-light-background: var(--bc-semantic-color-surface-subtle);
  --xhai-thread-border-color: var(--bc-hairline);
  --xhai-thread-dot-color: var(--bc-accent-orange);
  --xhai-thread-shadow: none;
  --xhai-thread-shadow-hover: none;
  --xhai-c1-primary: var(--bc-accent-orange);
  --xhai-c1-primary-hover: var(--bc-accent-orange);
  --xhai-c1-primary-light: var(--bc-semantic-color-surface-subtle);
  --xhai-c1-primary-border: var(--bc-accent-orange);
  --xhai-c1-gradient: linear-gradient(135deg, var(--bc-accent-orange), var(--bc-accent-orange));
  --xhai-c1-text-primary: var(--bc-ink);
  --xhai-c1-text-secondary: var(--bc-body);
  --xhai-c1-text-tertiary: var(--bc-body);
  --xhai-c1-bg-primary: var(--bc-canvas);
  --xhai-c1-bg-secondary: var(--bc-semantic-color-surface-subtle);
  --xhai-c1-bg-tertiary: var(--bc-semantic-color-surface-subtle);
  --xhai-c1-border: var(--bc-hairline);
}

html.io-black-mode .xhaitool-thread-container {
  --xhai-thread-primary-color: var(--bc-accent-orange);
  --xhai-thread-secondary-color: var(--bc-accent-orange);
  --xhai-thread-text-color: var(--bc-on-dark);
  --xhai-thread-light-text-color: var(--bc-body-on-dark);
  --xhai-thread-background-color: var(--bc-canvas-dark);
  --xhai-thread-light-background: var(--bc-surface-dark-soft);
  --xhai-thread-border-color: var(--bc-surface-dark-soft);
  --xhai-thread-dot-color: var(--bc-accent-orange);
  --xhai-thread-shadow: none;
  --xhai-thread-shadow-hover: none;
  --xhai-c1-primary: var(--bc-accent-orange);
  --xhai-c1-primary-hover: var(--bc-accent-orange);
  --xhai-c1-primary-light: var(--bc-surface-dark-soft);
  --xhai-c1-primary-border: var(--bc-accent-orange);
  --xhai-c1-gradient: linear-gradient(135deg, var(--bc-accent-orange), var(--bc-accent-orange));
  --xhai-c1-text-primary: var(--bc-on-dark);
  --xhai-c1-text-secondary: var(--bc-body-on-dark);
  --xhai-c1-text-tertiary: var(--bc-muted-on-dark);
  --xhai-c1-bg-primary: var(--bc-canvas-dark);
  --xhai-c1-bg-secondary: var(--bc-surface-dark-soft);
  --xhai-c1-bg-tertiary: var(--bc-surface-dark-soft);
  --xhai-c1-border: var(--bc-surface-dark-soft);
}

.xhaitool-thread-container .source-card,
.xhaitool-thread-container .xhrelated-card,
.xhaitool-thread-container .xhaicomm-area,
.xhaitool-thread-container .xhaicomm-input,
.xhaitool-thread-container .xhaicomm-reply-btn,
.xhaitool-thread-container .xhai-btn {
  border-radius: var(--bc-rounded-sm, 4px) !important;
}

.xhaitool-thread-container .source-card,
.xhaitool-thread-container .xhrelated-card {
  border-color: var(--bc-hairline);
}

.xhaitool-thread-container .xhaicomm-area {
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.xhaitool-thread-container .xhaicomm-input {
  box-sizing: border-box;
  border: 1px solid var(--bc-hairline) !important;
  background: var(--bc-semantic-color-surface-subtle) !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--bc-ink);
}

body.single-thread .xhaitool-thread-container textarea.xhaicomm-input:focus {
  border-color: var(--bc-accent-orange) !important;
  background: var(--bc-semantic-color-surface-subtle) !important;
  box-shadow: none !important;
  outline: none !important;
}

.xhaitool-thread-container .xhaicomm-input::placeholder {
  color: var(--bc-body);
  opacity: 1;
}

html.io-black-mode .xhaitool-thread-container .source-card,
html.io-black-mode .xhaitool-thread-container .xhrelated-card {
  border-color: var(--bc-surface-dark-soft);
}

html.io-black-mode .xhaitool-thread-container .xhaicomm-area {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.io-black-mode .xhaitool-thread-container .xhaicomm-input {
  border: 1px solid var(--bc-surface-dark-soft) !important;
  background: var(--bc-surface-dark-soft) !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--bc-on-dark) !important;
}

html.io-black-mode:not(#_) body.single-thread .xhaitool-thread-container textarea.xhaicomm-input:focus {
  border-color: var(--bc-accent-orange) !important;
  background: var(--bc-surface-dark-soft) !important;
  box-shadow: none !important;
  outline: none !important;
}

html.io-black-mode .xhaitool-thread-container .xhaicomm-input::placeholder {
  color: var(--bc-muted-on-dark);
}