/* ══════════════════════════════════════════════════════════════════════════ * support-panel.css — how the Support panel looks, on every page * * 26 Sep 2026, the owner: "make sure support has a single source of truth and * works the same on all pages and looks the same. only change is it should * be adjusted to how it works based on screen size but this change should * work cross site." * * Support's look had been written for the Write page (`body.et-page-write * #etSupportChat …` in write-studio/kestrel-popup.css, some of it repeated for * the wizard), so every other page fell through to support-chat.css's older * rules and the same panel measured a 56px header on Write, 75px on the * dashboard, 95px in the wizard, and a 44px composer against Write's 84. * * This sheet is those rules, moved out of kestrel-popup.css without changing * a declaration, in the order they had there. Loaded on every page: * · signed-in pages — header-dashboard.php, as a post-flat sheet registered * immediately before kestrel-popup.css (so each rule keeps its place * relative to every other sheet), and on pages without kestrel-popup too * · admin pages — header-admin.php, after support-chat.css * · public pages — footer-public.php, after support-chat.css * * `body:is(.et-app-shell, .et-public-site)` is the page-agnostic hook: one * class of weight, exactly what `.et-page-write` had, so on Write every rule * matches the same elements at the same specificity as before the move. Where * the original named `.et-app-shell` twice (to keep the weight of * `.et-app-shell.et-page-write`), the :is() is written twice. * * What stays elsewhere, deliberately: * · support-chat.css — the component's base styles and its behaviour hooks * · placement — where the panel sits (docked column, window, full-screen * sheet) and the footer button that opens it — stays with each surface, * because that is the part the owner said should follow the screen * · Write's shared panel-family rules that list Support beside Chapters, * Outline and Brief keep their Write selector for those siblings; the * Support members were copied here as their own selectors. * * Add Support look rules here, and do not name a page in them. * ══════════════════════════════════════════════════════════════════════════ */ /* One base size for the panel. Signed-in pages inherit 14px / 1.55 from the app's ; public pages set 16px, so every em-sized part of the panel (padding, icons, the composer) drew a size up there. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat { font-size: 0.875rem; line-height: 1.55; } /* The attach control is a (it wraps the file input), and the account pages' sheet sets every label to 600 (dashboard-write-align.css), which drew the paperclip heavier there than on Write. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat label.et-support-chat__icon-btn { font-weight: 400; } /* Write's tokens, carried by the panel. Support's rules read the page's text and type tokens (--et-text-muted for its status line and idle icons, --et-t-row for starters, and so on), and Write sets those on its own (workshop-edit-polish.css, the type scale in this sheet) while every other page keeps app.css's. The same rule therefore drew #9ca3af on Write and #a3a3b0 elsewhere, 13px starters on Write and 14px elsewhere. Stated on the panel with Write's values, they are the same everywhere — and on Write they are the values the body already gives, so nothing there moves. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat { --et-text-primary: #fafafa; --et-text-secondary: #d4d4d8; --et-text-muted: #9ca3af; --et-t-title: 0.9375rem; --et-t-body: 0.875rem; --et-t-row: 0.8125rem; --et-t-small: 0.75rem; --et-t-micro: 0.6875rem; --et-t-lh-tight: 1.25; --et-t-lh-ui: 1.35; --et-t-lh-read: 1.55; --et-t-track-caps: 0.06em; --et-t-track-num: 0.02em; } /* The header's glyph is square and its buttons near-white in every mode. Both were written for the docked column only, so a floating panel — Ship's, the account pages' — drew a round avatar (studio-flat.css rounds anything named *avatar*) and grey buttons. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header .et-support-chat__avatar { border-radius: 0 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header :is(.et-support-chat__header-action, .et-support-chat__minimize):not(:hover) { color: rgba(255, 255, 255, 0.94) !important; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header { min-height: 3.5rem; padding: 0.75rem 0.7rem 0.75rem 0.9rem !important; background: #121212; border-bottom: 1px solid var(--et-popup-line, rgba(255, 255, 255, 0.14)) !important; flex-wrap: nowrap; gap: 0.55rem; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__heading { flex: 1 1 auto; min-width: 0; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__heading > strong { display: block; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__tag { display: none; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__heading > #etSupportChatStatus { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 400; line-height: 1.35; color: #a1a1aa; letter-spacing: 0; text-transform: none; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__avatar { width: 2rem; height: 2rem; flex: 0 0 2rem; border: 0; background: color-mix(in srgb, var(--et-acc-teal, #2dd4bf) 14%, transparent); color: var(--et-acc-teal, #2dd4bf); font-size: 1.375rem; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__avatar i, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__welcome-icon i, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__minimize i, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header-action i, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__icon-btn i, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__send i { display: block; font-size: 1.375rem !important; font-weight: 700; line-height: 1; width: 1em; height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__minimize, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header-action { width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; color: rgba(255, 255, 255, 0.94); } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__minimize:hover, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header-action:hover { color: #fff; background: rgba(255, 255, 255, 0.08); } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__conversation { background: #121212; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__welcome { margin: 0; max-width: none; width: 100%; padding: 1.35rem 1.1rem 1rem; place-items: start; justify-items: stretch; text-align: left; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__welcome-icon { display: none; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__welcome strong { font-size: 0.9375rem; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__welcome p { font-size: 0.8125rem; line-height: 1.45; color: #a1a1aa; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__starters { margin-top: 0.85rem; gap: 0.4rem; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__starter { padding: 0.65rem 0.8rem; font-size: 0.8125rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: #e4e4e7; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__starter:hover, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__starter:focus-visible { border-color: color-mix(in srgb, var(--et-acc-teal, #2dd4bf) 45%, transparent); background: rgba(255, 255, 255, 0.05); color: #fafafa; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer { border-top: 1px solid var(--et-popup-line, rgba(255, 255, 255, 0.14)) !important; background: #121212; padding: 0.75rem 0.85rem 0.85rem; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row { display: grid; grid-template-columns: 2.5rem 2.5rem minmax(0, 1fr) 2.5rem; grid-template-areas: "text text text text" "attach emoji . send"; align-items: center; gap: 0.15rem; width: 100%; box-sizing: border-box; min-height: 8.75rem; padding: 0; border: 1px solid var(--et-popup-line, rgba(255, 255, 255, 0.14)) !important; background: #0c0c0e; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row > textarea, html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row > textarea#etSupportChatInput { grid-area: text; /* Level with Kestrel's field, and derived from it rather than guessed. * * Kestrel's composer (kestrel-popup.css) is a grid: 8.75rem tall, a 2.5rem * tools row under the text, 1px of border top and bottom, border-box. Her * textarea is therefore 8.75 - 2.5 - 0.125 = 6.125rem (98px), and her grid * row is written minmax(5.25rem, 1fr) — 5.25rem is a *floor* that then * stretches. * * Support copied that 5.25rem as a hard min-height into a centred flex * row, so it never stretched: an 84px box floating in the middle of the * same 140px row, 14px shorter than Kestrel's and not level with it. The * number to copy was the derived one. Change Kestrel's composer and this * follows — chat-composer-parity.test.js fails if the arithmetic stops * holding. */ min-height: 6.125rem; max-height: 12rem; margin: 0; padding: 0.75rem 0.85rem 0.45rem !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: transparent !important; box-shadow: none !important; font-size: 0.875rem; line-height: 1.45; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row > .et-support-chat__icon-btn:has(input[type="file"]) { grid-area: attach; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row > #etSupportChatEmoji { grid-area: emoji; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row > #etSupportChatSend { grid-area: send; justify-self: end; } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row:not(:has(input[type="file"])) { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; grid-template-areas: "text text text" "emoji . send"; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__icon-btn, html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__send, html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat #etSupportChatSend { width: 2.25rem !important; height: 2.25rem !important; max-width: 2.25rem !important; max-height: 2.25rem !important; min-width: 2.25rem !important; min-height: 2.25rem !important; flex: 0 0 2.25rem !important; margin: 0.2rem 0.25rem 0.25rem; padding: 0 !important; color: rgba(255, 255, 255, 0.94); background: transparent; border: 0; box-sizing: border-box; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row > #etSupportChatSend { margin-left: auto; } /* The box itself is the same height as Kestrel's, not just the text in it. * * Kestrel's field is 8.75rem: a 6.125rem textarea over a 2.5rem tool bar, * inside 1px of border. Support draws the same shape — support-chat.css wraps * the row so the text sits on top at full width and one bar runs underneath — * but the bar was built out of larger parts: a 0.2rem gap under the textarea, * 0.2rem/0.25rem button margins and 0.3rem of padding under the row, 48px in * all against Kestrel's 40. The two framed boxes measured 154px and 140px side * by side, so the text lined up and the boxes did not. * * Stated here rather than in support-chat.css because this sheet owns how * Support looks; support-chat.css owns the wrapping row it looks like. The * ids are what it takes to beat that sheet's !important. */ html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row { padding-bottom: 0 !important; /* Row gap only: the 0.15rem that spaces attach from emoji was also spacing the text line off the bar, which Kestrel's grid does not do. */ row-gap: 0 !important; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row > textarea#etSupportChatInput { margin-bottom: 0 !important; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__composer-row > :is(.et-support-chat__icon-btn, .et-support-chat__send, #etSupportChatSend, #etSupportChatEmoji) { margin-top: 0.125rem !important; margin-bottom: 0.125rem !important; } /* ── The same three bands Kestrel steps through ──────────────────────────── * * Kestrel's composer is not one size. kestrel-thread-polish.css floors her * field at calc(4.5rem + 2.3rem strip) = 6.8rem, kestrel-popup.css lifts that * to 8.75rem from 992px up, and below 576px the floor drops and the box is * left to its content. Measured on Import and Translate, fresh load per width * (a resize leaves stale inline heights and lies): * * >= 992px Kestrel 140px text 98 tool row 2.5rem * 576-991 Kestrel 109px text 70 tool row 2.3rem * <= 575 Kestrel 98px text 59 tool row 2.3rem * * Support had no steps at all: 140px at every width, so at 390px it stood * 42px taller than the panel beside it. The admin panel did step, but on its * own 700px breakpoint to its own 94px (support-chat.css, "a reply box that * starts at two lines"), so the two Supports did not even match each other. * * These restate the measured boxes rather than the floors, because Kestrel's * lower two are content-driven — her textarea is rows=2 with height:auto, * Support's is rows=1 with a floor, so the same floor would not land in the * same place. Width only, no (max-height: 720px): below 992 Kestrel's content * lands on the same number whichever floor applies, and at 992+ her 8.75rem * is !important and wins on a short window anyway. * * The tool row narrows with her: 2.25rem button + 2 x 0.025rem = 2.3rem. */ @media (max-width: 991.98px) { html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat .et-support-chat__composer-row { min-height: 6.8rem !important; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat .et-support-chat__composer-row > textarea#etSupportChatInput { min-height: 4.375rem !important; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat .et-support-chat__composer-row > :is(.et-support-chat__icon-btn, .et-support-chat__send, #etSupportChatSend, #etSupportChatEmoji) { margin-top: 0.025rem !important; margin-bottom: 0.025rem !important; } } @media (max-width: 575.98px) { html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat .et-support-chat__composer-row { min-height: 6.1125rem !important; } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat .et-support-chat__composer-row > textarea#etSupportChatInput { min-height: 3.6875rem !important; } } body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__icon-btn:hover, body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__send:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.08); } /* The plane is white whether or not there is anything to send. studio-flat.css paints a disabled icon button with --et-text-muted, so an empty Support composer showed a grey plane (#9ca3af measured) beside Kestrel's white one — the two panels sit side by side and the difference read as one of them being broken. Kestrel's plane does not dim when its box is empty; this is Support matching it, not a new idea. The disabled state stays legible through the button, which takes no hover background. */ html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__send i[class*="bi-"], html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__send:disabled i[class*="bi-"], html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat #etSupportChatSend i[class*="bi-"], html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat #etSupportChatSend:disabled i[class*="bi-"] { color: #fff !important; } @media (min-width: 1200px) { /* * The admin inbox stacks when it is a sidebar. * * Its layout is two panes side by side — the thread list and the conversation * — which is right for a 920px window and impossible in a 320px column: * measured `grid-template-columns: 280px 39px`, so the conversation, the half * an admin actually types into, was thirty-nine pixels wide. One column, with * the list given a bounded share of the height and the conversation the rest, * puts both panes at the full width of the track. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__admin-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(8rem, 2fr) minmax(0, 3fr) !important; min-width: 0 !important; } /* * …but only while nothing is open. support-chat.css makes the sidebar one * pane — a thread open is "0 / 1fr", no thread "1fr / 0" — at one id, and * the docked split above has one id and one more class, so docked into * Write's or Ship's grid it always won. An open thread then sat under the * inbox's 2fr row, which that sheet hides with opacity 0: 40% of the * column blank above the conversation (owner, 26 Sep 2026, on Write and * Ship). Two ids restate the one-pane rows for the docked column. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin #etSupportChatPanel.is-thread-open .et-support-chat__admin-layout { grid-template-rows: 0 minmax(0, 1fr) !important; } body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin #etSupportChatPanel:not(.is-thread-open) .et-support-chat__admin-layout { grid-template-rows: minmax(0, 1fr) 0 !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__threads { min-width: 0 !important; width: auto !important; max-width: none !important; border-right: 0 !important; border-bottom: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.08)) !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__conversation { min-width: 0 !important; width: auto !important; } } @media (min-width: 1200px) { /* * Superseded by the shared header contract (23 Sep 2026). * * The two-row grid solved the right problem the wrong way once the other * four panels agreed on a single 3.5rem row: Support became the one header * twice everyone else's height, and when the contract capped it the second * row was clipped — the icons drew over the customer's email instead of * under it. One row, like the rest. What made the grid necessary was seven * actions in a 320px panel, and that is solved below by letting the action * group shrink and scroll rather than by giving it a row. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__header { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; min-width: 0 !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__avatar { grid-area: auto !important; flex: 0 0 auto !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__heading { grid-area: auto !important; flex: 1 1 auto !important; min-width: 5rem !important; overflow: hidden !important; } } @media (min-width: 1200px) { /* One line each, docked, admin or not: the status line ("Support is online — send a message for a live reply") wrapped to three lines in a 320px column and made the header 99px against Kestrel's 64. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked .et-support-chat__heading > :where(#etSupportChatTitle, #etSupportChatStatus) { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked .et-support-chat__heading { min-width: 0 !important; overflow: hidden !important; } } @media (min-width: 1200px) { /* A reader's panel is one row. Its two actions fit beside a heading that can now ellipsis, so the wrap that pushed them onto a second line — and the header to 99px against Kestrel's 64 — has nothing left to solve. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked:not(.et-support-chat--admin) .et-support-chat__header { flex-wrap: nowrap !important; min-width: 0 !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked:not(.et-support-chat--admin) .et-support-chat__header-actions { flex: 0 0 auto !important; flex-wrap: nowrap !important; } } @media (min-width: 1200px) { /* * Seven actions in a 320px panel: mark read, erase, delete, resolve, email, * and the panel's own dock and minimise. They want 343px. Wrapping them * gave the header a second row; taking the space gave the title none and * pushed the icons 85px outside the panel — both measured. * * So the group gives way and scrolls what will not fit. Nothing is removed, * which matters because these are the only controls for resolving or * closing a conversation, and the two that belong to the panel rather than * to the thread stay pinned at the right edge where the other four panels * put them. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__header-actions { grid-area: auto !important; display: flex !important; flex: 0 1 auto !important; flex-wrap: nowrap !important; justify-content: flex-end !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__header-actions::-webkit-scrollbar { display: none !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__header :is(#etSupportChatLayout, #etSupportChatMinimize) { position: sticky !important; z-index: 2 !important; background: #000 !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__header #etSupportChatMinimize { right: 0 !important; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked.et-support-chat--admin .et-support-chat__header #etSupportChatLayout { right: 2.25rem !important; } } @media (min-width: 1200px) { /* The canned replies are a single scrolling row, not three stacked ones. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked .et-support-chat__canned { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; } } @media (min-width: 1200px) { body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked .et-support-chat__canned > :where(.et-support-chat__canned-btn) { flex: 0 0 auto !important; } } @media (min-width: 1200px) { /* * Docked, Support is dressed like Kestrel. * * They sit side by side in the same page and were drawn to different specs: * title 12px against her 15px, header buttons 40px against her 36px, a square * teal avatar tile against her round one, and a dimmer icon colour. Nothing * was broken; it just read as two components from two different products * bolted to the same edge. Measured, then matched. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked #etSupportChatTitle { font-size: 0.9375rem !important; } } @media (min-width: 1200px) { /* html prefix: admin-chat-popup.css sizes these from `html body.et-app-shell …` and a plain body selector lost to it, leaving 40px next to Kestrel's 36. */ html body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked .et-support-chat__header-action, html body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked .et-support-chat__minimize { width: 2.25rem !important; height: 2.25rem !important; /* min-* too: the 40px came from a floor, not from width, so setting width alone changed nothing. */ min-width: 2.25rem !important; min-height: 2.25rem !important; flex: 0 0 auto !important; color: rgba(255, 255, 255, 0.94) !important; } } @media (min-width: 1200px) { /* Square, like every other panel's header icon (24 Sep 2026). This rounded it only while docked, which is the state the owner is looking at when they ask why Support has a circle and nothing else does. */ body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat.et-support-chat--docked .et-support-chat__avatar { border-radius: 0 !important; overflow: hidden !important; } } @media (max-width: 1199.98px) { html body:is(.et-app-shell, .et-public-site) #etSupportChatLayout { display: none !important; } } html body:is(.et-app-shell, .et-public-site):is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header { background: transparent !important; background-color: transparent !important; padding: 0.7rem 0.9rem 0.55rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; border-bottom-color: rgba(255, 255, 255, 0.06) !important; min-height: 0 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header { box-sizing: border-box !important; height: 3.5rem !important; min-height: 3.5rem !important; max-height: 3.5rem !important; padding: 0 0.9rem !important; align-items: center !important; overflow: hidden !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header :is(strong, h2, span) { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; min-width: 0 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header .et-support-chat__header-actions { flex: 0 1 auto !important; flex-wrap: nowrap !important; min-width: 0 !important; } /* And the title keeps a floor, so there is always a name on the panel. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header .et-support-chat__heading { flex: 1 1 auto !important; min-width: 5rem !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header) { display: flex !important; align-items: center !important; gap: 0.6rem !important; height: 3.5rem !important; min-height: 3.5rem !important; max-height: 3.5rem !important; padding: 0 0.9rem !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; box-sizing: border-box !important; flex: 0 0 auto !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header .et-support-chat__avatar) { flex: 0 0 auto !important; width: 1.75rem !important; height: 1.75rem !important; min-width: 1.75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.9375rem !important; margin: 0 !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header .et-support-chat__heading) { flex: 1 1 auto !important; min-width: 0 !important; display: block !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatTitle) { display: block !important; margin: 0 !important; font-size: 0.9375rem !important; font-weight: 600 !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: normal !important; color: var(--et-text-primary, #fafafa) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatStatus) { display: block !important; margin: 0 !important; font-size: 0.75rem !important; font-weight: 400 !important; line-height: 1.35 !important; color: var(--et-text-muted, rgba(250, 250, 250, 0.6)) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header .et-support-chat__header-action, .et-support-chat__header .et-support-chat__minimize) { flex: 0 0 auto !important; width: 2.25rem !important; height: 2.25rem !important; min-width: 2.25rem !important; min-height: 2.25rem !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.9375rem !important; background: transparent !important; border: 0 !important; border-radius: 6px !important; color: var(--et-text-muted, rgba(250, 250, 250, 0.6)) !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header .et-support-chat__header-action, .et-support-chat__header .et-support-chat__minimize):hover { background: rgba(255, 255, 255, 0.08) !important; color: var(--et-text-primary, #fafafa) !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header .et-support-chat__header-actions) { flex: 0 0 auto !important; display: flex !important; align-items: center !important; gap: 0.15rem !important; margin-left: auto !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatConversation, #etSupportChatForm) { background: transparent !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header) { flex-wrap: nowrap !important; overflow: hidden !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header .et-support-chat__header-actions) { flex-wrap: nowrap !important; } /* * A header's title is not optional, and its actions may not leave the panel. * * Support's admin build puts five thread actions — mark read, erase, delete, * resolve, email — beside the panel's own two. Seven 2.25rem squares want * 343px; the docked panel is 320px. The action group was `flex: 0 0 auto`, so * it took all of it: measured, the title and the customer's email were * squeezed to *zero* width and the icons ran 85px past the right edge of the * panel, over the column beside it. That is the "mangled and smushed" header. * * So the priorities swap. The copy keeps a floor and always shows something. * The action group is allowed to shrink and scrolls what will not fit — no * action is taken away, which matters because these are the only controls for * resolving and closing a conversation. The two that belong to the panel * rather than to the thread stay pinned at the right edge, so "dock this" and * "minimise this" are always where they are on the other four panels. */ html body:is(.et-app-shell, .et-public-site) .et-support-chat__header .et-support-chat__heading { flex: 1 1 auto !important; min-width: 5rem !important; } html body:is(.et-app-shell, .et-public-site) .et-support-chat__header .et-support-chat__header-actions { flex: 0 1 auto !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; position: relative !important; } html body:is(.et-app-shell, .et-public-site) .et-support-chat__header .et-support-chat__header-actions::-webkit-scrollbar { display: none !important; } html body:is(.et-app-shell, .et-public-site) .et-support-chat__header :is(#etSupportChatLayout, #etSupportChatMinimize) { position: sticky !important; right: 0 !important; z-index: 2 !important; background: #000 !important; } html body:is(.et-app-shell, .et-public-site) .et-support-chat__header #etSupportChatLayout { right: 2.25rem !important; } /* Support: flat surfaces, and the composer sized like Kestrel's. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat :is( .et-support-chat__conversation, .et-support-chat__composer, .et-support-chat__body, .et-support-chat__inbox, .et-support-chat__tabs ) { background: transparent !important; border-left: 0 !important; border-right: 0 !important; } html body:is(.et-app-shell, .et-public-site).et-support-layout-sidebar #etSupportChat .et-support-chat__tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header) button :is(i, svg) { font-size: 0.9375rem !important; width: auto !important; height: auto !important; line-height: 1 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChatPanel .et-support-chat__header button :is(i, svg) { font-size: 0.9375rem !important; width: auto !important; height: auto !important; min-width: 0 !important; line-height: 1 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChatPanel#etSupportChatPanel .et-support-chat__header button :is(i, svg) { font-size: 0.9375rem !important; width: auto !important; height: auto !important; line-height: 1 !important; } html body:is(.et-app-shell, .et-public-site) :is(.et-support-chat__header .et-support-chat__avatar) > :is(i, svg) { font-size: 0.9375rem !important; width: auto !important; height: auto !important; line-height: 1 !important; } /* * Support's avatar icon, with enough ids to win. * * The rule above did not reach it: `body.et-app-shell #etSupportChat * .et-support-chat__avatar i` carries `font-size: 1.375rem !important` (22px) * and an id, so a class-only selector loses however many classes it stacks — * the header-action icons are already handled this way, doubling * #etSupportChatPanel. Same idiom here, so the leading glyph is 15px like the * other four panels'. */ html body:is(.et-app-shell, .et-public-site) #etSupportChatPanel#etSupportChatPanel .et-support-chat__header .et-support-chat__avatar > :is(i, svg) { font-size: 0.9375rem !important; width: auto !important; height: auto !important; line-height: 1 !important; } /* ── Support's header icon, bare like every other panel's ────────────────── * * Measured: a teal disc at 14% with a 50% radius, the only panel header still * carrying one after the Outline's was removed. Scoped to the header — the * thread list's avatars are filled tiles on purpose and keep their colour. */ html body:is(.et-app-shell, .et-public-site) .et-support-chat__header .et-support-chat__avatar { background: none !important; border-radius: 0 !important; width: 1.75rem !important; height: 1.75rem !important; flex: 0 0 1.75rem !important; color: var(--et-text-secondary, #a1a1aa) !important; font-size: 0.9375rem !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatPanel .et-support-chat__title, #etSupportChatPanel .et-support-chat__head strong) { font-size: var(--et-t-title) !important; font-weight: 600 !important; line-height: var(--et-t-lh-tight) !important; letter-spacing: 0 !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatPanel .et-support-chat__status) { font-size: var(--et-t-small) !important; font-weight: 400 !important; line-height: var(--et-t-lh-ui) !important; letter-spacing: 0 !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatPanel .et-support-chat__empty > strong) { font-size: var(--et-t-title) !important; font-weight: 600 !important; line-height: var(--et-t-lh-tight) !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatPanel .et-support-chat__empty > p) { font-size: var(--et-t-row) !important; font-weight: 400 !important; line-height: var(--et-t-lh-read) !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChatPanel .et-support-chat__bubble { font-size: var(--et-t-body) !important; line-height: var(--et-t-lh-read) !important; letter-spacing: 0 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChatPanel .et-support-chat__message-meta { font-size: var(--et-t-micro) !important; font-weight: 650 !important; letter-spacing: var(--et-t-track-caps) !important; text-transform: uppercase !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatInput) { font-size: var(--et-t-body) !important; line-height: var(--et-t-lh-read) !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatPanel .et-support-chat__starter) { font-size: var(--et-t-row) !important; font-weight: 500 !important; line-height: var(--et-t-lh-ui) !important; letter-spacing: 0 !important; } html body:is(.et-app-shell, .et-public-site) :is(#etSupportChatStatus) { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; overflow: hidden !important; text-overflow: clip !important; } /* ── "More actions": the header's overflow, as a menu (26 Sep 2026) ──────── support-chat.js moves the thread's own actions (mark read, erase, delete, resolve, email) in here when the header row cannot hold them — a thread open in the docked sidebar — so none is covered by the title or by the panel's window/minimise pair. Labelled rows, the studio's flat menu. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat .et-support-chat__header #etSupportChatMore:not([hidden]) { display: inline-flex !important; position: static !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMore.is-active { background: rgba(250, 250, 250, 0.07) !important; color: var(--et-text-primary, #fafafa) !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMoreMenu:not([hidden]) { position: absolute !important; top: var(--et-sc-more-top, 3.25rem) !important; right: 0.5rem !important; left: auto !important; z-index: 40 !important; display: flex !important; flex-direction: column !important; min-width: 13.5rem !important; margin: 0 !important; padding: 0.25rem 0 !important; background: #000 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 0 !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMoreMenu > button { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0.65rem !important; position: static !important; width: 100% !important; min-width: 0 !important; height: 2.25rem !important; min-height: 2.25rem !important; margin: 0 !important; padding: 0 0.85rem !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--et-text-secondary, #d4d4d8) !important; font-size: 0.8125rem !important; font-weight: 500 !important; text-align: left !important; white-space: nowrap !important; opacity: 1 !important; cursor: pointer; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMoreMenu > button[hidden] { display: none !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMoreMenu > button:is(:hover, :focus-visible) { background: rgba(250, 250, 250, 0.07) !important; color: var(--et-text-primary, #fafafa) !important; outline: none !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMoreMenu > button.et-support-chat__header-action--danger { color: #f87171 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMoreMenu > button.et-support-chat__header-action--danger:is(:hover, :focus-visible) { background: rgba(248, 113, 113, 0.1) !important; color: #fca5a5 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMoreMenu > button i { width: 1rem !important; margin: 0 !important; font-size: 0.875rem !important; color: inherit !important; text-align: center !important; } /* The row's labels are for screen readers; in the menu they are the label. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat #etSupportChatMoreMenu > button .visually-hidden { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: nowrap !important; border: 0 !important; } /* * The header's buttons never shrink; the title does (26 Sep 2026, second * screenshot from the owner — "still messed up with icons being covered up"). * * The group was `flex: 0 1 auto` with overflow hidden, and a flex item shrinks * in proportion to its natural width. A guest's subtitle — "Guest visitor · * Story X-ray — Free Online Tool for Fiction | Entangled Text" — made the * heading's natural width ~450px, so the group gave up most of its 108px and * clipped More and the window button to a sliver even after the thread's * actions had folded away. Measured with that subtitle at 1600 on the wizard * and the account pages: More and window both covered. * * Now the group keeps its width, the heading gives way (its title and subtitle * already ellipsis) down to its 5rem floor, and a row that still does not fit * spills past the header's right edge — which is exactly what the More menu in * support-chat.js looks for, so it folds. Three ids: the docked-admin rules * this overrides carry one id and five classes. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat#etSupportChat .et-support-chat__header .et-support-chat__header-actions { flex: 0 0 auto !important; min-width: max-content !important; overflow: visible !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat#etSupportChat .et-support-chat__header .et-support-chat__heading { flex: 1 1 0% !important; min-width: 5rem !important; overflow: hidden !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat#etSupportChat .et-support-chat__header .et-support-chat__heading > :is(strong, span) { display: block !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Nothing scrolls under them any more, so window and minimise need not be pinned over the row. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat#etSupportChat .et-support-chat__header :is(#etSupportChatLayout, #etSupportChatMinimize, #etSupportChatMore) { position: static !important; } /* At its narrowest (the resizer's 260px floor) back, avatar, a 5rem title and three buttons want ~300px, and minimise fell off the edge. Under 300px the avatar — a decoration, the title already says who this is — steps aside and the title's floor drops to 4rem. The header is its own size container so this follows the panel, docked or windowed, not the screen. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat#etSupportChat .et-support-chat__header { container: et-sc-head / inline-size; } @container et-sc-head (max-width: 300px) { html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat#etSupportChat .et-support-chat__header .et-support-chat__avatar { display: none !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat#etSupportChat#etSupportChat .et-support-chat__header .et-support-chat__heading { min-width: 4rem !important; } } /* Each message's text sits on the editor's grey (#etWsDocCanvas, #0c0c0e), the log between messages stays black. Owner, 26 Sep 2026: "only around the text" — an earlier pass greyed the whole list and was wrong. Kestrel's turns match (kestrel-panel.css). */ html body:is(.et-app-shell, .et-public-site) #etSupportChatPanel .et-support-chat__bubble { background-color: #0c0c0e !important; } /* Replies as wide as the input box (owner, 26 Sep 2026). The list's side padding matches the composer's 0.75rem, and the admin's delete button floats over the reply's top-right corner (it only shows on hover) instead of taking the last 32px of the row, which left every reply narrower than the box. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__messages { padding-left: 0.75rem !important; padding-right: 0.75rem !important; } /* Docked as a sidebar, the replies take the column's whole width (owner, 26 Sep 2026: "make the area with the responses be 100% of the width of the sidebar"). The floating window keeps the inset above. Kestrel's column does the same in kestrel-panel.css. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat.et-support-chat--docked .et-support-chat__messages { padding-left: 0 !important; padding-right: 0 !important; } /* …and so does the input box, as Kestrel's does: every sidebar's content is the column's full width, so the gutters between columns are all equal (owner, 26 Sep 2026; kestrel-popup.css "GUTTERS"). */ html body:is(.et-app-shell, .et-public-site) #etSupportChat.et-support-chat--docked .et-support-chat__composer { padding-left: 0 !important; padding-right: 0 !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__message-row { position: relative; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__message-row > .et-support-chat__msg-delete { position: absolute; top: 0.15rem; right: 0.15rem; z-index: 1; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__message-row:has(> .et-support-chat__msg-delete) > .et-support-chat__bubble { padding-right: 2.25rem !important; } /* Names as Kestrel's chat colours them (kestrel-panel.css .et-kestrel-msg__who): Kestrel teal, the person lavender; the time stays muted. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__who[data-who="kestrel"] { color: color-mix(in srgb, var(--et-ws-artifact-accent, var(--et-acc-teal, #2dd4bf)) 72%, #9ca3af) !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__who[data-who="person"] { color: color-mix(in srgb, var(--et-acc-violet, #bca9ff) 78%, #9ca3af) !important; } /* The face on the name line, as Kestrel's chat draws it (kestrel-panel.css .et-kestrel-msg__meta / __avatar): 28px beside the name, 0.4rem apart; her picture and a person's photo round, an initial on a lavender-tinted square (owner, 26 Sep 2026). The face used to sit beside the bubble and was hidden for the width it took; on the name line it takes none. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__message-meta { display: flex !important; align-items: center !important; gap: 0.4rem !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__message-meta > .et-support-chat__msg-avatar { display: inline-flex !important; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px !important; height: 28px !important; min-width: 28px; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 0 !important; border-radius: 0 !important; background: color-mix(in srgb, var(--et-acc-violet, #bca9ff) 26%, #1a1a22) !important; color: var(--et-text-primary, #f4f4f5) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1 !important; text-transform: none !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__message-meta > .et-support-chat__msg-avatar:has(> img) { background: transparent !important; border-radius: 50% !important; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__message-meta > .et-support-chat__msg-avatar > img { display: block !important; width: 28px !important; height: 28px !important; max-width: none !important; border-radius: 50% !important; object-fit: cover; } /* The scrollbar's track is the column's black, not a grey strip down the right of the conversation (Support, as Kestrel) (owner, 26 Sep 2026: "between replies there is a grey bar on the right. i want it to be black"). A browser that shows classic scrollbars drew the default grey track wherever nothing set one — every page but Write — and Safari ignores scrollbar-color, so Write too. Both dialects: scrollbar-color for Chrome and Firefox, ::-webkit-scrollbar for Safari (Chrome skips it once scrollbar-color is set). */ html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__messages { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__messages::-webkit-scrollbar { width: 8px; background: transparent; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__messages::-webkit-scrollbar-track { background: transparent; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 0; } html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__messages::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); } /* * Docked open, Support's launcher is not part of the column (27 Sep 2026). * * Owner, on a new Free account at story-wizard.php?onboarding=1: "the chat * input is cut off and the header is not level and even with the header of * the other sidebars". The launcher (.et-support-chat__dock: "Support" and * its ×) is moved into the page's footer bar by support-footer-dock.js; the * wizard's welcome step has no footer bar, so it stayed inside #etSupportChat * as a 40px row above the panel. Measured: the header at y=40 beside * Kestrel's at 0, and the composer ending at 928 in a 900px window. * * While the column is docked (open), the panel's own header carries minimise, * so a launcher still inside the column is hidden. Minimised, Support is no * longer docked and the launcher is back — the way to open it again. */ html body #etSupportChat#etSupportChat.et-support-chat--docked > .et-support-chat__dock { display: none !important; } /* * A header action the widget has hidden stays hidden (27 Sep 2026). * * The rule above gives every header action `display: inline-flex !important`, * which outranks `[hidden]` (CoreUI's is `display: none !important` on the bare * attribute, one attribute of weight). support-chat.js hides mark-read, erase, * delete, resolve and email until a thread is open — and they showed anyway: * five dead 36px buttons in the admin header with nothing selected, pushing * the window and minimise buttons past the panel's right edge (measured on * /admin with Support docked at 352px: Layout at x=1620, Minimise at 1658, on * a 1600px screen). One id, so it outranks the rule above on every surface. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__header :is(.et-support-chat__header-action, .et-support-chat__minimize)[hidden] { display: none !important; } /* ── The transcript checkbox's label is Support's, on every page (27 Sep 2026) Owner: "make sure admin support chat have the same source of truth". Docked into a page's grid, Support sits inside #et-main-content, so a page's own form styles reached its one : dashboard-page-system.css (`body.et-page-projects #et-main-content label`, 15px !important) and dashboard-write-align.css (600) made "End chat and email a transcript" 15px white bold on All books and 12px grey on admin, and the composer 4px taller on one than the other. Stated here once, above any page's label. */ html body:is(.et-app-shell, .et-public-site) #etSupportChat .et-support-chat__end-email { font-size: 0.75rem !important; font-weight: 500 !important; line-height: 1.35 !important; color: var(--sc-muted, #a1a1aa) !important; letter-spacing: normal !important; text-transform: none !important; } /* ══════════════════════════════════════════════════════════════════════════ The window, stated once. Owner, 27 Sep 2026, having asked before: "the sidebar and window for support chat non admin and admin versions of it should be the same on all pages." Measured on Import, Translate, the dashboard home, Library and Account, in both layouts, as the owner and as an ordinary author: across pages the panel was already identical for a given role, so the thing that had never matched was the role. kestrel-popup.css carried this chrome behind `#etSupportChat:not(.et-support-chat--admin)` and three page classes (.et-page-story-wizard, .et-page-write.et-ship-mode, .et-dash-home-studio), so the author's window had a 1px border and a two-layer shadow while the admin's fell through to studio-flat's `border: 0` and single heavy shadow. Here it names no page and no role. Placement still belongs to whoever docks the panel — the sidebar-layout rules later in kestrel-popup.css set position and size for that layout and still win, which is the split this sheet has always drawn: look here, placement per surface. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 992px) { html body.et-app-shell #etSupportChat .et-support-chat__panel, html body.et-app-shell #etSupportChat #etSupportChatPanel { width: var(--et-popup-w, min(560px, calc(100vw - 32px))) !important; max-width: var(--et-popup-w, min(560px, calc(100vw - 32px))) !important; height: var(--et-popup-h, min(800px, calc(100vh - 6.25rem))) !important; max-height: var(--et-popup-h, min(800px, calc(100vh - 6.25rem))) !important; background: #000 !important; border: 1px solid var(--et-popup-line, rgba(255, 255, 255, 0.14)) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.45) !important; transform: none !important; } } /* * Docked, Support is a column and wants no frame of its own. * * A window draws a 1px line because that is what makes it read as a window * rather than a hole in the page; a column's neighbour already supplies the * hairline, which is how Kestrel has always looked. kestrel-popup.css says * exactly this, but says it as `body.et-page-write.et-support-layout-sidebar` * — so Write's docked Support lost its border and everyone else's kept one in * the same layout. Both halves of the rule are page-agnostic now: window gets * the frame above, sidebar drops it here. * * Doubled id to beat the window rule above, which is itself !important with an * id — the #sidebar#sidebar idiom this studio already uses. */ html body.et-app-shell.et-support-layout-sidebar #etSupportChatPanel#etSupportChatPanel, html body.et-app-shell #etSupportChat.et-support-chat--docked #etSupportChatPanel#etSupportChatPanel { border: 0 !important; }