/* Catppuccin Mocha theme for Oat UI */
:root, [data-theme="dark"] {
  --background: 30 30 46;         /* #1e1e2e base */
  --foreground: 205 214 244;      /* #cdd6f4 text */
  --card: 49 50 68;               /* #313244 surface0 */
  --card-foreground: 205 214 244;
  --primary: 137 180 250;         /* #89b4fa blue */
  --primary-foreground: 30 30 46;
  --secondary: 69 71 90;          /* #45475a surface1 */
  --secondary-foreground: 186 194 222; /* #bac2de subtext1 */
  --muted: 69 71 90;
  --muted-foreground: 166 173 200; /* #a6adc8 subtext0 */
  --faint: 36 36 54;              /* between base and mantle */
  --faint-foreground: 127 132 156; /* #7f849c overlay1 */
  --accent: 88 91 112;            /* #585b70 surface2 */
  --accent-foreground: 205 214 244;
  --danger: 243 139 168;          /* #f38ba8 red */
  --danger-foreground: 30 30 46;
  --success: 166 227 161;         /* #a6e3a1 green */
  --success-foreground: 30 30 46;
  --warning: 249 226 175;         /* #f9e2af yellow */
  --warning-foreground: 30 30 46;
  --border: 69 71 90;
  --input: 69 71 90;
  --ring: 137 180 250;
}

* { box-sizing: border-box; }

body {
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Nav */
header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgb(var(--border));
  flex-wrap: wrap;
  gap: 0.5rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.brand h1 {
  margin: 0;
  font-size: 1.25rem;
  color: rgb(var(--primary));
}

.tagline {
  font-size: 0.8rem;
  color: rgb(var(--muted-foreground));
  font-style: italic;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.status-loading {
  background: rgb(var(--warning) / 0.15);
  color: rgb(var(--warning));
}

.status-ready {
  background: rgb(var(--success) / 0.15);
  color: rgb(var(--success));
}

.status-offline {
  background: rgb(var(--success) / 0.15);
  color: rgb(var(--success));
}

.status-error {
  background: rgb(var(--danger) / 0.15);
  color: rgb(var(--danger));
}

.mode-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgb(var(--muted-foreground));
  cursor: pointer;
}

.btn-panic {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--danger));
  background: rgb(var(--danger) / 0.15);
  color: rgb(var(--danger));
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

.btn-panic:hover {
  background: rgb(var(--danger));
  color: rgb(var(--danger-foreground));
}

/* Setup / Download */
.setup-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40vh;
}

.setup-card {
  max-width: 28rem;
  width: 100%;
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
}

.setup-card header {
  padding: 1rem 1.25rem 0;
}

.setup-card header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.setup-card .card-body {
  padding: 0.75rem 1.25rem;
}

.setup-card .card-body p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgb(var(--muted-foreground));
  margin: 0 0 0.75rem;
}

.setup-card footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgb(var(--border));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.setup-status {
  margin-bottom: 0.5rem;
}

.download-progress:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.progress-bar {
  flex: 1;
  height: 0.4rem;
  background: rgb(var(--secondary));
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: rgb(var(--primary));
  border-radius: 999px;
  transition: width 0.2s ease;
}

/* Main */
main {
  flex: 1;
  max-width: 48rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Input */
.input-section label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.label-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(var(--muted-foreground));
}

.input-section textarea {
  min-height: 10rem;
  resize: vertical;
  font-size: 0.95rem;
  line-height: 1.6;
  background: rgb(var(--card));
  color: rgb(var(--foreground));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
  padding: 0.75rem;
  transition: border-color 0.15s;
}

.input-section textarea:focus {
  border-color: rgb(var(--ring));
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--ring) / 0.2);
}

.input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.meta {
  font-size: 0.75rem;
  color: rgb(var(--faint-foreground));
}

/* Results */
.results-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.summary {
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
}

.output-card {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
}

.output-card header {
  padding: 0.75rem 1rem 0;
}

.output-card header h3 {
  margin: 0;
  font-size: 0.9rem;
  color: rgb(var(--muted-foreground));
}

.card-body {
  padding: 0.75rem 1rem;
}

.output-text {
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-wrap;
}

.output-card footer {
  padding: 0.5rem 1rem 0.75rem;
  border-top: 1px solid rgb(var(--border));
}

/* Changes */
.changes-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.changes-section h3 {
  font-size: 0.9rem;
  color: rgb(var(--muted-foreground));
  margin: 0;
}

.change-item {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.change-item .change-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.change-original {
  text-decoration: line-through;
  color: rgb(var(--danger));
  font-family: monospace;
  font-size: 0.85rem;
}

.change-arrow {
  color: rgb(var(--faint-foreground));
  font-size: 0.8rem;
}

.change-replacement {
  color: rgb(var(--success));
  font-family: monospace;
  font-size: 0.85rem;
}

.change-reason {
  font-size: 0.75rem;
  color: rgb(var(--muted-foreground));
  margin-top: 0.15rem;
}

.change-marker {
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgb(var(--primary) / 0.15);
  color: rgb(var(--primary));
  white-space: nowrap;
}

/* Streaming output */
.streaming-section {
  margin-top: 0.5rem;
}

.streaming-section h3 {
  font-size: 0.9rem;
  color: rgb(var(--muted-foreground));
  margin: 0 0 0.5rem;
}

.streaming-output {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-wrap;
  min-height: 4rem;
  max-height: 20rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

.streaming-output::after {
  content: "\25ae";
  color: rgb(var(--primary));
  animation: blink 0.8s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Rewriter */
.rewriter-section {
  margin-top: 0.5rem;
}

.rewriter-section h3 {
  font-size: 0.9rem;
  color: rgb(var(--muted-foreground));
  margin: 0 0 0.5rem;
}

.rewriter-desc {
  font-size: 0.8rem;
  color: rgb(var(--faint-foreground));
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.rewriter-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Forensic panel */
.forensic-section {
  margin-top: 0.5rem;
}

.forensic-section h3 {
  font-size: 0.9rem;
  color: rgb(var(--muted-foreground));
  margin-bottom: 0.75rem;
}

.forensic-section table {
  font-size: 0.8rem;
  width: 100%;
}

.forensic-section th {
  text-align: left;
  color: rgb(var(--muted-foreground));
  font-weight: 500;
}

.forensic-section td, .forensic-section th {
  padding: 0.4rem 0.6rem;
}

.forensic-fixed {
  color: rgb(var(--success));
}

.forensic-warn {
  color: rgb(var(--warning));
}

.forensic-unchanged {
  color: rgb(var(--faint-foreground));
}

/* Info */
.info-section {
  margin-top: 0.5rem;
}

.info-section details {
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.info-section summary {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: rgb(var(--muted-foreground));
}

.info-section details[open] summary {
  border-bottom: 1px solid rgb(var(--border));
}

.info-section p, .info-section li {
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 0.5rem 1rem;
  margin: 0;
}

.info-section ul {
  padding-left: 2rem;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.75rem;
  color: rgb(var(--faint-foreground));
  border-top: 1px solid rgb(var(--border));
}

.site-footer a {
  color: rgb(var(--primary));
  text-decoration: none;
}

/* Loading spinner on button */
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-loading::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.5em;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Copy feedback */
.btn-copied {
  color: rgb(var(--success)) !important;
  border-color: rgb(var(--success)) !important;
}

/* Mobile */
@media (max-width: 640px) {
  header nav {
    padding: 0.5rem 0.75rem;
  }

  .brand h1 {
    font-size: 1.1rem;
  }

  .tagline {
    display: none;
  }

  main {
    padding: 1rem 0.75rem;
  }

  .input-section textarea {
    min-height: 8rem;
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  .change-item .change-header {
    flex-direction: column;
    gap: 0.25rem;
  }

  .change-arrow {
    display: none;
  }

  .forensic-section table {
    font-size: 0.7rem;
  }

  .forensic-section td, .forensic-section th {
    padding: 0.3rem 0.4rem;
  }

  .output-card footer menu {
    flex-direction: column;
  }

  .output-card footer menu button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .nav-right {
    flex-basis: 100%;
    justify-content: space-between;
  }
}