/* family.css — styles for views/family.js (member-to-member chat).
 *
 * Spec: specs/services/family-chat/spec.yaml > ui
 * Tack: TRK-483
 *
 * Aesthetic: Mac-native (Apple Messages cadence) reusing platform tokens.
 *   - Thread list rows (left rail) show avatar group + title + preview + time
 *   - Active thread renders bubbles grouped into runs by sender + 60s window
 *   - Outgoing = right-aligned, accent fill; incoming = left-aligned, surface-2 fill
 *   - Reactions are pill overlays anchored to bubble bottom-right
 *   - Composer mirrors AI chat composer for visual continuity
 *
 * Layering: only family-chat-specific selectors here. Round buttons reuse
 * .sift-icon-btn from app/css/05-icon-btn.css. Card edges, shadows, palette
 * tokens come from app/next/css/themes.css. Sizes consume the platform
 * scale (--fs-*, --sp-*, --r-*) declared in themes.css.
 */

.family-view {
  font-size: var(--fs-base);
  height: 100%;
  display: block;
}

.family-shell {
  display: grid;
  grid-template-columns: var(--family-rail-w, 280px) 1fr;
  height: 100%;
  min-height: 0;
}

@media (max-width: 720px) {
  .family-shell { grid-template-columns: 1fr; }
  .family-shell.has-active .family-threads { display: none; }
  .family-shell:not(.has-active) .family-active { display: none; }
}

/* ── Thread list rail ────────────────────────────────────────────────── */

.family-threads {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border, rgba(0,0,0,0.08));
  background: var(--surface, transparent);
  min-height: 0;
}

.family-threads__header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}

.family-threads__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, rgba(0,0,0,0.55));
  flex: 1;
}

.family-threads__list {
  list-style: none;
  margin: 0;
  padding: var(--sp-1) var(--sp-2) var(--sp-3);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.family-threads__group-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted, rgba(0,0,0,0.55));
  padding: var(--sp-3) var(--sp-2) var(--sp-1);
  letter-spacing: 0.02em;
}

.family-threads__group-label:first-child { padding-top: var(--sp-1); }

.family-thread-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--fg, rgba(0,0,0,0.85));
  font-size: var(--fs-base);
  transition: background var(--motion-tooltip-fade, 80ms) ease;
  margin: 1px 0;
  position: relative;
}

.family-thread-row:hover { background: var(--hover, rgba(0,0,0,0.04)); }

.family-thread-row.is-active {
  background: var(--ui-sidebar-btn-active, rgba(0,0,0,0.06));
  color: var(--ui-sidebar-btn-active-fg, var(--fg));
}

.family-thread-row__avatars {
  display: inline-flex;
  align-items: center;
}

.family-thread-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.family-thread-row__title {
  font-weight: 500;
  font-size: var(--fs-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg, rgba(0,0,0,0.9));
}

.family-thread-row.is-unread .family-thread-row__title { font-weight: 600; }

.family-thread-row__preview {
  font-size: var(--fs-xs);
  color: var(--muted, rgba(0,0,0,0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-thread-row.is-unread .family-thread-row__preview {
  color: var(--fg, rgba(0,0,0,0.85));
}

.family-thread-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--muted, rgba(0,0,0,0.55));
  font-variant-numeric: tabular-nums;
}

.family-thread-row__unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #0064E1);
  display: none;
}

.family-thread-row.is-unread .family-thread-row__unread-dot { display: block; }

.family-thread-row__muted-bell {
  font-size: 10px;
  color: var(--muted, rgba(0,0,0,0.45));
}

.family-thread-row--empty {
  padding: var(--sp-3);
  color: var(--muted, rgba(0,0,0,0.55));
  font-style: italic;
  cursor: default;
}

.family-thread-row--empty:hover { background: transparent; }

/* ── Avatars ──────────────────────────────────────────────────────────── */

.family-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--family-avatar-size, 28px);
  height: var(--family-avatar-size, 28px);
  border-radius: 50%;
  background: var(--family-avatar-bg, var(--surface-2, #eee));
  color: #fff;
  font-size: calc(var(--family-avatar-size, 28px) * 0.42);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  overflow: hidden;
  user-select: none;
}

.family-avatar--small  { --family-avatar-size: 22px; }
.family-avatar--medium { --family-avatar-size: 28px; }
.family-avatar--large  { --family-avatar-size: 36px; }

.family-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.family-avatar.is-online::after {
  content: '';
  position: absolute;
  width: calc(var(--family-avatar-size, 28px) * 0.32);
  height: calc(var(--family-avatar-size, 28px) * 0.32);
  background: var(--credit-fg, #34C759);
  border-radius: 50%;
  border: 2px solid var(--surface, #fff);
  bottom: 0;
  right: 0;
}

.family-avatar-group {
  display: inline-flex;
  flex-direction: row;
  position: relative;
}

.family-avatar-group .family-avatar {
  border: 2px solid var(--surface, #fff);
  margin-left: -8px;
}

.family-avatar-group .family-avatar:first-child { margin-left: 0; }

/* ── Active thread pane ──────────────────────────────────────────────── */

.family-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--surface, #fff);
}

.family-active__header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
  min-height: 56px;
}

.family-active__header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.family-active__title {
  font-weight: 600;
  font-size: var(--fs-md, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-active__presence {
  font-size: var(--fs-xs);
  color: var(--muted, rgba(0,0,0,0.55));
}

.family-active__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
  align-items: stretch;
}

.family-day-separator {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-1);
  color: var(--muted, rgba(0,0,0,0.55));
  font-size: var(--fs-xs);
  font-weight: 500;
}

.family-day-separator::before,
.family-day-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, rgba(0,0,0,0.06));
}

/* ── Empty state ─────────────────────────────────────────────────────── */

.family-empty {
  margin: auto;
  text-align: center;
  width: 100%;
  max-width: 560px;
  padding: var(--sp-6) var(--sp-5);
  color: var(--muted, rgba(0,0,0,0.55));
}

.family-empty__title {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
  color: var(--fg, rgba(0,0,0,0.9));
}

.family-empty__sub {
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0 0 var(--sp-5);
}

.family-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--accent, #0064E1);
  color: #fff;
  border: none;
  border-radius: var(--r-pill, 999px);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-base);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: filter var(--motion-tooltip-fade, 80ms) ease;
}

.family-empty__cta:hover { filter: brightness(0.95); }

/* ── Message runs + bubbles ──────────────────────────────────────────── */

.family-run {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.family-run--incoming { align-items: flex-start; }
.family-run--outgoing { align-items: flex-end; }

.family-run__head {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-1);
  margin-bottom: 2px;
}

.family-run__head-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  margin-left: calc(var(--family-avatar-size, 28px) + var(--sp-1));
}

.family-bubble {
  display: flex;
  gap: var(--sp-1);
  align-items: flex-end;
  max-width: 70%;
  position: relative;
}

.family-bubble--incoming { align-self: flex-start; flex-direction: row; }
.family-bubble--outgoing { align-self: flex-end;   flex-direction: row-reverse; }

.family-bubble__avatar-slot {
  width: var(--family-avatar-size, 28px);
  flex: 0 0 auto;
}

.family-bubble__body {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg, 14px);
  font-size: var(--fs-base);
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-width: 100%;
}

.family-bubble--incoming .family-bubble__body {
  background: var(--ui-bubble-incoming-bg, var(--surface-2, rgba(0,0,0,0.05)));
  color: var(--fg, rgba(0,0,0,0.9));
  border-bottom-left-radius: var(--r-sm, 6px);
}

.family-bubble--outgoing .family-bubble__body {
  background: var(--ui-bubble-outgoing-bg, var(--accent, #0064E1));
  color: var(--ui-bubble-outgoing-fg, #fff);
  border-bottom-right-radius: var(--r-sm, 6px);
}

/* When a run has multiple consecutive bubbles, smooth out the corners
   between them so the run reads as a unit. */
.family-bubble:not(:last-child)        .family-bubble__body { border-bottom-left-radius: var(--r-lg, 14px); }
.family-bubble + .family-bubble        .family-bubble__body { border-top-left-radius:    var(--r-sm, 6px); }
.family-run--outgoing .family-bubble:not(:last-child) .family-bubble__body { border-bottom-right-radius: var(--r-lg, 14px); border-bottom-left-radius: var(--r-lg,14px); }
.family-run--outgoing .family-bubble + .family-bubble .family-bubble__body { border-top-right-radius:    var(--r-sm, 6px); border-top-left-radius: var(--r-lg,14px); }

.family-bubble--deleted .family-bubble__body {
  font-style: italic;
  opacity: 0.6;
  background: transparent;
  border: 1px dashed var(--border, rgba(0,0,0,0.18));
  color: var(--muted, rgba(0,0,0,0.55));
}

.family-bubble__edited {
  font-size: var(--fs-xs);
  opacity: 0.7;
  margin-left: var(--sp-1);
}

/* ── Reply quote inline ──────────────────────────────────────────────── */

.family-bubble__reply {
  border-left: 3px solid var(--accent, #0064E1);
  padding: 4px var(--sp-2);
  margin-bottom: var(--sp-1);
  background: rgba(0,0,0,0.04);
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-xs);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 100%;
  overflow: hidden;
}

.family-bubble--outgoing .family-bubble__reply {
  background: rgba(255,255,255,0.18);
  border-left-color: rgba(255,255,255,0.7);
}

.family-bubble__reply-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-bubble__reply-body {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

/* ── Reactions ───────────────────────────────────────────────────────── */

.family-bubble__reactions {
  position: absolute;
  bottom: -10px;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding: 2px;
  pointer-events: auto;
}

.family-bubble--incoming .family-bubble__reactions { left:  var(--sp-2); right: auto; }
.family-bubble--outgoing .family-bubble__reactions { right: var(--sp-2); left:  auto; }

.family-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: var(--r-pill, 999px);
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.10));
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform var(--motion-tooltip-fade, 80ms) ease;
}

.family-reaction-pill:hover { transform: translateY(-1px); }
.family-reaction-pill.is-mine {
  border-color: var(--accent, #0064E1);
  background: rgba(0,100,225,0.10);
}

.family-reaction-pill__emoji { font-size: 12px; }
.family-reaction-pill__count {
  font-variant-numeric: tabular-nums;
  color: var(--muted, rgba(0,0,0,0.65));
}

/* Reaction picker popover (anchored above bubble on hover/long-press). */
.family-reaction-picker {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.10));
  border-radius: var(--r-pill, 999px);
  box-shadow: var(--lf-shadow-card, 0 8px 24px rgba(0,0,0,0.12));
}

.family-reaction-picker__btn {
  --icon-btn-size: 28px;
  font-size: 18px;
}

/* ── Receipts ────────────────────────────────────────────────────────── */

.family-run__receipts {
  font-size: var(--fs-xs);
  color: var(--muted, rgba(0,0,0,0.5));
  align-self: flex-end;
  margin-top: 2px;
  margin-right: var(--sp-1);
}

/* ── Typing indicator ────────────────────────────────────────────────── */

.family-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--ui-bubble-incoming-bg, var(--surface-2, rgba(0,0,0,0.05)));
  border-radius: var(--r-lg, 14px);
  border-bottom-left-radius: var(--r-sm, 6px);
}

.family-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted, rgba(0,0,0,0.45));
  animation: family-typing-bounce 1.2s infinite ease-in-out;
}

.family-typing__dot:nth-child(2) { animation-delay: 0.15s; }
.family-typing__dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes family-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Composer ────────────────────────────────────────────────────────── */

.family-composer {
  flex: 0 0 auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: transparent;
  display: flex;
  justify-content: center;
}

.family-composer__card {
  width: 100%;
  max-width: var(--family-bubble-max, 720px);
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: var(--r-lg);
  box-shadow: var(--lf-shadow-card, 0 0 28px rgba(0,0,0,0.08));
  padding: var(--sp-2) var(--sp-3);
  transition: border-color var(--motion-tooltip-fade, 80ms) ease;
}

.family-composer__card:focus-within {
  border-color: var(--accent, #0064E1);
}

.family-composer__reply-pin {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: rgba(0,100,225,0.06);
  border-left: 3px solid var(--accent, #0064E1);
  border-radius: var(--r-sm, 6px);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--muted, rgba(0,0,0,0.65));
}

.family-composer__reply-pin-name {
  font-weight: 600;
  color: var(--fg, rgba(0,0,0,0.9));
}

.family-composer__reply-pin-cancel {
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted, rgba(0,0,0,0.55));
  font-size: 14px;
  padding: 0 4px;
}

.family-composer__attachments {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  padding: var(--sp-1) 0;
}

.family-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 6px;
  background: var(--surface-2, rgba(0,0,0,0.05));
  border-radius: var(--r-sm, 6px);
  font-size: var(--fs-xs);
}

.family-attachment-chip__thumb {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

.family-attachment-chip__cancel {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted, rgba(0,0,0,0.55));
}

.family-composer__textarea {
  width: 100%;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--fg, rgba(0,0,0,0.9));
  padding: var(--sp-2) 0;
  max-height: var(--family-textarea-max, 200px);
  min-height: var(--family-textarea-min, 36px);
}

.family-composer__textarea::placeholder {
  color: var(--muted, rgba(0,0,0,0.42));
}

.family-composer__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.family-composer__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 1;
}

.family-composer__send {
  flex: 0 0 auto;
  margin-left: auto;
}

.family-composer__send[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Onboarding card ─────────────────────────────────────────────────── */

.family-onboarding {
  margin: auto;
  max-width: 460px;
  padding: var(--sp-5);
  text-align: center;
}

.family-onboarding__title {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 var(--sp-3);
  color: var(--fg, rgba(0,0,0,0.9));
}

.family-onboarding__sub {
  font-size: var(--fs-base);
  color: var(--muted, rgba(0,0,0,0.6));
  margin: 0 0 var(--sp-5);
  line-height: 1.5;
}

.family-onboarding__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: stretch;
}

.family-onboarding__form label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted, rgba(0,0,0,0.6));
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.family-onboarding__input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border, rgba(0,0,0,0.18));
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--motion-tooltip-fade, 80ms) ease;
}

.family-onboarding__input:focus { border-color: var(--accent, #0064E1); }

.family-onboarding__cta {
  margin-top: var(--sp-3);
  background: var(--accent, #0064E1);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}