/* R14.4 — Multi-panel canvas toggles.
 * Left-edge vertical strip with 3 buttons (💬 Chat / 👁️ Preview / ✍️ Write).
 * Each toggles visibility of its target panel. Drag-resize handles + flat-tab
 * collapsed states are R15.W.1 — still shipping the visibility baseline.
 */

/* R14.6.A — left strip matches the right-side vertical toggles:
 * Circular 40x40 buttons, icon-only (no text label), purple when active.
 * Desktop = centered vertically on the left edge. Mobile = same but
 * symmetric position to the right-edge strip. */
.mpc-toggle-strip {
  position: fixed;
  left: 8px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mpc-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 100ms ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 0;
}
.mpc-btn:active { transform: scale(0.94); }
.mpc-btn:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }
.mpc-btn.mpc-btn-on {
  background: linear-gradient(180deg, #c084fc, #a855f7);
  color: #fff;
  border-color: transparent;
}
.mpc-btn-ic { display: inline-flex; align-items: center; justify-content: center; }
.mpc-btn-ic svg { display: block; }
.mpc-btn-lbl { display: none; } /* icon-only now — matches right strip */

/* --- Panel visibility --- */
.mpc-panel-hidden { display: none !important; }

/* Desktop: center-Y vertically on the left edge. */
@media (min-width: 821px) {
  .mpc-toggle-strip { top: 50%; transform: translateY(-50%); }
}

/* Mobile: position above the grid — view-canvas (R14.8.1) owns view selection
   now, so this legacy strip is usually hidden by view-canvas on mount. Kept
   positioned sanely in case it resurfaces. */
@media (max-width: 820px) {
  .mpc-toggle-strip {
    left: 8px;
    bottom: calc(260px + env(safe-area-inset-bottom, 0px));
  }
}