@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root, .light {
  --presentation: 255 255 255;
  --text-primary: 2 4 15;
  --text-secondary: 54 56 62;
  --text-secondary-alt: 54 56 62;
  --text-tertiary: 54 56 62;
  --text-muted: 54 56 62;
  --surface-primary: 255 255 255;
  --surface-primary-alt: 246 249 247;
  --surface-primary-contrast: 232 239 235;
  --surface-secondary: 246 249 247;
  --surface-secondary-alt: 232 239 235;
  --surface-tertiary: 232 239 235;
  --surface-tertiary-alt: 255 255 255;
  --surface-dialog: 255 255 255;
  --surface-active: 176 237 210;
  --surface-active-alt: 232 239 235;
  --surface-hover: 232 239 235;
  --surface-hover-alt: 222 231 225;
  --surface-composer-hover: 232 239 235;
  --surface-chat: 246 249 247;
  --surface-fixed: 255 255 255;
  --surface-fixed-hover: 246 249 247;
  --text-fixed: 2 4 15;
  --surface-inverted: 2 4 15;
  --surface-inverted-hover: 15 23 40;
  --text-inverted: 255 255 255;
  --surface-submit: 176 237 210;
  --surface-submit-hover: 155 221 191;
  --accent-primary: 2 4 15;
  --border-light: 222 231 225;
  --border-medium: 190 205 195;
  --border-heavy: 109 125 115;
}

.dark {
  --presentation: 2 4 15;
  --text-primary: 255 255 255;
  --text-secondary: 209 218 213;
  --text-secondary-alt: 209 218 213;
  --text-tertiary: 209 218 213;
  --text-muted: 209 218 213;
  --surface-primary: 2 4 15;
  --surface-primary-alt: 15 23 40;
  --surface-primary-contrast: 15 23 40;
  --surface-secondary: 15 23 40;
  --surface-secondary-alt: 54 56 62;
  --surface-tertiary: 54 56 62;
  --surface-tertiary-alt: 54 56 62;
  --surface-dialog: 15 23 40;
  --surface-active: 54 56 62;
  --surface-active-alt: 54 56 62;
  --surface-hover: 54 56 62;
  --surface-hover-alt: 54 56 62;
  --surface-composer-hover: 54 56 62;
  --surface-chat: 15 23 40;
  --surface-fixed: 15 23 40;
  --surface-fixed-hover: 54 56 62;
  --text-fixed: 255 255 255;
  --surface-inverted: 176 237 210;
  --surface-inverted-hover: 155 221 191;
  --text-inverted: 2 4 15;
  --surface-submit: 176 237 210;
  --surface-submit-hover: 155 221 191;
  --accent-primary: 176 237 210;
  --border-light: 54 56 62;
  --border-medium: 88 99 108;
  --border-heavy: 142 158 151;
}

body, body.font-sans, button, input, select, textarea {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

/* Auth Logo - ReactPGM Branding */
div:has(> img[src="assets/logo.svg"]) {
  height: 125px;
}

img[src="assets/logo.svg"] {
  content: url('/assets/reactpgm-logo.png');
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  width: 260px;
  height: 125px;
  max-width: calc(100vw - 48px);
  padding: 19.5px 20px;
  background-color: rgb(2 4 15);
  border-radius: 12px;
  object-fit: contain;
}

/* Primary buttons - Mint accent with ink text */
#send-button, main:has(.w-authPageWidth) button[type="submit"] {
  background-color: rgb(var(--surface-submit));
  color: #02040f;
}

#send-button:hover:not(:disabled), main:has(.w-authPageWidth) button[type="submit"]:hover:not(:disabled) {
  background-color: rgb(var(--surface-submit-hover));
}

/* Link colors - ink in light, mint in dark */
.light a {
  color: rgb(var(--text-primary));
}

.dark a {
  color: rgb(var(--accent-primary));
}

/* Chat and UI consistency */
:root [data-testid="composer-surface"] {
  background-color: rgb(var(--surface-primary-alt));
  color: rgb(var(--text-primary));
}

#prompt-textarea {
  color: rgb(var(--text-primary));
  caret-color: rgb(var(--text-primary));
}

#send-button {
  background-color: rgb(var(--surface-submit));
  color: #02040f;
}

#send-button:hover:not([disabled]) {
  background-color: rgb(var(--surface-submit-hover));
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Readable contrast and wrapping */
.markdown {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Preserve the native disabled, stop and destructive controls. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgb(var(--accent-primary));
  outline-offset: 3px;
}

img[src$="/reactpgm-logo.png"] {
  background-color: #02040f;
  object-fit: contain;
}

@media (max-width: 480px) {
  main:has(.w-authPageWidth) h1 { font-size: 1.75rem; }
}

/* Boyd uses one fixed agent. Keep the original wordmark in the native header. */
div:has(> [data-testid="model-selector-button"])::before {
  content: '';
  display: block;
  width: 148px;
  height: 44px;
  border-radius: 8px;
  background: #02040f url('/assets/reactpgm-logo.png') center / 126px auto no-repeat;
}

/* Native UI permissions hide optional tools; these remaining controls have
   no config flag in this installed UI. Chat uploads use the separate composer. */
[data-testid="model-selector-button"],
[data-testid="nav-panel-files"],
[data-testid="nav-panel-memories"],
[id$="nav-panel-files"],
[id$="nav-panel-memories"],
#audio-recorder,
div.flex.flex-col.px-3.text-sm:has(> div > button > svg.lucide-folders) {
  display: none;
}