/* «Улучшения» (ADR-0048, U1): значок, панель обращения, «Мои обращения», тост
   ошибки. Перенос модуля ZumaxCenter в токенах zxlab (theme.css): только
   переменные, своих цветовых литералов нет. Одна панель на четыре места:
   окно программы (выезжает справа, 480 px), телефон техника (на весь экран),
   пост участка (крупно, читается с 1,5 м), экран входа. */

.fb-button {
  position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--button-border); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer;
}
.fb-button[aria-expanded="true"] { border-color: var(--ink); }
.fb-button > svg { width: 18px; height: 18px; }
.fb-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--danger); color: var(--ink-inverse); font: var(--fw-600) var(--fs-11)/18px var(--mono); text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.fb-count[hidden] { display: none; }
.fb-icon { width: 18px; height: 18px; }

/* Слой поверх всего (popover): обращение можно открыть и из-под открытого окна. */
.fb-host {
  position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: none; color: var(--ink); overflow: hidden; font-family: var(--font);
}
.fb-host:not(:popover-open) { display: none; }
.fb-scrim { position: absolute; inset: 0; background: var(--overlay); }
.fb-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100vw; display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--shadow-drawer-right); font-size: var(--fs-13); line-height: 1.45;
}
.fb-head { flex: none; padding: var(--sp-4) var(--sp-5) 0; border-bottom: 1px solid var(--rule); }
.fb-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-bottom: var(--sp-3); }
.fb-head h2 { margin: 0; font-size: var(--fs-17); font-weight: var(--fw-600); }
.fb-close {
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--button-border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); cursor: pointer; font: inherit;
}
.fb-tabs { display: flex; gap: var(--sp-1); }
.fb-tab {
  position: relative; padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font: inherit; font-weight: var(--fw-500); cursor: pointer;
}
.fb-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.fb-tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: var(--sp-1-5); border-radius: var(--radius-pill); background: var(--danger); vertical-align: middle; }

.fb-body { flex: 1; overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.fb-q { margin: 0; font-weight: var(--fw-600); font-size: var(--fs-14); }
.fb-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.fb-kind {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-2); align-items: start; text-align: left; padding: var(--sp-3);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.fb-kind-icon { grid-row: span 2; width: 20px; height: 20px; color: var(--ink-2); }
.fb-kind strong { font-weight: var(--fw-600); }
.fb-kind span { color: var(--muted); font-size: var(--fs-12); }
.fb-kind[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--brand-soft); }
.fb-kind[aria-checked="true"] .fb-kind-icon { color: var(--brand-soft-ink); }

.fb-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.fb-field { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); }
.fb-label { font-weight: var(--fw-500); }
.fb-field input, .fb-field textarea, .fb-reply textarea {
  width: 100%; box-sizing: border-box; padding: var(--sp-2) var(--sp-2-5); border: 1px solid var(--field-border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; resize: vertical;
}
.fb-field [aria-invalid="true"] { border-color: var(--danger); }
.fb-hint { color: var(--muted); font-size: var(--fs-12); }
.fb-error { color: var(--danger); font-size: var(--fs-12); }
.fb-count-chars { align-self: flex-end; color: var(--muted); font: var(--fs-11) var(--mono); }
.fb-count-chars:empty { display: none; }
.fb-chips, .fb-filters { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); }
.fb-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; padding: var(--sp-1-5) var(--sp-2-5); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: left;
}
.fb-chip small { color: var(--muted); font-size: var(--fs-11); }
.fb-chip[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--ink-inverse); }
.fb-chip[aria-checked="true"] small { color: var(--ink-inverse); }
.fb-check { display: flex; align-items: center; gap: var(--sp-2); }
.fb-check input { flex: none; width: auto; margin: 0; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.fb-see { border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--fill-soft); padding: var(--sp-2) var(--sp-3); }
.fb-see summary { cursor: pointer; font-weight: var(--fw-500); }
.fb-see dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-3); margin: var(--sp-2) 0; font: var(--fs-12) var(--mono); }
.fb-see dt { color: var(--muted); }
.fb-see dd { margin: 0; overflow-wrap: anywhere; }

.fb-note { margin: 0; color: var(--muted); font-size: var(--fs-12); }
.fb-note.is-danger { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-13); }
.fb-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-1); }
.fb-primary, .fb-ghost {
  min-height: 36px; padding: 0 var(--sp-4); border-radius: var(--radius); font: inherit; font-weight: var(--fw-500); cursor: pointer;
}
.fb-primary { border: 1px solid var(--button-primary-bg); background: var(--button-primary-bg); color: var(--button-primary-ink); }
.fb-primary:disabled { opacity: .6; cursor: default; }
.fb-ghost { border: 1px solid var(--button-border); background: var(--surface); color: var(--ink); }
.fb-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; cursor: pointer; }
.fb-back { align-self: flex-start; text-decoration: none; color: var(--muted); }
.fb-skeleton { padding: var(--sp-6) 0; color: var(--muted); text-align: center; }

.fb-sent { align-items: center; text-align: center; padding-top: var(--sp-6); }
.fb-sent h3 { margin: 0; font-size: var(--fs-17); }
.fb-sent-mark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--brand-lime); color: var(--brand-ink); font-size: var(--fs-20); font-weight: var(--fw-700);
}
.fb-plate { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--fill-soft); }
.fb-plate.is-warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.fb-plate.is-ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }

.fb-list { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; }
.fb-row {
  display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2-5) var(--sp-3); border: 0; border-bottom: 1px solid var(--row-rule);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.fb-row:last-child { border-bottom: 0; }
.fb-row:hover { background: var(--hover-bg); }
.fb-row.is-unread { box-shadow: inset 3px 0 0 var(--brand-lime); }
.fb-row-top { display: flex; align-items: center; gap: var(--sp-2); }
.fb-row-title { flex: 1; min-width: 0; font-weight: var(--fw-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-row-meta { color: var(--muted); font-size: var(--fs-12); margin: 0; }
.fb-num { font-family: var(--mono); color: var(--muted); font-weight: var(--fw-500); }
.fb-new { color: var(--ink); }
.fb-status { flex: none; padding: 2px var(--sp-2); border-radius: var(--radius-pill); font-size: var(--fs-11-5); font-weight: var(--fw-500); background: var(--chip-bg); color: var(--ink-2); }
.fb-status.is-info { background: var(--info-soft); color: var(--info); }
.fb-status.is-warn { background: var(--warn-soft); color: var(--warn); }
.fb-status.is-ok { background: var(--ok-soft); color: var(--ok); }
.fb-delivery { font-size: var(--fs-12); }
.fb-delivery.is-ok { color: var(--ok); }
.fb-delivery.is-warn { color: var(--warn); }
.fb-delivery.is-danger { color: var(--danger); }
.fb-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-6) 0; color: var(--muted); text-align: center; }
.fb-empty strong { color: var(--ink); }

.fb-card-head h3 { margin: 0 0 var(--sp-1-5); font-size: var(--fs-14); font-weight: var(--fw-600); }
.fb-card-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fb-texts { display: grid; gap: var(--sp-1); margin: 0; }
.fb-texts dt { color: var(--muted); font-size: var(--fs-12); }
.fb-texts dd { margin: 0 0 var(--sp-2); white-space: pre-wrap; }
.fb-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-13); font-weight: var(--fw-600); }
.fb-thread { display: flex; flex-direction: column; gap: var(--sp-2); }
.fb-msg { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); }
.fb-msg.is-vendor { background: var(--fill-soft); }
.fb-msg.is-fresh { border-color: var(--brand-soft-line); background: var(--brand-soft); }
.fb-msg-head { display: flex; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-12); color: var(--muted); }
.fb-msg-head b { color: var(--ink); font-weight: var(--fw-600); }
.fb-msg-body { white-space: pre-wrap; margin-top: 2px; }
.fb-reply { display: flex; flex-direction: column; gap: var(--sp-2); }

.fb-toast {
  position: fixed; inset: auto 24px 24px auto; margin: 0; display: flex; align-items: center; gap: var(--sp-2-5); max-width: calc(100vw - 32px);
  padding: var(--sp-2-5) var(--sp-2-5) var(--sp-2-5) var(--sp-4); border: 0; border-radius: var(--radius-card);
  background: var(--ink); color: var(--ink-inverse); box-shadow: var(--shadow-toast); font-family: var(--font); font-size: var(--fs-13);
  /* Плашка не перехватывает нажатия под собой — только свои две кнопки. */
  pointer-events: none;
}
.fb-toast button { pointer-events: auto; }
.fb-toast b { font-family: var(--mono); font-weight: var(--fw-600); }
.fb-toast-mark { color: var(--brand-lime); }
.fb-toast-act {
  height: 28px; padding: 0 var(--sp-2-5); border: 1px solid var(--ink-2); border-radius: var(--radius-sm);
  background: transparent; color: var(--brand-lime); font: inherit; font-weight: var(--fw-500); cursor: pointer;
}
.fb-toast-x { width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--ink-inverse); font: inherit; cursor: pointer; }

/* Ссылка экрана входа «Не получается войти? Сообщить о проблеме». */
.gate-feedback { margin: 0; font-size: var(--fs-13); color: var(--muted); }
.gate-feedback button { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; cursor: pointer; }

/* Телефон техника и узкое окно: панель на весь экран. */
@media (max-width: 50rem) {
  .fb-panel { width: 100vw; }
  .fb-toast { inset: auto 16px 88px 16px; }
}
.fb-panel.fb-mode-app { width: 100vw; max-width: 480px; }

/* Пост участка: крупно, читается с 1,5 м, руки в перчатках. */
.fb-panel.fb-mode-post { width: 640px; font-size: var(--fs-17); }
.fb-mode-post .fb-head h2 { font-size: var(--fs-22); }
.fb-mode-post .fb-kind { padding: var(--sp-4); }
.fb-mode-post .fb-kind-icon { width: 28px; height: 28px; }
.fb-mode-post .fb-chip { padding: var(--sp-3) var(--sp-4); }
.fb-mode-post .fb-primary, .fb-mode-post .fb-ghost { min-height: 64px; padding: 0 var(--sp-6); font-size: var(--fs-20); }
.fb-mode-post .fb-close { width: 48px; height: 48px; }
.post-head .fb-button { width: 48px; height: 48px; margin-left: var(--sp-2); }
.post-head .fb-button > svg { width: 24px; height: 24px; }
.fb-mode-post .fb-q { font-size: var(--fs-20); }