/* What the service adds beyond the static prototype.
 *
 * post.css is the locked frame and stays byte-identical to
 * design/post-prototype/post.css — a test fails the build if it drifts.
 * Anything the running service needs and the prototype did not have goes
 * here instead. Extending the design language, never forking it
 * (docs/design-language.md).
 *
 * Nothing here may touch the grid, the reading column's width, or its
 * position. Those are frozen.
 */

/* Signing in happens inside the composer, and only there. A reader who is
   only reading never sees any of this (AC-10). */

.composer .providers { display: flex; gap: 8px; }

.composer .signin {
  font-size: 12px;
  color: var(--wc-paper);
  background: var(--wc-accent);
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
}
.composer .signin:hover { background: var(--qe-accent-deep); }

.composer .draft[contenteditable] { outline: none; min-height: 1.6em; }

/* A reply box opens in place, with the same shape as the composer. */
.box.open {
  border-color: var(--wc-accent);
  background: var(--wc-card);
  color: var(--wc-body);
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 12px;
}
.box.open .foot { display: flex; justify-content: space-between; align-items: center; }
.box.open .note { font-size: 11px; color: var(--wc-faint); font-style: italic; }
.box.open .send {
  font-size: 12px;
  color: var(--wc-paper);
  background: var(--wc-accent);
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
}
.box.open .send:hover { background: var(--qe-accent-deep); }

/* The picker is filled by the page when a reader clicks shading that two
   conversations share. Its card styling is in post.css, with the rest of
   the locked frame; this only lays out the rows it is given. */
.picker .rows { display: flex; flex-direction: column; gap: 8px; }
.picker .rows:empty { display: none; }

/* Focus, the text half.
 *
 * "Focus is two-way: entry ⇄ text." The prototype named its two sample
 * conversations directly in post.css. Real messages have ids, so the page
 * marks the shading a focused conversation owns and this styles it. The
 * grammar is unchanged: the focused range deepens and keeps the accent
 * underline the design language asks for.
 */

.q.qfocus {
  background: var(--qe-highlight-focus);
  border-bottom: 2px solid var(--qe-accent-deep);
  box-shadow: 0 0 0 2px var(--qe-highlight-focus);
}