/* One optional live section beside the primary workspace; navigation stays above it. */ #main#main#main [data-task-prototype] {min-width:320px!important;box-sizing:border-box;} #main#main#main [data-task-prototype] .tp-email-composer :is(input[data-draft-field],.draft-rich-editor) {border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;} #main#main#main [data-task-prototype] .tp-email-composer :is(.draft-recipient-row,.draft-recipient-row > label) {outline:0!important;box-shadow:none!important;border-top:0!important;border-left:0!important;border-right:0!important;} #main#main#main [data-task-prototype] .tp-email-composer > :is(label,.draft-recipient-row) {border-bottom:1px solid var(--tp-line,#e5e5e5)!important;} #main#main#main [data-task-prototype] .tp-email-composer .draft-recipient-row > label {border-bottom:0!important;} #main#main#main [data-task-prototype] .tp-email-composer input[data-draft-field]:focus-visible {outline:1px solid #767676!important;outline-offset:-1px!important;} .draft-new-call-dialog {max-height:calc(100dvh - 32px);overflow:auto;} .draft-new-call-dialog .draft-phone-keypad {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:280px;margin:20px auto 0;} .draft-new-call-dialog .draft-phone-keypad button {min-height:44px;border:1px solid #dedede;border-radius:10px;background:#f5f5f5;color:#292929;font:500 20px/1.2 var(--tp-ui-font,Arial,sans-serif);cursor:pointer;} .draft-new-call-dialog .draft-phone-keypad button:hover {background:#e9e9e9;} .draft-new-call-dialog .draft-phone-keypad button:last-child {grid-column:3;} #main#main#main [data-task-prototype] .tp-identity-status {display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:6px!important;} #main#main#main [data-task-prototype] :is(.tp-status-chip,.tp-priority-chip,.tp-escalation-chip) {display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;white-space:nowrap!important;font:500 11px/1.3 var(--tp-ui-font)!important;min-height:22px!important;padding:3px 7px!important;box-sizing:border-box!important;border:0!important;border-radius:5px!important;} #main#main#main [data-task-prototype] .tp-escalation-chip {background:#fbe7e5!important;color:#b43c30!important;} #main#main#main [data-task-prototype] [data-message-detail].draft-unconnected-call-detail {display:flex!important;flex-direction:column!important;min-height:100%!important;box-sizing:border-box;} #main#main#main [data-task-prototype] .draft-unconnected-call-detail > .tp-message-copy {display:flex!important;flex-direction:column!important;flex:1 0 auto!important;min-height:0!important;box-sizing:border-box;} #main#main#main [data-task-prototype] .draft-unconnected-call-detail .draft-missed-call-empty {display:flex!important;flex:1 0 auto!important;justify-content:center!important;align-items:center!important;padding:24px 16px!important;margin:0!important;} #main#main#main [data-task-prototype] button:disabled :is(svg,.tp-icon,.material-symbols-outlined) {color:inherit!important;} #main#main#main [data-task-prototype] .wp-file-comparison [data-expand-file-list] {display:none!important;} @container workspace-area (width < 640px) { #main#main#main [data-task-prototype] [data-expand-file-list] {display:none!important;} } #main#main#main [data-task-prototype] .tp-request-mode-alert[hidden] {display:none!important;} #main#main#main [data-task-prototype] .wp-tab-scroll::before {content:'';position:absolute;left:0;top:50%;height:24px;width:1px;background:var(--tp-line,#dedede);transform:translateY(-50%);} #main [data-task-prototype] .wp-layout-tools {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 16px;border-bottom:1px solid #dedede;background:#fff;flex-shrink:0;font-size:12px;} #main [data-task-prototype] .wp-layout-tools label {display:flex;align-items:center;gap:8px;color:#737373;} #main [data-task-prototype] :is(.wp-layout-tools,.wp-side-header) :is(button,select) {box-sizing:border-box;font:inherit;color:#252525;background:#fff;border:1px solid #dedede;border-radius:6px;min-height:32px;padding:6px 10px;} #main [data-task-prototype] .wp-layout-tools [data-reset-layout] {margin-left:auto;} #main [data-task-prototype] .wp-status {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);} #main #workspace-panel-deck {display:flex;flex-direction:row;align-items:stretch;flex:1;min-height:0;min-width:0;overflow:hidden;background:#fff;} #main #workspace-panel-deck.wp-split {display:grid;grid-template-columns:minmax(0,1fr) 8px var(--wp-side-width);grid-template-rows:minmax(0,1fr);align-items:stretch;grid-auto-flow:column;} #main #workspace-panel-deck > .wp-primary, #main #workspace-panel-deck .wp-side-body {display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;overflow:auto;} #main #workspace-panel-deck [data-panel]:not([hidden]) {flex:1;min-height:0!important;margin:0!important;max-width:none;} #main #workspace-panel-deck :is(.wp-primary,.wp-side-body) > [data-panel]:not([hidden]) {overflow:auto;} #main #workspace-panel-deck :is(.wp-primary,.wp-side-body) > :is(.tp-communication-workspace,.tp-documents-workspace):not([hidden]) {overflow:hidden;} #main #workspace-side-panel {display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;overflow:hidden;background:#fff;} #main #workspace-side-panel .wp-side-header {display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0;padding:10px 16px;border-bottom:1px solid #dedede;background:#f7f7f7;font-size:12px;} #main #workspace-side-panel .wp-side-header > div {flex:1;min-width:0;} #main #workspace-side-panel h3 {font:600 14px/20px var(--tp-ui-font,sans-serif);margin:0 0 6px;} #main #workspace-side-panel label {display:flex;align-items:center;gap:8px;color:#737373;} #main #workspace-side-panel [data-close-side] {font-size:22px;width:32px;height:32px;padding:0;} #main #workspace-panel-deck .wp-resize {position:relative;cursor:col-resize;touch-action:none;background:#f7f7f7;border-inline:1px solid #dedede;} #main #workspace-panel-deck .wp-resize::after {content:'';position:absolute;top:50%;left:2px;width:2px;height:28px;border-radius:2px;background:#999;} #main #workspace-panel-deck :is(.wp-primary,#workspace-side-panel,.wp-resize)[hidden], #main [data-task-prototype] :is(.wp-layout-tools,.wp-side-header) [hidden] {display:none!important;} #main #workspace-panel-deck.wp-sequential {display:flex;} #main [data-task-prototype] :is(.wp-layout-tools,.wp-side-header) :is(button,select):focus-visible, #main #workspace-panel-deck .wp-resize:focus-visible {outline:2px solid #2676c9;outline-offset:-2px;} /* Restore the original expanded workspace: hide the service context and upper summary. */ html body.divider-draft #main [data-task-prototype] .tp-case-screen.is-communication-expanded .tp-operational-context {display:none!important;} /* Internal lists retain useful sizes. The containing area scrolls if needed. */ #main #workspace-panel-deck .tp-ticket-browser {grid-template-columns:var(--tp-context-column,260px) minmax(260px,1fr)!important;min-width:600px;} #main #workspace-panel-deck .tp-communication-workspace {min-width:600px;} #main #workspace-panel-deck .tp-documents-workspace {min-width:640px;} #main #workspace-side-panel [data-panel="information"] {min-width:0;} #main #workspace-panel-deck .tp-structured-data {grid-template-columns:minmax(0,1fr)!important;} #main #workspace-panel-deck .tp-document-preview {height:100%!important;max-height:100%!important;} @media (max-width:800px) { #main [data-task-prototype] .tp-workspace-tabs {overflow-x:auto;flex-shrink:0;} #main [data-task-prototype] .tp-workspace-tabs > button {flex-shrink:0;} #main [data-task-prototype] .wp-layout-tools {padding:8px;} } #main #workspace-panel-deck :is(.wp-primary,.wp-side-body) {container-type:inline-size;container-name:workspace-area;} @container workspace-area (width < 700px) { #main #workspace-panel-deck .tp-structured-data > .tp-record-form {grid-template-columns:minmax(0,1fr)!important;} #main #workspace-panel-deck .tp-record-form > section {min-width:0;border-right:0!important;border-bottom:1px solid #dedede;} #main #workspace-panel-deck .tp-record-form dl > div {grid-template-columns:minmax(0,1fr)!important;row-gap:6px!important;} #main #workspace-panel-deck .tp-record-form dl > div > :is(dt,dd) {grid-column:1!important;min-width:0;} } /* At a short CSS viewport (including 200% zoom), keep space for the active section. */ @media (max-height:750px) and (min-width:700px) { html body.divider-draft #main [data-task-prototype] .tp-operational-context {grid-template-columns:minmax(0,1fr) 130px!important;min-height:0!important;} html body.divider-draft #main [data-task-prototype] .tp-operational-context .tp-next-action {min-height:0;padding:10px 12px!important;gap:8px;} #main [data-task-prototype] .tp-operational-signals > div {padding:8px!important;} } /* Explicit grid positions prevent inherited panel rules from stacking the areas. */ #main #workspace-panel-deck.wp-split > .wp-primary {grid-column:1!important;grid-row:1!important;align-self:stretch;height:100%;box-sizing:border-box;} #main #workspace-panel-deck.wp-split > .wp-resize {grid-column:2!important;grid-row:1!important;align-self:stretch;height:100%;box-sizing:border-box;} #main #workspace-panel-deck.wp-split > #workspace-side-panel {grid-column:3!important;grid-row:1!important;align-self:stretch;height:100%;box-sizing:border-box;} #main #workspace-panel-deck.wp-sequential {flex-direction:row;} /* Hidden due to space is different from closing: the live side DOM stays mounted. */ #main [data-task-prototype] .wp-layout-tools button:disabled {color:#888;background:#f7f7f7;cursor:not-allowed;} #main [data-task-prototype] .tp-case-main-workspace {min-width:0;} @media (max-width:1023px) { #main [data-task-prototype] .wp-layout-tools [data-open-alongside], #main [data-task-prototype] .wp-layout-tools label:has([data-alongside-section]) {display:none!important;} } @container workspace-area (width < 640px) { #main #workspace-panel-deck :is(.tp-communication-workspace,.tp-documents-workspace,.tp-ticket-browser) {min-width:0;max-width:100%;} #main #workspace-panel-deck .tp-ticket-browser {grid-template-columns:minmax(0,1fr)!important;overflow:auto;} #main #workspace-panel-deck :is(.tp-communication-workspace,.tp-documents-workspace) {overflow:auto!important;} } /* A single section picker follows the optional panel; permanent tabs never move. */ #main [data-task-prototype] .wp-alongside-control {position:relative;flex-shrink:0;} #main [data-task-prototype] .wp-alongside-control > button {display:inline-flex;align-items:center;gap:8px;white-space:nowrap;} #main [data-task-prototype] .wp-alongside-control > button > span {font-size:20px;line-height:16px;} #main [data-task-prototype] .wp-alongside-menu {position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:200px;max-width:calc(100vw - 48px);padding:4px;background:#fff;border:1px solid #dedede;border-radius:8px;box-shadow:0 8px 24px #0000001f;} #main [data-task-prototype] .wp-alongside-menu button {display:block;width:100%;text-align:left;border:0;background:transparent;} #main [data-task-prototype] .wp-alongside-menu button:hover, #main [data-task-prototype] .wp-alongside-menu button[aria-current="true"] {background:#f0f0f0;} #main [data-task-prototype] .wp-alongside-control[hidden], #main [data-task-prototype] .wp-alongside-menu[hidden] {display:none!important;} #main #workspace-side-panel .wp-side-header > div {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;} #main #workspace-side-panel .wp-side-header h3 {margin:0;} #main [data-task-prototype] .wp-alongside-menu button small {display:block;color:#737373;font-size:11px;line-height:16px;margin-top:2px;} /* Under 640px alongside, Communication shows its conversation list only. */ #main #workspace-panel-deck#workspace-panel-deck .tp-communication-workspace.wp-communication-list-only { grid-template-columns:minmax(0,1fr)!important;min-width:0!important;max-width:100%;overflow:auto!important; } #main #workspace-panel-deck#workspace-panel-deck .wp-communication-list-only > :not(aside) {display:none!important;} #main #workspace-panel-deck#workspace-panel-deck .wp-communication-list-only > aside { grid-column:1!important;width:100%!important;min-width:0!important;max-width:100%!important;border-right:0!important;box-sizing:border-box; } /* With the picker in the side header, the workspace starts at the tabs divider. */ #main [data-task-prototype] .wp-layout-tools[hidden] {display:none!important;} /* In alongside mode the persistent tabs stay entirely in the left column. */ #main #workspace-panel-deck#workspace-panel-deck.wp-split > .wp-primary {overflow:hidden;} #main #workspace-panel-deck#workspace-panel-deck .wp-primary > .tp-workspace-tabs { display:flex!important;flex-wrap:nowrap!important;flex:0 0 auto;min-width:0;max-width:100%;width:100%;box-sizing:border-box; overflow-x:auto!important;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin; } #main #workspace-panel-deck#workspace-panel-deck .wp-primary > .tp-workspace-tabs > * {flex-shrink:0;} #main #workspace-panel-deck#workspace-panel-deck .wp-primary > [data-panel]:not([hidden]) {min-height:0!important;} /* Switching replaces the sole side panel; close is a centered, unframed icon. */ #main #workspace-side-panel#workspace-side-panel .wp-side-header [data-close-side] { display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px; width:32px;height:32px;min-height:32px;padding:0;border:0;background:transparent;box-shadow:none;line-height:1; } #main #workspace-side-panel#workspace-side-panel [data-close-side] svg {display:block;flex:none;} #main #workspace-side-panel#workspace-side-panel [data-close-side]:hover {background:#ececec;} #main #workspace-panel-deck#workspace-panel-deck .tp-workspace-tab-actions {padding-left:14px!important;} #main #workspace-panel-deck#workspace-panel-deck .tp-workspace-tab-actions::before { content:'';position:absolute;left:0;top:25%;bottom:25%;width:1px;background:#d7d7d7;pointer-events:none; } /* Workspace expansion is global; alongside entry shares the navigation row. */ #main [data-task-prototype] .tp-casebar .wp-global-expand {display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:0;background:transparent;color:#252525;font:inherit;padding:8px 12px;border-radius:6px;} #main [data-task-prototype] .tp-casebar .wp-global-expand:focus-visible {outline:2px solid #2676c9;outline-offset:2px;} #main [data-task-prototype] .wp-alongside-control button {box-sizing:border-box;font:inherit;color:#252525;background:#fff;border:1px solid #dedede;border-radius:6px;min-height:32px;padding:6px 10px;} #main [data-task-prototype] .wp-alongside-control button:focus-visible {outline:2px solid #2676c9;outline-offset:-2px;} #main [data-task-prototype] .wp-alongside-menu {position:fixed;right:auto;min-width:208px;max-height:50vh;overflow:auto;z-index:1000;} #main [data-task-prototype] .wp-alongside-control > button > span {display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:18px;} #main #workspace-panel-deck#workspace-panel-deck .tp-workspace-tab-actions::before {display:none;} #main [data-task-prototype] .tp-workspace-tab-actions:empty {display:none!important;} #main #workspace-panel-deck .wp-file-comparison {display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden;} #main #workspace-panel-deck .wp-file-comparison[hidden] {display:none!important;} #main #workspace-panel-deck .wp-file-comparison > header {flex:none;padding:16px;border-bottom:1px solid #dedede;background:#f7f7f7;} #main #workspace-panel-deck .wp-file-comparison label {display:flex;align-items:center;gap:12px;font-size:14px;} #main #workspace-panel-deck .wp-file-comparison select {min-width:0;max-width:100%;flex:1;padding:8px;background:#fff;border:1px solid #dedede;border-radius:6px;font:inherit;} #main #workspace-panel-deck .wp-file-comparison .tp-document-preview-canvas {flex:1;min-height:0;overflow:auto;padding:24px;background:#c3c3c3;} #main #workspace-panel-deck .wp-file-comparison .tp-document-preview-page {box-sizing:border-box;width:100%;min-width:0;background:#fff;padding:32px;} #main #workspace-panel-deck .wp-file-comparison img {max-width:100%;height:auto;} /* Top-layer menu remains visible above clipped/scrolling workspace navigation. */ #main [data-task-prototype] .wp-alongside-menu[popover] {inset:auto;margin:0;bottom:auto;box-sizing:border-box;} #main [data-task-prototype] .tp-workspace-tab-actions {display:flex;align-items:center;gap:8px;} #main [data-task-prototype] .tp-workspace-tab-actions [data-expand-workspace] {border-left:1px solid #d7d7d7!important;border-radius:0!important;padding-left:14px!important;} /* The optional area's section navigation is visible without opening a menu. */ #main #workspace-side-panel#workspace-side-panel .wp-side-header > div {display:block;text-align:left;} #main #workspace-side-panel .wp-side-caption {display:block;font-size:11px;line-height:16px;color:#737373;margin-bottom:2px;} #main #workspace-side-panel .wp-side-tabs {display:flex;flex:none;gap:4px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid #dedede;white-space:nowrap;background:#fff;} #main #workspace-side-panel .wp-side-tabs button {flex:none;padding:8px 10px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:12px;color:#252525;} #main #workspace-side-panel .wp-side-tabs button[aria-pressed="true"] {background:#efefef;font-weight:600;} #main #workspace-side-panel .wp-side-tabs button:disabled {color:#999;} #main #workspace-side-panel .wp-side-tabs button:focus-visible {outline:2px solid #2676c9;outline-offset:-2px;} #main [data-task-prototype] .tp-workspace-tab-actions [hidden] {display:none!important;} #main [data-task-prototype] .tp-workspace-tab-actions [data-close-suspended] {display:none!important;} #main [data-task-prototype] .tp-workspace-tab-actions [data-expand-workspace] {position:relative;border-left:0!important;border-radius:0!important;box-shadow:none!important;} #main [data-task-prototype] .tp-workspace-tab-actions [data-expand-workspace]::before {content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:1px;background:#d7d7d7;border-radius:0;} /* Both columns begin with matching navigation rows; the right row owns shared actions. */ #main #workspace-side-panel#workspace-side-panel .wp-side-header {display:none!important;} #main #workspace-side-panel .wp-side-nav-row {display:flex;align-items:stretch;flex:none;min-width:0;height:var(--wp-nav-height,64px);box-sizing:border-box;border-bottom:1px solid #dedede;background:#fff;} #main #workspace-side-panel .wp-side-nav-row .wp-side-tabs {flex:1;min-width:0;align-items:center;border-bottom:0;padding:6px;gap:4px;scrollbar-width:thin;} #main #workspace-side-panel .wp-side-nav-row .wp-side-tabs button {font-size:14px;min-height:40px;padding:10px 12px;} #main #workspace-side-panel .wp-side-actions {position:relative;display:flex;align-items:center;flex:none;gap:8px;padding:6px 12px 6px 14px;background:#fff;} #main #workspace-side-panel .wp-side-actions::before {content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:24px;background:#d7d7d7;border-radius:0;} #main #workspace-side-panel .wp-side-actions [data-expand-workspace] {display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:8px;white-space:nowrap;font:inherit;color:#252525;} #main #workspace-side-panel#workspace-side-panel .wp-side-actions [data-close-side] {display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border:0;padding:0;background:transparent;box-shadow:none;} #main #workspace-side-panel .wp-side-actions button:focus-visible {outline:2px solid #2676c9;outline-offset:-2px;} /* Navigation uses the same component and dimensions on either side. */ #main #workspace-side-panel .wp-side-nav-row .wp-side-tabs > button[data-tab] {display:inline-flex!important;align-items:center;justify-content:center;gap:6px;font-size:14px!important;line-height:20px!important;height:36px!important;min-height:36px!important;padding:8px 12px!important;border-radius:8px!important;} #main #workspace-side-panel .wp-side-tabs {isolation:auto!important;scroll-padding-right:0!important;} #main #workspace-panel-deck .wp-reference-copy[hidden] {display:none!important;} #main #workspace-panel-deck .wp-reference-copy {flex:1;min-height:0;overflow:auto;} #main .wp-reference-hint {grid-column:1/-1;padding:8px 12px;color:#737373;background:#f7f7f7;font-size:12px;} /* Compact text actions share the 34px / 13px scale of Edit draft and Expand all. */ #main#main [data-task-prototype] :is([data-open-alongside],[data-expand-workspace]) { box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important; flex:0 0 auto!important;gap:6px!important;width:auto!important;height:34px!important;min-height:34px!important; margin:0!important;padding:7px 12px!important;font-family:var(--tp-ui-font,sans-serif)!important; font-size:13px!important;line-height:18px!important;font-weight:400!important; color:#252525!important;background:transparent!important;border:0!important;border-radius:6px!important; box-shadow:none!important;text-decoration:none!important;white-space:nowrap!important;cursor:pointer; } #main#main [data-task-prototype] :is([data-open-alongside],[data-expand-workspace]):hover {background:#ededed!important;} #main#main [data-task-prototype] :is([data-open-alongside],[data-expand-workspace]):focus-visible {outline:2px solid #252525!important;outline-offset:2px!important;} #main#main [data-task-prototype] :is([data-open-alongside],[data-expand-workspace]) :is(svg,.tp-icon,[aria-hidden="true"]) { width:16px!important;height:16px!important;flex:0 0 16px!important;font-size:16px!important;line-height:16px!important; } #main#main [data-task-prototype] .tp-workspace-tab-actions [data-expand-workspace]::before {border-radius:0!important;} /* Separate section tabs from the entire action group, never action from action. */ #main#main [data-task-prototype] .tp-workspace-tab-actions {position:sticky;right:0;padding-left:14px!important;} #main#main [data-task-prototype] .tp-workspace-tab-actions::before { display:block!important;content:'';position:absolute;left:0;top:50%;bottom:auto;transform:translateY(-50%); width:1px;height:24px;background:#d7d7d7;border-radius:0;pointer-events:none; } #main#main [data-task-prototype] .tp-workspace-tab-actions [data-expand-workspace]::before {display:none!important;} #main#main [data-task-prototype] .tp-workspace-tab-actions:empty::before {display:none!important;} /* The original action slot must leave no divider or sticky blank space behind. */ #main#main [data-task-prototype] .tp-workspace-tab-actions.wp-actions-moved {display:none!important;} #main#main [data-task-prototype] .tp-workspace-tab-actions.wp-actions-moved::before {display:none!important;} /* Both live and reference areas adapt to their own container, not viewport width. */ #main #workspace-panel-deck#workspace-panel-deck .wp-file-comparison { display:grid!important;grid-template-columns:var(--tp-context-column,260px) minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important;min-width:0!important;overflow:hidden!important; } #main #workspace-panel-deck#workspace-panel-deck .wp-file-comparison[hidden] {display:none!important;} #main #workspace-panel-deck#workspace-panel-deck .wp-file-comparison > .tp-file-list {grid-column:1!important;grid-row:1!important;min-width:0;overflow:auto;} #main #workspace-panel-deck#workspace-panel-deck .wp-file-comparison > .tp-document-preview {grid-column:2!important;grid-row:1!important;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;} #main #workspace-panel-deck#workspace-panel-deck .wp-file-comparison.is-preview-wide {grid-template-columns:minmax(0,1fr)!important;} #main #workspace-panel-deck#workspace-panel-deck .wp-file-comparison.is-preview-wide > .tp-file-list {display:none!important;} #main #workspace-panel-deck#workspace-panel-deck .wp-file-comparison.is-preview-wide > .tp-document-preview {grid-column:1!important;} @container workspace-area (width < 640px) { #main #workspace-panel-deck#workspace-panel-deck :is(.tp-documents-workspace,.tp-communication-workspace,.tp-ticket-browser) { grid-template-columns:minmax(0,1fr)!important;min-width:0!important;max-width:100%!important;overflow:auto!important; } #main #workspace-panel-deck#workspace-panel-deck .tp-documents-workspace:not(.is-preview-wide) > :not(.tp-file-list), #main #workspace-panel-deck#workspace-panel-deck .tp-communication-workspace > :not(aside):not(.wp-reference-hint), #main #workspace-panel-deck#workspace-panel-deck .tp-ticket-browser > .tp-ticket-selection {display:none!important;} #main #workspace-panel-deck#workspace-panel-deck :is(.tp-file-list,.tp-ticket-navigation), #main #workspace-panel-deck#workspace-panel-deck .tp-communication-workspace > aside { grid-column:1!important;grid-row:auto!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box; } } /* One separator owns the bottom edge of side navigation, spanning tabs and actions. */ #main#main #workspace-side-panel .wp-side-nav-row {border:0!important;border-bottom:1px solid #dedede!important;box-shadow:none!important;} #main#main #workspace-side-panel .wp-side-nav-row > .wp-side-tabs {border:0!important;box-shadow:none!important;} #main#main #workspace-side-panel .wp-side-nav-row > .wp-side-tabs::after {display:none!important;} #main #workspace-panel-deck .wp-compact-file-bar, #main #workspace-panel-deck .wp-compact-reference-info {display:none!important;} @container workspace-area (width < 640px) { #main #workspace-panel-deck#workspace-panel-deck .tp-documents-workspace.wp-compact-document-open { display:block!important;overflow:auto!important;min-height:0!important; } #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open > .tp-file-list {display:none!important;} #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open > .wp-compact-file-bar { display:flex!important;align-items:center;gap:8px;position:sticky;top:0;z-index:25;padding:10px 12px;background:#f7f7f7;border-bottom:1px solid #dedede; } #main #workspace-panel-deck .wp-compact-file-bar button {flex:none;padding:7px 8px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:13px;color:#252525;} #main #workspace-panel-deck .wp-compact-file-bar button:focus-visible {outline:2px solid #2676c9;} #main #workspace-panel-deck .wp-compact-file-name {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;} #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open > [data-file-preview] { display:flex!important;flex-direction:column;height:auto!important;min-height:500px!important;max-height:none!important;width:100%!important; } #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open .tp-document-preview-canvas {height:auto!important;max-height:none!important;min-height:350px;overflow:auto;} #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open.wp-compact-info-open > #tp-file-inspector { display:flex!important;position:static!important;width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important; } #main #workspace-panel-deck#workspace-panel-deck .wp-compact-info-open .tp-document-review-fields {overflow:visible!important;max-height:none!important;} #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open.wp-compact-info-open > .wp-compact-reference-info {display:block!important;padding:16px;background:#f7f7f7;border-bottom:1px solid #dedede;} } @container workspace-area (width < 640px) { #main #workspace-panel-deck#workspace-panel-deck .tp-documents-workspace.wp-compact-document-open {display:flex!important;flex-direction:column!important;} #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open > .wp-compact-file-bar {order:0;flex:none;} #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open > :is(#tp-file-inspector,.wp-compact-reference-info) {order:1;flex:none;} #main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open > [data-file-preview] {order:2;flex:none;} } #main [data-task-prototype] .tp-current-user {display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:18px;color:#252525;} #main [data-task-prototype] .tp-current-user small {display:block;font-size:11px;color:#737373;} #main [data-task-prototype] .tp-you-chip {display:inline-flex;align-items:center;margin-left:6px;padding:2px 5px;background:#ededed;color:#666;border-radius:4px;font-size:10px;line-height:14px;font-weight:600;} #main [data-task-prototype] .tp-request-mode-alert[hidden] {display:none!important;} /* Identity stays in the avatar tooltip instead of taking header space. */ #main [data-task-prototype] .tp-user-avatar {position:relative;overflow:visible;} #main [data-task-prototype] .tp-user-tooltip {display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:1000;white-space:nowrap;padding:8px 10px;background:#252525;color:#fff;border-radius:6px;font-size:12px;line-height:18px;font-weight:400;box-shadow:0 4px 12px #0002;pointer-events:none;} #main [data-task-prototype] .tp-user-avatar:is(:hover,:focus-visible) .tp-user-tooltip {display:block;} #main [data-task-prototype] .tp-user-avatar:focus-visible {outline:2px solid #2676c9;outline-offset:3px;} #main [data-task-prototype] .tp-request-table-empty {position:sticky;left:0;box-sizing:border-box;min-height:180px;padding:48px 24px;text-align:center;background:#fff;border-top:1px solid #dedede;font-size:14px;line-height:20px;} #main [data-task-prototype] .tp-request-table-empty[hidden] {display:none!important;} #main [data-task-prototype] .tp-request-table-empty strong {display:block;color:#252525;font-weight:600;} #main [data-task-prototype] .tp-request-table-empty p {margin:8px 0 0;color:#737373;} /* All request tables fill the list workspace; pagination stays at its bottom edge. */ #main#main [data-task-prototype] .tp-list-screen {display:flex!important;flex-direction:column;min-height:0;} #main#main [data-task-prototype] .tp-list-screen[hidden] {display:none!important;} #main#main [data-task-prototype] .tp-list-layout {display:flex!important;flex-direction:column;flex:1;min-height:0!important;height:auto!important;} #main#main [data-task-prototype] .tp-task-list {display:flex!important;flex-direction:column;flex:1;min-height:0;overflow:auto;} #main#main [data-task-prototype] .tp-table-wrap {display:flex;flex-direction:column;flex:1;min-height:220px;} #main#main [data-task-prototype] .tp-table-wrap > table {flex:none;} #main#main [data-task-prototype] .tp-request-table-empty:not([hidden]) {display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:160px;} #main#main [data-task-prototype] .tp-task-list > .tp-list-footer {flex:none;margin-top:auto!important;} /* The table header owns the single separator above empty results. */ #main#main [data-task-prototype] .tp-request-table-empty {border-top:0!important;} #main#main [data-task-prototype] .tp-table-wrap thead, #main#main [data-task-prototype] .tp-table-wrap thead tr {border-bottom:0!important;box-shadow:none!important;} #main#main [data-task-prototype] .tp-table-wrap th {border-bottom:1px solid #dedede!important;box-shadow:none!important;} /* Related requests use the same full-height table frame in either workspace. */ #main#main [data-task-prototype] .tp-related-requests:not([hidden]) {display:flex!important;flex-direction:column;flex:1;min-height:0!important;overflow:hidden!important;} #main#main [data-task-prototype] .tp-related-requests > .tp-related-header {flex:none;} #main#main [data-task-prototype] .tp-related-table-wrap {flex:1;min-height:0;overflow:auto!important;} #main#main [data-task-prototype] .tp-related-footer {flex:none;margin-top:auto!important;} /* Applied column filters show their value, not just a reset icon. */ #main#main [data-task-prototype] .tp-header-filter {flex-wrap:wrap;} #main#main [data-task-prototype] .tp-header-filter-value {display:block;flex-basis:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:18px;font-weight:500;color:#252525;padding-top:4px;} #main#main [data-task-prototype] .tp-header-filter-value[hidden] {display:none!important;} #main#main [data-task-prototype] .has-active-filter > [data-header-filter-toggle] {background:#e5e5e5!important;color:#252525!important;} #main#main [data-task-prototype] .tp-header-filter-menu [aria-pressed="true"]::before {content:'✓';display:inline-block;width:18px;} /* The final data row must remain separated from unused table space. */ #main#main [data-task-prototype] :is(.tp-table-wrap,.tp-related-table-wrap) tbody tr:last-child > :is(td,th) {border-bottom:1px solid var(--tp-line,#dedede)!important;} /* Share the boundary with pagination instead of stacking two borders. */ #main#main [data-task-prototype] .tp-task-list > .tp-table-wrap {border-bottom:0!important;} #main#main [data-task-prototype] :is(.tp-task-list > .tp-list-footer,.tp-related-footer) {position:relative;z-index:6;margin-top:-1px!important;border-top:1px solid var(--tp-line,#dedede)!important;box-shadow:none!important;background:var(--tp-surface,#fff);} /* Embedded preview keeps the same viewport-sized frame for every data state. */ #main#main [data-task-prototype]:not(.is-focus-mode):not(.is-stage-locked) {height:calc(100svh - 80px)!important;min-height:560px;overflow:hidden;} #main#main [data-task-prototype]:not(.is-focus-mode):not(.is-stage-locked) > .tp-screen {height:100%!important;min-height:0!important;overflow:hidden;} #main#main .case-product-gallery {border-bottom:0!important;box-shadow:none!important;} #main#main .case-product-gallery::after {display:none!important;} #main#main .case-product-gallery + .workflow-content {border-top:0!important;} #main#main .case-product-gallery + .workflow-content > article {border-top:0!important;} /* Applied values are removable chips on the same header line. */ #main#main [data-task-prototype] .tp-header-filter {flex-wrap:nowrap!important;align-items:center;gap:6px;white-space:nowrap;} #main#main [data-task-prototype] .tp-header-filter-value {display:none!important;} #main#main [data-task-prototype] .tp-header-filter-clear:not([hidden]) {position:static!important;display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-width:0!important;max-width:180px;height:26px!important;min-height:26px!important;padding:3px 8px!important;border:0!important;border-radius:5px!important;background:#ededed!important;color:#252525!important;font:500 12px/20px var(--tp-ui-font,sans-serif)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:none!important;} #main#main [data-task-prototype] .tp-header-filter-clear:hover {background:#dedede!important;} #main#main [data-task-prototype] .tp-user-tooltip-chip {display:inline-block;margin-left:5px;padding:1px 5px;border-radius:4px;background:#e9e9e9;color:#555;font-size:10px;line-height:16px;font-weight:600;vertical-align:1px;} #main#main [data-task-prototype] .wp-compact-ticket-bar {display:none;} @container workspace-area (width < 640px) { #main#main #workspace-panel-deck .tp-documents-workspace:not(.wp-compact-document-open) > .tp-file-list {display:flex!important;flex-direction:column;width:100%!important;min-width:0!important;grid-column:1!important;} #main#main #workspace-panel-deck .tp-documents-workspace.wp-compact-document-open > [data-file-preview] {display:flex!important;visibility:visible!important;grid-column:1!important;width:100%!important;} #main#main #workspace-panel-deck .tp-ticket-browser.wp-compact-ticket-open {display:flex!important;flex-direction:column;overflow:auto!important;} #main#main #workspace-panel-deck .wp-compact-ticket-open > .tp-ticket-navigation {display:none!important;} #main#main #workspace-panel-deck .wp-compact-ticket-open > .tp-ticket-selection {display:block!important;width:100%!important;min-width:0!important;overflow:visible!important;} #main#main #workspace-panel-deck .wp-compact-ticket-open > .wp-compact-ticket-bar {display:block!important;position:sticky;top:0;z-index:25;padding:10px 12px;background:#f7f7f7;border-bottom:1px solid #dedede;} #main#main [data-task-prototype] .wp-compact-ticket-bar button {border:0;background:transparent;padding:7px 8px;font:inherit;color:#252525;} } @container workspace-area (width < 640px) { #main#main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open > .wp-compact-file-bar {display:flex!important;} #main#main #workspace-panel-deck#workspace-panel-deck .wp-compact-document-open > [data-file-preview] {display:flex!important;} #main#main #workspace-panel-deck#workspace-panel-deck .wp-compact-ticket-open > .tp-ticket-selection {display:block!important;} } @container workspace-area (width < 760px) { #main#main [data-task-prototype] .tp-activity-toolbar {display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:12px!important;} #main#main [data-task-prototype] .tp-activity-toolbar > div:first-child {flex:0 0 100%!important;width:100%!important;max-width:none!important;} #main#main [data-task-prototype] .tp-activity-toolbar > div:first-child :is(h4,p) {width:100%!important;max-width:none!important;white-space:normal!important;} #main#main [data-task-prototype] .tp-activity-toolbar > label {flex:1 1 180px!important;min-width:0!important;width:auto!important;} #main#main [data-task-prototype] .tp-activity-toolbar > button {flex:0 0 auto!important;} } #main#main [data-task-prototype] .tp-related-header {display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:16px;} #main#main [data-task-prototype] .tp-related-header > div {flex:1;min-width:0;} #main#main [data-task-prototype] .tp-related-header > button {flex:none;} /* Reference mode is informational and never consumes a workspace row's spare height. */ #main#main [data-task-prototype] .wp-reference-hint {box-sizing:border-box;align-self:start;flex:0 0 auto!important;height:auto!important;min-height:0!important;max-height:none!important;padding:10px 14px!important;background:#edf4fa!important;color:#385d7a!important;border-bottom:1px solid #d5e3ee!important;font-size:12px;line-height:18px;} #main#main [data-task-prototype] .tp-communication-workspace.wp-reference-copy {grid-template-rows:auto minmax(0,1fr)!important;} #main#main [data-task-prototype] .tp-communication-workspace.wp-reference-copy > .wp-reference-hint {grid-row:1!important;} #main#main [data-task-prototype] .tp-communication-workspace.wp-reference-copy > aside {grid-row:2!important;} /* Native scrolling throughout the prototype, with one quiet visual treatment. */ #main#main [data-task-prototype],#main#main [data-task-prototype] * {scrollbar-width:thin;scrollbar-color:rgba(80,88,96,.32) transparent;} #main#main [data-task-prototype] *:hover {scrollbar-color:rgba(80,88,96,.5) transparent;} #main#main [data-task-prototype] ::-webkit-scrollbar {width:8px;height:8px;} #main#main [data-task-prototype] ::-webkit-scrollbar-track {background:transparent;} #main#main [data-task-prototype] ::-webkit-scrollbar-thumb {background:rgba(80,88,96,.32);border:2px solid transparent;background-clip:padding-box;border-radius:8px;} #main#main [data-task-prototype] ::-webkit-scrollbar-thumb:hover {background-color:rgba(80,88,96,.55);} #main#main [data-task-prototype] .wp-tab-scroll {position:sticky!important;z-index:12;align-self:center;flex:0 0 28px!important;width:28px!important;min-width:28px!important;height:34px!important;min-height:34px!important;padding:0!important;border:0!important;background:#fff!important;color:#555!important;font:24px/34px sans-serif!important;box-shadow:none!important;} #main#main [data-task-prototype] .wp-tab-scroll[data-scroll-direction="previous"] {left:0;} #main#main [data-task-prototype] .wp-tab-scroll[data-scroll-direction="next"] {right:0;} #main#main [data-task-prototype] .wp-tab-scroll[hidden] {display:none!important;} #main#main [data-task-prototype] .wp-tab-scroll:focus-visible {outline:2px solid #2676c9!important;outline-offset:-2px;} @media (forced-colors:active) {#main#main [data-task-prototype],#main#main [data-task-prototype] * {scrollbar-color:auto;}} /* Edge controls belong to the tab strip, with the same chevrons as pagination. */ #main#main [data-task-prototype] .tp-workspace-tabs > .wp-tab-scroll {align-self:stretch!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 32px!important;width:32px!important;min-width:32px!important;height:auto!important;min-height:34px!important;border-radius:0!important;margin-block:-6px!important;background:#fff!important;color:#555!important;} #main#main [data-task-prototype] .tp-workspace-tabs > .wp-tab-scroll[data-scroll-direction="previous"] {left:0!important;margin-left:calc(-1 * var(--wp-scroll-edge-offset,6px))!important;} #main#main [data-task-prototype] .tp-workspace-tabs > .wp-tab-scroll[data-scroll-direction="next"] {margin-right:calc(-1 * var(--wp-scroll-edge-offset,6px))!important;} #main#main [data-task-prototype] .tp-workspace-tabs > .wp-tab-scroll[hidden] {display:none!important;} #main#main [data-task-prototype] .wp-tab-scroll svg {display:block;flex:none;width:18px;height:18px;} #main#main [data-task-prototype] .tp-workspace-tabs > .wp-tab-scroll:hover {background:#f3f3f3!important;} /* Shared informational and primary status colors. */ #main#main [data-task-prototype] {--wp-info-bg:#EDE9FE;--wp-info-text:#5B21B6;--wp-progress-bg:#E0F2FE;--wp-progress-text:#075985;} #main#main [data-task-prototype] :is(.wp-reference-hint,.tp-request-mode-alert,.tp-ticket-mode-alert) {background:var(--wp-info-bg)!important;color:var(--wp-info-text)!important;border-color:#ddd6fe!important;} #main#main [data-task-prototype] :is(.tp-request-mode-alert,.tp-ticket-mode-alert) :is(strong,p,span,svg) {color:var(--wp-info-text)!important;} #main#main [data-task-prototype] :is(.wp-status-progress,[data-status="In progress"],[data-status="in-progress"]) {background:var(--wp-progress-bg)!important;color:var(--wp-progress-text)!important;} /* Hidden sections always win over compact drill-in display rules. */ #main#main #workspace-panel-deck#workspace-panel-deck [data-panel][hidden], #main#main #workspace-panel-deck#workspace-panel-deck .wp-reference-copy[hidden], #main#main #workspace-panel-deck#workspace-panel-deck .wp-file-comparison[hidden] {display:none!important;} #main#main [data-task-prototype] .wp-compact-communication-bar {display:none;} #main#main [data-task-prototype] :is(.wp-compact-file-bar,.wp-compact-ticket-bar,.wp-compact-communication-bar) {background:#fff!important;} @container workspace-area (width < 640px) { #main#main #workspace-panel-deck#workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open:not([hidden]) {display:flex!important;flex-direction:column!important;overflow:auto!important;} #main#main #workspace-panel-deck#workspace-panel-deck .wp-compact-conversation-open > aside {display:none!important;} #main#main #workspace-panel-deck#workspace-panel-deck .wp-compact-conversation-open > article {display:block!important;flex:1;min-height:0;width:100%!important;min-width:0!important;overflow:visible!important;} #main#main #workspace-panel-deck#workspace-panel-deck .wp-compact-conversation-open > .wp-compact-communication-bar {display:block!important;position:sticky;top:0;z-index:25;flex:none;padding:10px 12px;border-bottom:1px solid #dedede;} #main#main [data-task-prototype] .wp-compact-communication-bar button {border:0;background:transparent;color:#252525;padding:7px 8px;font:inherit;} } #main#main [data-task-prototype] .draft-chat-people-dialog .draft-people-heading {margin:20px 0 8px;font-size:12px;line-height:18px;font-weight:600;color:#737373;} /* Navigation arrows overlay the viewport edges, outside the ordered scroll content. */ #main#main [data-task-prototype] .wp-tab-scroll {position:absolute!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:40!important;width:32px!important;min-width:32px!important;padding:0!important;margin:0!important;right:auto!important;bottom:auto!important;border:0!important;border-radius:0!important;background:#fff!important;transform:none!important;} #main#main [data-task-prototype] .wp-tab-scroll[hidden] {display:none!important;} #main#main [data-task-prototype] .wp-reference-hint {display:flex!important;align-items:center!important;gap:8px;width:100%!important;max-width:none!important;min-width:0!important;align-self:stretch!important;justify-self:stretch!important;grid-column:1 / -1!important;} #main#main [data-task-prototype] .wp-reference-hint > svg {flex:0 0 18px;width:18px;height:18px;} #main#main [data-task-prototype] .wp-reference-hint > span {min-width:0;} #main#main [data-task-prototype] .wp-tab-scroll {align-items:center!important;justify-content:center!important;line-height:1!important;} #main#main [data-task-prototype] .wp-side-body :is(button,input,select,textarea):disabled {opacity:1!important;color:#9a9a9a!important;background:#f4f4f4!important;border-color:#e5e5e5!important;box-shadow:none!important;cursor:not-allowed!important;} #main#main [data-task-prototype] .wp-side-body [aria-disabled="true"] {color:#9a9a9a!important;cursor:not-allowed;} /* Mail header fields use the whole labelled row as their interactive surface. */ #main#main [data-task-prototype] .tp-email-composer :is(.draft-recipient-row,label:has(> input[data-draft-field])):is(:hover,:focus-within) {background:#f7f7f7!important;} #main#main [data-task-prototype] .tp-email-composer :is(.draft-recipient-row,label:has(> input[data-draft-field])):focus-within {outline:1px solid #b8b8b8!important;outline-offset:-1px!important;} #main#main [data-task-prototype] .tp-email-composer .draft-recipient-row > label {background:transparent!important;outline:0!important;} #main#main [data-task-prototype] .tp-email-composer input[data-draft-field]:is(input,:hover,:focus,:focus-visible,:active) {border:0!important;border-radius:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;align-self:stretch;min-height:40px;} /* Ownership restriction is a caution; reference mode remains informational. */ #main#main [data-task-prototype] .tp-request-mode-alert {background:#FEF3C7!important;color:#92400E!important;border-color:#FDE68A!important;align-items:center;gap:12px;} #main#main [data-task-prototype] .tp-request-mode-alert :is(strong,p,span,svg) {color:#92400E!important;} #main#main [data-task-prototype] .tp-request-mode-alert > .tp-view-mode-icon {display:block;width:22px;height:22px;flex:0 0 22px;} #main#main [data-task-prototype] .tp-request-mode-alert > div {flex:1;min-width:0;} #main#main [data-task-prototype] .tp-request-mode-alert [data-claim-request] {background:transparent!important;color:#92400E!important;border:1px solid #92400E!important;box-shadow:none!important;flex:none;} #main#main [data-task-prototype] .tp-request-mode-alert [data-claim-request]:hover {background:#FDE68A!important;} #main#main [data-task-prototype] .tp-request-mode-alert [data-claim-request]:focus-visible {outline:2px solid #92400E!important;outline-offset:3px!important;} /* Each document section owns only its top divider; avoid adjoining borders. */ #main#main [data-task-prototype] .tp-document-review-fields { border-left:0!important; border-right:0!important; } #main#main [data-task-prototype] .tp-document-review-fields > :is(.tp-validation,.tp-review-rules,.tp-review-approval-status) { border-bottom:0!important; } #main#main [data-task-prototype] .tp-document-review-fields > :is(.tp-review-approval-status,.tp-review-file-details) { border-top:1px solid #dedede!important; } @container workspace-area (width < 640px) { #main#main [data-task-prototype] .wp-compact-document-open > #tp-file-inspector { border-left:0!important; border-right:0!important; } } /* Pinning is indicated by its icon, without a persistent header fill. */ #main#main [data-task-prototype] .tp-list-screen thead th { background:#fff!important; } #main#main [data-task-prototype] .tp-list-screen thead th:hover { background:#f3f3f3!important; } /* Keep the always-pinned selection column visibly separated while scrolling. */ #main#main [data-task-prototype] .tp-list-screen :is(th,td).tp-select-cell { box-shadow:inset -1px 0 #dedede!important; } /* Explicit columns keep the inspector from pushing the conversation into the list. */ @container workspace-area (width >= 640px) { #main#main#main [data-task-prototype] .tp-communication-workspace:not(.wp-communication-list-only):not(.wp-reference-copy) { grid-template-columns:var(--communication-list-size,33.333%) minmax(0,1fr)!important; grid-template-rows:minmax(0,1fr)!important; } #main#main#main [data-task-prototype] .tp-communication-workspace.communication-info-open:not(.wp-communication-list-only):not(.wp-reference-copy) { grid-template-columns:var(--communication-list-size,33.333%) minmax(0,1fr) minmax(0,1fr)!important; } #main#main#main [data-task-prototype] .tp-communication-workspace:not(.wp-reference-copy) > aside {grid-column:1!important;grid-row:1!important;} #main#main#main [data-task-prototype] .tp-communication-workspace > .communication-info-inspector {grid-column:2!important;grid-row:1!important;position:static!important;width:auto!important;min-width:0!important;} #main#main#main [data-task-prototype] .tp-communication-workspace > [data-message-detail] {grid-column:2!important;grid-row:1!important;min-width:0!important;} #main#main#main [data-task-prototype] .tp-communication-workspace.communication-info-open > [data-message-detail] {grid-column:3!important;} #main#main#main [data-task-prototype] .tp-documents-workspace:not(.wp-compact-document-open):not(.is-files-collapsed):not(.is-inspector-collapsed) {grid-template-columns:repeat(3,minmax(0,1fr))!important;} #main#main#main [data-task-prototype] .tp-documents-workspace.is-files-collapsed:not(.wp-compact-document-open):not(.is-inspector-collapsed) {grid-template-columns:58px minmax(0,1fr) minmax(0,1fr)!important;} } #main#main#main [data-task-prototype] .tp-file-list .tp-files-info-toggle[hidden] {display:none!important;} /* Required record fields use the same inline validation as document fields. */ #main#main [data-task-prototype] .tp-record-form dl > div.is-missing {background:transparent!important;} #main#main [data-task-prototype] .tp-record-form [aria-invalid="true"] {border:1px solid #b44b37!important;} #main#main [data-task-prototype] .tp-record-field-error {display:block;color:#b44b37!important;margin-top:6px;font-size:12px;line-height:18px;} #main#main [data-task-prototype] .tp-record-field-error[hidden] {display:none!important;} #main#main [data-task-prototype] .tp-request-empty-visual {display:block;flex:none;width:200px;height:130px;margin:0 auto 20px;filter:drop-shadow(0 8px 12px #00000008);} /* Shared alert anatomy: icon aligned to title, description in the text column. */ #main#main#main [data-task-prototype] :is(.wp-reference-hint,.tp-request-mode-alert) { display:grid!important;grid-template-columns:20px minmax(0,1fr) auto!important; align-items:start!important;column-gap:12px!important;row-gap:8px!important; padding:12px 16px!important;font-size:13px!important;line-height:20px!important; } #main#main#main [data-task-prototype] :is(.wp-reference-hint,.tp-request-mode-alert) > svg { grid-column:1;grid-row:1;width:20px!important;height:20px!important;margin:0!important; stroke-width:1.7;align-self:start!important; } #main#main#main [data-task-prototype] :is(.wp-reference-hint,.tp-request-mode-alert) > div { grid-column:2;grid-row:1;min-width:0;display:flex!important;flex-direction:column;gap:2px!important; } #main#main#main [data-task-prototype] :is(.wp-reference-hint,.tp-request-mode-alert) > div > strong { display:block!important;margin:0!important;font-size:13px!important;line-height:20px!important;font-weight:600!important; } #main#main#main [data-task-prototype] :is(.wp-reference-hint,.tp-request-mode-alert) > div > span { display:block!important;margin:0!important;font-size:13px!important;line-height:20px!important;font-weight:400!important; } #main#main#main [data-task-prototype] .tp-request-mode-alert > button {grid-column:3;grid-row:1;align-self:center;} #main#main [data-task-prototype] .tp-list-screen :is(th,td).tp-select-cell { padding-left:12px!important;padding-right:12px!important;text-align:center!important;vertical-align:middle!important; } #main#main [data-task-prototype] .tp-list-screen .tp-select-cell input[type="checkbox"] { display:block!important;margin-left:auto!important;margin-right:auto!important; } #main#main [data-task-prototype] .tp-request-empty-visual {width:120px;height:112px;margin:0 auto 16px;filter:none;} /* Keep list controls within the available width, wrapping only when needed. */ #main#main#main [data-task-prototype] .tp-list-footer {display:flex!important;flex-wrap:wrap!important;gap:12px 16px!important;align-items:center!important;} #main#main#main [data-task-prototype] .tp-list-footer > span {flex:0 1 auto!important;white-space:nowrap;} #main#main#main [data-task-prototype] .tp-list-footer > div {width:auto!important;flex:1 1 auto!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:12px!important;} #main#main#main [data-task-prototype] .tp-bulk-bar {display:flex!important;flex-wrap:wrap!important;min-width:0!important;gap:10px!important;} #main#main#main [data-task-prototype] .tp-bulk-bar > label {min-width:0!important;max-width:100%!important;flex:0 1 190px!important;} #main#main#main [data-task-prototype] .tp-bulk-select {width:100%!important;min-width:0!important;} #main#main#main [data-task-prototype] .tp-bulk-bar select {width:100%!important;min-width:0!important;max-width:100%!important;} #main#main#main [data-task-prototype] .tp-bulk-bar > button {flex:0 0 auto!important;} @media(max-width:1100px) { #main#main#main [data-task-prototype], #main#main#main [data-task-prototype] .tp-screen:not([hidden]) {height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;} #main#main#main [data-task-prototype] .tp-case-workspace {display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;height:auto!important;min-height:0!important;overflow:visible!important;} #main#main#main [data-task-prototype] :is(.tp-case-context,.tp-case-main-workspace,.tp-operational-context) {display:contents!important;} #main#main#main [data-task-prototype] .tp-identity-block {order:0;min-height:0!important;height:auto!important;padding:20px!important;border-bottom:1px solid #dedede!important;} #main#main#main [data-task-prototype] .tp-operational-signals {order:1;min-height:0!important;height:auto!important;align-self:stretch!important;border:0!important;border-bottom:1px solid #dedede!important;} #main#main#main [data-task-prototype] .tp-operational-signals > div {align-items:flex-start!important;text-align:left!important;padding:16px 20px!important;} #main#main#main [data-task-prototype] .tp-case-context > header {order:3;padding:20px 20px 0!important;} #main#main#main [data-task-prototype] .tp-case-context-content {order:4;height:auto!important;max-height:none!important;overflow:visible!important;padding:16px 20px 20px!important;border-bottom:1px solid #dedede!important;} #main#main#main [data-task-prototype] .tp-next-action {order:2;min-height:0!important;height:auto!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:16px!important;padding:20px!important;border:0!important;border-bottom:1px solid #dedede!important;} #main#main#main [data-task-prototype] .tp-next-action > div {flex:1 1 220px;min-width:0;} #main#main#main [data-task-prototype] .tp-workspace-tabs {order:5;min-width:0!important;max-width:100%!important;overflow-x:auto!important;} #main#main#main [data-task-prototype] #workspace-panel-deck {order:6;display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;overflow:visible!important;} #main#main#main [data-task-prototype] #workspace-panel-deck > .wp-primary {height:auto!important;min-height:0!important;overflow:visible!important;} #main#main#main [data-task-prototype] :is(.wp-layout-tools,#workspace-side-panel,.wp-resize,[data-open-alongside],[data-expand-workspace]) {display:none!important;} #main#main#main [data-task-prototype] #workspace-panel-deck [data-panel]:not([hidden]) {min-width:0!important;max-width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important;} #main#main#main [data-task-prototype] .tp-communication-workspace > aside {height:auto!important;max-height:none!important;overflow:visible!important;} #main#main#main [data-task-prototype] .tp-case-actions {position:sticky!important;bottom:0!important;left:auto!important;right:auto!important;z-index:40!important;flex-shrink:0!important;flex-wrap:wrap!important;height:auto!important;padding:12px 12px max(12px,env(safe-area-inset-bottom))!important;background:var(--tp-surface,#fff)!important;} #main#main#main [data-task-prototype] .tp-case-action-group {display:flex!important;flex-wrap:wrap!important;gap:8px!important;min-width:0!important;} #main#main#main [data-task-prototype] :is(.tp-case-context-content dd,.tp-message-copy,.tp-next-action h3,.tp-request-mode-alert) {overflow-wrap:anywhere;} #main#main#main [data-task-prototype] .tp-request-mode-alert {flex-wrap:wrap!important;} } @media(max-width:480px) { #main#main#main [data-task-prototype] .tp-bulk-bar > span {flex-basis:100%!important;} #main#main#main [data-task-prototype] .tp-bulk-bar > label {flex:1 1 0!important;} #main#main#main [data-task-prototype] .tp-list-footer {padding:12px!important;gap:10px!important;} #main#main#main [data-task-prototype] .tp-list-footer > div {justify-content:space-between!important;} #main#main#main [data-task-prototype] .tp-case-context-content dl > div {grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important;gap:12px!important;} } #main#main#main [data-task-prototype] .tp-request-empty-visual {display:block;width:144px;height:144px;object-fit:contain;margin:0 auto 16px;filter:none;} /* Keep the bulk-action caption and dropdown together without squeezing the caption. */ #main#main#main [data-task-prototype] .tp-bulk-bar > label {flex:0 1 auto!important;} #main#main#main [data-task-prototype] .tp-bulk-label {white-space:nowrap!important;flex:0 0 auto!important;} #main#main#main [data-task-prototype] .tp-bulk-select {flex:1 1 150px!important;min-width:120px!important;} @media(max-width:480px) { #main#main#main [data-task-prototype] .tp-bulk-bar > label {flex:1 1 0!important;flex-wrap:wrap!important;gap:6px!important;} #main#main#main [data-task-prototype] .tp-bulk-select {min-width:0!important;} } /* Shared header height keeps the Communication and Call info dividers aligned. */ #main#main#main [data-task-prototype] :is(.communication-info-list-heading,.communication-info-inspector > header) {height:66px!important;min-height:66px!important;flex:0 0 66px!important;box-sizing:border-box!important;padding-block:12px!important;margin:0!important;} @media(max-width:1100px) { #main#main#main [data-task-prototype] .tp-case-workspace {grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important;} #main#main#main [data-task-prototype] .tp-identity-block {grid-column:1!important;grid-row:1!important;min-width:0;} #main#main#main [data-task-prototype] .tp-operational-signals {grid-column:2!important;grid-row:1!important;min-width:0;border-left:1px solid #dedede!important;} #main#main#main [data-task-prototype] .tp-case-workspace :is(.tp-case-context > header,.tp-case-context-content,.tp-next-action,.tp-workspace-tabs,#workspace-panel-deck) {grid-column:1 / -1!important;} #main#main#main [data-task-prototype] .tp-next-action {padding-top:20px!important;padding-bottom:20px!important;} #main#main#main [data-task-prototype] .tp-next-action .tp-next-action-reason {margin-bottom:0!important;} #main#main#main [data-task-prototype]:is(.is-focus-mode,.is-stage-locked) {height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;} #main#main#main [data-task-prototype] .tp-operational-signals dd {font-size:clamp(14px,3vw,18px)!important;} #main#main#main [data-task-prototype] .tp-request-id-value {font-size:clamp(18px,4vw,24px)!important;} } @media(max-width:1100px) { #main#main#main [data-task-prototype] .tp-case-workspace {max-height:none!important;grid-auto-rows:auto!important;} #main#main#main [data-task-prototype] .tp-next-action {overflow:visible!important;flex-shrink:0!important;} #main#main#main [data-task-prototype] #workspace-panel-deck :is(.wp-primary,.tp-communication-workspace,.tp-communication-workspace > aside) {flex:none!important;max-height:none!important;min-height:min-content!important;} #main#main#main [data-task-prototype] .tp-communication-workspace > aside {display:block!important;} } /* Preserve the round brand mark when the compact header runs out of space. */ #main#main#main [data-task-prototype] .tp-brand .tp-mark {flex-shrink:0!important;aspect-ratio:1!important;width:34px!important;height:34px!important;min-width:34px!important;border-radius:50%!important;} @media(max-width:480px) { #main#main#main [data-task-prototype] .tp-brand > strong {display:none!important;} #main#main#main [data-task-prototype] .tp-brand {flex:0 0 34px!important;min-width:34px!important;gap:0!important;} } /* Stack the response target below the request identity on narrow phones. */ #main#main#main [data-task-prototype] .tp-bulk-select :is(.draft-select,.draft-select-trigger) {width:100%!important;min-width:0!important;box-sizing:border-box;} @media(max-width:650px) { #main#main#main [data-task-prototype] .tp-bulk-bar {display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;} #main#main#main [data-task-prototype] .tp-bulk-bar > span {grid-column:1 / -1!important;} #main#main#main [data-task-prototype] .tp-bulk-bar > label {width:100%!important;margin:0!important;} #main#main#main [data-task-prototype] .tp-bulk-select {flex:1 1 0!important;min-width:0!important;} } @media(max-width:480px) { #main#main#main [data-task-prototype] .tp-page-title {flex-direction:column!important;align-items:flex-start!important;gap:16px!important;} #main#main#main [data-task-prototype] .tp-page-title > div {min-width:0!important;max-width:100%!important;} #main#main#main [data-task-prototype] .orion-request-tiles > button {display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-content:start!important;justify-content:start!important;gap:10px 8px!important;} #main#main#main [data-task-prototype] .orion-request-tiles > button > span:first-child {grid-column:1 / -1!important;min-width:0!important;} #main#main#main [data-task-prototype] .orion-request-tiles > button > b {grid-row:2!important;grid-column:1!important;} #main#main#main [data-task-prototype] .orion-request-tiles > button > .draft-problem-count {grid-row:2!important;grid-column:2!important;justify-self:start!important;} } #main#main#main [data-task-prototype] .draft-missed-call-image {display:block;width:144px;height:144px;max-width:100%;object-fit:contain;margin:0 auto 16px;} @media(max-width:480px) { #main#main#main [data-task-prototype] .tp-case-workspace {grid-template-columns:minmax(0,1fr)!important;} #main#main#main [data-task-prototype] .tp-identity-block {grid-column:1 / -1!important;grid-row:auto!important;} #main#main#main [data-task-prototype] .tp-operational-signals {grid-column:1 / -1!important;grid-row:auto!important;border-left:0!important;} } /* Non-blocking floating call controls. */ .relay-call-pip {position:fixed;right:20px;bottom:20px;z-index:100000;width:300px;max-width:calc(100vw - 16px);box-sizing:border-box;border:1px solid #dce3dd;border-radius:18px;background:#fff;color:#292929;box-shadow:0 12px 40px #17322524;font:400 13px/1.4 'DM Sans',Arial,sans-serif;overflow:hidden;} .relay-call-pip header {display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #e5e5e5;cursor:grab;touch-action:none;user-select:none;} .relay-call-pip button {font:inherit;cursor:pointer;border:1px solid #dedede;border-radius:8px;padding:8px 12px;background:#f5f5f5;color:inherit;} .relay-call-pip header button {padding:0;width:30px;height:30px;font-size:20px;background:transparent;border:0;} .relay-call-person {display:flex;align-items:center;gap:18px;padding:24px 22px 14px;} .relay-call-person strong,.relay-call-person small {display:block;overflow-wrap:anywhere;} .relay-call-person strong {font-size:16px;font-weight:600;}.relay-call-person small {color:#777;margin-top:4px;} .relay-call-ripples {position:relative;display:grid;place-items:center;flex:0 0 54px;height:54px;} .relay-call-ripples span {position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:linear-gradient(140deg,#e2efdc,#a8cfb5);font-size:27px;color:#386748;} .relay-call-ripples i {position:absolute;inset:0;border:1px solid #8eb79a;border-radius:50%;animation:relay-call-ripple 2.4s ease-out infinite;} .relay-call-ripples i:nth-child(2) {animation-delay:.8s;}.relay-call-ripples i:nth-child(3) {animation-delay:1.6s;} @keyframes relay-call-ripple {0%{transform:scale(.85);opacity:.55;}100%{transform:scale(1.65);opacity:0;}} .relay-call-progress {display:flex;justify-content:space-between;padding:0 18px;font-weight:500;}.relay-call-progress time {font-variant-numeric:tabular-nums;color:#666;} .relay-call-hint {margin:5px 18px 16px;color:#777;font-size:12px;} .relay-call-pip footer {display:flex;gap:8px;padding:0 14px 14px;}.relay-call-pip footer button {flex:1;} .relay-call-pip [data-call-end] {background:#b94d43;color:#fff;border-color:#b94d43;} .relay-call-pip [aria-pressed=true] {background:#e1eadf;} .relay-call-pip.is-minimized .relay-call-person,.relay-call-pip.is-minimized .relay-call-hint,.relay-call-pip.is-minimized [data-call-mute] {display:none;} .relay-call-pip.is-minimized .relay-call-progress {padding:12px 14px;} .relay-call-pip[data-state=connected] .relay-call-ripples i {animation-duration:3.6s;} @media(prefers-reduced-motion:reduce) {.relay-call-ripples i {animation:none;opacity:.15;transform:scale(1.2);}} .relay-call-pip.has-contact-avatar .relay-call-person {flex-direction:column;text-align:center;gap:20px;padding-top:30px;} .relay-call-pip.has-contact-avatar .relay-call-ripples {flex-basis:72px;width:72px;height:72px;} .relay-call-pip.has-contact-avatar .relay-call-ripples span {width:72px;height:72px;font-size:23px;font-weight:600;} .relay-call-pip.has-contact-avatar.is-minimized .relay-call-person {display:flex;flex-direction:row;text-align:left;padding:12px 14px;gap:12px;} .relay-call-pip.has-contact-avatar.is-minimized .relay-call-ripples {flex-basis:36px;width:36px;height:36px;} .relay-call-pip.has-contact-avatar.is-minimized .relay-call-ripples span {width:36px;height:36px;font-size:14px;} /* Switch to list → conversation navigation before three columns become cramped. */ @container workspace-area (width < 640px) { #main#main#main #workspace-panel-deck .tp-communication-workspace:not([hidden]) {display:flex!important;flex-direction:column!important;min-width:0!important;overflow:auto!important;} #main#main#main #workspace-panel-deck .tp-communication-workspace > aside {display:flex!important;width:100%!important;min-width:0!important;flex:1!important;} #main#main#main #workspace-panel-deck .tp-communication-workspace > :is(article,.communication-info-inspector,.communication-list-splitter) {display:none!important;} #main#main#main #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open > aside {display:none!important;} #main#main#main #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open > [data-message-detail] {display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;flex:1!important;} #main#main#main #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open > .wp-compact-communication-bar {display:flex!important;align-items:center;justify-content:space-between;flex:none;position:sticky;top:0;z-index:25;padding:10px 12px;border-bottom:1px solid #dedede;} #main#main#main #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open.communication-info-open > .communication-info-inspector:not([hidden]) {display:block!important;position:static!important;width:100%!important;min-width:0!important;flex:1!important;} #main#main#main #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open.communication-info-open > [data-message-detail] {display:none!important;} #main#main#main [data-task-prototype] .communication-info-body .draft-call-metadata-grid > div {display:flex!important;flex-direction:column!important;gap:6px!important;align-items:flex-start!important;} #main#main#main [data-task-prototype] .communication-info-body .draft-call-metadata-grid dd {margin:0!important;width:100%!important;overflow-wrap:normal!important;} } /* Medium workspaces keep metadata readable. */ @container workspace-area (640px <= width < 960px) { #main#main#main [data-task-prototype] .tp-communication-workspace:not(.wp-reference-copy):not(.wp-communication-list-only) {display:grid!important;grid-template-columns:var(--communication-list-size,36%) minmax(0,1fr)!important;position:relative!important;} #main#main#main [data-task-prototype] .tp-communication-workspace > [data-message-detail] {grid-column:2!important;min-width:0!important;} #main#main#main [data-task-prototype] .communication-info-body .draft-call-metadata-grid > div {display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important;} #main#main#main [data-task-prototype] .communication-info-body .draft-call-metadata-grid dd {margin:0!important;} } /* Keep request controls outside the scrolling workspace at every responsive width. */ @media(max-width:1100px) { #main#main#main [data-task-prototype] {height:calc(100dvh - 80px)!important;max-height:calc(100dvh - 80px)!important;overflow:hidden!important;} #main#main#main [data-task-prototype]:is(.is-focus-mode,.is-stage-locked) {height:calc(100dvh - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:hidden!important;} #main#main#main [data-task-prototype] .tp-case-screen:not([hidden]) {display:flex!important;flex-direction:column!important;height:100%!important;max-height:100%!important;min-height:0!important;overflow:hidden!important;} #main#main#main [data-task-prototype] .tp-case-screen > :is(header,.tp-request-mode-alert,.tp-case-actions) {flex-shrink:0!important;} #main#main#main [data-task-prototype] .tp-case-workspace {flex:1 1 0!important;min-height:0!important;height:auto!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:start!important;} #main#main#main [data-task-prototype] .tp-case-screen > .tp-case-actions {position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;flex:0 0 auto!important;z-index:40!important;width:100%!important;box-sizing:border-box!important;} } /* Soft Aurora call surface. */ .relay-call-pip {background:#080b0a;color:#f5f7f6;border-color:#ffffff24;box-shadow:0 16px 48px #0005;isolation:isolate;} .relay-call-aurora {position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.65;} .relay-call-pip header {border-bottom-color:#ffffff1c;background:#0002;color:#d6dfda;} .relay-call-pip .relay-call-person small,.relay-call-pip .relay-call-hint,.relay-call-pip .relay-call-progress time {color:#b7c4bd;} .relay-call-pip footer {background:transparent!important;border:0!important;} .relay-call-pip button {background:#ffffff12;color:#f5f7f6;border-color:#ffffff30;} .relay-call-pip button:hover {background:#ffffff24;} .relay-call-pip header button {background:transparent;color:#dce6df;} .relay-call-pip [data-call-end] {background:#bb534b;border-color:#d0746d;color:#fff;} .relay-call-pip [data-call-end]:hover {background:#ce6259;} .relay-call-pip [aria-pressed=true] {background:#badacb;color:#183629;} .relay-call-pip button:focus-visible {outline:2px solid #b5dac7;outline-offset:3px;} .relay-call-pip .relay-call-ripples i {display:none;} .relay-call-pip footer button {min-height:36px;padding:8px 14px;border-radius:6px;font:500 12px/1.4 'DM Sans',Arial,sans-serif;box-shadow:none;} .relay-call-pip [data-call-mute] {background:transparent;border:1px solid #ffffff40;color:#f3f5f4;} .relay-call-pip [data-call-mute]:hover {background:#ffffff12;} .relay-call-pip [data-call-mute][aria-pressed=true] {background:#e5eee8;border-color:#e5eee8;color:#243d2c;} .relay-call-pip [data-call-end] {background:#fbe7e5;border:1px solid #e6aaa4;color:#af3930;} .relay-call-pip [data-call-end]:hover {background:#f4d4d0;} .relay-call-pip:not(.has-contact-avatar) .relay-call-person {justify-content:center;text-align:center;padding-top:32px;padding-bottom:24px;} .relay-call-pip footer button {display:inline-flex;align-items:center;justify-content:center;gap:8px;} .relay-call-pip footer button svg {width:18px;height:18px;flex:none;} .relay-call-pip .relay-mic-slash {stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .18s ease;} .relay-call-pip [aria-pressed=true] .relay-mic-slash {stroke-dashoffset:0;} @media(prefers-reduced-motion:reduce) {.relay-call-pip .relay-mic-slash {transition:none;}} /* Collapsed call is a compact contact strip with square icon controls. */ .relay-call-pip.is-minimized {width:340px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;padding:12px;gap:0 10px;border-radius:14px;} .relay-call-pip.is-minimized header {position:absolute;inset:0;z-index:0;padding:0;border:0;background:transparent;} .relay-call-pip.is-minimized header > span {display:none;} .relay-call-pip.is-minimized header button {position:absolute;right:4px;top:2px;width:20px;height:20px;font-size:14px;z-index:3;} .relay-call-pip.is-minimized .relay-call-person,.relay-call-pip.has-contact-avatar.is-minimized .relay-call-person {position:relative;z-index:1;grid-column:1;grid-row:1;display:flex;flex-direction:row;align-items:center;gap:10px;padding:0;text-align:left;pointer-events:none;} .relay-call-pip.is-minimized .relay-call-person small {display:none;} .relay-call-pip.is-minimized .relay-call-person strong {font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .relay-call-pip.is-minimized .relay-call-person > div:last-child {min-width:0;} .relay-call-pip.has-contact-avatar.is-minimized .relay-call-ripples {flex-basis:32px;width:32px;height:32px;} .relay-call-pip.has-contact-avatar.is-minimized .relay-call-ripples span {width:32px;height:32px;font-size:12px;} .relay-call-pip.is-minimized .relay-call-progress {position:relative;z-index:1;grid-column:1;grid-row:2;justify-content:flex-start;gap:8px;padding:3px 0 0 42px;font-size:11px;pointer-events:none;} .relay-call-pip.is-minimized:not(.has-contact-avatar) .relay-call-progress {padding-left:0;} .relay-call-pip.is-minimized footer {position:relative;z-index:2;grid-column:2;grid-row:1 / 3;align-self:center;display:flex;gap:6px;padding:0;margin-right:12px;} .relay-call-pip.is-minimized footer :is([data-call-mute],[data-call-end]) {display:inline-flex;flex:none;width:34px;height:34px;min-height:34px;padding:0;border-radius:6px;} .relay-call-pip.is-minimized footer button span {display:none;} /* Tabs pin above a viewport-sized deck; each panel owns its scrolling. */ #main#main#main [data-task-prototype] .tp-case-workspace {overflow-y:auto!important;min-height:0!important;} #main#main#main [data-task-prototype] .tp-workspace-tabs {position:sticky!important;top:0!important;z-index:45!important;background:#fff!important;border-top:0!important;border-bottom:1px solid #dedede!important;} #main#main#main [data-task-prototype] #workspace-panel-deck {height:var(--wp-viewport-height,600px)!important;min-height:0!important;max-height:var(--wp-viewport-height,600px)!important;overflow:hidden!important;flex-shrink:0!important;} #main#main#main [data-task-prototype] #workspace-panel-deck :is(.wp-primary,.wp-side-body) {height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important;} #main#main#main [data-task-prototype] #workspace-panel-deck [data-panel]:not([hidden]) {height:100%!important;min-height:0!important;max-height:100%!important;overflow:auto!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace:not([hidden]) {overflow:hidden!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > aside {display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > aside .tp-message-list {flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > :is([data-message-detail],.communication-info-inspector) {height:100%!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;box-sizing:border-box!important;} #main#main#main [data-task-prototype] .draft-unconnected-call-detail > .tp-message-copy {flex:1 1 0!important;min-height:0!important;} #main#main#main [data-task-prototype] .draft-unconnected-call-detail .draft-missed-call-empty {min-height:0!important;flex:1 0 auto!important;} @media(max-width:1100px) { #main#main#main [data-task-prototype] .tp-workspace-tab-actions {display:none!important;} #main#main#main [data-task-prototype] .tp-workspace-tab-actions::before {display:none!important;} } @container workspace-area (640px <= width < 960px) { } @container workspace-area (width < 640px) { #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open > aside {display:none!important;} } #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > aside .tp-communication-results {flex:1 1 0!important;min-height:0!important;overflow-y:auto!important;} #main#main#main [data-task-prototype] .tp-communication-workspace > aside > :not(.tp-communication-results) {flex-shrink:0!important;} /* Compact information and content share one scroll, as in Files. */ @container workspace-area (width < 640px) { #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open:not([hidden]) {display:flex!important;flex-direction:column!important;overflow-y:auto!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open > .wp-compact-communication-bar {order:0;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open.communication-info-open > .communication-info-inspector:not([hidden]) {display:block!important;order:1;position:static!important;flex:none!important;height:auto!important;max-height:none!important;width:100%!important;overflow:visible!important;border-right:0!important;border-bottom:1px solid #dedede;box-shadow:none!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open > [data-message-detail] {display:flex!important;order:2;flex:none!important;height:auto!important;max-height:none!important;min-height:100%!important;overflow:visible!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open .communication-info-inspector > header {position:static!important;} } /* Compact call: identity expands; action buttons remain together on the right. */ .relay-call-pip.is-minimized header [data-call-minimize] {display:none!important;} .relay-call-pip.is-minimized .relay-call-person {pointer-events:auto!important;border-radius:6px;} .relay-call-pip.is-minimized .relay-call-person:hover {background:#ffffff0a;} .relay-call-pip.is-minimized .relay-call-person:focus-visible {outline:2px solid #fff;outline-offset:4px;} .relay-call-pip.is-minimized footer {margin-right:0;} .relay-call-pip,.relay-call-pip * {cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cpath d='M3 2v21l5-6 4 9 4-2-4-9h8Z' fill='white' stroke='%23222222' stroke-width='1.3'/%3E%3C/svg%3E") 3 2,default!important;} .relay-call-pip button,.relay-call-pip button *,.relay-call-pip [role=button],.relay-call-pip [role=button] * {cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cpath d='M3 2v21l5-6 4 9 4-2-4-9h8Z' fill='white' stroke='%23222222' stroke-width='1.3'/%3E%3C/svg%3E") 3 2,pointer!important;} /* Request summary rows must size to content inside the scrolling mobile workspace. */ @media(max-width:1100px) { #main#main#main [data-task-prototype] .tp-case-workspace {grid-template-rows:max-content max-content max-content max-content max-content var(--wp-viewport-height,600px)!important;grid-auto-rows:max-content!important;align-items:stretch!important;} #main#main#main [data-task-prototype] .tp-identity-block {grid-row:1!important;align-self:stretch!important;} #main#main#main [data-task-prototype] .tp-operational-signals {grid-row:1!important;overflow:visible!important;} #main#main#main [data-task-prototype] .tp-next-action {grid-row:2!important;align-self:stretch!important;min-height:min-content!important;max-height:none!important;overflow:visible!important;box-sizing:border-box!important;} #main#main#main [data-task-prototype] .tp-case-context > header {grid-row:3!important;min-height:min-content!important;height:auto!important;max-height:none!important;} #main#main#main [data-task-prototype] .tp-case-context-content {grid-row:4!important;min-height:min-content!important;} #main#main#main [data-task-prototype] .tp-workspace-tabs {grid-row:5!important;} #main#main#main [data-task-prototype] #workspace-panel-deck {grid-row:6!important;} } @media(max-width:480px) { #main#main#main [data-task-prototype] .tp-case-workspace {grid-template-rows:repeat(6,max-content) var(--wp-viewport-height,600px)!important;} #main#main#main [data-task-prototype] .tp-operational-signals {grid-row:2!important;} #main#main#main [data-task-prototype] .tp-next-action {grid-row:3!important;} #main#main#main [data-task-prototype] .tp-case-context > header {grid-row:4!important;} #main#main#main [data-task-prototype] .tp-case-context-content {grid-row:5!important;} #main#main#main [data-task-prototype] .tp-workspace-tabs {grid-row:6!important;} #main#main#main [data-task-prototype] #workspace-panel-deck {grid-row:7!important;} } /* Multiline record fields hug their text and share the same caption spacing. */ #main#main#main [data-task-prototype] .tp-record-form dl > div:has(> dd textarea) {display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;} #main#main#main [data-task-prototype] .tp-record-form dl > div:has(> dd textarea) > :is(dt,dd) {margin:0!important;padding:0!important;min-height:0!important;width:100%!important;} #main#main#main [data-task-prototype] .tp-record-form dl > div:has(> dd textarea) dt label {margin:0!important;padding:0!important;} #main#main#main [data-task-prototype] .tp-record-form textarea {field-sizing:content!important;height:auto;min-height:72px!important;max-height:none!important;resize:vertical!important;overflow:auto!important;box-sizing:border-box!important;margin:0!important;} /* Alongside is a desktop-only comparison tool; match the JS availability rule. */ @media(max-width:1349px) { #main#main#main [data-task-prototype] :is([data-open-alongside],.wp-alongside-menu,[data-close-suspended],#workspace-side-panel,.wp-resize) {display:none!important;} } /* One keyboard-focus treatment across controls and both workspace tab bars. */ #main#main#main [data-task-prototype] :is(button,a,input,select,textarea,summary,[role="button"],[role="tab"],[role="separator"],[tabindex],[contenteditable="true"]):focus-visible, #main#main#main [data-task-prototype] .draft-select-trigger:focus, dialog.draft-new-request :is(button,input,select,textarea,[tabindex]):focus-visible { outline:1px solid var(--tp-control-focus,#49a85d)!important; outline-offset:-1px!important; box-shadow:none!important; } /* Compact caller identity shares the status/timer leading edge. */ .relay-call-pip.is-minimized:not(.has-contact-avatar) .relay-call-person {justify-content:flex-start!important;text-align:left!important;} .relay-call-pip.is-minimized:not(.has-contact-avatar) .relay-call-person > div {text-align:left!important;} .relay-call-pip.is-minimized:not(.has-contact-avatar) .relay-call-progress {padding-left:0!important;} /* Step presentation responds to its own available width, including comparison panes. */ #main#main#main [data-task-prototype] .tp-workflow-segments {container-type:inline-size;container-name:ticket-steps;} #main#main#main [data-task-prototype] .tp-workflow-segments ol {display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:8px!important;} #main#main#main [data-task-prototype] .tp-workflow-segments li {flex:1 1 0!important;min-width:0!important;} #main#main#main [data-task-prototype] .tp-workflow-segments li:not(:last-child)::after {display:block!important;} #main#main#main [data-task-prototype] .tp-workflow-compact-count {display:none;margin:0 0 6px;color:#737373;font-size:11px;line-height:16px;} @container ticket-steps (width < 520px) { #main#main#main [data-task-prototype] .tp-workflow-compact-count {display:block;} #main#main#main [data-task-prototype] .tp-workflow-segments li:not(.is-active):not(.is-waiting) {display:none!important;} #main#main#main [data-task-prototype] .tp-workflow-segments li::after,.tp-workflow-segments li:not(:last-child)::after {display:none!important;} #main#main#main [data-task-prototype] .tp-workflow-segments .tp-step-summary {padding:0!important;} } /* List actions keep their intrinsic width and their original outer gutters. */ #main#main#main [data-task-prototype] :is(.tp-communication-toolbar,.tp-ticket-toolbar,.communication-info-list-heading) > button {flex-shrink:0!important;white-space:nowrap!important;} @container workspace-area (min-width:640px) { #main#main#main #workspace-panel-deck .tp-ticket-browser:not(.wp-compact-ticket-open) {grid-template-columns:max(var(--tp-context-column,260px),var(--ticket-list-minimum,260px)) minmax(0,1fr)!important;} } /* Author names sit outside chat bubbles; colour identifies the message side. */ #main#main#main [data-task-prototype] .draft-chat-entry {display:flex;flex-direction:column;align-self:flex-start;align-items:flex-start;gap:4px;max-width:80%;min-width:0;} #main#main#main [data-task-prototype] .draft-chat-entry.is-outgoing {align-self:flex-end;align-items:flex-end;} #main#main#main [data-task-prototype] .draft-chat-author {font-size:11px;line-height:16px;font-weight:400;color:#737373;padding:0 2px;} #main#main#main [data-task-prototype] .draft-chat-entry > .draft-chat-message {max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;} #main#main#main [data-task-prototype] .draft-chat-entry > .draft-chat-message p {margin-top:0;} #main#main#main [data-task-prototype] .wp-stepper-toggle {display:none!important;} @container ticket-steps (width < 520px) { #main#main#main [data-task-prototype] .wp-stepper-toggle {display:flex!important;align-items:center;gap:12px;width:100%;padding:12px!important;border:1px solid #dedede!important;border-radius:8px!important;background:#fff!important;text-align:left;color:#262626;} #main#main#main [data-task-prototype] .wp-stepper-ring {display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:conic-gradient(#262626 var(--step-progress),#e5e5e5 0);} #main#main#main [data-task-prototype] .wp-stepper-ring > span {display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:white;font-size:11px;font-weight:600;} #main#main#main [data-task-prototype] .wp-stepper-copy {display:grid;gap:4px;flex:1;min-width:0;} #main#main#main [data-task-prototype] .wp-stepper-copy strong {font-size:14px;} #main#main#main [data-task-prototype] .wp-stepper-copy small {font-size:12px;color:#737373;} #main#main#main [data-task-prototype] .wp-stepper-toggle > svg {width:18px;height:18px;flex-shrink:0;transition:transform .15s;} #main#main#main [data-task-prototype] .wp-stepper-toggle[aria-expanded="true"] > svg {transform:rotate(180deg);} #main#main#main [data-task-prototype] .tp-workflow-segments:has(.wp-stepper-toggle) > ol {display:none!important;} #main#main#main [data-task-prototype] .tp-workflow-segments.wp-path-open > ol {display:flex!important;flex-direction:column!important;gap:16px!important;margin:0!important;padding:16px 12px!important;border:1px solid #dedede;border-top:0;border-radius:0 0 8px 8px;} #main#main#main [data-task-prototype] .tp-workflow-segments.wp-path-open li,#main#main#main [data-task-prototype] .tp-workflow-segments.wp-path-open li:not(.is-active):not(.is-waiting) {display:block!important;} #main#main#main [data-task-prototype] .tp-workflow-segments.wp-path-open .tp-step-state {border-radius:50%!important;} } /* Compact workflow is a single row; the complete path replaces the panel surface. */ @container ticket-steps (width < 520px) { #main#main#main [data-task-prototype] button.wp-stepper-toggle {display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;width:100%!important;max-width:none!important;min-height:76px!important;height:auto!important;padding:12px!important;box-sizing:border-box!important;border:0!important;border-radius:0!important;gap:14px!important;text-align:left!important;} #main#main#main [data-task-prototype] button.wp-stepper-toggle .wp-stepper-copy {display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;text-align:left!important;} #main#main#main [data-task-prototype] button.wp-stepper-toggle .wp-stepper-copy small {margin:0!important;text-align:left!important;} } #main#main#main [data-task-prototype] :is(.wp-primary,.wp-side-body) {position:relative;} #main#main#main [data-task-prototype] .wp-step-path-panel {position:absolute;inset:0;z-index:60;background:#fff;overflow:auto;padding:0 24px 24px;box-sizing:border-box;} #main#main#main [data-task-prototype] .wp-step-path-back {display:flex!important;align-items:center;min-height:56px;width:calc(100% + 48px);margin:0 -24px 24px;padding:12px 24px!important;border:0!important;border-bottom:1px solid #dedede!important;border-radius:0!important;background:#fff!important;text-align:left;font-size:14px;} #main#main#main [data-task-prototype] .wp-step-path-panel h3 {font-size:18px;margin:0 0 24px;} #main#main#main [data-task-prototype] .wp-step-path-panel ol {display:flex!important;flex-direction:column!important;gap:0!important;list-style:none;margin:0;padding:0;} #main#main#main [data-task-prototype] .wp-step-path-panel li {display:block!important;position:relative;padding:0 0 32px 0!important;min-height:76px;} #main#main#main [data-task-prototype] .wp-step-path-panel li:not(:last-child)::after {content:'';position:absolute;left:13px;top:32px;bottom:6px;width:0;border-left:1px dashed #bcbcbc;} #main#main#main [data-task-prototype] .wp-step-path-panel .tp-step-summary {display:block!important;padding:0!important;} #main#main#main [data-task-prototype] .wp-step-path-panel .tp-workflow-segment-name {display:flex;align-items:center;gap:12px;} #main#main#main [data-task-prototype] .wp-step-path-panel .tp-step-state {display:grid;place-items:center;width:28px;height:28px;border:1px solid #bcbcbc;border-radius:6px!important;box-sizing:border-box;background:#fff;color:#737373;} #main#main#main [data-task-prototype] .wp-step-path-panel .tp-step-state svg {width:18px;height:18px;} #main#main#main [data-task-prototype] .wp-step-path-panel :is(.is-active,.is-waiting,.is-completed) .tp-step-state {background:#262626;color:#fff;border-color:#262626;} #main#main#main [data-task-prototype] .wp-step-path-panel .tp-step-summary small {display:block;margin:6px 0 0 40px;font-size:12px;color:#737373;} /* The nav row owns the sole divider; horizontal tab scrolling has no extra line. */ #main#main#main #workspace-side-panel .wp-side-nav-row {border-bottom:1px solid #dedede!important;box-shadow:none!important;} #main#main#main #workspace-side-panel .wp-side-nav-row .wp-side-tabs {border-bottom:0!important;box-shadow:none!important;scrollbar-width:none;} #main#main#main #workspace-side-panel .wp-side-tabs::-webkit-scrollbar {display:none;} #main#main#main #workspace-side-panel .wp-side-body {border-top:0!important;} /* Compact workflow is interactive, with the same keyboard focus as other controls. */ @container ticket-steps (width < 520px) { #main#main#main [data-task-prototype] button.wp-stepper-toggle {border-radius:8px!important;transition:background-color .15s ease;cursor:pointer;} #main#main#main [data-task-prototype] button.wp-stepper-toggle:hover {background:#f3f3f3!important;} #main#main#main [data-task-prototype] button.wp-stepper-toggle:focus-visible {outline:1px solid var(--tp-control-focus,#49a85d)!important;outline-offset:-1px!important;box-shadow:none!important;} } /* Compact ticket scrolling stays bounded by the visible workspace deck. */ @container workspace-area (width < 640px) { #main#main#main #workspace-panel-deck .tp-tickets {height:100%!important;min-height:0!important;overflow:hidden!important;} #main#main#main #workspace-panel-deck .tp-ticket-browser.wp-compact-ticket-open {height:100%!important;min-height:0!important;overflow-y:auto!important;} #main#main#main #workspace-panel-deck .wp-compact-ticket-open > .tp-ticket-selection {flex:0 0 auto!important;height:auto!important;} } #main#main#main #workspace-panel-deck > .wp-primary {min-height:0!important;height:100%!important;} #main#main#main #workspace-panel-deck .tp-tickets:has(.wp-compact-ticket-open) {height:100%!important;min-height:0!important;overflow:hidden!important;} #main#main#main #workspace-panel-deck .tp-ticket-browser.wp-compact-ticket-open {height:100%!important;min-height:0!important;overflow-y:auto!important;} #main#main#main #workspace-panel-deck .wp-compact-ticket-open > .tp-ticket-selection {flex:0 0 auto!important;height:auto!important;} /* Viewport-aligned tab controls escape clipping from responsive grid ancestors. */ body > button.wp-tab-scroll {position:fixed!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:100!important;width:32px!important;min-width:32px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:#fff!important;color:#555!important;box-shadow:none!important;transform:none!important;cursor:pointer;} body > button.wp-tab-scroll[hidden] {display:none!important;} body > button.wp-tab-scroll svg {display:block;width:18px;height:18px;flex:none;} body > button.wp-tab-scroll::before {content:'';position:absolute;top:50%;left:0;width:1px;height:24px;background:#dedede;transform:translateY(-50%);} body > button.wp-tab-scroll:disabled {color:#bcbcbc!important;cursor:default;} body > button.wp-tab-scroll:not(:disabled):hover {background:#f3f3f3!important;} body > button.wp-tab-scroll:focus-visible {outline:1px solid #49a85d!important;outline-offset:-1px!important;} body > button.wp-tab-scroll[data-scroll-direction="previous"]::before, #main#main#main [data-task-prototype] .wp-tab-scroll[data-scroll-direction="previous"]::before {left:auto;right:0;} #main#main#main [data-task-prototype] .wp-footer-more {display:none!important;} #main#main#main [data-task-prototype] .tp-case-actions,.tp-case-actions .tp-case-action-group {flex-wrap:nowrap!important;} #main#main#main [data-task-prototype] .tp-case-actions .tp-case-action-group > * {flex-shrink:0!important;} #main#main#main [data-task-prototype] .wp-footer-overflow .wp-footer-more {display:flex!important;align-items:center;justify-content:center;width:36px;height:36px;font-size:24px;margin-left:auto;} #main#main#main [data-task-prototype] .wp-footer-overflow .tp-case-action-group {display:none!important;} #main#main#main [data-task-prototype] .wp-footer-overflow.wp-footer-menu-open .tp-case-action-group {display:flex!important;position:absolute;right:12px;bottom:calc(100% - 4px);flex-direction:column!important;align-items:stretch!important;gap:4px!important;width:max-content;max-width:calc(100% - 24px);padding:6px;background:#fff;border:1px solid #dedede;border-radius:8px;box-shadow:0 8px 24px #0002;z-index:100;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open {height:100%!important;min-height:0!important;max-height:100%!important;overflow-y:auto!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-compact-conversation-open > [data-message-detail] {flex:0 0 auto!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;} #main#main#main [data-task-prototype] #workspace-panel-deck {grid-template-rows:minmax(0,1fr)!important;min-height:0!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .wp-primary {height:100%!important;max-height:100%!important;min-height:0!important;overflow:hidden!important;} /* File Info fields stay compact instead of stretching with a wide inspector. */ #main#main#main [data-task-prototype] .tp-document-review-fields .tp-validation label[data-field-size] {grid-template-columns:140px minmax(0,300px)!important;justify-content:start!important;} #main#main#main [data-task-prototype] .tp-document-review-fields .tp-validation label[data-field-size] > :is(input,textarea,.draft-select,.tp-review-ai-field) {width:100%!important;max-width:300px!important;box-sizing:border-box!important;} @container document-review-fields (width < 440px) { #main#main#main [data-task-prototype] .tp-document-review-fields .tp-validation label[data-field-size] {grid-template-columns:minmax(0,300px)!important;} } #main#main#main #workspace-side-panel .wp-side-tabs button {text-decoration:none!important;border-bottom:0!important;background-image:none!important;box-shadow:none!important;} #main#main#main #workspace-side-panel .wp-side-tabs button::after {display:none!important;} @container document-review-fields (width < 520px) { #main#main#main [data-task-prototype] .tp-document-review-fields .tp-validation label[data-field-size] {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:4px!important;} #main#main#main [data-task-prototype] .tp-document-review-fields .tp-validation label[data-field-size] > :is(input,textarea,.draft-select,.tp-review-ai-field,.tp-validated-value) {grid-column:1!important;grid-row:2!important;width:100%!important;max-width:none!important;min-width:0!important;} #main#main#main [data-task-prototype] .tp-document-review-fields .tp-validation label[data-field-size] > small {grid-column:1!important;grid-row:3!important;} } #main#main#main [data-task-prototype] .wp-file-comparison.wp-compact-info-open {position:relative!important;} #main#main#main [data-task-prototype] .wp-file-comparison.wp-compact-info-open > .wp-compact-reference-info:not([hidden]) {display:block!important;position:absolute!important;inset:0!important;z-index:35;background:#f7f7f7;overflow:auto;padding:24px!important;} #main#main#main [data-task-prototype] .wp-file-comparison .wp-reference-info-close {display:block;margin-bottom:20px;} #main#main#main [data-task-prototype] .tp-ticket-view-notice:not([hidden]) {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;background:#fff4c5;color:#994c12;padding:12px 16px;margin:0;border-bottom:1px solid #f5de86;font-size:12px;} #main#main#main [data-task-prototype] .tp-ticket-view-notice strong {display:block;} #main#main#main [data-task-prototype] .tp-ticket-view-notice button {margin-left:auto;} #main#main#main [data-task-prototype] .tp-ticket-navigation .tp-ticket-list-owner {display:block;font-size:12px;font-weight:400;line-height:1.4;color:#707070;white-space:normal;overflow-wrap:anywhere;} #main#main#main [data-task-prototype] .tp-ticket-navigation .tp-ticket-list-heading {display:flex;align-items:center;gap:8px;width:100%;min-width:0;} #main#main#main [data-task-prototype] .tp-ticket-list-heading .tp-ticket-title {display:block;min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #main#main#main [data-task-prototype] .tp-ticket-list-heading .tp-status-chip {flex-shrink:0;white-space:nowrap;} #main#main#main [data-task-prototype] .tp-ticket-list-heading .tp-ticket-title strong {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #main#main#main [data-task-prototype] .tp-file-list-heading {display:flex;align-items:center;gap:8px;min-width:0;width:100%;} #main#main#main [data-task-prototype] .tp-file-list-heading strong {display:block;min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #main#main#main [data-task-prototype] .tp-file-list-heading .tp-file-status {flex-shrink:0;white-space:nowrap;margin-top:0;align-self:center;} #main#main#main [data-task-prototype] .tp-preview-title [data-preview-file-select] {flex:1 1 auto;min-width:0;width:0;max-width:100%;border:0;background:transparent;color:inherit;font:600 12px/1.4 'DM Sans',sans-serif;text-overflow:ellipsis;} #main#main#main [data-task-prototype] .tp-preview-file-position {flex-shrink:0;font-size:12px;white-space:nowrap;} #main#main#main [data-task-prototype] .tp-preview-title > .draft-select {flex:1 1 auto;min-width:0;width:0;} #main#main#main [data-task-prototype] .tp-preview-title .draft-select-trigger {display:flex;width:100%;min-width:0;height:auto;padding:6px 8px;font-size:12px;} #main#main#main [data-task-prototype] .tp-preview-title .draft-select-trigger > span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* A collapsed Files rail has one header control in either inspector state. */ #main#main#main [data-task-prototype] .tp-documents-workspace.is-files-collapsed .tp-file-list > .tp-files-heading {display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;height:52px!important;min-height:52px!important;padding:4px!important;box-sizing:border-box;} #main#main#main [data-task-prototype] .tp-documents-workspace.is-files-collapsed .tp-file-list .tp-files-info-toggle {display:none!important;} /* Communication info is a real middle column, never an overlay on the content. */ @container workspace-area (width >= 640px) { #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.communication-info-open:not(.wp-reference-copy):not(.wp-communication-list-only) {display:grid!important;grid-template-columns:var(--communication-list-size,33.333%) minmax(0,.85fr) minmax(0,1.15fr)!important;grid-template-rows:minmax(0,1fr)!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > .communication-info-inspector:not([hidden]) {display:block!important;position:static!important;grid-column:2!important;grid-row:1!important;inset:auto!important;width:auto!important;min-width:0!important;max-width:none!important;box-shadow:none!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > [data-message-detail] {display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;grid-row:1!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.communication-info-open > [data-message-detail] {grid-column:3!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > [data-message-detail] > * {flex-shrink:0;min-width:0;max-width:100%;box-sizing:border-box;} } /* Keep the response target inset consistent at every workspace width. */ #main#main#main [data-task-prototype] .tp-operational-signals > div { padding-left:24px!important; padding-right:24px!important; box-sizing:border-box; } /* Keep the next-step action beside its explanation on wide screens. */ @media (min-width: 901px) { html body.divider-draft #main [data-task-prototype] .tp-next-action { grid-template-columns: minmax(0, max-content) auto !important; justify-content: start !important; gap: 24px !important; } html body.divider-draft #main [data-task-prototype] .tp-next-action > div { flex: 0 1 auto; } } .tp-ticket-list-planning { display:block; margin-top:6px; font-size:12px; line-height:1.4; color:#666; } .draft-call-icon.is-cancelled { background:#eee!important; color:#777!important; } /* Contact search has a direct action per result, never a footer action. */ html body .draft-new-call-dialog:has([data-call-tab="contacts"][aria-selected="true"]) > footer { display:none!important; } html body .draft-new-call-dialog .draft-people-results.is-empty { display:flex; align-items:center; justify-content:center; min-height:140px; text-align:center; color:#999!important; font-size:14px; } html body .draft-new-call-dialog button:disabled { background:#f3f3f3!important; color:#999!important; border-color:#e3e3e3!important; cursor:default!important; } html body .draft-new-call-dialog .draft-contact-call-action { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; padding:9px 14px; min-height:36px; border:1px solid #dedede; border-radius:6px; background:#fff; color:#252525; font-size:14px; line-height:1.2; } html body .draft-new-call-dialog .draft-people-results > button:hover .draft-contact-call-action { background:#f5f5f5; border-color:#aaa; } /* Ground the cancelled-call illustration like the other empty-state assets. */ .draft-cancelled-call-empty .draft-missed-call-image { filter: none; } #main#main#main [data-task-prototype] .tp-communication-workspace > .tp-email-splitter {left:var(--communication-list-size,36%)!important;} /* Ticket communication follows the same circular markers as Request Activity. */ #main#main#main [data-task-prototype] .inv-communication-timeline .inv-channel-icon {width:36px;height:36px;box-sizing:border-box;border:1px solid var(--tp-line)!important;border-radius:50%;background:#fff!important;z-index:1;} #main#main#main [data-task-prototype] .inv-ticket-progress > .tp-workflow-segments {display:none!important;} @media (min-width:1281px) { #main#main#main [data-task-prototype] .inv-ticket-progress {flex:0 1 640px;min-width:0;} #main#main#main [data-task-prototype] .inv-ticket-progress > .inv-stepper {display:none!important;} #main#main#main [data-task-prototype] .inv-ticket-progress > .tp-workflow-segments {display:block!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments > ol {display:flex!important;flex-direction:row!important;padding:0!important;border:0!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li {display:block!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li:not(:last-child)::after {display:block!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .wp-stepper-toggle {display:none!important;} } @media (min-width:1281px) { #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li {position:relative;border:0!important;background:transparent!important;padding:0!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-step-summary {padding:12px 8px!important;border:0!important;background:transparent!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li:not(:last-child)::after {position:absolute!important;top:23px!important;right:4px!important;left:auto!important;bottom:auto!important;width:24px!important;height:1px!important;background:var(--tp-line)!important;border:0!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li:last-child::after {display:none!important;} } #main#main#main [data-task-prototype] .tp-comment-tools {display:flex;align-items:center;gap:12px;flex-wrap:wrap;} #main#main#main [data-task-prototype] .tp-comment-search {display:flex;align-items:center;gap:8px;border:1px solid var(--tp-line);border-radius:6px;padding:0 10px;height:36px;background:#fff;} #main#main#main [data-task-prototype] .tp-comment-search svg {width:18px;height:18px;flex-shrink:0;} #main#main#main [data-task-prototype] .tp-comment-search input {width:180px;min-width:0;border:0!important;background:transparent!important;padding:0!important;height:32px;font:inherit;} #main#main#main [data-task-prototype] .tp-comment-search:focus-within {border-color:#4aa65b;} /* Compact summaries keep the conversation visible beneath them. */ #main#main#main [data-task-prototype] .draft-conversation-summary {flex:0 0 auto;margin:0!important;padding:16px 20px!important;border-bottom:1px solid var(--tp-line);background:#fafafa;} #main#main#main [data-task-prototype] .draft-conversation-summary h5 {margin:0!important;font-size:13px!important;line-height:20px;} #main#main#main [data-task-prototype] .draft-conversation-summary ul {margin:8px 0 0!important;padding-left:18px!important;font-size:12px;line-height:18px;} #main#main#main [data-task-prototype] .draft-conversation-summary li {margin:4px 0!important;} #main#main#main [data-task-prototype] .draft-conversation-summary li[hidden] {display:none!important;} #main#main#main [data-task-prototype] .draft-summary-more {padding:4px 0!important;margin-top:4px;border:0!important;background:transparent!important;font:inherit;font-size:12px;color:#555;text-decoration:underline;} .competitor-placement-tooltip {position:fixed;z-index:10000;width:300px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:18px;background:#f2f2f2;border:1px solid #777;color:#111;box-shadow:4px 4px 0 #000;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.45;} .competitor-placement-tooltip[hidden] {display:none;} .competitor-placement-tooltip strong {font-size:16px;} .competitor-placement-tooltip p {margin:10px 0 14px;} .competitor-placement-tooltip a {color:inherit;text-decoration:underline;} .competitor-placement-tooltip a:hover {color:#49a85d;} #main#main#main [data-task-prototype] .draft-call-summary-heading h5 {display:flex;align-items:center;gap:8px;} #main#main#main [data-task-prototype] .communication-ai-icon {width:20px;height:20px;flex:0 0 20px;color:inherit;} /* File metadata follows Service information's compact row rhythm. */ #main#main#main [data-task-prototype] :is(.tp-review-file-details,#tp-file-inspector .tp-file-info) dl {display:block;margin:0!important;padding:0!important;} #main#main#main [data-task-prototype] :is(.tp-review-file-details,#tp-file-inspector .tp-file-info) dl > div {margin:0!important;padding:6px 0!important;row-gap:0!important;min-height:0!important;} #main#main#main [data-task-prototype] :is(.tp-review-file-details,#tp-file-inspector .tp-file-info) dl > div:first-child {padding-top:0!important;} /* Communication tools scroll naturally; channel tabs stay at the top. */ #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > aside {overflow-y:auto!important;overflow-x:hidden!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > aside > .tp-communication-results {flex:0 0 auto!important;overflow:visible!important;min-height:0!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > aside > .tp-communication-views {position:sticky!important;top:0!important;z-index:4;background:#fff!important;flex:0 0 auto!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > aside > .tp-communication-views {padding:12px 6px!important;box-sizing:border-box!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace > aside > .tp-communication-results {min-height:calc(100% - 60px)!important;} #main#main#main [data-task-prototype] .communication-summary-disclosure {padding:0!important;flex:0 0 auto;} #main#main#main [data-task-prototype] .communication-summary-disclosure > summary {display:flex;align-items:center;gap:8px;padding:14px 20px!important;margin:0!important;list-style:none;cursor:pointer;font-size:13px;font-weight:600;} #main#main#main [data-task-prototype] .communication-summary-disclosure > summary::-webkit-details-marker {display:none;} #main#main#main [data-task-prototype] .communication-summary-chevron {margin-left:auto;font-size:18px;line-height:20px;} #main#main#main [data-task-prototype] .communication-summary-disclosure[open] .communication-summary-chevron {transform:rotate(180deg);} #main#main#main [data-task-prototype] .communication-summary-disclosure > :not(summary) {margin-left:20px!important;margin-right:20px!important;} #main#main#main [data-task-prototype] .communication-summary-disclosure > ul {padding-left:18px!important;margin-top:0!important;margin-bottom:16px!important;} /* Connect ticket stages directly from their labels to the next number. */ @media (min-width:1281px) { #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments ol {gap:16px!important;align-items:flex-start!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li {flex:1 1 0!important;min-width:0!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li:last-child {flex:0 0 auto!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li::after {display:none!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-step-summary {display:block!important;padding:12px 0!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segment-name {display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segment-name strong {flex:0 0 auto!important;white-space:nowrap;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-step-state {flex:0 0 auto!important;} #main#main#main [data-task-prototype] .inv-ticket-progress li:not(:last-child) .tp-workflow-segment-name::after {content:"";display:block;flex:1 1 auto;min-width:16px;height:1px;background:#d5d5d5;margin-left:6px;} #main#main#main [data-task-prototype] .inv-ticket-progress .tp-step-summary > small {display:block!important;margin:4px 0 0 32px!important;} } @media (min-width:1281px) { #main#main#main [data-task-prototype] .inv-ticket-progress .tp-workflow-segments li:not(:last-child)::after {display:none!important;} } /* Ticket overview: compact label/value pairs and a full-width stage path. */ #main#main#main [data-task-prototype] .tp-ticket-overview-header {margin-bottom:16px!important;align-items:center!important;} #main#main#main [data-task-prototype] .tp-ticket-overview-meta {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px 32px!important;width:100%!important;} #main#main#main [data-task-prototype] .tp-ticket-overview-meta > .tp-ticket-meta {display:flex!important;flex-direction:row!important;align-items:baseline!important;gap:10px!important;min-width:0;} #main#main#main [data-task-prototype] .tp-ticket-overview-meta > .tp-ticket-meta > small {flex:0 0 80px;margin:0!important;} #main#main#main [data-task-prototype] .tp-ticket-overview-meta > .tp-ticket-meta > :not(small) {margin:0!important;min-width:0;overflow-wrap:anywhere;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row {width:100%!important;max-width:none!important;margin:20px 0 0!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segments {width:100%!important;max-width:none!important;} @media(max-width:700px) { #main#main#main [data-task-prototype] .tp-ticket-overview-meta {grid-template-columns:minmax(0,1fr)!important;} } @media(min-width:1281px) { #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segments ol {gap:20px!important;width:100%!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segments li {flex:1 1 0!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segments li:last-child {flex:0 0 auto!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segments li:not(:last-child)::after {display:none!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segment-name {display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segment-name > :is(strong,.tp-step-state) {flex:0 0 auto!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row li:not(:last-child) .tp-workflow-segment-name::after {content:"";height:1px;flex:1 1 auto;min-width:16px;background:#d5d5d5;margin-left:6px;} } @media(min-width:1281px) { #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-step-summary {display:block!important;width:100%!important;box-sizing:border-box!important;padding:12px 0!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segments li {min-width:0!important;} #main#main#main [data-task-prototype] .tp-ticket-workflow-row .tp-workflow-segment-name {max-width:none!important;box-sizing:border-box!important;} } /* Ticket row dividers stay neutral in every interaction state. */ #main#main#main [data-task-prototype] .tp-ticket-navigation > button, #main#main#main [data-task-prototype] .tp-ticket-navigation > button:is(:hover,:active,:focus,:focus-visible,[aria-current]) {border:0!important;border-bottom:1px solid #dedede!important;box-shadow:none!important;} #main#main#main [data-task-prototype] .tp-ticket-navigation > button:hover {background:#f0f0f0!important;} /* Three aligned fact columns, each with two label/value rows. */ #main#main#main [data-task-prototype] .tp-ticket-overview-meta {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;} #main#main#main [data-task-prototype] .tp-ticket-fact-column {display:grid;grid-template-columns:max-content minmax(0,1fr);align-content:start;gap:10px 16px;min-width:0;} #main#main#main [data-task-prototype] .tp-ticket-fact-column > .tp-ticket-meta {display:contents!important;} #main#main#main [data-task-prototype] .tp-ticket-fact-column > .tp-ticket-meta > small {margin:0!important;align-self:baseline;white-space:nowrap;} #main#main#main [data-task-prototype] .tp-ticket-fact-column > .tp-ticket-meta > :not(small) {margin:0!important;min-width:0;overflow-wrap:anywhere;align-self:baseline;} @media(max-width:1100px) { #main#main#main [data-task-prototype] .tp-ticket-overview-meta {grid-template-columns:minmax(0,1fr)!important;gap:10px!important;} #main#main#main [data-task-prototype] .tp-ticket-fact-column {grid-template-columns:90px minmax(0,1fr);} } #main#main#main [data-task-prototype] .communication-summary-disclosure > summary > .communication-summary-chevron {display:flex!important;align-items:center!important;justify-content:center!important;align-self:center!important;flex:0 0 20px!important;width:20px!important;height:20px!important;min-width:0!important;min-height:0!important;padding:0!important;margin:0 0 0 auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;line-height:1!important;} #main#main#main [data-task-prototype] .communication-summary-chevron svg {display:block;width:20px;height:20px;} #main#main#main [data-task-prototype] .inv-screen > .inv-ticket-actions {display:flex!important;justify-content:flex-end!important;align-items:center;gap:12px;} .inv-leave-dialog {width:min(480px,calc(100vw - 40px));padding:28px;border:1px solid #dedede;border-radius:12px;background:#fff;color:#252525;} .inv-leave-dialog::backdrop {background:#0006;} .inv-leave-dialog h3 {margin:0 0 12px;} .inv-leave-dialog footer {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:24px;} .inv-leave-dialog button {padding:10px 14px;border:1px solid #dedede;border-radius:6px;background:#fff;color:#252525;} .inv-leave-dialog [data-save-leave] {background:#111;color:#fff;} /* One neutral search boundary; the nested input adds no second outline. */ #main#main#main [data-task-prototype] .tp-comment-search, #main#main#main [data-task-prototype] .tp-comment-search:focus-within {border:1px solid #dedede!important;outline:0!important;box-shadow:none!important;} #main#main#main [data-task-prototype] .tp-comment-search input, #main#main#main [data-task-prototype] .tp-comment-search input:is(:focus,:focus-visible,:hover) {border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;} #main#main#main [data-task-prototype] .tp-comment-search:focus-within {border-color:#999!important;} #main#main#main [data-task-prototype] .inv-validation-section {padding:24px 0;border-top:1px solid #dedede;margin-top:24px;} #main#main#main [data-task-prototype] .inv-validation-section h4 {font-size:16px;margin:0 0 20px;} #main#main#main [data-task-prototype] .inv-validation-section fieldset {margin:20px 0;} #main#main#main [data-task-prototype] .inv-dispatch-owner {display:grid;gap:8px;margin-top:20px;} #main#main#main [data-task-prototype] .inv-dispatch-owner select {width:100%;padding:10px;border:1px solid #dedede;border-radius:6px;background:#fff;} @media(min-width:901px) { #main#main#main [data-task-prototype] .inv-investigation-screen .inv-columns {grid-template-columns:var(--inv-column-layout,minmax(0,1fr) minmax(0,1fr))!important;} } /* Activity search has one focus boundary around the complete field. */ #main#main#main [data-task-prototype] .inv-context-body > .tp-activity-toolbar > label:focus-within {border-color:#49a85d!important;outline:1px solid #49a85d!important;outline-offset:-1px!important;box-shadow:none!important;} #main#main#main [data-task-prototype] .inv-context-body > .tp-activity-toolbar > label > input, #main#main#main [data-task-prototype] .inv-context-body > .tp-activity-toolbar > label > input:is(:focus,:focus-visible) {border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;} #main#main#main [data-task-prototype] .inv-context-body > .tp-activity-toolbar {display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding-left:0!important;padding-right:0!important;width:100%;box-sizing:border-box;} #main#main#main [data-task-prototype] .inv-context-body > .tp-activity-toolbar > label {margin-left:auto!important;margin-right:0!important;flex:0 1 300px;} #main#main#main [data-task-prototype] .inv-ticket-timeline > button[data-inv-activity] {position:relative;} #main#main#main [data-task-prototype] .inv-ticket-timeline > button[data-inv-activity]::before {content:"";display:block!important;position:absolute;left:var(--ticket-activity-rail,91px);top:0;bottom:0;width:1px;background:#dedede;pointer-events:none;} #main#main#main [data-task-prototype] .inv-ticket-timeline .tp-activity-marker {position:relative;z-index:1;background:#fff!important;} #main#main#main [data-task-prototype] .inv-ticket-timeline > .tp-activity-inline::before {left:var(--ticket-activity-rail,91px)!important;} /* Reference notices occupy the top row, never a content column. */ #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-reference-copy {display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-reference-copy > .wp-reference-hint {grid-column:1!important;grid-row:1!important;align-self:start!important;height:auto!important;} #main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-reference-copy > [data-message-detail] {grid-column:1!important;grid-row:2!important;min-height:0!important;overflow:auto!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-reference-copy {display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-reference-copy > .wp-reference-hint {grid-area:1 / 1 / 2 / -1!important;width:100%!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-reference-copy > aside {grid-area:2 / 1 / 3 / 2!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace.wp-reference-copy > [data-message-detail] {grid-area:2 / 2 / 3 / 3!important;} /* Tablet navigation follows available pane width, including comparison copies. */ @container workspace-area (width < 1000px) { #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-ticket-browser {display:flex!important;flex-direction:column!important;min-width:0!important;overflow:auto!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-ticket-browser > .tp-ticket-selection {display:none!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-ticket-browser > .tp-ticket-navigation {display:block!important;width:100%!important;min-width:0!important;border-right:0!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-ticket-browser.wp-compact-ticket-open > .tp-ticket-navigation {display:none!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-ticket-browser.wp-compact-ticket-open > .tp-ticket-selection {display:block!important;width:100%!important;min-width:0!important;} #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-ticket-browser.wp-compact-ticket-open > .wp-compact-ticket-bar {display:block!important;position:sticky;top:0;z-index:25;padding:10px 12px;background:#fff;border-bottom:1px solid #dedede;} } #main#main#main [data-task-prototype] .tp-ticket-selection > article {container-type:inline-size;container-name:ticket-overview;} @container ticket-overview (width < 900px) { #main#main#main#main [data-task-prototype] .tp-ticket-overview-meta {grid-template-columns:minmax(0,1fr)!important;gap:10px!important;} #main#main#main#main [data-task-prototype] .tp-ticket-fact-column {grid-template-columns:90px minmax(0,1fr)!important;} #main#main#main#main [data-task-prototype] .tp-ticket-comments > header {flex-wrap:wrap!important;gap:12px!important;} #main#main#main#main [data-task-prototype] .tp-comment-tools {width:100%;} #main#main#main#main [data-task-prototype] .tp-comment-search {flex:1;min-width:0;} #main#main#main#main [data-task-prototype] .tp-comment-search input {width:100%!important;} } #main#main#main [data-task-prototype] .inv-email-thread {border-left:0!important;padding-left:0!important;} #main#main#main [data-task-prototype] .inv-internal-messages > article {padding:16px 0;border-bottom:1px solid #dedede;} #main#main#main [data-task-prototype] .inv-internal-messages header {display:flex;justify-content:space-between;gap:12px;} #main#main#main [data-task-prototype] .inv-internal-messages time {color:#737373;font-size:12px;} #main#main#main [data-task-prototype] [data-internal-chat] {margin-top:24px;} #main#main#main [data-task-prototype] [data-internal-chat] label {display:grid;gap:8px;} #main#main#main [data-task-prototype] [data-internal-chat] textarea {box-sizing:border-box;width:100%;padding:12px;border:1px solid #dedede;border-radius:6px;resize:vertical;font:inherit;} #main#main#main [data-task-prototype] [data-internal-chat] footer {display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px;} #main#main#main [data-task-prototype] .inv-email-thread li {border:0!important;} .inv-completion-dialog {position:fixed;} .inv-completion-dialog h3 {padding-right:32px;} .inv-completion-dialog .inv-modal-close {position:absolute;top:18px;right:18px;display:grid;place-items:center;width:32px;height:32px;padding:6px;border:0;background:transparent;} .inv-modal-close svg {width:20px;height:20px;} .inv-completion-dialog [data-completion-confirm] {background:#111!important;color:#fff!important;border-color:#111!important;} .inv-recommended-chip {display:inline-block;margin-left:8px;padding:2px 7px;border-radius:4px;background:#e5f3e9;color:#28763b;font-size:11px;font-weight:500;} .inv-recommended-chip[hidden] {display:none;} .inv-completion-dialog [data-native-select] {display:block!important;position:static!important;opacity:1!important;width:100%!important;height:42px!important;box-sizing:border-box;padding:8px 12px;border:1px solid #dedede;border-radius:6px;background:#fff;font:inherit;} .inv-completion-destination {border:0;padding:0;margin:20px 0 0;} .inv-completion-destination legend {font-weight:500;margin-bottom:10px;} .inv-completion-destination label {display:flex;align-items:center;gap:8px;margin:8px 0;} #main#main#main#main [data-task-prototype] .tp-ticket-comments > header {height:auto!important;min-height:52px!important;display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:12px!important;} #main#main#main#main [data-task-prototype] .tp-ticket-comments > header > h4 {flex:0 0 auto;margin:0!important;} #main#main#main#main [data-task-prototype] .tp-ticket-comments > header > .tp-comment-tools {position:static!important;flex:1 1 280px!important;width:auto!important;min-width:0;justify-content:flex-end;} /* Metadata progressively adapts to the ticket's own content width. */ @container ticket-overview (min-width:520px) and (max-width:899.99px) { #main#main#main#main#main [data-task-prototype] .tp-ticket-overview-meta {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 24px!important;} #main#main#main#main#main [data-task-prototype] .tp-ticket-fact-column {grid-template-columns:80px minmax(0,1fr)!important;gap:10px 12px!important;} } @container ticket-overview (min-width:900px) { #main#main#main#main#main [data-task-prototype] .tp-ticket-overview-meta {grid-template-columns:repeat(3,minmax(0,1fr))!important;} } @container ticket-overview (max-width:519.99px) { #main#main#main#main#main [data-task-prototype] .tp-ticket-overview-meta {grid-template-columns:minmax(0,1fr)!important;} } #main#main#main [data-task-prototype] :is(.tp-workspace-tabs,.wp-side-tabs).wp-tabs-overflow {padding-left:32px!important;padding-right:32px!important;scroll-padding-inline:32px;} body > .wp-tab-scroll:disabled {opacity:1!important;color:#b5b5b5!important;cursor:default!important;} /* Hidden workspace sections always yield to the selected tab. */ #main#main#main#main#main [data-task-prototype] #workspace-panel-deck [data-panel][hidden], #main#main#main#main#main [data-task-prototype] #workspace-panel-deck .tp-communication-workspace[hidden] {display:none!important;} #main#main#main#main#main [data-task-prototype] .tp-comment-tools > .tp-comment-search {flex:0 1 240px!important;width:240px!important;max-width:100%!important;min-width:0!important;box-sizing:border-box;} #main#main#main#main#main [data-task-prototype] .tp-comment-tools > .tp-comment-search input {width:100%!important;min-width:0!important;} #main#main#main#main [data-task-prototype] #workspace-panel-files, #main#main#main#main [data-task-prototype] #workspace-panel-files > .tp-file-list {border-left:0!important;box-shadow:none!important;} #main#main#main#main [data-task-prototype] .tp-files-collapse-toggle {display:grid!important;place-items:center!important;width:34px!important;min-width:34px!important;height:34px!important;padding:7px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:6px!important;flex:0 0 34px!important;} #main#main#main#main [data-task-prototype] .tp-files-collapse-toggle:hover {background:#ededed!important;} #main#main#main#main [data-task-prototype] .is-files-collapsed .tp-files-toggle-arrow {transform:translateX(29px) scaleX(-1);} #main#main#main [data-task-prototype] .tp-documents-workspace {position:relative;} #main#main#main [data-task-prototype] [data-expand-file-list] {display:none!important;} #main#main#main [data-task-prototype] .tp-file-selection-splitter {position:absolute;top:0;bottom:0;width:12px;transform:translateX(-50%);z-index:30;cursor:col-resize!important;touch-action:none;} #main#main#main [data-task-prototype] .tp-file-selection-splitter::after {content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#dedede;} #main#main#main [data-task-prototype] .tp-file-selection-splitter:is(:hover,:focus-visible)::after {background:#888;} #main#main#main [data-task-prototype] .tp-file-selection-splitter[hidden] {display:none!important;} /* File selection remains visible; resizing replaces collapse controls. */ #main#main#main#main#main [data-task-prototype] [data-expand-file-list] {display:none!important;} #main#main#main#main#main [data-task-prototype] .tp-file-list .tp-document-row > span:nth-child(2) {display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:5px!important;min-width:0!important;} #main#main#main#main#main [data-task-prototype] .tp-file-list-heading {display:block!important;width:100%!important;min-width:0!important;} #main#main#main#main#main [data-task-prototype] .tp-file-list-heading strong {display:block!important;white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important;overflow:visible!important;} #main#main#main#main#main [data-task-prototype] .tp-file-list .tp-file-status {max-width:100%;white-space:normal!important;} #main#main#main#main#main [data-task-prototype] .tp-file-list > .tp-files-heading {display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;flex-wrap:wrap!important;height:auto!important;min-height:52px!important;} #main#main#main#main#main [data-task-prototype] .tp-file-list > .tp-files-heading .tp-files-info-toggle {display:inline-flex!important;position:static!important;align-items:center!important;gap:6px!important;flex:0 0 auto!important;width:auto!important;margin-left:auto!important;white-space:nowrap!important;} #main#main#main#main#main [data-task-prototype] .tp-files-info-toggle .tp-file-info-chevron {display:block!important;flex-shrink:0!important;} #main#main#main#main#main [data-task-prototype] .tp-file-list > .tp-files-heading .tp-files-info-toggle {width:32px!important;height:32px!important;min-height:32px!important;padding:7px!important;justify-content:center!important;} #main#main#main#main#main [data-task-prototype] .tp-file-list > .tp-files-heading .tp-files-info-toggle {width:auto!important;padding:7px 10px!important;gap:6px!important;} /* Files and File info share the same heading baseline. */ #main#main#main#main#main [data-task-prototype] .tp-file-list > .tp-files-heading, #main#main#main#main#main [data-task-prototype] #tp-file-inspector > .tp-files-heading {box-sizing:border-box!important;height:64px!important;min-height:64px!important;padding:12px 16px!important;align-items:center!important;} #main#main#main#main#main [data-task-prototype] #tp-file-inspector [data-review-file] {display:none!important;} #main#main#main#main#main [data-task-prototype] #tp-file-inspector > header:not(.tp-inline-info-header) {display:flex!important;justify-content:flex-start!important;gap:12px!important;} #main#main#main#main#main [data-task-prototype] #tp-file-inspector .tp-file-readonly-values[hidden] {display:none!important;} #main#main#main#main#main [data-task-prototype] #tp-file-inspector [data-close-file-info] {display:inline-flex!important;align-items:center!important;justify-content:center!important;font-weight:400!important;} #main#main#main#main#main [data-task-prototype] #tp-file-inspector > .tp-file-metadata-disclosure {border:0!important;box-shadow:none!important;} /* A single divider separates File info's heading from its content. */ #main#main#main#main#main [data-task-prototype] #tp-file-inspector > header {border:0!important;border-bottom:1px solid #dedede!important;box-shadow:none!important;} #main#main#main#main#main [data-task-prototype] #tp-file-inspector > section, #main#main#main#main#main [data-task-prototype] #tp-file-inspector .tp-file-metadata-disclosure > .tp-file-info {border-top:0!important;box-shadow:none!important;} /* Document pagination fits the preview pane, including tablet layouts. */ #main#main#main#main#main [data-task-prototype] .tp-preview-pager {display:grid!important;grid-template-columns:auto 28px minmax(0,1fr) 28px!important;gap:6px!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:10px!important;} #main#main#main#main#main [data-task-prototype] .tp-preview-pager > span {min-width:0!important;max-width:64px!important;white-space:normal!important;} #main#main#main#main#main [data-task-prototype] .tp-preview-thumbnails {display:flex!important;flex-wrap:wrap!important;justify-content:center!important;min-width:0!important;gap:4px!important;} #main#main#main#main#main [data-task-prototype] .tp-preview-thumbnails > button {flex:0 0 28px!important;width:28px!important;min-width:0!important;margin:0!important;}