and #etSupportChat are both children of , and ~70 rules address `main > …` directly, so the page cannot be wrapped in a grid without restyling it. Here Support is a page dock instead: support-chat.js sets body.et-support-page-docked, the column is fixed to the window's edge, and gives up its width plus a 16px gutter, so the page is pushed over exactly as a grid track pushes the manuscript. What it shares with Write: - the width, --et-ws-support-w (22rem, Write's value), set by the same handle and remembered under the same key (et_support_sidebar_width); - the seam: a lane on the edge facing the page, one grey line in the middle of the gutter, lighter under the pointer, teal while dragging; - the side: panel-manager.js's 'page' surface lets the docked column be dragged by its header to the other edge of

, and marks the choice with body.et-support-page-dock-left; - the window: the same toggle, drag, grip and remembered box, and a window dragged onto an edge of the page snaps back in as the column. From 1200px, as on every surface (support-chat.js supportDockWide()). 1100 was tried and reverted: these pages lay themselves out by the window's width, so the page kept its desktop layout in 732px. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1200px) { html body.et-support-page-docked { --et-support-page-w: var(--et-ws-support-w, 22rem); --et-support-page-gutter: 1rem; padding-right: calc(var(--et-support-page-w) + var(--et-support-page-gutter)) !important; box-sizing: border-box; } html body.et-support-page-docked.et-support-page-dock-left { padding-right: 0 !important; padding-left: calc(var(--et-support-page-w) + var(--et-support-page-gutter)) !important; } /* The column. Two ids, as the other surfaces' docked rules carry: the floating anchor rules in support-chat.css and support-panel.css must not win any property here. */ html body.et-support-page-docked #etSupportChat#etSupportChat.et-support-chat--docked { position: fixed !important; top: var(--et-support-dock-top, 0px) !important; bottom: 0 !important; right: var(--et-support-dock-right, 0px) !important; left: auto !important; width: var(--et-support-page-w) !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; transform: none !important; display: flex !important; flex-direction: column; /* Above the page, below CoreUI's modals and their backdrop (1050+). */ z-index: 1030 !important; background: #000; border: 0 !important; } html body.et-support-page-docked.et-support-page-dock-left #etSupportChat#etSupportChat.et-support-chat--docked { left: var(--et-support-dock-left, 0px) !important; right: auto !important; } html body.et-support-page-docked #etSupportChat#etSupportChat.et-support-chat--docked #etSupportChatPanel { position: relative !important; inset: auto !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; flex: 1 1 auto; min-height: 0; margin: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; display: flex !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* The seam. The handle is the gutter plus a 4px lane inside the column, on whichever edge faces the page; its ::before is the line, drawn in the middle of the gutter as seam-gap.js draws Write's. */ html body.et-support-page-docked #etSupportChat#etSupportChat.et-support-chat--docked > #etSupportChatResizer { display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: calc(-1 * var(--et-support-page-gutter)) !important; right: auto !important; width: calc(var(--et-support-page-gutter) + 4px) !important; height: auto !important; z-index: 1150 !important; cursor: col-resize !important; touch-action: none !important; background: transparent !important; pointer-events: auto !important; } html body.et-support-page-docked.et-support-page-dock-left #etSupportChat#etSupportChat.et-support-chat--docked > #etSupportChatResizer { left: auto !important; right: calc(-1 * var(--et-support-page-gutter)) !important; } html body.et-support-page-docked #etSupportChat#etSupportChat.et-support-chat--docked > #etSupportChatResizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--et-support-page-gutter) / 2); width: 1px; background: rgba(255, 255, 255, 0.12); pointer-events: none; transition: background-color 120ms ease; } html body.et-support-page-docked.et-support-page-dock-left #etSupportChat#etSupportChat.et-support-chat--docked > #etSupportChatResizer::before { left: calc(4px + var(--et-support-page-gutter) / 2); } html body.et-support-page-docked #etSupportChat#etSupportChat.et-support-chat--docked > #etSupportChatResizer:is(:hover, :focus-visible)::before { background: rgba(255, 255, 255, 0.3); } html body.et-support-page-docked #etSupportChat#etSupportChat.et-support-chat--docked > #etSupportChatResizer.is-dragging::before { background: var(--et-accent, #2dd4bf); } html body.et-support-page-docked #etSupportChat#etSupportChat.et-support-chat--docked > #etSupportChatResizer::after { content: none !important; } html body.et-support-page-docked.et-ws-artifact-resizing, html body.et-support-page-docked.et-ws-artifact-resizing #etSupportChat { transition: none !important; } } /* The public footer's link row keeps Bootstrap's -12px gutters, but public-atmosphere.css zeroes its container's side padding (`padding: … 0 0`). At full width the centred container has room either side and the overhang never shows; docked, the container is the page's whole width and the row ran 12px past the window — a sideways scroll on every public page, measured 1452 in a 1440 window with Support on the left (27 Sep 2026). The gutters come back only while docked, so the undocked footer does not move. */ @media (min-width: 1200px) { html body.et-support-page-docked.et-public-site .et-site-footer__inner { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* The public nav, docked. It lays itself out by the window's width, so at 1200-1300 with Support docked it kept its wide-window spacing in 830-910px and "Sign In" and "Start your novel free" wrapped onto two and three lines (27 Sep 2026). While docked the nav is a size container and tightens by its own width: link padding first, then the wordmark beside the logo. */ @media (min-width: 1200px) { html body.et-support-page-docked.et-public-site nav.et-navbar { container: et-pubnav / inline-size; } } @container et-pubnav (max-width: 1000px) { html body.et-support-page-docked.et-public-site nav.et-navbar .et-navbar-nav > .nav-item > .nav-link { padding-left: 0.5rem !important; padding-right: 0.5rem !important; white-space: nowrap; } html body.et-support-page-docked.et-public-site nav.et-navbar .et-navbar-nav .btn { white-space: nowrap; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } @container et-pubnav (max-width: 900px) { html body.et-support-page-docked.et-public-site nav.et-navbar .et-brand-name-montserrat { display: none !important; } } /* ── Page layouts that choose their columns by the window's width ───────── Checked on every public page family with Support docked (27 Sep 2026): the tool pages keep three columns (tools list · tool · newsletter and signup) down to a 992px window, so docked at 1200-1440 the third column was 150-260px and its buttons broke onto two lines ("Subscribe" with its icon on its own line, "Start your novel free", "See Pro / Ultra pricing"). The footer kept five columns of ~139px. While docked,

and the footer are size containers and these layouts follow the page's width instead. */ @media (min-width: 1200px) { html body.et-support-page-docked.et-public-site #main-content { container: et-pubmain / inline-size; } html body.et-support-page-docked.et-public-site footer.et-site-footer { container: et-pubfoot / inline-size; } } /* Tool pages: the newsletter and signup column moves below the tool, as a row of cards, and the tool takes its width beside the tools list. */ @container et-pubmain (max-width: 1100px) { html body.et-support-page-docked .et-tool-page-layout:not(.et-tool-page-layout--litrpg) > .et-tool-page-content:not(.col-12) { flex: 1 1 0% !important; width: auto !important; max-width: none !important; } html body.et-support-page-docked .et-tool-page-layout:not(.et-tool-page-layout--litrpg) > .et-tool-page-aside { flex: 0 0 auto !important; width: 100% !important; max-width: none !important; } html body.et-support-page-docked .et-tool-page-layout > .et-tool-page-aside .guide-layout-sidebar { position: static !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; } /* The LitRPG sheet has its own layout: its 1200-1299px shape, two columns and no promo column, "so the tool isn't crushed". */ html body.et-support-page-docked .et-tool-page-layout--litrpg.row { grid-template-columns: minmax(13.5rem, 15.5rem) minmax(0, 1fr) !important; } html body.et-support-page-docked .et-tool-page-layout--litrpg .et-tool-page-aside { display: none !important; } } /* The LitRPG sheet splits builder | preview from a 992px window, whatever its own width; docked at 1200-1300 that left ~600px for both, truncating the fields and running the attribute row out of the preview. It is its own size container already (writing-tools.css): stack the two when narrow. */ @container et-litrpg (max-width: 720px) { html body.et-support-page-docked .et-litrpg-sheet__grid--builder { grid-template-columns: minmax(0, 1fr) !important; } html body.et-support-page-docked .et-litrpg-sheet__preview-col { position: static !important; } } /* Footer: its own tablet layout (public-atmosphere.css, 768-991px) — brand across two of three columns with Connect beside it, the lists below. */ @container et-pubfoot (max-width: 991.98px) { html body.et-support-page-docked .et-site-footer__inner > .row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2rem; margin: 0 !important; } html body.et-support-page-docked .et-site-footer__inner > .row > [class*='col-'] { width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0; align-self: start; } html body.et-support-page-docked .et-site-footer__inner > .row > :nth-child(1) { grid-area: 1 / 1 / 2 / 3; } html body.et-support-page-docked .et-site-footer__inner > .row > :nth-child(5) { grid-area: 1 / 3 / 2 / 4; } html body.et-support-page-docked .et-site-footer__inner > .row > :nth-child(2) { grid-area: 2 / 1; } html body.et-support-page-docked .et-site-footer__inner > .row > :nth-child(3) { grid-area: 2 / 2; } html body.et-support-page-docked .et-site-footer__inner > .row > :nth-child(4) { grid-area: 2 / 3; } html body.et-support-page-docked .et-site-footer :is(.et-footer-about, .et-footer-meta-links) { max-width: 42rem; } } /* A window is resized by its own frame; the column handle goes with the column (as panel-windows.css does on the other surfaces). */ html body:is(.et-admin-space, .et-public-site):not(.et-support-page-docked) #etSupportChat#etSupportChat > #etSupportChatResizer { display: none !important; } /* ── What panel-manager.js draws, for pages that load neither panel-windows.css nor kestrel-popup.css ──────────────────────────────── */ html body.et-ws-panels-page .et-ws-panel-grab { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; } html body.et-ws-panels-page .et-ws-panel-grab :is(button, a, input, select, textarea, label) { cursor: pointer; } html body.et-ws-panels-page.et-ws-panel-dragging, html body.et-ws-panels-page.et-ws-panel-dragging .et-ws-panel-grab { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; } /* Nothing under the pointer reacts while a panel is in flight — an iframe or a text selection in the page would swallow the pointermove. */ html body.et-ws-panels-page.et-ws-panel-dragging :is(#et-main-content, #main-content) { pointer-events: none !important; } html body.et-ws-panels-page .et-ws-dock-drop { position: fixed; top: 0; bottom: 0; width: 2px; display: none; z-index: 2200; background: var(--et-accent, #2dd4bf); box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.35); pointer-events: none; } html body.et-ws-panels-page .et-ws-win-resize { position: absolute; inset: 0; pointer-events: none; z-index: 20; } html body.et-ws-panels-page .et-ws-win-resize__h { position: absolute; pointer-events: auto; touch-action: none; } html body.et-ws-panels-page .et-ws-win-resize__h--n { top: 0; left: 12px; right: 12px; height: 7px; } html body.et-ws-panels-page .et-ws-win-resize__h--s { bottom: 0; left: 12px; right: 12px; height: 7px; } html body.et-ws-panels-page .et-ws-win-resize__h--w { left: 0; top: 12px; bottom: 12px; width: 7px; } html body.et-ws-panels-page .et-ws-win-resize__h--e { right: 0; top: 12px; bottom: 12px; width: 7px; } html body.et-ws-panels-page .et-ws-win-resize__h--nw { top: 0; left: 0; width: 14px; height: 14px; } html body.et-ws-panels-page .et-ws-win-resize__h--ne { top: 0; right: 0; width: 14px; height: 14px; } html body.et-ws-panels-page .et-ws-win-resize__h--sw { bottom: 0; left: 0; width: 14px; height: 14px; } html body.et-ws-panels-page .et-ws-win-resize__h--se { bottom: 0; right: 0; width: 14px; height: 14px; } html body.et-ws-panels-page .et-ws-win-resize__h--se::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; background: linear-gradient(135deg, transparent 0 55%, rgba(255, 255, 255, 0.28) 55% 65%, transparent 65% 75%, rgba(255, 255, 255, 0.28) 75% 85%, transparent 85%); } html body.et-ws-panels-page .et-ws-win-resize__h:hover::after { background: linear-gradient(135deg, transparent 0 55%, rgba(255, 255, 255, 0.55) 55% 65%, transparent 65% 75%, rgba(255, 255, 255, 0.55) 75% 85%, transparent 85%); }