/*
 * ============================================================
 * FuzzyCode Editor Shell  |  fc-editor-shell.css
 * ============================================================
 * Layout and structure for the FuzzyCode V2 editor page.
 * Uses --fc-* tokens from fc-design-system-base.css exclusively.
 * Zero bare hex values — every color, font, shadow, and radius
 * is tokenized.
 *
 * Layering (outside → inside):
 *   Layer 1: Blue body + SVG wave (.fc-v2)
 *   Layer 2: Cream card container (.fc-v2-container)
 *   Layer 3: Orange textured workshop (.fc-v2-workshop)
 *   Layer 4: Glass overlay tab area (.fc-v2-tab-area)
 *   Layer 5: White surface cards (inside tab content)
 * ============================================================
 */


/* ── Layer 1: Body ─────────────────────────────────────────
 *    Blue background with subtle SVG wave at bottom
 */

.fc-v2 {
  margin: 0;
  /* No top padding — .fc-v2-container provides the 2% top margin to
     exactly match the legacy layout's spacing. Body padding + container
     margin used to double-add in compact mode (3% instead of 1%). */
  padding: 0;
  /* Match original: page is taller than viewport so scrolling reveals full iframe */
  height: calc(100vh + 325px);
  width: 100vw;
  position: relative;
  overflow-x: hidden;
  /* Establish a block formatting context so .fc-v2-container's 2% top
     margin doesn't collapse through the body. Without this the whole
     page (including the top-0 absolute notification bell) was pushed
     down ~26px, leaving a visible gap above the avatar in non-compact
     mode. Compact mode already has overflow:hidden which creates a BFC
     and doesn't show the bug, but we want the same behavior in both. */
  display: flow-root;
  background-color: var(--fc-blue);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M 0%2c18 C 57.6%2c58.8 172.8%2c199.4 288%2c222 C 403.2%2c244.6 460.8%2c126 576%2c131 C 691.2%2c136 748.8%2c263.4 864%2c247 C 979.2%2c230.6 1036.8%2c57.4 1152%2c49 C 1267.2%2c40.6 1382.4%2c173.8 1440%2c205L1440 560L0 560z' fill='%23184a7e'%3e%3c/path%3e%3cpath d='M 0%2c440 C 96%2c424.8 288%2c359.6 480%2c364 C 672%2c368.4 768%2c461.4 960%2c462 C 1152%2c462.6 1344%2c386 1440%2c367L1440 560L0 560z' fill='%232264ab'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}


/* ── Layer 2: Main Container ───────────────────────────────
 *    Cream card with brand border and shadow
 */

.fc-v2-container {
  display: flex;
  flex-direction: column;
  /* Symmetric 2% margin all sides matches legacy .container. Compact mode
     overrides to margin: 1% 2% so total top space stays 1% not 3%. */
  height: 96%;
  width: 95%;
  margin: 2% 2% 2% 2%;
  background-color: var(--fc-cream);
  border: 2px solid var(--fc-black);
  border-radius: var(--fc-radius-brand);
  padding: var(--fc-space-4);
  box-shadow: var(--fc-shadow-brand);
  overflow: hidden;
}


/* ── Layer 3: Workshop (Tab Container) ─────────────────────
 *    Orange textured area for the creative workspace
 */

.fc-v2-workshop {
  /* Match original: 25% base but grow to fit content.
     The original uses min-height: max(25%, var(--min-tab-content))
     which allows the workshop to push taller when content needs it. */
  flex: 0 0 auto;
  min-height: 25%;
  max-height: 55%;
  /* background-color: var(--fc-tan); */
  background-image: var(--fc-texture-dots);
  border: 2px solid var(--fc-black);
  border-radius: var(--fc-radius-brand) var(--fc-radius-brand) 0 0;
  padding: var(--fc-space-3) var(--fc-space-5);
  display: flex;
  flex-direction: column;
  overflow: visible;
  background-color: var(--fc-orange-workshop);
  background-image: var(--fc-texture-orange-soda);
  background-size: 220px 220px;
  background-repeat: repeat;
}


/* ── Tab Bar ───────────────────────────────────────────── */

.fc-v2-tabs {
  /* Matches the design system `.fc-tabs` pattern: a gray-200 strip
     containing the brown tab pills, with gap: 1px producing thin
     vertical dividers between adjacent tabs, and sm border-radius
     on the top corners so the strip reads as a single capsule.
     overflow: hidden clips the tab pills into the rounded shape. */
  display: flex;
  gap: 5px;
  /* background-color: var(--fc-gray-200); */
  border-radius: var(--fc-radius-sm) var(--fc-radius-sm) 0 0;
  overflow: hidden;
  width: fit-content;
  flex-shrink: 0;
  margin-bottom: 0;
  margin-left: 10px;
}


/* ── Layer 4: Tab Content Area ─────────────────────────────
 *    Glass overlay surface inside the workshop
 */

.fc-v2-tab-area {
  flex: 1;
  flex: 1;
  /* Glass surface: translucent white lets orange textured workshop
     show through, creating clear visual layering (matches original).
     No border — legacy `.tab-content` has none, and the workshop's
     own 3px black border is the only "frame" this area needs. A 1px
     inner border was visually redundant and made the surface feel
     boxed-in.
     Only the top-LEFT is square — the tab group sits there flush.
     Top-right, bottom-right, bottom-left all get --fc-radius-sm to
     match legacy `.tab-content` which uses border-radius: 5px +
     border-top-left-radius: 0. */
     background: var(--fc-sand);
  border-radius: 0 0 var(--fc-radius-sm) var(--fc-radius-sm);
  overflow-y: auto;
  overflow-x: hidden;
  /* Ensure tab-content can fill this area */
  display: flex;
  flex-direction: column;
  border: 1px var(--fc-navy) solid;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  /* margin-left: -10px; */
  border-top-left-radius: 12px;
  /* border-bottom: inset; */
  background-image: var(--fc-texture-dots);
}


/* ── Layer 5: Content Inside Tabs ──────────────────────────
 *    White surface cards for form elements
 */

.fc-v2 .directions-container {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  width: 100%;
  height: 100%;
}

/* Ensure web component stretches to full width */
.fc-v2 sample-dropdown {
  display: block;
  width: 100%;
}

.fc-v2 .text-and-clear {
  display: flex;
  gap: var(--fc-space-1);
  flex: 1;
  width: 100%;
  min-height: 100px;
}

.fc-v2 textarea {
  display: block;
  width: 100%;
  flex: 1;
  padding: var(--fc-space-2) var(--fc-space-3);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-base);
  color: var(--fc-gray-800);
  background-color: var(--fc-white);
  border: 1.5px solid var(--fc-gray-300);
  border-radius: var(--fc-radius-sm);
  transition: border-color var(--fc-ease-fast), box-shadow var(--fc-ease-fast);
  outline: none;
  resize: none;
}

.fc-v2 textarea:focus {
  border-color: var(--fc-orange);
  box-shadow: 0 0 0 3px var(--fc-orange-a15);
}

.fc-v2 textarea::placeholder {
  color: var(--fc-gray-400);
}

.fc-v2 .clear-text-btn {
  padding: var(--fc-space-1);
  background: var(--fc-navy);
  color: var(--fc-white);
  border: none;
  border-radius: var(--fc-radius-sm);
  cursor: pointer;
  font-family: var(--fc-font-brand);
  font-size: var(--fc-text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-1);
  transition: all var(--fc-ease-fast);
  white-space: nowrap;
  align-self: stretch;
  min-height: var(--fc-space-12);
  min-width: var(--fc-space-12);
  flex-direction: column;
  box-shadow: var(--fc-shadow-btn);
  text-transform: uppercase;
}

.fc-v2 .clear-text-btn:hover {
  background: var(--fc-navy-hover);
  transform: scale(1.001);
  box-shadow: var(--fc-shadow-btn-hover);
}


/* ── Send Button (Create tab) ──────────────────────────── */

.fc-v2 #sendButton {
  padding: var(--fc-space-1) var(--fc-space-3);
  font-family: var(--fc-font-brand);
  font-size: var(--fc-text-sm);
  background-color: var(--fc-yellow);
  color: var(--fc-black);
  border: none;
  border-radius: var(--fc-radius-sm);
  cursor: pointer;
  box-shadow: var(--fc-shadow-btn-send);
  letter-spacing: 1px;
  transition: all var(--fc-ease-base);
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-1);
  align-self: flex-start;
  text-transform: uppercase;
  border: 1px solid var(--fc-navy);
}

.fc-v2 #sendButton:hover {
  background-color: var(--fc-navy);
  color: var(--fc-yellow);
  border-color: var(--fc-navy);
  transform: translateY(-2px);
  box-shadow: var(--fc-shadow-btn-send-hover);
}

.fc-v2 #sendButton.button-loading,
.fc-v2 #sendButton.button-loading:hover {
  background-color: var(--fc-yellow);
  color: var(--fc-black);
  border-color: var(--fc-navy);
  box-shadow: var(--fc-shadow-btn-send);
  transform: none;
}


/* ── Update Tab Layout ─────────────────────────────────── */

.fc-v2 .main-buttons-group {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.fc-v2 .update-default-ui {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--fc-space-1);
}

.fc-v2 .button-group {
  display: flex;
  gap: var(--fc-space-2);
  /* align-items defaults to stretch in flex, so neighboring regular
     <button>s grow to match the <swipe-button> host's natural height.
     Legacy relies on the same default — setting align-items:center
     here broke height parity between Make Change (shadow DOM) and
     Edit Code (regular button). */
  align-items: stretch;
  flex-wrap: wrap;
}


/* ── General Buttons (Update tab, SaveLoadShare) ─────────
 *    Sized to match the swipe-button shadow-DOM's 13px / 5px-padding
 *    pill so Make Change and Edit Code have identical height, and so
 *    Edit Code looks proportional to the yellow Fuzzy Code It button
 *    on the Create tab instead of visibly taller. line-height: 1.15
 *    overrides the .fc-base inherited 1.5 leading which was inflating
 *    these buttons to ~32px. */
.fc-v2 .button-group button,
.fc-v2 #editorButton,
.fc-v2 #askButton {
  /* 13px font + 5px padding matches swipe-button shadow-DOM pill exactly.
     --fc-text-xs (12px) would be slightly shorter; 13px literal is the
     right between-token value for this specific parity.
     margin-top: 2px mirrors the swipe-button shadow-DOM pill's margin,
     which itself mirrors legacy's `button { margin-top: 2px }`. Without
     this, native neighbor buttons sat flush to the row top while the
     swipe-button pill sat 2px lower, so their top edges drifted apart.
     If a future refactor drops the 2px from swipe-button, drop it here
     too — the rule is "all controls in a row share one margin-top." */
  padding: 5px var(--fc-space-2);
  margin-top: 2px;
  font-family: var(--fc-font-brand);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  background-color: var(--fc-navy);
  color: var(--fc-white);
  border: none;
  border-radius: var(--fc-radius-sm);
  cursor: pointer;
  transition: all var(--fc-ease-base);
  /* Default inline-block (no flex) so the icon and text share a
     natural baseline. inline-flex + align-items: center geometrically
     centers each item independently, but Grandstander's asymmetric
     ascender/descender metrics shift text glyphs ~2px above the line
     box center at this line-height — so the text looked higher than
     the icon. Plain inline flow aligns them by baseline, which is
     exactly what "icon followed by label" should do. Matches the
     <swipe-button> shadow DOM's layout recipe. */
  box-shadow: var(--fc-shadow-btn);
}

/* Icon spacing without flex gap — mirrors the swipe-button shadow's
   `.swipe-button i { margin-right: 5px }` so the two recipes stay
   identical. */
.fc-v2 .button-group button i,
.fc-v2 #editorButton i,
.fc-v2 #askButton i {
  margin-right: 5px;
}

.fc-v2 .button-group button:hover,
.fc-v2 #editorButton:hover,
.fc-v2 #askButton:hover {
  background-color: var(--fc-navy-hover);
  transform: translateY(-1px);
  box-shadow: var(--fc-shadow-btn-hover);
}


/* ── SaveLoadShare Tab ─────────────────────────────────── */

.fc-v2 .project-container {
  display: flex;
  gap: var(--fc-space-2);
  flex-wrap: wrap;
  height: 100%;
}

.fc-v2 .screenshot-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.fc-v2 #screenshotImage {
  max-width: 30vw;
  max-height: 200px;
  min-width: 300px;
  border: 1px solid var(--fc-gray-300);
  border-radius: var(--fc-radius-md);
}

.fc-v2 .publish-section {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
  background: var(--fc-warning-light);
  padding: var(--fc-space-4);
  border-radius: var(--fc-radius-md);
  margin: var(--fc-space-2) 0;
  box-shadow: var(--fc-shadow-sm);
}

/* Save/Load/Share project-title-row: input + refresh button.
   align-items: stretch + shared --fc-control-h on every child is
   what keeps the top and bottom edges of neighbors aligned. Without
   this, the input sizes to its 16px font + 8px padding while the
   refresh button sizes to its 12px font + 4px padding, so their top
   and bottom edges drifted by ~8px. Set min-height on children so
   all stretch to the same band height. */
.fc-v2 .project-title-row {
  display: flex;
  gap: var(--fc-space-2);
  align-items: stretch;
}

.fc-v2 .project-title-row > * {
  min-height: var(--fc-control-h);
}

.fc-v2 .project-title-row input {
  flex: 1;
  padding: var(--fc-space-2) var(--fc-space-3);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-base);
  border: 1.5px solid var(--fc-gray-300);
  border-radius: var(--fc-radius-sm);
  outline: none;
  transition: border-color var(--fc-ease-fast);
}

.fc-v2 .project-title-row input:focus {
  border-color: var(--fc-orange);
}

.fc-v2 .publish-controls {
  display: flex;
  align-items: center;
  gap: var(--fc-space-4);
}

.fc-v2 .visibility-toggle {
  display: flex;
  align-items: center;
  gap: var(--fc-space-2);
}

.fc-v2 .load-section {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
}

.fc-v2 .load-section select {
  width: 100%;
  padding: var(--fc-space-2) var(--fc-space-3);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-base);
  border: 1.5px solid var(--fc-gray-300);
  border-radius: var(--fc-radius-sm);
  background: var(--fc-white);
  outline: none;
}

/* Explicit V2 action button API. Keep the old container selectors below
   as compatibility aliases until the Save/Load/Share markup no longer
   relies on legacy DOM position for styling. */
.fc-v2 .fc-v2-action-btn,
.fc-v2 .load-section button,
.fc-v2 #save-related-buttons button,
.fc-v2 #takeScreenshotBtn {
  padding: var(--fc-space-1) var(--fc-space-2);
  font-family: var(--fc-font-brand);
  font-size: var(--fc-text-xs);
  font-weight: 400;
  background-color: var(--fc-navy);
  color: var(--fc-white);
  border: none;
  border-radius: var(--fc-radius-sm);
  cursor: pointer;
  transition: all var(--fc-ease-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-1);
  box-shadow: var(--fc-shadow-btn);
}

.fc-v2 .fc-v2-action-btn:hover,
.fc-v2 .load-section button:hover,
.fc-v2 #save-related-buttons button:hover,
.fc-v2 #takeScreenshotBtn:hover {
  background-color: var(--fc-navy-hover);
  transform: translateY(-1px);
  box-shadow: var(--fc-shadow-btn-hover);
}

.fc-v2 .fc-v2-action-btn.fc-v2-action-btn-inline,
.fc-v2 #save-related-buttons button.fc-v2-action-btn-inline,
.fc-v2 .load-section button.fc-v2-action-btn-inline,
.fc-v2 #takeScreenshotBtn.fc-v2-action-btn-inline {
  width: auto;
}

.fc-v2 .fc-v2-action-btn.fc-v2-action-btn-block,
.fc-v2 .load-section button,
.fc-v2 #save-related-buttons button,
.fc-v2 #takeScreenshotBtn {
  width: 100%;
}

.fc-v2 .fc-v2-action-btn-publish,
.fc-v2 #publishToPagesButton {
  min-height: var(--fc-control-h);
}

.fc-v2 .fc-v2-action-btn-screenshot {
  position: absolute;
  right: var(--fc-space-0-5);
  bottom: var(--fc-space-0-5);
  box-shadow: 0px 0px 0px 3px var(--fc-white-a50);
  z-index: 1;
}

.fc-v2 .fc-v2-action-btn-muted {
  opacity: 0.7;
}

.fc-v2 .fc-v2-action-btn-muted:hover {
  opacity: 1;
}

/* Screenshot container — relative for absolute-positioned Take Screenshot btn */
.fc-v2 #screenshotContainer {
  width: fit-content;
  margin: 0 auto;
  position: relative;
  flex-shrink: 1;
}

/* Save-related buttons column beside screenshot */
.fc-v2 #save-related-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  justify-content: flex-end;
}

/* Load section — fixed width to avoid taking too much space (matches original) */
.fc-v2 .outlined-group.load-section {
  width: 200px;
}

/* Project name input sizing */
.fc-v2 #projectName {
  max-height: 75px;
  height: 50%;
  width: 150px;
}


/* ── Preview Area (Iframe) ─────────────────────────────── */

.fc-v2 .iframe-container {
  flex: 1;
  width: 100%;
  border: 1px solid var(--fc-gray-300);
  background-color: var(--fc-gray-50);
  display: flex;
  flex-direction: column;
  /* overflow: visible so the version dropdown can extend beyond container.
     The iframe itself is a browsing context that clips its own content. */
  overflow: visible;
  min-height: 0;
}

/* Dotted border on the iframe itself, NOT the container —
   visually separates the preview from the toolbar above */
.fc-v2 .iframe-container iframe {
  flex: 1;
  width: 100%;
  border: 3px dotted var(--fc-gray-900);
  min-height: 0;
}


/* ── Toolbar (Version Control) ─────────────────────────── */

.fc-v2 .version-control {
  min-height: var(--fc-space-10);
  display: flex;
  padding: var(--fc-space-1) var(--fc-space-2);
  background-color: var(--fc-cream);
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: var(--fc-space-2);
  flex-shrink: 0;
}

/* Tools island gets auto margin-right to push version island rightward
   (matches original layout: [user-status] [tools] ---gap--- [version]) */
.fc-v2 .tools-island {
  margin-right: auto;
}

/* Push version island to the right (matching original toolbar layout) */
.fc-v2 .version-island {
  margin-left: auto;
}


/* ── Toolbar Islands ───────────────────────────────────── */

.fc-v2 .toolbar-island {
  display: flex;
  align-items: center;
  background: var(--fc-black-a06);
  border-radius: var(--fc-space-3-5);
  padding: 3px var(--fc-space-1);
  gap: var(--fc-space-0-5);
}

.fc-v2 .toolbar-island button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;  /* component-intrinsic: touch target */
  min-height: 28px; /* component-intrinsic: touch target */
  padding: var(--fc-space-1) 7px; /* 7px horizontal: component-intrinsic for icon centering */
  background: var(--fc-toolbar-btn-bg);
  border: 1px solid var(--fc-toolbar-btn-border);
  border-radius: var(--fc-radius-md);
  color: var(--fc-gray-700);
  cursor: pointer;
  font-size: var(--fc-text-xs);
  font-weight: 400;
  transition: all var(--fc-ease-fast);
  box-shadow: var(--fc-toolbar-btn-shadow);
  white-space: nowrap;
  margin: 0;
}

.fc-v2 .toolbar-island button:hover:not([disabled]) {
  background: var(--fc-toolbar-btn-hover-bg);
  border-color: var(--fc-toolbar-btn-hover-border);
  box-shadow: var(--fc-toolbar-btn-hover-shadow);
}

.fc-v2 .toolbar-island button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* User status island — wider padding than generic toolbar island */
.fc-v2 .user-status-island {
  padding: 3px var(--fc-space-2);
}

.fc-v2 .user-status-island .user-profile-icon {
  min-width: 26px;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-toolbar-btn-bg);
  border-radius: var(--fc-radius-full);
  color: var(--fc-gray-700);
  border: 1px solid var(--fc-toolbar-btn-border);
  box-shadow: var(--fc-toolbar-btn-shadow);
  cursor: pointer;
  transition: all var(--fc-ease-fast);
  font-size: var(--fc-text-xs);
}

.fc-v2 .user-status-island .user-profile-icon:hover {
  background: var(--fc-toolbar-btn-hover-bg);
  border-color: var(--fc-toolbar-btn-hover-border);
}

/* Fullscreen button text label */
.fc-v2 #fullscreenBtn span {
  font-family: var(--fc-font-brand);
  font-size: var(--fc-text-xs);
  font-weight: 400;
  margin-left: var(--fc-space-1);
}

/* Advanced toolbar buttons hidden by default.
   Must match specificity of .fc-v2 .toolbar-island button (0-2-1)
   which sets display:flex. We use button.class to win. */
.fc-v2 .toolbar-island button.advanced-toolbar-btn {
  display: none;
}

/* Show when advanced toolbar is active.
   script_aux.js applyToolbarMode() adds .advanced-toolbar-mode to <html>.
   Since .fc-v2 is on <body>, the selector is html.class > body.fc-v2. */
.advanced-toolbar-mode .fc-v2 .toolbar-island button.advanced-toolbar-btn {
  display: flex;
}


/* ── Notifications (top-right corner) ─────────────────────
 *    <fuzzycode-notifications> is outside .fc-v2-container.
 *    Position fixed so it's flush with viewport top-right,
 *    and clip overflow to hide the component's shadow above it.
 */

.fc-v2 fuzzycode-notifications {
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--fc-z-sticky);
  /* Absolute so it scrolls with the page (bell disappears on scroll down).
     The component's inner navy circle has large box-shadows (#000) that
     bleed above and to the right. clip-path trims those edges flush while
     leaving the bottom-left arc and dropdown panel fully visible. */
  clip-path: inset(0 0 -200vh -200vw);
}


/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 768px) {
  .fc-v2 { padding-top: 1%; }
  .fc-v2-container {
    margin: 0 1% 1% 1%;
    width: 98%;
    height: 98%;
    border-radius: var(--fc-radius-xl);
    padding: var(--fc-space-2);
  }

  .fc-v2-workshop {
    min-height: 35%;
    max-height: 60%;
    padding: var(--fc-space-3);
    border-radius: var(--fc-radius-xl) var(--fc-radius-xl) 0 0;
  }

  .fc-v2 .version-control {
    gap: var(--fc-space-1);
    padding: var(--fc-space-1) var(--fc-space-1-5);
  }

  .fc-v2 .toolbar-island {
    gap: 1px; /* structural: minimum separator */
    padding: var(--fc-space-0-5) var(--fc-space-1);
  }

  .fc-v2 .tab-button {
    padding: var(--fc-space-2) var(--fc-space-3);
    font-size: var(--fc-text-sm);
  }
}

@media (max-width: 480px) {
  .fc-v2-container {
    margin: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .fc-v2-workshop {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .fc-v2 .tab-button {
    padding: var(--fc-space-1-5) var(--fc-space-2-5);
    font-size: var(--fc-text-xs);
  }

  .fc-v2 #sendButton {
    width: 100%;
    justify-content: center;
  }
}