/* Shared visual layer. Keep navigation, window positioning and domain state in app.js. */
#lead-operations { position: fixed; z-index: 11000; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 6px; width: min(320px,calc(100vw - 32px)); max-height: 25dvh; overflow: auto; pointer-events: none; }
#lead-operations:empty { display: none; }
.lead-keyword { background: #ffe16b; color: #201a00; padding: 0 2px; border-radius: 2px; font-weight: 650; }
html body .dept-dock-overlay > #dc-tools-toggle {
  position: absolute !important; display: flex !important; left: 251px !important; right: auto !important;
  top: auto !important; bottom: 16px !important; z-index: 10150 !important;
}
html body .dept-dock-overlay.tools-hidden > #dc-tools-toggle { left: 39px !important; }
html body .dept-dock-overlay.tools-hidden > #dc-tools-toggle svg { transform: rotate(180deg); }
@media (max-width: 1100px) and (min-width: 821px) {
  html body .dept-dock-overlay > #dc-tools-toggle,
  html body .dept-dock-overlay.tools-hidden > #dc-tools-toggle { left: 53px !important; }
}
@media (max-width: 820px) {
  html body .dept-dock-overlay > #dc-tools-toggle,
  html body .dept-dock-overlay.tools-hidden > #dc-tools-toggle {
    display: flex !important; left: 8px !important; top: 66px !important; bottom: auto !important;
    width: 44px !important; height: 44px !important; border-radius: 6px !important;
  }
  html body .dept-dock-overlay .dc-tools { padding-left: 56px !important; }
  html body .dept-dock-overlay.tools-hidden .dc-tools { display: none !important; }
}
.lead-operation-status { padding: 10px 14px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-surface,#242729); color: var(--ui-ink,#fff); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
html body :is(#rejected-box,#lead-review-box).rejected-board { --ui-surface: #1f2225; padding: 12px; align-items: center; }
html[data-theme="light"] body :is(#rejected-box,#lead-review-box).rejected-board { --ui-surface: #fff; }
html body :is(#rejected-box,#lead-review-box).rejected-board > .gc-card {
  width: min(760px,100%); min-width: 0; max-width: 100%; margin: 0;
  max-height: calc(min(100dvh,var(--mobile-visible-height,100dvh)) - 24px);
  overflow: auto; overscroll-behavior: contain; padding: 20px;
  background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line);
}
html body .rejected-board .gc-head { position: static; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
html body .rejected-board .rj-toolbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(120px,160px) minmax(140px,180px) 44px; gap: 8px; }
html body .rejected-board .rj-date-filter { margin: 10px 0; border-top: 1px solid var(--ui-line); }
html body .rejected-board .rj-date-filter summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
html body .rejected-board .rj-date-fields { display: grid; grid-template-columns: minmax(160px,1fr) minmax(200px,2fr) auto; align-items: end; gap: 8px; }
html body .rejected-board .rj-date-fields label { display: grid; gap: 6px; min-width: 0; font-size: 13px; }
html body .rejected-board .rj-date-fields :is(input,textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px; color: var(--ui-ink); background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: 6px; font: inherit; }
html body .rejected-board .rj-author-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; }
html body .rejected-board .rj-author-item { padding: 12px 0; border-top: 1px solid var(--ui-line); }
html body .rejected-board .rj-author-item p { white-space: pre-wrap; overflow-wrap: anywhere; }
html body .rejected-board #rj-author-history:not([hidden]) { border-left: 2px solid #418b72; padding: 8px 16px; margin: 16px 0; }
html body .rejected-board .rj-page { min-width: 0; }
html body .rejected-board :is(input[type="search"],select) { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--ui-line); background: var(--ui-raised); color: var(--ui-ink); border-radius: 6px; padding: 8px 10px; font-size: 15px; }
html body .rejected-board .vi-host { min-width: 0; width: 100%; }
html body .rejected-board .vi-host input { padding-right: 48px; }
html body .rejected-board .vi-btn { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 10px; right: 0; top: 0; opacity: .8; background: transparent !important; border: 0; }
html body .rejected-board .vi-btn svg { display: block; width: 18px; height: 18px; }
html body .rejected-board :is(button,.rj-acts a) { min-height: 44px; max-width: 100%; padding: 8px 12px; font: inherit; font-size: 13px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; border: 1px solid var(--ui-line); border-radius: 6px; color: var(--ui-ink); background: var(--ui-raised); cursor: pointer; text-decoration: none; }
html body .rejected-board button:disabled { opacity: .55; cursor: default; }
html body .rejected-board .gc-x { width: 44px; min-width: 44px; font-size: 24px; padding: 0; }
html body .rejected-board .icon-btn { width: 44px; padding: 10px; }
html body .rejected-board .rj-summary { margin: 12px 0; color: var(--ui-muted); font-size: 13px; }
html body .rejected-board .rj-error { padding: 12px; border-left: 3px solid #c94343; color: var(--ui-ink); background: var(--ui-hover); margin: 10px 0; overflow-wrap: anywhere; }
html body .rejected-board :is(.rj-bulk,.rj-review-actions) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
html body .rejected-board .rj-bulk label { display: flex; align-items: center; min-height: 44px; font-size: 13px; gap: 8px; }
html body .rejected-board input[type="checkbox"] { appearance: auto; -webkit-appearance: checkbox; width: 20px; height: 20px; flex: 0 0 20px; accent-color: #418b72; border-radius: 3px !important; }
html body .rejected-board input[type="checkbox"]::after { content: none !important; }
html body .rejected-board .rj-list { max-height: none; overflow: visible; gap: 0; margin-top: 16px; }
html body .rejected-board .rj-item { padding: 18px 0; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; background: transparent; min-width: 0; }
html body .rejected-board .rj-head { flex-wrap: wrap; gap: 8px 16px; color: var(--ui-muted); font-size: 13px; }
html body .rejected-board .rj-head b { overflow-wrap: anywhere; }
html body .rejected-board .rj-pick { display: flex; gap: 8px; min-height: 44px; align-items: center; }
html body .rejected-board .rj-when { margin-left: auto; }
html body .rejected-board h3 { margin: 8px 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ui-ink); overflow-wrap: anywhere; }
html body .rejected-board .rj-preview { margin: 8px 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ui-muted); }
html body .rejected-board .rj-why { color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
html body .rejected-board .rj-acts { flex-wrap: wrap; }
html body .rejected-board .rj-back { border-color: #418b72; }
html body .rejected-board :is(.rj-check,.rj-more) { width: auto; margin: 0; }
html body .rejected-board .rj-found-item { border: 0; border-left: 3px solid #418b72; border-radius: 0; padding: 12px; margin: 12px 0; background: var(--ui-hover); overflow-wrap: anywhere; }
html body .rejected-board :is(button,input,select,a) { border-radius: 6px !important; }
html body .rejected-board :is(button,input,select,a):focus-visible { outline: 2px solid #418b72 !important; outline-offset: 2px; }
html body .rj-analyze-all { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 12px 0; }
html body .rj-analyze-all svg { flex: 0 0 20px; width: 20px; height: 20px; }
html body #lead-review-box { z-index: 10050; }
html body #lead-review-box .gc-card { width: min(860px,100%); }
html body #lead-review-box .gc-head { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; padding: 8px 0; position: sticky; top: 0; z-index: 2; background: var(--ui-surface); }
html body #lead-review-box h2 { font-size: 20px; margin: 0; line-height: 1.3; overflow-wrap: anywhere; }
html body #lead-review-box summary { cursor: pointer; padding: 12px 0; min-height: 44px; font-size: 14px; color: var(--ui-ink); }
html body #lead-review-box :is(form,section,details,.lr-field) { min-width: 0; }
html body #lead-review-box form { display: grid; gap: 16px; padding: 12px 0 20px; border-bottom: 1px solid var(--ui-line); }
html body #lead-review-box .lr-field { display: grid; gap: 8px; font-size: 13px; color: var(--ui-muted); }
html body #lead-review-box :is(textarea,input[type="number"]) { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-raised); color: var(--ui-ink); font: inherit; font-size: 15px; box-sizing: border-box; }
html body #lead-review-box textarea { resize: vertical; }
html body #lead-review-box select { min-height: 44px !important; padding: 8px 10px !important; }
html body #lead-review-box .lr-presets { display: grid; gap: 8px; }
html body #lead-review-box .lr-pick { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ui-ink); font-size: 14px; }
html body #lead-review-box .lr-days { max-width: 230px; margin-left: 30px; }
html body #lead-review-box .lr-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
html body #lead-review-box .lr-fields > :last-child { grid-column: 1 / -1; }
html body #lead-review-box button:has(svg) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
html body #lead-review-box button svg { width: 18px; height: 18px; flex: 0 0 18px; }
html body #lead-review-box :is(.lr-actions,.lr-results-toolbar,.lr-footer,.lr-pages,.lr-item-bottom) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
html body #lead-review-box .lr-results-toolbar select { flex: 1 1 200px; width: auto; }
html body #lead-review-box progress { width: 100%; height: 6px; display: block; accent-color: #418b72; }
html body #lead-review-box .rj-head { display: flex; align-items: center; }
html body #lead-review-box .lr-verdict { font-size: 12px; color: var(--ui-muted); }
html body #lead-review-box .lr-match { color: #e8bb60; }
html body #lead-review-box .lr-reason { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
html body #lead-review-box blockquote { margin: 10px 0; padding: 8px 12px; border-left: 2px solid #418b72; color: var(--ui-muted); font-size: 13px; overflow-wrap: anywhere; }
html body #lead-review-box .lr-item-bottom span { flex: 1 1 200px; min-width: 0; color: var(--ui-muted); font-size: 12px; overflow-wrap: anywhere; }
html body #lead-review-box .lr-pages { justify-content: center; font-size: 13px; }
html body #lead-review-box .lr-pages button { width: 44px; }
html body #lead-review-box .lr-footer { justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--ui-line); position: sticky; bottom: 0; z-index: 1; background: var(--ui-surface); }
html body #lead-review-box #lr-apply { border-color: #418b72; }
html body #lead-review-box #lr-success { padding: 12px 0; color: var(--ui-ink); }
html body #lead-review-box [hidden] { display: none !important; }
html body #sweep .sw-wrap { max-width: min(460px,100%); max-height: calc(min(100dvh,var(--mobile-visible-height,100dvh)) - 24px); overflow: auto; }
html body #sweep .sw-card { overflow-wrap: anywhere; }
html body #sweep .sw-acts { flex-wrap: wrap; }
html body #sweep .sw-btn { min-height: 44px; min-width: 0; flex: 1 1 95px; white-space: normal; }
html body #sweep .sw-btn:disabled { opacity: .55; cursor: wait; }
/* The original Telegram group stays visible above the lead fields. */
#lead-card .lc-origin {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px;
  margin: 0 0 12px; padding: 8px 0; color: var(--ui-ink); text-decoration: none;
  border-bottom: 1px solid var(--ui-line);
}
#lead-card .lc-origin > svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ui-muted); }
#lead-card .lc-origin-body { display: grid; gap: 3px; flex: 1 1 0; min-width: 0; }
#lead-card .lc-origin-label { color: var(--ui-muted); font-size: 12px; line-height: 1.4; }
#lead-card .lc-origin-name { font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
#lead-card a.lc-origin:hover .lc-origin-name { text-decoration: underline; text-underline-offset: 3px; }
#lead-card a.lc-origin:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
#lead-card .lc2-foot .lc2-em { min-width: 0; min-height: 44px; padding-inline: 4px; }
#lead-card .lc2-foot .lc2-em i { white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; }

@media (max-width: 600px) {
  #lead-card .lc2-head .gc-x { order: 0; }
  html body :is(#rejected-box,#lead-review-box).rejected-board > .gc-card { padding: 12px; }
  html body #lead-review-box .lr-fields { grid-template-columns: minmax(0,1fr); }
  html body #lead-review-box .lr-results-toolbar > button { flex: 1 1 120px; }
  html body #lead-review-box .lr-results-toolbar select { flex: 1 1 100%; width: 100%; }
  html body #lead-review-box .lr-footer button { width: 100%; }
  html body .rejected-board .rj-toolbar { grid-template-columns: minmax(0,1fr) 44px; }
  html body .rejected-board .rj-toolbar #rj-keyword { grid-column: 1; }
  html body .rejected-board .rj-date-fields { grid-template-columns: minmax(0,1fr); }
  html body .rejected-board .rj-toolbar > input,
  html body .rejected-board .rj-toolbar > .vi-host { grid-column: 1 / -1; }
  html body .rejected-board .rj-when { margin-left: 0; }
  html body .rejected-board .rj-acts > * { flex: 1 1 120px; text-align: center; }
}
#kanban-board-container { position: relative; display: flex; gap: 16px; overflow-x: auto; align-items: stretch; padding-bottom: 12px; }
#kanban-board-container > .kanban-column { flex: 0 0 280px; min-width: 0; padding: 12px; background: var(--ui-hover); }
#kanban-board-container .tasks-cards-list { display: flex; flex-direction: column; gap: 12px; min-height: 100px; }
#kanban-board-container .task-card { padding: 14px; min-width: 0; }
#kanban-board-container .task-card :is(h4,p) { overflow-wrap: anywhere; white-space: pre-wrap; margin: 8px 0; }
#kanban-board-container .task-card h4 { font-size: 15px; }
#kanban-board-container .task-card p { color: var(--text-muted); font-size: 13px; }
.task-actions { display: flex; align-items: center; gap: 4px; }
.task-actions select { flex: 1; min-width: 0; max-width: 100%; }
.task-actions .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
.task-actions svg { width: 18px; height: 18px; }
.tasks-empty { font-size: 13px; color: var(--text-muted); }
.dc-activity { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--ui-line); }
.dc-activity time { color: var(--text-muted); }
.tasks-status { position: sticky; left: 0; min-width: 200px; align-self: flex-start; padding: 12px; }
#task-modal .modal-content { width: min(480px,100%); max-height: calc(var(--mobile-visible-height,100dvh) - 32px); overflow-y: auto; }
#task-modal { padding: 16px; box-sizing: border-box; }
@media (max-width: 600px) {
  #kanban-board-container > .kanban-column { flex-basis: min(280px,calc(100vw - 64px)); }
  #task-modal input, #task-modal textarea, #task-modal select { font-size: 16px; min-height: 44px; }
}
:root {
  --ui-canvas: #141618;
  --ui-surface: rgb(31 34 37 / calc(.78 + var(--smoke,50) * .002));
  --ui-raised: #272b2e;
  --ui-glass: rgb(25 28 31 / calc(.60 + var(--smoke,50) * .0038));
  --ui-ink: #edf0f2;
  --ui-muted: #adb5bd;
  --ui-line: rgba(225,234,241,.14);
  --ui-hover: rgba(225,234,241,.07);
  --ui-shadow: 0 16px 48px rgba(0,0,0,.25);
  --r-s: 6px; --r-m: 8px; --r-l: 8px;
  --ui-radius: calc(var(--r-md,14px) / 2);
}
html[data-theme="light"] {
  --ui-canvas: #f3f5f6;
  --ui-surface: rgb(255 255 255 / calc(.84 + var(--smoke,50) * .0016));
  --ui-raised: #fff;
  --ui-glass: rgb(255 255 255 / calc(.70 + var(--smoke,50) * .0028));
  --ui-ink: #20262b;
  --ui-muted: #58646e;
  --ui-line: rgba(38,51,61,.16);
  --ui-hover: rgba(38,51,61,.055);
  --ui-shadow: 0 16px 48px rgba(24,35,43,.13);
}
html body {
  --text-main: var(--ui-ink);
  --text-muted: var(--ui-muted);
  --text-light: var(--ui-muted);
  --hair: var(--ui-line);
  --border-color: var(--ui-line);
  --glass-border: var(--ui-line);
  --surface-2: var(--ui-hover);
  --bg-card: var(--ui-surface);
  --bg-app: var(--ui-canvas);
  --bg-sidebar: var(--ui-glass);
  --font-display: var(--font-primary);
  color: var(--ui-ink);
}
html:not([data-own-bg]) body,
html:not([data-own-bg]) #app-container > main { background: var(--ui-canvas) !important; }
html body #app-container > aside.glass-panel,
html body .top-bar, html body .topbar, html body #app-container > main > header.glass-panel {
  background: var(--ui-glass) !important;
  border-color: var(--ui-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body #app-container > aside.glass-panel::before,
html body #app-container > aside.glass-panel::after,
html body .top-bar::before, html body .top-bar::after,
html body #app-container > main > header.glass-panel::before,
html body #app-container > main > header.glass-panel::after { content: none !important; }
html body :is(h1,h2,h3,h4,button,input,textarea,select,.nav-group-label,.dc-sec-head) { letter-spacing: 0 !important; }
html body :is(.ptab-title,.wtab-title,.dc-ws-name) { font-size: 18px; line-height: 1.4; }
html body :is(.nav-item,.mode-btn) { box-shadow: none !important; }
html body .nav-item { border-radius: 6px !important; color: var(--ui-muted); }
html body .nav-item.active { background: var(--ui-hover) !important; color: var(--ui-ink) !important; }
html body .nav-group-label { color: var(--ui-muted); font-size: 11px; }
html body .logo-text { color: var(--ui-ink); }
html body #app-container > aside.glass-panel .mode-nav { justify-content: flex-start; gap: 4px; }
html body #app-container > aside.glass-panel .nav-group-label { opacity: 1; padding: 18px 12px 6px !important; }

/* Screen containers are layouts, not nested cards. Individual content stays framed. */
html body :is(#work-view,.work-main,.work-content,.content-body > .page-view) {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0 !important;
}
html body :is(#work-view,.work-main,.work-content,.content-body > .page-view)::before,
html body :is(#work-view,.work-main,.work-content,.content-body > .page-view)::after { content: none !important; }
html body :is(.wtab-content,.ptab-content) { min-width: 0; }

/* Repeated items share one quiet surface; no hover movement in work lists. */
html body :is(.dept-card,.company-card,.set-card,.task-card,.metric-card,.stat-card,.ob-card,.cb-row,.fw-post) {
  background: var(--ui-surface) !important; color: var(--ui-ink);
  border: 1px solid var(--ui-line) !important; border-radius: 8px !important;
  box-shadow: none !important;
}
html body :is(.dept-card,.company-card,.set-card,.task-card,.metric-card,.stat-card,.ob-card,.cb-row,.fw-post)::before,
html body :is(.dept-card,.company-card,.set-card,.task-card,.metric-card,.stat-card,.ob-card,.cb-row,.fw-post)::after { content: none !important; }
html body :is(.dept-card,.company-card,.set-card,.task-card,.metric-card,.ob-card):hover {
  transform: none !important; box-shadow: none !important; border-color: var(--text-muted) !important;
}
html body .set-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)) !important; grid-auto-rows: minmax(176px,auto) !important; gap: 16px !important; align-items: stretch; }
html body .set-grid > .set-card {
  height: auto !important; min-height: 176px !important; max-height: none !important;
  padding: 18px !important; overflow: visible;
}
html body .set-card-h { min-height: 24px; height: auto !important; font-size: 15px; }
html body .set-card-p { height: auto !important; min-height: 40px; line-height: 1.5; font-size: 13px; overflow-wrap: anywhere; }
html body .set-card .btn-primary { margin-top: auto; }

/* Do not target checkboxes, swatches or sliders: their geometry carries meaning. */
html body :is(.btn-primary,.btn-secondary,.btn-ghost,.gc-go,.cb-add,.cb-import,.fw-send) {
  min-height: 38px; border-radius: 6px !important; padding: 8px 14px !important;
  font-size: 14px; line-height: 1.35; font-weight: 500;
  white-space: normal; overflow-wrap: anywhere; box-shadow: none !important;
}
html body :is(.btn-primary,.gc-go,.fw-send) {
  background: var(--ui-ink) !important; color: var(--ui-canvas) !important;
  border: 1px solid transparent !important;
}
html body :is(.btn-secondary,.btn-ghost,.cb-import) {
  background: var(--ui-hover) !important; color: var(--ui-ink) !important; border: 1px solid var(--ui-line) !important;
}
html body :is(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline: 2px solid var(--primary,#6baeb7) !important; outline-offset: 3px !important;
}
html body button:disabled { cursor: not-allowed; }
html body :is(.gc-card,.intg-card,#settings-form) :is(input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="url"],textarea,select) {
  min-width: 0; max-width: 100%; color: var(--ui-ink) !important;
  background: var(--ui-hover) !important; border: 1px solid var(--ui-line) !important;
  border-radius: 6px !important; box-shadow: none !important; font-size: 14px;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body :is(input,textarea)::placeholder { color: var(--ui-muted); opacity: 1; }
html body :is(.cb-search,.mess-app-search,.adm-top) > .vi-host { flex: 1 1 0; min-width: 0; width: 100%; }
html body :is(.cb-search,.mess-app-search) input { width: 100% !important; min-width: 0; }

/* Only the outer dialog has glass and a shadow; inner form groups stay flat. */
html[data-theme] body :is(.gc-card,.intg-card,.pp-card,.lc2,.mc-win,.cast-card) {
  background: var(--ui-surface) !important; color: var(--ui-ink) !important;
  border: 1px solid var(--ui-line) !important; border-radius: 8px !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(var(--blur-a,12px)) !important; -webkit-backdrop-filter: blur(var(--blur-a,12px)) !important;
}
html[data-theme] body :is(.gc-card,.intg-card,.pp-card,.lc2,.mc-win,.cast-card)::before,
html[data-theme] body :is(.gc-card,.intg-card,.pp-card,.lc2,.mc-win,.cast-card)::after { content: none !important; }
html body :is(.gc-head,.intg-head,.pp-name) { font-size: 18px !important; line-height: 1.4; }
html body :is(.gc-card,.intg-card) :is(.gc-row,.gc-field,.gc-body,.intg-body) { box-shadow: none !important; }
html[data-theme] body :is(.dept-card,.company-card,.set-card,.task-card,.metric-card,.ob-card,.cb-row,.fw-post,.gc-card,.intg-card,.pp-card,.lc2,.mc-win,.cast-card) { border-radius: var(--ui-radius) !important; }
html[data-theme] body .skin-card {
  padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html body .skin-card::before, html body .skin-card::after { content: none !important; }
html body .skin-card .cast-lbl { margin: 20px 0 8px; font-size: 12px; color: var(--ui-muted); }
html body .skin-card .look-row { display: flex; flex-wrap: wrap; gap: 6px; }
html body .skin-card .cast-mini { min-height: 34px; padding: 7px 12px !important; font-size: 13px; border-radius: 6px !important; }
html[data-theme] body .skin-card .cast-mini.on { background: var(--ui-ink) !important; color: var(--ui-canvas) !important; }
html body .skin-card .look-slide { display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,130px) 26px; align-items: center; gap: 12px; }
html body .skin-card .look-slide input { width: 100%; min-width: 0; }
html body .skin-card .skin-dot { width: 34px; height: 34px; min-height: 34px; border-radius: 50% !important; }
html body .skin-card .np-line { min-height: 44px; }
html body .mess-app-search { border: 1px solid var(--ui-line); border-radius: 6px !important; padding: 8px 10px !important; }
html body .mess-app-search input { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0 !important; }
html body .mess-app-search > :is(i,svg) { flex: 0 0 18px; width: 18px; height: 18px; }
html body .mess-app-search .vi-host { background: transparent !important; box-shadow: none !important; }
html[data-theme] body .login-card {
  background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-radius) !important; box-shadow: var(--ui-shadow) !important;
}
html body .login-card::before, html body .login-card::after { content: none !important; }
html body .login-card :is(input[type="text"],input[type="email"],input[type="password"]) {
  border: 1px solid var(--ui-line) !important; border-radius: 6px !important;
  background: var(--ui-hover) !important; color: var(--ui-ink) !important; min-height: 42px;
}
html:not(.preauth-hide):not(.preauth-hold) body:has(#auth-gate:not([style*="display: none"]):not([style*="display:none"])) #mobile-tabbar { display: none !important; }
html[data-font="serif"] body { --font-primary: Georgia, 'Times New Roman', serif; }
html[data-font="mono"] body { --font-primary: Menlo, Consolas, monospace; }
html[data-contrast="high"] { --ui-ink: #fff; --ui-muted: #d3d8dd; }
html[data-theme="light"][data-contrast="high"] { --ui-ink: #111; --ui-muted: #3d464d; }
html[data-density="compact"] body .crm-pipeline .crm-card { padding: 10px !important; }
@media (max-width: 640px) {
  html body #auth-gate { width: 100vw; box-sizing: border-box; padding: 56px 16px 24px !important; align-items: center !important; justify-content: flex-start !important; }
  html body #auth-gate .auth-header { width: 100%; flex: 0 0 auto; }
  html body #auth-gate .auth-logo { font-size: 44px !important; letter-spacing: 0 !important; }
  html body #auth-gate .brand-365 { font-size: 96px !important; }
  html body #auth-gate .brand-slogan { font-size: 14px !important; }
  html body #auth-gate .login-card { width: 100% !important; max-width: 420px !important; flex: 0 0 auto; padding: 24px !important; margin: 0 !important; }
}

/* Department headers retain their color identity in the icon, not a full-width gradient. */
html body .dept-dock-hero {
  min-height: 64px; padding: 12px 52px 12px 18px;
  background: var(--ui-glass) !important; border-bottom: 1px solid var(--ui-line);
}
html body .dept-dock-title { color: var(--ui-ink); min-width: 0; }
html body .dept-dock-name { font-size: 18px; overflow-wrap: anywhere; }
html body .dept-dock-sub { color: var(--ui-muted); font-size: 12px; }
html body .dept-dock-hero #dc-close { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 6px !important; background: var(--ui-hover); color: var(--ui-ink); }
html body .dept-dock-ico { width: 36px; height: 36px; border-radius: 8px; color: var(--primary); background: var(--ui-hover); }
html body .dept-dock-ico :is(i,svg) { color: inherit; }
html body .dept-dock-card { border-radius: 0 !important; box-shadow: none !important; }
html body .dept-dock-card .dc-tools { background: var(--ui-glass) !important; border-right: 1px solid var(--ui-line); }
html body .dc-tool-row { border-radius: 6px !important; box-shadow: none !important; }
html body .dc-tool-row.active { background: var(--ui-hover) !important; border-color: var(--ui-line) !important; }
html body .dc-tool-row.active .dc-tool-name { color: var(--ui-ink) !important; }
html body .dc-ws-head { padding-bottom: 12px; margin-bottom: 16px; flex-shrink: 0; }
html body .dc-ws-dash, html body .dc-ws-desc { display: none; }
html body .dc-main { min-width: 0; padding: 20px !important; }
html body .dc-ws-body { min-width: 0; }

/* Columns scroll as a board; cards remain readable over a personal cover. */
html body .crm-pipeline { gap: 16px; }
html body .crm-pipeline .pipeline-column {
  background: var(--ui-glass) !important; border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important; padding: 12px !important; box-shadow: none !important;
}
html body .crm-pipeline .pipeline-column::before,
html body .crm-pipeline .pipeline-column::after { content: none !important; }
html body .crm-pipeline .column-sticky { background: var(--ui-glass) !important; padding: 0 0 12px !important; }
html body .crm-pipeline .column-header { font-size: 14px; min-height: 32px; gap: 8px; }
html body .crm-pipeline .col-name { min-width: 0; }
html body .crm-pipeline .column-count { flex-shrink: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
html body .crm-pipeline .column-sum { color: var(--ui-muted); font-size: 13px; }
html body .crm-pipeline .crm-card {
  background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important; padding: 14px !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .crm-pipeline .crm-card::before,
html body .crm-pipeline .crm-card::after { content: none !important; }
html body .crm-pipeline .crm-card:not(.dragging):hover { transform: none !important; border-color: var(--text-muted) !important; }
html body .crm-card h4 { font-size: 15px; line-height: 1.45; color: var(--ui-ink); overflow-wrap: anywhere; }
html body .crm-card p { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

html body .messenger-app { background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; border-radius: 8px !important; box-shadow: none !important; }
html body :is(.mess-app-main,.mess-app-side) { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
html body .mess-app-side { border-right: 1px solid var(--ui-line) !important; }
html body .mess-app-head { gap: 8px; padding: 16px; }
html body .mess-app-head h3 { flex: 1; font-size: 18px; }
html body #mess-sync-status { padding: 8px 16px; font-size: 12px; color: var(--text-muted); }
html body #mess-sync-status button { margin-left: 8px; color: var(--ui-ink); text-decoration: underline; }
html body .mess-history-control { display: block; margin: 8px auto 16px; padding: 8px 12px; font-size: 13px; color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 6px; }
html body button.mess-tick.is-failed { min-width: 30px; min-height: 30px; cursor: pointer; color: #e46169; }
html body #profile-view:has(#ptab-messengers.active) .social-hero { display: none !important; }
html body #profile-view:has(#ptab-messengers.active) { padding-top: 16px !important; }
html body #ptab-messengers { padding: 0 !important; }
html body .messenger-app { height: var(--mess-available-height, calc(100dvh - 180px)) !important; min-height: 300px; margin-bottom: 0 !important; }
html body .messenger-app > .mess-app-main { height: 100% !important; min-height: 0; padding: 0 !important; }
html body .mess-app-body { padding: 16px; }
html body .mess-app-thread-head { padding: 14px 16px; }
html body .mess-bubble-text { overflow-wrap: anywhere; white-space: pre-wrap; }
html body .mess-back { display: none; }
@media (max-width: 900px) {
  html body .messenger-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  html body .messenger-app .mess-app-side { max-height: none; height: 100%; border: 0 !important; }
  html body .messenger-app:not(.has-active-chat) .mess-app-main,
  html body .messenger-app.has-active-chat .mess-app-side { display: none !important; }
  html body .mess-back { display: inline-flex; }
  html body #profile-view:has(#ptab-messengers.active) { padding: 8px !important; }
  html body .mess-app-thread-head { grid-template-columns: 30px 34px minmax(0, 1fr) 30px 30px 30px; gap: 4px; padding: 10px; }
  html body .mess-app-thread-head > .icon-btn { width: 30px; height: 34px; min-width: 30px; padding: 4px; }
  html body .mess-app-thread-avatar-wrap { width: 34px; height: 34px; }
  html body .mess-app-thread-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body .mess-app-thread-info { min-width: 0; }
  html body .mess-app-thread-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
html body :is(.messenger-app,.mess-app-main,.mess-app-side)::before,
html body :is(.messenger-app,.mess-app-main,.mess-app-side)::after { content: none !important; }

@media (max-width: 1100px) {
  html body .dc-body, html body .dc-body.tools-hidden { --tools-width: 60px; grid-template-columns: 60px minmax(0,1fr) !important; }
  html body .dept-dock-card .dc-tools { display: flex !important; flex-direction: column !important; width: 60px !important; flex: 0 0 60px !important; padding: 8px !important; max-height: none; height: 100% !important; overflow-x: hidden; overflow-y: auto; }
  html body .dept-dock-card .dc-tools > * { width: 100%; flex: 0 0 auto; }
  html body #dc-tools-toggle { display: none !important; }
  html body .dc-tool-row { padding: 6px !important; justify-content: center; min-height: 40px; }
  html body :is(.dc-tool-txt,.dc-tools-head,.dc-grip,.dc-soon) { display: none !important; }
  html body .dc-tool-ico { flex: 0 0 30px; }
}
@media (max-width: 820px) {
  html[data-theme] body .dept-dock-overlay { left: 0 !important; top: 0 !important; }
  html body .dept-dock-card { width: 100%; }
  html body .dc-main { padding: 12px !important; }
  html body .dept-dock-name { font-size: 16px; }
  html body .dept-dock-sub { font-size: 11px; }
  html body .crm-pipeline .pipeline-column { --col-w: calc(100vw - 100px); min-width: calc(100vw - 100px) !important; max-width: calc(100vw - 100px) !important; }
  html body .set-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)) !important; }
  html body :is(.gc-card,.intg-card,.pp-card) { max-width: 100vw; }
}

/* Both feeds use full-width composers. */
html[data-theme] body .fw-grid { grid-template-columns: minmax(0,1fr) 220px; max-width: 1040px; gap: 24px; }
html[data-theme] body .fw-side { display: block; min-height: 0; height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html[data-theme] body .fw-side-card { padding: 16px; border-radius: 8px !important; background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important; box-shadow: none !important; }
html body .fw-side::before, html body .fw-side::after,
html body .fw-side-card::before, html body .fw-side-card::after { content: none !important; }
html[data-theme] body .fw-write {
  background: var(--ui-surface) !important; border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important; box-shadow: none !important; padding: 16px !important;
}
html[data-theme] body .fw-write::before, html[data-theme] body .fw-write::after { content: none !important; }
html body .fw-write-top > .vi-host { flex: 1 1 0; width: 100%; min-width: 0; }
html body .fw-write-top .vi-host, html body .fw-write textarea {
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .fw-write textarea { width: 100% !important; min-height: 68px; padding-right: 32px !important; }
html body .fw-write-foot { flex-wrap: wrap; gap: 8px; }
html body .fw-tabs { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px; }
html body .fw-tab { width: auto !important; flex: 0 0 auto; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; padding: 8px 12px; }
html body .fw-tab.on { border-bottom-color: var(--primary) !important; color: var(--ui-ink) !important; }
html body .fw-kind.on { background: var(--ui-hover) !important; color: var(--ui-ink) !important; border-color: var(--ui-muted) !important; }
html body .fw-ic { flex: 0 0 34px; }
html body .fw-write .vi-host::before, html body .fw-write .vi-host::after { content: none !important; }
html[data-theme] body .fw-grid.cf-grid { display: block; width: 100%; max-width: 780px; margin: 0 auto; }
html body .cf-title { font-size: 22px; line-height: 1.3; margin: 0 0 8px; letter-spacing: 0; }
html body .cf-list-title { font-size: 17px; margin: 12px 0 0; letter-spacing: 0; }
html body .cf-write #fw-text { flex: 1 1 0; width: 0 !important; min-width: 0; min-height: 100px; padding: 6px 0 !important; resize: vertical; }
html body .cf-write .fw-write-top { gap: 12px; }
html body .cf-attachments { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
html body .cf-write .fw-ic, html body .cf-post .fw-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 6px !important; }
html body .cf-publish-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
html body .cf-audience { display: flex; align-items: center; gap: 9px; font-size: 14px; min-height: 40px; cursor: pointer; color: var(--ui-ink); }
html body .cf-audience input, html body .cf-mention-option input { appearance: auto; width: 18px !important; height: 18px !important; min-height: 0 !important; flex: 0 0 18px; margin: 0; accent-color: var(--primary); }
html body .cf-audience input::after, html body .cf-audience input::before,
html body .cf-mention-option input::after, html body .cf-mention-option input::before { content: none !important; }
html body .cf-status, html body #cf-feed-status, html body .cf-post-error { font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
html body .cf-status:not(:empty), html body .cf-post-error:not(:empty) { margin-top: 10px; }
html body .cf-post-error { color: #e88989; }
html body .cf-posts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
html body .cf-post { min-width: 0; width: 100%; box-sizing: border-box; }
html body .cf-post .fw-head { align-items: flex-start; flex-wrap: wrap; height: auto !important; min-height: 0 !important; }
html body .cf-post .fw-who { flex: 1; min-width: 120px; overflow-wrap: anywhere; }
html body .cf-post .fw-who span { font-size: 12px; }
html body .cf-post-tools { margin-left: auto; display: flex; gap: 2px; }
html body .cf-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
html body .cf-tags:not(:empty) { margin-top: 12px; }
html body .cf-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow-wrap: anywhere; font-size: 13px; padding: 6px 8px; border-radius: 6px; background: var(--ui-hover); color: var(--ui-ink); }
html body .cf-tag svg { width: 16px; height: 16px; flex-shrink: 0; }
html body .cf-tag button { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
html body .cf-drafts { display: flex; flex-wrap: wrap; gap: 10px; }
html body .cf-drafts:not(:empty) { margin-top: 12px; }
html body .cf-draft { position: relative; margin: 0; width: 148px; max-width: 100%; min-width: 0; padding: 0; }
html body .cf-draft img, html body .cf-draft video { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; }
html body .cf-draft.cf-audio-draft { width: 100%; padding: 10px; background: var(--ui-hover); border-radius: 6px; }
html body .cf-draft figcaption, html body .cf-audio > span { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; font-size: 13px; margin-bottom: 8px; padding-right: 28px; }
html body .cf-draft figcaption svg, html body .cf-audio > span svg { width: 18px; height: 18px; flex-shrink: 0; }
html body .cf-draft audio, html body .cf-audio audio { display: block; width: 100%; min-width: 0; max-width: 100%; }
html body .cf-remove { display: grid; place-items: center; position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; padding: 0; color: white; background: #25282b; border: 1px solid #626568; border-radius: 6px; cursor: pointer; }
html body .cf-remove svg { width: 16px; height: 16px; }
html body .cf-record:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; color: #e88989; font-size: 14px; }
html body .cf-record button { padding: 8px 12px; background: var(--ui-hover); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: 6px; }
html body .cf-media { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); border-radius: 6px; }
html body .cf-image { display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; min-width: 0; }
html body .cf-image img { width: 100%; height: auto; object-fit: contain; max-height: 520px; }
html body .cf-round-player { display: flex; justify-content: center; margin: 16px 0; }
html body video.cf-round { width: min(260px,100%); aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 50%; }
html body .cf-audio { margin-top: 16px; }
html body .cf-post .fw-comments:empty { display: none; }
html body .cf-post .fw-c { align-items: flex-start; }
html body .cf-post .fw-c .fw-ava { width: 28px; height: 28px; }
html body .cf-post .fw-c span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
html body .cf-post .fw-c time { display: block; font-size: 11px; color: var(--ui-muted); }
html body .cf-comment { display: flex; align-items: center; gap: 8px; }
html body .cf-comment input { min-width: 0; width: 0; flex: 1; border-radius: 6px !important; }
html body .cf-more-comments { border: 0; padding: 8px 0; background: transparent; color: var(--ui-ink); text-align: left; font-size: 13px; cursor: pointer; }
html body .cf-modal .gc-card { width: min(640px,calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; }
html body .cf-modal textarea { width: 100%; min-height: 140px; }
html body .cf-modal .fw-send { margin-top: 12px; }
html body .cf-mention-search { width: 100%; }
html body .cf-mention-list { display: grid; max-height: 50dvh; overflow: auto; margin-top: 12px; }
html body .cf-mention-option { display: flex; align-items: center; gap: 12px; padding: 12px 8px; min-height: 48px; cursor: pointer; }
html body .cf-mention-option:hover { background: var(--ui-hover); }
html body .cf-light-image { display: block; width: 100%; max-height: 75dvh; object-fit: contain; }
@media (max-width: 520px) {
  html body .cf-title { font-size: 20px; }
  html body .cf-write .fw-ic, html body .cf-post .fw-ic { width: 44px; height: 44px; flex-basis: 44px; }
  html body .cf-attachments { gap: 0; }
  html body .cf-write .fw-ava { display: none; }
  html body .cf-publish-row { gap: 8px; }
  html body .cf-publish-row .fw-send { width: 100%; margin: 0; }
  html body .cf-post-tools { width: 100%; justify-content: flex-end; }
  html body .cf-post { padding: 14px !important; }
  html body .cf-modal .gc-card { width: calc(100vw - 16px); padding: 16px !important; }
}
@media (max-width: 1100px) {
  html[data-theme] body .fw-grid { grid-template-columns: minmax(0,1fr); max-width: 720px; }
  html[data-theme] body .fw-side { display: none; }
}

/* Profile chrome stays compact in media, messenger and settings tabs too. */
html body #profile-view .social-hero { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body #profile-view .social-hero::before, html body #profile-view .social-hero::after { content: none !important; }
html body #profile-view .social-avatar { width: 80px !important; height: 80px !important; flex: 0 0 80px; }
html body #profile-view .social-name { font-size: 28px !important; letter-spacing: 0; overflow-wrap: anywhere; }
html body #profile-view .social-actions { flex-wrap: wrap; gap: 8px; }
html body #profile-view .social-action-btn { border-radius: 6px !important; font-size: 13px; min-height: 38px; padding: 8px 12px !important; }
html body #profile-view .social-counter { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body #profile-view .social-main {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body #profile-view .social-main::before, html body #profile-view .social-main::after { content: none !important; }
@media (max-width: 640px) {
  html body #profile-view .social-name { font-size: 24px !important; }
  html body #profile-view .social-actions { width: 100%; }
  html body #profile-view .social-action-btn { font-size: 12px; min-width: 0; }
  html body .fw-kinds { width: 100%; }
  html body .fw-send { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(.nav-item,.dc-tool-row,.dept-card,.company-card,.set-card,.crm-card,.task-card,.gc-card,.intg-card) { transition: none !important; animation: none !important; }
}

/* Mobile shell: one navigation owner, safe-area spacing and touch-sized controls. */
html body #adm-win .adm-seen { display: flex !important; flex-wrap: wrap; gap: 4px 10px; width: auto; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ui-muted); }
html body #adm-win .adm-seen.is-online > span { color: #3bb983; }
html body #adm-win .adm-seen time { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  html body #adm-win .adm-row { display: grid; grid-template-columns: 8px minmax(0,1fr) 44px; gap: 8px; align-items: start; }
  html body #adm-win .adm-dot { grid-column: 1; grid-row: 1; margin-top: 6px; }
  html body #adm-win .adm-who { grid-column: 2; grid-row: 1; min-width: 0; }
  html body #adm-win .adm-state { grid-column: 2; grid-row: 2; width: auto; }
  html body #adm-win .intg-more { grid-column: 3; grid-row: 1; width: 44px; min-height: 44px; }
}
html body .mess-chat-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 10px; background: transparent; color: var(--ui-muted); border: 0; border-radius: 6px; flex: 0 0 44px; }
html body .mess-chat-menu-btn svg { width: 22px; height: 22px; }
html body #chat-ctx-menu { max-height: calc(100dvh - 24px); overflow-y: auto; background: var(--ui-raised) !important; }
html body #mess-delete-dialog { position: fixed; inset: 0; margin: auto; padding: 24px; width: min(440px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; color: var(--ui-ink); background: var(--ui-raised); border: 1px solid var(--ui-line); border-radius: 8px; }
#mess-delete-dialog:not([open]) { display: none !important; }
#mess-delete-dialog::backdrop { background: #0009; }
#mess-delete-dialog h2 { margin: 0 0 12px; font-size: 20px; }
#mess-delete-dialog p { margin: 12px 0; line-height: 1.5; overflow-wrap: anywhere; }
#mess-delete-dialog label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
#mess-delete-dialog input { width: 18px; height: 18px; flex: 0 0 18px; }
#mess-delete-dialog .mess-delete-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
#mess-delete-dialog button { min-height: 44px; padding: 10px 16px; border-radius: 6px; background: var(--ui-hover); color: var(--ui-ink); border: 1px solid var(--ui-line); }
#mess-delete-dialog [data-delete-confirm] { background: #b52f3d; color: #fff; }
#mess-delete-dialog [role="alert"] { color: #ef8087; }
#mobile-company { display: none; }
#mobile-menu { color: var(--ui-ink); background: var(--ui-canvas); border: 1px solid var(--ui-line); }
#mobile-menu:not([open]) { display: none !important; }
@media (max-width: 900px) {
  html body #app-container { grid-template-columns: minmax(0,1fr) !important; }
  html body #app-container > aside { display: none !important; }
  html body #app-container > main { min-width: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  html body #app-container > main > header.glass-panel {
    display: flex !important; gap: 8px; padding: max(8px,env(safe-area-inset-top)) 12px 8px !important;
    min-height: 60px !important; height: auto !important; flex: 0 0 auto; border-radius: 0 !important;
  }
  html body #app-container > main > header > div[style="flex:1;"] { display: none; }
  html body #mobile-company {
    display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; min-height: 44px;
    padding: 4px 0; border: 0; background: transparent; color: var(--ui-ink); text-align: left; font-size: 15px;
  }
  html body #mobile-company svg { width: 22px; height: 22px; flex: 0 0 22px; }
  html body #mobile-company span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .header-actions { display: flex !important; flex: 0 0 auto !important; gap: 4px !important; width: auto !important; padding: 0 !important; }
  html body .header-actions :is(#quick-action-btn,#theme-toggle,#logout-btn,#clock-btn) { display: none !important; }
  html body .header-actions .clock-wrap { display: contents !important; }
  html body .header-actions :is(#header-search-btn,#notif-btn) { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 10px !important; flex: 0 0 44px !important; }
  html body .header-actions :is(#header-search-btn,#notif-btn) svg { width: 24px !important; height: 24px !important; }
  html body .header-search-wrap { flex: 0 0 44px !important; width: 44px !important; }
  html body #header-search-input { position: fixed; top: calc(60px + env(safe-area-inset-top)); left: 12px; right: 12px; width: calc(100% - 24px) !important; background: var(--ui-surface) !important; z-index: 2000; }
  html body .header-search-wrap:not(.open) #header-search-input { display: none !important; }
  html body .header-search-wrap:not(.open) .vi-host { display: none !important; }
  html body .header-search-wrap.open .vi-btn { position: fixed; top: calc(65px + env(safe-area-inset-top)); right: 18px; width: 34px; height: 34px; }
  html body .header-search-wrap.open #header-search-input { display: block !important; height: 44px !important; padding: 10px 12px !important; opacity: 1 !important; }
  html body :is(#companies-menu,#notif-panel,#clock-popover) { position: fixed !important; left: 12px !important; right: 12px !important; top: calc(64px + env(safe-area-inset-top)) !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: calc(var(--mobile-visible-height,100dvh) - 150px) !important; overflow-y: auto; }
  html body .content-body { padding: 12px !important; }
  html body :is(.wtab-content,.ptab-content) { padding: 12px 0 !important; }
  html body .page-view { min-width: 0; }
  html body :is(input,textarea,select) { font-size: 16px !important; max-width: 100%; }
  html body .uname-row > .vi-host { flex: 1 1 0; min-width: 0; }
  html body .uname-row > button { flex: 0 0 auto; }
  html body .uname-row .vi-btn { min-width: 32px; width: 32px; min-height: 32px; height: 32px; padding: 6px; background: transparent !important; border: 0; top: 6px; right: 2px; }
  html body .uname-row .vi-btn svg { width: 20px; height: 20px; }
  html body :is(.btn-primary,.btn-secondary,.btn-outline,.icon-btn,.social-action-btn,.fw-ic,.fw-send) { min-height: 44px !important; }
  html body .icon-btn { min-width: 44px; }
  html body :is(.fw-grid,.set-grid) { grid-template-columns: minmax(0,1fr) !important; }
  html body #mobile-tabbar {
    display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0 !important;
    height: calc(64px + env(safe-area-inset-bottom)) !important; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) !important;
    background: var(--ui-surface) !important; border-top: 1px solid var(--ui-line); box-shadow: none !important;
  }
  html body #mobile-tabbar .mb-tab { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px !important; width: 100% !important; min-width: 0 !important; height: 56px !important; min-height: 56px !important; padding: 4px 0 !important; border-radius: 6px !important; font-size: 11px !important; color: var(--ui-muted); }
  html body #mobile-tabbar .mb-tab span { display: block !important; font-size: 11px !important; line-height: 14px; letter-spacing: 0; }
  html body #mobile-tabbar .mb-tab svg { width: 22px !important; height: 22px !important; }
  html body #mobile-tabbar .mb-tab.active { background: var(--ui-hover) !important; color: var(--ui-ink) !important; }
  html body:not(:has(#app-container:not([style*="display: none"]):not([style*="display:none"]))) #mobile-tabbar,
  html body:has(.dept-dock-overlay) #mobile-tabbar,
  html.mobile-keyboard body #mobile-tabbar { display: none !important; }
  html.mobile-keyboard body #app-container > main { padding-bottom: 0 !important; }
  html body #mobile-menu {
    position: fixed !important; inset: auto 0 0 !important; width: 100% !important; max-width: 100% !important;
    max-height: calc(var(--mobile-visible-height,100dvh) - 24px); margin: 0; padding: 16px 16px max(16px,env(safe-area-inset-bottom));
    border-radius: 8px 8px 0 0 !important; overflow-y: auto; overscroll-behavior: contain;
  }
  #mobile-menu::backdrop { background: #0008; }
  #mobile-menu .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  #mobile-menu h2 { margin: 0; font-size: 20px; }
  #mobile-menu button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 6px; text-align: left; font-size: 14px; color: var(--ui-ink); background: transparent; border: 0; }
  #mobile-menu button svg { width: 22px; height: 22px; flex: 0 0 22px; }
  #mobile-menu .mobile-menu-head button span { display: none; }
  #mobile-menu .mobile-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 0; padding: 4px; background: var(--ui-hover); border-radius: 6px; }
  #mobile-menu [aria-pressed="true"] { background: var(--ui-surface); box-shadow: 0 0 0 1px var(--ui-line); }
  #mobile-menu .mobile-menu-list { display: grid; gap: 4px; }
  #mobile-menu .mobile-menu-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; border-top: 1px solid var(--ui-line); margin-top: 12px; padding-top: 12px; }
  #mobile-menu button span { overflow-wrap: anywhere; }
  html body .dept-dock-card { height: 100dvh !important; max-height: var(--mobile-visible-height,100dvh) !important; border-radius: 0 !important; }
  html body .dept-dock-hero { padding: max(8px,env(safe-area-inset-top)) 62px 8px 12px !important; flex: 0 0 auto; }
  html body .dept-dock-title > div { min-width: 0; }
  html body .dept-dock-sub { white-space: normal; overflow-wrap: anywhere; }
  html body #dc-close { min-width: 44px !important; min-height: 44px !important; z-index: 2; }
  html body .dc-body, html body .dc-body.tools-hidden { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
  html body .dept-dock-card .dc-tools { width: 100% !important; height: 56px !important; max-height: 56px !important; flex: 0 0 56px !important; padding: 4px 8px !important; overflow-x: auto !important; overflow-y: hidden !important; border-right: 0 !important; border-bottom: 1px solid var(--ui-line); }
  html body .dept-dock-card #dc-tools-list { display: flex !important; flex-direction: row !important; width: max-content !important; gap: 4px !important; }
  html body .dc-tool-row { width: 44px !important; height: 44px !important; min-height: 44px !important; flex: 0 0 44px !important; padding: 0 !important; }
  html body .dc-main { width: 100% !important; min-width: 0; min-height: 0; flex: 1 1 0; padding: 12px !important; }
  html body #dc-workspace { min-width: 0; padding-bottom: env(safe-area-inset-bottom); }
  html body .crm-pipeline { scroll-snap-type: x proximity; gap: 12px !important; }
  html body .crm-pipeline .pipeline-column { --col-w: calc(100vw - 36px); min-width: var(--col-w) !important; max-width: var(--col-w) !important; scroll-snap-align: start; }
  html body #crm-dots { display: none; }
  html body #mobile-crm-stage { display: block; width: 100%; min-height: 44px; padding: 8px 12px; margin: 8px 0; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-raised); color: var(--ui-ink); }
  html body :is(#set-win,#intg-win,#adm-win) { padding: 8px !important; }
  html body :is(#set-win .gc-card,#intg-win .intg-card,#adm-win .intg-card) { width: 100% !important; max-width: 100% !important; max-height: calc(var(--mobile-visible-height,100dvh) - 16px) !important; margin: 0 !important; border-radius: 8px !important; }
  html body .mess-app-thread-head { grid-template-columns: 44px 32px minmax(0,1fr) 44px 44px 44px; gap: 0; padding: 6px; }
  html body .mess-app-thread-head > .icon-btn { min-width: 44px !important; width: 44px !important; height: 44px !important; padding: 10px !important; }
  html body .mess-app-thread-name { font-size: 14px; }
  html body .mess-app-side { padding: 12px !important; }
  html body .mess-app-head { padding: 0 !important; min-height: 44px; flex: 0 0 auto; }
  html body .mess-app-head h3 { margin: 0; }
  html body .mess-app-new { width: 44px; height: 44px; flex: 0 0 44px; }
  html body .mess-app-search { margin: 8px 0 !important; padding: 0 10px !important; height: 44px; flex: 0 0 44px; }
  html body .mess-app-search input { min-height: 40px; }
  html body .mess-app-source { padding: 0 0 8px !important; margin: 0; flex: 0 0 auto; }
  html body .mess-src-btn { min-height: 44px; }
  html body .mess-app-thread-avatar-wrap { width: 32px; height: 32px; }
  html body .messenger-app { min-height: 180px !important; }
  html body .mess-app-composer { display: flex; flex-wrap: wrap; gap: 4px 2px; padding: 8px 8px max(8px,env(safe-area-inset-bottom)) !important; }
  html body .mess-app-composer > .vi-host,
  html body .mess-app-composer > #mess-app-input { order: 0; flex: 1 1 calc(100% - 50px); min-width: 0; }
  html body .mess-app-composer > button { order: 2; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; padding: 10px !important; }
  html body .mess-app-composer > .mess-app-send { order: 1; margin-left: 0; }
  html body .mess-app-composer > button svg { width: 22px; height: 22px; }
  html body #w-messages > div:first-child { margin-bottom: 8px !important; gap: 8px !important; }
  html body #w-messages > div:first-child p { display: none; }
}
@media (max-width: 600px) {
  html body .mess-app-list { padding: 4px 0 12px; }
  html body .mess-app-item:has(.mess-chat-menu-btn) { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; grid-template-rows: 44px 28px; gap: 2px 8px; padding: 8px 4px; }
  html body .mess-app-item:has(.mess-chat-menu-btn) > .mess-app-avatar-wrap { grid-column: 1; grid-row: 1; }
  html body .mess-app-item:has(.mess-chat-menu-btn) > .mess-app-item-body { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  html body .mess-app-item:has(.mess-chat-menu-btn) .mess-app-item-head { display: block; }
  html body .mess-app-item:has(.mess-chat-menu-btn) .mess-app-item-name { display: block; }
  html body .mess-chat-menu-btn { grid-column: 3; grid-row: 1; min-width: 44px; min-height: 44px; }
  html body .mess-app-item:has(.mess-chat-menu-btn) > .mess-app-unread { grid-column: 1; grid-row: 2; justify-self: center; }
  html body .mess-ptt-item-btn { grid-column: 3; grid-row: 2; width: 44px; min-height: 44px; align-self: center; }
}
@media (max-width: 900px) and (max-height: 500px) {
  html body .mess-app-side:has(.mess-src-btn[data-msrc="internal"].active) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: 44px 44px auto minmax(0,1fr); gap: 4px 12px; }
  html body .mess-app-head { grid-column: 1 / -1; }
  html body .mess-app-search { grid-column: 1; grid-row: 2; margin: 0 !important; }
  html body .mess-app-source { grid-column: 2; grid-row: 2; padding: 0 !important; }
  html body #mess-sync-status { grid-column: 1 / -1; grid-row: 3; }
  html body .mess-app-list { grid-column: 1 / -1; grid-row: 4; }
  html body:has(.active .messenger-app.has-active-chat) #mobile-tabbar,
  html body:has(.active .messenger-app.has-active-chat) #app-container > main > header { display: none !important; }
  html body:has(.active .messenger-app.has-active-chat) #app-container > main { padding-bottom: 0 !important; }
  html body .page-view.active .messenger-app.has-active-chat { height: calc(var(--mobile-visible-height,100dvh) - 40px) !important; }
  html body #w-messages:has(.messenger-app.has-active-chat) > div:first-child { display: none !important; }
}
/* Company chat: bounded columns, scrollable history and touch-sized controls. */
#wc-root { max-width: 1320px; margin: 0 auto; min-width: 0; color: var(--text-main); }
.wc-top { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.wc-top h2 { font-size:24px; margin:0; }
.wc-top > span, .wc-hint, .wc-empty, .wc-message-meta, #wc-chat-header small { color:var(--text-muted); font-size:13px; }
.wc-stories { display:flex; gap:16px; overflow-x:auto; padding:8px 0 20px; min-height:100px; }
.wc-story { flex:0 0 72px; width:72px; background:none; border:0; color:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; }
.wc-story > span:last-child { font-size:12px; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-story-face { width:60px; height:60px; border:2px solid var(--primary,#a8b3d5); border-radius:50%; padding:3px; display:grid; place-items:center; background:var(--bg-card,#202326); }
.wc-story-face img, .wc-story-face > span { width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; font-size:24px; }
.wc-layout { display:grid; grid-template-columns:280px minmax(0,1fr); grid-template-rows:minmax(0,1fr); border:1px solid var(--border-color); border-radius:8px; overflow:hidden; height: min(740px, calc(100dvh - 240px)); min-height:420px; background:rgba(24,27,29,.88); backdrop-filter:blur(16px); }
#wc-root .wc-sidebar { min-width:0; min-height:0; height:auto; max-height:100%; overflow-y:auto; border-right:1px solid var(--border-color); padding:16px 10px; }
.wc-sidebar h3 { margin:0 8px 14px; font-size:15px; }
.wc-room, .wc-complaint { width:100%; display:flex; align-items:center; gap:10px; min-height:48px; padding:10px; border:0; border-radius:6px; background:none; text-align:left; color:inherit; cursor:pointer; font:inherit; font-size:14px; }
.wc-room:hover { background:rgba(255,255,255,.05); }
.wc-room.selected { background:rgba(172,181,207,.14); }
.wc-room svg, .wc-complaint svg { width:19px; height:19px; flex-shrink:0; }
.wc-room > span { min-width:0; overflow-wrap:anywhere; }
.wc-room small { display:block; color:var(--text-muted); margin-top:3px; font-size:12px; }
.wc-unread { margin-left:auto; background:#80d6b3; color:#10271e; border-radius:20px; padding:2px 6px; font-size:12px; }
#wc-inboxes { border-top:1px solid var(--border-color); margin-top:16px; padding-top:10px; }
#wc-inboxes summary { cursor:pointer; padding:12px 6px; font-size:13px; font-weight:600; }
.wc-complaint { color:#edd171; margin-top:16px; font-size:13px; }
#wc-root .wc-conversation { display:flex; flex-direction:column; min-width:0; min-height:0; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; }
#wc-chat-header { display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid var(--border-color); flex-shrink:0; min-height:72px; }
#wc-chat-header h3 { font-size:16px; line-height:1.4; margin:0; overflow-wrap:anywhere; }
#wc-chat-header [data-wc="back"] { display:none; }
#wc-history { flex:1; min-height:0; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; overscroll-behavior:contain; }
.wc-empty { padding:20px 8px; text-align:center; }
.wc-locked { display:flex; flex-direction:column; align-items:center; gap:18px; margin:auto; text-align:center; }
.wc-locked > svg { width:36px; height:36px; color:var(--text-muted); }
.wc-locked h3 { font-size:16px; }
.wc-message { width:fit-content; max-width:85%; align-self:flex-start; padding:10px 14px; border-radius:8px; background:#303537; overflow-wrap:anywhere; flex-shrink:0; }
.wc-message.mine { align-self:flex-end; background:#234b43; }
.wc-message-author { font-size:12px; font-weight:600; color:#b6d8ef; margin-bottom:5px; }
.wc-message-text { white-space:pre-wrap; font-size:14px; line-height:1.55; }
.wc-message-meta { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:6px; font-size:11px; flex-wrap:wrap; }
.wc-message-meta > svg { width:15px; height:15px; }
.wc-message-meta .wc-icon { width:36px; height:36px; }
.wc-message audio, .wc-message-image { max-width:100%; }
.wc-message-image { display:block; max-height:300px; object-fit:contain; }
.wc-forwarded { font-size:12px; display:flex; gap:6px; align-items:center; margin-bottom:7px; color:#d7d7d7; }
.wc-forwarded svg { width:15px; height:15px; }
#wc-compose { display:flex; align-items:flex-end; gap:8px; padding:12px 16px; border-top:1px solid var(--border-color); flex-shrink:0; }
#wc-compose[hidden] { display:none; }
#wc-text { width:100%; min-width:0; min-height:44px; max-height:140px; resize:vertical; border:1px solid var(--border-color); border-radius:6px; background:rgba(255,255,255,.04); color:inherit; padding:11px 12px; font:inherit; font-size:16px; }
.wc-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 auto; padding:8px; border:1px solid var(--border-color); border-radius:6px; background:rgba(255,255,255,.04); color:inherit; cursor:pointer; }
.wc-icon svg { width:20px; height:20px; }
.wc-icon[hidden] { display:none; }
.wc-send { background:#cfdfda; color:#122820; }
.wc-icon.on-air { background:#bd453f; color:white; box-shadow:0 0 0 3px rgba(231,113,103,.25); }
[data-wc="radio"] { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#wc-air-status { min-height:0; padding:0 16px; font-size:12px; color:#f2a29c; }
#wc-air-status:not(:empty) { padding-bottom:10px; }
#wc-status { font-size:13px; color:#efd387; }
#wc-status:not(:empty) { padding:8px 0; }
.wc-older { align-self:center; padding:10px; color:var(--text-main); background:transparent; border:1px solid var(--border-color); border-radius:6px; cursor:pointer; }
.wc-dialog { width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow-y:auto; margin:auto; padding:20px; border:1px solid var(--border-color); border-radius:8px; color:var(--text-main); background:#202427; box-shadow:0 16px 60px #0008; }
.wc-dialog::backdrop { background:#0009; backdrop-filter:blur(6px); }
.wc-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.wc-dialog-header h3 { font-size:18px; margin:0; overflow-wrap:anywhere; }
.wc-dialog label { display:block; font-size:14px; margin:14px 0; }
.wc-dialog textarea, .wc-dialog select { display:block; width:100%; max-width:100%; color:inherit; background:#303638; border:1px solid var(--border-color); border-radius:6px; padding:12px; margin-top:8px; font:inherit; font-size:16px; }
.wc-dialog input[type="file"] { display:block; width:100%; margin:10px 0; font-size:13px; }
.wc-dialog .wc-check { display:flex; gap:10px; align-items:center; }
.wc-check input[type="checkbox"] { appearance:auto!important; -webkit-appearance:checkbox!important; width:20px!important; height:20px!important; min-width:20px; margin:0!important; }
.wc-check input::before, .wc-check input::after { display:none!important; }
.wc-dialog blockquote { padding:14px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow-y:auto; border-left:2px solid #8bbca9; background:#ffffff08; }
.wc-dialog-status { font-size:13px; color:#efd387; margin-top:12px; }
.wc-story-media img, .wc-story-media video { display:block; width:100%; max-height:55dvh; object-fit:contain; margin-top:16px; }
.wc-story-text { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.wc-story-controls { display:flex; justify-content:center; gap:12px; margin-top:16px; }
.wc-hint { line-height:1.5; }
.wc-shake { animation:wc-shake .32s ease; }
@keyframes wc-shake { 25%,75% { transform:translateX(-4px); } 50% { transform:translateX(4px); } }
@media(prefers-reduced-motion:reduce) { .wc-shake { animation:none; outline:2px solid #d7bd6f; } }
@media(max-width:767px) {
  #feed-view:has(#wc-root) { padding:12px!important; }
  .wc-top { margin-bottom:8px; }
  .wc-top h2 { font-size:20px; }
  .wc-layout { grid-template-columns:minmax(0,1fr); height:calc(100dvh - 290px); min-height:200px; }
  .wc-sidebar { border:0; }
  #wc-root .wc-conversation { display:none; }
  .wc-chat-open .wc-sidebar { display:none; }
  #wc-root.wc-chat-open .wc-conversation { display:flex; }
  #wc-chat-header [data-wc="back"] { display:inline-flex; }
  #wc-chat-header { padding:10px; min-height:65px; }
  #wc-history { padding:12px; }
  .wc-message { max-width:95%; padding:10px; }
  #wc-compose { padding:8px; gap:6px; }
  .wc-dialog { padding:14px; }
}
@media(max-height:500px) { .wc-stories, .wc-top { display:none; } .wc-layout { height:calc(100dvh - 135px); min-height:180px; } }

/* Colleagues on the left, team rooms on the right; conversation stays central. */
#wc-root .wc-layout { grid-template-columns:minmax(170px,210px) minmax(260px,1fr) minmax(190px,240px); min-height:200px; }
#wc-root .wc-team-sidebar { border-right:0; border-left:1px solid var(--border-color); }
.wc-mobile-tabs { display:none; }
.wc-room-row { display:flex; align-items:center; gap:2px; min-width:0; }
.wc-room-row .wc-room { flex:1; min-width:0; width:auto; padding:10px 6px; font-size:13px; }
.wc-room-row .wc-room small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.wc-send-error { color:#ffb4a9; font-size:12px; line-height:1.4; margin:6px 0; }
.wc-radio { border:0; color:#edc367; width:40px; min-width:40px; padding:8px; background:transparent; }
.wc-radio:hover { background:#edc36718; }
.wc-radio.on-air { background:#aa3935; color:#fff; }
.wc-person-avatar { width:30px; height:30px; min-width:30px!important; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#384741; }
.wc-person-avatar img { width:100%; height:100%; object-fit:cover; }
#wc-people-search { width:100%; min-width:0; font-size:16px; padding:10px; margin-bottom:12px; border:1px solid var(--border-color); background:#ffffff08; border-radius:6px; color:inherit; }
#wc-compose { display:block; padding:10px; }
.wc-compose-row { display:flex; align-items:flex-end; gap:6px; min-width:0; }
.wc-compose-row #wc-text { flex:1; min-width:0; }
#wc-attachment-drafts:empty { display:none; }
#wc-attachment-drafts { display:flex; gap:6px; flex-wrap:wrap; padding-bottom:8px; max-height:130px; overflow-y:auto; }
.wc-draft-file { display:flex; align-items:center; gap:6px; max-width:100%; min-width:0; background:#ffffff0b; border-radius:6px; padding:4px 8px; font-size:12px; }
.wc-draft-file > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-draft-file > svg { width:16px; height:16px; flex-shrink:0; }
.wc-draft-file .wc-icon { width:32px; height:32px; padding:5px; }
.wc-dialog input:not([type="checkbox"]):not([type="file"]) { width:100%; min-width:0; padding:10px; color:inherit; background:#303638; border:1px solid var(--border-color); border-radius:6px; font-size:16px; margin-top:8px; }
.wc-dialog [hidden] { display:none!important; }
.wc-attach-menu { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wc-attach-menu button { display:flex; align-items:center; gap:10px; min-height:52px; padding:10px; color:inherit; background:#ffffff06; border:1px solid var(--border-color); border-radius:6px; cursor:pointer; text-align:left; font-size:14px; }
.wc-attach-menu svg { width:20px; min-width:20px; }
.wc-attachment { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; max-width:100%; }
.wc-attachment > span { flex:1; min-width:0; font-size:13px; }
.wc-attachment small { display:block; color:var(--text-muted); margin-top:4px; }
.wc-attachment img, .wc-attachment video { max-width:100%; width:300px; max-height:300px; object-fit:contain; border-radius:6px; }
.wc-attachment video.wc-video-note { width:220px; height:220px; aspect-ratio:1; border-radius:50%; object-fit:cover; }
.wc-attachment audio { width:280px; max-width:100%; min-width:0; }
.wc-attachment a { display:flex; align-items:center; gap:6px; width:100%; font-size:12px; color:inherit; overflow-wrap:anywhere; }
.wc-attachment a svg { width:15px; height:15px; flex-shrink:0; }
.wc-media-loading { opacity:.6; }
.wc-pending-file { display:flex; align-items:center; gap:8px; font-size:13px; padding-top:8px; }
.wc-pending-file svg { width:16px; height:16px; flex-shrink:0; }
.wc-task { border-top:1px solid #ffffff25; margin-top:10px; padding-top:10px; font-size:13px; }
.wc-task strong { display:flex; align-items:center; gap:8px; }
.wc-task svg { width:18px; height:18px; flex-shrink:0; }
.wc-task p { white-space:pre-wrap; margin:8px 0; }
.wc-task small { color:#c8d4d0; }
.wc-task-status { min-height:44px; display:flex; align-items:center; gap:8px; background:transparent; color:#c5edcf; border:0; cursor:pointer; margin-top:6px; text-align:left; }
.wc-rec-preview { display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px; }
.wc-rec-preview video { width:240px; height:240px; max-width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.wc-rec-symbol { width:88px; height:88px; border-radius:50%; display:grid; place-items:center; background:#ad4436; }
.wc-rec-symbol svg { width:32px; height:32px; }
.wc-rec-preview time { font-variant-numeric:tabular-nums; font-size:20px; }
.wc-uploading .wc-story-face, .wc-upload-failed .wc-story-face { position:relative; }
.wc-uploading .wc-story-face::after { content:''; position:absolute; inset:-5px; border:3px solid #7bcbb43a; border-top-color:#7bcbb4; border-right-color:#7bcbb4; border-radius:50%; animation:wc-upload-spin .9s linear infinite; }
.wc-uploading .wc-story-face b, .wc-upload-failed .wc-story-face b { position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; background:#15261ddd; font-size:13px; color:white; }
.wc-upload-failed .wc-story-face { border-color:#ed867c; }
.wc-upload-failed .wc-story-face b { background:#501c24d9; }
@keyframes wc-upload-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .wc-uploading .wc-story-face::after { animation:none; } }
@media(max-width:1100px) {
  #wc-root .wc-layout { grid-template-columns:minmax(0,1fr); }
  .wc-mobile-tabs { display:flex; gap:8px; padding-bottom:8px; }
  .wc-mobile-tabs button { flex:1; min-height:44px; color:var(--text-muted); background:transparent; border:0; border-bottom:2px solid transparent; font-size:14px; cursor:pointer; }
  .wc-mobile-tabs [aria-selected="true"] { color:var(--text-main); border-bottom-color:var(--primary); }
  #wc-root .wc-team-sidebar, #wc-root .wc-conversation { display:none; }
  #wc-root.wc-show-team .wc-people-sidebar { display:none; }
  #wc-root.wc-show-team .wc-team-sidebar { display:block; border:0; }
  #wc-root.wc-chat-open .wc-sidebar { display:none; }
  #wc-root.wc-chat-open .wc-conversation { display:flex; }
  #wc-root.wc-chat-open .wc-mobile-tabs { display:none; }
  #wc-chat-header [data-wc="back"] { display:inline-flex; }
  .wc-radio { width:44px; height:44px; }
}
@media(max-width:390px) {
  #wc-compose { padding:6px; }
  .wc-compose-row { gap:4px; }
  #wc-text { padding:10px 6px; }
}

/* Keep chat controls independent of the global pill-shaped form styles. */
#wc-root .wc-layout { grid-template-columns:minmax(206px,240px) minmax(260px,1fr) minmax(220px,252px); }
#wc-root .wc-sidebar { padding:0 12px 12px; scrollbar-width:thin; }
#wc-root .wc-people-sidebar { border-right:1px solid var(--border-color); }
#wc-root .wc-sidebar > h3 { display:flex; align-items:center; min-height:72px; margin:0; padding:0 8px; font-size:14px; line-height:20px; font-weight:600; }
#wc-root .wc-search { display:flex; align-items:center; gap:8px; height:40px; margin:0 0 12px; padding:0 10px; background:#ffffff05; border:1px solid var(--border-color); border-radius:6px; cursor:text; }
#wc-root .wc-search > svg { flex:0 0 16px; width:16px; height:16px; color:var(--text-muted); }
#wc-root #wc-people-search { appearance:none; width:100%; height:38px; min-height:0; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; color:inherit; font:inherit; font-size:14px; line-height:20px; }
#wc-root .wc-search:focus-within { border-color:var(--primary); box-shadow:0 0 0 2px #a8b3d518; }
#wc-root .wc-room-row { gap:4px; min-height:56px; margin-bottom:2px; padding:2px 4px; border-radius:6px; }
#wc-root .wc-room-row:hover { background:#ffffff05; }
#wc-root .wc-room-row:has(.selected) { background:#a8b3d514; }
#wc-root .wc-room-row .wc-room { min-height:48px; padding:6px 4px; gap:10px; line-height:19px; border-radius:4px; background:transparent; font-size:13px; }
#wc-root .wc-person-avatar { width:34px; height:34px; min-width:34px!important; font-size:13px; }
#wc-root .wc-radio { width:36px; min-width:36px; height:44px; border-radius:6px; }
#wc-root .wc-radio svg { width:18px; height:18px; }
#wc-root #wc-chat-header { padding:14px 18px; min-height:72px; }
#wc-root #wc-chat-header h3 { font-size:15px; }
#wc-root #wc-chat-header small { display:block; margin-top:3px; font-size:12px; }
#wc-root #wc-compose { padding:12px; }
#wc-root .wc-compose-row { gap:8px; align-items:flex-end; }
#wc-root #wc-text { height:44px; min-height:44px; max-height:132px; padding:11px 12px!important; margin:0; border-radius:6px!important; line-height:20px; font-size:14px; resize:none; box-shadow:none; overflow-y:auto; }
#wc-root .wc-compose-row > .wc-icon { width:44px; height:44px; border-radius:6px!important; box-shadow:none; }
#wc-root .wc-compose-row > .wc-icon:not(.wc-send) { border-color:transparent; background:transparent; color:var(--text-muted); }
#wc-root .wc-compose-row > .wc-icon:not(.wc-send):hover { background:#ffffff0a; color:var(--text-main); }
#wc-root .wc-send { border-color:transparent; }
#wc-root .wc-empty { margin:auto; padding:24px 12px; }
#wc-root :is(.wc-room,.wc-radio,.wc-icon):focus-visible { outline:2px solid var(--primary)!important; outline-offset:-2px; }
@media(max-width:1100px) {
  #wc-root .wc-layout { grid-template-columns:minmax(0,1fr); }
  #wc-root .wc-people-sidebar { border-right:0; }
  #wc-root .wc-radio { width:44px; min-width:44px; }
  #wc-root .wc-sidebar > h3 { min-height:56px; }
  #wc-root #wc-people-search, #wc-root #wc-text { font-size:16px; }
}
@media(max-width:767px) {
  #wc-root #wc-chat-header { padding:10px 12px; min-height:64px; }
  #wc-root #wc-compose { padding:8px; }
  #wc-root .wc-compose-row { gap:4px; }
  #wc-root #wc-text { padding:11px 8px!important; }
}

#wc-recording[hidden], #wc-recording [hidden] { display:none!important; }
#wc-compose.wc-is-recording > .wc-compose-row,
#wc-compose.wc-is-recording > #wc-attachment-drafts { display:none; }
#wc-recording { min-width:0; }
#wc-root [data-wc="record-audio"] { touch-action:manipulation; user-select:none; -webkit-user-select:none; }
#wc-root .wc-rec-bar { display:flex; align-items:center; gap:10px; min-width:0; min-height:44px; }
#wc-root .wc-rec-bar .wc-icon { width:44px; height:44px; border-radius:6px; flex:0 0 44px; }
#wc-root .wc-rec-bar [data-wc="record-cancel"] { border:0; background:transparent; color:#ee9991; }
#wc-root .wc-rec-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#ee766e; animation:wc-rec-pulse 1.2s ease-in-out infinite; }
#wc-root .wc-rec-bar time { font-size:14px; font-variant-numeric:tabular-nums; min-width:42px; }
#wc-root .wc-rec-wave { flex:1; min-width:12px; height:26px; display:flex; align-items:center; justify-content:center; gap:3px; overflow:hidden; }
#wc-root .wc-rec-wave i { display:block; width:3px; flex:0 0 3px; height:3px; border-radius:2px; background:#b5d6cb; transition:height 90ms linear; }
#wc-root .wc-rec-permission, #wc-root .wc-rec-ready { flex:1; min-width:0; font-size:13px; color:var(--text-muted); }
#wc-root .wc-rec-camera { display:block; width:144px; height:144px; aspect-ratio:1; object-fit:cover; border-radius:50%; margin:0 auto 12px; background:#101415; }
#wc-root .wc-rec-review audio { display:block; flex:1; width:0; min-width:0; max-width:100%; height:44px; }
#wc-root .wc-rec-error { color:#ee9991; font-size:12px; }
#wc-root .wc-rec-error:not(:empty) { padding-top:8px; }
@keyframes wc-rec-pulse { 50% { opacity:.35; } }
@media(prefers-reduced-motion:reduce) { #wc-root .wc-rec-dot { animation:none; } #wc-root .wc-rec-wave i { transition:none; } }
@media(max-width:390px) {
  #wc-root .wc-rec-bar { gap:6px; }
}
@media(max-height:500px) { #wc-root .wc-rec-camera { width:96px; height:96px; margin-bottom:6px; } }

/* Presence is a 7px dot; the separate green ring means an unseen story. */
:root { --presence-green:#45c58a; }
#wc-root .wc-person-avatar, .wc-viewers-list .wc-person-avatar { position:relative; overflow:visible; flex-shrink:0; }
#wc-root .wc-person-avatar img, .wc-viewers-list .wc-person-avatar img { border-radius:50%; }
#wc-root .wc-online-dot, html body .mess-app-online, html body .employee-status.online,
.mess-app-thread-avatar-wrap.is-online::after, .people-ava.is-online::after {
  position:absolute; content:''; display:block; box-sizing:content-box;
  width:7px; height:7px; min-width:0; right:-1px; bottom:0; top:auto; left:auto;
  border:2px solid var(--bg-card,#1b1f20); border-radius:50%; background:var(--presence-green); z-index:2;
}
html body .mess-app-avatar-wrap, html body .people-ava { overflow:visible; }
html body .people-ava > img { border-radius:inherit; }
html body .mess-app-avatar-wrap.is-online.has-photo::before,
html body .mess-app-thread-avatar-wrap.is-online.has-photo::before { content:none; }
html body .mess-app-thread-head.online .mess-app-thread-name { filter:none; }
#wc-root .wc-avatar-button, #wc-root .wc-avatar-slot {
  display:grid; place-items:center; width:44px; min-width:44px; height:44px;
  margin:0; padding:5px; border:0; border-radius:50%; background:transparent; color:inherit; flex-shrink:0;
}
#wc-root .wc-avatar-button:hover { background:#ffffff0a; }
#wc-root .wc-avatar-button:focus-visible, .wc-viewers-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
#wc-root .wc-person-avatar.wc-story-unseen { outline:2px solid var(--presence-green); outline-offset:3px; }
#wc-root .wc-story.wc-story-unseen .wc-story-face { border-color:var(--presence-green); }
#wc-root .wc-story.wc-story-seen .wc-story-face { border-color:var(--border-color); }
#wc-root .wc-online-label { color:var(--presence-green); }
#wc-root .wc-person-row .wc-room { flex:1; min-width:0; }
#wc-peer-presence { flex-shrink:0; }
#wc-chat-header > div:last-child { min-width:0; }
.wc-story-controls { flex-wrap:wrap; }
.wc-viewers-button { display:inline-flex; gap:8px; align-items:center; min-height:44px; padding:6px 10px; border:1px solid var(--border-color); border-radius:6px; background:transparent; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.wc-viewers-button svg { width:18px; height:18px; }
.wc-viewers-list { list-style:none; padding:0; margin:12px 0 0; max-height:220px; overflow-y:auto; }
.wc-viewers-list li { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border-color); }
.wc-viewers-list li > div { min-width:0; }
.wc-viewers-list strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.wc-viewers-list small { display:block; margin-top:3px; color:var(--text-muted); font-size:12px; }

/* Mirror camera frames once, at display time. Uploaded films and shared screens keep their orientation. */
html body :is(video.camera-mirrored, video.wc-rec-camera, .wc-rec-preview video,
  video.wc-video-note, .mess-round-preview video, video.mess-round-video,
  video.mp-round, video.once-round, video.mc-live-round, video.mc-prev-round,
  video.rr-cam, video.fw-round, video.cf-round, .tgm video.round,
  .wc-story-media video, #story-viewer-pane video,
  #live-preview video, #mess-call-local, #mess-call-remote, .bf-tile:not(.screen) > video) {
  --camera-mirror:-1;
  transform:scaleX(-1)!important;
}
/* Keep native playback controls readable and in their normal order. */
video::-webkit-media-controls-panel { transform:scaleX(var(--camera-mirror,1)); }