/* 5.9 work surfaces: scoped to the existing chat and Service Desk DOM. */
.chat-workspace,.whistle-chat-view .sidebar,
html[data-theme="dark"] .chat-workspace,html[data-theme="dark"] .whistle-chat-view .sidebar,
html[data-contrast="high"] .chat-workspace,html[data-contrast="high"] .whistle-chat-view .sidebar {
 --cv-list:var(--surface-secondary);--cv-dialog:var(--background);--cv-card:var(--surface);
 --cv-text:var(--text-primary);--cv-secondary:var(--text-secondary);--cv-muted:var(--text-muted);
 --cv-border:var(--border);--cv-accent:var(--teal);--cv-soft:color-mix(in srgb,var(--teal) 12%,var(--surface));
}
.whistle-chat-view .sidebar {background:var(--sidebar-surface)}
.chat-workspace {position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);isolation:isolate}
.chat-workspace .chat-list-block {padding:16px 12px;min-height:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.chat-workspace .chat-list-head h2 {font-size:20px;line-height:1.3;margin:3px 0}
.chat-workspace .chat-search {border:1px solid var(--border);min-width:0;margin:12px 0 8px}
.chat-workspace .chat-search input {min-width:0;min-height:40px;color:var(--text-primary)}
.chat-workspace .chat-tabs {display:flex;flex-wrap:wrap;gap:4px}
.chat-workspace .chat-tabs button {flex:1 0 auto;padding:7px 8px;min-height:36px}
.chat-workspace .chat-list {min-height:0;align-content:start;scrollbar-gutter:stable}
.chat-workspace .chat-item {min-height:64px;padding:10px;gap:10px}
.chat-workspace .chat-item em {max-width:58px;overflow-wrap:anywhere}
.chat-workspace .chat-dialog-block {min-height:0;border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.chat-workspace .chat-dialog-head {padding:12px 16px;grid-template-columns:36px minmax(0,1fr) auto}
.chat-workspace .chat-dialog-head h3 {font-size:18px;overflow-wrap:anywhere}
.chat-workspace .chat-dialog-head>div:last-child {flex-wrap:wrap;justify-content:flex-end}
.chat-workspace .chat-messages {min-height:0;padding:18px;gap:12px;scrollbar-gutter:stable;overscroll-behavior:contain}
.chat-workspace .chat-message {max-width:min(82%,720px);min-width:0}
.chat-workspace .chat-message>div {min-width:min(180px,100%);max-width:100%;border-radius:14px}
.chat-workspace .chat-message header {flex-wrap:wrap;gap:4px 12px}
.chat-workspace .chat-message p {font-size:14px;line-height:1.55}
.chat-workspace .chat-message .chat-avatar {width:30px;height:30px}
.chat-workspace .chat-composer {padding:10px 12px;border-radius:0 0 var(--radius-lg) 0}
.chat-workspace .chat-compose-tools {flex-wrap:wrap;row-gap:6px}
.chat-workspace .chat-compose-tools .chat-send,
html:not([data-theme="dark"]) .chat-workspace .chat-compose-tools .chat-send {color:var(--primary-foreground)}
.chat-workspace .chat-attachment {min-width:0;max-width:100%;overflow-wrap:anywhere}
.chat-workspace .chat-attachment :is(img,video,audio) {max-width:100%}
.chat-workspace .chat-info-block {min-height:0;overflow-y:auto;border-color:var(--border);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.chat-workspace .chat-info-block :is(p,h3,strong) {overflow-wrap:anywhere}
.chat-workspace .chat-info-block section {margin-top:18px}
.chat-workspace .chat-info-head {gap:8px}
.chat-workspace .chat-message.selected .chat-select {opacity:1}
@media(min-width:781px) {
 .whistle-chat-view .chat-workspace {height:clamp(480px,calc(100dvh - 210px),920px);min-height:0}
}
@media(min-width:781px) and (max-width:1200px) {
 .chat-workspace:not(.info-hidden) .chat-info-block {display:block;position:absolute;inset:0 0 0 auto;width:min(320px,85%);z-index:10;border-left:1px solid var(--border);box-shadow:var(--shadow)}
}
/* Desk tools remain outside the list scroll container. Never clip an open menu. */
.desk-shell {padding:16px;min-width:0;background:var(--surface);border-radius:var(--radius-lg)}
.desk-shell .desk-metrics {gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.desk-shell .desk-metrics article {background:var(--surface-secondary);border-color:var(--border);border-radius:12px;padding:14px;min-width:0;min-height:86px}
.desk-shell .desk-metrics strong {font-size:26px;line-height:1.2}
.desk-shell .desk-controls {display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin:16px 0 12px;overflow:visible}
.desk-shell .desk-controls>label {flex:1 1 260px;min-width:0;border:1px solid var(--border);min-height:40px}
.desk-shell .desk-controls input {min-width:0}
.desk-shell .desk-primary-actions {display:flex;flex-wrap:wrap;width:auto;gap:8px;overflow:visible}
.desk-shell .desk-tools-popover {width:min(280px,calc(100vw - 40px));right:0;left:auto;background:var(--surface);border-color:var(--border)}
.desk-shell .desk-queues {flex-wrap:wrap;gap:6px;overflow:visible}
.desk-shell .desk-queues button {min-height:36px;padding:7px 12px;font-size:13px}
.desk-shell .desk-queues button.active {background:var(--ui-soft);border-color:var(--teal);color:var(--text-primary)}
.desk-shell .desk-table-wrap {border-color:var(--border);border-radius:12px;scrollbar-gutter:stable}
.desk-shell .desk-table {min-width:860px;font-size:13px;table-layout:fixed}
.desk-shell .desk-table th {font-size:11px;font-weight:600;letter-spacing:.04em}
.desk-shell .desk-table th:first-child {width:32%}
.desk-shell .desk-table th:nth-child(2) {width:12%}
.desk-shell .desk-table th:nth-child(3),.desk-shell .desk-table th:nth-child(4) {width:15%}
.desk-shell .desk-table th:nth-child(5),.desk-shell .desk-table th:nth-child(6) {width:13%}
.desk-shell .desk-table td {padding:12px;overflow-wrap:anywhere}
/* Keep the first cell a table-cell: grid on td distorts native row sizing. */
.desk-shell .desk-table td:first-child {display:table-cell;position:relative;padding-left:38px}
.desk-shell .desk-table td:first-child>input {position:absolute;left:12px;top:16px;margin:0;width:18px;height:18px;accent-color:var(--teal)}
.desk-shell .desk-table td:first-child>:is(b,span,small) {display:block;white-space:normal;overflow-wrap:anywhere}
.desk-shell .desk-table td:first-child>span {font-size:14px;font-weight:600;margin:3px 0;line-height:1.4}
.desk-shell .desk-table td:first-child>small {font-size:12px;color:var(--text-secondary)}
.desk-shell .desk-request-link {border:0;background:transparent;color:var(--teal);font:inherit;font-size:12px;padding:2px 0;min-height:28px;text-align:left;cursor:pointer}
.desk-shell .desk-request-link:hover {text-decoration:underline}
.desk-shell .desk-table :is(button,input):focus-visible {outline:2px solid var(--teal);outline-offset:3px}
.desk-shell .desk-status {font-size:11px;font-weight:600;padding:5px 8px;white-space:normal}
.desk-shell .desk-footer {flex-wrap:wrap;justify-content:space-between;font-size:12px;gap:8px}
.desk-detail-panel {background:var(--surface);color:var(--text-primary);width:min(760px,100%);padding:0 24px 24px}
.desk-detail-panel .desk-detail-head {background:var(--surface);padding:20px 0 16px}
.desk-detail-panel .desk-detail-head h2 {font-size:22px}
.desk-detail-panel .desk-detail-section,.desk-detail-panel .desk-result {border-color:var(--border);padding:16px;border-radius:12px}
.desk-detail-panel .desk-timeline article {display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--border);font-size:13px;overflow-wrap:anywhere}
.desk-detail-panel .desk-timeline small,.desk-detail-panel .desk-comment small {color:var(--text-secondary)}
.desk-detail-panel .desk-comment {padding:12px;margin:10px 0;border:1px solid var(--border);border-radius:10px;background:var(--surface-secondary);overflow-wrap:anywhere}
.desk-detail-panel .desk-transition-actions {display:flex;flex-wrap:wrap;gap:8px}
.desk-detail-panel .desk-knowledge-card {min-width:0}
html[data-density="compact"] .chat-workspace .chat-item {min-height:54px;padding:8px}
html[data-density="compact"] .desk-shell .desk-table td {padding-top:9px;padding-bottom:9px}
@media(max-width:780px) {
 .chat-workspace {border-radius:12px}
 .chat-workspace .chat-dialog-head {grid-template-columns:36px minmax(0,1fr);padding:10px}
 .chat-workspace .chat-dialog-head>div:last-child {grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
 .chat-workspace .chat-message {max-width:96%}
 .chat-workspace .chat-messages {padding:12px}
 .chat-workspace .chat-list-block,.chat-workspace .chat-info-block,.chat-workspace .chat-dialog-block {border-radius:0;max-height:none}
 .chat-workspace .chat-composer {padding:8px 8px max(8px,env(safe-area-inset-bottom));border-radius:0}
 .chat-workspace .chat-compose-tools {flex-wrap:wrap}
 .chat-workspace .chat-compose-tools button {min-width:44px;min-height:44px}
 .chat-workspace .chat-compose-tools .chat-send {flex:1 0 88px}
 .chat-workspace .chat-mobile-navigation button {min-height:44px}
 .chat-workspace .chat-tabs button {min-height:44px}
 .desk-shell {padding:12px}
 .desk-shell .desk-metrics article {padding:12px;min-height:76px}
 .desk-shell .desk-metrics {gap:8px;overflow:visible}
 .desk-shell .desk-controls>label,.desk-shell .desk-primary-actions {flex-basis:100%;width:100%}
 .desk-shell .desk-primary-actions>button,.desk-shell .desk-tools-menu>summary {min-height:44px}
 .desk-shell .desk-tools-popover {left:0;right:auto}
 .desk-detail-panel {padding:0 12px max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:600px) {
 .desk-shell .desk-metrics {grid-template-columns:1fr}
 .desk-shell .desk-metrics article {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;min-height:0}
 .desk-shell .desk-metrics strong {grid-column:2;grid-row:1/3}
 .desk-shell .desk-table-wrap {border:0;overflow:visible}
 .desk-shell .desk-table {display:block;min-width:0;width:100%}
 .desk-shell .desk-table thead {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
 .desk-shell .desk-table tbody {display:grid;gap:12px}
 .desk-shell .desk-table tbody tr {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
 .desk-shell .desk-table td {display:block;padding:10px 12px;border:0;min-width:0;white-space:normal;overflow:visible;font-size:13px}
 .desk-shell .desk-table td[data-label]::before {content:attr(data-label);display:block;font-size:11px;font-weight:500;color:var(--text-secondary);margin-bottom:4px}
 .desk-shell .desk-table td:first-child {display:block;grid-column:1/-1;border-bottom:1px solid var(--border);padding:12px 12px 12px 40px}
 .desk-shell .desk-table td:first-child::before {display:none}
 .desk-shell .desk-table .desk-request-link {min-height:44px}
 .desk-shell .desk-table .desk-empty {grid-column:1/-1;padding:24px!important}
 .desk-detail-panel .desk-detail-meta {grid-template-columns:1fr}
 .desk-detail-panel .desk-transition-actions button {flex:1 1 140px;min-height:44px}
}