/* /letters — дельта поверх chrome.css (пачка 3). Цвета только роли слоя 2. */

.letters-page #stat-waiting { color: var(--warn); }
.letters-page #stat-replies { color: var(--ac); }

/* Рейтинг: разметка из letters.js, не chrome .lr-* */
.let-rating-title {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--fg-3);
  margin-bottom: var(--s-4);
  font-family: var(--font);
}
.let-rating-op {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c, var(--fg));
}
.let-rating-pct {
  font-family: var(--font);
  font-size: 11px;
  color: var(--c, var(--fg-2));
  min-width: 2.5em;
  text-align: right;
}
.let-rating-count {
  font-family: var(--font);
  font-size: 11px;
  color: var(--fg-3);
}
.let-rating-bar-wrap {
  flex: 1;
  min-width: 0;
  height: 6px;
  background: var(--surface-3);
  overflow: hidden;
  border-radius: var(--radius-chip);
}
.let-rating-bar-fill {
  height: 100%;
  border-radius: var(--radius-chip);
  background: var(--c, var(--accent));
}

.let-head1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-2);
}
.let-head2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
  min-height: 22px;
  position: relative;
}
.let-status { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.let-op-all {
  border: 1px solid color-mix(in srgb, var(--dc) 40%, transparent);
  color: var(--dc);
  background: color-mix(in srgb, var(--dc) 8%, transparent);
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  font-size: 11px;
  font-weight: 500;
}

.let-section-head { font-size: 9px; letter-spacing: 3px; margin-bottom: 8px; }
.let-body-wrap { position: relative; }
.let-body-inner {
  font-size: var(--t-body);
  color: var(--fg);
  line-height: 1.7;
  border-left: 2px solid var(--hairline);
  padding-left: var(--s-3);
  word-break: break-word;
}
.let-body-wrap.collapsed .let-body-inner { max-height: 9em; overflow: hidden; }
.let-body-wrap.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
.let-read-more {
  background: transparent;
  border: none;
  color: var(--fg-3);
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.let-read-more[hidden] { display: none; }

.let-read-more:hover { color: var(--accent); }

.letter-author { color: var(--fg); }

.let-reply-block {
  margin-top: var(--s-4);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ac);
  background: var(--ac-bg);
  border-radius: var(--radius-card);
}
.let-reply-hdr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--hairline);
}
.let-reply-hdr-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ac);
}
.let-reply-hdr-sep { font-family: var(--font); font-size: 11px; color: var(--hairline); }
.let-reply-response-time {
  font-family: var(--font);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 1px;
}
.let-reply-body {
  padding: var(--s-3) var(--s-4) var(--s-2);
  font-size: var(--t-caption);
  color: var(--fg);
  line-height: 1.7;
  word-break: break-word;
}
.let-reply-date {
  padding: 0 var(--s-4) var(--s-3);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 1px;
}

.empty-state {
  text-align: center;
  padding: var(--s-8) var(--s-5);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 2px;
  line-height: 2;
}

.letters-page .modal-sheet {
  max-height: 90vh;
  overflow: hidden;
  padding: 0;
  gap: 0;
}
.letters-page .modal-header { padding: var(--s-4) var(--s-5) 0; flex-shrink: 0; }
.letters-page .modal-title { margin-bottom: 0; padding-bottom: var(--s-3); }
.letters-page .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--s-5);
  -webkit-overflow-scrolling: touch;
}
.letters-page .modal-footer {
  flex-shrink: 0;
  padding: var(--s-3) var(--s-5);
  padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
}

.letters-page .form-tag-section { display: none; }
.letters-page .form-tag-section.open { display: flex; }
.form-tags-lbl {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.form-tags-toggle { color: var(--fg-3); font-size: 10px; transition: transform .2s; }
.form-tags-toggle.open { transform: rotate(180deg); }

.form-counter.warn { color: var(--warn); }
.form-counter.over { color: var(--err); }

.letters-page #scroll-top {
  position: fixed;
  bottom: var(--s-5);
  right: var(--s-4);
  z-index: 500;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.letters-page #scroll-top.visible { display: flex; }

.let-section-head--spaced { margin-top: 8px; }
.let-filter-row { display: flex; flex-wrap: wrap; gap: 5px; }
.let-rating-none { font-size: 8px; }
.let-cf-widget { margin-bottom: 8px; }
.let-mod-note { font-size: 8px; color: var(--fg-3); }
.let-form-privacy { margin-bottom: 8px; }
.letters-page .chip.on {
  border-color: var(--accent);
  color: var(--on-brand);
  background: var(--accent);
  box-shadow: none;
}
.letters-page .new-badge { margin-left: 2px; }