/*!
 * socialnet-composer.css - the post box, made to feel like a social app rather than
 * a form.
 *
 * What was there: a "▧" box glyph standing in for a photo icon, a bare square
 * checkbox labelled "Post without my name", a hard rule across the middle, and a
 * small rectangular button. That is the visual language of an office dialog.
 *
 * What it is now: two round tap targets and one primary action. The photo control is
 * an icon and a word in a pill that lights up under the cursor. The anonymity control
 * is a chip that visibly fills in when it is on, so its state is readable at a glance
 * instead of from a 13px tick.
 *
 * The checkbox is still a real <input type="checkbox">, only visually replaced. It
 * keeps its id, so the existing JS is untouched, and it stays keyboard reachable and
 * announced by a screen reader. The focus ring is drawn on the chip.
 *
 * Every selector is prefixed with #socialComposer so it beats the single-class rules
 * in socialnet.css without !important, and so nothing outside the post box moves.
 */

#socialComposer .composer-actions {
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--social-line) 70%, transparent);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- photo: an icon and a word, in a pill ---------- */
#socialComposer .photo-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--social-teal);
  background: transparent;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
  -webkit-tap-highlight-color: transparent;
}
#socialComposer .photo-choice:hover {
  background: color-mix(in srgb, var(--social-teal) 10%, transparent);
}
#socialComposer .photo-choice:active { transform: scale(.97); }
#socialComposer .photo-choice svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#socialComposer .photo-choice:focus-within {
  outline: 3px solid color-mix(in srgb, var(--social-teal) 45%, transparent);
  outline-offset: 2px;
}

/* ---------- anonymity: a chip that fills in, not a checkbox ---------- */
#socialComposer .anonymous-choice {
  display: inline-flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#socialComposer .anonymous-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#socialComposer .anon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--social-line);
  background: var(--social-paper, #fff);
  color: var(--social-muted);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
#socialComposer .anon-chip svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#socialComposer .anonymous-choice:hover .anon-chip {
  border-color: color-mix(in srgb, var(--social-teal) 45%, var(--social-line));
  color: var(--social-ink);
}
#socialComposer .anonymous-choice input:active + .anon-chip { transform: scale(.97); }
#socialComposer .anonymous-choice input:checked + .anon-chip {
  background: var(--social-teal);
  border-color: var(--social-teal);
  color: #fff;
}
#socialComposer .anonymous-choice input:focus-visible + .anon-chip {
  outline: 3px solid color-mix(in srgb, var(--social-teal) 45%, transparent);
  outline-offset: 2px;
}

/* ---------- publish: one clear primary action ---------- */
#socialComposer .publish-button {
  margin-left: auto;
  border-radius: 999px;
  padding: 11px 26px;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#socialComposer .publish-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.06);
}
#socialComposer .publish-button:active { transform: translateY(0) scale(.98); }

/* ---------- the writing area ---------- */
#socialComposer .composer-start textarea {
  transition: background .16s ease, box-shadow .16s ease;
}
#socialComposer .composer-start textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--social-teal) 26%, transparent);
}

/* ---------- small screens: the controls stay reachable with a thumb ---------- */
@media (max-width: 560px) {
  #socialComposer .composer-actions { gap: 6px; }
  #socialComposer .photo-choice,
  #socialComposer .anon-chip { padding: 10px 13px; font-size: .82rem; }
  #socialComposer .publish-button { padding: 11px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  #socialComposer .photo-choice,
  #socialComposer .anon-chip,
  #socialComposer .publish-button,
  #socialComposer .composer-start textarea { transition: none; }
}