:root {
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--tg-theme-bg-color, #ffffff);
  color: var(--tg-theme-text-color, #111111);
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.maintenance-banner {
  background: #fdf3d8;
  border: 1px solid #e8c766;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.maintenance-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6b5010;
}

h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 8px 0 4px;
}

.subtitle {
  color: var(--tg-theme-hint-color, #888888);
  margin: 0 0 20px;
  font-size: 14px;
}

textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--tg-theme-hint-color, #cccccc);
  background: var(--tg-theme-secondary-bg-color, #f5f5f5);
  color: var(--tg-theme-text-color, #111111);
  font-size: 15px;
  resize: vertical;
  margin-bottom: 14px;
  transition: min-height 0.15s ease;
}

/* Once a result is showing, the full-size input is taking up space that
   matters more for reading the response than for re-reading what was
   already pasted - shrink it rather than force scrolling past it every
   time. Expands back on focus (below) if someone actually wants to edit it. */
/* Once a result is showing, the full-size input is taking up space that
   matters more for reading the response than for re-reading what was
   already pasted - shrink it rather than force scrolling past it every
   time. Expands back on a genuine new click (see app.js) if someone
   actually wants to edit it - deliberately not driven by :focus here, since
   focus alone can't distinguish "already had focus from before" (the
   textarea keeps focus right through conversion, especially with Telegram's
   native MainButton, which lives outside the page DOM and never blurs it)
   from "the user just tapped back in on purpose". */
textarea.compact {
  min-height: 44px;
  height: 44px;
}

button {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: var(--tg-theme-button-color, #2481cc);
  color: var(--tg-theme-button-text-color, #ffffff);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

.loading {
  text-align: center;
  margin-top: 16px;
  color: var(--tg-theme-hint-color, #888888);
  font-size: 14px;
}

.result {
  margin-top: 20px;
}

/* Exists so scrollIntoView({block:'start'}) on the Clearer Read card always
   has enough page content below it to actually reach the top of the
   viewport - without this, the browser clamps the scroll to the literal
   bottom of the page instead of the target's true "start" position. This
   used to be padding-bottom directly on .result, which fixed the scroll but
   broke something else: it pushed the disclaimer (which comes after
   .result in the DOM) down below the visible viewport along with it,
   confirmed directly - disclaimer at y=783px in a 700px viewport, entirely
   off-screen. Moving the same space to a dedicated element positioned AFTER
   the disclaimer keeps the disclaimer in its normal, always-reachable
   position while still giving the scroll the room it needs further down the
   page, where it won't hide anything that isn't supposed to be hidden.
   Hidden/shown in lockstep with #result via app.js, so it doesn't add
   scrollable empty space before there's actually a result to scroll to. */
#scroll-spacer {
  height: 60vh;
}

.result-card {
  background: var(--tg-theme-secondary-bg-color, #f5f5f5);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

/* When there's no actionable feedback, the message is warmth/reassurance
   rather than "here's your feedback" - give it a visually softer, calmer
   treatment so it doesn't read as a clinical or empty result. */
.result-card.no-actionable {
  background: transparent;
  border: 1px solid var(--tg-theme-hint-color, #d8d8d8);
}

.result-card h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tg-theme-hint-color, #888888);
  margin: 0 0 8px;
}

.result-card p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
}

.copy-btn {
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--tg-theme-button-color, #2481cc);
  color: var(--tg-theme-button-color, #2481cc);
}

.tone-note {
  font-size: 13px;
  color: var(--tg-theme-hint-color, #888888);
  font-style: italic;
}

.error {
  margin-top: 16px;
  padding: 12px;
  border-radius: 10px;
  background: #fdecea;
  color: #9c2b2b;
  font-size: 14px;
}

.disclaimer {
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tg-theme-hint-color, #888888);
  text-align: center;
}

.hidden {
  display: none;
}