@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:ital,wght@0,400;1,400&display=swap');

:root {
  /* Light mode — warm parchment palette */
  --color-bg: #F5F1E8;
  --color-bg-secondary: #FBF8F0;
  --color-bg-card: #FBF8F0;
  --color-surface: #EFEAE0;
  --color-text: #14171A;
  --color-text-secondary: #5A5852;
  --color-text-muted: #9A9890;
  --color-border: #D9D6CE;
  --color-input-border: #D9D6CE;
  --color-primary: #5B4A8A;
  --color-danger: #C04A1F;
  --color-tag-bg: rgba(91, 74, 138, 0.12);
  --color-tag-text: #5B4A8A;
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-toast-success: #4A5D3F;
  --color-toast-error: #C04A1F;
  --color-status-todo: #3F4651;
  --color-status-todo-bg: rgba(63, 70, 81, 0.10);
  --color-status-in-progress: #5B4A8A;
  --color-status-in-progress-bg: rgba(91, 74, 138, 0.12);
  --color-status-done: #4A5D3F;
  --color-status-done-bg: rgba(74, 93, 63, 0.12);
  --color-priority-low: #3D5A6E;
  --color-priority-low-bg: rgba(61, 90, 110, 0.12);
  --color-priority-medium: #8B6F1E;
  --color-priority-medium-bg: rgba(139, 111, 30, 0.12);
  --color-priority-high: #C04A1F;
  --color-priority-high-bg: rgba(192, 74, 31, 0.12);
  --color-wikilink: #5B4A8A;
  --color-wikilink-bg: rgba(91, 74, 138, 0.12);
  --color-overdue: #C04A1F;
  --color-code-bg: #EBEDF0;
  --color-code-inline-bg: #EBEDF0;
  --color-table-stripe: rgba(20, 23, 26, 0.025);
  --color-success: #4A5D3F;
  --color-warning: #8B6F1E;
  --color-input-bar-bg: #EFEAE0;
  --color-input-bar-text: #14171A;
  --color-input-bar-placeholder: rgba(20, 23, 26, 0.4);
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-bubble-user-bg: transparent;
  --color-bubble-user-border: #D9D6CE;
  --color-bubble-user-text: #5A5852;
  --color-bubble-asst-shadow: 0 2px 14px rgba(91, 74, 138, 0.06), 0 1px 4px rgba(0, 0, 0, 0.05);
  --color-primary-solid: #5B4A8A;
  --color-primary-deep: #3F3560;
  --gradient-cta: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-deep));
  --glow-cta: 0 2px 10px rgba(91, 74, 138, 0.35);
  --glow-cta-hover: 0 4px 20px rgba(91, 74, 138, 0.55);
  --glow-soft: 0 0 16px rgba(91, 74, 138, 0.35);
  --color-primary-faint: rgba(91, 74, 138, 0.08);
  --color-primary-tint: rgba(91, 74, 138, 0.12);
  --color-primary-wash: rgba(91, 74, 138, 0.20);

  /* Action color set — Hybrid rule: action buttons use these, accent reserved for brand moments */
  --color-action-primary: #4A5D3F;
  --color-action-primary-hover: #5A6F4D;
  --color-action-secondary: #8B7355;
  --color-action-secondary-hover: #A0876A;
  --color-action-destructive: #6B2118;
  --color-action-destructive-hover: #7E2A1F;
  --color-action-ghost-border: #3F4651;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --focus-ring: 0 0 0 2px rgba(91, 74, 138, 0.5);
  /* Layout */
  --page-max-width: 1200px;
  --page-padding-x: 1rem;
  --sidebar-width: 260px;
  --chat-reading-width: min(1200px, 100%);
  --chat-context-sidebar-width: 220px;
}

[data-theme="dark"] {
  /* Dark mode — Obsidian / Iron / Pewter */
  --color-bg: #14171A;
  --color-bg-secondary: #1E2228;
  --color-bg-card: #1E2228;
  --color-surface: #2C313A;
  --color-text: #E8E4D8;
  --color-text-secondary: #C2BFB4;
  --color-text-muted: #9C9A92;
  --color-border: #3F4651;
  --color-input-border: #3F4651;
  --color-primary: #5B4A8A;
  --color-danger: #C04A1F;
  --color-tag-bg: rgba(91, 74, 138, 0.15);
  --color-tag-text: #5B4A8A;
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-toast-success: #4A5D3F;
  --color-toast-error: #C04A1F;
  --color-status-todo: #3F4651;
  --color-status-todo-bg: rgba(63, 70, 81, 0.18);
  --color-status-in-progress: #5B4A8A;
  --color-status-in-progress-bg: rgba(91, 74, 138, 0.18);
  --color-status-done: #4A5D3F;
  --color-status-done-bg: rgba(74, 93, 63, 0.18);
  --color-priority-low: #3D5A6E;
  --color-priority-low-bg: rgba(61, 90, 110, 0.18);
  --color-priority-medium: #8B6F1E;
  --color-priority-medium-bg: rgba(139, 111, 30, 0.18);
  --color-priority-high: #C04A1F;
  --color-priority-high-bg: rgba(192, 74, 31, 0.18);
  --color-wikilink: #5B4A8A;
  --color-wikilink-bg: rgba(91, 74, 138, 0.18);
  --color-overdue: #C04A1F;
  --color-code-bg: #14171A;
  --color-code-inline-bg: #1E2228;
  --color-table-stripe: rgba(255, 255, 255, 0.025);
  --color-success: #4A5D3F;
  --color-warning: #8B6F1E;
  --color-input-bar-bg: #1E2228;
  --color-input-bar-text: #E8E4D8;
  --color-input-bar-placeholder: rgba(232, 228, 216, 0.35);
  --color-overlay: rgba(0, 0, 0, 0.65);
  --color-bubble-user-bg: transparent;
  --color-bubble-user-border: #3F4651;
  --color-bubble-user-text: #C2BFB4;
  --color-bubble-asst-shadow: 0 4px 28px rgba(91, 74, 138, 0.14), 0 2px 8px rgba(0, 0, 0, 0.4);
  --color-primary-solid: #5B4A8A;
  --color-primary-deep: #3F3560;
  --gradient-cta: linear-gradient(135deg, var(--color-primary-solid), var(--color-primary-deep));
  --glow-cta: 0 2px 12px rgba(91, 74, 138, 0.45);
  --glow-cta-hover: 0 4px 24px rgba(91, 74, 138, 0.65);
  --glow-soft: 0 0 18px rgba(91, 74, 138, 0.4);
  --color-primary-faint: rgba(91, 74, 138, 0.10);
  --color-primary-tint: rgba(91, 74, 138, 0.14);
  --color-primary-wash: rgba(91, 74, 138, 0.22);

  /* Action color set — identical across themes */
  --color-action-primary: #4A5D3F;
  --color-action-primary-hover: #5A6F4D;
  --color-action-secondary: #8B7355;
  --color-action-secondary-hover: #A0876A;
  --color-action-destructive: #6B2118;
  --color-action-destructive-hover: #7E2A1F;
  --color-action-ghost-border: #3F4651;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11";
  line-height: 1.5;
  transition: background-color 0.2s, color 0.2s;
}

h1, h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.3;
}

h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.3;
}

code, pre, kbd, samp {
  font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-feature-settings: "liga", "calt";
}

::selection {
  background: rgba(91, 74, 138, 0.3);
  color: var(--color-text);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

button:not(:disabled):active,
.btn:not(:disabled):active,
[role="button"]:not(:disabled):active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* Responsive breakpoints: 480px (phone), 768px (tablet), 1024px (desktop) */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
  button,
  [role="button"],
  .btn-new-conv,
  .btn-send {
    min-height: 44px;
  }
}
@media (min-width: 769px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Neutral hairline scrollbars — chrome is structural, not branded */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Floating inline assist button (teleported to body, cannot be scoped) */
.inline-assist-btn {
  position: fixed;
  z-index: 150;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--color-shadow);
  white-space: nowrap;
}
.inline-assist-btn:hover {
  filter: brightness(1.1);
}