/* Gorgias Render Preview playground (Tools::GorgiasRenderingController) — index +
   show. Extracted from inline view styles, following the tools/<tool>.css pattern.
   Shared chrome (.tools-container, .card, .muted, .btn, .session-*, .tc-card-*)
   lives in the global manifest; these are the preview-specific bits. */

/* ── shared text/spacing helpers ── */
.grp-lead     { color: #6b7280; }
.grp-hint     { color: #6b7280; font-size: 13px; }
.grp-empty    { color: #9ca3af; }
.grp-actions  { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.grp-divider  { margin: 28px 0; }

/* Secondary nav button (mirrors the .btn-secondary pattern used by other tools). */
.grp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.grp-btn:hover { background: #e5e7eb; border-color: #9ca3af; }

/* ── index (playground list) ── */
.grp-intro     { color: #6b7280; font-size: 13px; margin: 4px 0 16px; }
.grp-followup-badge { background: #7c3aed; color: #fff; }
.grp-muted-sm  { color: #9ca3af; font-size: 12px; }
.grp-summary   { cursor: pointer; color: #6b7280; }
.grp-test-card { margin-top: 12px; }
.grp-json-input{ width: 100%; font-family: monospace; }

/* ── PIM discussion mirror ── */
.grp-mirror           { margin: 18px 0; }
.grp-mirror h3        { margin: 0 0 4px; }
.grp-mirror .grp-hint { margin: 0 0 10px; }
.grp-mirror-box       { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 14px; }
.grp-badge-gorgias    { background: #7c3aed; color: #fff; border-radius: 4px; padding: 1px 6px; font-size: 10px; }

/* ── tabbed panels ── */
.grp-tabs input[type=radio] { display: none; }
.grp-tab-labels { display: flex; gap: 6px; border-bottom: 2px solid #e5e7eb; margin: 16px 0 0; }
.grp-tab-labels label { padding: 8px 16px; cursor: pointer; font-weight: 600; color: #6b7280; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; }
.grp-tab-count { background: #0891b2; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 11px; margin-left: 6px; }
.grp-panel { display: none; padding-top: 18px; }
#grp-inbound:checked   ~ .grp-tab-labels label[for=grp-inbound],
#grp-note:checked      ~ .grp-tab-labels label[for=grp-note],
#grp-public:checked    ~ .grp-tab-labels label[for=grp-public],
#grp-followups:checked ~ .grp-tab-labels label[for=grp-followups],
#grp-simulate:checked  ~ .grp-tab-labels label[for=grp-simulate] { color: #0891b2; border-color: #e5e7eb; background: #f8fafc; }
#grp-inbound:checked   ~ #panel-inbound,
#grp-note:checked      ~ #panel-note,
#grp-public:checked    ~ #panel-public,
#grp-followups:checked ~ #panel-followups,
#grp-simulate:checked  ~ #panel-simulate { display: block; }
.grp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grp-col h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; }
.grp-source { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 16px; font-family: monospace; font-size: 12px; white-space: pre-wrap; word-break: break-word; min-height: 360px; overflow: auto; }

/* ── follow-up cards ── */
.followup-list { display: flex; flex-direction: column; gap: 16px; }
.followup-card { border: 1px solid #d1d5db; border-radius: 8px; padding: 14px 16px; background: #fff; }
.followup-card .tc-card-body    { color: #6b7280; font-size: 13px; margin-top: 4px; }
.followup-card .tc-card-meta    { margin-top: 6px; font-size: 11px; color: #9ca3af; }
.followup-card .tc-card-actions { margin-top: 8px; }

/* ── simulate reply ── */
.grp-sim-result { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.grp-sim-result pre { margin: 6px 0 0; white-space: pre-wrap; }
.grp-reply-input { width: 100%; font-family: inherit; }

/* ── Gorgias message card (_gorgias_card): accent/bg vary by message kind ── */
.gorgias-card { border: 1px solid #e5e7eb; border-left: 4px solid var(--grp-accent, #0891b2); border-radius: 8px; overflow: hidden; }
.gorgias-card--customer      { --grp-accent: #0891b2; background: #ffffff; }
.gorgias-card--internal_note { --grp-accent: #f59e0b; background: #fffbeb; }
.gorgias-card--public_reply  { --grp-accent: #2563eb; background: #ffffff; }
.gorgias-card__head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #eef2f7; font-size: 12px; color: #6b7280; }
.gorgias-card__body { padding: 16px 18px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.6; color: #1f2937; }
.gorgias-card__sender { font-weight: 600; color: #374151; }
.gorgias-card__badge  { margin-left: auto; background: #f3f4f6; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.gorgias-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--grp-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }