/* One appearance contract for the chat, owned templates and Site Options.
   Frame bevels are independent of the gradient BUTTON flag. No geometry in
   gradient selectors: toggling it cannot move or resize any control. */
html[lang] body[data-view][data-original-theme] {
  --bg:var(--original-outerBackground); --surface:var(--original-innerBackground);
  --fg:var(--original-innerText); --text:var(--original-innerText);
  --line:var(--original-frame-shadow); --soft:var(--original-tabsBackground);
  --muted:var(--original-innerText); --accent:var(--original-tabsBackground);
  --theme-window:var(--original-outerBackground); --theme-pane:var(--original-tabsBackground);
  color:var(--original-outerText);
}
html[lang] body[data-view][data-original-theme] :is(.classic-chat-page,.classic-caption,.classic-window-status,.pm-window,.pm-internal-window,dialog) {
  border-radius:0;
}
html[lang] body[data-view][data-original-theme] .classic-chat-page {
  background-color:var(--original-outerBackground); color:var(--original-outerText);
}
html[lang] body[data-view][data-original-theme] :is(.chat-layout,.pm-window,.admin-layout) {
  background-color:var(--original-innerBackground); color:var(--original-innerText);
  border-color:var(--original-frame-edge);
  box-shadow:inset 1px 1px var(--original-frame-light),inset -1px -1px var(--original-frame-shadow);
}
html[lang] body[data-view][data-original-theme] .chat-layout { border-radius:var(--original-corners); }
html[lang] body[data-view][data-original-theme] :is(.people-sidebar,.classic-buddies,.client-user-tools,.room-tools,.classic-settings-panel,.legacy-insert-body,.offline-compose-body) {
  background-color:var(--original-tabsBackground); color:var(--original-tabsText);
  border-color:var(--original-frame-shadow); border-radius:var(--original-corners);
}
html[lang] body[data-view][data-original-theme] .people-sidebar { overflow:hidden; }
html[lang] body[data-view][data-original-theme] :is(.chat-room-heading,.chat-room-heading p,.classic-event-log) {
  background-color:var(--original-normalBackground); color:var(--original-normalText);
  border-color:var(--original-frame-shadow);
}
/* Continue the public scrollbar track beside the room welcome heading. */
html[lang] body.chat-client[data-view][data-original-theme] .chat-room-heading {
  border-right-color:#eee;
}
html[lang] body[data-view][data-original-theme] :is(.messages,.pm-history) {
  border-color:var(--original-frame-shadow); border-radius:var(--original-corners);
}
html[lang] body[data-view][data-original-theme] .messages { background-color:var(--reading-background,var(--original-normalBackground)); }
html[lang] body[data-view][data-original-theme] .pm-history { background-color:var(--reading-privateBackground,var(--original-privateBackground)); }
html[lang] body[data-view][data-original-theme] :is(.composer,.pm-composer) {
  background-color:var(--original-innerBackground); color:var(--original-innerText);
}
html[lang] body[data-view][data-original-theme] :is(.composer textarea,.pm-composer textarea) {
  color:var(--original-inputText); background-color:var(--original-inputBackground);
  border-color:var(--original-control-light) var(--original-frame-shadow) var(--original-frame-shadow) var(--original-control-light);
}
html[lang] body[data-view][data-original-theme] :is(.banner,.footer-note,.classic-help-bar) {
  color:var(--original-helpText); background-color:var(--original-helpBackground);
  border-color:var(--original-frame-shadow); border-radius:var(--original-corners);
}
html[lang] body[data-view][data-original-theme] :is(dialog.modal,dialog.global-admin-dialog,dialog.legacy-insert-dialog,dialog.offline-compose-dialog,dialog.original-theme-editor) {
  color:var(--original-outerText); background:var(--original-outerBackground);
  border-color:var(--original-frame-light) var(--original-frame-edge) var(--original-frame-edge) var(--original-frame-light);
}
html[lang] body[data-view][data-original-theme] :is(dialog.modal > .dialog-head,dialog.global-admin-dialog > .global-native-caption,.pm-caption,dialog > h2) {
  color:var(--original-controlText);
  background:linear-gradient(var(--original-control-light),var(--original-controlBackground) 55%,var(--original-control-shadow));
  border-color:var(--original-frame-shadow);
}
html[lang] body[data-view][data-original-theme] :is(dialog.modal .dialog-head h2,dialog.global-admin-dialog .global-native-caption span) { color:inherit; }
html[lang] body[data-view][data-original-theme] :is(.modal > form,.modal > .dialog-content,.original-theme-form [role=tabpanel],.global-logs-pane,.global-calendar,.global-password-fields,.offline-compose-body,.offline-compose-panel,.offline-inbox,.legacy-insert-body,.classic-settings-panel,.classic-tabs-panel) {
  color:var(--original-tabsText); background-color:var(--original-tabsBackground);
  border-color:var(--original-frame-shadow); border-radius:var(--original-corners);
}
html[lang] body[data-view][data-original-theme] :is(.classic-all-users,.classic-room-tools) { color:var(--original-tabsText); }
html[lang] body[data-view][data-original-theme] :is(.classic-list-heading,.classic-room-columns,.classic-room-columns span,.classic-record-list th) {
  color:var(--original-controlText); background-color:var(--original-controlBackground);
  border-color:var(--original-frame-shadow);
}
html[lang] body.chat-client[data-view][data-original-theme] .classic-list-heading {
  background-color:var(--original-searchBackground);
}
html[lang] body[data-view][data-original-theme] :is(dialog h2,.legacy-shortcut-heading,.legacy-shortcut-list) { border-color:var(--original-frame-shadow); }
html[lang] body[data-view][data-original-theme] .legacy-shortcut-heading { color:var(--original-controlText); background-color:var(--original-controlBackground); }
html[lang] body[data-view][data-original-theme] .legacy-shortcut-list { color:var(--original-inputText); background-color:var(--original-inputBackground); }
html[lang] body[data-view][data-original-theme] .legacy-shortcut-list [aria-selected=true] { color:var(--original-highlightText); background-color:var(--original-highlightBackground); }
html[lang] body[data-view][data-original-theme] .people-sidebar .list {
  color:var(--original-tabsText); background-color:var(--original-scrollText);
  border-color:var(--original-frame-shadow); border-radius:0 0 var(--original-corners) var(--original-corners);
}
html[lang] body[data-view][data-original-theme] .people-sidebar .list-item {
  color:var(--original-tabsText); background-color:var(--original-scrollText);
}
html[lang] body[data-view][data-original-theme] .people-sidebar .list-item.active {
  color:var(--original-highlightText); background-color:var(--original-highlightBackground);
}
html[lang] body[data-view][data-original-theme]:not([data-original-menu-colors]) :is(.classic-menu,.classic-status-menu,.classic-user-popup,.classic-menubar,.classic-menubar > button,.classic-menu button,.classic-status-menu button,.classic-user-popup button) {
  color:var(--original-controlText); background-color:var(--original-controlBackground);
  border-color:var(--original-frame-shadow);
}
/* The Site Options trapezoid artwork is structural, not a skin image button. */
html[lang] body[data-view][data-original-theme].site-options-draft-document .classic-tabs {
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 21px,var(--original-frame-edge) 21px,var(--original-frame-edge) 22px,var(--original-frame-light) 22px,var(--original-frame-light) 23px,transparent 23px,transparent 27px);
}
html[lang] body[data-view][data-original-theme].site-options-draft-document .classic-tabs button {
  background:transparent; box-shadow:none; color:var(--original-tabsText);
}
html[lang] body[data-view][data-original-theme].site-options-draft-document .options-tab-base { stroke:var(--original-frame-edge); }
html[lang] body[data-view][data-original-theme].site-options-draft-document .active .options-tab-base { stroke:var(--original-tabsBackground); }
html[lang] body[data-view][data-original-theme] .classic-tabs button.active { color:var(--original-tabsText); }
html[lang] body[data-view][data-original-theme] :is(.sidebar-tabs,.classic-tabs,[role=tablist]) {
  color:var(--original-tabsText); background-color:var(--original-tabsBackground);
}
html[lang] body.chat-client[data-view="chat"][data-original-theme] .sidebar-tabs {
  background-color:var(--original-innerBackground);
}
html[lang] body[data-view][data-original-theme] :is(.sidebar-tabs,.classic-tabs,[role=tablist]) button:not([data-original-tab]) {
  color:var(--original-tabsText); background:var(--original-tabs-inactive);
  border-color:var(--original-frame-light) var(--original-frame-shadow) var(--original-frame-shadow) var(--original-frame-light);
}
html[lang] body[data-view][data-original-theme] :is(.sidebar-tabs,.classic-tabs,[role=tablist]) button[aria-selected=true]:not([data-original-tab]) {
  background:var(--original-tabsBackground);
}
/* Exclude rows, palettes, menus and artwork; they have their own state colors. */
html[lang] body[data-view][data-original-theme] button:not([data-original-button],[data-original-tab],.list-item,.buddy-row,[role=tab]):not(.classic-menu button,.classic-user-popup button,.classic-status-menu button,.classic-menubar > button,.classic-window-controls button,.user-profile-room,.legacy-emoticon-grid button,.global-calendar-grid button) {
  color:var(--original-controlText); background-color:var(--original-controlBackground); background-image:none;
  border-color:var(--original-control-light) var(--original-frame-shadow) var(--original-frame-shadow) var(--original-control-light);
  box-shadow:inset 1px 1px var(--original-control-light),inset -1px -1px var(--original-control-shadow);
}
html[lang] body[data-view][data-original-theme][data-original-gradient] button:not([data-original-button],[data-original-tab],.list-item,.buddy-row,[role=tab]):not(.classic-menu button,.classic-user-popup button,.classic-status-menu button,.classic-menubar > button,.classic-window-controls button,.user-profile-room,.legacy-emoticon-grid button,.global-calendar-grid button) {
  background-image:linear-gradient(var(--original-control-light),var(--original-controlBackground) 55%,var(--original-control-shadow));
}
html[lang] body[data-view][data-original-theme] :is(.pm-caption,.dialog-head,.global-native-caption) button {
  border-radius:2px;
}
html[lang] body[data-view][data-original-theme] :is(select,input:not([type=checkbox],[type=radio],[type=color],[type=search]),dialog textarea):not(.composer textarea,.pm-composer textarea,.theme-color-picker input) {
  color:var(--original-inputText); background-color:var(--original-inputBackground);
  border-color:var(--original-frame-shadow);
}
html[lang] body[data-view][data-original-theme] :is(.classic-record-list,.classic-list,.global-calendar-grid) {
  border-color:var(--original-frame-shadow);
}
html[lang] body[data-view][data-original-theme] .global-calendar-grid button {
  color:var(--original-controlText); background:var(--original-controlBackground);
  border-color:var(--original-frame-shadow);
}
html[lang] body[data-view][data-original-theme] .global-calendar-grid button[aria-pressed=true] {
  color:var(--original-highlightText); background:var(--original-highlightBackground);
}
html[lang] body[data-view][data-original-theme]:not(.theme-preview) button:disabled:not([data-original-button]) {
  color:color-mix(in srgb,var(--original-controlText) 45%,var(--original-controlBackground)); cursor:default;
}
html[lang] body[data-view][data-original-theme] :is(.legacy-styles-panel,.classic-user-icons) button[aria-pressed=true]:not([data-original-button]) {
  background:var(--original-control-shadow); border-style:inset;
  box-shadow:inset 1px 1px var(--original-frame-shadow);
}

/* Public messages retain two 14px text lines and a 4px pale separator.
   Keep the site's fonts, message colors, backgrounds and sender styles. */
html[lang] body.chat-client[data-view="chat"] #messages > .message {
  min-height:32px; padding:0; margin:0; gap:6px;
  font-size:12px; line-height:14px;
  border:0; border-top:4px solid #f4f2f3; box-shadow:none;
}
html[lang] body.chat-client[data-view="chat"] #messages > .message > img {
  width:24px; height:24px; flex:0 0 24px; margin:2px 0 0;
}
/* Match the current #people sidebar avatars below; let avatar/text set height. */
html[lang] body.chat-client[data-view="chat"] #messages > .message:not(.private-notification):has(> img) {
  min-height:0; padding:2px 0;
}
html[lang] body.chat-client[data-view="chat"] #messages > .message:not(.private-notification) > img {
  width:35px; height:35px; flex:0 0 35px; margin:0; align-self:flex-start;
}
html[lang] body.chat-client[data-view="chat"] #messages > .message :is(.byline,.content) {
  font-size:12px; line-height:14px;
}
/* Fit the existing 35px avatars and nickname backgrounds below the 4px
   separator, retaining all configured row/nickname colors. */
html[lang] body.chat-client[data-view="chat"] .people-sidebar #people > .list-item {
  width:100%; height:39px; min-height:39px; max-height:39px;
  padding:4px 3px 0; margin:0; align-items:center; flex-wrap:nowrap;
  box-shadow:inset 0 4px 0 #f4f2f3;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar #people > .list-item > .avatar {
  width:35px; height:35px; flex:0 0 35px;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar #people > .list-item .nickname-label {
  display:block; height:35px; line-height:35px;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar #people > .list-item :is(.user-star,.rank,small) {
  flex-shrink:0;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar #people > .list-item small {
  margin-top:0; align-items:center;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar #people > .list-item.state-overlay .status-icon {
  left:26px;
}
/* Hi-Chat room proportions: give the larger names a compact, centered
   panel. Retain the separator and all row/name/count color assignments. */
html[lang] body.chat-client[data-view="chat"] .people-sidebar #rooms > .classic-room-row {
  height:21px; min-height:21px; padding:0; margin:0;
  border:0; border-top:1px solid #ffffff80; box-shadow:none;
}
/* Room names only; visitor typography and the shared column grid stay intact. */
html[lang] body.chat-client[data-view="chat"] #rooms .room-name {
  font-size:14px; line-height:18px; min-width:0;
}
/* Room palettes are inline; selection must temporarily take precedence. */
html[lang] body.chat-client[data-view="chat"][data-original-theme] #rooms > .classic-room-row.active {
  background-color:var(--original-highlightBackground) !important;
  color:var(--original-highlightText) !important;
  outline:1px solid var(--original-highlightText); outline-offset:-1px;
}
html[lang] body.chat-client[data-view="chat"][data-original-theme] #rooms > .classic-room-row.active > :is(.room-name,.room-count) {
  color:var(--original-highlightText) !important;
}
/* 03.jpg: physical left avatar column, naturally ordered Arabic aligned
   to the left, independent of the main interface language. */
html[lang] body[data-view="private"] .pm-history { direction:ltr; }
html[lang] body[data-view="private"] .pm-history > .pm-message {
  grid-template-columns:24px minmax(0,1fr); column-gap:6px;
  min-height:36px; padding:4px 3px; margin:0;
  font-size:12px; line-height:14px; direction:ltr; text-align:left;
}
html[lang] body[data-view="private"] .pm-message > .pm-avatar {
  grid-column:1; grid-row:1 / 3; width:24px; height:24px;
}
html[lang] body[data-view="private"] .pm-message > :is(.byline,.content) {
  grid-column:2; display:block; text-align:left; font-size:12px; line-height:14px;
}
html[lang] body[data-view="private"] .pm-message > .byline { grid-row:1; }
html[lang] body[data-view="private"] .pm-message > .content {
  grid-row:2; unicode-bidi:plaintext;
}
html[lang] body[data-view="private"] .pm-message .byline > .user-star {
  width:auto; height:auto; max-width:24px; max-height:24px;
  vertical-align:middle; margin-right:4px;
}
html[lang] body[data-view="private"] .pm-composer textarea {
  text-align:left; unicode-bidi:plaintext;
}
/* The area behind the bottom chat controls uses the inner background color. */
html[lang] body.chat-client[data-view][data-original-theme] .sidebar-bottom {
  background-color:var(--original-innerBackground);
}

/* 02.jpg sidebar geometry, retaining the configured theme.
   Extend only this row into the page's right gutter: 3px to the inner window
   boundary, independently of the 9px gap beside the public conversation. */
html[lang] body.chat-client[data-view="chat"] .chat-layout {
  grid-template-columns:minmax(0,1fr) 196px;
  gap:9px;
  padding:6px 2px 6px 10px;
  margin:1px -9px 0 4px;
  max-height:calc(100dvh - 141px);
}
html[lang] body.chat-client[data-view="chat"] .chat-main {
  height:100%;
  grid-template-rows:32px minmax(0,1fr) 57px;
}
/* The default compact layout already omits the room heading. Other selected
   themes retain their existing heading and reserve its existing 32px. */
html[lang] body.chat-client[data-view="chat"][data-chat-theme="hostwega"] .chat-main {
  grid-template-rows:minmax(0,1fr) 57px;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar {
  top:-1px;
  height:calc(100% + 1px);
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar .panel-heading {
  flex:0 0 26px;
  height:26px;
  padding:0;
}
html[lang] body.chat-client[data-view="chat"] .sidebar-tabs {
  width:100%; height:26px; gap:0;
}
html[lang] body.chat-client[data-view="chat"] .sidebar-tabs button {
  height:22px; min-width:0; flex-shrink:1;
  padding:2px 10px;
}
html[lang] body.chat-client[data-view="chat"] #people-tab { width:clamp(70px,38%,105px); }
html[lang] body.chat-client[data-view="chat"] #rooms-tab { width:clamp(48px,24%,67px); }
html[lang] body.chat-client[data-view="chat"] .classic-room-tools {
  flex:0 0 58px; padding:0 6px;
}
html[lang] body.chat-client[data-view="chat"] .classic-room-actions {
  height:40px; padding:7px 0; gap:6px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
html[lang] body.chat-client[data-view="chat"] .classic-room-actions button {
  width:100%; min-width:0; height:26px; border-width:2px; border-radius:2px;
}
/* 01.jpg: one shared name/count grid, followed by the scrollbar corner.
   List borders and native/overlay scrollbars must not shift the count column. */
html[lang] body.chat-client[data-view="chat"] .people-sidebar {
  --classic-room-data-columns:minmax(0,1fr) 28px;
  --classic-room-list-start:2px;
  --classic-room-list-end:2px;
  --classic-room-scrollbar:0px;
  --classic-room-gutter:14px;
}
html[lang] body.chat-client[data-view="chat"] .classic-room-columns {
  height:18px; grid-template-columns:var(--classic-room-data-columns);
  padding-left:var(--classic-room-list-start);
  padding-right:var(--classic-room-gutter);
  box-shadow:inset 0 1px var(--original-frame-shadow),inset 0 -1px var(--original-frame-shadow);
  direction:ltr;
}
html[lang] body.chat-client[data-view="chat"] .classic-room-columns span {
  min-width:0; padding:0; line-height:18px; text-align:left;
  box-shadow:inset 0 1px var(--original-frame-shadow),inset 0 -1px var(--original-frame-shadow);
}
html[lang] body.chat-client[data-view="chat"] .classic-room-columns span:last-child {
  padding-inline:0; font-size:11px; text-align:center;
  border-left:1px solid var(--original-frame-shadow);
  box-shadow:inset 1px 0 var(--original-frame-light),inset 0 1px var(--original-frame-shadow),inset 0 -1px var(--original-frame-shadow);
}
html[lang] body.chat-client[data-view="chat"] .classic-room-columns .classic-room-sort {
  display:flex; align-items:center; width:100%; height:18px; min-height:0;
  margin:0; padding:0 4px; border:0; border-radius:0; box-shadow:none;
  background:transparent; color:inherit; font:inherit; line-height:18px;
  text-align:left; cursor:pointer;
}
html[lang] body.chat-client[data-view="chat"] .classic-room-columns span:last-child .classic-room-sort {
  justify-content:center; padding:0;
}
html[lang] body.chat-client[data-view="chat"] .classic-room-sort img {
  display:block; flex:none; width:16px; height:14px;
}
html[lang] body.chat-client[data-view="chat"] .classic-room-sort:focus-visible {
  outline:1px dotted currentColor; outline-offset:-3px;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar :is(#people,#rooms) {
  width:calc(100% - 12px); margin:0 6px;
}
html[lang] body.chat-client[data-view="chat"] .client-user-tools {
  flex:0 0 auto;
  padding:6px 4px 0;
}
html[lang] body.chat-client[data-view="chat"] .classic-all-users {
  flex:0 0 auto; height:auto; min-height:20px;
  white-space:normal; line-height:14px;
}
html[lang] body.chat-client[data-view="chat"] .classic-all-users input {
  flex:none;
}
html[lang] body.chat-client[data-view="chat"] .classic-list-divider {
  display:block; width:100%; height:22px; min-height:22px;
  margin:0 0 2px; padding:1px 3px;
  border-width:2px; border-radius:0;
}
html[lang] body.chat-client[data-view="chat"] .classic-list-heading {
  position:relative;
  width:calc(100% - 6px); height:26px; min-height:26px;
  margin:2px 3px 0; padding:1px 6px; border-width:2px; border-radius:0;
  text-align:left; line-height:20px;
}
/* The header's raised corner sits over the reserved user scrollbar gutter. */
html[lang] body.chat-client[data-view="chat"] .classic-list-heading::after {
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; width:15px;
  background:var(--original-controlBackground);
  border-left:1px solid var(--original-frame-shadow);
  box-shadow:inset 1px 1px var(--original-control-light),inset -1px -1px var(--original-control-shadow);
  pointer-events:none;
}
/* Inset the Nickname frame independently of the search and Rooms grid. */
html[lang] body.chat-client[data-view="chat"] .people-sidebar #people {
  width:calc(100% - 16px); margin:0 8px 8px;
  scrollbar-gutter:stable;
  border-radius:0;
}
/* Match the Users list inset and bottom termination without changing room
   typography or rows. Keep the separate Rooms header over its list viewport. */
html[lang] body.chat-client[data-view="chat"] .people-sidebar #rooms {
  width:calc(100% - 16px); margin:0 8px 8px;
  scrollbar-gutter:stable;
}
html[lang] body.chat-client[data-view="chat"] .classic-room-columns {
  width:calc(100% - 4px); margin:0 2px;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar #people > .list-item {
  padding-inline:0;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar #rooms > .classic-room-row {
  grid-template-columns:16px var(--classic-room-data-columns);
  padding-right:calc(var(--classic-room-gutter) - var(--classic-room-scrollbar) - var(--classic-room-list-end));
  align-items:center; direction:ltr; text-align:left;
}
html[lang] body.chat-client[data-view="chat"] #rooms > .classic-room-row > .room-count {
  min-width:0; padding-left:6px; text-align:left;
}
html[lang] body.chat-client[data-view="chat"] .room-current {
  position:relative; width:16px; height:18px;
}
html[lang] body.chat-client[data-view="chat"] .room-password-lock {
  display:block; position:absolute; left:0; top:3px;
  width:9px; height:11px;
}
html[lang] body.chat-client[data-view="chat"] .composer {
  height:57px; min-height:0;
  grid-template-columns:minmax(0,1fr) 54px;
  grid-template-rows:46px;
  gap:5px;
  padding:8px 1px 3px 0;
  align-items:start;
}
html[lang] body.chat-client[data-view="chat"] .composer.has-inline-styles {
  grid-template-columns:minmax(0,1fr) 40px 54px;
}
html[lang] body.chat-client[data-view="chat"] .composer :is(input,textarea) { height:46px; }
html[lang] body.chat-client[data-view="chat"] #app .composer .formatting-toolbar {
  display:grid;
  grid-template-columns:25px 25px;
  grid-template-rows:24px 24px;
  gap:2px 4px;
  width:54px; height:50px;
  margin:-4px 0 0;
}
html[lang] body.chat-client[data-view="chat"] #app .composer .formatting-toolbar > button {
  width:25px; height:24px; min-height:0;
  padding:0;
  align-items:center; justify-content:center;
}
html[lang] body.chat-client[data-view="chat"] .formatting-toolbar .legacy-styles-toggle {
  grid-column:1; grid-row:1;
}
html[lang] body.chat-client[data-view="chat"] .formatting-toolbar > button:not(.legacy-styles-toggle,.legacy-shortcuts-button) {
  grid-column:2; grid-row:1;
}
html[lang] body.chat-client[data-view="chat"] .formatting-toolbar .legacy-shortcuts-button {
  grid-column:2; grid-row:2;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar .sidebar-bottom {
  flex:0 0 63px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:22px 26px;
  height:63px; gap:5px 6px;
  padding:10px 6px 0;
}
html[lang] body.chat-client[data-view="chat"] .sidebar-bottom button {
  width:100%; height:22px; min-width:0;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar .sidebar-bottom > :is(.classic-settings-icon, [id="classic-logout"], button[type="submit"]) {
  width:100%; min-width:0; max-width:100%; box-sizing:border-box;
}
html[lang] body.chat-client[data-view="chat"] .sidebar-bottom button[type="submit"] {
  height:26px; border-width:3px; border-style:double; border-radius:4px;
}
/* Preserve a usable public pane in narrow popup windows. */
@media (max-width:640px) {
  html[lang] body.chat-client[data-view="chat"] .chat-layout {
    grid-template-columns:minmax(0,1fr) 170px;
    padding-inline:5px; margin-inline:0; gap:5px;
  }
}
@media (max-width:390px) {
  html[lang] body.chat-client[data-view="chat"] .chat-layout { grid-template-columns:minmax(0,1fr) 146px; }
}

/* Desktop composition: share the footer's outer edges and reserve the same
   lower row for the composer and sidebar actions. Keep narrow windows intact. */
@media (min-width:641px) {
  html[lang] body.chat-client[data-view="chat"] .chat-layout {
    --desktop-controls-height:63px;
    grid-template-columns:minmax(0,1fr) calc(clamp(182px,22%,300px) - 70px);
    margin:1px 0 0;
    padding:6px 10px;
    max-height:none;
  }
  html[lang] body.chat-client[data-view="chat"] .chat-main {
    grid-template-rows:32px minmax(0,1fr) var(--desktop-controls-height);
  }
  html[lang] body.chat-client[data-view="chat"][data-chat-theme="hostwega"] .chat-main {
    grid-template-rows:minmax(0,1fr) var(--desktop-controls-height);
  }
  html[lang] body.chat-client[data-view="chat"] .people-sidebar {
    top:0;
    height:100%;
  }
  html[lang] body.chat-client[data-view="chat"] .composer {
    height:var(--desktop-controls-height);
    padding:11px 0 6px;
  }
  html[lang] body.chat-client[data-view="chat"] #app .composer .formatting-toolbar {
    grid-template-rows:22px 26px;
    height:53px;
    gap:5px 4px;
    margin:-7px 0 0;
  }
  html[lang] body.chat-client[data-view="chat"] #app .composer .formatting-toolbar > button {
    height:22px;
  }
  html[lang] body.chat-client[data-view="chat"] #app .composer .formatting-toolbar > .legacy-shortcuts-button {
    height:26px;
  }
  html[lang] body.chat-client[data-view="chat"] .people-sidebar .sidebar-bottom {
    flex:0 0 var(--desktop-controls-height);
    height:var(--desktop-controls-height);
    padding:4px 0 6px;
  }
}

/* Narrow only desktop sidebars; preserve tablet/mobile and control dimensions. */
@media (min-width:1025px) {
  html[lang] body.chat-client[data-view="chat"] .chat-layout {
    grid-template-columns:minmax(0,1fr) calc(clamp(182px,22%,300px) - 80px);
  }
  html[lang] body.chat-client[data-view="chat"] .people-sidebar {
    overflow:visible;
  }
  html[lang] body.chat-client[data-view="chat"] .composer {
    width:calc(100% - 10px);
  }
  html[lang] body.chat-client[data-view="chat"] .people-sidebar .sidebar-bottom {
    width:100%;
    align-self:flex-end;
  }
}

/* 02.png proportions at the existing sidebar width. The frame stops above
   the action rows; all bevel colors continue to come from the current theme. */
html[lang] body.chat-client[data-view="chat"] .people-sidebar {
  --sidebar-actions-height:87px;
  overflow:visible;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar::before {
  content:"";
  position:absolute;
  inset:24px 0 var(--sidebar-actions-height);
  border:1px solid var(--original-frame-edge);
  border-radius:2px;
  box-shadow:inset 1px 1px var(--original-frame-light),inset -1px -1px var(--original-frame-shadow);
  pointer-events:none;
  z-index:1;
}
html[lang] body.chat-client[data-view="chat"] .sidebar-tabs {
  gap:0;
  position:relative;
  z-index:2;
}
html[lang] body.chat-client[data-view="chat"] .sidebar-tabs > :is(#people-tab,#rooms-tab):not([data-original-tab]) {
  --sidebar-tab-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22 5 4Q6 0 10 0H64Q68 0 69 4L74 22Z'/%3E%3C/svg%3E");
  --sidebar-tab-edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 22' preserveAspectRatio='none'%3E%3Cpath d='M.5 22 5.5 4Q6.5 .5 10 .5H64Q67.5 .5 68.5 4L73.5 22' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  position:relative;
  flex:0 1 auto;
  height:23px;
  margin-bottom:1px;
  padding:2px 6px;
  border-width:0;
  border-radius:0;
  box-shadow:none;
  mask:var(--sidebar-tab-mask) 0 0 / 100% 100% no-repeat;
}
html[lang] body.chat-client[data-view="chat"] .sidebar-tabs > :is(#people-tab,#rooms-tab)[aria-selected="true"]:not([data-original-tab]) {
  height:26px;
  margin-bottom:0;
}
html[lang] body.chat-client[data-view="chat"] #rooms-tab:not([data-original-tab]) {
  --sidebar-tab-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22 5 4Q6 0 10 0H38Q42 0 43 4L48 22Z'/%3E%3C/svg%3E");
  --sidebar-tab-edge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 22' preserveAspectRatio='none'%3E%3Cpath d='M.5 22 5.5 4Q6.5 .5 10 .5H38Q41.5 .5 42.5 4L47.5 22' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
}
html[lang] body.chat-client[data-view="chat"] .sidebar-tabs > :is(#people-tab,#rooms-tab):not([data-original-tab])::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--original-frame-edge);
  mask:var(--sidebar-tab-edge) 0 0 / 100% 100% no-repeat;
}
html[lang] body.chat-client[data-view="chat"] .sidebar-tabs > :is(#people-tab,#rooms-tab):not([data-original-tab])::after {
  content:"";
  position:absolute;
  inset:1px 1px 0;
  pointer-events:none;
  background:var(--original-frame-light);
  mask:var(--sidebar-tab-edge) 0 0 / 100% 100% no-repeat;
}
html[lang] body.chat-client[data-view="chat"] .classic-user-icons {
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(2px,calc((100% - 168px) / 5),10px);
  height:31px;
  padding:0;
}
html[lang] body.chat-client[data-view="chat"] .classic-user-icons > button {
  flex:0 1 28px;
  width:28px;
  min-width:0;
  max-width:28px;
  height:28px;
  min-height:0;
  padding:1px;
  border-width:1px;
  border-radius:2px;
}
html[lang] body.chat-client[data-view="chat"] .classic-user-icons > button > img {
  max-width:100%;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar .sidebar-bottom {
  flex:0 0 var(--sidebar-actions-height);
  height:var(--sidebar-actions-height);
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:26px 34px;
  gap:20px 8px;
  padding:6px 1px 1px;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar .sidebar-bottom > :is(.classic-settings-icon,#classic-logout) {
  height:26px;
  border-width:2px;
  border-radius:2px;
}
html[lang] body.chat-client[data-view="chat"] .people-sidebar .sidebar-bottom > button[type="submit"] {
  grid-column:1 / -1;
  height:34px;
  border-width:3px;
  border-style:double;
  border-radius:5px;
  box-shadow:0 0 0 1px var(--original-frame-edge),inset 1px 1px var(--original-control-light),inset -1px -1px var(--original-control-shadow);
}

/* Use the saved theme radius on sidebar frames, retaining the tab exterior
   and the frame's existing inset above the action rows. Clip panel contents
   so header cells and list rows cannot paint over the rounded corners. */
html[lang] body.chat-client[data-view="chat"][data-original-theme] .people-sidebar::before {
  border-radius:var(--original-corners);
}
html[lang] body.chat-client[data-view="chat"][data-original-theme] .people-sidebar :is(.client-user-tools,.classic-list-divider,.classic-list-heading,.classic-room-columns,#people,#rooms) {
  border-radius:var(--original-corners);
}
html[lang] body.chat-client[data-view="chat"][data-original-theme] .people-sidebar :is(.client-user-tools,.classic-list-heading,.classic-room-columns) {
  overflow:hidden;
}

/* DigiChat Classic uses the ACTUAL .widget button and ::before rules from
   js/embed-widget.js. An out-of-flow, noninteractive paint span supplies the
   original 1px rounded border, inset bevel and second bevel at inset:3px.
   Its offsets cover each control's existing border box, preserving all real
   border widths, padding, fonts, dimensions and positions. Image buttons,
   tabs, menus, palettes and list rows retain their dedicated presentation. */
.classic-button-skin { display:none; }
html[lang] body[data-view][data-original-theme][data-original-directory="classic"] button[data-classic-button]:not([data-original-button]) {
  isolation:isolate;
  color:var(--original-controlText) !important;
  background:transparent !important;
  border-color:transparent !important;
  border-radius:4px !important;
  box-shadow:none !important;
}
html[lang] body[data-view][data-original-directory="classic"] button[data-classic-button-position] {
  position:relative;
}
html[lang] body[data-view][data-original-theme][data-original-directory="classic"] button[data-classic-button]:not([data-original-button]) > .classic-button-skin {
  display:block; position:absolute; z-index:-1; pointer-events:none;
  top:var(--classic-button-top); right:var(--classic-button-right);
  bottom:var(--classic-button-bottom); left:var(--classic-button-left);
  box-sizing:border-box; margin:0; padding:0;
  background:var(--original-controlBackground);
  border:1px solid #000; border-radius:4px;
  box-shadow:inset 1px 1px #fff,inset -1px -1px var(--original-classic-button-shadow);
}
html[lang] body[data-view][data-original-directory="classic"] .classic-button-skin::before {
  content:""; position:absolute; inset:3px;
  border:1px solid #fff;
  border-right-color:var(--original-classic-button-inner-shadow);
  border-bottom-color:var(--original-classic-button-inner-shadow);
  pointer-events:none;
}
/* These compact controls keep their pre-skin border boxes and padding. The
   general 3px inner-bevel inset crowds their 14/16px icons and header text;
   place that bevel against the outer frame to restore the usable face. */
html[lang] body.chat-client[data-view="chat"][data-original-directory="classic"] .classic-room-columns > span > .classic-room-sort > .classic-button-skin::before,
html[lang] body.chat-client[data-view="chat"][data-original-directory="classic"] #app .composer .formatting-toolbar > button > .classic-button-skin::before,
html[lang] body[data-view="private"][data-original-directory="classic"] .pm-composer-controls > button > .classic-button-skin::before {
  inset:0;
}
html[lang] body[data-view][data-original-directory="classic"][data-original-gradient] .classic-button-skin {
  background-image:linear-gradient(var(--original-control-light),var(--original-controlBackground) 55%,var(--original-control-shadow)) !important;
}
html[lang] body[data-view][data-original-directory="classic"] button:is(:active,[aria-pressed=true]):not(:disabled) > .classic-button-skin::before {
  border-color:var(--original-classic-button-inner-shadow);
  border-right-color:#fff; border-bottom-color:#fff;
}
html[lang] body[data-view][data-original-directory="classic"] button[data-classic-button]:disabled:not([data-original-button]) {
  color:color-mix(in srgb,var(--original-controlText) 38.020833%,var(--original-controlBackground)) !important;
  opacity:1;
}
html[lang] body[data-view][data-original-directory="classic"] button[data-classic-button]:focus-visible:not([data-original-button]) {
  outline:1px dotted var(--original-controlText); outline-offset:-6px;
}

/* Keep the desktop composition (including its 10px width reduction) intact.
   This is the same boundary as the existing desktop-only sidebar rule. */
@media (max-width:1024px) {
  html[lang] body.chat-client[data-view="chat"] .classic-chat-page .chat-layout {
    --chat-sidebar-width:min(220px, calc(100vw - 64px));
    grid-template-columns:minmax(0,1fr);
    overflow:hidden;
    direction:ltr;
  }
  html[lang] body.chat-client[data-view="chat"] .classic-chat-page .people-sidebar {
    position:absolute;
    top:6px;
    right:2px;
    width:var(--chat-sidebar-width);
    height:calc(100% - 12px);
    z-index:3;
    background:var(--original-tabsBackground, #d9d9e9);
    transform:translateX(0);
    visibility:visible;
    transition:transform 240ms ease, visibility 240ms;
  }
  html[lang] body.chat-client[data-view="chat"] .classic-chat-page .chat-sidebar-collapsed .people-sidebar {
    transform:translateX(calc(100% + 3px));
    visibility:hidden;
    pointer-events:none;
  }
  html[lang] body.chat-client[data-view="chat"] .classic-chat-page .chat-sidebar-toggle {
    position:absolute;
    top:50%;
    right:calc(var(--chat-sidebar-width) + 2px);
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    min-width:36px;
    height:44px;
    min-height:44px;
    margin:0;
    padding:0;
    transform:translateY(-50%);
    border:1px solid var(--original-frame-edge, #555);
    border-radius:4px 0 0 4px;
    background:var(--original-controlBackground, #ddd);
    color:var(--original-controlText, #111);
    font:28px/1 Arial, sans-serif;
    direction:ltr;
    touch-action:manipulation;
    transition:right 240ms ease;
  }
  html[lang] body.chat-client[data-view="chat"] .classic-chat-page .chat-sidebar-collapsed .chat-sidebar-toggle {
    right:2px;
  }
  html[lang] body.chat-client[data-view="chat"] .classic-chat-page .chat-sidebar-toggle:focus-visible {
    outline:2px solid var(--original-controlText, #111);
    outline-offset:-4px;
  }
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce) {
  html[lang] body.chat-client[data-view="chat"] .classic-chat-page :is(.people-sidebar,.chat-sidebar-toggle) {
    transition:none;
  }
}

/* Settings icon artwork is a selection palette, not window chrome. Keep its
   existing hit areas, image dimensions and page buttons. */
html[lang] body.chat-client[data-view][data-original-theme] .classic-settings-dialog .profile-icon-grid button {
  background:transparent; border:1px solid transparent; box-shadow:none;
}
html[lang] body.chat-client[data-view][data-original-theme] .classic-settings-dialog .profile-icon-grid button > .classic-button-skin { display:none; }
html[lang] body.chat-client[data-view][data-original-theme] .classic-settings-dialog .profile-icon-grid button[aria-pressed=true] {
  outline:2px solid var(--original-tabsText, currentColor); outline-offset:-2px;
}
html[lang] body.chat-client[data-view][data-original-theme] .classic-settings-dialog .profile-icon-grid button:focus-visible {
  outline:2px dotted var(--original-tabsText, currentColor); outline-offset:0;
}

/* privateDialog() creates a plain dialog rather than the main .modal shell. */
html[lang] body[data-view=private][data-original-theme] dialog.user-profile-dialog {
  color:var(--original-outerText); background:var(--original-outerBackground);
  border-color:var(--original-frame-shadow);
}
html[lang] body[data-view=private][data-original-theme] .user-profile-dialog .user-profile-content {
  color:var(--original-tabsText); background:var(--original-tabsBackground);
  border:1px solid var(--original-frame-shadow);
}
html[lang] body[data-view=private][data-original-theme] .user-profile-dialog hr {
  border:0; border-top:1px solid var(--original-frame-shadow); margin:8px 0;
}
html[lang] body[data-view=private][data-original-theme] .user-profile-dialog > footer {
  color:var(--original-outerText); background:var(--original-outerBackground);
}

/* Override the older embedded-admin blue/grey rules only in Site Options. */
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document :is(.admin-layout,.admin-nav,.classic-status,.site-options-parent-actions) {
  color:var(--original-outerText); background:var(--original-outerBackground);
  border-color:var(--original-frame-shadow);
}
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document .admin-content {
  color:var(--original-tabsText); background:var(--original-tabsBackground);
  border-color:var(--original-frame-shadow); border-radius:var(--original-corners);
  box-shadow:inset 1px 1px var(--original-frame-light),inset -1px -1px var(--original-frame-shadow);
}
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document .classic-help {
  color:var(--original-helpText); background:var(--original-helpBackground);
  border-color:var(--original-frame-shadow);
}
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document :is(fieldset,hr) { border-color:var(--original-frame-shadow); }
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document :is(label,legend,.field > span) { color:inherit; }
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document .classic-tabs button {
  color:var(--original-tabsText); background:transparent; border:0; box-shadow:none;
}
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document .options-tab-shape {
  fill:var(--original-tabs-inactive); stroke:var(--original-frame-edge);
}
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document .active .options-tab-shape { fill:var(--original-tabsBackground); }
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document .options-tab-light { stroke:var(--original-frame-light); }
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document .options-tab-shadow { stroke:var(--original-frame-shadow); }
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document :is(.table-wrap,.classic-list tbody td) {
  color:var(--original-inputText); background:var(--original-inputBackground);
  border-color:var(--original-frame-shadow);
}
html[lang] body[data-view=admin][data-original-theme].site-options-draft-document .classic-list tr.selected td {
  color:var(--original-highlightText); background:var(--original-highlightBackground);
}

/* The chat-menu log dialog uses the shared administration shell geometry.
   Let its filters shrink within a small chat viewport without clipping. */
html[lang] body.chat-client[data-view=chat] dialog.global-logs-dialog {
  display:flex; flex-direction:column; box-sizing:border-box;
  width:min(700px,calc(100vw - 16px)); height:min(450px,calc(100dvh - 16px));
  overflow:auto;
}
html[lang] body.chat-client[data-view=chat] .global-logs-dialog > :is(header,footer) { flex:none; }
html[lang] body.chat-client[data-view=chat] .global-logs-dialog .global-logs-pane { padding:10px; min-height:200px; }
html[lang] body.chat-client[data-view=chat] .global-logs-dialog .global-log-filters { width:min(100%,500px); }
html[lang] body.chat-client[data-view=chat] .global-logs-dialog .global-log-filters > div { flex-wrap:wrap; gap:4px 8px; }
html[lang] body.chat-client[data-view=chat] .global-logs-dialog .global-log-filters label:not(.check-field) {
  display:grid; grid-template-columns:75px minmax(0,1fr); gap:6px;
  width:min(100%,360px); margin:4px 0; min-width:0;
}
html[lang] body.chat-client[data-view=chat] .global-logs-dialog .global-log-filters :is(select,input:not([type=checkbox])) { width:100%; min-width:0; }
html[lang] body.chat-client[data-view=chat] .global-logs-dialog .check-field {
  display:flex; align-items:center; gap:5px; margin:4px 0; width:auto;
}
html[lang] body.chat-client[data-view=chat] .global-logs-dialog .check-field input { margin:0; flex:none; }
html[lang] body.chat-client[data-view=chat] .global-logs-dialog textarea { min-height:80px; }