/* ═══ The prototype layout switch ═════════════════════════════════════════
   A gear in the bottom-right corner that opens a small menu above itself.
   Bordered rather than lifted — this design system does not use shadows.
   ────────────────────────────────────────────────────────────────────────── */
.jc-fl{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.jc-fl-btn{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text-secondary);cursor:pointer;
  transition:color .12s ease,border-color .12s ease,background-color .12s ease;
}
.jc-fl-btn svg{width:17px;height:17px;display:block}
.jc-fl-btn:hover{background:var(--surface-alt);color:var(--text-primary)}
.jc-fl.is-open .jc-fl-btn{color:var(--brand-blue);border-color:var(--brand-blue)}

/* Above the button, because the button is already at the bottom of the
   viewport and a menu below it would have nowhere to go. */
/* [hidden] is display:none in the UA sheet, which any author `display` beats
   — and this rule sets flex. Without saying it again the menu never closes. */
.jc-fl-menu[hidden]{display:none}
.jc-fl-menu{
  min-width:172px;padding:8px;
  border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);
  display:flex;flex-direction:column;gap:2px;
}
.jc-fl-t{
  padding:4px 8px 8px;
  font:600 11px/1 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-tertiary);
}
.jc-fl-o{
  padding:8px;border:0;border-radius:6px;background:none;cursor:pointer;
  font:500 13px/1.2 'Inter',sans-serif;color:var(--text-secondary);text-align:left;
}
.jc-fl-o:hover{background:var(--surface-panel);color:var(--text-primary)}
.jc-fl-o.on{background:var(--brand-blue);color:#FFFFFF}

/* ── The call workspace's instance ──────────────────────────────────────────
   Same widget, different corner: the bottom right of the work area rather
   than of the window, and clear of the call dock instead of under it.

   Both offsets are read from what call-experience.js has already measured for
   the dock, so this box never has to measure .main a second time and cannot
   disagree with the dock about where the work area ends:

     --cx-work-right  window right edge -> work area right edge
     --cx-dock        the dock's own height plus the 10px it floats on, which
                      is exactly where its top edge is

   20px in from the work area's edge matches .cx-full's own gutter; 12px above
   the dock is the same air the participants panel leaves over it. The
   fallbacks are the window's corner, which is where the flow switch sits, so
   a missing measurement degrades to the layout that already exists rather
   than to a box in the middle of the page. */
.jc-fl.jc-fl-work{
  right:calc(var(--cx-work-right, 4px) + 20px);
  bottom:calc(var(--cx-dock, 4px) + 12px);
  z-index:1401;
}

/* ── The Conversations page's instance ──────────────────────────────────────
   Same widget, different corner: the bottom right of the conversation list
   column rather than of the window, so a control for the list and the info
   panel sits on the column it is talking about.

   app/convo-layout.js measures the column and publishes both offsets, because
   nothing on this page had already measured it:

     --cv-list-right   window right edge -> column right edge
     --cv-list-bottom  window bottom edge -> column bottom edge

   16px in from both edges — the gutter the list header already uses. The menu
   opens upward and is right-aligned to the gear (.jc-fl is align-items:
   flex-end), so it grows into the column rather than over the thread beside
   it. The fallbacks are the window's corner, which is where the create flows'
   switch sits, so a missing measurement degrades to the layout that already
   exists. */
.jc-fl.jc-fl-convo{
  right:calc(var(--cv-list-right, 4px) + 16px);
  bottom:calc(var(--cv-list-bottom, 4px) + 16px);
}

@media (prefers-reduced-motion:reduce){.jc-fl-btn{transition:none}}

/* theme-customiser.css paints every span's colour by inheritance. */
body.theme-dark .jc-fl-t{color:var(--text-tertiary)}