#conversation-panel:not([data-mode="work"]) [data-work-only] { display: none; }
.composer-modes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 0 1px 10px;
  font-size: 13px;
}
.composer-modes:has(.mode-switch:not([hidden])) { display: grid; justify-items: center; gap: 5px; padding-bottom: 12px; }
.mode-switch { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--gold-line); border-radius: 999px; background: #f0ece6; }
.mode-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 32px; padding: 4px 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); }
.mode-switch button .ui-icon { width: 15px; height: 15px; }
.mode-switch button[aria-pressed="true"] { border-color: var(--gold-line); background: var(--paper); color: var(--gold-dark); font-weight: 600; box-shadow: 0 1px 3px rgb(42 35 27 / 8%); }
.mode-switch button:hover:not(:disabled) { color: var(--gold-dark); }
.record-mode { margin-inline-start: 6px; border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold-dark); }
#work-area-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-inline-start: auto; padding: 4px 9px; }
#work-area-toggle[aria-expanded="true"] { border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold-dark); }
#work-area-toggle .ui-icon { width: 16px; height: 16px; }
.work-area {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  min-width: 0;
  overflow: auto;
  border-inline-start: 1px solid var(--line);
  background: var(--paper);
  box-shadow: -10px 0 36px rgb(25 36 54 / 15%);
  overscroll-behavior: contain;
}
.work-area-top { position: sticky; top: 0; z-index: 2; background: var(--paper); }
.work-area-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.work-area-heading h2 { margin: 0; font: 600 20px/1.3 var(--serif); }
#work-area-close { display: grid; min-height: 36px; place-items: center; padding: 6px; }
#work-area-status { padding: 9px 16px 0; font-size: 13px; }
#work-area-status:empty { display: none; }
.work-area-body { padding: 0 16px 16px; }
.work-area-body > :is(section, details) { padding-block: 12px; }
.work-area-body > :is(section, details) + :is(section, details) { border-top: 1px solid var(--line); }
.work-area-body h3, .work-area-body summary { margin: 0 0 5px; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.work-area-body p { font-size: 13px; }
.work-file-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#work-area-list ul { list-style: none; margin: 0; padding: 0; }
#work-area-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 9px; padding-block: 2px; font-size: 13px; overflow-wrap: anywhere; }
#work-area-list li > :first-child { flex: 1 1 120px; min-width: 0; }
.work-area-body :is(a, button).text-button { min-height: 34px; padding-block: 6px; }
.work-file-name { text-align: start; overflow-wrap: anywhere; }
.work-file-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block: 8px; font-size: 13px; }
.work-file-controls select { min-width: 0; max-width: 100%; padding: 5px 7px; }
.work-file-controls .outline { min-height: 34px; padding: 4px 8px; }
.document-tabs { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.document-tab { flex: 0 0 auto; max-width: 14rem; min-height: 38px; overflow: hidden; padding: 6px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.document-tab[aria-selected="true"] { border-bottom-color: var(--gold); color: var(--ink); font-weight: 650; }
.document-tab:hover { background: var(--sidebar); }
#work-file-preview { padding-top: 7px; }
#work-file-title { margin-top: 4px; font-size: 17px; }
#work-file-content { min-width: 0; overflow-wrap: anywhere; }
#work-file-content .material-passages { padding-inline-start: 0; }
.document-page, .document-source, .document-diff {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--canvas);
  line-height: 1.65;
}
.document-page :is(h4, h5, h6) { margin: 10px 0 6px; }
.document-page :is(p, blockquote) { white-space: pre-wrap; }
.document-page .office-title { margin-top: 0; font: 600 23px/1.35 var(--serif); }
.office-meta { color: var(--muted); }
.document-source, .document-diff { font: 13px/1.65 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.document-diff > div { padding-inline: 4px; }
.diff-context { color: var(--muted); }
.diff-deletion { color: #822c29; background: #f9e8e5; }
.diff-insertion { color: #254b32; background: #e4f0e8; }
.document-edit-fields { display: grid; gap: 10px; }
.document-edit-fields label { display: grid; gap: 5px; font-size: 13px; }
.document-text-editor, .document-cell-input { width: 100%; min-width: 0; resize: vertical; background: var(--paper); }
.document-text-editor { min-height: min(48vh, 410px); font: 13px/1.65 ui-monospace, monospace; }
.document-cell-input { min-height: 36px; padding: 6px 8px; font-size: 13px; }
.document-sheet-tabs { display: flex; flex-wrap: wrap; gap: 3px 6px; margin-block: 4px 10px; }
.document-sheet-tabs button[aria-pressed="true"] { background: var(--gold-soft); color: var(--gold-dark); }
.document-sheet { max-width: 100%; overflow: auto; border: 1px solid var(--line); }
.document-sheet table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 13px; }
.document-sheet :is(th, td) { min-width: 8rem; padding: 7px 9px; border: 1px solid var(--line); text-align: start; vertical-align: top; white-space: pre-wrap; }
.document-sheet th { background: var(--sidebar); }
.document-sheet td:has(textarea) { min-width: 12rem; }
.document-sheet .material-highlight { background: var(--gold-soft); }
.turn-file-changes { margin: 3px 0 6px; padding-inline-start: 23px; overflow-wrap: anywhere; }
.turn-execution-steps .turn-file-changes { padding-inline-start: 0; margin-block-end: 0; list-style: none; }
.turn-file-changes button { text-align: start; }
.work-file-mention { display: inline; min-height: 0; padding-block: 0; vertical-align: baseline; }

@media (min-width: 1120px) {
  .workbench > main:has(> .work-area:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(345px, 45%);
    align-items: start;
    align-content: start;
    column-gap: clamp(14px, 2vw, 24px);
    padding-inline: clamp(18px, 2.8vw, 40px);
  }
  .workbench > main:has(> .work-area:not([hidden])) > .workspace-error { grid-column: 1 / -1; }
  .work-area { position: sticky; top: 24px; width: 100%; max-height: calc(100dvh - 48px); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
}

@media (max-width: 360px) {
  .composer-modes { gap: 5px 8px; }
}