/* replycoach
   The suggestion panel under the reply box, and the frame around the tool's
   own admin page. Deliberately quiet: it sits under something somebody is
   about to type into, so it must not compete with the Send button. */

.rc-mount { margin-top: 10px; }

.rc-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg, #f8fafc);
  padding: 9px 11px;
  font-size: 12.5px;
}
.rc-panel.stopped { border-color: #fca5a5; background: #fef2f2; }
.rc-panel.off { opacity: .8; }
.rc-panel.loading { display: flex; gap: 8px; align-items: center; }

.rc-head {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  /* A long verdict label next to a long lead name spills into the switch
     without this. Grid and flex children default to min-width:auto. */
  min-width: 0;
}
.rc-brand {
  font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #6d28d9;
}
.rc-verdict { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }

.rc-chip {
  display: inline-block;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; font-size: 11px; color: var(--muted, #64748b);
  background: #fff; white-space: nowrap;
}
.rc-chip.good { border-color: #86efac; color: #166534; background: #f0fdf4; }
.rc-chip.warn { border-color: #fcd34d; color: #92400e; background: #fffbeb; }
.rc-chip.bad { border-color: #fca5a5; color: #991b1b; background: #fef2f2; }
.rc-chip.btn-chip { cursor: pointer; }
.rc-chip.btn-chip:hover { background: #f1f5f9; }

.rc-switch { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--muted, #64748b); cursor: pointer; }
.rc-switch input { margin: 0; }

.rc-alert {
  margin-top: 7px; padding: 6px 9px; border-radius: 7px; font-size: 12px; line-height: 1.45;
  border: 1px solid #fcd34d; background: #fffbeb; color: #78350f;
  overflow-wrap: anywhere;
}
.rc-alert.bad { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }

.rc-picker { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.rc-tab {
  border: 1px solid var(--border); background: #fff; border-radius: 6px;
  padding: 2px 8px; font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer; color: var(--muted, #64748b);
}
.rc-tab.on { border-color: #6d28d9; color: #6d28d9; background: #f5f3ff; font-weight: 700; }

.rc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.rc-seg button {
  border: 0; background: #fff; padding: 2px 8px; font-size: 11.5px; cursor: pointer;
  color: var(--muted, #64748b);
}
.rc-seg button.on { background: #f5f3ff; color: #6d28d9; font-weight: 700; }

.rc-draft-meta { margin-top: 6px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 11.5px; }
.rc-lint { margin-top: 6px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.rc-coach {
  flex-basis: 100%; font-size: 11.5px; color: #92400e; line-height: 1.45;
  overflow-wrap: anywhere;
}
.rc-note { margin-top: 7px; font-size: 12px; color: var(--muted, #64748b); }

.rc-readonly {
  width: 100%; margin-top: 7px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px;
  background: #fff; resize: vertical;
}

.rc-more { margin-top: 8px; font-size: 12px; }
.rc-more summary { cursor: pointer; color: var(--muted, #64748b); }
.rc-recap { margin-top: 6px; overflow-wrap: anywhere; }
.rc-actions { margin: 6px 0 0; padding-left: 18px; color: var(--muted, #64748b); }
.rc-actions li { margin-bottom: 2px; }
.rc-why { margin-top: 6px; color: var(--muted, #64748b); font-size: 11.5px; line-height: 1.45; }

.rc-alts { margin-top: 8px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* The tool's own page, framed. It brings its own stylesheet, so nothing here
   reaches inside it. Tall on purpose: it is a three-column workbench and a
   short frame makes it unusable. */
.rc-frame { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.rc-frame iframe { display: block; width: 100%; height: 78vh; min-height: 560px; border: 0; }

/* icon() emits an SVG with no intrinsic size and the global default is 16px.
   Nothing in this panel wants a different one, but a button that holds only an
   icon collapses without an explicit box. */
.rc-panel svg { width: 14px; height: 14px; }