/* R14.8.1 — 2-port view carousel canvas.
 * Two stacked ports (top + bottom) inside .panel-chat, each with its own
 * cycle arrows. Merged state when top.view === bottom.view: top expands,
 * bottom becomes a thin header bar (arrows still clickable).
 */

.view-canvas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 8px 0;
  /* Let children absorb free space; each port flexes independently. */
}

/* R14.10.A — fixed-position on mobile so the canvas ALWAYS renders in the
   exact space between the topbar and the control-panel stack.
   R14.12.D — edge-to-edge: no padding, no gap. Ports separated by a fat
   black divider via border-bottom on the top port. */
@media (max-width: 820px) {
  .view-canvas {
    position: fixed !important;
    /* R14.12.H — topbar is now border-box so its declared height (32px)
       INCLUDES the 4px border. View-canvas top = banner + topbar exactly. */
    top: calc(var(--m-brand-h, 14px) + var(--mtopbar-h, 32px) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 100 !important;
    /* R14.14 — single chat carousel on mobile. Bottom port hidden +
       global arrows hidden. Top port fills the canvas. No scroll-snap. */
    display: block !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    touch-action: pan-y;
    background: #fff;
  }
  .view-canvas > * { direction: ltr; }
  .view-canvas .vc-port-top {
    height: 100% !important;
    flex: none !important;
    box-sizing: border-box;
    position: relative;
    border-bottom: 0 !important;
  }
  .view-canvas .vc-port-bottom { display: none !important; }
  .vc-global-arrow { display: none !important; }
  .vc-scroll-cue { display: none !important; }
}

/* Ports share remaining height equally by default.
   R14.12.D — edge-to-edge: no border, no shadow. Top port has a fat
   black divider on its bottom edge to separate it from the bottom port. */
.vc-port {
  flex: 1 1 0;
  min-height: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  overflow: hidden;
  box-shadow: none;
  transition: flex-basis 220ms ease;
  position: relative;
}
.vc-port-top { border-bottom: 4px solid #000; }

/* Merged state: top port expands, bottom becomes a thin strip. */
.view-canvas.vc-merged .vc-port-top { flex: 1 1 auto; }
.view-canvas.vc-merged .vc-port-bottom {
  flex: 0 0 42px;
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.view-canvas.vc-merged .vc-port-bottom .vc-body-inner { display: none; }

/* Header no longer exists — label floats over body, arrows are side columns. */
.vc-header { display: none; }
/* R14.12.D — narrow full-black side arrows. 25% slimmer (36→24px wide).
   Hollow white chevron, opaque black background.
   R14.13.C — explicit pointer-events:auto + touch-action:manipulation +
   higher z-index so taps land even with the new scroll-snap container. */
.vc-arrow {
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  background: #000;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  transition: background 120ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 50;
  pointer-events: auto;
  touch-action: manipulation;
}
.vc-arrow svg { display: block; }
.vc-arrow svg polyline { stroke-width: 2.6; }
.vc-arrow-prev { left: 0; }
.vc-arrow-next { right: 0; }
.vc-arrow:hover  { background: #1f2937; }
.vc-arrow:active { background: #374151; }
.vc-arrow:focus-visible { outline: 2px solid #f97316; outline-offset: -2px; }

.vc-label {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: #4b5563;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.94);
  padding: 3px 10px;
  border-radius: 9999px;
  border: 1px solid #ede9fe;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.view-canvas.vc-merged .vc-port-bottom .vc-label {
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.74rem;
}

/* R14.10.G — body now fills the entire port (arrows float over it). */
.vc-body {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.vc-body-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  position: relative;
  /* R14.12.G — was 32px top to clear the floating label; label is hidden
     on mobile now, so kill the gap. Side padding still clears the arrows. */
  padding: 0 28px;
}

/* R14.10.H — when a view lives inside a port, it must be visible regardless
 * of legacy toggle state (multi-panel-canvas's .mpc-panel-hidden) or a default
 * [hidden] attribute (#hintCard ships hidden). Carousel OWNS visibility now. */
.vc-body-inner > .mpc-panel-hidden,
.vc-body-inner > [hidden] {
  display: block !important;
}
.vc-body-inner > #chatMessages.mpc-panel-hidden {
  display: flex !important;
}

/* Views that land inside a port need to fill it. Override their default
 * dimensions/positioning so they don't fight the carousel. Keep specificity
 * low so individual panels can still win where needed. */
.vc-body-inner >#chatMessages {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  /* R14.12.J — was 10px 12px; trimmed top to 2px so the first message
     doesn't sit so far inside the port (was reading as a "top gap"). */
  padding: 2px 12px !important;
  /* R14.13.I — chat messages must scroll INSIDE the port without being
     swallowed by the canvas scroll-snap. overflow-y:auto + overscroll
     contain keep the gesture local; touch-action pan-y allows vertical. */
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
}
.vc-body-inner >.panel-preview {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.vc-body-inner >.panel-preview .preview-iframe {
  flex: 1 1 auto;
  border: 0;
  background: #fff;
}
.vc-body-inner >.suggestion-carousel {
  position: static !important;
  /* R14.12.C — was overflowing the port; clamp to port height + scroll. */
  max-height: 100% !important;
  width: 100%;
  padding: 8px 10px !important;
  border-bottom: 0 !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}
.vc-body-inner >#hintCard {
  position: static !important;
  margin: 10px 12px !important;
  width: calc(100% - 24px) !important;
}

/* R14.10.I — grace-period mirror: a non-interactive snapshot the user sees
   in the opposite port during the 2s before merge fires. */
.vc-mirror {
  position: relative;
  opacity: 0.78;
  pointer-events: none;
  filter: saturate(0.9);
}
.vc-mirror-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #5b21b6;
  line-height: 1.4;
}
.vc-mirror-card small {
  font-size: 0.72rem;
  font-weight: 500;
  color: #6b7280;
  margin-top: 4px;
}
.vc-mirror-clone { pointer-events: none; }

/* R14.13 — scroll cues. Hidden by default; .is-on shows the chevrons. */
.vc-scroll-cue {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1305;
  display: flex;
  align-items: center;
  gap: 30px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  color: #000;
}
.vc-scroll-cue.is-on { opacity: 0.85; }
.vc-scroll-cue svg { display: block; }
.vc-scroll-cue-down {
  bottom: calc(var(--wc-grid-h, 104px) + var(--wc-composer-h, 110px) + 6px);
}
.vc-scroll-cue-up {
  top: calc(var(--m-brand-h, 14px) + var(--mtopbar-h, 32px) + env(safe-area-inset-top, 0px) - 6px);
}
@media (min-width: 821px) {
  .vc-scroll-cue { display: none; }
}

/* R14.13.F — global fixed-position view arrows (mobile only). Live outside
   the scroll-snap container so scroll gestures can't eat taps on them. */
.vc-global-arrow {
  position: fixed;
  z-index: 120;
  width: 24px;
  background: #000;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background 120ms ease;
}
.vc-global-arrow svg { display: block; }
.vc-global-arrow-prev { left: 0; }
.vc-global-arrow-next { right: 0; }
.vc-global-arrow:hover  { background: #1f2937; }
.vc-global-arrow:active { background: #374151; }
.vc-global-arrow:focus-visible { outline: 2px solid #f97316; outline-offset: -2px; }
@media (min-width: 821px) { .vc-global-arrow { display: none; } }
@media (max-width: 820px) {
  /* Hide the per-port arrows; the global fixed ones take over. */
  .view-canvas .vc-arrow { display: none !important; }
  /* Recover the side padding from .vc-body-inner since arrows no longer
     live inside the port (they're fixed overlays outside). */
  .view-canvas .vc-body-inner { padding: 0 26px !important; }
}

@media (max-width: 820px) {
  .view-canvas { padding: 4px 6px 0; }
  /* R14.10.F — do NOT shrink arrows on mobile; they must cover full side. */
  /* R14.12.G — hide the floating port labels on mobile. They were forcing
     32px of top padding inside each port, creating a "gap" between the
     topbar and the first carousel content. Arrows + view content type
     are obvious enough without them. */
  .vc-label { display: none !important; }
}