/*
 * Optional TrustSphere Platform Design System preview.
 * The original application stylesheet remains the default. These scoped
 * adapters activate only when the user selects TPDS Light or TPDS Dark.
 */

[data-theme="tpds-light"],
[data-theme="tpds-dark"] {
  --ts-color-primary: #1f4e79;
  --ts-color-secondary: #6a3fd1;
  --ts-gradient-brand: linear-gradient(135deg, #1f4e79, #6a3fd1);
  --ts-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ts-radius: 8px;
  --ts-radius-lg: 12px;
  --ts-radius-xl: 16px;
  --ts-transition: .2s ease;
}

[data-theme="tpds-light"] {
  --ts-accent-blue: #0e5e96;
  --ts-accent-purple: #6a3fd1;
  --ts-success: #16a34a;
  --ts-warning: #d97706;
  --ts-danger: #dc2626;
  --ts-bg-page: #f4f6f9;
  --ts-bg-card: #fff;
  --ts-bg-sidebar: #1f4e79;
  --ts-bg-overlay: #f8fafc;
  --ts-bg-input: #fff;
  --ts-bg-hover: rgba(14, 94, 150, .06);
  --ts-text-primary: #1a2332;
  --ts-text-secondary: #4a5568;
  --ts-text-muted: #6b7280;
  --ts-border: rgba(0, 0, 0, .10);
  --ts-border-active: rgba(14, 94, 150, .40);
  --ts-shadow-card: 0 2px 12px rgba(0, 0, 0, .08);
  --ts-shadow-glow: 0 0 16px rgba(14, 94, 150, .20);
}

[data-theme="tpds-dark"] {
  color-scheme: dark;
  --ts-accent-blue: #2fa4ff;
  --ts-accent-purple: #8a5cff;
  --ts-success: #22c55e;
  --ts-warning: #f59e0b;
  --ts-danger: #ef4444;
  --ts-bg-page: #0e1b2b;
  --ts-bg-card: #152438;
  --ts-bg-sidebar: #0a1420;
  --ts-bg-overlay: #1a2d44;
  --ts-bg-input: rgba(0, 0, 0, .25);
  --ts-bg-hover: rgba(47, 164, 255, .05);
  --ts-text-primary: #fff;
  --ts-text-secondary: #94a3b8;
  --ts-text-muted: #64748b;
  --ts-border: rgba(255, 255, 255, .10);
  --ts-border-active: rgba(47, 164, 255, .40);
  --ts-shadow-card: 0 4px 16px rgba(0, 0, 0, .35);
  --ts-shadow-glow: 0 0 20px rgba(47, 164, 255, .30);
}

[data-theme^="tpds-"] {
  --bg: var(--ts-bg-page);
  --surface: var(--ts-bg-card);
  --surface-soft: var(--ts-bg-overlay);
  --sidebar: var(--ts-bg-sidebar);
  --sidebar-soft: var(--ts-bg-overlay);
  --sidebar-line: var(--ts-border);
  --text: var(--ts-text-primary);
  --muted: var(--ts-text-secondary);
  --line: var(--ts-border);
  --accent: var(--ts-color-primary);
  --accent-hover: var(--ts-accent-blue);
  --success: var(--ts-success);
  --success-soft: color-mix(in srgb, var(--ts-success) 12%, transparent);
  --warning: var(--ts-warning);
  --warning-soft: color-mix(in srgb, var(--ts-warning) 12%, transparent);
  --danger: var(--ts-danger);
  --danger-soft: color-mix(in srgb, var(--ts-danger) 12%, transparent);
  --shadow: var(--ts-shadow-card);
  font-family: var(--ts-font);
}

.theme-preview-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.theme-preview-button:hover {
  color: var(--text);
  border-color: var(--ts-border-active, #bfcbd9);
}

.theme-preview-swatch {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #dce3ec 50%, #243b64 50%);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 50%;
}

[data-theme^="tpds-"] .theme-preview-button { box-shadow: var(--ts-shadow-card); }
[data-theme^="tpds-"] .theme-preview-swatch {
  background: var(--ts-gradient-brand);
  border-color: transparent;
}

[data-theme^="tpds-"] body,
[data-theme^="tpds-"] .main,
[data-theme^="tpds-"] .chat-area {
  transition: background-color var(--ts-transition), color var(--ts-transition);
}

[data-theme^="tpds-"] .sidebar {
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--ts-accent-blue) 22%, transparent), transparent 36%), var(--ts-bg-sidebar);
}

[data-theme^="tpds-"] .brand-mark,
[data-theme^="tpds-"] .hero-icon,
[data-theme^="tpds-"] #sendBtn {
  color: #fff;
  background: var(--ts-gradient-brand);
  box-shadow: var(--ts-shadow-glow);
}

[data-theme^="tpds-"] .new-chat-btn,
[data-theme^="tpds-"] .destination-card:hover,
[data-theme^="tpds-"] .destination-card.active,
[data-theme^="tpds-"] .security-card {
  background: color-mix(in srgb, var(--ts-accent-blue) 13%, transparent);
  border-color: color-mix(in srgb, var(--ts-accent-blue) 32%, transparent);
}

[data-theme^="tpds-"] .topbar {
  background: color-mix(in srgb, var(--ts-bg-card) 92%, transparent);
}

[data-theme^="tpds-"] .starter,
[data-theme^="tpds-"] .assistant .bubble,
[data-theme^="tpds-"] .decision-card,
[data-theme^="tpds-"] .option-button,
[data-theme^="tpds-"] .protection-cell,
[data-theme^="tpds-"] .protection-foot-item,
[data-theme^="tpds-"] .composer,
[data-theme^="tpds-"] .attachment-chip,
[data-theme^="tpds-"] .user-file-card,
[data-theme^="tpds-"] .security-drawer,
[data-theme^="tpds-"] .runtime-card,
[data-theme^="tpds-"] .drawer-field,
[data-theme^="tpds-"] .request-id-card {
  color: var(--ts-text-primary);
  background: var(--ts-bg-card);
  border-color: var(--ts-border);
  box-shadow: var(--ts-shadow-card);
}

[data-theme^="tpds-"] .starter:hover,
[data-theme^="tpds-"] .option-button:hover {
  background: var(--ts-bg-hover);
  border-color: var(--ts-border-active);
  box-shadow: var(--ts-shadow-glow);
}

[data-theme^="tpds-"] .composer textarea {
  color: var(--ts-text-primary);
  background: var(--ts-bg-input);
}

[data-theme^="tpds-"] .composer textarea::placeholder { color: var(--ts-text-muted); }

[data-theme^="tpds-"] .composer .attach-btn,
[data-theme^="tpds-"] .transform-preview,
[data-theme^="tpds-"] .protection-card,
[data-theme^="tpds-"] .security-notice,
[data-theme^="tpds-"] .drawer-section {
  color: var(--ts-text-secondary);
  background: var(--ts-bg-overlay);
  border-color: var(--ts-border);
}

[data-theme="tpds-dark"] .message-role,
[data-theme="tpds-dark"] .protection-value,
[data-theme="tpds-dark"] .protection-foot-item strong,
[data-theme="tpds-dark"] .drawer-field strong,
[data-theme="tpds-dark"] .runtime-card strong { color: var(--ts-text-primary); }

[data-theme^="tpds-"] .top-status,
[data-theme^="tpds-"] .route-online {
  color: var(--ts-success);
  background: color-mix(in srgb, var(--ts-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--ts-success) 28%, transparent);
}

[data-theme^="tpds-"] .decision-icon,
[data-theme^="tpds-"] .decision-badge {
  color: var(--ts-warning);
  background: color-mix(in srgb, var(--ts-warning) 13%, transparent);
  border-color: color-mix(in srgb, var(--ts-warning) 28%, transparent);
}

[data-theme^="tpds-"] .message.blocked .bubble {
  color: var(--ts-danger);
  background: color-mix(in srgb, var(--ts-danger) 12%, var(--ts-bg-card));
  border-color: color-mix(in srgb, var(--ts-danger) 30%, transparent);
}

@media (max-width: 640px) {
  .theme-preview-button { width: 34px; justify-content: center; padding: 7px; }
  .theme-preview-button > :last-child { display: none; }
}