/* Whistle master-spec: common primitives and page compositions, after legacy compatibility layers. */
:root {
 --background:#f7fafc;--surface:#fff;--surface-secondary:#f4f8fb;--surface-hover:#edf5f9;--sidebar-surface:#f2f8fa;
 --text-primary:#0d1b38;--text-secondary:#637187;--text-muted:#748298;--border:#e3eaf1;
 --brand-500:#18c998;--brand-600:#0fb989;--blue-500:#368bff;--violet-500:#7956f5;--orange-500:#f5a623;
 --tone-success:#087957;--tone-success-bg:#e5faf0;--tone-info:#165eb0;--tone-info-bg:#eaf3ff;--tone-warning:#80510b;--tone-warning-bg:#fff5df;--tone-danger:#b22d3b;--tone-danger-bg:#ffedf0;--tone-neutral:var(--text-secondary);--tone-neutral-bg:var(--surface-secondary);
 --teal:var(--brand-600);--line:var(--border);--bg:var(--background);--ink:var(--text-primary);--surface-2:var(--surface-secondary);--muted:var(--text-secondary);
 --shadow-card:0 2px 8px rgb(13 27 56 / .025);--shadow-float:0 18px 56px rgb(13 27 56 / .15);--sidebar-width:232px;--control-height:40px;
}
html[data-theme="dark"] {
 --background:#071823;--surface:#0d2230;--surface-secondary:#102a3a;--surface-hover:#142f40;--sidebar-surface:#091d29;
 --text-primary:#f4f7fa;--text-secondary:#afbdca;--text-muted:#91a4b6;--border:#223b4b;--brand-600:#18c998;
 --tone-success:#76e9c2;--tone-success-bg:#103d33;--tone-info:#94c9ff;--tone-info-bg:#14334d;--tone-warning:#ffd185;--tone-warning-bg:#3c3020;--tone-danger:#ffadb7;--tone-danger-bg:#46252f;
 --shadow-card:0 2px 10px rgb(0 0 0 / .07);--shadow-float:0 20px 60px rgb(0 0 0 / .35);
}
html[data-contrast="high"] {--text-secondary:#334661;--text-muted:#334661;--border:#75879d;--brand-600:#075d49}
html[data-theme="dark"][data-contrast="high"] {--text-secondary:#e2ecf4;--text-muted:#e2ecf4;--border:#8ca9bd;--brand-600:#a2f8df}
body[data-design-system="whistle-512"] {font-size:14px;line-height:1.5}
body[data-design-system] main {max-width:1600px;padding:28px 32px 48px}
body[data-design-system] .topbar {height:64px;padding:0 24px;background:var(--surface);border-color:var(--border)}
body[data-design-system] #sidebar {background:var(--sidebar-surface)}
body[data-design-system] #sidebar nav button {min-height:36px;font-size:13px;font-weight:500;padding:7px 10px;border-radius:8px}
body[data-design-system] #sidebar nav button.active {background:var(--ui-soft);box-shadow:none;color:var(--text-primary)}
body[data-design-system] .primary {background:var(--teal);color:var(--primary-foreground);border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:600;min-height:40px;padding:9px 14px;box-shadow:none}
body[data-design-system] .secondary {background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);font-size:13px;font-weight:500;min-height:40px;padding:8px 12px}
body[data-design-system] :is(.primary,.secondary):disabled {opacity:.5;cursor:not-allowed}
body[data-design-system] :is(.primary,.secondary):hover:not(:disabled) {filter:brightness(.97);transform:none}
body[data-design-system] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {font:inherit;border-radius:10px;color:var(--text-primary);border-color:var(--border);background:var(--surface-secondary)}
body[data-design-system] :is(.ws-card,.panel,.modal-card,.knowledge-card) {border-color:var(--border);border-radius:16px;box-shadow:var(--shadow-card)}
body[data-design-system] :is(.page-head,#moduleView .page-head) {align-items:center;margin-bottom:20px}
body[data-design-system] :is(.page-head h1,#moduleView .page-head h1) {font-size:30px;line-height:1.25;letter-spacing:-.03em;font-weight:650;margin:4px 0 6px}
.ws-view-switch {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ws-view-switch button,.work-list-filters button,.desk-queues button {border:1px solid transparent;border-radius:8px;padding:7px 12px;min-height:34px;background:var(--surface-secondary);color:var(--text-secondary);font:inherit;font-size:12px;cursor:pointer}
.ws-view-switch button[aria-pressed="true"],.work-list-filters button.active,.desk-queues button.active {background:var(--ui-soft);color:var(--text-primary);border-color:color-mix(in srgb,var(--teal) 28%,var(--border))}
.ws-badge {display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 8px;min-height:24px;font-size:11px;line-height:1.3;font-weight:600;background:var(--tone-neutral-bg);color:var(--tone-neutral);white-space:normal}
.ws-badge::before {content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
:is(.ws-badge,.ws-item-icon)[data-tone="success"] {background:var(--tone-success-bg);color:var(--tone-success)}
:is(.ws-badge,.ws-item-icon)[data-tone="info"] {background:var(--tone-info-bg);color:var(--tone-info)}
:is(.ws-badge,.ws-item-icon)[data-tone="warning"] {background:var(--tone-warning-bg);color:var(--tone-warning)}
:is(.ws-badge,.ws-item-icon)[data-tone="danger"] {background:var(--tone-danger-bg);color:var(--tone-danger)}
.ws-item-icon {display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:var(--surface-secondary);color:var(--text-secondary)}
.ws-item-icon svg {width:18px;height:18px}
.ws-text-button {background:transparent;border:0;color:var(--text-secondary);font:inherit;font-size:12px;padding:8px;min-height:34px;cursor:pointer}
.ws-text-button:hover {color:var(--text-primary);background:var(--surface-secondary);border-radius:8px}
.ws-empty {display:grid;justify-items:center;align-content:center;min-height:220px;padding:32px 24px;text-align:center;color:var(--text-secondary);grid-column:1/-1}
.ws-empty-icon {display:grid;place-items:center;width:60px;height:60px;border-radius:20px;background:var(--tone-info-bg);color:var(--tone-info);margin-bottom:12px}
.ws-empty-icon svg {width:28px;height:28px}
.ws-empty h2 {font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 8px;line-height:1.4}
.ws-empty p {font-size:13px;max-width:38ch;line-height:1.6;margin:0 0 16px}
.ws-skeleton {display:grid;gap:10px;padding:12px 0}
.ws-skeleton>div {display:grid;grid-template-columns:36px 1fr 20%;gap:14px;align-items:center;min-height:52px}
.ws-skeleton :is(i,span) {height:12px;border-radius:6px;background:var(--surface-secondary)}
.ws-skeleton i {height:36px;border-radius:10px}
body[data-design-system] #dashboardView .ws-home-hero {min-height:180px;padding:28px 32px;position:relative;isolation:isolate;background:radial-gradient(ellipse at 85% 10%,#c2f6e6 0,transparent 45%),linear-gradient(115deg,#f0fbf9,#e6f3ff);border:1px solid var(--border);border-radius:20px;overflow:hidden}
body[data-design-system] #dashboardView .ws-home-hero::after {content:"";position:absolute;width:380px;height:190px;right:0;top:0;border:0;border-radius:0;background:url('./hero-scene-v512.svg') center/contain no-repeat;z-index:-1;opacity:.9}
body[data-design-system] #dashboardView .ws-home-hero>div {max-width:calc(100% - 280px)}
body[data-design-system] #dashboardView .ws-home-hero>.primary {position:absolute;right:24px;bottom:20px}
html[data-theme="dark"] body[data-design-system] #dashboardView .ws-home-hero {background:radial-gradient(ellipse at 95% 10%,#075154 0,transparent 55%),linear-gradient(115deg,#102b2b,#0d2338)}
html[data-theme="dark"] body[data-design-system] #dashboardView .ws-home-hero::after {opacity:.7}
body[data-design-system] #dashboardView .metric-grid article {min-height:100px;padding:16px 16px 16px 68px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-card)}
body[data-design-system] #dashboardView .metric-grid strong {font-size:28px;line-height:1.2}
body[data-design-system] #dashboardView .metric-grid small {font-size:11px;color:var(--text-secondary)}
body[data-design-system] #dashboardView .ws-home-grid {grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
body[data-design-system] #dashboardView .panel {padding:20px}
body[data-design-system] #dashboardView .panel-head h2 {font-size:18px;line-height:1.4;margin:0;letter-spacing:-.02em}
.ws-home-task {width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;border:0;border-top:1px solid var(--border);background:transparent;color:var(--text-primary);padding:12px 0;text-align:left;font:inherit;cursor:pointer}
.ws-home-task>span:nth-child(2) {min-width:0}
.ws-home-task :is(b,small) {display:block;overflow-wrap:anywhere}
.ws-home-task b {font-size:13px;font-weight:600}
.ws-home-task small,.ws-home-task time {font-size:11px;color:var(--text-secondary)}
.ws-home-task>.ws-badge {grid-column:2;justify-self:start}
.ws-home-event {display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px 0;border-top:1px solid var(--border)}
.ws-home-event b {font-size:13px;overflow-wrap:anywhere}
.ws-home-event p {font-size:12px;line-height:1.5;color:var(--text-secondary);margin:4px 0 0;overflow-wrap:anywhere}
.ws-home-event time {font-size:11px;color:var(--text-secondary)}
body[data-design-system] #dashboardView .ws-onboarding {margin-top:16px}
body[data-design-system] #dashboardView .ws-onboarding .setup-list {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body[data-design-system] #dashboardView .setup-list button {border:1px solid var(--border);border-radius:12px;padding:12px;min-width:0;background:var(--surface)}
.ws-task-groups {display:grid;gap:20px;margin-top:16px}
.ws-task-groups h3 {display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin:0 0 8px}
.ws-task-groups h3>span {font-size:11px;color:var(--text-secondary);font-weight:400}
.ws-task-row {display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:8px}
.ws-task-row:hover {background:var(--surface-secondary)}
.ws-task-content {min-width:0;flex:1}
.ws-task-content .work-record-link {font-size:14px;min-height:28px;line-height:1.4;padding:0}
.ws-task-content dl {display:flex;flex-wrap:wrap;gap:4px 12px;margin:4px 0 0;font-size:12px;color:var(--text-secondary)}
.ws-task-content dl>div {display:flex;gap:4px;min-width:0}
.ws-task-content dt {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ws-task-content dd {margin:0;overflow-wrap:anywhere}
.ws-task-tail {display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12px;min-width:0}
.ws-task-tail time {font-size:12px;color:var(--text-secondary)}
.ws-task-tail .work-overdue {color:var(--tone-danger);font-weight:600}
.ws-task-tail .work-priority[data-priority="critical"] {color:var(--tone-danger)}
body[data-design-system] .ws-tasks .demo-metrics {display:none}
body[data-design-system] #moduleDemoContent .ws-directory {padding:16px;border:0;background:transparent}
.ws-person-name {display:flex;align-items:center;gap:10px;min-width:0}
.ws-person-name .people-avatar {width:32px;height:32px;flex-basis:32px;font-size:11px;border-radius:10px}
.ws-person-name b {font-weight:600;overflow-wrap:anywhere}
body[data-design-system] :is(.demo-table,.desk-table) {font-size:13px;border-collapse:separate;border-spacing:0}
body[data-design-system] :is(.demo-table,.desk-table) th {font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;padding:10px 12px;background:var(--surface-secondary)}
body[data-design-system] :is(.demo-table,.desk-table) td {padding:10px 12px;border-color:var(--border);vertical-align:middle}
body[data-design-system] .demo-table a {color:var(--tone-info);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
body[data-design-system] .desk-table td:first-child>span {font-size:13px;font-weight:500;line-height:1.5}
body[data-design-system] .desk-request-link {font-size:11px;font-weight:600;color:var(--text-secondary)}
body[data-design-system] .desk-table td:first-child>small {font-size:11px;color:var(--text-secondary)}
body[data-design-system] .desk-metrics article {background:var(--surface);padding:12px 14px;border-radius:12px;border:1px solid var(--border)}
body[data-design-system] .desk-status {font-style:normal;border:0;font-size:11px;line-height:1.3;font-weight:600;border-radius:999px;background:var(--tone-info-bg);color:var(--tone-info)}
body[data-design-system] .desk-status.waiting {background:var(--tone-warning-bg);color:var(--tone-warning)}
body[data-design-system] .desk-status.success {background:var(--tone-success-bg);color:var(--tone-success)}
body[data-design-system] .desk-status.danger {background:var(--tone-danger-bg);color:var(--tone-danger)}
body[data-design-system] .chat-list-block {background:var(--surface)}
body[data-design-system] .chat-dialog-block {background:var(--background)}
body[data-design-system] .chat-message>div {border:1px solid var(--border);background:var(--surface);border-radius:14px;color:var(--text-primary)}
body[data-design-system] .chat-message.own>div {background:var(--ui-soft);border-color:color-mix(in srgb,var(--teal) 15%,var(--border))}
body[data-design-system] .chat-message-actions {opacity:0;transition:opacity .12s}
body[data-design-system] .chat-message:is(:hover,:focus-within,.selected) .chat-message-actions {opacity:1}
body[data-design-system] .chat-composer {background:var(--surface);box-shadow:none;border-top:1px solid var(--border)}
body[data-design-system] .chat-composer textarea {background:var(--surface-secondary);border:1px solid var(--border);border-radius:12px;padding:12px;min-height:64px}
.ws-record-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
.ws-record-card {display:flex;flex-direction:column;gap:12px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;color:var(--text-primary);min-width:0;font:inherit;cursor:pointer;box-shadow:var(--shadow-card)}
.ws-record-card:hover {border-color:color-mix(in srgb,var(--teal) 45%,var(--border));background:var(--surface-secondary)}
.ws-record-card h3 {font-size:16px;font-weight:600;line-height:1.4;margin:0;overflow-wrap:anywhere}
.ws-record-card p {font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0;overflow-wrap:anywhere}
.ws-record-card footer {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto}
.ws-record-card time {font-size:12px;color:var(--text-secondary)}
.ws-calendar>header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ws-calendar>header h2 {font-size:20px;font-weight:600;text-transform:capitalize;margin:0}
.ws-calendar>header>div {display:flex;gap:6px;flex-wrap:wrap}
.ws-calendar-scroll {overflow:auto;border:1px solid var(--border);border-radius:16px}
.ws-calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:700px}
.ws-calendar-weekday {font-size:12px;color:var(--text-secondary);background:var(--surface-secondary);padding:10px 12px;border-bottom:1px solid var(--border)}
.ws-calendar-day {min-height:110px;padding:10px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);min-width:0}
.ws-calendar-day:nth-child(7n) {border-right:0}
.ws-calendar-day.outside {background:var(--surface-secondary);color:var(--text-secondary)}
.ws-calendar-day>time {display:inline-grid;place-items:center;width:26px;height:26px;font-size:12px;border-radius:50%}
.ws-calendar-day .today {background:var(--teal);color:var(--primary-foreground);font-weight:600}
.ws-calendar-event {display:block;width:100%;text-align:left;margin-top:6px;padding:6px 8px;border:0;border-left:3px solid var(--tone-info);border-radius:6px;background:var(--tone-info-bg);color:var(--tone-info);font:inherit;font-size:12px;line-height:1.4;overflow-wrap:anywhere;cursor:pointer}
.ws-calendar-undated {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:16px}
.ws-calendar-undated h3 {font-size:13px;margin:0}
.ws-calendar-undated p {font-size:12px;color:var(--text-secondary);margin:0}
body[data-design-system] .ws-entity-layer {display:flex;justify-content:flex-end;align-items:stretch;padding:0;backdrop-filter:none}
body[data-design-system] .ws-drawer {width:min(560px,100%);max-width:560px;height:100%;max-height:100dvh;overflow:auto;border-radius:0;box-shadow:var(--shadow-float);padding:24px;align-content:start;gap:20px}
.ws-drawer .modal-head h2 {font-size:22px;line-height:1.3;overflow-wrap:anywhere}
.ws-record-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
.ws-record-fields dt {font-size:12px;color:var(--text-secondary);margin-bottom:4px}
.ws-record-fields dd {font-size:14px;margin:0;overflow-wrap:anywhere}
.ws-record-description {font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
html[data-density="compact"] body[data-design-system] :is(.demo-table,.desk-table) td {padding:7px 10px}
html[data-density="compact"] body[data-design-system] .ws-task-row {padding:9px 12px}
@media(max-width:1100px) {
 body[data-design-system] main {padding:20px}
 body[data-design-system] #dashboardView .ws-home-grid {grid-template-columns:1fr}
 body[data-design-system] #dashboardView .ws-onboarding .setup-list {grid-template-columns:1fr}
}
@media(max-width:780px) {
 body[data-design-system] main {padding:20px 16px 40px}
 body[data-design-system] :is(.page-head,#moduleView .page-head) {align-items:flex-start}
 body[data-design-system] #dashboardView .ws-home-hero {padding:24px 20px;min-height:200px;align-items:flex-start}
 body[data-design-system] #dashboardView .ws-home-hero>div {max-width:100%;position:relative;z-index:1}
 body[data-design-system] #dashboardView .ws-home-hero::after {width:180px;height:100px;top:auto;bottom:0;opacity:.3}
 body[data-design-system] #dashboardView .ws-home-hero>.primary {position:static;margin-top:16px}
 body[data-design-system] :is(.primary,.secondary,.ws-view-switch button,.ws-text-button) {min-height:44px}
 body[data-design-system] .chat-message-actions {opacity:1}
 .ws-task-row {flex-wrap:wrap;align-items:flex-start}
 .ws-task-tail {flex-basis:100%;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;padding-left:48px;gap:8px}
 .ws-task-tail time {flex-basis:100%}
 .ws-calendar>header {align-items:flex-start;flex-direction:column}
 body[data-design-system] .ws-drawer {width:100%;padding:20px 16px}
}
@media(max-width:600px) {
 body[data-design-system] :is(.demo-table,.desk-table) td {padding:10px 12px}
 .ws-record-fields {grid-template-columns:1fr}
 .ws-home-task {grid-template-columns:32px minmax(0,1fr)}
 .ws-home-task>time {grid-column:2}
 .ws-home-event {grid-template-columns:32px minmax(0,1fr)}
 .ws-home-event>time {grid-column:2}
}
@media(prefers-reduced-motion:reduce) {body[data-design-system] * {transition:none!important}}

body[data-design-system] #workModal .ws-drawer,body[data-design-system] #recordModal .ws-drawer {width:min(560px,100%);max-width:560px;max-height:100dvh;border-radius:0;height:100%;padding:24px}
body[data-design-system] .desk-status[data-status="waiting"] {background:var(--tone-warning-bg);color:var(--tone-warning)}
body[data-design-system] .chat-message:is(.failed,.pending) .chat-message-actions {opacity:1}
body[data-design-system] #moduleView .knowledge-grid>.ws-empty {grid-column:1/-1}
@media(max-width:780px) {body[data-design-system] #workModal .ws-drawer,body[data-design-system] #recordModal .ws-drawer {max-width:none;width:100%;padding:20px 16px}}

body[data-design-system] .knowledge-reader {width:min(620px,100%);background:var(--surface);padding:24px;box-shadow:var(--shadow-float)}
body[data-design-system] #knowledgeEditor .ws-drawer {width:min(620px,100%);max-width:620px;max-height:100dvh;height:100%;border-radius:0;padding:24px}
body[data-design-system] .knowledge-reader-head h1 {font-size:26px;line-height:1.3;overflow-wrap:anywhere}
@media(max-width:780px) {body[data-design-system] .knowledge-reader,body[data-design-system] #knowledgeEditor .ws-drawer {max-width:none;width:100%;padding:20px 16px}}
body[data-design-system] .primary.danger {background:var(--danger);color:#fff}
html[data-theme="dark"] body[data-design-system] .primary.danger {color:#071823}

/* ui.1: screenshot review, 2026-10-04. Keep existing page actions and API contracts. */
body[data-design-system] #dashboardView .ws-home-grid {align-items:start}
body[data-design-system] #dashboardView .ws-home-grid>.panel {min-height:0;height:auto}
body[data-design-system] #dashboardView :is(.ws-home-task,.ws-home-event) {padding-block:8px}
body[data-design-system] #dashboardView .ws-home-task>.ws-badge {grid-column:2;grid-row:2}
body[data-design-system] #dashboardView .ws-home-task>time {align-self:start}
body[data-design-system] #moduleDemoContent :is(.ws-tasks,.approvals-workspace-v510) {border:0;border-radius:0;box-shadow:none}
body[data-design-system] .ws-task-tail {display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 12px;text-align:right}
body[data-design-system] .ws-task-tail time {grid-column:1/-1}
body[data-design-system] .ws-task-content .work-record-link {min-height:24px}
body[data-design-system] .ws-task-row {padding:10px 12px;margin-bottom:6px}
body[data-design-system] .ws-calendar-day {min-height:88px}
body[data-design-system] .ws-empty {min-height:180px;padding:24px 20px}
body[data-design-system] .ws-empty-icon {width:48px;height:48px;border-radius:16px}
body[data-design-system] .ws-empty-icon svg {width:24px;height:24px}
body[data-design-system] .badge {background:var(--tone-success-bg);color:var(--tone-success);font-size:11px;font-weight:600;letter-spacing:0}
body[data-design-system] .badge.off {background:var(--tone-neutral-bg);color:var(--tone-neutral)}
body[data-design-system] #moduleView .demo-status[data-tone="success"] {background:var(--tone-success-bg);color:var(--tone-success);border-color:transparent}
body[data-design-system] #moduleView .demo-status[data-tone="warning"] {background:var(--tone-warning-bg);color:var(--tone-warning);border-color:transparent}
body[data-design-system] #moduleView .demo-status[data-tone="danger"] {background:var(--tone-danger-bg);color:var(--tone-danger);border-color:transparent}
/* Visible compact actions avoid reserved multi-line invisible space and remain keyboard reachable. */
body[data-design-system] .chat-workspace .chat-message-actions {opacity:1;flex-wrap:wrap;gap:2px 4px;margin-top:4px}
body[data-design-system] .chat-workspace .chat-message-actions>button,
body[data-design-system] .chat-workspace .chat-message-more>summary {min-height:28px;padding:3px 5px;font-size:11px}
body[data-design-system] .chat-workspace .chat-message>div {min-width:0;padding:9px 12px}
body[data-design-system] .chat-workspace .chat-message p {margin:4px 0;font-size:14px;line-height:1.5}
@media(max-width:780px),(pointer:coarse) {
 body[data-design-system] .chat-workspace .chat-message-actions>button,
 body[data-design-system] .chat-workspace .chat-message-more>summary {min-height:44px;padding:8px}
 body[data-design-system] .ws-task-content .work-record-link {min-height:44px}
}
@media(max-width:780px) {
 body[data-design-system] #moduleDemoContent .ws-directory {padding:12px}
 body[data-design-system] .ws-task-tail {display:flex;text-align:left}
 body[data-design-system] .ws-calendar-day {min-height:88px}
}

/* ui.2: avoid content-visibility paint clipping of intrinsic-width reversed flex rows. */
body[data-design-system] .chat-workspace .chat-message {
 content-visibility:visible;contain-intrinsic-size:none;
 display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;
 width:max-content;max-width:min(720px,82%);min-width:0;
}
body[data-design-system] .chat-workspace .chat-message.own {grid-template-columns:minmax(0,1fr) 30px}
body[data-design-system] .chat-workspace .chat-message>.chat-avatar {grid-column:1;grid-row:1;width:30px;height:30px;align-self:start}
body[data-design-system] .chat-workspace .chat-message>div {grid-column:2;grid-row:1;min-width:0;max-width:100%;box-sizing:border-box}
body[data-design-system] .chat-workspace .chat-message.own>.chat-avatar {grid-column:2}
body[data-design-system] .chat-workspace .chat-message.own>div {grid-column:1}
body[data-design-system] .chat-workspace .chat-message header b {min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:780px) {body[data-design-system] .chat-workspace .chat-message {max-width:96%}}

/* UI.3: publication feed, knowledge tools and operations hierarchy. */
body[data-design-system="whistle-512"] .announcement-list{display:grid;gap:12px;align-content:start}
body[data-design-system="whistle-512"] .announcement-card{padding:16px 20px;min-width:0}
body[data-design-system="whistle-512"] .announcement-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
body[data-design-system="whistle-512"] .announcement-card header>span{min-width:0;display:grid;gap:6px}
body[data-design-system="whistle-512"] .announcement-card header b{font-size:16px;line-height:1.4;overflow-wrap:anywhere}
body[data-design-system="whistle-512"] .announcement-card header em{flex:none;font-style:normal;font-size:12px;line-height:1.4}
body[data-design-system="whistle-512"] .announcement-body{max-width:78ch;margin:14px 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
body[data-design-system="whistle-512"] .announcement-card footer{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-top:12px}
body[data-design-system="whistle-512"] .announcement-card footer>span:last-child{display:flex;flex-wrap:wrap;gap:8px}
body[data-design-system="whistle-512"] .knowledge-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body[data-design-system="whistle-512"] .knowledge-toolbar .knowledge-search{flex:1 0 100%;min-width:0;margin:0}
body[data-design-system="whistle-512"] .knowledge-toolbar .knowledge-search input{width:100%;min-width:0}
body[data-design-system="whistle-512"] .knowledge-toolbar .knowledge-drafts{display:flex;flex:1 1 220px;gap:8px;align-items:center;margin:0;white-space:normal}
body[data-design-system="whistle-512"] .knowledge-drafts input{width:16px;height:16px;flex:none}
body[data-design-system="whistle-512"] .ops-diagnostics{margin:12px 0;font-size:13px}
body[data-design-system="whistle-512"] .ops-diagnostics summary,body[data-design-system="whistle-512"] .event-platform-v39>summary{cursor:pointer;min-height:44px;align-content:center;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
body[data-design-system="whistle-512"] .ops-diagnostics p{line-height:1.6;max-width:90ch;overflow-wrap:anywhere;margin:8px 0}
body[data-design-system="whistle-512"] .ops-diagnostics-content{padding-top:12px}
body[data-design-system="whistle-512"] .operations-section .admin-toolbar{flex-wrap:wrap;gap:10px}
body[data-design-system="whistle-512"] .operations-jobs article>span{min-width:0;overflow-wrap:anywhere}
body[data-design-system="whistle-512"] .event-platform-v39 .ops-grid strong{overflow-wrap:anywhere}
@media(max-width:640px){
 body[data-design-system="whistle-512"] .announcement-card{padding:14px}
 body[data-design-system="whistle-512"] .announcement-card header{flex-direction:column;gap:8px}
 body[data-design-system="whistle-512"] .knowledge-toolbar>button{flex:1 1 130px;min-height:44px}
 body[data-design-system="whistle-512"] .knowledge-toolbar .knowledge-drafts{flex-basis:100%;min-height:44px}
 body[data-design-system="whistle-512"] .operations-jobs article{flex-wrap:wrap;gap:8px}
}