/* Rich reply editor (partials/reply-editor.ejs + js/reply-editor.js). */
/* !important: site CSS gives forms inside comment threads `display: contents`,
   which collapses the form to a 0x0 non-box — flex layout AND the fixed
   full-screen overlay silently break. This component must own its box. */
.re-form[data-re] { display: flex !important; flex-direction: column; gap: .45rem; }

.re-toolbar { display: flex; gap: .25rem; flex-wrap: wrap; }
.re-toolbar button {
  border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent);
  background: none; color: inherit; border-radius: 8px;
  min-width: 2rem; height: 1.9rem; padding: 0 .45rem;
  font-size: .85rem; line-height: 1; cursor: pointer;
}
.re-toolbar button:hover { background: color-mix(in srgb, var(--ink, #000) 8%, transparent); }

.re-editor {
  min-height: 4.2rem; padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent);
  background: transparent; overflow-wrap: anywhere; outline: none;
}
.re-editor:focus { border-color: var(--accent, #06c); }
.re-editor:empty::before { content: attr(data-ph); color: color-mix(in srgb, var(--ink, #000) 40%, transparent); pointer-events: none; }
.re-editor blockquote { margin: .4rem 0; padding-left: .7rem; border-left: 3px solid color-mix(in srgb, var(--ink, #000) 20%, transparent); }

.re-foot { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; }
.re-lang {
  font: inherit; font-size: .82rem; padding: .3rem .45rem; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ink, #000) 16%, transparent);
  background: transparent; color: inherit; max-width: 10rem;
}

/* Mentions bar (u02): conversation partners as removable chips. */
.re-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.re-mentions-label { font-size: .78rem; color: color-mix(in srgb, var(--ink, #000) 55%, transparent); }
.re-mention {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .15rem .3rem .15rem .55rem; border-radius: 999px; font-size: .8rem;
  background: color-mix(in srgb, var(--accent, #06c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #06c) 30%, transparent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.re-mention-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }

/* Media attachments (chips under the editor). */
.re-attachments { display: flex; flex-wrap: wrap; gap: .4rem; }
.re-att {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .4rem; border-radius: 8px; font-size: .8rem;
  background: color-mix(in srgb, var(--ink, #000) 7%, transparent);
  max-width: 100%; overflow: hidden;
}
.re-att img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.re-att-del { border: none; background: none; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .15rem; }
.re-att-err { background: color-mix(in srgb, #c00 18%, transparent); }
.re-editor.re-drop { border-color: var(--accent, #06c); border-style: dashed; }

/* Media on a sent reply in the thread (fedi-node). */
.re-reply-media { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.re-reply-media img { max-width: min(260px, 100%); max-height: 260px; border-radius: 10px; display: block; }
.re-reply-media audio { max-width: 100%; }
.re-reply-media video { max-width: min(320px, 100%); border-radius: 10px; }

/* Full-screen compose (mobile). JS toggles .re-full on the form. */
.re-head { display: flex; align-items: center; gap: .6rem; }
.re-head-title { flex: 1; text-align: center; font-size: .95rem; }
.re-cancel {
  border: none; background: none; color: inherit; font-size: 1.5rem;
  line-height: 1; padding: .25rem .5rem; cursor: pointer;
}
.re-form.re-full {
  /* Above the bottom tab bar (1050) and the profile/audio sheets (1100). */
  position: fixed; inset: 0; z-index: 1200;
  background: var(--paper, #fff); padding: .8rem .9rem;
  padding-top: calc(.8rem + env(safe-area-inset-top));
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
  gap: .6rem;
}
.re-form.re-full .re-head { order: -1; }   /* the top bar stays topmost, above the mentions bar */
.re-form.re-full .re-editor { flex: 1; min-height: 0; overflow-y: auto; border: none; padding: .4rem .1rem; }
.re-form.re-full .re-editor:focus { border: none; }
.re-form.re-full .re-send { display: none; }         /* send lives in the top bar */
.re-form.re-full .re-foot { justify-content: flex-start; }
html.re-lock, html.re-lock body { overflow: hidden; }