/* ============================================
   RynChat — Global Styles & Layout
   "Midnight Manuscript" redesign
   Mobile-first, three-panel layout
   ============================================ */

/* --- Design Tokens --- */
:root {
  /* Color palette — Deep charcoal + warm amber
     Scene: mahasiswa in a kost room at 11pm, desk lamp only.
     Focused, tired. Needs calm, reliable, easy on the eyes. */
  --bg: oklch(0.145 0.012 260);
  --bg-surface: oklch(0.175 0.012 260);
  --bg-elevated: oklch(0.205 0.014 260);
  --bg-hover: oklch(0.245 0.015 260);
  --bg-active: oklch(0.285 0.015 260);
  --text: oklch(0.93 0.004 80);
  --text-secondary: oklch(0.70 0.008 80);
  --text-tertiary: oklch(0.50 0.008 80);
  --text-inverse: oklch(0.14 0.012 260);
  --primary: oklch(0.42 0.035 260);
  --primary-light: oklch(0.50 0.035 260);
  --primary-dark: oklch(0.35 0.025 260);
  --accent: oklch(0.78 0.14 70);
  --accent-dim: oklch(0.58 0.12 70);
  --border: oklch(0.30 0.012 260);
  --border-subtle: oklch(0.23 0.010 260);
  --success: oklch(0.62 0.14 148);
  --error: oklch(0.57 0.18 25);
  --warning: oklch(0.78 0.14 82);
  --shadow: oklch(0.04 0.008 260 / 0.40);
  --shadow-md: oklch(0.04 0.008 260 / 0.50);
  --shadow-lg: oklch(0.04 0.008 260 / 0.60);
  --glow-accent: oklch(0.78 0.14 70 / 0.14);
  --glow-accent-strong: oklch(0.78 0.14 70 / 0.22);
  /* TECH-06: --bg-card alias for elevated surface used in mobile header buttons */
  --bg-card: oklch(0.205 0.014 260);
  /* Alias used by AI score indicator */
  --text-light: oklch(0.50 0.008 80);

  /* Typography — Crimson Pro (heading), Outfit (body), JetBrains Mono (code) */
  --font-heading: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type scale — 1.18 ratio (base = small mobile) */
  --fs-xs: 0.6875rem;
  --fs-sm: 0.75rem;
  --fs-base: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.25rem;
  --fs-3xl: 1.625rem;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* Spacing — 4px base */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Border radius */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 150ms var(--ease-out-expo);
  --transition-normal: 250ms var(--ease-out-expo);
  --transition-slow: 400ms var(--ease-out-expo);

  /* Z-index layers */
  --z-base: 1;
  --z-nav: 200;
  --z-header: 150;
  --z-sidebar: 200;
  --z-modal-backdrop: 290;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* Layout — mobile-first defaults */
  --nav-width: 0px;
  --sidebar-width: 100%;

  /* Mobile header height — used for scroll-bottom-btn positioning */
  --header-height: 56px;

  /* Touch target size (WCAG 2.5.5) */
  --touch-target: 44px;
}

[data-theme="blue"] {
  --bg: oklch(0.16 0.03 245);
  --bg-surface: oklch(0.19 0.03 245);
  --bg-elevated: oklch(0.22 0.03 245);
  --bg-hover: oklch(0.26 0.04 245);
  --bg-active: oklch(0.30 0.04 245);
  --text: oklch(0.95 0.01 245);
  --text-secondary: oklch(0.75 0.02 245);
  --text-tertiary: oklch(0.55 0.02 245);
  --text-inverse: oklch(0.15 0.03 245);
  --primary: oklch(0.50 0.12 245);
  --primary-light: oklch(0.60 0.12 245);
  --primary-dark: oklch(0.40 0.12 245);
  --accent: oklch(0.72 0.14 210);
  --accent-dim: oklch(0.62 0.14 210);
  --border: oklch(0.32 0.03 245);
  --border-subtle: oklch(0.25 0.03 245);
  --shadow: oklch(0.05 0.02 245 / 0.40);
  --shadow-md: oklch(0.05 0.02 245 / 0.50);
  --shadow-lg: oklch(0.05 0.02 245 / 0.60);
  --glow-accent: oklch(0.72 0.14 210 / 0.15);
  --glow-accent-strong: oklch(0.72 0.14 210 / 0.25);
}

[data-theme="pink"] {
  --bg: oklch(0.16 0.03 330);
  --bg-surface: oklch(0.19 0.03 330);
  --bg-elevated: oklch(0.22 0.03 330);
  --bg-hover: oklch(0.26 0.04 330);
  --bg-active: oklch(0.30 0.04 330);
  --text: oklch(0.95 0.01 330);
  --text-secondary: oklch(0.75 0.02 330);
  --text-tertiary: oklch(0.55 0.02 330);
  --text-inverse: oklch(0.15 0.03 330);
  --primary: oklch(0.48 0.14 330);
  --primary-light: oklch(0.58 0.14 330);
  --primary-dark: oklch(0.38 0.14 330);
  --accent: oklch(0.70 0.18 340);
  --accent-dim: oklch(0.60 0.18 340);
  --border: oklch(0.32 0.03 330);
  --border-subtle: oklch(0.25 0.03 330);
  --shadow: oklch(0.05 0.02 330 / 0.40);
  --shadow-md: oklch(0.05 0.02 330 / 0.50);
  --shadow-lg: oklch(0.05 0.02 330 / 0.60);
  --glow-accent: oklch(0.70 0.18 340 / 0.15);
  --glow-accent-strong: oklch(0.70 0.18 340 / 0.25);
}

/* --- Light Mode Variations --- */
[data-mode="light"] {
  --bg: oklch(0.98 0.01 260);
  --bg-surface: oklch(0.95 0.01 260);
  --bg-elevated: oklch(0.90 0.02 260);
  --bg-hover: oklch(0.85 0.02 260);
  --bg-active: oklch(0.80 0.02 260);
  --bg-card: oklch(0.90 0.02 260);
  --text: oklch(0.14 0.012 260);
  --text-secondary: oklch(0.35 0.02 260);
  --text-tertiary: oklch(0.50 0.02 260);
  --text-inverse: oklch(0.98 0.01 260);
  --text-light: oklch(0.55 0.02 260);
  --primary: oklch(0.50 0.035 260);
  --accent: oklch(0.55 0.14 70);
  --border: oklch(0.85 0.02 260);
  --border-subtle: oklch(0.90 0.02 260);
  --shadow: oklch(0.14 0.012 260 / 0.06);
  --shadow-md: oklch(0.14 0.012 260 / 0.12);
  --shadow-lg: oklch(0.14 0.012 260 / 0.18);
  --glow-accent: oklch(0.55 0.14 70 / 0.10);
  --glow-accent-strong: oklch(0.55 0.14 70 / 0.15);
}

[data-theme="blue"][data-mode="light"] {
  --bg: oklch(0.98 0.02 245);
  --bg-surface: oklch(0.94 0.03 245);
  --bg-elevated: oklch(0.89 0.04 245);
  --bg-hover: oklch(0.84 0.04 245);
  --bg-active: oklch(0.79 0.04 245);
  --text: oklch(0.15 0.03 245);
  --text-secondary: oklch(0.35 0.04 245);
  --text-tertiary: oklch(0.55 0.04 245);
  --text-inverse: oklch(0.98 0.02 245);
  --primary: oklch(0.55 0.12 245);
  --accent: oklch(0.50 0.14 245);
  --border: oklch(0.84 0.04 245);
  --border-subtle: oklch(0.89 0.04 245);
  --shadow: oklch(0.15 0.03 245 / 0.06);
  --shadow-md: oklch(0.15 0.03 245 / 0.12);
  --shadow-lg: oklch(0.15 0.03 245 / 0.18);
  --glow-accent: oklch(0.50 0.14 245 / 0.10);
  --glow-accent-strong: oklch(0.50 0.14 245 / 0.15);
}

[data-theme="pink"][data-mode="light"] {
  --bg: oklch(0.98 0.02 340);
  --bg-surface: oklch(0.94 0.03 340);
  --bg-elevated: oklch(0.89 0.04 340);
  --bg-hover: oklch(0.84 0.04 340);
  --bg-active: oklch(0.79 0.04 340);
  --text: oklch(0.15 0.03 340);
  --text-secondary: oklch(0.35 0.04 340);
  --text-tertiary: oklch(0.55 0.04 340);
  --text-inverse: oklch(0.98 0.02 340);
  --primary: oklch(0.50 0.14 340);
  --accent: oklch(0.55 0.18 340);
  --border: oklch(0.84 0.04 340);
  --border-subtle: oklch(0.89 0.04 340);
  --shadow: oklch(0.15 0.03 340 / 0.06);
  --shadow-md: oklch(0.15 0.03 340 / 0.12);
  --shadow-lg: oklch(0.15 0.03 340 / 0.18);
  --glow-accent: oklch(0.55 0.18 340 / 0.10);
  --glow-accent-strong: oklch(0.55 0.18 340 / 0.15);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--text);
  background: var(--bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: var(--accent);
  color: var(--text-inverse);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-dim);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  color: inherit;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}

/* --- App Layout Shell — Mobile-first --- */
.app {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  animation: appIn 500ms var(--ease-out-expo);
}

@keyframes appIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Left Navigation Sidebar — Hidden on mobile --- */
.nav-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 280px;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  z-index: var(--z-nav);
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 350ms var(--ease-spring);
}

.nav-sidebar--open {
  transform: translateX(0);
}

.nav-sidebar__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2);
  margin-bottom: var(--sp-5);
}

.nav-sidebar__logo {
  display: flex;
  align-items: center;
  color: var(--accent);
}

.nav-sidebar__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: -0.02em;
}

.nav-sidebar__menu {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.nav-sidebar__btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  width: 100%;
  text-align: left;
  min-height: 44px;
}

.nav-sidebar__btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.nav-sidebar__btn--primary {
  background: var(--bg-hover);
  color: var(--text);
}

.nav-sidebar__btn--primary:hover {
  background: var(--bg-active);
}

.nav-sidebar__btn--active {
  background: var(--bg-active);
  color: var(--accent);
}

.nav-sidebar__btn svg {
  flex-shrink: 0;
}

.nav-sidebar__history {
  margin-top: var(--sp-2);
  padding: 0 var(--sp-1);
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.nav-sidebar__history-header {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
  padding: 0 var(--sp-3);
}

.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.history-item:hover,
.history-item:focus {
  background: var(--bg-hover);
  color: var(--text);
  outline: none;
}

.history-item--active {
  background: var(--bg-hover);
  color: var(--text);
  font-weight: var(--fw-medium);
}

.nav-sidebar__spacer {
  display: none;
}

.nav-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

.nav-sidebar__version {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-align: center;
  padding-top: var(--sp-2);
  user-select: none;
  opacity: 0.7;
}

/* --- Mobile Header --- */
.app-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  padding-top: env(safe-area-inset-top);
  height: var(--header-height);
  min-height: var(--header-height);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  z-index: var(--z-header);
  grid-column: 1;
}

.app-header__hamburger,
.app-header__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.app-header__hamburger:hover,
.app-header__btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.app-header__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: -0.02em;
  flex: 1;
}

/* Actions group on the right side of the mobile header */
.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
}

/* Circular new-chat button in mobile header */
.app-header__new-chat {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  margin-left: var(--sp-1);
}

.app-header__new-chat:hover {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text);
}

/* --- Main / Conversation Area --- */
.app-main {
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-3);
  scroll-behavior: smooth;
  grid-column: 1;
  overscroll-behavior: contain;
  min-height: 0;
  transition: padding 350ms var(--ease-spring);
  /* Allow welcome screen to center vertically */
  display: flex;
  flex-direction: column;
}

.chat-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-1);
  /* Grow to fill available space so welcome screen centers */
  flex: 1;
}

/* --- Input Area --- */
.input-area {
  grid-column: 1;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  min-width: 0;
  transition: padding 350ms var(--ease-spring);
}

.input-area__skills {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

.input-area__skills::-webkit-scrollbar {
  display: none;
}

.input-area__row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
}

/* --- Knowledge Base Sidebar (right panel) --- */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  box-shadow: -6px 0 32px var(--shadow);
  transform: translateX(100%);
  transition: transform 350ms var(--ease-spring);
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
}

.sidebar--open {
  transform: translateX(0);
}

/* --- Sidebar Overlay --- */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.04 0.008 260 / 0.40);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.sidebar-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- Responsive: Regular mobile (480px+) --- */
@media (min-width: 480px) {
  :root {
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.1875rem;
    --fs-2xl: 1.375rem;
  }

  .app-main {
    padding: var(--sp-4) var(--sp-3);
  }

  .chat-container {
    gap: var(--sp-4);
  }

  .input-area {
    padding: var(--sp-3);
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  }
}

/* --- Responsive: Tablet (640px+) --- */
@media (min-width: 640px) {
  .app-main {
    padding: var(--sp-5) var(--sp-5);
  }

  .chat-container {
    gap: var(--sp-5);
    padding: 0 var(--sp-2);
  }

  .input-area {
    padding: var(--sp-3) var(--sp-6) var(--sp-4);
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  }

  .input-area__row {
    gap: var(--sp-3);
  }

  .sidebar {
    width: 380px;
  }
}

/* --- Responsive: Desktop (1024px+) --- */
@media (min-width: 1024px) {
  :root {
    --nav-width: 260px;
    --sidebar-width: 380px;
    --header-height: 0px; /* Header hidden on desktop */
  }

  .app {
    grid-template-columns: var(--nav-width) 1fr 0px;
    grid-template-rows: 1fr auto;
    transition: grid-template-columns 350ms var(--ease-spring);
  }

  body.canvas-is-open .app {
    grid-template-columns: var(--nav-width) 1fr 400px;
  }

  /* Nav sidebar: persistent on desktop */
  .nav-sidebar {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    grid-column: 1;
    grid-row: 1 / -1;
    background: var(--bg);
    border-right: 1px solid var(--border-subtle);
  }

  .nav-sidebar__header {
    justify-content: flex-start;
  }

  .nav-sidebar__btn {
    justify-content: flex-start;
    padding: var(--sp-2) var(--sp-3);
  }

  /* Hide mobile header on desktop */
  .app-header {
    display: none;
  }

  .app-main {
    grid-column: 2;
    grid-row: 1;
    padding: var(--sp-6) var(--sp-6);
  }

  .chat-container {
    gap: var(--sp-6);
    max-width: 840px;
  }

  .input-area {
    grid-column: 2;
    grid-row: 2;
    padding: var(--sp-3) var(--sp-6) var(--sp-5);
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
  }

  .input-area__row {
    gap: var(--sp-3);
  }

  .sidebar {
    width: var(--sidebar-width);
  }

  body.sidebar-is-open .app-main {
    padding-right: calc(var(--sidebar-width) + var(--sp-6));
  }

  body.sidebar-is-open .input-area {
    padding-right: calc(var(--sidebar-width) + var(--sp-6));
  }
}

/* --- Responsive: Wide desktop (1280px+) --- */
@media (min-width: 1280px) {
  .app-main {
    padding: var(--sp-8) var(--sp-8);
  }

  .input-area {
    padding: var(--sp-4) var(--sp-8) var(--sp-6);
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom));
  }

  body.sidebar-is-open .app-main {
    padding-right: calc(var(--sidebar-width) + var(--sp-8));
  }

  body.sidebar-is-open .input-area {
    padding-right: calc(var(--sidebar-width) + var(--sp-8));
  }

  body.canvas-is-open .app {
    grid-template-columns: var(--nav-width) 1fr 520px;
  }
}

/* --- Thesis Canvas --- */
.app-canvas {
  grid-column: 3;
  grid-row: 1 / -1;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
}

.app-canvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}

.app-canvas__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.app-canvas__close-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.app-canvas__close-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* Actions group (Export / Clear) in the canvas header */
.app-canvas__header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  margin-right: var(--sp-2);
  flex-shrink: 0;
}

/* Canvas title icon alignment */
.app-canvas__title svg {
  display: inline;
  vertical-align: -2px;
  margin-right: var(--sp-2);
  flex-shrink: 0;
}

.app-canvas__body {
  flex: 1;
  padding: var(--sp-4);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Canvas hint text */
.canvas-hint {
  margin-bottom: var(--sp-4);
  line-height: var(--lh-normal);
}

.canvas-editor {
  flex: 1;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text);
  white-space: pre-wrap;
}

.canvas-editor[placeholder]:empty:before {
  content: attr(placeholder);
  color: var(--text-tertiary);
  pointer-events: none;
}

/* On mobile, canvas acts as a modal overlay */
@media (max-width: 1023px) {
  .app-canvas {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    transform: translateX(100%);
    transition: transform 350ms var(--ease-spring);
    z-index: var(--z-sidebar);
  }
  
  body.canvas-is-open .app-canvas {
    transform: translateX(0);
  }
}

/* --- Touch Devices --- */
@media (pointer: coarse) {
  .action-btn {
    width: var(--touch-target);
    height: var(--touch-target);
  }

  .filter-chip {
    padding: var(--sp-2) var(--sp-3);
  }

  .kb-action-btn {
    padding: var(--sp-2) var(--sp-3);
  }

  .sidebar__footer-btn {
    padding: var(--sp-3);
  }

  .toast__close {
    width: var(--touch-target);
    height: var(--touch-target);
  }

  .upload-preview__remove {
    width: var(--touch-target);
    height: var(--touch-target);
  }
}

/* --- Landscape mobile --- */
@media (max-height: 500px) and (orientation: landscape) {
  .app-header {
    padding: var(--sp-2) var(--sp-3);
  }

  .app-main {
    padding: var(--sp-2) var(--sp-3);
  }

  .input-area {
    padding: var(--sp-2) var(--sp-3);
  }

  .welcome {
    padding: var(--sp-4) var(--sp-3);
  }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Print --- */
@media print {
  .app-header,
  .nav-sidebar,
  .input-area,
  .sidebar,
  .sidebar-overlay,
  .toast-container {
    display: none !important;
  }

  .app {
    display: block;
    height: auto;
    overflow: visible;
  }

  .app-main {
    overflow: visible;
  }

  body {
    background: white;
    color: black;
  }

  body::after {
    display: none;
  }

  .message__bubble {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc;
  }
}

/* --- Utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--text-inverse);
  padding: var(--sp-2) var(--sp-4);
  z-index: calc(var(--z-toast) + 1);
  transition: top var(--transition-fast);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.skip-link:focus {
  top: 0;
}