/* task-chat.css - canonical layout, controls, request rows, lifecycle, and
   status presentation for the Requests workspace injected by task-chat.js.

   WHO LOADS THIS. CIC pages, JSLC Mainframe, and Musix all load this same file.
   Keep every `.ctc-*` visual contract here so those surfaces cannot drift.
   task-status.css remains only as a compatibility load target for older CIC
   pages; it must not regain presentation ownership.

   INVARIANTS. Use shell tokens for every color. The workspace is a left,
   taskbar-aligned drawer. At usable widths it is a 19rem request rail plus a
   detail pane; below 50rem it routes between Queue and Detail/Compose with an
   explicit Back action. Request rows carry only title, concise state, age, and
   timestamp; the complete five-stage lifecycle belongs in selected detail.
   Rows are compact list options and must not inherit chrome control min-height.
   Page heading and unscoped button rules cannot inflate this overlay.

   WHERE A CHANGE GOES. Geometry: `.ctc-drawer` / `.ctc-workspace`. Request
   browser: `.ctc-query-*` / `.ctc-queue-timeline`. Detail: `.ctc-feed` /
   `.ctc-lifecycle-detail` / `.ctc-task-history`.
   Composer and routing: `.ctc-composer` / `.ctc-compose-meta`. Status tokens:
   `.ctc-indicator.*`. Selected-text action: `.ctc-orchestration-action`. */
.cic-task-chat { position: fixed; inset: 0; z-index: 1000; isolation: isolate; min-width: 0; overflow: hidden; pointer-events: none; font-family: var(--ui-font-family); font-size: 14px; line-height: 1.4; }
.cic-task-chat.open { pointer-events: auto; }
.cic-task-chat :is(h1, h2, h3, h4) { margin: .1rem 0; font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: normal; text-transform: none; }
.ctc-scrim { position: absolute; inset: 0; border: 0; background: var(--overlay-scrim); opacity: 0; transition: opacity .2s; }
.open .ctc-scrim { opacity: 1; }
.ctc-drawer { position: absolute; inset: 2.5rem auto 0 0; box-sizing: border-box; width: min(64rem, calc(100vw - 24px)); max-width: 100%; max-height: calc(100dvh - 2.5rem); min-width: 0; display: flex; flex-direction: column; gap: .65rem; overflow: hidden; overflow-x: hidden; padding: .85rem; background: var(--surface-overlay); background: color-mix(in srgb, var(--surface-overlay) 91%, transparent); color: var(--ink); border-right: 1px solid var(--line); box-shadow: var(--shadow-drawer); transform: translate3d(-105%, 0, 0); transition: transform .22s ease; backdrop-filter: blur(18px); }
.open .ctc-drawer { transform: translate3d(0, 0, 0); }
.ctc-drawer > header, .ctc-header-actions, .ctc-actions, .ctc-section-heading, .ctc-event > div, .ctc-request-overview > div, .ctc-lifecycle-detail > div, .ctc-task-history > div, .ctc-undated-evidence > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ctc-drawer > header { flex: 0 0 auto; flex-flow: row nowrap; padding: 0; border: 0; }
.ctc-drawer h2, .ctc-drawer h3 { margin: .1rem 0; font-size: 1rem; font-weight: 600; }
.ctc-drawer h4 { font-weight: 600; }
.ctc-drawer small, .ctc-muted { color: var(--muted); font-size: 12px; }
.ctc-close { font-size: 1.25rem; }
.ctc-header-actions { justify-content: flex-end; }
.ctc-drawer .ctc-queue-toggle { display: inline-grid; width: 1.9rem; min-width: 1.9rem; padding: 0; place-items: center; font-size: 1.15rem; }
.ctc-close, .ctc-drawer button:not([data-task-id]), .ctc-drawer select { min-height: var(--ui-control-height); border: 1px solid var(--line); border-radius: .25rem; background: var(--control-surface); color: inherit; padding: .3rem .58rem; font: inherit; font-size: 14px; line-height: 1.25; font-weight: 500; }
.ctc-drawer :is(button, select, input, textarea, .ctc-drop):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctc-drawer button[data-primary="true"] { border-color: var(--accent); background: var(--accent-subtle); font-weight: 600; }
.ctc-workspace { display: grid; grid-template-columns: 19rem minmax(28rem, 1fr); grid-template-rows: minmax(0, 1fr); gap: .65rem; flex: 1 1 auto; min-width: 0; min-height: 12rem; }
.ctc-query-browser, .ctc-conversation { display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; padding: .6rem; border: 1px solid var(--line); border-radius: .35rem; }
.ctc-query-browser { background: var(--surface-overlay); background: color-mix(in srgb, var(--accent-subtle) 42%, var(--surface-overlay)); border-color: var(--accent); }
.ctc-conversation { background: var(--field-surface); background: color-mix(in srgb, var(--field-surface) 92%, var(--surface-subtle)); border-color: var(--line); }
.ctc-back { display: none; width: max-content; margin-bottom: .4rem; }
.ctc-query-list, .ctc-feed { overflow: auto; min-width: 0; min-height: 0; }
.ctc-query-list { display: grid; gap: .35rem; margin-top: .4rem; }
.ctc-query-list button { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 4rem; max-height: 4.75rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-rows: auto auto; gap: .15rem .5rem; overflow: hidden; align-content: center; text-align: left; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--surface-subtle); color: inherit; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; }
.ctc-query-list button:focus-visible, .ctc-query-list button[aria-selected="true"] { border-color: var(--accent); background: var(--accent-subtle); }
.ctc-query-list time { grid-column: 1 / -1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctc-query-heading, .ctc-request-heading { display: flex; align-items: center; min-width: 0; gap: .45rem; }
.ctc-request-id { flex: 0 0 auto; padding: .08rem .28rem; border: 1px solid var(--line-strong); border-radius: .2rem; background: var(--accent-subtle); color: var(--ink); font: 600 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .03em; }
.ctc-request-id[data-legacy="true"] { border-style: dashed; background: var(--surface-subtle); color: var(--muted); }
.ctc-query-summary { min-width: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; font-size: 14px; font-weight: 500; }
.ctc-query-group { display: grid; gap: .35rem; min-width: 0; }
.ctc-query-group + .ctc-query-group { margin-top: .7rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.ctc-query-group h4 { display: flex; justify-content: space-between; margin: 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ctc-query-group h4 span { font-variant-numeric: tabular-nums; }
.ctc-browser-actions { display: flex; gap: .35rem; }
.ctc-browser-actions button { padding: .3rem .48rem; font-size: 12px; }
.ctc-archive[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); }
.ctc-queue-timeline { margin-top: .4rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--surface-subtle); }
.ctc-queue-timeline > summary { display: flex; justify-content: space-between; gap: .5rem; padding: .38rem .5rem; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ctc-queue-timeline > summary span { font-variant-numeric: tabular-nums; }
.ctc-queue-history-body { max-height: 10rem; overflow: auto; padding: 0 .5rem .45rem; border-top: 1px solid var(--line); }
.ctc-query-list .ctc-indicators { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; min-width: 0; max-width: 100%; overflow: hidden; pointer-events: none; }
.ctc-request-age { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ctc-indicator { display: inline-flex; align-items: center; width: max-content; max-width: 10.5rem; padding: .1rem .36rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface-subtle); font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ctc-indicator::before { content: ""; width: .42rem; height: .42rem; margin-right: .3rem; border-radius: 50%; background: var(--muted); }
.ctc-indicator[data-state="working"]::before, .ctc-indicator[data-state="progress"]::before { background: var(--status-info); }
.ctc-indicator[data-state="crashed"]::before, .ctc-indicator[data-state="failed"]::before, .ctc-indicator[data-state="cancelled"]::before { background: var(--status-error); }
.ctc-indicator[data-state="completed"]::before { background: var(--status-success); }
.ctc-indicator[data-state="retrying"]::before, .ctc-indicator[data-state="waiting"]::before { background: var(--status-warning); }
.ctc-feed { flex: 1; }
.ctc-feed article, .ctc-event, .ctc-lifecycle-detail { margin: .4rem 0; padding: .65rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--surface-subtle); background: color-mix(in srgb, var(--surface-subtle) 88%, transparent); min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.ctc-event { display: grid; gap: .2rem; }
.ctc-event.operator { border-color: var(--accent); }
.ctc-event p, .ctc-feed article p { margin: .35rem 0 0; }
.ctc-drawer .ctc-request-copy { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
.ctc-drawer .ctc-request-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctc-state { padding: .15rem .4rem; border-radius: .2rem; background: var(--accent-subtle); font-size: 12px; }
.ctc-lifecycle-detail { display: grid; gap: .55rem; }
.ctc-lifecycle-detail strong { font-weight: 600; }
.ctc-lifecycle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; margin: 0; padding: 0; list-style: none; }
.ctc-lifecycle-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem; min-width: 0; margin: 0; padding: .35rem; border: 1px solid var(--line); border-radius: .2rem; font-size: 12px; line-height: 1.2; }
.ctc-lifecycle-step span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ctc-lifecycle-mark { display: inline-grid; place-items: center; min-width: .7rem; }
.ctc-lifecycle-step[data-state="complete"] .ctc-lifecycle-mark::before { content: "✓"; }
.ctc-lifecycle-step[data-state="current"] { border-width: 2px; border-style: solid; font-weight: 600; }
.ctc-lifecycle-step[data-state="current"] .ctc-lifecycle-mark::before { content: "◆"; }
.ctc-lifecycle-step[data-state="pending"] .ctc-lifecycle-mark::before { content: "○"; }
.ctc-lifecycle-step[data-state="unrecorded"] { border-style: dashed; }
.ctc-lifecycle-step[data-state="unrecorded"] .ctc-lifecycle-mark::before { content: "?"; }
.ctc-lifecycle-step[data-state="not-applicable"] { text-decoration: line-through; }
.ctc-lifecycle-step[data-state="not-applicable"] .ctc-lifecycle-mark::before { content: "–"; }
.ctc-lifecycle-conditions { margin: 0; color: var(--muted); font-size: 12px; }
.ctc-task-history { display: grid; gap: .5rem; margin: .4rem 0; padding: .65rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--surface-subtle); }
.ctc-undated-evidence { display: grid; gap: .25rem; margin: .4rem 0; padding: .65rem; border: 1px dashed var(--line); border-radius: .25rem; background: var(--surface-overlay); }
.ctc-history-list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.ctc-history-list li { display: grid; grid-template-columns: .75rem minmax(0, 1fr); gap: .4rem; min-width: 0; padding: .35rem 0; }
.ctc-history-list li + li { border-top: 1px solid var(--line); }
.ctc-history-mark { width: .5rem; height: .5rem; margin-top: .35rem; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface-overlay); }
.ctc-history-list strong, .ctc-history-list p, .ctc-history-list small { display: block; min-width: 0; overflow-wrap: anywhere; }
.ctc-history-list strong { font-size: 12px; font-weight: 600; }
.ctc-history-list p { margin: .15rem 0; font-size: 12px; }
.ctc-history-list small { color: var(--muted); font-size: 12px; }
.ctc-drawer .ctc-history-task { display: block; width: 100%; margin: 0 0 .1rem; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--link); font-size: 12px; font-weight: 500; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ctc-drawer .ctc-history-task:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctc-composer { display: grid; flex: 0 0 auto; min-width: 0; gap: .4rem; padding: .6rem; border: 1px solid var(--line-strong); border-radius: .35rem; background: var(--control-surface); background: color-mix(in srgb, var(--control-surface) 88%, var(--accent-subtle)); }
.ctc-composer > label { display: grid; gap: .2rem; font-size: 12px; }
.ctc-composer input, .ctc-composer textarea { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: .25rem; background: var(--field-surface); color: inherit; padding: .42rem .55rem; font: inherit; font-size: 16px; line-height: 1.35; }
.ctc-composer input { min-height: var(--ui-control-height); }
.ctc-composer textarea { max-height: 6rem; resize: vertical; }
.ctc-compose-meta { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.ctc-compose-meta > * { min-width: 0; max-width: 100%; }
.ctc-compose-meta select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.ctc-provider-status { grid-column: 1 / -1; order: 1; overflow-wrap: anywhere; }
.ctc-compose-meta label { display: grid; min-width: 0; gap: .2rem; font-size: 12px; font-weight: 400; }
.ctc-drop { display: grid; min-height: var(--ui-control-height); box-sizing: border-box; place-items: center; padding: .25rem .5rem; text-align: center; border: 1px dashed var(--line-strong); border-radius: .25rem; font-size: 12px; }
.ctc-drop.over { border-color: var(--accent); background: var(--accent-subtle); }
.ctc-file { display: none; }
.ctc-file-label { display: inline !important; color: var(--link); cursor: pointer; }
.ctc-previews { display: flex; gap: .35rem; flex-wrap: wrap; }
.ctc-previews span { padding: .25rem .4rem; border-radius: .2rem; background: var(--surface-subtle); font-size: 12px; }
.ctc-previews button { padding: .05rem .25rem; margin-left: .3rem; }
.ctc-actions { justify-content: flex-start; flex-wrap: wrap; }
.ctc-actions button:disabled, .ctc-compose-meta :disabled { opacity: .42; cursor: not-allowed; filter: grayscale(1); }
.ctc-status { min-width: 0; min-height: 1.2em; overflow-wrap: anywhere; font-size: 12px; color: var(--status-info); }
.ctc-orchestration-action { display: none; position: fixed; z-index: 900; margin: 0; pointer-events: auto; user-select: none; -webkit-user-select: none; border: 1px solid var(--line); border-radius: .25rem; background: var(--control-surface); color: inherit; padding: .35rem .7rem; font: inherit; font-size: 14px; font-weight: 500; }
.ctc-orchestration-action[hidden] { display: none; }
.ctc-orchestration-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.ctc-selection-popup { position: fixed; z-index: 950; min-width: 18rem; max-width: 22rem; box-sizing: border-box; background: var(--surface-overlay); background: color-mix(in srgb, var(--surface-overlay) 92%, transparent); color: var(--ink); border: 1px solid var(--line); border-radius: .35rem; box-shadow: var(--shadow-drawer); padding: .65rem; backdrop-filter: blur(18px); font-family: var(--ui-font-family); font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; gap: .45rem; }
.ctc-selection-popup[hidden] { display: none; }
.ctc-popup-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ctc-popup-title { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ctc-popup-close, .ctc-batch-close { border: 1px solid var(--line); border-radius: .25rem; background: var(--control-surface); color: inherit; padding: .1rem .4rem; font: inherit; font-size: 14px; line-height: 1.2; cursor: pointer; }
.ctc-popup-quote { margin: 0; padding: .35rem .5rem; border-left: 3px solid var(--accent); border-radius: .2rem; background: var(--surface-subtle); color: var(--ink); font-size: 12px; font-style: italic; max-height: 4.5rem; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.ctc-popup-comment { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: .25rem; background: var(--field-surface); color: inherit; padding: .35rem .5rem; font: inherit; font-size: 13px; line-height: 1.35; resize: vertical; max-height: 5rem; }
.ctc-popup-actions { display: flex; align-items: center; gap: .4rem; }
.ctc-popup-actions button, .ctc-batch-actions button { min-height: var(--ui-control-height); border: 1px solid var(--line); border-radius: .25rem; background: var(--control-surface); color: inherit; padding: .3rem .6rem; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ctc-popup-actions button[data-primary="true"], .ctc-batch-actions button[data-primary="true"] { border-color: var(--accent); background: var(--accent-subtle); font-weight: 600; }
.ctc-popup-status, .ctc-batch-status { font-size: 12px; color: var(--status-info); min-height: 1.2em; overflow-wrap: anywhere; }
.ctc-batch-drawer { position: fixed; inset: 2.5rem 0 0 auto; z-index: 960; box-sizing: border-box; width: min(24rem, calc(100vw - 24px)); max-width: 100%; max-height: calc(100dvh - 2.5rem); display: flex; flex-direction: column; gap: .65rem; padding: .85rem; background: var(--surface-overlay); background: color-mix(in srgb, var(--surface-overlay) 92%, transparent); color: var(--ink); border-left: 1px solid var(--line); box-shadow: var(--shadow-drawer); backdrop-filter: blur(18px); font-family: var(--ui-font-family); font-size: 13px; }
.ctc-batch-drawer[hidden] { display: none; }
.ctc-batch-header, .ctc-batch-footer, .ctc-batch-actions, .ctc-batch-item-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ctc-batch-header h3 { margin: .1rem 0; font-size: 1rem; font-weight: 600; }
.ctc-batch-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; min-height: 4rem; padding-right: .2rem; }
.ctc-batch-item { padding: .5rem; border: 1px solid var(--line); border-radius: .25rem; background: var(--surface-subtle); display: flex; flex-direction: column; gap: .3rem; }
.ctc-batch-remove { border: 1px solid var(--line); border-radius: .2rem; background: var(--control-surface); color: inherit; padding: 0 .35rem; font-size: 13px; cursor: pointer; }
.ctc-batch-quote { margin: 0; padding: .25rem .45rem; border-left: 2px solid var(--accent); background: var(--field-surface); font-size: 12px; font-style: italic; max-height: 4rem; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.ctc-batch-comment { margin: 0; font-size: 12px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ctc-batch-toggle { position: fixed; bottom: 1rem; right: 1rem; z-index: 940; border: 1px solid var(--accent); border-radius: 1.5rem; background: var(--accent-subtle); color: var(--ink); padding: .4rem .85rem; font: inherit; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-drawer); cursor: pointer; }
.ctc-batch-toggle[hidden] { display: none; }
@media (min-width: 50.001rem) {
  .cic-task-chat[data-queue-collapsed="true"] .ctc-workspace { grid-template-columns: minmax(28rem, 1fr); }
  .cic-task-chat[data-queue-collapsed="true"] .ctc-query-browser { display: none; }
}
@media (max-width: 50rem) {
  .ctc-drawer { width: 100%; padding: .7rem; border-right: 0; }
  .ctc-workspace { display: block; min-height: 0; }
  .ctc-query-browser { height: 100%; border-right: 0; border-bottom: 0; padding: .55rem 0; }
  .ctc-conversation { padding: .55rem 0; }
  .ctc-drawer .ctc-queue-toggle { display: none; }
  .ctc-back { display: inline-flex; }
  .cic-task-chat[data-pane="queue"] .ctc-conversation,
  .cic-task-chat[data-pane="queue"] .ctc-composer { display: none; }
  .cic-task-chat[data-pane="detail"] .ctc-query-browser,
  .cic-task-chat[data-pane="compose"] .ctc-query-browser { display: none; }
  .cic-task-chat[data-pane="detail"] .ctc-conversation,
  .cic-task-chat[data-pane="compose"] .ctc-conversation { height: 100%; }
  .ctc-compose-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (pointer: coarse) {
  .ctc-file-label { display: inline-flex !important; min-height: var(--ui-control-height); align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ctc-scrim, .ctc-drawer { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .ctc-drawer, .ctc-query-browser, .ctc-conversation, .ctc-composer, .ctc-feed article, .ctc-event, .ctc-lifecycle-detail { background: var(--surface-overlay); backdrop-filter: none; }
}
@media (max-width: 34rem) {
  .ctc-drawer > header, .ctc-section-heading { align-items: flex-start; }
  .ctc-browser-actions { flex-wrap: wrap; justify-content: flex-end; }
  .ctc-compose-meta { grid-template-columns: minmax(0, 1fr); }
  .ctc-actions button { flex: 1 1 8rem; }
  .ctc-lifecycle { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 43.75rem) {
  .ctc-drawer { overflow-y: auto; }
  .ctc-workspace { flex-basis: 19rem; min-height: 19rem; }
  .ctc-composer textarea { max-height: 4.5rem; }
}