:root { color-scheme: dark; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #0b0b11;
  color: #e7e7f2;
  overflow: hidden; /* no page scroll */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Use the *visible* viewport on mobile (dvh fixes iOS/Android browser bars) */
body {
  height: 100dvh;
}

#page {
  width: 100vw;
  height: 100dvh; /* full visible screen */
  box-sizing: border-box;

  /* comfy padding but always full-screen */
  padding: clamp(16px, 4vw, 64px);

  /* iPhone notch safe-area */
  padding-top: calc(clamp(16px, 4vw, 64px) + env(safe-area-inset-top));
  padding-right: calc(clamp(16px, 4vw, 64px) + env(safe-area-inset-right));
  padding-bottom: calc(clamp(16px, 4vw, 64px) + env(safe-area-inset-bottom));
  padding-left: calc(clamp(16px, 4vw, 64px) + env(safe-area-inset-left));
}

#text {
  width: 100%;
  height: 100%;
  outline: none;

  overflow: hidden;      /* no scrollbars */
  white-space: pre-wrap; /* keep line breaks */
  word-break: break-word;

  line-height: 1.35;
  caret-color: #6c8cff;
}

/* Whole-word wrapping: break only at spaces, not mid-word. */
#text.wrap-word {
  word-break: normal;
  overflow-wrap: normal;
}

/* --- Toolbar --- */
#toolbar {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  gap: 6px;
}

#toolbar button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(20, 20, 30, 0.6);
  color: #c5c7d8;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#toolbar button:hover,
#toolbar button:focus-visible {
  opacity: 1;
  outline: none;
}

#toolbar button[aria-pressed="true"],
#toolbar button.active {
  color: #9eb3ff;
  border-color: rgba(108, 140, 255, 0.5);
  opacity: 1;
}

/* --- Mirror mode --- */
#text.mirrored {
  transform: scaleX(-1);
}

/* --- Picker panels --- */
.picker {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(52px + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(20, 20, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 280px;
  animation: picker-in 0.15s ease;
}

@keyframes picker-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.picker[hidden] { display: none; }

/* --- Font picker buttons --- */
#fontPicker button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #c5c7d8;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#fontPicker button:hover {
  background: rgba(255, 255, 255, 0.1);
}

#fontPicker button.active {
  color: #9eb3ff;
  border-color: rgba(108, 140, 255, 0.5);
  background: rgba(108, 140, 255, 0.1);
}

/* --- Background picker buttons --- */
#bgPicker button {
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

#bgPicker button:hover {
  transform: scale(1.15);
}

#bgPicker button.active {
  border-color: #9eb3ff;
  box-shadow: 0 0 8px rgba(108, 140, 255, 0.4);
}

/* --- Light background auto-switches text to dark --- */
body.light-bg { color: #1a1a2e; }
body.light-bg #text { caret-color: #3355cc; }
body.light-bg #toolbar button {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
  color: #444;
}
body.light-bg #toolbar button[aria-pressed="true"],
body.light-bg #toolbar button.active {
  color: #3355cc;
  border-color: rgba(51, 85, 204, 0.5);
}
body.light-bg .picker {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.1);
}
body.light-bg #fontPicker button {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
  color: #333;
}
body.light-bg #fontPicker button.active {
  color: #3355cc;
  border-color: rgba(51, 85, 204, 0.5);
  background: rgba(51, 85, 204, 0.08);
}
body.light-bg .home-btn {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.12);
  color: #555;
}