/* Request thread + detail primitives. SHARED by the client portal (styles.css) and
   the internal CRM (crm.css).
 *
 * WHY THIS FILE EXISTS AT ALL. The thread renders on two surfaces: the client sees it
 * on their request, Keegan sees the same conversation in the CRM. Written into either
 * stylesheet it would be unreachable from the other, and the second surface would get
 * rebuilt by hand and drift. That is precisely how the Court Room ended up as two
 * halves of one product with two looks.
 *
 * HOW THE THEMING WORKS. The two hosts name their tokens differently (styles.css uses
 * --color-*, crm.css uses bare --ink/--cream/--accent), so this file speaks only in
 * --th-* and each host maps its own palette onto those near the top of its file. Every
 * var here carries a literal fallback as well, so a host that forgets to map something
 * degrades to a readable neutral instead of rendering invisible text.
 *
 * Structure lives here. Palette does not. If you find yourself writing a colour
 * literal below, map a token instead. */

/* ---- the original submission, as labelled blocks ------------------------- */
.rd-block { margin-bottom: 20px; }
.rd-block:last-child { margin-bottom: 0; }
.rd-block-label { font-family: var(--th-font-label, sans-serif); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--th-ink-muted, #5a4631); margin-bottom: 7px; }
.rd-block-body { font-size: 0.95rem; line-height: 1.6; color: var(--th-ink-soft, #3a2a1a); white-space: pre-wrap; }
.rd-block-quote { border-left: 3px solid var(--th-accent, #8a3324); padding: 3px 0 3px 14px; }

/* ---- attachment tiles ---------------------------------------------------- */
.rd-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.rd-file { display: block; border: 1.5px solid var(--th-ink, #1f1812); border-radius: 3px; background: var(--th-linen, #efe6d3); box-shadow: 2px 3px 0 var(--th-shadow, rgba(31, 24, 18, 0.55)); overflow: hidden; transition: transform 0.18s var(--th-ease, ease-out), box-shadow 0.18s var(--th-ease, ease-out); }
.rd-file:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 var(--th-shadow, rgba(31, 24, 18, 0.7)); }
.rd-file img { width: 100%; height: 108px; object-fit: cover; background: var(--th-linen-soft, #e8dbc3); }
.rd-file-doc { height: 108px; display: flex; align-items: center; justify-content: center; font-family: var(--th-font-label, sans-serif); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--th-accent, #8a3324); background: var(--th-linen-soft, #e8dbc3); }
.rd-file-name { font-family: var(--th-font-label, sans-serif); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--th-ink-muted, #5a4631); padding: 8px 10px; border-top: 1.5px solid var(--th-ink, #1f1812); background: var(--th-cream, #fffbed); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the thread ---------------------------------------------------------- */
/* One rail down the left carries every entry, so notes, status changes and
   attachments read as a single sequence in the order they happened. */
.rd-thread { position: relative; padding-left: 26px; }
.rd-thread::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--th-rule, rgba(31, 24, 18, 0.16)); }
.rd-entry { position: relative; padding-bottom: 24px; }
.rd-entry:last-child { padding-bottom: 4px; }
/* Square markers, not dots: matches the accent dash the section labels already use. */
.rd-entry::before { content: ''; position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border: 2px solid var(--th-ink, #1f1812); background: var(--th-cream, #fffbed); border-radius: 2px; }
.rd-entry.is-admin::before { background: var(--th-accent, #8a3324); border-color: var(--th-accent, #8a3324); }
.rd-entry.is-status::before { width: 8px; height: 8px; left: -24px; top: 7px; background: var(--th-ink-muted, #5a4631); border-color: var(--th-ink-muted, #5a4631); }

.rd-entry-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.rd-author { font-family: var(--th-font-label, sans-serif); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--th-ink, #1f1812); }
.rd-entry.is-admin .rd-author { color: var(--th-accent, #8a3324); }
.rd-when { font-family: var(--th-font-label, sans-serif); font-weight: 500; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--th-ink-muted, #5a4631); }

/* A message is a card, an event is a line. That difference is what stops a status
   change from reading as something somebody said out loud. */
.rd-bubble { background: var(--th-linen, #efe6d3); border: 1.5px solid var(--th-ink, #1f1812); border-radius: 3px; padding: 14px 16px; box-shadow: 2px 3px 0 var(--th-shadow, rgba(31, 24, 18, 0.5)); font-size: 0.95rem; line-height: 1.6; color: var(--th-ink, #1f1812); white-space: pre-wrap; }
.rd-entry.is-admin .rd-bubble { background: var(--th-cream, #fffbed); border-color: var(--th-accent, #8a3324); box-shadow: 2px 3px 0 var(--th-shadow-accent, rgba(138, 51, 36, 0.35)); }
.rd-event { font-family: var(--th-font-label, sans-serif); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--th-ink-muted, #5a4631); }
.rd-event strong { color: var(--th-ink, #1f1812); font-weight: 700; }

/* Internal notes are admin-only and must never be mistakable for something the client
   sent or can see. Hatched, dashed, and labelled. */
.rd-entry.is-internal .rd-bubble { background: repeating-linear-gradient(135deg, var(--th-hatch, rgba(31,24,18,0.05)) 0 6px, transparent 6px 12px), var(--th-linen-soft, #e8dbc3); border-style: dashed; }
.rd-internal-tag { font-family: var(--th-font-label, sans-serif); font-weight: 700; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--th-ink-muted, #5a4631); border: 1.5px solid var(--th-ink-muted, #5a4631); border-radius: 2px; padding: 2px 7px; }

/* An attachment inside the thread reuses the tile from the strip, just narrower. It
   must not restyle the tile's own image: doing that fought the tile's height rule and
   rendered a squeezed thumbnail with dead space beside it. */
.rd-thread-attach { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.rd-thread-attach .rd-file { width: 148px; }
.rd-thread-attach .rd-file img, .rd-thread-attach .rd-file-doc { height: 88px; }

/* ---- composer ------------------------------------------------------------ */
.rd-composer { margin-top: 26px; padding-top: 24px; border-top: 2px dashed var(--th-rule-strong, rgba(138, 51, 36, 0.35)); }
.rd-composer-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.rd-attach { display: inline-flex; align-items: center; gap: 8px; font-family: var(--th-font-label, sans-serif); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--th-ink-muted, #5a4631); cursor: pointer; border-bottom: 1.5px dashed var(--th-ink-muted, #5a4631); padding-bottom: 3px; transition: color 0.2s, border-color 0.2s; }
.rd-attach:hover { color: var(--th-accent, #8a3324); border-color: var(--th-accent, #8a3324); }
.rd-attach svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; }
.rd-attach input[type=file] { display: none; }
.rd-pending { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rd-pending-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--th-font-label, sans-serif); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--th-ink-soft, #3a2a1a); background: var(--th-linen, #efe6d3); border: 1.5px solid var(--th-ink, #1f1812); border-radius: 2px; padding: 6px 10px; }

/* ---- shared meta line ---------------------------------------------------- */
.rd-meta { font-family: var(--th-font-label, sans-serif); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--th-ink-muted, #5a4631); }

@media (max-width: 640px) {
  .rd-files { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .rd-composer-actions { gap: 12px; }
}