/* Agtent client surfaces. Existing controllers own data and authorization. */
html:root {
  --client-reading-width: 1120px;
  --client-room-gutter: 24px;
  --client-porcelain: #feffff;
  --client-ice: #fbfdff;
  --client-ink: #254255;
  --client-muted: #5b6e7d;
  --client-edge: rgba(90, 138, 166, .15);
  --client-surface: rgba(255, 255, 255, .87);
  --client-raised: rgba(255, 255, 255, .96);
  --client-hover: rgba(246, 251, 254, .95);
  --client-selected: rgba(237, 247, 253, .97);
  --client-input-edge: #7c93a4;
  --client-input-focus: #607f98;
  --client-depth: 0 6px 18px rgba(64, 105, 133, .04), inset 0 1px 0 rgba(255, 255, 255, .96);
  --client-floating-depth: 0 12px 32px -10px rgba(43, 81, 112, .2), 0 0 0 1px rgba(90, 138, 166, .1);
  --canvas: var(--client-ice);
  --paper: var(--client-porcelain);
  --paper-soft: #f5faff;
  --input: #f7fbfe;
  --ink: var(--client-ink);
  --ink-secondary: #4d6576;
  --ink-tertiary: var(--client-muted);
  --ink-muted: var(--client-muted);
  --action: #165dc5;
  --action-hover: #124fa9;
  --action-soft: #edf5ff;
  --line: var(--client-edge);
  --line-soft: rgba(90, 138, 166, .08);
  --line-strong: var(--client-input-edge);
  --op-rail: rgba(248, 252, 255, .88);
  --op-hover: var(--client-hover);
  --op-shell: rgba(255, 255, 255, .89);
  --op-compose: rgba(255, 255, 255, .94);
  --lg-shell: var(--op-shell);
  --lg-pane: var(--client-surface);
  --lg-surface: var(--client-surface);
  --lg-surface-hover: var(--client-hover);
  --lg-quiet: var(--paper-soft);
  --lg-selected: var(--client-selected);
  --lg-own: #edf6fd;
  --lg-float: var(--client-raised);
  --lg-edge: var(--client-edge);
  --lg-blue-edge: var(--client-edge);
  --lg-highlight: rgba(255, 255, 255, .96);
  --lg-shadow: var(--client-depth);
  --lg-overlay-shadow: var(--client-floating-depth);
  --glass-face: var(--client-surface);
  --glass-raised: var(--client-raised);
  --glass-edge: var(--client-edge);
  --glass-shadow: var(--client-depth);
  --group-bg: var(--client-surface);
  --group-bubble: rgba(246, 251, 254, .88);
  --group-own-bubble: #edf6fd;
  --group-quiet: var(--paper-soft);
  --group-line: var(--client-edge);
  --group-selected: var(--client-selected);
}
html:root[data-theme="dark"] {
  --client-porcelain: #14222e;
  --client-ice: #101b25;
  --client-ink: #e2eff6;
  --client-muted: #9fb6c6;
  --client-edge: rgba(152, 187, 209, .2);
  --client-surface: rgba(23, 39, 53, .9);
  --client-raised: rgba(28, 47, 63, .98);
  --client-hover: #213a4d;
  --client-selected: #23435b;
  --client-input-edge: #608299;
  --client-input-focus: #8db3d0;
  --client-depth: 0 6px 18px rgba(0, 8, 18, .1), inset 0 1px 0 rgba(218, 240, 255, .04);
  --client-floating-depth: 0 14px 32px -10px rgba(0, 8, 18, .7), 0 0 0 1px rgba(152, 187, 209, .23);
  --paper-soft: #192e3e;
  --input: #142635;
  --ink-secondary: #bfd3e1;
  --action: #a2cbff;
  --action-hover: #bedaff;
  --action-soft: #254763;
  --line-soft: rgba(152, 187, 209, .1);
  --op-rail: rgba(17, 31, 43, .91);
  --op-shell: rgba(20, 36, 49, .94);
  --op-compose: rgba(23, 42, 56, .96);
  --lg-own: #23435b;
  --lg-primary: #2767c3;
  --lg-primary-hover: #3277d7;
  --lg-highlight: rgba(218, 240, 255, .05);
  --group-bubble: #192e3e;
  --group-own-bubble: #23435b;
}
html:root body {
  background: var(--client-ice);
  color: var(--client-ink);
  font-size: 16px;
  line-height: 1.65;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
html:root body::before {
  background: radial-gradient(ellipse at 20% 0, rgba(209, 234, 248, .09), transparent 60%), var(--client-ice);
}
html:root :is(button, input, textarea, select) { font-family: inherit; }
html:root :is(button, a, summary) { touch-action: manipulation; }
html:root :is(button, a, input, textarea, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html:root :is(button, .button, .nav-link, .group-list-item, .settings-menu-row) {
  transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out;
}
html:root :is(button, .button):active:not(:disabled) { transform: translateY(1px); }
html:root :is(button, .button):disabled { cursor: not-allowed; }
html:root :is(.sidebar, .topbar, .group-list, .group-composer, .detail-dialog, .group-create-dialog, .mobile-nav-dialog) {
  -webkit-backdrop-filter: blur(12px) saturate(108%);
  backdrop-filter: blur(12px) saturate(108%);
}
html:root .topbar { height: 56px; padding: 0 24px; background: var(--op-shell); border-color: var(--line-soft); }
html:root .breadcrumb { font-size: 16px; }
html:root .global-search { height: 44px; background: var(--client-hover); border: 1px solid var(--line-soft); border-radius: 11px; }
html:root .topbar > .icon-button { width: 44px; height: 44px; min-height: 44px; background: transparent; }
html:root main { width: 100%; max-width: none; margin: 0; padding: 18px 24px 12px; min-height: calc(100dvh - 56px); }
html:root .page-heading { margin-bottom: 24px; }
html:root .page-heading h1 { font-size: 24px; line-height: 1.4; }
html:root .page-description { font-size: 14px; max-width: 72ch; }
html:root :is(.panel, .tool-card, .model-overview, .summary-strip, .schedule-panel, .knowledge-local-only) {
  background: var(--client-surface);
  border: 1px solid var(--client-edge);
  border-radius: 18px;
  box-shadow: var(--client-depth);
}
html:root :is(.panel-header, .table-toolbar) { border-color: var(--line-soft); }
html:root :is(.toolbar, .table-toolbar) { gap: 12px; }
html:root :is(.icon-button, .button, .select-field, .search-field, .settings-menu-row) { border-radius: 11px; }
html:root .button { min-height: 44px; padding: 8px 12px; font-size: 14px; }
html:root .button:not(.primary):not(.danger) { background: var(--client-hover); border-color: var(--line-soft); }
html:root .button.primary { background: var(--action); color: #fff; border-color: var(--action); }
html:root[data-theme="dark"] .button.primary { background: #2767c3; border-color: #2767c3; color: #fff; }
html:root .button.subtle { background: transparent; box-shadow: none; }
html:root .button.subtle:hover { background: var(--client-hover); }
html:root .search-field { background: var(--input); border-color: var(--line-soft); }
html:root .select-field { background: var(--client-raised); border-color: var(--client-edge); }
html:root table { font-size: 14px; }
html:root :is(th, td) { border-color: var(--line-soft); }
html:root tbody tr:hover { background: var(--client-hover); }
html:root :is(.tag, .badge, .local-label, .count-pill) { font-variant-numeric: tabular-nums; }
html:root .tool-grid { gap: 16px; }
html:root .tool-card { padding: 20px; }
html:root .tool-card:hover { border-color: var(--client-input-edge); }
html:root .settings-home { max-width: 1120px; }
html:root .settings-profile { padding: 6px 0 24px; }
html:root .settings-profile img { width: 52px; height: 52px; border-radius: 16px; box-shadow: var(--client-depth); }
html:root .settings-profile h1 { font-size: 23px; }
html:root .settings-menu-row { min-height: 68px; }
html:root .settings-menu-icon { background: var(--client-selected); }
html:root .detail-dialog { background: var(--client-raised); border: 1px solid var(--client-edge); border-radius: 20px; box-shadow: var(--client-floating-depth); }
html:root .detail-header { background: var(--client-raised); padding: 20px 24px; }
html:root .detail-header h2 { font-size: 20px; }
html:root .detail-section { padding: 20px 24px; }
html:root .detail-body { padding: 20px 24px; }
html:root :is(.filter-options, .toast, .group-create-dialog) { background: var(--client-raised); border: 1px solid var(--client-edge); box-shadow: var(--client-floating-depth); }
html:root .toast { font-size: 14px; border-radius: 14px; }
html:root .group-workspace { width: 100%; max-width: none; margin: 0; grid-template-columns: 304px minmax(0, 1fr); border: 1px solid var(--client-edge); border-radius: 20px; background: var(--client-surface); box-shadow: var(--client-depth); }
html:root .group-list { padding: 0; background: rgba(248, 252, 255, .88); border-color: var(--line-soft); }
html:root[data-theme="dark"] .group-list { background: var(--op-rail); }
html:root .group-list-head { padding: 24px 20px 16px; align-items: center; }
html:root .group-list-head h1 { font-size: 24px; }
html:root .group-list-head p { font-size: 13px; line-height: 1.65; margin-top: 5px; }
html:root .group-new { width: 44px; min-height: 44px; height: 44px; border-radius: 11px; background: var(--client-raised); border: 1px solid var(--client-edge); box-shadow: var(--client-depth); }
html:root .group-search { margin: 0 16px 16px; padding: 0 12px; height: 44px; background: var(--client-raised); border: 1px solid var(--line-soft); border-radius: 10px; }
html:root .group-search input { font-size: 14px; }
html:root .group-list-items { padding: 0 10px 16px; }
html:root .group-list-item { min-height: 76px; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: 11px; }
html:root .group-list-item:hover { background: var(--client-hover); }
html:root .group-list-item.selected { background: var(--client-selected); border-color: var(--client-edge); box-shadow: inset 0 1px 0 var(--lg-highlight); }
html:root .group-monogram { width: 32px; height: 36px; flex-basis: 32px; border-radius: 10px; font-size: 16px; background: var(--client-raised); border: 1px solid var(--client-edge); }
html:root .group-list-copy { gap: 4px; }
html:root .group-list-copy strong { font-size: 15px; font-weight: 600; line-height: 1.5; }
html:root .group-list-copy small { margin-top: 0; font-size: 12px; line-height: 1.5; }
html:root .group-list-item > .icon { width: 13px; height: 13px; color: var(--client-muted); }
html:root .group-list-foot { padding: 10px 16px; font-size: 12px; border-color: var(--line-soft); }
html:root .group-room { min-width: 0; background: var(--client-surface); }
html:root .group-room-head { padding: 16px 24px 8px; align-items: center; background: var(--client-surface); border-color: var(--line-soft); }
html:root .group-room-title h2 { font-size: 24px; font-weight: 600; line-height: 1.4; }
html:root .group-room-title p { font-size: 13px; margin-top: 4px; }
html:root .group-live-label { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 7px; font-size: 12px; white-space: nowrap; }
html:root .group-overview-toggle { width: 44px; height: 44px; min-height: 44px; background: transparent; border: 1px solid transparent; }
html:root .group-overview-toggle[aria-expanded="true"] { background: var(--client-selected); border-color: var(--client-edge); }
html:root .group-room-tabs { padding: 0 24px; gap: 24px; background: transparent; border-color: var(--line-soft); }
html:root .group-room-tabs button { min-height: 44px; font-size: 14px; padding: 6px 0 10px; }
html:root .group-room-tabs button[aria-selected="true"] { color: var(--action); border-color: var(--action); background: transparent; }
html:root .group-topic { padding: 10px 24px 8px; gap: 8px; font-size: 13px; }
html:root .group-topic .button { min-height: 44px; padding: 4px 7px; font-size: 13px; }
html:root .group-process summary { min-height: 44px; }
html:root .group-process-steps { border-color: var(--line-soft); }
html:root .group-conversation-stage { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; min-width: 0; position: relative; overflow: hidden; }
html:root .group-conversation-stage.has-overview { grid-template-columns: minmax(0, 1fr) 336px; gap: 8px; }
html:root .group-conversation-stage.has-reader { grid-template-columns: minmax(0, 1fr) minmax(320px, 52%); }
html:root .group-conversation-stage.has-reader .group-overview { height: calc(100% - 16px); max-height: calc(100% - 16px); }
html:root .group-message-flow { min-height: 0; min-width: 0; padding: 18px 24px 26px; overscroll-behavior: contain; scroll-padding-bottom: 20px; }
html:root .group-message { max-width: var(--client-reading-width); margin: 0 auto 24px; gap: 12px; }
html:root .group-message-main { max-width: min(calc(100% - 48px), 82ch); }
html:root .group-message-avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 14px; border-radius: 10px; border: 1px solid var(--client-edge); }
html:root .group-message-meta { margin-bottom: 7px; font-size: 12px; color: var(--client-muted); }
html:root .group-message-meta strong { font-size: 14px; font-weight: 550; }
html:root .group-message-bubble { padding: 12px 15px; border-radius: 4px 14px 14px 14px; background: var(--group-bubble); border: 1px solid var(--line-soft); box-shadow: inset 0 1px 0 var(--lg-highlight); font-size: 16px; line-height: 1.8; }
html:root .group-message.user .group-message-bubble { background: var(--group-own-bubble); border-color: var(--client-edge); }
html:root .group-message-model, html:root .group-message-link { font-size: 12px; }
html:root .group-message-link { min-height: 44px; }
html:root .group-long-message > summary { font-size: 14px; }
html:root .group-long-message > summary b { font-size: 13px; }
html:root .group-system-events { max-width: var(--client-reading-width); margin: 0 auto 18px; }
html:root .group-system-events summary { font-size: 12px; min-height: 44px; }
html:root .group-composer-wrap { padding: 8px 24px 10px; background: transparent; border: 0; }
html:root .group-composer, html:root .group-keyboard-hint { width: 100%; max-width: var(--client-reading-width); margin-right: auto; margin-left: auto; }
html:root .group-composer { padding: 12px 14px 9px; border: 1px solid var(--client-input-edge); border-radius: 18px; background: var(--op-compose); box-shadow: 0 0 0 3px rgba(152, 180, 198, .1), var(--client-depth); }
html:root .group-composer:focus-within { outline: none; border-color: var(--client-input-focus); box-shadow: 0 0 0 3px rgba(117, 150, 173, .19), var(--client-depth); }
html:root .group-composer.group-drop-active { border: 2px dashed var(--action); background: var(--client-selected); }
html:root .group-composer textarea { padding: 1px 2px 8px; min-height: 58px; max-height: 132px; font-size: 16px; line-height: 1.65; }
html:root .group-composer-bottom { gap: 6px; align-items: center; }
html:root .group-attach-trigger { width: 44px; height: 44px; min-height: 44px; border-radius: 50%; background: transparent; color: var(--ink); }
html:root .group-attach-trigger:hover { background: var(--client-hover); }
html:root .group-add-menu { position: relative; flex: 0 0 44px; align-self: flex-start; }
html:root .group-add-menu > summary { display: grid; place-items: center; cursor: pointer; list-style: none; font-size: 23px; }
html:root .group-add-menu > summary::-webkit-details-marker { display: none; }
html:root .group-add-menu[open] > summary { color: var(--action); background: var(--client-selected); }
html:root .group-add-options { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 30; width: 224px; max-height: min(240px, 50dvh); padding: 6px; overflow: auto; background: var(--client-raised); border: 1px solid var(--client-edge); border-radius: 14px; box-shadow: var(--client-floating-depth); }
html:root .group-add-options > button { display: flex; gap: 10px; width: 100%; padding: 10px; min-height: 48px; align-items: center; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 9px; }
html:root .group-add-options > button:hover:not(:disabled) { background: var(--client-hover); }
html:root .group-add-options > button > .icon { width: 17px; height: 17px; flex-shrink: 0; }
html:root .group-add-options > button > span { font-size: 14px; line-height: 1.6; }
html:root .group-add-options small { display: block; font-size: 12px; color: var(--client-muted); }
html:root #group-execution-controls { flex: 1 1 auto; min-width: 0; }
html:root .group-execution { gap: 5px 8px; margin: 0; }
html:root .group-execution select { max-width: min(330px, 100%); min-height: 44px; padding: 8px 12px; border-radius: 9px; background: var(--client-hover); border-color: transparent; font-size: 13px; }
html:root .group-execution select:focus-visible { outline-offset: 1px; }
html:root .group-execution-details { margin: 3px 0 0; }
html:root .group-execution-details > summary { min-height: 44px; font-size: 12px; }
html:root .group-execution-details[open] { padding: 0 10px 8px; border-color: var(--client-edge); }
html:root .group-reasoning-badge { padding: 3px 6px; font-size: 12px; border-radius: 9px; background: var(--client-selected); }
html:root .group-cloud-consent { font-size: 12px; line-height: 1.65; padding: 5px 0 0; margin: 0; }
html:root .group-cloud-consent input { width: 20px; height: 20px; flex-basis: 20px; }
html:root #group-message-count { font-size: 12px; color: var(--client-muted); white-space: nowrap; }
html:root #group-message-send { width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 44px; border-radius: 50%; font-size: 0; }
html:root #group-message-send .icon { width: 17px; height: 17px; margin-left: 2px; }
html:root #group-message-send:disabled { background: var(--paper-soft); color: var(--client-muted); border-color: var(--line-soft); opacity: 1; }
html:root .group-keyboard-hint { margin-top: 7px; font-size: 12px; color: var(--client-muted); text-align: right; }
html:root .group-sent-file, html:root .group-file-chip { border-radius: 11px; background: var(--client-raised); border-color: var(--client-edge); box-shadow: var(--client-depth); }
html:root .group-file-copy strong { font-size: 14px; }
html:root .group-file-actions .button { min-height: 44px; }
html:root .group-file-copy small, html:root .group-attachment-delivery { font-size: 12px; }
html:root .group-overview { min-width: 0; align-self: start; max-height: min(380px, 100%); display: flex; flex-direction: column; margin: 8px 16px 16px 0; border: 1px solid var(--client-edge); border-radius: 18px; background: var(--client-raised); box-shadow: var(--client-floating-depth); overflow: hidden; }
html:root .group-overview-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 8px 16px; border-bottom: 1px solid var(--line-soft); }
html:root .group-overview-head > strong { font-size: 14px; font-weight: 600; }
html:root .group-overview-head .icon-button { width: 44px; height: 44px; min-height: 44px; background: transparent; }
html:root .group-overview-scroll, html:root .group-overview-reader { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 16px 14px; scrollbar-width: thin; }
html:root .group-overview-project { padding: 12px 0; }
html:root .group-overview-project > strong { display: block; font-size: 14px; font-weight: 550; overflow-wrap: anywhere; }
html:root .group-overview-project > span { display: block; font-size: 12px; margin-top: 5px; color: var(--client-muted); }
html:root .group-overview-scroll > section { border-top: 1px solid var(--line-soft); padding: 12px 0; }
html:root .group-overview h3 { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 550; line-height: 1.7; margin: 0 0 8px; }
html:root .group-overview h3 small { font-size: 12px; font-weight: 400; color: var(--client-muted); }
html:root .group-overview-file { display: flex; width: 100%; gap: 8px; align-items: flex-start; padding: 9px 0; border: 0; border-radius: 7px; background: transparent; text-align: left; color: var(--ink); }
html:root .group-overview-file:hover { background: var(--client-hover); }
html:root .group-overview-file > span { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 13px; }
html:root .group-overview-file > span > small { display: block; font-size: 12px; line-height: 1.6; margin-top: 3px; color: var(--client-muted); }
html:root .group-overview-file > .icon { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; }
html:root .group-overview-file > .icon:last-child { width: 12px; color: var(--client-muted); }
html:root .group-overview-empty { font-size: 13px; line-height: 1.8; color: var(--client-muted); padding: 4px 0; }
html:root .group-overview-all { width: 100%; min-height: 44px; display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; font-size: 12px; text-align: left; color: var(--action); background: transparent; border: 0; border-radius: 7px; }
html:root .group-overview-all .icon { width: 13px; height: 13px; }
html:root .group-overview-member { margin: 8px 0; }
html:root .group-overview-member > span { display: block; font-size: 13px; }
html:root .group-overview-member > small { display: block; font-size: 12px; color: var(--client-muted); overflow-wrap: anywhere; }
html:root .group-overview-back { padding-left: 0; margin: 8px 0; font-size: 12px; }
html:root .group-overview-reader { padding-bottom: 16px; }
html:root .group-overview-reader .group-artifact-content { font-size: 14px; line-height: 1.8; max-height: none; overflow: visible; }
html:root .group-artifact-reading-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 12px; }
html:root .group-artifact-reading-tools .button { min-height: 44px; font-size: 12px; }
html:root .group-artifact-reading-tools small { font-size: 12px; color: var(--client-muted); }
html:root .group-artifact-raw { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
html:root .group-overview-integrity { margin-top: 12px; color: var(--client-muted); font-size: 12px; }
html:root .group-overview-integrity summary { min-height: 44px; cursor: pointer; }
html:root .group-overview-integrity code { overflow-wrap: anywhere; line-height: 1.8; }
html:root .group-rounds, html:root .group-member-panel { padding: 24px; }
html:root .group-rounds > h3, html:root .group-member-panel > h3 { font-size: 18px; }
html:root .group-artifact { border-radius: 14px; background: var(--client-surface); border-color: var(--client-edge); box-shadow: var(--client-depth); }
html:root .group-artifact > summary { min-height: 52px; }
html:root .group-create-dialog { border-radius: 20px; }
html:root .group-create-dialog header h2 { font-size: 20px; }
html:root .group-owner-summary { border-radius: 14px; background: var(--client-selected); }
html:root .knowledge-workspace { border-radius: 20px; border-color: var(--client-edge); box-shadow: var(--client-depth); }
html:root .knowledge-sources { background: var(--op-rail); }
html:root .knowledge-reader { background: var(--client-surface); }
html:root .knowledge-result.selected { background: var(--client-selected); border-color: var(--client-edge); }
html:root .knowledge-reader > header { background: var(--client-raised); border-color: var(--line-soft); }
html:root .knowledge-result { border-radius: 11px; }
html:root .knowledge-body { max-width: 80ch; margin: 0 auto; }
html:root .nav-cockpit small { display: block; margin-top: 3px; color: var(--client-muted); font-size: 12px; font-weight: 400; }
html:root .nav-cockpit.unavailable { color: var(--client-muted); opacity: .72; cursor: default; }
@media (min-width: 801px) and (max-width: 1279px) {
  html:root .app-shell { grid-template-columns: 84px minmax(0, 1fr); }
  html:root .sidebar { padding: 24px 10px 16px; background: var(--op-rail); overflow-x: hidden; }
  html:root .brand { flex-direction: column; align-items: center; gap: 6px; padding: 0; }
  html:root .brand-mark { width: 42px; height: 42px; border-radius: 13px; box-shadow: var(--client-depth); }
  html:root .brand strong { font-size: 12px; line-height: 1.4; letter-spacing: 0; white-space: nowrap; }
  html:root .brand small { display: none; }
  html:root .workspace-label { margin: 18px 0; justify-content: center; }
  html:root .workspace-label > span:not(.workspace-dot):not(.local-label) { display: none; }
  html:root .workspace-label .local-label { font-size: 12px; padding: 2px 4px; }
  html:root .nav-list { gap: 8px; }
  html:root .nav-link { min-height: 58px; padding: 9px 2px; display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 12px; border-radius: 12px; }
  html:root .nav-link .icon { width: 21px; height: 21px; }
  html:root .nav-link.active { background: var(--client-selected); box-shadow: inset 0 1px 0 var(--lg-highlight); }
  html:root .sidebar-install { margin-top: 18px; }
  html:root .sidebar-install .button { font-size: 12px; padding: 6px; justify-content: center; }
  html:root .sidebar-install :is(p, details) { display: none; }
  html:root .sidebar-bottom { padding: 18px 0 0; }
  html:root .sidebar-help { font-size: 12px; min-height: 40px; margin: 0 0 8px; justify-content: center; text-align: center; }
  html:root .sidebar-help > span:last-child { display: none; }
  html:root .connection-line { justify-content: center; padding: 0 4px; }
  html:root .connection-line > span:last-child, html:root .build-label { display: none; }
  html:root .connection-line .status-dot { width: 6px; height: 6px; }
  html:root .nav-cockpit { margin-top: 8px; }
  html:root .page-footer { font-size: 12px; padding-top: 14px; }
}
@media (min-width: 801px) and (max-width: 1279px) {
  html:root main { padding: 14px 16px 10px; }
  html:root .topbar { padding: 0 16px; }
  html:root .group-workspace { grid-template-columns: 260px minmax(0, 1fr); }
  html:root .group-conversation-stage.has-overview, html:root .group-conversation-stage.has-reader { grid-template-columns: minmax(0, 1fr); }
  html:root .group-conversation-stage.has-overview > .group-message-flow { display: none; }
  html:root .group-overview { width: min(calc(100% - 32px), 760px); max-height: calc(100% - 16px); margin: 8px auto; }
  html:root .group-overview-reader { padding-right: 20px; padding-left: 20px; }
  html:root .group-room-head { padding-right: 16px; padding-left: 16px; }
  html:root .group-room-tabs { padding-right: 16px; padding-left: 16px; }
  html:root .group-message-flow { padding-right: 16px; padding-left: 16px; }
  html:root .group-composer-wrap { padding-right: 16px; padding-left: 16px; }
}
@media (max-width: 800px) {
  html:root main { padding: 0 0 calc(64px + env(safe-area-inset-bottom)); min-height: calc(100dvh - 56px); }
  html:root .topbar { height: 56px; padding: 0 16px; }
  html:root .group-workspace { display: flex; border: 0; border-radius: 0; box-shadow: none; }
  html:root .group-workspace.show-group-list { display: block; }
  html:root .group-list { width: 100%; }
  html:root .group-room { width: 100%; }
  html:root .group-conversation-stage.has-overview, html:root .group-conversation-stage.has-reader { grid-template-columns: minmax(0, 1fr); }
  html:root .group-conversation-stage.has-overview > .group-message-flow { display: none; }
  html:root .group-overview { width: calc(100% - 24px); max-height: calc(100% - 12px); margin: 6px 12px; border-radius: 16px; }
  html:root .group-room-head { padding: 12px 16px 8px; }
  html:root .group-room-title h2 { font-size: 17px; }
  html:root .group-room-title p { font-size: 12px; }
  html:root .group-room-tabs { padding: 0 16px; gap: 22px; }
  html:root .group-topic { padding: 8px 16px 4px; }
  html:root .group-message-flow { padding: 16px 12px; }
  html:root .group-message { gap: 8px; margin-bottom: 22px; }
  html:root .group-message-avatar { width: 28px; height: 30px; flex-basis: 28px; }
  html:root .group-message-main { max-width: calc(100% - 36px); }
  html:root .group-message-bubble { font-size: 16px; padding: 11px 13px; }
  html:root .group-composer-wrap { padding: 6px 12px 10px; }
  html:root .group-composer { padding: 10px 11px 8px; border-radius: 17px; box-shadow: 0 0 0 2px rgba(152, 180, 198, .1), var(--client-depth); }
  html:root .group-execution select { max-width: 100%; font-size: 13px; }
  html:root .group-composer textarea { min-height: 52px; font-size: 16px; }
  html:root .group-keyboard-hint { display: none; }
  html:root .group-cloud-consent { font-size: 12px; }
  html:root .group-rounds, html:root .group-member-panel { padding: 20px 16px; }
  html:root .app-bottom-nav { background: var(--op-shell); border-color: var(--client-edge); box-shadow: 0 -4px 20px rgba(43, 81, 112, .05); }
  html:root .app-bottom-nav .nav-link { min-height: 52px; }
  html:root .page-heading, html:root .settings-home, html:root .knowledge-workspace { margin: 16px; }
  html:root .page-heading { display: flex; flex-wrap: wrap; }
  html:root .page-heading h1 { font-size: 22px; }
  html:root .detail-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  html:root .detail-header { padding: 16px; }
  html:root .detail-section, html:root .detail-body { padding: 16px; }
}
html:root .group-short-viewport .group-composer textarea { min-height: 40px; }
html:root .group-short-viewport .group-keyboard-hint { display: none; }

/* The conversation is the working surface, not a centered page preview.
   At 1920: 208 navigation + 48 outer gutters + 304 groups + 1360 room.
   Header, messages, notices and composer share a bounded 1120px reading axis.
   The 4px rhythm keeps controls dense while text remains 16px / metadata 12px. */
html:root .app-content, html:root #view { min-width: 0; }
html:root .global-search input { font-size: 14px; }
html:root .breadcrumb { font-size: 16px; }
html:root .group-room-head, html:root .group-room-tabs { flex-shrink: 0; }
html:root .group-room-head { padding-top: 20px; padding-bottom: 12px; }
html:root .group-room-tabs { gap: 28px; }
html:root .group-list-foot, html:root .connection-line, html:root .build-label { font-size: 12px; }
html:root .group-room-title p, html:root .group-list-head p { font-size: 13px; }
html:root .group-message-meta { font-size: 12px; }
html:root .group-message-meta strong { font-size: 14px; }
html:root .group-message-model, html:root .group-keyboard-hint { font-size: 12px; line-height: 1.6; }
html:root .group-system-events { font-size: 14px; line-height: 1.65; }
html:root .group-system-events time { font-size: 12px; }
html:root .group-system-events li { padding-block: 8px; }
html:root .group-system-events ol {
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-inline: 24px 12px;
  margin-top: 8px;
}
html:root .group-system-events ol:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html:root .group-turn-issue {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: calc(100% - 48px);
  max-width: var(--client-reading-width);
  max-height: min(160px, 20dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 auto 8px;
  padding: 8px 16px;
  border: 1px solid var(--client-edge);
  border-inline-start: 3px solid var(--attention);
  border-radius: 12px;
  background: var(--client-hover);
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
html:root .group-turn-issue > .icon { width: 20px; height: 20px; margin-top: 4px; color: var(--attention); }
html:root .group-turn-issue > :not(.icon) { min-width: 0; }
html:root .group-turn-issue strong { color: var(--ink); font-size: 14px; font-weight: 600; }
html:root .group-turn-issue p { margin: 4px 0; }
html:root .group-turn-issue :is(button, a) { min-height: 44px; font-size: 13px; }
html:root .group-turn-issue .button { align-self: flex-start; flex-shrink: 0; }
html:root .group-overview-toggle { width: auto; min-width: 88px; height: 44px; padding: 8px 12px; gap: 8px; font-size: 14px; }
html:root .group-markdown :is(p, li) { line-height: 1.75; }
html:root .group-markdown h4 { font-size: 18px; }
html:root .group-artifact-content, html:root .group-overview-reader .group-artifact-content { font-size: 16px; line-height: 1.75; }
html:root .group-artifact-hash { font-size: 12px !important; }
html:root .group-artifact-hash code { font-size: 12px; }
html:root .group-rounds, html:root .group-member-panel { font-size: 16px; }
html:root .group-turn p, html:root .group-help, html:root .group-section-description { font-size: 14px; }
html:root .group-person-copy strong { font-size: 16px; }
html:root .group-person-copy small { font-size: 12px; }
html:root #group-compose-messages { width: 100%; max-width: var(--client-reading-width); margin-inline: auto; }
html:root #group-message-form { padding: 16px; gap: 8px; }
html:root #group-message-form > #group-message { min-height: 64px; font-size: 16px; }
html:root #group-message-form .group-composer-bottom { gap: 8px; }
html:root #group-message-form .group-execution select { min-height: 44px; max-width: 380px; font-size: 14px; }
html:root #group-message-form .group-reasoning-badge, html:root #group-message-form .group-plan-fixed { font-size: 12px; }
html:root #group-message-form .group-execution-details > summary { font-size: 14px; }
html:root #group-message-form .group-cloud-consent { font-size: 12px; line-height: 1.65; gap: 12px; padding-top: 8px; }
html:root #group-message-form #group-message-count { font-size: 12px; }
html:root #group-message-form #group-message-send { min-width: 84px; width: auto; height: 44px; min-height: 44px; padding: 0 12px; font-size: 14px; gap: 6px; border-radius: 12px; }
html:root #group-message-form .group-add-menu { width: 44px; }
html:root .group-file-copy small, html:root .group-attachment-note, html:root .group-attachment-tools small { font-size: 12px; }
html:root .group-attachment-drafts { margin-block: 0 8px; max-height: min(200px, 24dvh); }
html:root .group-attachment-drafts > li { padding-block: 8px; gap: 12px; }
html:root .group-file-actions :is(.button, .icon-button) { min-width: 44px; min-height: 44px; font-size: 12px; }
html:root .group-file-actions { gap: 8px; }
html:root .group-attachment-delivery, html:root .group-input-note { font-size: 12px; }
html:root #group-topic-summary { font-size: 13px; }
html:root .group-process-steps > li { font-size: 13px; }
html:root .group-process-steps time { font-size: 12px; }
html:root .group-short-viewport .group-attachment-note,
html:root .group-short-viewport .group-attachment-tools small { display: block; }
html:root .group-short-viewport .group-plan-fixed { display: inline; }
@media (min-width: 801px) {
  html:root .group-room-head, html:root .group-room-tabs, html:root .group-topic {
    padding-inline: max(var(--client-room-gutter), calc((100% - var(--client-reading-width)) / 2));
  }
  html:root .group-message-flow, html:root .group-composer-wrap { padding-inline: var(--client-room-gutter); }
  html:root .group-overview { max-height: calc(100% - 24px); }
}
@media (min-width: 1280px) {
  html:root .app-shell { grid-template-columns: 208px minmax(0, 1fr); }
  html:root .sidebar { padding: 24px 16px 20px; background: var(--op-rail); }
  html:root .brand { padding: 0; gap: 10px; align-items: center; }
  html:root .brand-mark { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; }
  html:root .brand-copy { min-width: 0; }
  html:root .brand strong { font-size: 16px; letter-spacing: -.02em; }
  html:root .brand small { font-size: 12px; line-height: 1.6; }
  html:root .workspace-label { margin: 28px 0 16px; gap: 6px; font-size: 12px; }
  html:root .local-label { font-size: 12px; }
  html:root .nav-link { min-height: 48px; padding: 12px; gap: 12px; font-size: 15px; }
  html:root .nav-link .icon { width: 20px; height: 20px; }
  html:root .sidebar-help { font-size: 13px; }
  html:root .sidebar-bottom { padding: 20px 0 0; }
  html:root .nav-cockpit small { font-size: 12px; }
  html:root .sidebar-install :is(p, details) { font-size: 12px; }
}
@media (min-width: 1600px) {
  html:root .group-attachment-drafts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
  html:root .group-attachment-drafts > li { align-items: flex-start; padding: 8px; border: 1px solid var(--client-edge); border-radius: 12px; }
  html:root .group-attachment-drafts .group-file-actions { flex-wrap: wrap; flex: 0 0 44px; }
  html:root .group-attachment-drafts .group-file-actions .button { padding-inline: 8px; }
}
@media (max-width: 800px) {
  html:root body.group-room-open main { min-height: 0; padding: 0; margin: 0; }
  html:root .group-list-head { padding: 20px 16px 16px; }
  html:root .group-list-copy strong { font-size: 16px; }
  html:root .group-search input, html:root .search-field input { font-size: 16px; }
  html:root .group-room-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 88px; gap: 4px 8px; padding: 12px; }
  html:root .group-mobile-back { grid-column: 1; grid-row: 1; }
  html:root .group-room-title { grid-column: 2; grid-row: 1; }
  html:root .group-overview-toggle { grid-column: 3; grid-row: 1; }
  html:root .group-live-label { grid-column: 2; grid-row: 2; justify-self: start; }
  html:root .group-room-title h2 { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 20px; }
  html:root .group-room-title p { display: block; font-size: 12px; }
  html:root .group-topic { font-size: 12px; }
  html:root .group-topic > span:last-child { display: inline; }
  html:root .group-turn-issue { width: calc(100% - 24px); padding-inline: 12px; flex-wrap: wrap; }
  html:root .group-message-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  html:root .group-message-main { max-width: calc(100% - 40px); }
  html:root .group-message-bubble { font-size: 16px; line-height: 1.75; }
  html:root .group-composer-wrap { padding-inline: 12px; }
  html:root #group-message-form { padding: 12px; }
  html:root #group-message-form .group-execution select { font-size: 16px; max-width: 100%; }
  html:root #group-message-form .group-cloud-consent { font-size: 12px; }
  html:root .group-attachment-drafts { max-height: min(160px, 22dvh); }
  html:root .group-file-copy strong { font-size: 14px; }
  html:root .detail-section, html:root .detail-body { font-size: 16px; }
}
@media (max-width: 480px) {
  html:root #group-message-form .group-execution { grid-column: 1 / -1; grid-row: 1; justify-content: stretch; }
  html:root #group-message-form .group-execution select { flex-basis: 150px; }
  html:root #group-message-form .group-add-menu { grid-column: 1; grid-row: 2; }
  html:root #group-message-form #group-message-send { grid-column: 3; grid-row: 2; }
  html:root #group-message-form .group-execution-details { grid-column: 2; grid-row: 2; }
  html:root #group-message-form #group-message-count { grid-column: 2 / -1; grid-row: 3; }
  html:root #group-message-form .group-cloud-consent { grid-row: 4; }
  html:root #group-message-form .group-execution-details[open] { grid-column: 1 / -1; grid-row: 5; }
}

html:root .sidebar-utilities { margin-top: auto; }
html:root .sidebar-utilities > summary { display: none; }

/* Single-sidebar conversation shell. The controller mounts the existing list
   once; other routes keep their shell. Short windows reflow rather than clip. */
html:root body.group-shell-active { --client-reading-width: 840px; --client-room-gutter: 28px; }
html:root .group-shell-active .app-shell { grid-template-columns: 260px minmax(0, 1fr); height: 100dvh; min-height: 0; overflow: hidden; }
html:root .group-shell-active .sidebar { position: relative; top: auto; display: flex; height: 100%; min-height: 0; padding: 12px; overflow-y: auto; background: var(--op-rail); }
html:root .group-shell-active .brand { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 4px; }
html:root .group-shell-active .brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
html:root .group-shell-active .brand strong { font-size: 16px; line-height: 1.5; }
html:root .group-shell-active .brand small { display: none; margin-top: 0; font-size: 12px; line-height: 1.5; }
html:root .group-shell-active .workspace-label { display: none; justify-content: flex-start; gap: 6px; margin: 16px 8px 10px; font-size: 12px; }
html:root .group-shell-active .workspace-label .workspace-name { display: inline; }
html:root .group-shell-active .local-label { margin-left: auto; font-size: 12px; }
html:root .group-shell-active #desktop-nav { gap: 2px; flex: 0 0 auto; margin-top: 8px; }
html:root .group-shell-active .nav-link { flex-direction: row; justify-content: flex-start; min-height: 38px; padding: 6px 12px; gap: 10px; font-size: 14px; }
html:root .group-shell-active .nav-link .icon { width: 19px; height: 19px; }
html:root .group-shell-active .nav-cockpit { margin-top: 2px; }
html:root .group-shell-active .nav-cockpit small { display: inline; margin-left: 6px; font-size: 12px; }
html:root .group-shell-active .group-sidebar-slot { display: flex; flex: 1; min-height: 220px; margin-top: 8px; border-top: 1px solid var(--client-edge); }
html:root .group-shell-active .group-sidebar-slot > .group-list { position: static; display: flex; flex: 1; width: 100%; max-height: none; min-height: 0; padding: 0; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:root .group-shell-active .group-list-head { flex-shrink: 0; min-height: 44px; padding: 0 4px; gap: 8px; }
html:root .group-shell-active .group-list-head h1 { font-size: 14px; line-height: 1.5; letter-spacing: 0; }
html:root .group-shell-active .group-list-head p { display: none; font-size: 12px; margin-top: 2px; line-height: 1.5; }
html:root .group-shell-active .group-new { background: transparent; box-shadow: none; border-color: transparent; }
html:root .group-shell-active .group-search { flex-shrink: 0; margin: 0 4px 6px; height: 44px; min-height: 44px; }
html:root .group-shell-active .group-list-items { padding: 0 0 8px; scrollbar-gutter: stable; }
html:root .group-shell-active .group-list-item { min-height: 64px; padding: 10px 8px; gap: 8px; }
html:root .group-shell-active .group-list-copy strong { font-size: 14px; }
html:root .group-shell-active .group-list-copy small { font-size: 12px; }
html:root .group-shell-active .group-monogram { width: 30px; height: 34px; flex-basis: 30px; font-size: 14px; }
html:root .group-shell-active .group-list-foot { flex-shrink: 0; padding: 2px 8px; font-size: 12px; }
html:root .group-shell-active .sidebar-utilities { flex: 0 0 auto; min-width: 0; margin-top: 4px; border-top: 1px solid var(--client-edge); }
html:root .group-shell-active .sidebar-utilities > summary { display: flex; align-items: center; min-height: 44px; padding: 6px 8px; list-style: none; cursor: pointer; color: var(--client-muted); font-size: 12px; }
html:root .group-shell-active .sidebar-utilities > summary::-webkit-details-marker { display: none; }
html:root .group-shell-active .sidebar-utilities > summary::after { content: '⌄'; margin-left: auto; font-size: 16px; }
html:root .group-shell-active .sidebar-utilities[open] > summary::after { transform: rotate(180deg); }
html:root .group-shell-active .sidebar-utilities > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; }
html:root .group-shell-active .sidebar-install { flex: 0 0 auto; margin-top: 8px; }
html:root .group-shell-active .sidebar-install .button { justify-content: flex-start; min-height: 44px; font-size: 13px; }
html:root .group-shell-active .sidebar-install :is(p, details) { display: block; font-size: 12px; }
html:root .group-shell-active .sidebar-bottom { flex: 0 0 auto; margin: 8px 0 0; padding: 0 4px; }
html:root .group-shell-active .sidebar-help { justify-content: space-between; min-height: 44px; margin: 0; font-size: 12px; text-align: left; }
html:root .group-shell-active .sidebar-help > span:last-child { display: inline; }
html:root .group-shell-active .connection-line { justify-content: flex-start; padding: 0; font-size: 12px; }
html:root .group-shell-active .connection-line > span:last-child { display: inline; }
html:root .group-shell-active .build-label { display: block; font-size: 12px; }
html:root .group-shell-active.group-sidebar-collapsed .app-shell { grid-template-columns: minmax(0, 1fr); }
html:root .group-shell-active.group-sidebar-collapsed .sidebar { display: none; }
html:root .group-shell-active .app-content { display: flex; flex-direction: column; min-height: 0; height: 100%; }
html:root .group-shell-active .topbar { position: relative; flex: 0 0 56px; min-height: 56px; padding-inline: 20px; gap: 10px; }
html:root .group-shell-active .topbar .breadcrumb { flex: 1; min-width: 0; margin-right: 0; font-size: 17px; }
html:root .group-shell-active #breadcrumb-current { display: block; white-space: nowrap; }
html:root .group-shell-active .topbar .global-search { display: flex; width: min(260px, 28vw); min-width: 180px; flex-shrink: 0; }
html:root .group-shell-active .topbar .global-search input { font-size: 13px; }
html:root .group-shell-active .group-shell-toggle { flex: 0 0 44px; }
html:root .group-shell-active main { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
html:root .group-shell-active #connection-banner { flex: 0 0 auto; }
html:root .group-shell-active #view { display: flex; flex: 1; min-height: 0; }
html:root .group-shell-active .page-footer { display: none; }
html:root .group-shell-active .group-workspace { display: flex; flex: 1; grid-template-columns: minmax(0, 1fr); width: 100%; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; background: var(--client-porcelain); box-shadow: none; overflow: hidden; }
html:root .group-shell-active .group-room,
html:root .group-shell-active .group-room:has(.group-conversation-stage) { display: flex; flex: 1; width: 100%; min-height: 0; overflow: hidden; scrollbar-gutter: auto; background: transparent; }
html:root .group-shell-active .group-room-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; min-height: 56px; padding: 4px var(--client-room-gutter); border-bottom: 1px solid var(--line-soft); background: transparent; }
html:root .group-shell-active .group-room-tabs { flex: 0 0 auto; gap: 16px; padding: 0; border: 0; }
html:root .group-shell-active .group-room-tabs button { flex: none; min-width: 44px; min-height: 44px; padding: 0 4px; font-size: 14px; }
html:root .group-shell-active .group-room-head { display: flex; flex: 1; min-width: 0; min-height: 44px; padding: 0; gap: 8px; background: transparent; border: 0; }
html:root .group-shell-active .group-room-title { flex: 1; min-width: 0; }
html:root .group-shell-active .group-room-title h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:root .group-shell-active .group-room-title p { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.5; }
html:root .group-shell-active .group-live-label { font-size: 12px; }
html:root .group-shell-active .group-overview-toggle { flex: 0 0 88px; width: 88px; min-width: 88px; height: 44px; }
html:root .group-shell-active .group-room .group-tab-panel,
html:root .group-shell-active .group-room:has(.group-conversation-stage) .group-tab-panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
html:root .group-shell-active #group-topic-summary { flex: 0 0 auto; padding: 2px max(var(--client-room-gutter), calc((100% - var(--client-reading-width)) / 2)); max-height: 144px; min-height: 44px; overflow-y: auto; }
html:root .group-shell-active .group-turn-issue { width: 100%; max-height: none; gap: 4px 12px; }
html:root .group-shell-active .group-conversation-stage { flex: 1 0 200px; min-height: 200px; height: auto; overflow: hidden; }
html:root .group-shell-active .group-message-flow { min-height: 0; padding: 24px var(--client-room-gutter); overflow-y: auto; scrollbar-gutter: stable; }
html:root .group-shell-active .group-message { width: 100%; max-width: var(--client-reading-width); margin-bottom: 28px; }
html:root .group-shell-active .group-message-main { flex: 1; min-width: 0; max-width: calc(100% - 48px); }
html:root .group-shell-active .group-message:not(.user) .group-message-bubble { padding: 2px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html:root .group-shell-active .group-message.user .group-message-main { flex: 0 1 auto; }
html:root .group-shell-active .group-message-bubble { font-size: 16px; line-height: 1.8; }
html:root .group-shell-active .group-system-events { width: 100%; max-width: var(--client-reading-width); }
html:root .group-shell-active .group-workspace .group-composer-wrap { flex: 0 0 auto; padding: 8px var(--client-room-gutter) 12px; max-height: none; overflow: visible; background: transparent; }
html:root .group-shell-active .group-composer,
html:root .group-shell-active #group-compose-messages,
html:root .group-shell-active .group-keyboard-hint { max-width: var(--client-reading-width); }
html:root .group-shell-active #group-message-form { padding: 8px 12px; gap: 4px; border-radius: 16px; }
html:root .group-shell-active #group-message-form > #group-message { min-height: 44px; max-height: 96px; padding: 4px 2px; font-size: 16px; }
html:root .group-shell-active #group-message-form .group-execution { grid-column: 2; grid-row: 1; justify-content: flex-start; flex-wrap: nowrap; }
html:root .group-shell-active #group-message-form .group-execution select { flex: 1 1 220px; max-width: 380px; font-size: 14px; }
html:root .group-shell-active #group-message-form .group-add-menu { grid-column: 1; grid-row: 1; }
html:root .group-shell-active #group-message-form .group-execution-details { grid-column: 3; grid-row: 1; }
html:root .group-shell-active #group-message-form #group-message-count { grid-column: 4; grid-row: 1; }
html:root .group-shell-active #group-message-form #group-message-send { grid-column: 5; grid-row: 1; }
html:root .group-shell-active #group-message-form .group-cloud-consent { grid-row: 2; min-height: 44px; font-size: 12px; }
html:root .group-shell-active #group-message-form .group-execution-details[open] { grid-column: 1 / -1; grid-row: 3; }
html:root .group-shell-active .group-plan-unavailable { grid-column: 1 / -1; grid-row: 6; min-width: 0; margin: 4px 0; padding: 8px 10px; border: 1px solid var(--client-edge); border-radius: 10px; background: var(--client-hover); color: var(--ink-secondary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
html:root .group-shell-active .group-plan-unavailable a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; color: var(--action); }
html:root .group-shell-active .group-overview { max-height: calc(100% - 16px); }
html:root .group-shell-active .group-rounds,
html:root .group-shell-active .group-member-panel { width: 100%; max-width: calc(var(--client-reading-width) + 56px); margin-inline: auto; padding-inline: var(--client-room-gutter); }

@media (min-width: 801px) and (max-width: 1200px) {
  html:root .group-shell-active .group-conversation-stage.has-overview,
  html:root .group-shell-active .group-conversation-stage.has-reader { grid-template-columns: minmax(0, 1fr); }
  html:root .group-shell-active .group-conversation-stage.has-overview > .group-message-flow { display: none; }
  html:root .group-shell-active .group-overview { width: min(calc(100% - 32px), 840px); margin-inline: auto; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  html:root body.group-shell-active { --client-room-gutter: 20px; }
  html:root .group-shell-active .topbar .global-search { width: 180px; min-width: 180px; }
  html:root .group-shell-active .group-room-toolbar { gap: 8px; }
  html:root .group-shell-active .group-room-tabs { gap: 8px; }
  html:root .group-shell-active #group-message-form .group-composer-bottom { grid-template-columns: 44px minmax(0, 1fr) auto; }
  html:root .group-shell-active #group-message-form .group-execution { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }
  html:root .group-shell-active #group-message-form .group-execution select { max-width: none; }
  html:root .group-shell-active #group-message-form .group-add-menu { grid-column: 1; grid-row: 2; }
  html:root .group-shell-active #group-message-form .group-execution-details { grid-column: 2; grid-row: 2; }
  html:root .group-shell-active #group-message-form #group-message-send { grid-column: 3; grid-row: 2; }
  html:root .group-shell-active #group-message-form #group-message-count { grid-column: 2; grid-row: 3; justify-self: end; }
  html:root .group-shell-active #group-message-form .group-cloud-consent { grid-row: 4; }
  html:root .group-shell-active #group-message-form .group-execution-details[open] { grid-column: 1 / -1; grid-row: 5; }
}
@media (max-width: 800px) {
  html:root body.group-shell-active { --client-room-gutter: 16px; }
  html:root .group-shell-active .nav-link { min-height: 44px; }
  html:root .group-shell-active .app-bottom-nav .nav-link { min-height: 52px; }
  html:root .group-shell-active .app-shell,
  html:root .group-shell-active.group-sidebar-collapsed .app-shell { display: flex; flex-direction: column; height: 100dvh; padding-bottom: var(--app-bottom-height); }
  html:root .group-shell-active .sidebar,
  html:root .group-shell-active.group-sidebar-collapsed .sidebar { display: flex; order: 1; flex: 1; width: 100%; height: auto; padding: 12px 16px; border-right: 0; }
  html:root .group-shell-active .sidebar > .brand { display: none; }
  html:root .group-shell-active .sidebar > .workspace-label { margin: 0 4px 8px; }
  html:root .group-shell-active #desktop-nav { display: none; }
  html:root .group-shell-active .group-sidebar-slot { flex: 1; min-height: 220px; margin-top: 0; border: 0; }
  html:root .group-shell-active .group-list-head { padding-top: 0; }
  html:root .group-shell-active .group-list-head h1 { font-size: 20px; }
  html:root .group-shell-active .group-list-copy strong { font-size: 16px; }
  html:root .group-shell-active .group-search input { font-size: 16px; }
  html:root .group-shell-active .app-content { order: 0; height: auto; flex: 0 0 auto; overflow: visible; }
  html:root .group-shell-active:not(.group-room-open) main { display: none; }
  html:root .group-shell-active .topbar,
  html:root .group-shell-active.group-room-open .topbar { display: flex; min-height: calc(56px + env(safe-area-inset-top, 0px)); height: auto; flex-basis: auto; padding: env(safe-area-inset-top, 0px) 8px 0; gap: 4px; }
  html:root .group-shell-active .topbar .mobile-brand { display: none; }
  html:root .group-shell-active .topbar .global-search { display: none; }
  html:root .group-shell-active .topbar .breadcrumb { font-size: 16px; }
  html:root .group-shell-active.group-room-open .app-shell { padding-bottom: 0; }
  html:root .group-shell-active.group-room-open .sidebar { display: none; }
  html:root .group-shell-active.group-room-open .app-content { flex: 1; min-height: 0; height: 100%; }
  html:root .group-shell-active.group-room-open main { display: flex; padding: 0; min-height: 0; }
  html:root .group-shell-active .group-workspace { width: 100%; }
  html:root .group-shell-active .group-room-toolbar { flex-wrap: wrap; gap: 0; padding: 0 12px 4px; }
  html:root .group-shell-active .group-room-tabs { width: 100%; justify-content: flex-start; gap: 16px; }
  html:root .group-shell-active .group-room-head { width: 100%; flex-basis: 100%; display: flex; gap: 6px; }
  html:root .group-shell-active .group-mobile-back { display: none; }
  html:root .group-shell-active .group-room-title { min-width: 0; }
  html:root .group-shell-active .group-room-title p { white-space: normal; overflow-wrap: anywhere; }
  html:root .group-shell-active .group-room-tabs button { flex: none; }
  html:root .group-shell-active .group-message { gap: 8px; }
  html:root .group-shell-active .group-message-main { max-width: calc(100% - 40px); }
  html:root .group-shell-active .group-message-flow { padding-block: 20px; scrollbar-gutter: auto; }
  html:root .group-shell-active .group-workspace .group-composer-wrap { padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  html:root .group-shell-active #group-message-form .group-composer-bottom { grid-template-columns: 44px minmax(0, 1fr) auto; }
  html:root .group-shell-active #group-message-form .group-execution { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; }
  html:root .group-shell-active #group-message-form .group-execution select { max-width: none; font-size: 16px; }
  html:root .group-shell-active #group-message-form .group-add-menu { grid-column: 1; grid-row: 2; }
  html:root .group-shell-active #group-message-form .group-execution-details { grid-column: 2; grid-row: 2; }
  html:root .group-shell-active #group-message-form #group-message-send { grid-column: 3; grid-row: 2; }
  html:root .group-shell-active #group-message-form #group-message-count { grid-column: 2; grid-row: 3; justify-self: end; }
  html:root .group-shell-active #group-message-form .group-cloud-consent { grid-row: 4; }
  html:root .group-shell-active #group-message-form .group-execution-details[open] { grid-column: 1 / -1; grid-row: 5; }
}
@media (max-height: 659px) {
  html:root .group-shell-active .app-shell,
  html:root .group-shell-active.group-room-open .app-shell { height: auto; min-height: 100dvh; overflow: visible; }
  html:root .group-shell-active .app-content,
  html:root .group-shell-active.group-room-open .app-content { height: auto; min-height: 100dvh; }
  html:root .group-shell-active main,
  html:root .group-shell-active.group-room-open main,
  html:root .group-shell-active #view,
  html:root .group-shell-active .group-workspace,
  html:root .group-shell-active .group-room,
  html:root .group-shell-active .group-room:has(.group-conversation-stage),
  html:root .group-shell-active .group-room .group-tab-panel,
  html:root .group-shell-active .group-room:has(.group-conversation-stage) .group-tab-panel { flex: 0 0 auto; min-height: 0; height: auto; overflow: visible; }
  html:root .group-shell-active .sidebar { position: sticky; top: 0; height: 100dvh; }
  html:root .group-shell-active .group-sidebar-slot > .group-list { position: static; top: auto; max-height: none; }
  html:root .group-shell-active .group-conversation-stage { flex: none; min-height: 240px; height: 240px; }
  html:root .group-shell-active #group-topic-summary { max-height: none; overflow: visible; }
  html:root .group-shell-active .group-composer-wrap { scroll-margin-block: 16px; }
}
@media (max-width: 800px) and (max-height: 659px) {
  html:root .group-shell-active:not(.group-room-open) .app-shell { height: auto; min-height: 100dvh; }
  html:root .group-shell-active:not(.group-room-open) .app-content { min-height: 0; }
  html:root .group-shell-active .sidebar { position: static; height: auto; min-height: calc(100dvh - 56px - var(--app-bottom-height)); overflow: visible; }
  html:root .group-shell-active .group-sidebar-slot { min-height: 320px; }
}

/* Height is a layout input too. Keep the conversation as a readable region.
   If header + status + composer cannot fit, the room scrolls as a whole;
   authorization and send are never clipped to preserve an artificial viewport. */
html:root .group-room:has(.group-conversation-stage) {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
html:root .group-room:has(.group-conversation-stage) .group-tab-panel { flex: 1 0 auto; overflow: visible; }
html:root .group-conversation-stage {
  flex: 1 0 min(28dvh, 200px);
  min-height: min(28dvh, 200px);
  height: min(28dvh, 200px);
}
html:root .group-workspace .group-composer-wrap { max-height: none; overflow: visible; padding-block: 6px 8px; }
html:root .group-composer-wrap:focus-within { scroll-margin-block: 16px; }
html:root #group-message-form { padding: 6px 12px; gap: 4px; }
html:root #group-message-form > #group-message { min-height: 44px; max-height: 64px; }
html:root #group-message-form .group-composer-bottom { gap: 4px 8px; }
html:root #group-message-form .group-cloud-consent { min-height: 44px; padding: 4px 0 0; line-height: 1.5; }
html:root .group-keyboard-hint { margin-top: 4px; line-height: 1.4; }
html:root .group-attachment-drafts { max-height: 80px; scrollbar-gutter: stable; }
html:root .group-attachment-drafts > li { min-height: 64px; padding-block: 6px; }
html:root .group-attachment-drafts:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
html:root .group-attachment-note { margin-block: 4px; line-height: 1.5; }
html:root .group-attachment-summary { min-width: 0; margin: 0; border: 1px solid var(--client-edge); border-radius: 12px; background: var(--client-hover); }
html:root .group-attachment-summary > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 10px; list-style: none; cursor: pointer; border-radius: 11px; }
html:root .group-attachment-summary > summary::-webkit-details-marker { display: none; }
html:root .group-attachment-summary > summary > span { min-width: 0; flex: 1; }
html:root .group-attachment-summary > summary strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 20px; }
html:root .group-attachment-summary > summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--client-muted); font-size: 12px; line-height: 18px; }
html:root .group-attachment-summary > summary > .icon { width: 16px; height: 16px; flex: 0 0 16px; transition: transform 140ms ease-out; }
html:root .group-attachment-summary[open] > summary > .icon { transform: rotate(180deg); }
html:root .group-attachment-summary > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html:root .group-attachment-summary[open] > summary { border-bottom: 1px solid var(--client-edge); border-end-start-radius: 0; border-end-end-radius: 0; }
html:root .group-attachment-summary .group-attachment-drafts { margin: 0 10px 4px; max-height: 80px; }
html:root .group-attachment-summary .group-attachment-note { margin: 0; padding: 4px 10px 8px; }
html:root .group-overview-file { min-height: 44px; }
html:root #group-topic-summary { padding-block: 4px; gap: 4px 8px; max-height: min(160px, 24dvh); }
html:root .group-turn-issue { flex-basis: 100%; width: 100%; max-height: 88px; margin: 0; padding-block: 0; align-items: center; }
html:root .group-turn-issue p { flex: 1; margin: 4px 0; }
html:root .group-turn-issue a { display: inline-flex; align-items: center; flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 801px) {
  html:root .group-room-head { padding-block: 8px; }
  html:root .group-room-title h2 { line-height: 1.25; }
  html:root .group-room-title p { margin-top: 2px; font-size: 12px; line-height: 1.5; }
  html:root .group-room-tabs button { min-inline-size: 44px; }
}
@media (max-height: 599px) {
  html:root .group-workspace { height: auto; min-height: 0; align-items: start; overflow: visible; }
  html:root .group-room:has(.group-conversation-stage) { min-height: 0; overflow: visible; }
  html:root .group-room:has(.group-conversation-stage) .group-tab-panel { flex: none; min-height: 0; overflow: visible; }
  html:root .group-conversation-stage { flex: none; min-height: 220px; height: 220px; }
  html:root .group-workspace .group-composer-wrap { max-height: none; overflow: visible; }
  html:root .group-workspace #group-topic-summary { max-height: none; overflow: visible; }
  html:root .group-short-viewport .group-room-title p { display: block; }
  html:root .group-short-viewport .group-input-note { display: block; }
  html:root .sidebar { overflow-y: auto; }
}
@media (min-width: 801px) and (max-height: 599px) {
  html:root .group-list { position: sticky; top: 72px; max-height: calc(100dvh - 88px); }
}
@media (min-width: 801px) and (max-width: 959px) {
  html:root #group-message-form .group-composer-bottom { grid-template-columns: 44px minmax(0, 1fr) auto; }
  html:root #group-message-form .group-execution { grid-column: 1 / -1; grid-row: 1; justify-content: stretch; flex-wrap: wrap; }
  html:root #group-message-form .group-execution select { flex-basis: 240px; max-width: none; }
  html:root #group-message-form .group-add-menu { grid-column: 1; grid-row: 2; }
  html:root #group-message-form #group-message-send { grid-column: 3; grid-row: 2; }
  html:root #group-message-form .group-execution-details { grid-column: 2; grid-row: 2; }
  html:root #group-message-form #group-message-count { grid-column: 2 / -1; grid-row: 3; }
  html:root #group-message-form .group-cloud-consent { grid-row: 4; }
  html:root #group-message-form .group-execution-details[open] { grid-column: 1 / -1; grid-row: 5; }
}