/* AI canvas suggestion preview (module classnames cp-*). Mobile-first, normal
   document flow: the panel sits in page flow and never overlays the canvas,
   editor, or call controls. The parent page adds this stylesheet. No fixed
   overlay here: the parent callbar/dialog hosts handle positioning. */
.cp-panel {
  box-sizing: border-box;
  position: static;
  width: 100%;
  max-width: 44rem;
  max-block-size: min(54dvh, 26rem);
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0.75rem auto;
  padding: 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.875rem;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cp-panel[hidden],
.cp-panel [hidden] {
  display: none !important;
}
.cp-notice,
.cp-status,
.cp-summary {
  margin: 0.5rem 0;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.cp-notice {
  color: #334155;
}
.cp-status {
  font-weight: 600;
}
.cp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  position: sticky;
  bottom: 0;
  background: #f8fafc;
  padding-block: 0.5rem;
}
.cp-controls .cp-btn {
  flex: 1 1 0;
  flex-basis: 0;
  min-width: 0;
}
.cp-btn {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #64748b;
  border-radius: 0.375rem;
  background: #fff;
  color: #0f172a;
  font-size: 0.875rem;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.cp-btn.cp-primary {
  border-color: #166534;
  background: #166534;
  color: #fff;
}
.cp-btn:hover {
  filter: brightness(0.96);
}
.cp-btn:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}
.cp-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
.cp-preview {
  margin-top: 0.5rem;
  min-width: 0;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}
.cp-legend {
  margin: 0.25rem 0 0.5rem;
  font-weight: 600;
}
.cp-summary {
  margin: 0.5rem 0 0;
  overflow-wrap: anywhere;
}
.cp-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(25dvh, 210px);
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #fff;
}
.cp-card rect {
  fill: #fff;
  stroke: #64748b;
  stroke-width: 2;
}
.cp-card-add rect {
  fill: #f0fdf4;
  stroke: #15803d;
  stroke-width: 3;
}
.cp-card-del rect {
  fill: #fef2f2;
  stroke: #dc2626;
  stroke-width: 3;
  stroke-dasharray: 8 4;
}
.cp-card-edit rect {
  fill: #fffbeb;
  stroke: #d97706;
  stroke-width: 3;
}
.cp-edge {
  stroke: #64748b;
  stroke-width: 2;
}
.cp-edge-add {
  stroke: #15803d;
  stroke-width: 3;
}
.cp-edge-del {
  stroke: #dc2626;
  stroke-width: 3;
  stroke-dasharray: 8 4;
}
.cp-edge-tag,
.cp-badge,
.cp-title,
.cp-body {
  font-family: system-ui, sans-serif;
}
.cp-edge-tag {
  font-size: 12px;
  fill: #334155;
}
.cp-badge {
  font-size: 16px;
  font-weight: 700;
}
.cp-card-add .cp-badge {
  fill: #166534;
}
.cp-card-del .cp-badge {
  fill: #dc2626;
}
.cp-card-edit .cp-badge {
  fill: #d97706;
}
.cp-title {
  font-size: 17px;
  font-weight: 700;
  fill: #0f172a;
}
.cp-body {
  font-size: 14px;
  fill: #334155;
}
.cp-text-diff {
  margin-block: 4px;
  border-top: 1px solid #cbd5e1;
  font-size: 12px;
  line-height: 1.4;
}
.cp-text-diff > summary {
  display: list-item;
  min-height: 36px;
  padding-block: 9px;
  cursor: pointer;
  font-weight: 600;
}
.cp-text-change {
  padding-block: 8px;
  border-top: 1px solid #e2e8f0;
}
.cp-text-change h4, .cp-text-change h5, .cp-text-title {
  margin: 0 0 4px;
  font-size: inherit;
  font-weight: 600;
}
.cp-text-columns {
  display: grid;
  gap: 8px;
}
.cp-text-side {
  min-width: 0;
  padding: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}
.cp-text-body, .cp-text-absent {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cp-text-absent {
  color: #475569;
}
@media (min-width: 40rem) {
  .cp-text-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Compact panel when mounted in the visible conversation/call bar. Keeps
   margin/padding <= 8px so Preview/Apply/Discard fit one row at 360px. */
#cc-bar-captions-host .cp-panel {
  margin: 0;
  padding: 8px;
  max-width: none;
}
#cc-bar-captions-host .cp-controls {
  padding: 8px 0 4px;
}
/* Final mobile fit inside the conversation bar: the outer bar owns scrolling,
   so this panel must not create nested clips. Compact 6px padding. */
#cc-bar-captions-host .cp-panel {
  max-block-size: none;
  overflow: visible;
  padding: 6px;
}
/* Ready state (single proposal visible): hide redundant idle top-level
   Suggest/Cancel buttons and the idle notice to save vertical space.
   Discard/Apply return the panel to idle, so these reappear automatically. */
#cc-bar-captions-host:has(.cp-controls:not([hidden])) .cp-panel > .cp-btn {
  display: none !important;
}
#cc-bar-captions-host:has(.cp-controls:not([hidden])) .cp-notice {
  display: none !important;
}
/* Ready .cp-status is redundant visually (legend + summary describe the
   proposal) but must stay announced: visually hide only. */
#cc-bar-captions-host:has(.cp-controls:not([hidden])) .cp-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
/* Keep summary visible and compact; outer callbar scrolls extreme text. */
#cc-bar-captions-host .cp-summary {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin: 4px 0;
}
#cc-bar-captions-host .cp-legend {
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0;
}
#cc-bar-captions-host .cp-preview {
  font-size: 12px;
  line-height: 1.35;
}
/* Real SVG viewBox contained, never cropped: fixed height, full width. */
#cc-bar-captions-host .cp-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: min(23dvh, 180px);
  max-height: min(23dvh, 180px);
}
/* Ready controls: sticky opaque row, equal buttons, 44px targets. */
#cc-bar-captions-host .cp-controls {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #f8fafc;
  padding: 4px;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}
#cc-bar-captions-host .cp-controls .cp-btn {
  flex: 1 1 0;
  min-width: 70px;
  min-height: 44px;
}
/* Ready proposal collapses (not hides) live captions to keep canvas < ~55dvh. */
#cc-bar-captions-host:has(.cp-controls:not([hidden])) .cc-captions,
#cc-bar-captions-host:has(.cp-controls:not([hidden])) #cc-captions {
  max-block-size: 3rem;
  overflow-y: auto;
}
@media (min-width: 40rem) {
  .cp-panel {
    padding: 1rem;
    font-size: 1rem;
  }
  #cc-bar-captions-host .cp-panel {
    padding: 8px;
  }
  .cp-btn {
    flex: 0 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cp-btn,
  .cp-svg {
    transition: none;
  }
}