/* 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-03-19:36: FN-8766 keeps the desktop Task Detail popup's visible header/content edge symmetric while preserving the shared body's scrollbar clearance for every other FloatingWindow consumer. This headerless host owns its close button, so remove only its visible body gutter and move its desktop east resize hit areas outside the painted shell; the scrollbar remains fully usable and the close control does not sit behind a resize target. 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__body { margin-inline-end: 0; } .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-07-17-08:20: FN-8015 reserves `margin-inline-end: var(--space-lg)` on the shared `.floating-window__body` so a hosted scrollbar clears the desktop east/north-east/south-east resize hot zones. The mobile task-detail sheet is full-screen and hides every resize handle (above), so that gutter protects nothing and instead shifts the whole panel left — leaving an uneven right inset on every row. Zero it here so `.detail-body`'s own symmetric padding defines both insets equally. Desktop resize-handle clearance is untouched (this rule is mobile-only). */ .floating-window--task-detail .floating-window__body { margin-inline-end: 0; } /* FNXC:GitHubImport 2026-08-02-02:47: FN-8722 makes the standalone GitHub Import host follow the full width-or-height sheet contract. Its shared body gutter exists only to clear desktop resize handles; once this predicate hides those handles, retaining the gutter shifts every shell region left. Do not broaden this rule to embedded Import Tasks or the independent detail window, and keep non-short tablet/desktop resize clearance intact. */ .floating-window--github-import .floating-window__body { margin-inline-end: 0; } .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; } } @media (max-width: 767.98px) { /* FNXC:GitManagerMobileSpacing 2026-08-01-19:10: FN-8702 keeps the shared desktop resize-handle clearance for tablet and desktop windows. A standalone Git Manager phone sheet hides those handles, so only below the strict 768px boundary its body clears the obsolete inline-end gutter and aligns its header and close control. */ .floating-window--git-manager .floating-window__body { margin-inline-end: 0; } } /* FNXC:FloatingWindow 2026-07-15-18:20: Long titles (e.g. the GitHub import detail's "#2159 — ") 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-07-15-00:00: FN-8015 / issue #2140 requires every shared FloatingWindow caller to keep its hosted vertical scrollbar clear of the right-edge and right-corner resize hot zones. Reserve the corner-width gutter on the body rather than specializing task detail: this applies equally when the body itself scrolls and when a headerless caller delegates scrolling to its full-size child. The panel border and its right handles remain available for desktop resizing, while the scrollbar is always inboard of the east, north-east, and south-east hit targets. */ .floating-window__body { display: flex; flex: 1; min-width: 0; min-height: 0; margin-inline-end: var(--space-lg); overflow: auto; } /* FNXC:ModalTouchGeometry 2026-08-01-03:48: Tablet windows drop FN-8015's inline-end scrollbar gutter. On tablet the gutter reads as a too-big, uneven right border inside Task Detail popups and the floating terminal (the inner surfaces already carry their own symmetric padding), and the mouse conflict FN-8015 solves — grabbing a hosted scrollbar thumb versus the east resize hot zone — does not apply to touch input, which never grabs scrollbar thumbs. This keys on tablet MODE (`.floating-window--tablet-viewport`, set from `useViewportMode()`), not `--touch-geometry`, so a non-touch window at tablet widths gets the same symmetric inset the operator sees on an iPad. Desktop keeps the FN-8015 gutter. Callers that relied on the gutter as their right inset must compensate under the same class (see `.github-import-detail-panel`). */ .floating-window--tablet-viewport .floating-window__body { margin-inline-end: 0; } .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; }