/* css/components/feedback.css — Обратная связь: значок-конверт в меню и окно отправки сообщения.
   Порядок подключения всех стилей задан в layout/head.php — он важен. */
/* =============================================================
   Feedback / support system — site-wide envelope + template picker
   (common/site/feedback-widget.js). Registered users only, see that file's
   header comment. Envelope lives in #mainNav .nav-right (see
   .feedback-nav-icon below), not floating — see mountEnvelope() comment.
   ============================================================= */

/* Was position:fixed bottom-left — dropped 2026-08-24 (live):
   floating fixed elements are exactly the kind of thing an unrelated
   ancestor transform/filter can silently break (turns fixed into
   absolute-relative-to-that-ancestor), and it's one more thing to keep
   independent of scroll/stacking bugs across every page. A normal flex
   child of #mainNav (already position:fixed, always on top) sidesteps
   that whole class of bug for free — same spot as the hamburger. */
.feedback-nav-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #b8c1d1;
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.feedback-nav-icon svg { width: 18px; height: 18px; }
.feedback-nav-icon:hover { color: #ffffff; background: rgba(124, 92, 255, 0.12); }

.feedback-envelope-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: var(--neon-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 999px;
  padding: 0 3px;
  box-shadow: 0 0 0 2px #0b0f1a;
}

@keyframes feedback-envelope-shake {
  0%, 100% { transform: rotate(0); }
  4%  { transform: rotate(-14deg); }
  8%  { transform: rotate(11deg); }
  12% { transform: rotate(-8deg); }
  16% { transform: rotate(5deg); }
  20% { transform: rotate(0); }
}
.feedback-nav-icon.feedback-envelope-shake { animation: feedback-envelope-shake 3.2s ease-in-out infinite; animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) {
  /* Same specificity as the rule above (0,2,0) — a bare .feedback-envelope-shake
     here would lose the cascade and never actually cancel the animation. */
  .feedback-nav-icon.feedback-envelope-shake { animation: none; }
}

/* ---- Template-picker / composer modal — reuses the site's existing
   .pstats-overlay/.pstats-modal/.pstats-header/.pstats-body chrome (same
   as Custom Platforms/Export-Import Settings/Resend Token modals) via
   wireModal(), so this looks like one consistent modal system instead of
   a bespoke one-off. Only what's genuinely new below: the topic-card grid
   and a couple of small helpers layered on top of .kr-field, which the
   form fields themselves reuse directly. ---- */

.feedback-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.feedback-template-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #eef0ff;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.feedback-template-card .ic svg { width: 17px; height: 17px; color: var(--cyan); flex-shrink: 0; }
.feedback-template-card:hover { border-color: var(--purple); background: rgba(124, 92, 255, 0.08); }

.feedback-view-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-link);
  text-decoration: none;
}
.feedback-view-all-link svg { width: 14px; height: 14px; }
.feedback-view-all-link:hover { text-decoration: underline; }

.kr-field em { color: var(--neon-red); font-style: normal; }

/* .kr-field textarea (specificity 0,1,1 — class+element) inherits
   field-sizing:content, so an EMPTY textarea renders just 1 line tall no
   matter what rows="" says — exactly why the message field looked too
   small to read as "write your description here" (found live 2026-08-23).
   Same fixed-height override #spShowDescription uses for the same reason,
   but that one leans on an ID's specificity — this needs the extra
   ".kr-field textarea" prefix instead (0,2,1) to actually beat 0,1,1,
   since .feedback-message-textarea alone (0,1,0) would lose the cascade. */
.kr-field textarea.feedback-message-textarea {
  field-sizing: fixed;
  resize: vertical;
  overflow: auto;
  height: 150px;
  min-height: 100px;
  max-height: 420px;
}

/* Same wrapper pattern as .cp-profile-form (Custom Platforms) — gap
   between stacked .kr-field labels, since .kr-field itself has none. */
.feedback-composer-form { display: flex; flex-direction: column; gap: 12px; }

/* Attach-screenshots control (common/site/feedback-widget.js
   renderAttachField()/renderAttachButton()) — replaces trying to style a
   native <input type="file"> directly. Three rounds of CSS
   (2026-08-23/24/25) couldn't stop the browser's own "no file chosen"
   status text from looking disconnected/truncated — it just isn't fully
   stylable in any browser. The real input is hidden entirely; a normal
   .puter-stats-btn opens it via .click() and our own span shows the
   filename(s), so it's the same button language as everywhere else on
   the site and fully within CSS's control. */
.feedback-attach-hidden-input { display: none; }
.feedback-attach { display: flex; flex-direction: column; gap: 8px; }
.feedback-attach-row { display: inline-flex; align-items: center; gap: 8px; }
.feedback-attach-summary { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* Reuses .remove-files-item/.rf-delete/.rf-name wholesale (see generators/pro-image/
   remove-files-modal.js) — same "square thumbnail + delete circle +
   name strip" component as the batch upload queue, just a smaller grid
   since there are at most 5 attachments here, not hundreds. */
.feedback-attach-preview:empty { display: none; }
.feedback-attach-preview.remove-files-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); max-width: 380px; }

.feedback-composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.feedback-btn-submit {
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  border: none;
  color: #fff;
  font-weight: 600;
}
.feedback-btn-submit:hover { background: linear-gradient(135deg, var(--purple), var(--cyan)); box-shadow: 0 0 14px rgba(124, 92, 255, 0.35); }
.feedback-btn-submit .ic svg { width: 14px; height: 14px; }
.feedback-btn-submit:disabled { opacity: 0.6; cursor: default; }

.feedback-thanks {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  font-size: 14px;
  margin: 0;
  padding: 10px 0;
}
.feedback-thanks .ic svg { width: 18px; height: 18px; }
.feedback-thanks a { color: var(--text-link); }
.feedback-attach-warning { font-size: 12px; color: var(--error); margin: 0; padding: 0 0 10px; }