fusion/packages/dashboard/app/components/FloatingWindow.css

/*
FNXC:FloatingWindow 2026-06-22-20:45:
FloatingWindow is a non-blocking floating window (generalized from RightDockExpandModal). The overlay is a full-viewport, transparent, NON-dimming, NON-blurring, click-through layer: `pointer-events: none` lets every click pass through to the app and to other windows behind it. Only the panel re-enables `pointer-events: auto`. Multiple overlays/panels coexist with no mutual blocking — z-stacking is driven by inline `z-index` from the component's per-window counter.

FNXC:FloatingWindow 2026-06-27-00:00:
Click-through overlays cannot implement backdrop clicks in CSS/DOM structure. Outside-click dismissal is therefore a component-level opt-in document listener for transient windows such as Quick Chat; persistent task and terminal pop-outs keep the default non-dismissable page-click behavior.
*/
.floating-window-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

/*
FNXC:FloatingWindow 2026-07-18-14:05:
FN-8340 resolves #2114: Quick Chat minimize must retain its desktop window and ≤768px full-screen
sheet in the layout tree. `visibility: hidden` removes paint while preserving child geometry and
message-list scroll state; `pointer-events: none` keeps the already click-through overlay inert.
Never replace this with `display: none`, which collapses layout and makes reopening visibly reflow.
*/
/*
FNXC:ModalTouchGeometry 2026-07-26-19:46:
FN-8619's blocking modal migrations retain the visible scrim and blur that Agent Detail previously
owned locally. Modal windows block the application beneath them; utility FloatingWindows remain
transparent and click-through so concurrent tools continue to coexist.
*/
.floating-window-overlay--modal {
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  -webkit-backdrop-filter: blur(var(--space-xs));
  backdrop-filter: blur(var(--space-xs));
  pointer-events: auto;
}

.floating-window-overlay--hidden {
  visibility: hidden;
  pointer-events: none;
}

/*
FNXC:FloatingWindow 2026-06-22-20:45:
Floating panel positioned by state-driven inline `left/top/width/height` and stacked by inline `z-index`. min/max keep the panel usable and on-screen. `resize: none` because resizing is handled by the corner/edge handles. `pointer-events: auto` re-enables interaction on the panel only.
*/
.floating-window {
  --floating-window-shadow: var(--shadow-lg);
  position: fixed;
  display: flex;
  flex-direction: column;
  min-width: calc(var(--space-2xl) * 7.5);
  min-height: calc(var(--space-2xl) * 5.83);
  max-width: calc(100vw - (var(--space-lg) * 2));
  max-height: calc(100dvh - (var(--space-lg) * 2));
  overflow: hidden;
  background: var(--surface);
  border: thin solid var(--border);
  border-radius: var(--radius-lg);
  /*
  FNXC:FloatingWindow 2026-06-23-23:25:
  Floating modals need a gentle, theme-controlled drop shadow. Use a local token with the app's existing shadow fallback instead of the undefined --shadow-xl so themes can soften, strengthen, or remove modal elevation intentionally.
  */
  box-shadow: var(--floating-window-shadow, var(--shadow-lg));
  color: var(--text);
  resize: none;
  pointer-events: auto;
}

/*
FNXC:FloatingWindow 2026-06-22-20:45:
Header is the drag handle. `touch-action: none` (matching the resize handles) hands the whole gesture to the pointer handlers so touch dragging stays smooth and never scrolls the page behind it. A comfortable min-height makes a forgiving touch target. `user-select: none` protects the drag from selecting header text.
*/
.floating-window__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  border-bottom: thin solid var(--border);
  background: var(--surface-2, var(--surface));
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.floating-window__header:active {
  cursor: grabbing;
}

/*
FNXC:FloatingWindow 2026-06-22-12:20:
Headerless task pop-outs still need a visible drag affordance. The embedded task-detail modal header becomes the grab handle, matching the one-header "Open task" modal while preserving FloatingWindow's drag and resize behavior.
*/
.floating-window--headerless .floating-window__body {
  overflow: hidden;
}

.floating-window--headerless .task-detail-content--embedded {
  border-radius: inherit;
  overflow: hidden;
}

.floating-window--headerless .task-detail-content--embedded > .modal-header {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.floating-window--headerless .task-detail-content--embedded > .modal-header:active {
  cursor: grabbing;
}

.floating-window--chat.floating-window--headerless .floating-window__body {
  overflow: hidden;
}

.floating-window--chat .chat-view {
  border-radius: inherit;
  overflow: hidden;
}

/*
FNXC:ModalTouchGeometry 2026-07-26-12:19:
A bare `(pointer: coarse)` rule hid task-detail handles on every touch-primary device,
including tablets that must be movable and resizable. The JS tablet-touch discriminator
composes physical screen class, touch capability, and the 768px boundary, so phone sheets
and desktop hybrids retain their existing geometry while tablet touch gets active targets.
The shared scrollbar gutter stays in place: it keeps hosted scrollbars clear of east handles.
*/
.floating-window--touch-geometry {
  overflow: visible;
}

/*
FNXC:ModalTouchGeometry 2026-07-26-12:19:
The painted borders remain mouse-sized, but tablet fingers receive FN-8602's shared
44px effective target outside the panel. Edges begin beyond corner targets so they do
not cover close controls, hosted footer actions, or scrollable content.
*/
.floating-window--touch-geometry .floating-window__resize-handle {
  z-index: 3;
  touch-action: none;
}

/*
FNXC:ModalTouchGeometry 2026-07-26-12:34:
A headerless window delegates dragging to a caller-owned header, so that resolved element must
receive the same tablet-only target floor as FloatingWindow's built-in header. Generic windows
retain that established 44px layout contract.
*/
.floating-window--touch-geometry .floating-window__delegated-drag-handle {
  box-sizing: border-box;
  min-block-size: var(--modal-resize-touch-target);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

/*
FNXC:ModalTouchGeometry 2026-07-26-15:30:
Task-detail pop-outs are the only delegated-header surface with the reported tablet density
regression. Their 44px drag contract is hit-area-only: an absolute pseudo-element extends the
pointer target without making the painted task header taller. Keep the target below controls so a
close or action button receives its tap. Do not widen this selector because FloatingWindow also
hosts unrelated chat, import, workflow, and utility panels.
*/
.floating-window--task-detail.floating-window--touch-geometry .floating-window__delegated-drag-handle {
  min-block-size: 0;
  position: relative;
  z-index: 0;
}

.floating-window--task-detail.floating-window--touch-geometry .floating-window__delegated-drag-handle::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  block-size: var(--modal-resize-touch-target);
  inset-block-start: 50%;
  transform: translateY(-50%);
}

/*
FNXC:ModalTouchGeometry 2026-07-26-16:00:
The invisible tablet drag extension must stay beneath actionable task-header descendants.
Explicit stacking preserves the 44px parent hit area while buttons and links retain their normal
activation instead of beginning a window drag.
*/
.floating-window--task-detail.floating-window--touch-geometry .floating-window__delegated-drag-handle :is(button, a, input, select, textarea, [role="button"]) {
  position: relative;
  z-index: 1;
}

.floating-window--touch-geometry .floating-window__delegated-drag-handle:active {
  cursor: grabbing;
}

.floating-window--touch-geometry .floating-window__resize-handle--n,
.floating-window--touch-geometry .floating-window__resize-handle--s {
  left: var(--modal-resize-touch-target);
  right: var(--modal-resize-touch-target);
  height: var(--modal-resize-touch-target);
}

.floating-window--touch-geometry .floating-window__resize-handle--n {
  top: calc((var(--modal-resize-touch-target) - var(--space-sm)) * -1);
}

.floating-window--touch-geometry .floating-window__resize-handle--s {
  bottom: calc((var(--modal-resize-touch-target) - var(--space-sm)) * -1);
}

.floating-window--touch-geometry .floating-window__resize-handle--e,
.floating-window--touch-geometry .floating-window__resize-handle--w {
  top: var(--modal-resize-touch-target);
  bottom: var(--modal-resize-touch-target);
  width: var(--modal-resize-touch-target);
}

.floating-window--touch-geometry .floating-window__resize-handle--e {
  right: calc((var(--modal-resize-touch-target) - var(--space-sm)) * -1);
}

.floating-window--touch-geometry .floating-window__resize-handle--w {
  left: calc((var(--modal-resize-touch-target) - var(--space-sm)) * -1);
}

.floating-window--touch-geometry .floating-window__resize-handle--ne,
.floating-window--touch-geometry .floating-window__resize-handle--nw,
.floating-window--touch-geometry .floating-window__resize-handle--se,
.floating-window--touch-geometry .floating-window__resize-handle--sw {
  width: var(--modal-resize-touch-target);
  height: var(--modal-resize-touch-target);
}

.floating-window--touch-geometry .floating-window__resize-handle--ne {
  top: calc((var(--modal-resize-touch-target) - var(--space-lg)) * -1);
  right: calc((var(--modal-resize-touch-target) - var(--space-lg)) * -1);
}

.floating-window--touch-geometry .floating-window__resize-handle--nw {
  top: calc((var(--modal-resize-touch-target) - var(--space-lg)) * -1);
  left: calc((var(--modal-resize-touch-target) - var(--space-lg)) * -1);
}

.floating-window--touch-geometry .floating-window__resize-handle--se {
  bottom: calc((var(--modal-resize-touch-target) - var(--space-lg)) * -1);
  right: calc((var(--modal-resize-touch-target) - var(--space-lg)) * -1);
}

.floating-window--touch-geometry .floating-window__resize-handle--sw {
  bottom: calc((var(--modal-resize-touch-target) - var(--space-lg)) * -1);
  left: calc((var(--modal-resize-touch-target) - var(--space-lg)) * -1);
}

/*
FNXC:ModalTouchGeometry 2026-07-26-12:19:
Phone sheets are strictly below 768px. At exactly 768px this query must not match so
`isTabletTouchViewport` can expose the active tablet touch targets without a cascade conflict.

FNXC:ChatModal 2026-06-22-14:49:
On mobile/narrow app viewports, opening Quick Chat should present the full Chat modal as a full-screen sheet instead of a small draggable desktop window. Scope this to the chat FloatingWindow and override the inline desktop geometry only at the mobile breakpoint; desktop pop-out behavior remains movable/resizable.
*/
/*
FNXC:TaskDetailLayout 2026-08-17-23:47:
FN-8766 gave the desktop Task Detail popup a symmetric painted edge by removing the shared body
gutter here and moving its east resize hit areas OUTSIDE the painted shell, so the scrollbar stays
usable and the header-owned close control does not sit behind a resize target. The shared gutter is
now gone for every caller, so the local zeroing that used to accompany these rules is deleted; the
outboard targets remain, and they are the pattern to copy wherever a hosted scrollbar and a resize
hot zone actually collide. Tablet retains its existing touch geometry and phones remain full-screen
sheets below.
*/
.floating-window--task-detail:not(.floating-window--tablet-viewport) {
  overflow: visible;
}

.floating-window--task-detail:not(.floating-window--tablet-viewport) .floating-window__resize-handle--e {
  right: calc(var(--space-sm) * -1);
}

.floating-window--task-detail:not(.floating-window--tablet-viewport) .floating-window__resize-handle--ne {
  right: calc(var(--space-lg) * -1);
}

.floating-window--task-detail:not(.floating-window--tablet-viewport) .floating-window__resize-handle--se {
  right: calc(var(--space-lg) * -1);
}

/*
FNXC:ModalTouchGeometry 2026-07-26-13:25:
FN-8606 migrated core and workflow dialogs share FloatingWindow's pointer contract. Their
caller-owned headers remain the drag target on desktop/tablet; true phones and short sheets hide
all floating affordances so persisted desktop geometry cannot imply a draggable sheet.
*/
.floating-window--activity-log .floating-window__body,
.floating-window--scripts .floating-window__body,
.floating-window--add-node .floating-window__body,
.floating-window--connect-node .floating-window__body,
.floating-window--node-detail .floating-window__body,
.floating-window--workflow-add-step .floating-window__body,
.floating-window--group-task .floating-window__body,
.floating-window--changes-diff .floating-window__body,
.floating-window--model-onboarding .floating-window__body,
.floating-window--git-manager .floating-window__body,
.floating-window--settings .floating-window__body,
.floating-window--planning-mode .floating-window__body,
/* FNXC:ModalTouchGeometry 2026-07-26-19:25: Create Room shares migrated dialogs' host-owned body sizing while its nested member list retains picker scrolling. */
.floating-window--create-room .floating-window__body {
  overflow: hidden;
}

.floating-window--activity-log .modal,
.floating-window--scripts .modal,
.floating-window--add-node .modal,
.floating-window--connect-node .modal,
.floating-window--node-detail .modal,
.floating-window--group-task .modal,
.floating-window--workflow-add-step .wf-add-step-dialog,
.floating-window--changes-diff .changes-diff-modal,
.floating-window--model-onboarding .model-onboarding-modal,
.floating-window--git-manager .gm-modal,
.floating-window--settings .settings-modal,
.floating-window--planning-mode .planning-modal,
.floating-window--create-room .create-room-modal {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: inherit;
}

@media (max-width: 767.98px), (max-height: 480px) {
  /*
  FNXC:FloatingWindow 2026-07-12-17:35:
  Mobile keeps the global `styles.css` pan-y lockdown so the dashboard cannot drift, but movable FloatingWindow headers must still resolve to an effective `touch-action: none`. Reassert the drag-handle contract at the mobile breakpoint, excluding full-screen sheet variants, so a single-finger header drag stays on the captured pointermove stream instead of being intersected back into page pan by the ancestor chain. Desktop drag/resize and mobile sheet variants are unchanged.
  */
  .floating-window:not(.floating-window--chat):not(.floating-window--github-import-detail):not(.floating-window--task-detail):not(.floating-window--workflow-editor):not(.floating-window--automation):not(.floating-window--mission-interview):not(.floating-window--file-browser):not(.floating-window--pr-create):not(.floating-window--activity-log):not(.floating-window--scripts):not(.floating-window--add-node):not(.floating-window--connect-node):not(.floating-window--node-detail):not(.floating-window--workflow-add-step):not(.floating-window--group-task):not(.floating-window--changes-diff):not(.floating-window--model-onboarding):not(.floating-window--git-manager):not(.floating-window--settings):not(.floating-window--planning-mode):not(.artifacts-gallery-window) .floating-window__header {
    touch-action: none;
  }

  /* FNXC:ModalTouchGeometry 2026-07-26-16:10: Automations shares every FN-8606 sheet breakpoint: a short viewport must not expose desktop geometry even when it remains wider than a phone. */
  /*
  FNXC:ModalTouchGeometry 2026-07-28-14:30:
  FN-8607's agent, onboarding, mailbox, interview, and subtask modal classes use the
  same phone/short-viewport sheet contract as the earlier FloatingWindow migrations.
  FN-8620's New Task, right-dock, and terminal hosts share that contract and must remain
  included. Geometry suspension in React must also change the panel, rather than leaving
  a fixed desktop-sized dialog on a short or true-phone viewport.
  */
  .floating-window.new-task-modal,
  .floating-window.right-dock-expand-modal--floating,
  .floating-window.terminal-modal--floating,
  .floating-window--agent-list,
  .floating-window--agent-import,
  .floating-window--agent-generation,
  .floating-window--agent-onboarding,
  .floating-window--experimental-agent-onboarding,
  .floating-window--setup-wizard,
  .floating-window--native-shell-onboarding,
  .floating-window--docker-node-onboarding,
  .floating-window--agent-detail,
  .floating-window--github-import,
  .floating-window--mailbox,
  .floating-window--milestone-slice-interview,
  .floating-window--subtask-breakdown,
  .floating-window--automation,
  .floating-window--activity-log,
  .floating-window--scripts,
  .floating-window--add-node,
  .floating-window--connect-node,
  .floating-window--node-detail,
  .floating-window--workflow-add-step,
  .floating-window--group-task,
  .floating-window--changes-diff,
  .floating-window--model-onboarding,
  .floating-window--git-manager,
  .floating-window--settings,
  .floating-window--planning-mode,
  .floating-window--create-room,
  .floating-window--chat {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .floating-window.new-task-modal .floating-window__resize-handle,
  .floating-window.right-dock-expand-modal--floating .floating-window__resize-handle,
  .floating-window.terminal-modal--floating .floating-window__resize-handle,
  .floating-window--agent-list .floating-window__resize-handle,
  .floating-window--agent-import .floating-window__resize-handle,
  .floating-window--agent-generation .floating-window__resize-handle,
  .floating-window--agent-onboarding .floating-window__resize-handle,
  .floating-window--experimental-agent-onboarding .floating-window__resize-handle,
  .floating-window--setup-wizard .floating-window__resize-handle,
  .floating-window--native-shell-onboarding .floating-window__resize-handle,
  .floating-window--docker-node-onboarding .floating-window__resize-handle,
  .floating-window--agent-detail .floating-window__resize-handle,
  .floating-window--github-import .floating-window__resize-handle,
  .floating-window--mailbox .floating-window__resize-handle,
  .floating-window--milestone-slice-interview .floating-window__resize-handle,
  .floating-window--subtask-breakdown .floating-window__resize-handle,
  .floating-window--automation .floating-window__resize-handle,
  .floating-window--activity-log .floating-window__resize-handle,
  .floating-window--scripts .floating-window__resize-handle,
  .floating-window--add-node .floating-window__resize-handle,
  .floating-window--connect-node .floating-window__resize-handle,
  .floating-window--node-detail .floating-window__resize-handle,
  .floating-window--workflow-add-step .floating-window__resize-handle,
  .floating-window--group-task .floating-window__resize-handle,
  .floating-window--changes-diff .floating-window__resize-handle,
  .floating-window--model-onboarding .floating-window__resize-handle,
  .floating-window--git-manager .floating-window__resize-handle,
  .floating-window--settings .floating-window__resize-handle,
  .floating-window--planning-mode .floating-window__resize-handle,
  .floating-window--create-room .floating-window__resize-handle,
  .floating-window--chat .floating-window__resize-handle {
    display: none;
  }

  /*
  FNXC:QuickAddAttachments 2026-07-16-00:00:
  Pending task-attachment images open in a movable, resizable FloatingWindow on desktop. On narrow touch viewports the dedicated image-preview variant must instead fill the screen and remove desktop resize handles.
  */
  .floating-window--image-preview {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .floating-window--image-preview .floating-window__resize-handle {
    display: none;
  }

  /*
  FNXC:GitHubImport 2026-07-15-16:00:
  Import details use FloatingWindow for desktop drag and resize; on mobile this scoped variant becomes a full-screen sheet
  and hides desktop resize affordances.
  */
  .floating-window--github-import-detail {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .floating-window--github-import-detail .floating-window__resize-handle {
    display: none;
  }

  .floating-window--chat .chat-view {
    border-radius: 0;
  }

  /*
  FNXC:MobileTaskPopups 2026-06-29-00:00:
  Mobile board-card popup opens reuse the existing task-detail FloatingWindow, but the shell must behave like a full-screen mobile sheet. Scope the override to task-detail pop-outs, hide resize handles, and remove drag/resize cursors so no invisible desktop affordances remain on touch layouts.
  */
  .floating-window--task-detail {
    inset: 0 !important;
    overflow: hidden !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .floating-window--task-detail .floating-window__resize-handle {
    display: none;
  }

  /*
  FNXC:MobileTaskPopups 2026-08-17-23:47:
  The mobile task-detail and standalone GitHub Import sheets each carried a local
  `margin-inline-end: 0` to undo the shared body gutter, which left them shifted left with an uneven
  right inset on every row (FN-8722, and the mobile task-detail left-shift fix). The shared gutter is
  deleted, so both overrides are gone: `.detail-body` and the import shell's own symmetric padding
  now define both insets directly.
  */
  .floating-window--task-detail .task-detail-content--embedded,
  .floating-window--task-detail .task-detail-content--embedded > .modal-header {
    border-radius: 0;
    cursor: default;
    touch-action: auto;
  }
}

/*
FNXC:FloatingWindow 2026-07-15-18:20:
Long titles (e.g. the GitHub import detail's "#2159 — <issue title>") must truncate with an ellipsis rather than hard-cut mid-word against the close button.
display MUST stay block, not flex: every caller passes a plain string, so under flex the text became an anonymous flex item, which text-overflow cannot act on — the ellipsis declared here silently never rendered. A block box makes the existing overflow/text-overflow/white-space trio work as written.
Reintroducing flex here (e.g. to lay out an element title) re-breaks truncation for all callers; give the title an inner element instead.
*/
.floating-window__title {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-window__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.floating-window__close:hover {
  background: var(--status-todo-bg, var(--surface));
  color: var(--text);
}

/*
FNXC:FloatingWindow 2026-06-22-20:45:
Body is a flex host that lets its single child stretch to the full panel width/height (min-width/min-height:0 so a wide child cannot collapse the flex line, and the child's own overflow can engage).

FNXC:FloatingWindow 2026-08-17-23:47:
THE SHARED BODY HAS NO INLINE-END GUTTER. FN-8015 / issue #2140 previously reserved
`margin-inline-end: var(--space-lg)` here so a hosted vertical scrollbar stayed inboard of the east,
north-east, and south-east resize hot zones. Operator removed it: one shared reservation that every
caller had to know about produced a recurring class of asymmetric-right-inset bugs instead — the
window's own surface showed through beside each child panel, so callers read it as unexplained
padding on the right. It was zeroed piecemeal five separate times (desktop task detail FN-8766,
mobile task detail, mobile GitHub import FN-8722, phone Git Manager FN-8702, and every tablet
window), and the callers that instead LEANED on it for their right inset had to restore it locally
whenever one of those predicates fired. FN-8630 / FN-8634 and the 2026-08-01 tablet fix are the same
bug recurring.

The accepted trade-off: a hosted scrollbar now sits under the east/corner resize targets. Where that
conflict is actually felt, fix it the FN-8766 way — move that caller's east targets outboard of the
painted shell (`overflow: visible` plus negative `right` offsets on --e/--ne/--se) — rather than
reintroducing a shared gutter. Do not re-add `margin-inline-end` to this rule.
*/
.floating-window__body {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.floating-window__body > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
  min-block-size: 0;
}

/*
FNXC:FloatingWindow 2026-06-22-20:45:
Edge + corner resize handles. touch-action:none keeps the drag from being hijacked by scroll/gestures so resizing stays smooth.
*/
.floating-window__resize-handle {
  position: absolute;
  z-index: 2;
  touch-action: none;
}

.floating-window__resize-handle--n,
.floating-window__resize-handle--s {
  left: var(--space-sm);
  right: var(--space-sm);
  height: var(--space-sm);
  cursor: ns-resize;
}

.floating-window__resize-handle--n { top: 0; }
.floating-window__resize-handle--s { bottom: 0; }

.floating-window__resize-handle--e,
.floating-window__resize-handle--w {
  top: var(--space-sm);
  bottom: var(--space-sm);
  width: var(--space-sm);
  cursor: ew-resize;
}

.floating-window__resize-handle--e { right: 0; }
.floating-window__resize-handle--w { left: 0; }

.floating-window__resize-handle--ne,
.floating-window__resize-handle--nw,
.floating-window__resize-handle--se,
.floating-window__resize-handle--sw {
  width: var(--space-lg);
  height: var(--space-lg);
}

.floating-window__resize-handle--ne { top: 0; right: 0; cursor: nesw-resize; }
.floating-window__resize-handle--nw { top: 0; left: 0; cursor: nwse-resize; }
.floating-window__resize-handle--se { bottom: 0; right: 0; cursor: nwse-resize; }
.floating-window__resize-handle--sw { bottom: 0; left: 0; cursor: nesw-resize; }