/* Inline camera: expansion remains in the page, with chat and Live reachable. */
.in-app-camera { margin-top: 14px; padding: 12px; color: #eaf1f8; background: #141e2b; border: 1px solid #4d6878; border-radius: 16px; scroll-margin-top: calc(var(--unified-header-height,73px) + var(--unified-modebar-height,88px) + 10px); }
.camera-heading,.camera-heading-actions,.camera-actions,.camera-fallbacks,.camera-live-handoff { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.camera-heading { justify-content: space-between; margin-bottom: 10px; }
.camera-heading h2 { font-size: 16px; margin: 0; }
.in-app-camera button,.camera-live-handoff button { min-height: 44px; padding: 9px 12px; border-radius: 9px; border: 1px solid #52697e; background: #233448; color: #edf4fa; font: 600 12px var(--font-body); cursor: pointer; }
.camera-heading-actions { gap: 5px; }
.camera-heading-actions button { background: transparent; padding: 8px 10px; }
.camera-viewport { position: relative; display: grid; place-items: center; min-height: 140px; height: clamp(140px,27dvh,250px); overflow: hidden; border-radius: 10px; background: #080c11; }
.camera-viewport video,.camera-viewport img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; min-height: 0; }
/* Crop only the live viewfinder. Canvas capture and MediaRecorder retain the
   source dimensions; review media keeps contain so the full frame is visible. */
.camera-viewport #camera-preview { object-fit: cover; object-position: center; }
.camera-framing-note { position: absolute; bottom: 8px; left: 8px; max-width: calc(100% - 16px); padding: 3px 6px; border-radius: 4px; background: #080c11b3; color: #edf3f8; font-size: 10px; line-height: 1.4; pointer-events: none; }
.in-app-camera[data-state="review"] .camera-framing-note { display: none; }
.in-app-camera[data-expanded="true"] .camera-viewport { height: min(60dvh,600px); }
.camera-timer { position: absolute; top: 9px; left: 9px; color: #fff; padding: 5px 9px; border-radius: 7px; background: #9f182bea; font: 600 13px var(--font-mono); }
.camera-status { margin: 10px 0; color: #b9c9da; font-size: 12px; line-height: 1.45; }
.camera-actions { margin: 6px 0; }
.in-app-camera[data-expanded="true"] .camera-actions { position: sticky; bottom: calc(var(--unified-bottom-reserve,144px) - 16px); z-index: 195; padding: 8px; margin-left: -2px; margin-right: -2px; border: 1px solid #4d6878; border-radius: 12px; background: #141e2bf5; box-shadow: 0 4px 18px #0008; }
.in-app-camera .camera-primary { color: #231007; background: #ff8751; border-color: #ffad85; }
.in-app-camera .camera-stop { color: #fff; background: #8b2635; border-color: #d27481; }
.camera-fallbacks { padding-top: 6px; gap: 4px 12px; }
.camera-fallbacks button { color: #a9dfe5; padding: 7px 0; border: 0; background: transparent; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.camera-live-handoff { margin-top: 10px; padding: 10px 12px; background: #192b30; border: 1px solid #41696d; border-radius: 12px; justify-content: space-between; }
.camera-live-handoff p { flex: 1 1 240px; color: #bdd8dc; font-size: 12px; line-height: 1.4; margin: 0; }
.camera-live-handoff strong { color: #e5f5f5; }
.unified-interface[data-camera-open="true"] #mode-panel-video { display: none !important; }
.unified-interface[data-camera-open="true"] #mode-panel-live { position: static; padding: 10px 12px; margin-top: 10px; }
.unified-interface[data-camera-open="true"] #live-dock:not([hidden]) { display: flex !important; }
.unified-interface[data-camera-open="true"] #mode-panel-live > .unified-panel-heading,
.unified-interface[data-camera-open="true"] #mode-panel-live .live-help,
.unified-interface[data-camera-open="true"] #mode-panel-live .live-history { display: none; }
.unified-interface[data-camera-open="true"] #madness-live { display: grid; grid-template-columns: 76px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 0; margin: 0; background: transparent; border: 0; }
.unified-interface[data-camera-open="true"] #madness-live .live-skull { width: 76px; height: 76px; }
.unified-interface[data-camera-open="true"] #madness-live .live-heading { margin-bottom: 3px; }
.unified-interface[data-camera-open="true"] #madness-live .live-heading h2 { font-size: 14px; }
.unified-interface[data-camera-open="true"] #madness-live .live-status { font-size: 12px; line-height: 1.4; }
.unified-interface[data-camera-open="true"] #madness-live .live-controls { width: auto; min-width: 0; gap: 6px; margin: 0; padding: 0; border: 0; }
.unified-interface[data-camera-open="true"] #madness-live .live-controls button { min-height: 44px; font-size: 12px; padding: 9px 12px; }
@media(max-width:600px) {
  .in-app-camera { padding: 10px; }
  .camera-heading h2 { font-size: 14px; }
  .camera-heading-actions button { font-size: 11px; padding: 8px; }
  .camera-viewport { height: clamp(140px,25dvh,210px); }
  .camera-actions button { flex: 1 1 auto; }
  .camera-live-handoff button { width: 100%; }
  .unified-interface[data-camera-open="true"] #madness-live { grid-template-columns: 76px minmax(0,1fr); }
  .unified-interface[data-camera-open="true"] #madness-live .live-controls { grid-column: 1 / -1; }
}
@media(max-height:560px) {
  .camera-viewport { height: 140px; }
  .in-app-camera[data-expanded="true"] .camera-viewport { height: 55dvh; }
}