/* ================================================================
   MessageComposer — base styles + theme tokens
   Shared across Peace Path (theme: peace) and Filing Dashboard (theme: legal)
   Component behavior is identical; only CSS custom properties differ.
================================================================ */

/* ── Layout ─────────────────────────────────────────────────── */

.mc-shell {
  width: 100%;
}

.mc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 760px) {
  .mc-layout { grid-template-columns: 1fr; }
}

/* ── Input column ────────────────────────────────────────────── */

.mc-input-col {
  display: flex;
  flex-direction: column;
}

.mc-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--mc-label-color);
  letter-spacing: 0.01em;
}

.mc-raw {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 12px 14px;
  border-radius: var(--mc-radius);
  border: 1px solid var(--mc-border);
  background: var(--mc-input-bg);
  color: var(--mc-text);
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.6;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mc-raw:focus {
  outline: none;
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 3px var(--mc-accent-ring);
}

.mc-raw::placeholder {
  color: var(--mc-muted);
  font-style: italic;
}

.mc-input-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mc-analyze-btn {
  padding: 9px 20px;
  border-radius: var(--mc-radius);
  border: 1px solid var(--mc-border);
  background: var(--mc-btn-bg);
  color: var(--mc-text);
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.mc-access-note {
  font-size: 0.75rem;
  color: var(--mc-muted, rgba(255,255,255,.30));
  line-height: 1.4;
}

.mc-analyze-btn:hover {
  background: var(--mc-btn-hover);
  border-color: var(--mc-accent);
}

/* Loading state — applied to .mc-shell while analysis is in flight */
.mc-shell--analyzing .mc-analyze-btn {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.mc-shell--analyzing .mc-raw {
  opacity: 0.7;
}

/* Pulsing dot indicator next to status text during analysis */
.mc-status {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--mc-muted);
  min-height: 1.1em;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mc-status-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mc-accent);
  flex-shrink: 0;
  animation: mc-pulse 1.2s ease-in-out infinite;
}

.mc-shell--analyzing .mc-status-dot {
  display: block;
}

@keyframes mc-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%       { opacity: 1;   transform: scale(1); }
}

/* ── Variants column ─────────────────────────────────────────── */

.mc-variants {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-variant {
  padding: 12px 14px 14px;
  border-radius: var(--mc-radius);
  border: 1px solid var(--mc-border);
  background: var(--mc-variant-bg);
}

.mc-variant-header {
  margin-bottom: 8px;
}

.mc-variant-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mc-accent);
}

.mc-variant-text {
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--mc-text);
  min-height: 1.5em;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Court perception indicator */
.mc-perception {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--mc-divider);
}

.mc-perception-text {
  font-size: 0.75rem;
  color: var(--mc-muted);
  font-style: italic;
  line-height: 1.45;
  display: block;
}

/* Rephrasing guidance (Original card only) */
.mc-guidance {
  margin-top: 6px;
}

.mc-guidance-text {
  font-size: 0.75rem;
  color: var(--mc-muted);
  line-height: 1.45;
  display: block;
}

/* Explicit send controls — each version gets its own button */
.mc-send-btn {
  margin-top: 12px;
  width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--mc-accent);
  background: transparent;
  color: var(--mc-accent);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mc-send-btn:hover {
  background: var(--mc-accent);
  color: var(--mc-send-btn-text);
}

/* Contextual reinforcement — subtle, positioned below the analyze button */
.mc-context-note {
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--mc-muted);
  line-height: 1.5;
  font-style: italic;
}

/* ── Thread log — canonical styles (shared across all host pages) ── */

.mc-thread-log {
  margin-top: 24px;
}

.mc-thread-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mc-muted);
  margin-bottom: 8px;
  display: block;
}

.mc-thread-entry {
  padding: 10px 14px;
  border-radius: var(--mc-radius);
  border: 1px solid var(--mc-border);
  background: var(--mc-variant-bg);
  margin-bottom: 8px;
}

.mc-thread-meta {
  font-size: 0.7rem;
  color: var(--mc-muted);
  margin-bottom: 4px;
}

.mc-thread-text {
  font-size: 0.87rem;
  color: var(--mc-text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.mc-thread-empty {
  font-size: 0.8rem;
  color: var(--mc-muted);
  font-style: italic;
}

/* ── Send confirmation — inline two-stage ────────────────────── */

.mc-variant--confirming {
  border-color: var(--mc-accent);
}

.mc-confirm {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--mc-divider);
}

.mc-confirm-note {
  display: block;
  font-size: 0.8rem;
  color: var(--mc-text);
  margin-bottom: 10px;
  line-height: 1.45;
}

.mc-confirm-actions {
  display: flex;
  gap: 8px;
}

.mc-confirm-yes {
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--mc-accent);
  background: var(--mc-accent);
  color: var(--mc-send-btn-text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.mc-confirm-cancel {
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--mc-border);
  background: transparent;
  color: var(--mc-muted);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.15s;
}

.mc-confirm-cancel:hover {
  color: var(--mc-text);
}

/* ── Content warning ─────────────────────────────────────────── */

.mc-content-warning {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--mc-radius);
  border: 1px solid var(--mc-warn-border);
  background: var(--mc-warn-bg);
}

.mc-warning-label {
  display: block;
  font-size: 0.88rem;
  color: var(--mc-warn-text);
  margin-bottom: 6px;
}

.mc-warning-body {
  font-size: 0.8rem;
  color: var(--mc-warn-text);
  margin: 0;
  opacity: 0.8;
  line-height: 1.5;
}

/* ── Flags ───────────────────────────────────────────────────── */

.mc-flags {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--mc-radius);
  border: 1px solid var(--mc-warn-border);
  background: var(--mc-warn-bg);
}

.mc-flags-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mc-warn-text);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mc-flags-list {
  margin: 0;
  padding-left: 18px;
}

.mc-flags-list li {
  font-size: 0.82rem;
  color: var(--mc-warn-text);
  margin-bottom: 4px;
  line-height: 1.45;
}

/* ================================================================
   THEME: peace / amicable
   Soft, calm, low-contrast — spa-like
================================================================ */

.mc-theme-peace {
  --mc-label-color:    rgba(255,255,255,.75);
  --mc-border:         rgba(255,255,255,.10);
  --mc-divider:        rgba(255,255,255,.07);
  --mc-input-bg:       rgba(255,255,255,.03);
  --mc-variant-bg:     rgba(255,255,255,.02);
  --mc-text:           rgba(255,255,255,.88);
  --mc-muted:          rgba(255,255,255,.42);
  --mc-btn-bg:         rgba(255,255,255,.05);
  --mc-btn-hover:      rgba(255,255,255,.10);
  --mc-accent:         #7ecfad;
  --mc-accent-ring:    rgba(126,207,173,.10);
  --mc-send-btn-text:  #07140f;
  --mc-warn-border:    rgba(251,191,36,.15);
  --mc-warn-bg:        rgba(251,191,36,.04);
  --mc-warn-text:      rgba(251,191,36,.85);
  --mc-radius:         14px;
}

/* ================================================================
   THEME: legal / filing dashboard
   Structured, higher contrast — procedural clarity
================================================================ */

.mc-theme-legal {
  --mc-label-color:    rgba(255,255,255,.85);
  --mc-border:         rgba(255,255,255,.18);
  --mc-divider:        rgba(255,255,255,.10);
  --mc-input-bg:       rgba(255,255,255,.05);
  --mc-variant-bg:     rgba(255,255,255,.04);
  --mc-text:           rgba(255,255,255,.94);
  --mc-muted:          rgba(255,255,255,.52);
  --mc-btn-bg:         rgba(255,255,255,.07);
  --mc-btn-hover:      rgba(255,255,255,.13);
  --mc-accent:         #60a5fa;
  --mc-accent-ring:    rgba(96,165,250,.14);
  --mc-send-btn-text:  #060d1e;
  --mc-warn-border:    rgba(251,191,36,.22);
  --mc-warn-bg:        rgba(251,191,36,.07);
  --mc-warn-text:      rgba(251,191,36,.92);
  --mc-radius:         10px;
}