#planet-workspace-panel[hidden] { display: none; }
#planet-workspace-panel { background: var(--workspace-canvas); display: flex; flex-direction: column; min-height: 0; height: 100%; }
#planet-workspace-frame { flex: 1; min-height: 0; width: 100%; border: 0; }
/* Show the approved splash only while authentication/workspace data is loading. */
body.session-restoring { background: #fff !important; overflow: hidden; }
body.session-restoring > :not(noscript):not(#startup-splash) { display: none !important; }
#startup-splash { display: none; }
body.session-restoring > #startup-splash {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; white-space: nowrap; user-select: none;
}
#startup-splash .startup-orbit { display: block; width: 57px; height: 57px; flex: none; overflow: visible; }
#startup-splash .startup-wordmark {
  display: flex; align-items: baseline; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 29px; font-weight: 500; letter-spacing: -.95px; line-height: 1; color: #6f97cb;
  -webkit-font-smoothing: antialiased;
}
body.session-restoring .startup-wordmark { animation: startup-breathe 3.5s ease-in-out infinite; }
#startup-splash .startup-wordmark-post { color: inherit; font-weight: inherit; }
@keyframes startup-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (max-width: 480px) {
  body.session-restoring > #startup-splash { gap: 8px; }
  #startup-splash .startup-orbit { width: 52px; height: 52px; }
  #startup-splash .startup-wordmark { font-size: 27px; letter-spacing: -.85px; }
}
@media (prefers-reduced-motion: reduce) { body.session-restoring .startup-wordmark { animation: none; } }
.session-loading { max-width: 480px; margin: 12vh auto; padding: 24px; text-align: center; }
.session-loading h1 { font-size: clamp(22px, 5vw, 30px); }
.session-loading[hidden] { display: none; }

:root {
  /* Shared reading scale: rem follows the Human's browser text preference. */
  --font-caption: 0.75rem;
  --font-meta: 0.8125rem;
  --font-control: 0.875rem;
  --font-body: 0.9375rem;
  --font-item-title: 1rem;
  --font-section-title: 1.125rem;
  --font-page-title: 1.75rem;
  color-scheme: light;
  --google-blue: #1a73e8;
  --google-red: #d93025;
  --google-yellow: #f9ab00;
  --google-green: #188038;
  --ink: #f8fafd;
  --ink-soft: #f1f3f4;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --line: #e3e7ed;
  --line-strong: #c8cdd4;
  --text: #202124;
  --muted: #5f6368;
  --cyan: var(--google-blue);
  --cyan-soft: #e8f0fe;
  --gold: var(--google-yellow);
  --violet: #9334e6;
  --green: var(--google-green);
  --red: var(--google-red);
  --shadow: 0 8px 24px rgba(60, 64, 67, 0.12), 0 1px 3px rgba(60, 64, 67, 0.16);
  font-family: "Google Sans", "Roboto", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -8%, rgba(66, 133, 244, 0.12), transparent 35rem),
    radial-gradient(circle at 94% 15%, rgba(234, 67, 53, 0.07), transparent 26rem),
    #f8fafd;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-image:
    radial-gradient(circle, rgba(66, 133, 244, 0.16) 0 0.7px, transparent 0.9px),
    radial-gradient(circle, rgba(52, 168, 83, 0.1) 0 0.8px, transparent 1px);
  background-position: 0 0, 55px 40px;
  background-size: 110px 110px, 170px 170px;
  content: "";
  opacity: 0.38;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

.sky-glow {
  position: fixed;
  z-index: -2;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  pointer-events: none;
}

.sky-glow-one {
  top: 20%;
  left: -15rem;
  background: #4285f4;
}

.sky-glow-two {
  right: -14rem;
  bottom: 0;
  background: #fbbc04;
}

main,
footer {
  width: min(1440px, calc(100% - 40px));
  margin-inline: auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 78px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0 max(34px, calc((100% - 1532px) / 2));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  border-radius: 12px;
  color: var(--text);
  line-height: 1;
  text-decoration: none;
}

.brand-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.personal-share-open { white-space: nowrap; }

.task-manage-actions { border-top: 1px solid #e1e8dd; }
.task-manage-actions > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 12px; cursor: pointer; list-style: none; color: #354033; font-weight: 700; }
.task-manage-actions > summary::-webkit-details-marker { display: none; }
.task-manage-actions[open] > summary span { transform: rotate(90deg); }
.task-manage-actions > div { display: grid; gap: 8px; padding: 0 8px 8px; }
#personal-share-dialog { width: min(520px, calc(100vw - 32px)); padding: 24px; }
#personal-share-dialog label { color: var(--text); }
#personal-share-dialog .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#personal-share-dialog p { overflow-wrap: anywhere; }
#personal-share-url { width: 100%; min-width: 0; }
.friend-invitation-notice { padding: 12px; background: #edf5ff; border-radius: 8px; overflow-wrap: anywhere; }
#friend-registration-success { margin: 12px; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .brand-actions { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 0; }
  .personal-share-open { min-height: 36px; padding: 6px 10px; }
}

.brand-mark {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.brand-mark path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-copy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}

.brand-copy strong {
  font-size: 1.375rem;
  font-weight: 680;
  letter-spacing: -0.025em;
}

.brand-copy small {
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 1;
}

.connection {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  color: var(--muted);
  font-size: var(--font-meta);
}

.connection-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa0a6;
  box-shadow: 0 0 0 4px rgba(95, 99, 104, 0.1);
}

.connection-label-compact {
  display: none;
}

.pairing-completion-notice {
  position: fixed;
  z-index: 80;
  right: 20px;
  bottom: 88px;
  width: min(380px, calc(100vw - 40px));
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.pairing-completion-notice p { margin: 0 0 12px; }

.connection.success .connection-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(123, 212, 164, 0.12), 0 0 12px var(--green);
}

.connection.loading .connection-dot {
  background: var(--gold);
}

.connection.error .connection-dot {
  background: var(--red);
}

.welcome-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: center;
  gap: clamp(50px, 8vw, 130px);
  min-height: calc(100vh - 180px);
  padding: 70px 4vw 90px;
}

.welcome-copy {
  max-width: 780px;
}

.kicker,
.section-tag {
  margin: 0 0 14px;
  color: var(--cyan);
  font-size: var(--font-caption);
  font-weight: 760;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.welcome-copy h1 {
  margin: 0;
  font-size: clamp(3rem, 6vw, 6.7rem);
  font-weight: 640;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.welcome-copy h1 em {
  color: var(--gold);
  font-style: normal;
}

.lead {
  max-width: 680px;
  margin: 32px 0 0;
  color: #b3c4d5;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.9;
}

.principle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 32px;
  color: var(--muted);
  font-size: var(--font-meta);
}

.principle-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.principle-row span::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  content: "";
}

.entry-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(22, 40, 69, 0.94), rgba(11, 22, 42, 0.92));
  box-shadow: var(--shadow);
  padding: clamp(26px, 4vw, 44px);
}

.entry-card::before {
  position: absolute;
  top: -100px;
  right: -80px;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(103, 216, 212, 0.2);
  border-radius: 50%;
  content: "";
}

.entry-card h2,
.dashboard-hero h2,
.section-heading h2 {
  margin: 0;
  font-weight: 620;
}

.entry-card h2 {
  max-width: 360px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.25;
}

.entry-card > p:not(.section-tag, .form-status) {
  margin: 18px 0 28px;
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 1.75;
}

.entry-card form {
  display: grid;
  gap: 9px;
}

.entry-card label {
  color: #cbd9e6;
  font-size: var(--font-meta);
  font-weight: 650;
}

.entry-form {
  display: grid;
  gap: 9px;
}

.entry-form[hidden],
.text-button[hidden] {
  display: none;
}

.entry-form input {
  min-height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  outline: none;
  background: rgba(3, 11, 23, 0.78);
  color: var(--text);
  padding: 0 14px;
}

.entry-form input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(103, 216, 212, 0.12);
}

.entry-submit {
  min-height: 48px;
  margin-top: 8px;
  border: 1px solid var(--cyan);
  border-radius: 12px;
  background: var(--cyan);
  color: #081721;
  font-weight: 760;
  cursor: pointer;
}

.entry-submit:disabled,
.quiet-button:disabled,
.approval-submit:disabled {
  cursor: wait;
  opacity: 0.58;
}

.primary-action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.entry-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--cyan);
  padding: 4px 0;
  cursor: pointer;
}

.access-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.access-field input,
.access-field button,
.quiet-button {
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}

.access-field input {
  min-width: 0;
  outline: none;
  background: rgba(3, 11, 23, 0.78);
  color: var(--text);
  padding: 0 14px;
}

.access-field input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(103, 216, 212, 0.12);
}

.access-field button {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #081721;
  padding: 0 18px;
  font-weight: 760;
  cursor: pointer;
}

.access-field button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.form-status {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.5;
}

.form-status.error {
  color: var(--red);
}

.form-status.success {
  color: var(--green);
}

.security-note {
  display: grid;
  gap: 3px;
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.5;
}

.security-note strong {
  color: var(--gold);
}

.welcome-shell[hidden] {
  display: none;
}

.workspace {
  display: grid;
  grid-template-columns: 178px 260px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100vh - 88px);
  padding: 20px 0 90px;
}

.workspace[hidden] {
  display: none;
}

.workspace-sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  display: grid;
  min-height: calc(100vh - 128px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(10, 20, 38, 0.82);
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.person-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.person-card > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.person-card strong,
.person-card span:not(.avatar) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card span:not(.avatar) {
  color: var(--muted);
  font-size: var(--font-caption);
}

.avatar {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(230, 189, 114, 0.42);
  border-radius: 50%;
  background: rgba(230, 189, 114, 0.09);
  color: var(--gold);
  font-weight: 650;
}

.primary-navigation {
  display: grid;
  align-content: start;
  gap: 8px;
  margin-top: 20px;
}

.primary-nav-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  padding: 10px 9px;
  text-align: left;
  cursor: pointer;
}

.primary-nav-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: currentColor;
  font-size: var(--font-item-title);
}

.primary-nav-item > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.primary-nav-item strong {
  color: var(--text);
  font-size: var(--font-control);
}

.primary-nav-item small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.primary-nav-item:hover,
.primary-nav-item.active {
  border-color: rgba(103, 216, 212, 0.28);
  background: var(--cyan-soft);
  color: var(--cyan);
}

.primary-nav-item.active strong {
  color: var(--cyan);
}

.context-sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  min-height: calc(100vh - 128px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(13, 25, 45, 0.88);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px);
}

.context-heading[hidden] {
  display: none;
}

.context-heading {
  min-height: 152px;
  border-bottom: 1px solid var(--line);
  padding: 24px 22px 20px;
}

.context-heading > p:first-child {
  margin: 0 0 7px;
  color: var(--cyan);
  font-size: var(--font-caption);
  letter-spacing: 0.14em;
}

.context-heading h2 {
  margin: 0;
  font-size: var(--font-section-title);
}

.context-heading > p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.6;
}

.context-navigation {
  padding: 10px;
}

.context-navigation > div {
  display: grid;
  gap: 4px;
}

.context-navigation > div[hidden] {
  display: none;
}

.workspace.thread-workspace-mode .context-sidebar {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.workspace.agent-workspace-mode .context-sidebar {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.thread-browser {
  border-top: 1px solid var(--line);
  padding: 16px 12px 18px;
}

.thread-browser[hidden] {
  display: none;
}

.agent-browser[hidden] {
  display: none;
}

.agent-browser {
  border-top: 1px solid var(--line);
  padding: 16px 12px 18px;
}

.agent-browser-new {
  width: 100%;
  min-height: 40px;
  margin: 2px 0 13px;
}

.agent-browser-list {
  display: grid;
  gap: 15px;
}

.agent-browser-group {
  display: grid;
  gap: 7px;
}

.agent-browser-group h3 {
  margin: 0;
  padding: 0 5px;
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 620;
  letter-spacing: 0.05em;
}

.agent-browser-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(4, 13, 26, 0.44);
  color: var(--text);
  padding: 11px;
  text-align: left;
  cursor: pointer;
}

.agent-browser-item:hover,
.agent-browser-item.active {
  border-color: rgba(103, 216, 212, 0.3);
  background: rgba(103, 216, 212, 0.08);
}

.agent-browser-item.active {
  box-shadow: inset 3px 0 0 var(--cyan);
}

.agent-browser-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.agent-browser-identity > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.agent-browser-identity strong,
.agent-browser-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-browser-identity strong {
  font-size: var(--font-meta);
}

.agent-browser-identity small {
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-browser-heading,
.thread-browser-heading > div {
  display: flex;
}

.thread-browser-heading {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 13px;
}

.thread-browser-heading > div {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.thread-browser-heading span:not(.count-pill),
.thread-search > span {
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-browser-heading strong {
  font-size: var(--font-body);
}

.thread-search {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.thread-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(3, 10, 21, 0.58);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: var(--font-caption);
}

.thread-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.thread-filters button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 5px 9px;
  font: inherit;
  font-size: var(--font-caption);
  cursor: pointer;
}

.thread-filters button.active {
  border-color: rgba(103, 216, 212, 0.42);
  background: var(--cyan-soft);
  color: var(--cyan);
}

.thread-filters button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
}

.thread-capability-note {
  margin: 9px 3px 12px;
  color: #7f91a2;
  font-size: var(--font-caption);
  line-height: 1.5;
}

.thread-list {
  display: grid;
  gap: 7px;
}

.thread-list-item {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(4, 13, 26, 0.44);
  color: var(--text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.thread-list-item > * {
  min-width: 0;
  max-width: 100%;
}

.thread-list-item:hover,
.thread-list-item.active {
  border-color: rgba(103, 216, 212, 0.3);
  background: rgba(103, 216, 212, 0.08);
}

.thread-list-item.active {
  box-shadow: inset 3px 0 0 var(--cyan);
}

.thread-list-top,
.thread-list-participants,
.thread-list-markers,
.thread-avatar-stack {
  display: flex;
  align-items: center;
}

.thread-list-top {
  justify-content: space-between;
  gap: 8px;
}

.thread-list-topic {
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-list-time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-list-participants {
  gap: 7px;
}

.thread-avatar-stack {
  flex: 0 0 auto;
  padding-left: 5px;
}

.thread-avatar-stack .agent-mini-avatar {
  margin-left: -5px;
  border-width: 2px;
  border-color: #0d192d;
}

.thread-participant-names,
.thread-list-preview {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-list-markers {
  flex-wrap: wrap;
  gap: 5px;
}

.thread-marker {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 3px 6px;
  font-size: var(--font-caption);
}

.thread-marker.exception {
  border-color: rgba(255, 147, 141, 0.34);
  color: var(--red);
}

.agent-mini-avatar,
.agent-timeline-avatar {
  display: grid;
  place-items: center;
  border: 1px solid hsl(var(--agent-hue) 62% 60% / 0.64);
  border-radius: 50%;
  background: hsl(var(--agent-hue) 52% 28% / 0.34);
  color: hsl(var(--agent-hue) 72% 80%);
  font-weight: 760;
}

.agent-mini-avatar {
  width: 24px;
  height: 24px;
  font-size: var(--font-caption);
}

.context-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.context-nav-item > span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.context-nav-item strong {
  color: var(--text);
  font-size: var(--font-control);
}

.context-nav-item small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--font-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-nav-item > span:last-child {
  color: #61778d;
  font-size: 1.1rem;
}

.context-nav-item:hover,
.context-nav-item.active {
  border-color: var(--line);
  background: rgba(103, 216, 212, 0.09);
}

.context-nav-item.active strong,
.context-nav-item.active > span:last-child {
  color: var(--cyan);
}

.sidebar-actions {
  display: grid;
  align-self: end;
  gap: 8px;
}

.quiet-button {
  min-height: 38px;
  background: transparent;
  color: var(--muted);
  font-size: var(--font-meta);
  cursor: pointer;
}

.quiet-button:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.quiet-button.danger:hover {
  border-color: var(--red);
  color: var(--red);
}

.workspace-content {
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
  outline: none;
}

.module-view[hidden] {
  display: none !important;
}

.view-stack {
  display: grid;
  gap: 18px;
}

.dashboard-hero,
.content-section {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(15px);
}

.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 190px;
  padding: clamp(26px, 4vw, 42px);
  background:
    radial-gradient(circle at 88% 20%, rgba(103, 216, 212, 0.12), transparent 15rem),
    var(--panel);
}

.dashboard-hero h2 {
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.dashboard-hero p:last-child {
  max-width: 650px;
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.system-badge,
.data-chip,
.count-pill,
.trust-chip,
.readonly-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  white-space: nowrap;
}

.system-badge {
  gap: 8px;
  color: var(--green);
  padding: 8px 12px;
  font-size: var(--font-meta);
}

.system-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.metric-card {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 146px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(14, 27, 49, 0.72);
  padding: 20px;
}

.metric-card::after {
  position: absolute;
  right: -25px;
  bottom: -40px;
  width: 100px;
  height: 100px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.15;
}

.metric-card.accent-cyan { color: var(--cyan); }
.metric-card.accent-gold { color: var(--gold); }
.metric-card.accent-violet { color: var(--violet); }
.metric-card.accent-green { color: var(--green); }
.metric-card.accent-red { color: var(--red); }

.metric-label,
.metric-card small {
  color: var(--muted);
}

.metric-label {
  font-size: var(--font-meta);
}

.metric-card strong {
  align-self: center;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 560;
}

.metric-card small {
  align-self: end;
  font-size: var(--font-caption);
}

.content-section {
  padding: clamp(22px, 3vw, 32px);
}

.agent-overview[hidden],
.agent-detail[hidden],
.agent-detail-panel[hidden],
.agent-owner-actions[hidden],
.availability-card[hidden],
.agent-detail-heading-actions > [hidden] {
  display: none !important;
}

.agent-overview,
.agent-detail {
  display: grid;
  gap: 22px;
}

.agent-overview-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.agent-overview-metrics article,
.agent-overview-groups article,
.agent-detail-summary article {
  display: grid;
  min-width: 0;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(6, 17, 34, 0.5);
  padding: 16px;
}

.agent-overview-metrics span,
.agent-overview-groups span,
.agent-detail-summary span {
  color: var(--muted);
  font-size: var(--font-caption);
}

.agent-overview-metrics strong {
  color: var(--text);
  font-size: 1.85rem;
  font-weight: 560;
}

.agent-overview-metrics article:nth-child(2) strong { color: var(--green); }
.agent-overview-metrics article:nth-child(3) strong { color: var(--gold); }
.agent-overview-metrics article:nth-child(4) strong,
.agent-overview-metrics article:nth-child(5) strong { color: var(--gold); }

.agent-overview-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.agent-overview-groups article strong {
  font-size: 1.1rem;
}

.agent-overview-groups article p,
.agent-detail-summary article p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.6;
}

.agent-detail-heading,
.agent-detail-identity,
.agent-detail-heading-actions {
  display: flex;
  align-items: center;
}

.agent-detail-heading {
  justify-content: space-between;
  gap: 18px;
}

.agent-detail-identity {
  min-width: 0;
  gap: 14px;
}

.agent-detail-identity > div {
  min-width: 0;
}

.agent-detail-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid hsl(var(--agent-hue) 62% 60% / 0.64);
  border-radius: 17px;
  background: hsl(var(--agent-hue) 52% 28% / 0.34);
  color: hsl(var(--agent-hue) 72% 80%);
  font-size: 1.15rem;
  font-weight: 760;
}

.agent-detail-heading h2,
.agent-detail-heading p {
  margin: 0;
}

.agent-detail-heading h2 {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}

#agent-detail-subtitle {
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--font-caption);
}

.agent-detail-heading-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.agent-detail-heading-actions .quiet-button {
  padding-inline: 12px;
}

.agent-detail-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  scrollbar-width: thin;
}

.agent-detail-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  padding: 7px 10px;
  font: inherit;
  font-size: var(--font-caption);
  cursor: pointer;
}

.agent-detail-tabs button:hover,
.agent-detail-tabs button.active {
  border-color: var(--line-strong);
  background: rgba(103, 216, 212, 0.08);
  color: var(--cyan);
}

.agent-detail-panel {
  min-height: 280px;
  padding-top: 4px;
}

.agent-detail-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.agent-detail-summary article strong {
  overflow-wrap: anywhere;
  font-size: var(--font-body);
}

.agent-technical-details {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--muted);
  padding: 13px 15px;
  font-size: var(--font-caption);
}

.agent-technical-details summary {
  width: max-content;
  color: var(--cyan);
  cursor: pointer;
}

.agent-technical-details p {
  margin: 10px 0 0;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.agent-current-connection {
  display: grid;
  gap: 14px;
}

.agent-wake-channel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  border: 1px solid #c6dafc;
  border-left: 4px solid var(--google-blue);
  border-radius: 16px;
  background: #f8fafd;
  padding: 18px;
}

.agent-wake-channel[hidden] {
  display: none;
}

.agent-wake-heading,
.agent-wake-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.agent-wake-heading h3,
.agent-wake-heading p,
.agent-wake-copy,
.agent-wake-security {
  margin: 0;
}

.agent-wake-heading h3 {
  margin-top: 3px;
  font-size: var(--font-title-sm);
}

.agent-wake-copy,
.agent-wake-security {
  color: var(--muted);
  line-height: 1.65;
}

.agent-wake-security {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: var(--font-caption);
}

.agent-wake-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.agent-wake-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--font-caption);
}

.agent-wake-form select,
.agent-wake-form input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 16px;
}

.agent-wake-form > p,
.agent-wake-form .agent-wake-consent,
.agent-wake-actions,
.agent-wake-form .form-status {
  grid-column: 1 / -1;
}

.agent-wake-form .agent-wake-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.agent-wake-consent input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.agent-connection-banner {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--muted);
  border-radius: 14px;
  background: rgba(6, 17, 34, 0.52);
  padding: 16px;
}

.agent-connection-banner.connected { border-left-color: var(--green); }
.agent-connection-banner.awaiting_agent { border-left-color: var(--gold); }
.agent-connection-banner.offline,
.agent-connection-banner.connection_error { border-left-color: var(--red); }
.agent-connection-banner.ready { border-left-color: var(--green); }
.agent-connection-banner.working { border-left-color: var(--cyan); }
.agent-connection-banner.recovering { border-left-color: var(--gold); }
.agent-connection-banner.needs_attention { border-left-color: var(--gold); }

.agent-connection-banner p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.65;
}

.agent-related-threads {
  display: grid;
  gap: 9px;
}

.agent-related-thread {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(6, 17, 34, 0.52);
  color: var(--text);
  padding: 15px;
  text-align: left;
  cursor: pointer;
}

.agent-related-thread:hover {
  border-color: rgba(103, 216, 212, 0.35);
  background: rgba(103, 216, 212, 0.08);
}

.agent-related-thread span {
  color: var(--muted);
  font-size: var(--font-caption);
}

.agent-owner-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.agent-owner-actions section {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.agent-owner-actions p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.6;
}

.agent-owner-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.agent-owner-actions .quiet-button {
  padding-inline: 13px;
}

.agent-delete-note {
  margin: 18px 0 0;
  border-left: 2px solid var(--red);
  color: var(--muted);
  padding-left: 12px;
  font-size: var(--font-caption);
  line-height: 1.65;
}

.data-chip.offline,
.data-chip.connection_error {
  border-color: rgba(255, 147, 141, 0.4);
  color: var(--red);
}

.truth-notice,
.availability-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid rgba(230, 189, 114, 0.24);
  border-radius: 14px;
  background: rgba(230, 189, 114, 0.07);
  padding: 15px 17px;
}

.truth-notice {
  margin: 12px 0 18px;
}

.truth-notice strong,
.availability-card strong {
  color: var(--text);
  font-size: var(--font-meta);
}

.truth-notice span,
.availability-card p {
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.6;
}

.availability-card {
  margin-top: 20px;
}

.availability-card > div {
  display: grid;
  gap: 5px;
}

.availability-card p {
  margin: 0;
}

.availability-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(230, 189, 114, 0.35);
  border-radius: 999px;
  color: var(--gold);
  padding: 5px 8px;
  font-size: var(--font-caption);
}

.profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-summary-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(9, 19, 36, 0.48);
  padding: 17px;
}

.profile-summary-grid span {
  color: var(--muted);
  font-size: var(--font-caption);
}

.profile-summary-grid strong {
  overflow: hidden;
  font-size: var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-archive-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.settings-archive-item {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(9, 19, 36, 0.48);
  color: var(--text);
  padding: 15px 17px;
  text-align: left;
  cursor: pointer;
}

.settings-archive-item:hover,
.settings-archive-item:focus-visible {
  border-color: rgba(103, 216, 212, 0.42);
  background: var(--cyan-soft);
}

.settings-archive-item > span:first-child {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.settings-archive-item strong,
.settings-archive-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-archive-item small,
.settings-archive-item > span:last-child {
  color: var(--muted);
  font-size: var(--font-caption);
}

.profile-username-card {
  grid-column: 1 / -1;
}

.profile-username-form {
  display: grid;
  gap: 8px;
}

.profile-username-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.profile-username-controls input {
  width: 100%;
}

.profile-username-form small {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.55;
}

.prototype-browser-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 8px; }
.prototype-browser-title strong { font-size: 18px; color: var(--text); }
.prototype-browser-title .primary-action { padding: 8px 12px; font-size: 13px; }
.profile-details-form, .preferences-form { margin-top: 18px; padding: 20px; border: 1px solid var(--workspace-border); border-radius: 12px; background: var(--workspace-surface); display: grid; gap: 12px; }
.profile-details-form > label, .preferences-form legend { font-weight: 700; color: var(--text); }
.profile-details-form > input { width: 100%; }
.profile-details-form small, .preferences-form p { color: var(--muted); line-height: 1.65; }
.preferences-form fieldset { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 14px; border: 1px solid var(--workspace-border); border-radius: 10px; }
.preferences-form legend { padding: 0 6px; }
.preferences-form label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; }
/* Cards in friend details share the container's 20px rhythm. */
.friend-collaboration-card { container-type: inline-size; }
.friend-collaboration-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Four across when there is room, otherwise two by two; never three plus one. */
@container (min-width: 520px) { .friend-collaboration-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.friend-collaboration-stats > span { display: grid; gap: 4px; padding: 12px; border-radius: 9px; background: #f1f5ed; }
.friend-collaboration-stats strong { font-size: 18px; color: #2f563a; }
.friend-collaboration-stats small { color: #728078; }
.friend-add-choices { display: grid; gap: 12px; margin-top: 18px; }
.friend-add-choice { display: grid; gap: 6px; width: 100%; padding: 18px; text-align: left; border: 1px solid #d6e1d1; border-radius: 12px; background: #f7faf5; color: #27382f; }
.friend-add-choice:hover, .friend-add-choice:focus-visible { border-color: #6b996f; background: #edf5e9; }
.friend-add-choice strong { font-size: 16px; }
.friend-add-choice span { color: #68786e; line-height: 1.55; }

@media (max-width: 700px) {
  .friend-collaboration-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prototype-browser-title { padding: 14px 14px 6px; }
}

.mobile-account-actions {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(103, 216, 212, 0.42);
  outline-offset: 2px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-heading .section-tag {
  margin-bottom: 7px;
}

.section-heading h2 {
  font-size: 1.65rem;
}

.section-help {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-meta);
}

.section-intro {
  max-width: 760px;
  margin: -8px 0 20px;
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 1.65;
}

.count-pill,
.trust-chip,
.readonly-pill {
  padding: 6px 10px;
  color: var(--muted);
  font-size: var(--font-caption);
}

.trust-chip {
  border-color: rgba(230, 189, 114, 0.35);
  color: var(--gold);
  font-family: ui-monospace, monospace;
}

.readonly-pill {
  border-color: rgba(103, 216, 212, 0.35);
  color: var(--cyan);
}

.security-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.security-actions-grid article {
  display: grid;
  align-content: start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(5, 14, 28, 0.48);
  padding: 19px;
}

.security-actions-grid p {
  min-height: 3em;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.55;
}

.security-actions-grid .quiet-button {
  justify-self: start;
  min-height: 40px;
  padding-inline: 14px;
}

.agent-grid,
.connector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.agent-card,
.message-card,
.governance-grid article,
.empty-state {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(5, 14, 28, 0.48);
}

.primary-action {
  min-height: 40px;
  border: 1px solid var(--cyan);
  border-radius: 11px;
  background: var(--cyan);
  color: #081721;
  padding: 0 17px;
  font-weight: 760;
  cursor: pointer;
}

.connector-card {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, rgba(103, 216, 212, 0.08), transparent 13rem),
    rgba(5, 14, 28, 0.48);
  padding: 19px;
}

.connector-heading,
.connector-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.connector-heading > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.connector-heading strong,
.connector-heading span:not(.data-chip) {
  overflow-wrap: anywhere;
}

.connector-heading span:not(.data-chip),
.connector-actions span {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.5;
}

.connector-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.connector-card dl div {
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.connector-card dt {
  color: var(--muted);
  font-size: var(--font-caption);
}

.connector-card dd {
  margin: 4px 0 0;
  font-size: var(--font-meta);
  overflow-wrap: anywhere;
}

.connector-technical-details {
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.connector-technical-details summary {
  width: fit-content;
  cursor: pointer;
  color: var(--cyan);
  font-size: var(--font-caption);
  font-weight: 720;
}

.connector-technical-details dl {
  margin-top: 12px;
}

.connector-version-advice {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(255, 188, 92, 0.34);
  border-radius: 12px;
  background: rgba(255, 188, 92, 0.07);
  padding: 13px;
}

.connector-version-advice.update_required {
  border-color: rgba(255, 118, 132, 0.42);
  background: rgba(255, 118, 132, 0.08);
}

.connector-version-advice > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.connector-version-advice > div span,
.connector-version-advice p {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.6;
}

.connector-version-advice p {
  margin: 0;
}

.connector-version-advice details summary {
  width: fit-content;
  cursor: pointer;
  color: var(--cyan);
  font-size: var(--font-caption);
  font-weight: 720;
}

.connector-version-advice pre {
  max-height: 220px;
  margin: 10px 0;
  overflow: auto;
  border-radius: 9px;
  background: rgba(2, 8, 18, 0.72);
  color: #c8d7e5;
  padding: 11px;
  font: var(--font-meta)/1.6 ui-monospace, "SFMono-Regular", Consolas, monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.connector-reconnect-notice {
  margin: 0;
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  background: rgba(255, 188, 92, 0.08);
  color: var(--text-soft);
  padding: 10px 12px;
  font-size: var(--font-meta);
  line-height: 1.55;
}

.connector-actions {
  align-items: center;
}

.connector-actions .quiet-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 12px;
}

.connector-history {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(5, 14, 28, 0.34);
  padding: 15px;
}

.connector-history summary {
  width: max-content;
  color: var(--cyan);
  cursor: pointer;
  font-weight: 700;
}

.connector-history > p {
  margin: 9px 0 13px;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.6;
}

.connector-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.connector-card.historical {
  opacity: 0.78;
}

.agent-card {
  display: grid;
  gap: 19px;
  padding: 19px;
}

.agent-identity-details {
  color: var(--muted);
  font-size: var(--font-caption);
}

.agent-identity-details summary {
  width: max-content;
  color: var(--cyan);
  cursor: pointer;
}

.agent-identity-details span {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.agent-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 13px;
}

.agent-card-actions .quiet-button {
  min-height: 36px;
  padding-inline: 12px;
}

.agent-status-badges {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  grid-auto-flow: column;
  gap: 6px !important;
}

.agent-connection-state {
  border-left: 2px solid var(--muted);
  color: var(--muted);
  padding-left: 9px;
  font-size: var(--font-caption);
}

.agent-connection-state.connected {
  border-left-color: var(--green);
  color: var(--green);
}

.agent-connection-state.awaiting {
  border-left-color: var(--gold);
  color: var(--gold);
}

.data-chip.connected {
  border-color: rgba(123, 212, 164, 0.38);
  color: var(--green);
}

.data-chip.disconnected {
  color: var(--muted);
}

.data-chip.awaiting_agent {
  border-color: rgba(230, 189, 114, 0.42);
  color: var(--gold);
}

.data-chip.ready {
  border-color: rgba(123, 212, 164, 0.38);
  color: var(--green);
}

.data-chip.working {
  border-color: rgba(91, 159, 255, 0.42);
  color: var(--cyan);
}

.data-chip.recovering {
  border-color: rgba(230, 189, 114, 0.42);
  color: var(--gold);
}

.data-chip.needs_attention {
  border-color: rgba(255, 147, 141, 0.4);
  color: var(--red);
}

.data-chip.on_demand {
  border-color: var(--line);
  color: var(--muted);
}

.agent-browser-item .data-chip.needs_attention,
#agent-detail-status.needs_attention {
  border-color: rgba(230, 189, 114, 0.42);
  color: var(--gold);
}

.agent-card-top,
.task-heading,
.message-heading,
.message-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.agent-card-top > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.agent-card-top strong,
.agent-card-top span:not(.data-chip) {
  overflow-wrap: anywhere;
}

.agent-card-top span:not(.data-chip) {
  color: var(--muted);
  font-size: var(--font-caption);
}

.data-chip {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: var(--muted);
  font-size: var(--font-caption);
}

.data-chip.owner,
.data-chip.completed,
.data-chip.acked {
  border-color: rgba(123, 212, 164, 0.38);
  color: var(--green);
}

.data-chip.pending,
.data-chip.delivered,
.data-chip.partial {
  border-color: rgba(230, 189, 114, 0.4);
  color: var(--gold);
}

.data-chip.failed,
.data-chip.cancelled {
  border-color: rgba(255, 147, 141, 0.4);
  color: var(--red);
}

.data-chip.operator,
.data-chip.viewer,
.data-chip.auditor,
.data-chip.read {
  border-color: rgba(103, 216, 212, 0.35);
  color: var(--cyan);
}

.capability-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.capability-row span {
  border-radius: 7px;
  background: rgba(103, 216, 212, 0.07);
  color: #9db8c9;
  padding: 5px 7px;
  font-size: var(--font-caption);
}

.agent-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.agent-stats div {
  display: grid;
  gap: 4px;
}

.agent-stats dt {
  color: var(--muted);
  font-size: var(--font-caption);
}

.agent-stats dd {
  margin: 0;
  font-size: var(--font-meta);
  overflow-wrap: anywhere;
}

.timeline-list,
.message-list,
.approval-list {
  display: grid;
  gap: 12px;
}

.task-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  padding: 5px 0 18px;
}

.task-item:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.timeline-marker {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(230, 189, 114, 0.08);
}

.task-item.completed .timeline-marker { border-color: var(--green); }
.task-item.failed .timeline-marker { border-color: var(--red); }

.task-body {
  min-width: 0;
}

.task-heading strong,
.message-heading strong {
  overflow-wrap: anywhere;
}

.task-route,
.message-route,
.task-instruction {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.task-instruction {
  color: #c9d6e2;
  font-size: var(--font-meta);
}

.dual-state {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  color: #718ba2;
  font-size: var(--font-caption);
}

.trust-banner {
  margin: -6px 0 16px;
  border-left: 2px solid var(--gold);
  background: rgba(230, 189, 114, 0.05);
  color: #b8aa8f;
  padding: 10px 13px;
  font-size: var(--font-caption);
  line-height: 1.5;
}

.message-card {
  padding: 18px;
}

.approval-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, rgba(230, 189, 114, 0.08), transparent 14rem),
    rgba(5, 14, 28, 0.48);
  padding: 19px;
}

.approval-heading,
.approval-meta,
.approval-actions,
.dialog-heading,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.approval-heading > div {
  display: grid;
  gap: 5px;
}

.approval-heading strong,
.approval-summary,
.approval-justification,
.approval-payload {
  overflow-wrap: anywhere;
}

.approval-action-type {
  color: var(--cyan);
  font: var(--font-meta) ui-monospace, monospace;
  letter-spacing: 0.08em;
}

.approval-summary,
.approval-justification {
  margin: 0;
  line-height: 1.65;
}

.approval-summary {
  color: #d7e2eb;
  font-size: var(--font-body);
}

.approval-justification {
  color: var(--muted);
  font-size: var(--font-meta);
}

.approval-payload {
  max-height: 180px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(2, 8, 18, 0.65);
  color: #a8bccd;
  padding: 11px;
  font: var(--font-meta)/1.55 ui-monospace, monospace;
  white-space: pre-wrap;
}

.approval-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  color: #718ba2;
  font-size: var(--font-caption);
}

.approval-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 13px;
}

.approval-action,
.approval-submit,
.dialog-close {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
}

.approval-action {
  min-height: 36px;
  background: transparent;
  color: var(--muted);
  padding: 0 13px;
  font-size: var(--font-meta);
}

.approval-action.approve:hover {
  border-color: var(--green);
  color: var(--green);
}

.approval-action.reject:hover {
  border-color: var(--red);
  color: var(--red);
}

.approval-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: #101c31;
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 0;
}

.approval-dialog::backdrop {
  background: rgba(2, 7, 15, 0.78);
  backdrop-filter: blur(6px);
}

.approval-dialog form {
  display: grid;
  gap: 11px;
  padding: 26px;
}

.dialog-heading {
  align-items: flex-start;
}

.dialog-heading h2 {
  margin: 0;
  font-weight: 620;
}

.dialog-close {
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
}

.dialog-summary {
  margin: 5px 0;
  color: #d7e2eb;
  line-height: 1.65;
}

.approval-dialog label {
  margin-top: 5px;
  color: #cbd9e6;
  font-size: var(--font-meta);
  font-weight: 650;
}

.approval-dialog textarea,
.approval-dialog input[type="email"],
.approval-dialog input[type="text"],
.approval-dialog input[type="password"],
.approval-dialog select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: none;
  background: rgba(3, 11, 23, 0.78);
  color: var(--text);
  padding: 12px;
}

.approval-dialog textarea {
  min-height: 96px;
  resize: vertical;
}

.approval-dialog textarea:focus,
.approval-dialog input[type="email"]:focus,
.approval-dialog input[type="text"]:focus,
.approval-dialog input[type="password"]:focus,
.approval-dialog select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(103, 216, 212, 0.12);
}

.secret-output {
  max-height: 210px;
  margin: 0;
  overflow: auto;
  border: 1px solid rgba(230, 189, 114, 0.35);
  border-radius: 11px;
  background: rgba(2, 8, 18, 0.72);
  color: var(--gold);
  padding: 12px;
  font: var(--font-meta)/1.6 ui-monospace, monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.secret-output[hidden] {
  display: none;
}

.domain-proof {
  display: block;
  max-width: min(100%, 610px);
  border: 1px solid rgba(230, 189, 114, 0.28);
  border-radius: 8px;
  background: rgba(230, 189, 114, 0.06);
  color: var(--gold);
  font-size: var(--font-caption);
  line-height: 1.55;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  white-space: pre-wrap;
}

.governance-list {
  display: grid;
  gap: 8px;
}

.governance-list[hidden] {
  display: none;
}

.governance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(3, 11, 23, 0.42);
  padding: 11px 12px;
}

.governance-row > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.governance-row strong,
.governance-row span {
  overflow-wrap: anywhere;
}

.governance-row span {
  color: var(--muted);
  font-size: var(--font-caption);
}

.governance-row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.governance-row-actions .quiet-button {
  min-height: 34px;
  padding-inline: 10px;
}

.pairing-dialog {
  width: min(820px, calc(100% - 32px));
}

.pairing-guide,
.pairing-approval {
  display: grid;
  gap: 14px;
}

.pairing-guide[hidden],
.pairing-approval[hidden] {
  display: none;
}

.pairing-host-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
}

.pairing-host-picker legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--text);
  font-size: var(--font-body);
  font-weight: 720;
}

.pairing-host-card {
  display: grid;
  gap: 5px;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(5, 14, 28, 0.62);
  color: var(--text);
  padding: 14px;
  text-align: left;
  cursor: pointer;
}

.pairing-host-card strong {
  font-size: var(--font-item-title);
}

.pairing-host-card span {
  color: var(--muted);
  font-size: var(--font-caption);
}

.pairing-host-card:hover,
.pairing-host-card:focus-visible,
.pairing-host-card.selected {
  border-color: var(--cyan);
  outline: none;
  background: rgba(103, 216, 212, 0.1);
  box-shadow: 0 0 0 1px rgba(103, 216, 212, 0.18);
}

.pairing-host-card.selected span {
  color: var(--cyan);
}

.pairing-host-card.unavailable,
.pairing-host-card:disabled {
  border-color: var(--line);
  background: rgba(5, 14, 28, 0.38);
  color: var(--muted);
  cursor: not-allowed;
  opacity: .72;
  box-shadow: none;
}

.pairing-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 3px 0 8px;
  padding: 0;
  list-style: none;
}

.pairing-progress li {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  padding: 9px 10px;
  font-size: var(--font-caption);
}

.pairing-progress li span {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font: var(--font-meta) ui-monospace, monospace;
}

.pairing-progress li.current {
  border-color: rgba(103, 216, 212, 0.4);
  background: rgba(103, 216, 212, 0.06);
  color: var(--cyan);
}

.pairing-progress li.current span,
.pairing-progress li.complete span {
  border-color: var(--cyan);
  color: var(--cyan);
}

.pairing-progress li.complete {
  color: #9eb8c8;
}

.pairing-chat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(103, 216, 212, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(103, 216, 212, 0.09), rgba(3, 11, 23, 0.72));
  padding: 18px;
}

.pairing-chat-card[hidden] {
  display: none;
}

.pairing-chat-label {
  margin: 0 0 7px;
  color: var(--cyan);
  font-size: var(--font-caption);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pairing-chat-prompt {
  margin: 0;
  color: #eaf7f7;
  font-size: var(--font-body);
  line-height: 1.75;
  white-space: pre-wrap;
}

.pairing-chat-card .approval-submit {
  min-width: 126px;
  min-height: 44px;
}

.pairing-approval > .text-button {
  justify-self: start;
}

.pairing-approval > label,
.pairing-approval > div > label {
  display: block;
}

.pairing-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pairing-fields > div {
  display: grid;
  gap: 7px;
}

.pairing-existing-agent-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.pairing-existing-agent-field legend {
  margin-bottom: 8px;
  font-weight: 650;
}

.pairing-existing-agent-options {
  display: grid;
  gap: 8px;
}

.pairing-existing-agent-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.pairing-existing-agent-option input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.pairing-existing-agent-option span {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.agent-address-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.agent-address-input input {
  min-width: 0;
  border-radius: 10px 0 0 10px;
}

.agent-address-input span {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: rgba(103, 216, 212, 0.06);
  color: var(--cyan);
  padding: 0 11px;
  font: var(--font-meta) ui-monospace, monospace;
  white-space: nowrap;
}

.field-help {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.5;
}

.field-help.error {
  color: var(--danger);
}

.contact-address-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-address-suggestions:empty {
  display: none;
}

.pairing-preview {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(230, 189, 114, 0.3);
  border-radius: 12px;
  background: rgba(230, 189, 114, 0.05);
  padding: 14px;
}

.pairing-preview[hidden] {
  display: none;
}

.pairing-preview p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.55;
}

.pairing-preview span {
  color: var(--gold);
  font: var(--font-meta) ui-monospace, monospace;
}

.split-actions > div {
  display: flex;
  gap: 12px;
}

.danger-submit {
  border-color: var(--red);
  background: var(--red);
  color: #220907;
}

.data-chip.revoked,
.data-chip.denied {
  border-color: rgba(255, 147, 141, 0.4);
  color: var(--red);
}

.data-chip.replaced,
.data-chip.consumed {
  border-color: rgba(172, 155, 255, 0.4);
  color: var(--violet);
}

.dialog-actions {
  justify-content: flex-end;
  margin-top: 8px;
}

.dialog-actions .quiet-button,
.approval-submit {
  min-height: 42px;
  padding: 0 17px;
}

.approval-submit {
  border-color: var(--cyan);
  background: var(--cyan);
  color: #081721;
  font-weight: 760;
}

.approval-submit:disabled {
  cursor: wait;
  opacity: 0.58;
}

.message-heading > div {
  display: grid;
  gap: 5px;
}

.message-type {
  color: var(--cyan);
  font: var(--font-meta) ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.message-card pre {
  max-height: 220px;
  margin: 14px 0;
  overflow: auto;
  border: 1px solid rgba(168, 198, 230, 0.1);
  border-radius: 9px;
  background: rgba(3, 10, 21, 0.66);
  color: #c8d7e4;
  padding: 12px;
  font: var(--font-meta)/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-footer {
  color: #60788f;
  font: var(--font-meta) ui-monospace, monospace;
}

.message-footer span {
  overflow-wrap: anywhere;
}

.thread-mobile-back {
  display: none;
  margin-bottom: 12px;
  border: 0;
  background: transparent;
  color: var(--cyan);
  padding: 0;
  font: inherit;
  font-size: var(--font-meta);
  cursor: pointer;
}

.thread-detail-empty {
  display: grid;
  min-height: 52vh;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
}

.thread-detail-empty[hidden],
.thread-detail[hidden] {
  display: none;
}

.thread-detail-empty > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  color: var(--cyan);
  font-size: 1.25rem;
}

.thread-detail-empty h2,
.thread-detail-empty p {
  margin: 0;
}

.thread-detail-empty h2 {
  color: var(--text);
  font-size: 1.35rem;
}

.thread-detail-empty p {
  max-width: 400px;
  font-size: var(--font-meta);
  line-height: 1.65;
}

.thread-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.thread-detail-heading h2 {
  margin-top: 6px;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.thread-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.thread-detail-participants {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.thread-participant-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 4px 8px 4px 5px;
  font: inherit;
  font-size: var(--font-caption);
}

button.thread-participant-chip {
  cursor: pointer;
}

.thread-participant-chip .agent-mini-avatar {
  width: 22px;
  height: 22px;
}

.thread-timeline {
  position: relative;
  gap: 16px;
  padding: 8px 0 18px;
}

.thread-date-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-date-separator::before,
.thread-date-separator::after {
  flex: 1;
  height: 1px;
  background: var(--line);
  content: "";
}

.thread-message {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  border-left: 3px solid hsl(var(--agent-hue) 62% 60% / 0.72);
  padding: 17px;
}

.agent-timeline-avatar {
  width: 36px;
  height: 36px;
  font-size: var(--font-meta);
}

.thread-message-body {
  min-width: 0;
}

.thread-message-identity,
.thread-message-route,
.thread-message-states,
.thread-task-grid,
.thread-attachment-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.thread-message-identity strong {
  font-size: var(--font-body);
}

.thread-agent-type,
.thread-message-time,
.thread-message-route {
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-message-route {
  margin-top: 5px;
}

.thread-message-subject {
  display: block;
  margin-top: 12px;
  font-size: var(--font-body);
}

.thread-message-states {
  margin-top: 9px;
}

.thread-state-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-reply-reference {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-left: 2px solid var(--violet);
  background: rgba(172, 155, 255, 0.06);
  color: #c8c1f6;
  padding: 8px 10px;
  text-align: left;
  font: inherit;
  font-size: var(--font-caption);
  line-height: 1.5;
  cursor: pointer;
}

.thread-task-card {
  margin-top: 13px;
  border: 1px solid rgba(230, 189, 114, 0.24);
  border-radius: 12px;
  background: rgba(230, 189, 114, 0.06);
  padding: 13px;
}

.thread-task-card > strong {
  color: var(--gold);
  font-size: var(--font-meta);
}

.thread-task-grid {
  align-items: stretch;
  margin-top: 10px;
}

.thread-task-field {
  display: grid;
  flex: 1 1 180px;
  gap: 4px;
}

.thread-task-field span,
.thread-attachment-card span {
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-task-field strong {
  font-size: var(--font-caption);
  line-height: 1.5;
}

.thread-content-format {
  margin: 12px 0 -6px;
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-redacted-content,
.thread-structured-summary {
  margin-top: 12px;
}

.thread-structured-summary {
  display: grid;
  gap: 9px;
  border: 1px solid #d2e3fc;
  border-radius: 12px;
  background: #f8fafd;
  padding: 13px;
}

.thread-structured-summary > strong {
  color: #1967d2;
  font-size: var(--font-meta);
}

.thread-structured-summary p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.6;
}

.thread-structured-grid,
.thread-agent-data-grid {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
}

.thread-structured-grid dt,
.thread-agent-data-grid dt {
  color: var(--muted);
  font-size: var(--font-caption);
}

.thread-structured-grid dd,
.thread-agent-data-grid dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-caption);
  line-height: 1.55;
}

.thread-agent-data {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.thread-agent-data > summary {
  width: fit-content;
  color: #1967d2;
  cursor: pointer;
  font-size: var(--font-caption);
  font-weight: 600;
}

.thread-agent-data[open] > summary {
  margin-bottom: 10px;
}

.thread-agent-data-label {
  display: block;
  margin-top: 12px;
  font-size: var(--font-caption);
}

.thread-agent-data pre.thread-agent-data-json {
  max-height: 320px;
  margin: 6px 0 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--font-caption);
}

.thread-agent-data-note {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.5;
}

.thread-attachment-list {
  margin-top: 12px;
}

.thread-attachment-card {
  display: grid;
  min-width: min(100%, 190px);
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(3, 10, 21, 0.42);
  padding: 10px;
}

.thread-attachment-card strong {
  overflow-wrap: anywhere;
  font-size: var(--font-caption);
}

.thread-attachment-card.thread-attachment-image-card {
  width: 240px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.thread-attachment-thumbnail {
  display: grid;
  place-items: center;
  width: 100%;
  height: 180px;
  padding: 0;
  margin-bottom: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--workspace-canvas, #f3f6fa);
  color: var(--muted);
  cursor: zoom-in;
}

.thread-attachment-thumbnail img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
}

.thread-attachment-thumbnail:focus-visible {
  outline: 2px solid var(--workspace-accent, #1968d8);
  outline-offset: 3px;
}

.thread-attachment-thumbnail span {
  padding: 12px;
}

.thread-attachment-image-card .thread-attachment-action {
  flex: 1 1 80px;
}

.thread-attachment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
}

.thread-attachment-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(103, 216, 212, 0.06);
  color: var(--cyan);
  padding: 0 10px;
  text-decoration: none;
  font: inherit;
  font-size: var(--font-caption);
  cursor: pointer;
}

.thread-attachment-action:hover,
.thread-attachment-action:focus-visible {
  border-color: var(--cyan);
  outline: none;
  background: rgba(103, 216, 212, 0.12);
}

.thread-attachment-action.is-primary {
  border-color: var(--workspace-accent);
  background: var(--workspace-accent);
  color: #fff;
  font-weight: 700;
}

.thread-attachment-action.is-primary:hover,
.thread-attachment-action.is-primary:focus-visible {
  border-color: var(--workspace-accent-hover);
  background: var(--workspace-accent-hover);
}

.thread-attachment-action.is-secondary {
  background: transparent;
}

.timeline-event {
  display: grid;
  gap: 7px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: rgba(168, 198, 230, 0.04);
  color: var(--muted);
  padding: 12px 15px;
  font-size: var(--font-caption);
}

.timeline-event strong {
  color: var(--text);
}

.thread-readonly-notice {
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: 16px 2px 0;
  font-size: var(--font-caption);
  line-height: 1.6;
}

.attachment-preview-dialog {
  width: min(980px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  height: min(900px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: #101c31;
  color: #f5f8ff;
  box-shadow: var(--shadow);
  padding: 0;
}

.attachment-preview-dialog::backdrop {
  background: rgba(2, 7, 15, 0.82);
  backdrop-filter: blur(6px);
}

.attachment-preview-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: 12px;
  padding: 22px;
}

.attachment-preview-shell > * { flex: none; min-width: 0; }
.attachment-preview-dialog .dialog-heading {
  display: flex;
  gap: 12px;
}
.attachment-preview-dialog .dialog-heading > div { min-width: 0; flex: 1; }
#attachment-preview-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}
.attachment-preview-dialog .dialog-close {
  flex: 0 0 auto;
  width: auto;
  min-width: 64px;
  height: 44px;
  padding-inline: 12px;
  font-size: 15px;
}
.attachment-preview-dialog .dialog-actions { margin: 0; }
.attachment-preview-dialog .dialog-actions > * { min-height: 44px; }

.attachment-preview-note {
  color: #cbd7ea;
  font-size: var(--font-caption);
  max-height: 15dvh;
  overflow: auto;
  overflow-wrap: anywhere;
}

.attachment-preview-dialog .dialog-summary { color: #d7e1f0; }
.attachment-preview-dialog .dialog-close { color: #fff; border-color: #7890b1; }
.attachment-preview-dialog .dialog-close:focus-visible,
.attachment-preview-dialog .attachment-download-link:focus-visible,
.attachment-preview-dialog .approval-submit:focus-visible {
  outline: 3px solid #8fc5ff;
  outline-offset: 3px;
}

.attachment-preview-dialog iframe {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
}

@media (max-height: 500px) {
  .attachment-preview-shell { gap: 6px; padding: 12px; }
  .attachment-preview-dialog .dialog-heading { align-items: center; }
  .attachment-preview-dialog .section-tag { display: none; }
  .attachment-preview-dialog .dialog-summary { margin: 0; font-size: 13px; }
  .attachment-preview-dialog .dialog-actions { padding-top: 0; }
}

.attachment-download-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
  text-decoration: none;
}

.thread-message:target,
.thread-message.jump-highlight,
.agent-card.jump-highlight {
  box-shadow: 0 0 0 2px rgba(172, 155, 255, 0.45);
}

.governance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.governance-grid article {
  padding: 18px;
}

.governance-grid article > span {
  color: var(--cyan);
  font-size: var(--font-caption);
}

.governance-grid strong {
  display: block;
  margin-top: 8px;
  font-size: var(--font-body);
}

.governance-grid p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.65;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 24px;
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.6;
}

/* Bright, friendly material-inspired surface language. */
.entry-card,
.workspace-sidebar,
.context-sidebar,
.dashboard-hero,
.content-section {
  background: #fff;
  box-shadow: var(--shadow);
  backdrop-filter: none;
}

.entry-card {
  border-radius: 24px;
}

.entry-card::before {
  border-color: rgba(66, 133, 244, 0.15);
  background: rgba(66, 133, 244, 0.04);
}

.lead,
.entry-card label,
.dialog-summary,
.approval-summary,
.task-route,
.message-route,
.task-instruction {
  color: #3c4043;
}

.entry-form input,
.access-field input,
.thread-search input,
.approval-dialog textarea,
.approval-dialog input[type="email"],
.approval-dialog input[type="text"],
.approval-dialog input[type="password"],
.approval-dialog select {
  background: #fff;
  color: var(--text);
}

.entry-form input::placeholder,
.access-field input::placeholder,
.thread-search input::placeholder,
.approval-dialog textarea::placeholder,
.approval-dialog input::placeholder {
  color: #9aa0a6;
}

.entry-submit,
.access-field button,
.primary-action,
.approval-submit {
  border-color: var(--google-blue);
  background: var(--google-blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.18);
}

.entry-submit:hover,
.access-field button:hover,
.primary-action:not(:disabled):hover,
.approval-submit:hover {
  background: #185abc;
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.26);
}

.danger-submit {
  border-color: var(--google-red);
  background: var(--google-red);
  color: #fff;
}

.avatar {
  border-color: #f9ab00;
  background: #fef7e0;
  color: #b06000;
}

.primary-nav-icon {
  border: 0;
  background: #f1f3f4;
}

.primary-nav-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.primary-nav-icon svg circle {
  fill: currentColor;
  stroke: currentColor;
}

.orbit-icon { color: #1a73e8; background: #e8f0fe; }
.relay-icon { color: #188038; background: #e6f4ea; }
.settings-icon { color: #d93025; background: #fce8e6; }

.primary-nav-item:hover,
.primary-nav-item.active {
  border-color: #d2e3fc;
  background: #e8f0fe;
  color: var(--google-blue);
}

.primary-nav-item[data-module="relay"]:hover,
.primary-nav-item[data-module="relay"].active {
  border-color: #ceead6;
  background: #e6f4ea;
  color: var(--google-green);
}

.primary-nav-item[data-module="relay"].active strong {
  color: var(--google-green);
}

.primary-nav-item[data-module="settings"]:hover,
.primary-nav-item[data-module="settings"].active {
  border-color: #fad2cf;
  background: #fce8e6;
  color: var(--google-red);
}

.primary-nav-item[data-module="settings"].active strong {
  color: var(--google-red);
}

.context-nav-item:hover,
.context-nav-item.active,
.thread-list-item:hover,
.thread-list-item.active,
.agent-browser-item:hover,
.agent-browser-item.active,
.agent-related-thread:hover {
  border-color: #d2e3fc;
  background: #e8f0fe;
}

.thread-list-item,
.agent-browser-item,
.agent-overview-metrics article,
.agent-overview-groups article,
.agent-detail-summary article,
.agent-connection-banner,
.agent-related-thread,
.profile-summary-grid article,
.security-actions-grid article,
.agent-card,
.message-card,
.governance-grid article,
.empty-state,
.connector-card,
.connector-history,
.approval-card,
.governance-row,
.thread-attachment-card {
  background: #fff;
}

.agent-overview-metrics article,
.agent-overview-groups article,
.agent-detail-summary article,
.profile-summary-grid article,
.security-actions-grid article,
.thread-attachment-card {
  background: #f8fafd;
}

.connector-card,
.approval-card {
  background-image: none;
}

.agent-mini-avatar,
.agent-timeline-avatar,
.agent-detail-avatar {
  border-color: hsl(var(--agent-hue) 54% 62% / 0.52);
  background: hsl(var(--agent-hue) 72% 94%);
  color: hsl(var(--agent-hue) 62% 34%);
}

.thread-avatar-stack .agent-mini-avatar {
  border-color: #fff;
}

.truth-notice {
  border-color: #fde293;
  background: #fef7e0;
}

.availability-card {
  border-color: #d2e3fc;
  background: #f8fafd;
}

.thread-reply-reference {
  border-left-color: #9334e6;
  background: #f3e8fd;
  color: #681da8;
}

.thread-task-card,
.task-instruction,
.pairing-preview,
.domain-proof {
  border-color: #fde293;
  background: #fef7e0;
  color: #7a4f01;
}

.timeline-event {
  background: #f8fafd;
}

.approval-payload,
.secret-output {
  background: #f8fafd;
  color: #3c4043;
}

.message-card pre {
  border-color: #3c4043;
  background: #202124;
  color: #f8f9fa;
}

.message-card pre.thread-message-content {
  border-color: #e3e7ed;
  background: #f8fafd;
  color: #3c4043;
  font-family: "Google Sans", "Roboto", "Noto Sans SC", "PingFang SC", sans-serif;
  font-size: var(--font-meta);
  line-height: 1.72;
}

.message-card pre.thread-message-content-json {
  border-color: #3c4043;
  background: #202124;
  color: #f8f9fa;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.approval-dialog {
  background: #fff;
}

.approval-dialog::backdrop {
  background: rgba(32, 33, 36, 0.42);
}

.data-chip,
.count-pill,
.trust-chip,
.readonly-pill,
.thread-marker,
.thread-participant-chip {
  background: #fff;
},
.data-chip.operator,
.data-chip.viewer,
.data-chip.auditor,
.data-chip.read {
  color: #185abc;
}

.thread-capability-note,
.message-footer,
footer {
  color: #70757a;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline-color: rgba(26, 115, 232, 0.55);
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 24px 0 36px;
  color: #70757a;
  font-size: var(--font-caption);
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 14px;
  text-align: right;
}

.filing-record {
  color: #185abc;
  text-decoration: none;
}

.filing-record:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1220px) {
  .workspace {
    grid-template-columns: 150px 230px minmax(0, 1fr);
    gap: 12px;
  }

  .workspace-sidebar,
  .context-sidebar {
    top: 12px;
  }

  .primary-nav-item {
    grid-template-columns: 30px minmax(0, 1fr);
    padding-inline: 7px;
  }

  .primary-nav-icon {
    width: 29px;
    height: 29px;
  }
}

@media (max-width: 1080px) {
  .welcome-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-inline: 2vw;
  }

  .entry-card {
    max-width: 650px;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body {
    padding-bottom: 84px;
  }

  .workspace {
    display: block;
    min-height: auto;
    padding-top: 14px;
  }

  .workspace-sidebar {
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    display: block;
    width: 100%;
    min-height: auto;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.97);
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    box-shadow: 0 -4px 18px rgba(60, 64, 67, 0.16);
  }

  .person-card,
  .workspace-sidebar .sidebar-actions {
    display: none;
  }

  .primary-navigation {
    display: flex;
    gap: 6px;
    margin: 0;
  }

  .primary-nav-item {
    flex: 1 1 0;
    grid-template-columns: 26px auto;
    justify-content: center;
    min-height: 54px;
    padding: 7px;
  }

  .primary-nav-icon {
    width: 26px;
    height: 26px;
    border: 0;
    font-size: var(--font-item-title);
  }

  .primary-nav-item small {
  font-size: var(--font-meta);
    display: none;
  }

  .primary-nav-item strong {
    font-size: var(--font-control);
  }

  .context-sidebar {
    position: static;
    min-height: 0;
    margin-bottom: 14px;
  }

  .context-heading {
    min-height: 0;
    padding: 17px 18px 14px;
  }

  .context-heading > p:last-child {
    margin-top: 6px;
    font-size: var(--font-meta);
  }

  .context-navigation {
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: thin;
  }

  .context-navigation > div {
    display: flex;
    width: max-content;
  }

  .context-nav-item {
    flex: 0 0 auto;
    width: auto;
    min-height: 48px;
    padding: 8px 12px;
  }

  .context-nav-item strong {
    font-size: var(--font-control);
  }

  .context-nav-item small,
  .context-nav-item > span:last-child {
    display: none;
  }

  .workspace-content {
    min-height: 50vh;
  }

  .workspace.thread-workspace-mode:not(.thread-detail-open) .workspace-content {
    display: none;
  }

  .workspace.thread-workspace-mode.thread-detail-open .context-sidebar {
    display: none;
  }

  .workspace.thread-workspace-mode.thread-detail-open .workspace-content {
    display: block;
  }

  .workspace.thread-workspace-mode.thread-detail-open .thread-mobile-back {
    display: inline-flex;
  }

  .workspace.agent-workspace-mode:not(.agent-detail-open) .workspace-content {
    display: none;
  }

  .workspace.agent-workspace-mode.agent-detail-open .context-sidebar {
    display: none;
  }

  .workspace.agent-workspace-mode.agent-detail-open .workspace-content {
    display: block;
  }

  .workspace.agent-workspace-mode.agent-detail-open .thread-mobile-back {
    display: inline-flex;
  }

  .workspace.thread-workspace-mode .context-sidebar {
    max-height: none;
    overflow: visible;
  }

  .workspace.agent-workspace-mode .context-sidebar {
    max-height: none;
    overflow: visible;
  }

  .thread-browser {
    padding-inline: 10px;
  }

  .agent-browser {
    padding-inline: 10px;
  }

  .thread-list-item {
    padding: 14px;
  }

  .thread-list-topic {
    font-size: var(--font-body);
  }

  .thread-participant-names,
  .thread-list-preview {
    font-size: var(--font-meta);
  }

  .thread-marker,
  .thread-list-time,
  .agent-browser-identity small {
    font-size: var(--font-caption);
  }

  .agent-browser-identity strong {
    font-size: var(--font-body);
  }

  .thread-detail-heading {
    flex-direction: column;
  }

  .agent-overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agent-overview-groups,
  .agent-detail-summary {
    grid-template-columns: 1fr;
  }

  .agent-wake-form {
    grid-template-columns: 1fr;
  }

  .agent-owner-actions {
    grid-template-columns: 1fr;
  }

  .agent-wake-actions > * {
    flex: 1 1 100%;
  }

  .agent-detail-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-detail-heading-actions {
    justify-content: flex-start;
  }

  .thread-detail-actions {
    justify-content: flex-start;
  }

  .message-card pre {
    font-size: var(--font-body);
    line-height: 1.72;
  }

  .mobile-account-actions {
    display: grid;
  }

  .agent-grid,
  .connector-grid,
  .security-actions-grid,
  .governance-grid {
    grid-template-columns: 1fr;
  }

  footer {
    padding-bottom: 30px;
  }
}

@media (max-width: 580px) {
  .pairing-host-picker {
    grid-template-columns: 1fr;
  }

  main,
  footer {
    width: min(100% - 24px, 1440px);
  }

  .topbar {
    min-height: 74px;
    padding-inline: 12px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .brand-copy strong {
    font-size: 1.12rem;
  }

  .brand-copy small {
    font-size: var(--font-caption);
  }

  .connection {
    font-size: 0;
  }

  .welcome-shell {
    gap: 44px;
    padding: 58px 0 70px;
  }

  .welcome-copy h1 {
    font-size: clamp(2.65rem, 14vw, 4.2rem);
  }

  .access-field {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .profile-summary-grid {
    grid-template-columns: 1fr;
  }

  .profile-username-controls {
    grid-template-columns: 1fr;
  }

  .dashboard-hero,
  .section-heading,
  footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-meta {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .dashboard-hero {
    display: flex;
  }

  .system-badge {
    align-self: flex-start;
  }

  .truth-notice,
  .availability-card {
    flex-direction: column;
  }

  .thread-message {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 14px 12px;
  }

  .content-section {
    border-radius: 18px;
    padding: 18px 16px;
  }

  .thread-detail-heading h2,
  .agent-detail-heading h2 {
    font-size: 1.45rem;
  }

  .thread-message-identity strong {
    font-size: var(--font-item-title);
  }

  .thread-agent-type,
  .thread-message-time,
  .thread-message-route,
  .thread-state-group,
  .thread-content-format {
    font-size: var(--font-caption);
  }

  .thread-task-field strong,
  .thread-attachment-card strong,
  .thread-readonly-notice {
    font-size: var(--font-meta);
  }

  .thread-attachment-card {
    width: 100%;
  }

  .thread-attachment-action {
    flex: 1 1 112px;
    min-height: 40px;
    font-size: var(--font-meta);
  }

  .attachment-preview-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .attachment-preview-shell {
    gap: 8px;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .attachment-preview-dialog .dialog-actions {
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .attachment-preview-dialog .dialog-actions > * {
    flex: 1 1 120px;
  }

  .agent-timeline-avatar {
    width: 30px;
    height: 30px;
    font-size: var(--font-caption);
  }

  .agent-stats {
    grid-template-columns: 1fr;
  }

  .agent-overview-metrics {
    grid-template-columns: 1fr;
  }

  .agent-detail-identity {
    align-items: flex-start;
  }

  .agent-detail-tabs {
    margin-inline: -6px;
    padding-inline: 6px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .agent-detail-tabs button {
    scroll-snap-align: start;
  }

  .pairing-fields,
  .pairing-chat-card,
  .connector-card dl,
  .connector-history-grid {
    grid-template-columns: 1fr;
  } > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .split-actions,
  .connector-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .pairing-progress {
    grid-template-columns: 1fr;
  }

  .pairing-progress li:not(.current) {
    display: none;
  }

  .pairing-chat-card .approval-submit {
    justify-self: stretch;
  }
}

/* Confirmed conversation-centred Star Orbit layout. */
.topbar-account,
.top-human,
.top-human-copy,
.thread-list-recency,
.thread-parent-meta {
  display: flex;
  align-items: center;
}

.topbar-account {
  justify-self: end;
  gap: 20px;
  margin-left: auto;
}

.connection {
  justify-content: center;
  min-width: 235px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: #e8f0fe;
  color: #1a73e8;
  padding: 0 18px;
  font-size: var(--font-meta);
  font-weight: 620;
}

.connection-dot {
  width: 8px;
  height: 8px;
  box-shadow: none;
}

.top-human {
  gap: 9px;
}

.top-human-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #f9ab00;
  border-radius: 50%;
  background: #fef7e0;
  color: #7a4f01;
  font-size: var(--font-meta);
  font-weight: 720;
}

.top-human-copy {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
}

.top-human-copy strong {
  font-size: var(--font-meta);
}

.top-human-copy small {
  color: var(--muted);
  font-size: var(--font-caption);
}

@media (min-width: 1221px) {
  .workspace {
    grid-template-columns: 178px 390px minmax(0, 1fr);
  }
}

@media (min-width: 861px) {
  .workspace.thread-workspace-mode .context-sidebar {
    display: flex;
    overflow: hidden;
    flex-direction: column;
  }

  .workspace.thread-workspace-mode .thread-browser {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

.context-heading {
  min-height: 128px;
  padding-bottom: 18px;
}

.thread-parent-toggle {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 68px;
  border-color: #b7cdf7;
  background: #e8f0fe;
  color: #1a73e8;
}

.thread-parent-toggle > span:first-child {
  display: grid;
}

.thread-parent-icon {
  position: relative;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #1a73e8;
}

.thread-parent-icon i {
  position: absolute;
  left: 9px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}

.thread-parent-icon i:first-child { top: 13px; }
.thread-parent-icon i:last-child { top: 20px; width: 11px; }

.thread-parent-meta {
  gap: 8px;
}

.thread-unread-count {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: #d93025;
  color: #fff;
  padding-inline: 6px;
  font-size: var(--font-caption);
  font-weight: 700;
}

.thread-unread-count[hidden] {
  display: none;
}

.thread-parent-chevron {
  display: inline-block;
  color: #1a73e8;
  font-size: 1.25rem;
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}

.thread-parent-toggle.expanded .thread-parent-chevron {
  transform: rotate(0deg);
}

.orbit-secondary-nav {
  display: none;
}

.orbit-mobile-shortcuts {
  display: none;
}

.thread-browser {
  border-top: 0;
  padding-top: 8px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

.thread-tools {
  margin: 0 2px 10px;
  border: 1px solid #e3e7ed;
  border-radius: 12px;
  background: #f8fafd;
}

.thread-tools summary {
  min-height: 40px;
  color: #5f6368;
  padding: 11px 13px;
  font-size: var(--font-caption);
  font-weight: 620;
  cursor: pointer;
}

.thread-tools-body {
  padding: 2px 12px 12px;
}

.thread-list {
  gap: 11px;
}

.thread-list-item {
  position: relative;
  gap: 10px;
  min-height: 132px;
  border-color: #e3e7ed;
  background: #fff;
  padding: 15px 16px;
}

.thread-list-item:hover {
  border-color: #b7cdf7;
  background: #f8fbff;
}

.thread-list-item.active {
  border-color: #8ab4f8;
  background: #f5f9ff;
  box-shadow: inset 4px 0 0 #1a73e8;
}

.thread-list-topic {
  color: #202124;
  font-size: var(--font-body);
}

.thread-list-recency {
  flex: 0 0 auto;
  gap: 8px;
}

.thread-unread-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d93025;
  box-shadow: 0 0 0 3px #fce8e6;
}

.thread-list-preview {
  font-size: var(--font-caption);
}

.thread-marker.conversation-count {
  border-color: transparent;
  background: #f1f3f4;
}

.thread-marker.conversation-state {
  border-color: transparent;
  background: #e8f0fe;
  color: #185abc;
}

.thread-marker.conversation-state.completed {
  background: #e6f4ea;
  color: #137333;
}

.thread-marker.conversation-state.waiting_for_me,
.thread-marker.conversation-state.needs_attention {
  background: #fce8e6;
  color: #b3261e;
}

.thread-detail-heading {
  border-bottom: 1px solid #e3e7ed;
  padding-bottom: 18px;
}

.thread-detail-heading h2:focus {
  outline: none;
}

.thread-detail-route {
  margin: 10px 0 0;
  color: #5f6368;
  font-size: var(--font-meta);
  line-height: 1.6;
}

.thread-detail-participants {
  display: none;
}

.conversation-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border-radius: 999px;
  background: #e8f0fe;
  color: #185abc;
  padding: 0 15px;
  font-size: var(--font-caption);
  font-weight: 650;
}

.conversation-state-pill.completed {
  background: #e6f4ea;
  color: #137333;
}

.conversation-state-pill.needs_attention {
  background: #fce8e6;
  color: #b3261e;
}

#communications .truth-notice {
  display: none;
}

.thread-timeline {
  gap: 22px;
  padding-top: 16px;
}

.thread-message {
  width: min(82%, 760px);
  border: 1px solid #dadce0;
  border-left: 3px solid hsl(var(--agent-hue) 62% 60% / 0.72);
  border-radius: 16px;
  background: #fff;
  margin-right: auto;
  padding: 16px;
}

.thread-message.from-current-human {
  grid-template-columns: minmax(0, 1fr) 38px;
  border: 1px solid #b7cdf7;
  border-right: 3px solid #1a73e8;
  background: #e8f0fe;
  margin-right: 0;
  margin-left: auto;
}

.thread-message.from-current-human .thread-message-identity,
.thread-message.from-current-human .thread-message-route,
.thread-message.from-current-human .thread-message-states {
  justify-content: flex-end;
}

.thread-message.from-current-human pre.thread-message-content,
.thread-message.from-current-human .thread-attachment-card {
  background: rgba(255, 255, 255, 0.82);
}

@media (min-width: 861px) and (max-width: 1220px) {
  .workspace {
    grid-template-columns: 150px 350px minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .workspace.thread-workspace-mode .context-sidebar,
  .workspace.thread-workspace-mode .thread-browser {
    display: block;
    overflow: visible;
  }

  .orbit-mobile-shortcuts:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 8px;
  }

  .orbit-mobile-shortcut {
    display: grid;
    width: 100%;
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #e3e7ed;
    border-radius: 14px;
    background: #fff;
    color: #202124;
    padding: 7px 8px;
    text-align: left;
  }

  .orbit-mobile-shortcut > span:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .orbit-mobile-shortcut strong {
    font-size: var(--font-meta);
  }

  .orbit-mobile-shortcut small {
    display: block;
    overflow: hidden;
    color: #70757a;
    font-size: var(--font-caption);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .orbit-mobile-shortcut.active {
    border-color: #9fc2fa;
    background: #e8f0fe;
    color: #185abc;
  }

  .orbit-mobile-shortcut > span.orbit-mobile-shortcut-count {
    display: inline-grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #e8f0fe;
    color: #185abc;
    padding-inline: 6px;
    font-size: var(--font-caption);
  }

  .orbit-mobile-shortcut > span.orbit-mobile-shortcut-count.alert:not(:empty) {
    background: #fce8e6;
    color: #b3261e;
  }

  .context-navigation > div[data-context-module="orbit"] {
    display: none;
  }

  .context-navigation > div[data-context-module="orbit"] .context-nav-item {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .thread-parent-toggle {
    min-width: 0;
  }

  .thread-message,
  .thread-message.from-current-human {
    width: min(94%, 760px);
  }
}

@media (max-width: 580px) {
  .topbar-account {
    gap: 8px;
  }

  .connection {
    width: auto;
    min-width: 0;
    min-height: 34px;
    padding: 0 10px;
    justify-content: center;
    gap: 6px;
    font-size: var(--font-caption);
    line-height: 1;
    white-space: nowrap;
  }

  .connection-label-full {
    display: none;
  }

  .connection-label-compact {
    display: inline;
  }

  .top-human-copy {
    display: none;
  }

  .top-human-avatar {
    width: 36px;
    height: 36px;
  }

  .thread-list-item {
    min-height: 126px;
  }

  .thread-detail-route {
    font-size: var(--font-meta);
  }

  .thread-message,
  .thread-message.from-current-human {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* 项目与好友模块：沿用AgentPost现有卡片、色彩和三栏布局。 */
.primary-nav-icon img {
  width: 21px;
  height: 21px;
  display: block;
}

.projects-icon {
  background: #f3e8fd;
}

.friends-icon {
  background: #fef7e0;
}

.primary-nav-item[data-module="projects"]:hover,
.primary-nav-item[data-module="projects"].active {
  border-color: #e9d2fd;
  background: #f3e8fd;
  color: #7627bb;
}

.primary-nav-item[data-module="projects"].active strong {
  color: #7627bb;
}

.primary-nav-item[data-module="friends"]:hover,
.primary-nav-item[data-module="friends"].active {
  border-color: #fdd663;
  background: #fef7e0;
  color: #b06000;
}

.primary-nav-item[data-module="friends"].active strong {
  color: #b06000;
}

.prototype-browser[hidden] {
  display: none;
}

.prototype-browser {
  display: grid;
  min-height: 0;
  gap: 10px;
  padding: 0 10px 12px;
}

.prototype-browser-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.prototype-browser-heading > div {
  display: grid;
  gap: 2px;
}

.prototype-browser-heading span:not(.count-pill) {
  color: #70757a;
  font-size: var(--font-caption);
}

.prototype-browser-heading strong {
  color: #202124;
  font-size: var(--font-section-title);
}

.prototype-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.prototype-filter:has([data-friend-filter]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.friend-pending-notice {
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e8ad5b;
  border-radius: 12px;
  background: #fff4dc;
  color: #713f12;
  font-weight: 700;
  cursor: pointer;
}

.primary-nav-notice[hidden], .friend-pending-notice[hidden] { display: none; }
/* Separate conversations while preserving the selected background and marker. */
#project-browser-list .prototype-list-item + .prototype-list-item { border-top: 1px solid #dfe7df; }
.task-human-action-row { padding: 12px 0; border-bottom: 1px solid #dfe7df; overflow-wrap: anywhere; }
.friend-pending-notice:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

.prototype-filter button {
  min-width: 0;
  border: 1px solid #e3e7ed;
  border-radius: 999px;
  background: #fff;
  color: #5f6368;
  padding: 7px 5px;
  font: inherit;
  font-size: var(--font-control);
  cursor: pointer;
}

.prototype-filter button:hover,
.prototype-filter button.active {
  border-color: #c7d7f5;
  background: #e8f0fe;
  color: #185abc;
}

.prototype-browser-new {
  width: 100%;
}

.prototype-browser-list {
  display: grid;
  min-height: 0;
  gap: 8px;
  overflow-y: auto;
  padding: 1px 2px 8px;
}

.prototype-list-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 1px solid #e3e7ed;
  border-radius: 15px;
  background: #fff;
  color: #202124;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.prototype-list-item:hover,
.prototype-list-item.active {
  border-color: #d2e3fc;
  background: #f8fbff;
  box-shadow: 0 3px 10px rgba(60, 64, 67, 0.08);
}

.prototype-list-item.active {
  border-left: 3px solid #1a73e8;
  padding-left: 8px;
}

.prototype-list-avatar {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #f3e8fd;
  color: #7627bb;
  font-size: var(--font-meta);
  font-weight: 700;
}

.friend-workspace-mode .prototype-list-avatar {
  background: #fef7e0;
  color: #b06000;
}

.prototype-list-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.prototype-list-copy strong,
.prototype-list-copy small {
  font-size: var(--font-meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prototype-list-copy strong {
  font-size: var(--font-control);
}

.prototype-list-copy small {
  color: #70757a;
  font-size: var(--font-meta);
}

.prototype-list-badge {
  border-radius: 999px;
  background: #f1f3f4;
  color: #5f6368;
  padding: 4px 7px;
  font-size: var(--font-caption);
  white-space: nowrap;
}

.prototype-module {
  display: grid;
  align-content: start;
  gap: 16px;
}

.prototype-detail {
  display: grid;
  gap: 16px;
}

.task-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.task-files-card { min-width: 0; }
.task-files-card h3 small {
  display: inline-flex;
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e8f1ff;
  color: #1559a6;
  font-size: var(--font-meta);
}
.task-files-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.55;
}
.task-file-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, .55fr);
  gap: 10px;
  margin-bottom: 14px;
}
.task-file-toolbar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--font-meta);
}
.task-file-toolbar input[type="search"],
.task-file-toolbar select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
.task-file-toolbar .task-file-mine {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-top: 18px;
  color: var(--text);
}
.task-file-mine input { width: 18px; height: 18px; }
.task-file-clear {
  align-self: end;
  min-height: 40px;
}
.task-file-list {
  display: grid;
  gap: 10px;
}
.task-file-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 13px;
  border: 1px solid #c9d9ed;
  border-left: 4px solid #3478c7;
  border-radius: 12px;
  background: #f7faff;
}
.task-file-card > div:first-child,
.task-file-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.task-file-card > div:first-child { justify-content: space-between; }
.task-file-card strong { min-width: 0; overflow-wrap: anywhere; }
.task-file-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.task-file-card .task-file-source { color: #334b68; }
.task-file-actions { margin-top: auto; padding-top: 10px; }

@media (min-width: 1180px) {
  .task-file-toolbar {
    grid-template-columns: minmax(250px, 1.4fr) minmax(150px, .75fr) minmax(150px, .75fr) max-content max-content;
    align-items: end;
  }
  .task-file-toolbar .task-file-mine {
    padding-top: 0;
  }
  .task-file-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-height: min(70dvh, 760px);
    overflow: auto;
    padding: 2px 6px 2px 2px;
  }
}

@media (min-width: 581px) and (max-width: 1179px) {
  .task-file-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-file-toolbar .task-file-mine {
    padding-top: 0;
  }
}

@media (max-width: 580px) {
  .task-file-toolbar { grid-template-columns: minmax(0, 1fr); }
  .task-file-toolbar .task-file-mine { min-height: 44px; padding-top: 0; }
  .task-file-actions > :is(.text-button, .task-record-link) {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
    line-height: 1.5;
    white-space: nowrap;
  }
}

.prototype-detail[hidden] {
  display: none;
}

/* Task reading and editing share one stable, Human-facing layout. */
.task-loading { padding: 48px 24px; min-height: 240px; }
#task-detail-content[hidden], #task-detail-loading[hidden] { display: none; }
.task-attention { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 16px; background: var(--status-warning-soft); border: 1px solid #e9d8a2; border-radius: 12px; }
.task-attention[hidden] { display: none; }
.task-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.task-jump-nav button { border: 1px solid #d9e2ef; border-radius: 20px; padding: 9px 14px; background: #fff; color: #24549a; cursor: pointer; }
.task-jump-nav button[hidden] { display: none; }
.task-settings > summary, .task-compose-panel > summary { font-size: var(--font-section-title); font-weight: 650; cursor: pointer; padding: 8px 0; }
.task-settings[open] > summary, .task-compose-panel[open] > summary { margin-bottom: 16px; }
.task-settings > .prototype-card { box-shadow: none; margin-top: 12px; }
#project-action-result:empty { display: none; }
#project-detail-description { white-space: pre-line; }
.task-work-technical { margin-top: 10px; color: #606b7a; font-size: var(--font-meta); }
.task-work-technical summary { cursor: pointer; }
.task-earlier-work { border: 1px solid #e1e7ef; border-radius: 12px; padding: 12px; }
.task-earlier-work > summary { cursor: pointer; font-size: var(--font-control); line-height: 1.6; overflow-wrap: anywhere; }
.task-earlier-work[open] > summary { margin-bottom: 12px; }
.task-work-technical small { display: block; margin-top: 8px; overflow-wrap: anywhere; }
.project-progress-copy > h4, .task-collaboration-update h4 { font-size: var(--font-item-title); margin: 8px 0; overflow-wrap: anywhere; }
.task-content-excerpt { margin: 6px 0 0; font-weight: 400; color: #596777; line-height: 1.6; font-size: var(--font-body); overflow-wrap: anywhere; }
.task-readable-body { padding: 18px; font-size: var(--font-body); line-height: 1.85; color: #253348; overflow-wrap: anywhere; }
.task-readable-body p { margin: 8px 0; white-space: pre-wrap; }
.task-readable-body h3, .task-readable-body h4, .task-readable-body h5, .task-readable-body h6 { margin: 20px 0 8px; line-height: 1.5; }
.task-readable-body ul, .task-readable-body ol { padding-left: 24px; }
.task-readable-body pre, .task-readable-body code { white-space: pre-wrap; overflow-wrap: anywhere; background: #f3f5f8; }
.task-readable-body blockquote, .task-reply-form blockquote { border-left: 3px solid #c8d8ee; margin: 10px 0; padding: 8px 14px; color: #596777; background: #f6f8fc; }
.task-original-source { margin: 0 18px 16px; }
.task-original-source summary { cursor: pointer; color: #596777; font-size: var(--font-control); }
.task-record-reply > summary { color: #24549a; cursor: pointer; padding: 8px 0; font-size: var(--font-control); }
.task-reply-form { display: grid; gap: 12px; padding: 16px; border: 1px solid #dce5f1; border-radius: 12px; background: #f8faff; }
.task-reply-form p { margin: 0; color: #596777; line-height: 1.6; font-size: var(--font-meta); }
.task-reply-form textarea { box-sizing: border-box; width: 100%; min-height: 100px; resize: vertical; border: 1px solid #c7d4e5; border-radius: 8px; padding: 12px; font: inherit; line-height: 1.6; background: #fff; }
.task-reply-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
#task-submission-blockers details { padding: 12px; margin: 12px 0; border: 1px solid #ead8ac; border-radius: 10px; }
#task-submission-blockers p { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.7; }
.task-jump-nav button:focus-visible, .task-reply-form textarea:focus-visible, .task-record-reply summary:focus-visible { outline: 3px solid #86ace6; outline-offset: 3px; }
@media (min-width: 1101px) {
  .workspace.project-workspace-mode { grid-template-columns: 150px 290px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .task-readable-body {
  font-size: var(--font-body); padding: 12px; }
  .task-reply-form { padding: 12px; }
  .task-attention { align-items: flex-start; flex-direction: column; }
  .task-reply-actions > button { min-height: 42px; }
  #project-detail .prototype-metrics article { min-height: 0; padding: 10px 12px; gap: 4px; }
  #project-detail .prototype-metrics strong { font-size: var(--font-item-title); }
}
@media (max-width: 860px) {
  .workspace.project-workspace-mode.project-detail-open .context-sidebar { display: none; }
}

#project-invitation-actions {
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

#project-invitation-actions[hidden] {
  display: none;
}

#project-invitation-actions > div:first-child {
  display: grid;
  gap: 4px;
}

.prototype-detail-heading,
.friend-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #edf0f4;
  padding-bottom: 16px;
}

.prototype-detail-heading > div:first-child {
  min-width: 0;
}

.prototype-detail-heading h2,
.friend-hero h2 {
  margin: 3px 0 0;
  color: #202124;
  font-size: var(--font-page-title);
  line-height: 1.2;
}

.prototype-detail-heading .section-intro {
  max-width: 720px;
  margin: 8px 0 0;
}

.prototype-detail-actions,
.friend-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.prototype-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: #e6f4ea;
  color: #137333;
  padding: 4px 10px;
  font-size: var(--font-caption);
  font-weight: 700;
  white-space: nowrap;
}

.prototype-status.archived,
.prototype-status.offline {
  background: #f1f3f4;
  color: #5f6368;
}

.prototype-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.prototype-metrics article {
  display: grid;
  gap: 6px;
  border: 1px solid #e3e7ed;
  border-radius: 14px;
  background: #fff;
  padding: 13px 14px;
}

.prototype-metrics span {
  color: #70757a;
  font-size: var(--font-meta);
}

.prototype-metrics strong {
  color: #202124;
  font-size: var(--font-item-title);
}

#project-state-axes {
  font-size: var(--font-item-title);
  line-height: 1.45;
}

.prototype-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 14px;
}

.prototype-card {
  min-width: 0;
  border: 1px solid #e3e7ed;
  border-radius: 17px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 3px 12px rgba(60, 64, 67, 0.06);
}

.prototype-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.prototype-card-heading > div {
  display: grid;
  gap: 2px;
}

.prototype-card-heading span:not(.count-pill) {
  color: #70757a;
  font-size: var(--font-caption);
}

.prototype-card-heading h3 {
  margin: 0;
  color: #202124;
  font-size: var(--font-section-title);
}

.prototype-card .entry-form label,
.task-review-note > span {
  color: #3c4043;
  font-size: var(--font-control);
  font-weight: 700;
}

.prototype-card .entry-form select,
.prototype-card .entry-form textarea,
.task-review-note textarea {
  width: 100%;
  border: 1px solid #dadce0;
  border-radius: 11px;
  outline: none;
  background: #fff;
  color: #202124;
  padding: 10px 12px;
  resize: vertical;
}

.prototype-card .entry-form select {
  min-height: 44px;
}

.prototype-card .entry-form textarea:focus,
.prototype-card .entry-form select:focus,
.task-review-note textarea:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
}

.task-field-help,
.task-optional-field > p {
  margin: -3px 0 3px;
  color: #70757a;
  font-size: var(--font-meta);
  line-height: 1.6;
}

.task-optional-field {
  border: 1px solid #e3e7ed;
  border-radius: 12px;
  background: #f8f9fa;
  padding: 10px 12px;
}

.task-optional-field summary {
  color: #185abc;
  font-size: var(--font-control);
  font-weight: 700;
  cursor: pointer;
}

.task-optional-field[open] {
  display: grid;
  gap: 9px;
}

.task-optional-field[open] summary {
  margin-bottom: 2px;
}

.task-optional-field > p strong {
  color: #3c4043;
  font-weight: 650;
}

.task-review-result {
  border: 1px solid #d2e3fc;
  border-radius: 12px;
  background: #f8fbff;
  padding: 12px 14px;
}

.task-review-result.accepted {
  border-color: #ceead6;
  background: #f4fbf5;
}

.task-review-result > span {
  color: #5f6368;
  font-size: var(--font-caption);
  font-weight: 700;
}

.task-review-result > p {
  margin: 6px 0 0;
  color: #202124;
  font-size: var(--font-body);
  line-height: 1.65;
  white-space: pre-wrap;
}

.task-review-note {
  display: grid;
  gap: 7px;
  margin: 12px 0;
}

.project-member-list,
.friend-agent-list,
.friend-project-list,
.project-activity-list {
  display: grid;
  gap: 8px;
}

.project-member-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  border-radius: 11px;
  background: #f8f9fa;
  color: #202124;
  padding: 9px 10px;
  text-align: left;
}

.project-member-row.interactive {
  font: inherit;
  cursor: pointer;
}

.project-member-row.interactive:hover {
  background: #e8f0fe;
}

.project-member-avatar {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #fef7e0;
  color: #b06000;
  font-size: var(--font-caption);
  font-weight: 700;
}

.project-member-avatar.current {
  background: #e8f0fe;
  color: #185abc;
}

.project-member-row > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.project-member-row strong,
.project-member-row small {
  font-size: var(--font-meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-member-row strong {
  font-size: var(--font-control);
}

.project-member-row small {
  color: #70757a;
  font-size: var(--font-meta);
}

.project-member-arrow {
  color: #1a73e8;
  font-size: var(--font-item-title);
}

.project-activity-card {
  padding-bottom: 12px;
  scroll-margin-top: 96px;
}

.project-activity-card:focus {
  outline: 3px solid rgba(26, 115, 232, 0.22);
  outline-offset: 3px;
}

.project-activity-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  border: 1px solid #e3e7ed;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.project-activity-row:target {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.14);
  scroll-margin-top: 96px;
}

.project-activity-avatar,
.project-progress-avatar {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #e8f0fe;
  color: #185abc;
  font-size: var(--font-meta);
  font-weight: 800;
}

.project-activity-avatar.actor-platform {
  background: #f3e8fd;
  color: #7627bb;
}

.project-activity-copy,
.project-progress-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.project-activity-heading,
.project-progress-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-activity-heading strong {
  color: #202124;
  font-size: var(--font-control);
  font-weight: 750;
}

.project-activity-heading time,
.project-activity-agent,
.project-progress-copy > small {
  color: #80868b;
  font-size: var(--font-meta);
}

.project-activity-heading time {
  white-space: nowrap;
}

.project-activity-action,
.task-activity-text-body {
  margin: 0;
  color: #3c4043;
  font-size: var(--font-body);
  line-height: 1.55;
  white-space: pre-wrap;
}

.task-activity-attachment {
  margin-top: 3px;
  border: 1px solid #d7e3f4;
  border-radius: 10px;
  background: #f8fbff;
  overflow: hidden;
}

.task-activity-attachment > summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  cursor: pointer;
  list-style: none;
}

.task-activity-attachment > summary::-webkit-details-marker {
  display: none;
}

.task-activity-attachment-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #e8f0fe;
  color: #185abc;
  font-size: var(--font-caption);
  font-weight: 800;
}

.task-activity-attachment > summary > span:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 2px;
}

.task-activity-attachment > summary strong,
.task-activity-attachment > summary small {
  font-size: var(--font-meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-activity-attachment > summary strong {
  color: #202124;
  font-size: var(--font-item-title);
}

.task-activity-attachment > summary small {
  color: #70757a;
  font-size: var(--font-meta);
}

.task-activity-attachment-preview {
  max-height: 320px;
  margin: 0;
  border-top: 1px solid #d7e3f4;
  background: #fff;
  color: #3c4043;
  font: var(--font-meta)/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.friend-hero {
  align-items: center;
}

.friend-detail-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 20px;
  background: #fef7e0;
  color: #b06000;
  font-size: 1.35rem;
  font-weight: 700;
}

.friend-hero-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.friend-hero-copy p:last-child {
  margin: 7px 0 0;
  color: #5f6368;
  font-size: var(--font-body);
}

.friend-detail-grid .capability-row {
  margin: 0;
}

.friend-detail-note {
  margin: 14px 0 0;
  color: #5f6368;
  font-size: var(--font-meta);
  line-height: 1.7;
}

.friend-agent-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  background: #f8f9fa;
  padding: 9px 10px;
}

.friend-agent-row > span {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 10px;
  background: #e6f4ea;
  color: #137333;
  font-size: var(--font-caption);
  font-weight: 700;
}

.friend-agent-row > div,
.friend-project-row > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.friend-agent-row strong,
.friend-project-row strong {
  color: #202124;
  font-size: var(--font-meta);
}

.friend-agent-row small,
.friend-project-row small {
  color: #70757a;
  font-size: var(--font-caption);
}

.friend-project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 1px solid #edf0f4;
  border-radius: 11px;
  background: #fff;
  color: #185abc;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.friend-project-row:hover {
  border-color: #d2e3fc;
  background: #f8fbff;
}

.friend-project-row > span:last-child {
  font-size: var(--font-caption);
  white-space: nowrap;
}

.prototype-inline-empty {
  margin: 0;
  border-radius: 11px;
  background: #f8f9fa;
  color: #70757a;
  padding: 12px;
  font-size: var(--font-meta);
}

.prototype-dialog textarea {
  resize: vertical;
}

.task-id-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
  color: #5f6368;
  font-size: var(--font-caption);
}

.task-id-row code {
  max-width: 100%;
  border-radius: 7px;
  background: #f1f3f4;
  color: #202124;
  padding: 5px 7px;
  overflow-wrap: anywhere;
  user-select: all;
}

.task-agent-choice-row {
  display: grid;
  gap: 10px;
}

.task-agent-option-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.task-agent-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #e3e7ed;
  border-radius: 11px;
  padding: 9px 10px;
  cursor: pointer;
}

.task-agent-option:has(input:checked) {
  border-color: #a8c7fa;
  background: #f8fbff;
}

.task-agent-option span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.task-agent-option strong {
  color: #202124;
  font-size: var(--font-meta);
  overflow-wrap: anywhere;
}

.task-agent-option small {
  color: #80868b;
  font-size: var(--font-caption);
  overflow-wrap: anywhere;
}

.task-agent-primary-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.task-agent-primary-row label {
  color: #5f6368;
  font-size: var(--font-caption);
  font-weight: 700;
}

.task-agent-primary-row select {
  min-width: 0;
  border: 1px solid #dadce0;
  border-radius: 9px;
  background: #fff;
  padding: 9px 10px;
  font: inherit;
}

.project-collaboration-list {
  display: grid;
  gap: 9px;
}

.task-collaboration-updates {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow-wrap: anywhere;
  gap: 8px;
  border-top: 1px solid #e3e7ed;
  padding-top: 12px;
}

.task-collaboration-updates > h4,
.task-collaboration-updates > p {
  font-size: var(--font-meta);
  margin: 0;
}

.task-collaboration-updates > h4 {
  color: #202124;
  font-size: var(--font-item-title);
}

.task-collaboration-updates > p {
  color: #80868b;
  font-size: var(--font-meta);
}

.task-collaboration-update {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  border-left: 4px solid var(--human-accent, #1a73e8);
  border-radius: 9px;
  background: var(--human-surface, #f8fbff);
  padding: 9px 11px;
}

.task-collaboration-update.human-tone-0 { --human-accent: #1a73e8; --human-surface: #f8fbff; }
.task-collaboration-update.human-tone-1 { --human-accent: #7b1fa2; --human-surface: #fcf8ff; }
.task-collaboration-update.human-tone-2 { --human-accent: #137333; --human-surface: #f6fbf7; }
.task-collaboration-update.human-tone-3 { --human-accent: #b06000; --human-surface: #fffaf3; }
.task-collaboration-update.human-tone-4 { --human-accent: #c5221f; --human-surface: #fff8f7; }
.task-collaboration-update.human-tone-5 { --human-accent: #007b83; --human-surface: #f4fbfc; }

.task-collaboration-update > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.task-collaboration-update > div strong { margin-right: auto; }
.task-collaboration-update time,
.task-collaboration-update small { color: #80868b; font-size: var(--font-meta); }
.task-collaboration-update > div span {
  border-radius: 999px;
  background: #eef2f7;
  padding: 3px 6px;
  font-size: var(--font-caption);
}
.task-collaboration-update p { margin: 0; font-size: var(--font-body); line-height: 1.65; white-space: pre-wrap; }

.task-execution-state {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px dashed #c5cad1;
  border-radius: 10px;
  background: #f8f9fa;
  padding: 9px 11px;
}

.task-execution-state > summary {
  cursor: pointer;
  color: #3c4043;
  font-size: var(--font-control);
  font-weight: 700;
}

.task-execution-state > p {
  margin: 8px 0;
  color: #80868b;
  font-size: var(--font-meta);
}

.task-execution-state-row {
  display: grid;
  grid-template-columns: minmax(80px, 0.8fr) minmax(120px, 1.4fr) minmax(110px, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid #e3e7ed;
  padding: 7px 0;
  color: #5f6368;
  font-size: var(--font-meta);
}

.task-execution-state-row strong { color: #202124; }
.task-execution-state-row time { color: #80868b; }

.project-collaboration-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  border: 1px solid #e3e7ed;
  border-radius: 11px;
  padding: 10px 12px;
  border-left: 4px solid var(--human-accent, #1a73e8);
  background: var(--human-surface, #fff);
}

.project-collaboration-row.human-tone-0 { --human-accent: #1a73e8; --human-surface: #f8fbff; }
.project-collaboration-row.human-tone-1 { --human-accent: #7b1fa2; --human-surface: #fcf8ff; }
.project-collaboration-row.human-tone-2 { --human-accent: #137333; --human-surface: #f6fbf7; }
.project-collaboration-row.human-tone-3 { --human-accent: #b06000; --human-surface: #fffaf3; }
.project-collaboration-row.human-tone-4 { --human-accent: #c5221f; --human-surface: #fff8f7; }
.project-collaboration-row.human-tone-5 { --human-accent: #007b83; --human-surface: #f4fbfc; }

.project-collaboration-row .project-progress-avatar {
  background: var(--human-accent, #1a73e8);
  color: #fff;
}

.project-progress-heading strong {
  color: #202124;
  font-size: var(--font-control);
  margin-right: auto;
}

.project-progress-heading time {
  color: #80868b;
  font-size: var(--font-meta);
  white-space: nowrap;
}

.project-progress-heading > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #e8f0fe;
  color: #185abc;
  padding: 4px 7px;
  font-size: var(--font-caption);
}

.project-progress-copy p {
  margin: 0;
  color: #5f6368;
  font-size: var(--font-body);
  line-height: 1.55;
  white-space: pre-wrap;
}

.project-progress-heartbeat {
  color: #5f6368 !important;
}

.task-record-link {
  justify-self: start;
  color: #185abc;
  font-size: var(--font-control);
  font-weight: 700;
  text-decoration: none;
}

.task-record-link:hover,
.task-record-link:focus-visible {
  text-decoration: underline;
}

.task-record-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.task-record-toolbar > button {
  border: 1px solid #dadce0;
  border-radius: 999px;
  background: #fff;
  padding: 6px 9px;
  color: #5f6368;
  font: inherit;
  font-size: var(--font-control);
  cursor: pointer;
}

.task-record-toolbar > button.active {
  border-color: #1a73e8;
  background: #e8f0fe;
  color: #185abc;
  font-weight: 700;
}

.task-record-toolbar .task-record-more { margin-left: auto; }

.task-reply-relation-source {
  color: #5f6368;
  font-size: var(--font-meta);
}

.task-reply-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #f2d28b;
  border-radius: 8px;
  background: #fff8e1;
  padding: 7px 8px;
  color: #6f4e00;
  font-size: var(--font-meta);
}

.task-reply-suggestion-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.task-human-response-form {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  border-top: 1px solid #d7e3f4;
  padding-top: 9px;
}

.task-human-response-form label {
  display: grid;
  gap: 5px;
  color: #3c4043;
  font-size: var(--font-control);
  font-weight: 700;
}

.task-human-response-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #c5cad1;
  border-radius: 9px;
  background: #fff;
  padding: 8px 9px;
  color: #202124;
  font: inherit;
  font-weight: 400;
  line-height: 1.5;
}

.task-human-response-form .primary-action {
  justify-self: start;
}

.task-activity-human-request {
  border-left: 3px solid #b06000;
  background: #fff8e1;
  padding: 7px 9px;
}

.task-legacy-activity,
.task-run-activity {
  border: 1px dashed #c5cad1;
  border-radius: 11px;
  background: #f8f9fa;
  padding: 9px;
}

.task-legacy-activity > summary,
.task-run-activity > summary {
  cursor: pointer;
  color: #5f6368;
  font-size: var(--font-control);
  font-weight: 700;
}

.task-legacy-activity > .project-activity-list,
.task-run-activity > .project-activity-list {
  margin-top: 9px;
}

.project-invite-options {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}

.project-invite-option {
  display: grid;
  grid-template-columns: auto 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #e3e7ed;
  border-radius: 13px;
  padding: 9px 10px;
  cursor: pointer;
}

.project-invite-option:has(input:checked) {
  border-color: #a8c7fa;
  background: #f8fbff;
}

.project-invite-option > span:last-child {
  display: grid;
  gap: 3px;
}

.project-invite-option strong {
  font-size: var(--font-meta);
}

.project-invite-option small {
  color: #70757a;
  font-size: var(--font-caption);
}

@media (max-width: 1080px) {
  .prototype-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prototype-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .primary-navigation {
    gap: 3px;
  }

  .primary-nav-item {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 3px;
    min-width: 0;
    min-height: 58px;
    padding: 5px 2px;
  }

  .primary-nav-icon {
    width: 25px;
    height: 25px;
  }

  .primary-nav-icon img {
    width: 18px;
    height: 18px;
  }

  .primary-nav-item strong {
    font-size: var(--font-control);
  }

  .prototype-browser {
    max-height: none;
    padding: 0 10px 12px;
  }

  .prototype-browser-list {
    max-height: none;
    overflow: visible;
  }

  .prototype-filter:has([data-friend-filter]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prototype-filter:has([data-friend-filter]) .count-pill {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .prototype-module {
    padding: 16px;
  }

  .task-agent-choice-row {
    grid-template-columns: 1fr;
  }

  .task-agent-primary-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .prototype-detail-heading,
  .friend-hero {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .friend-hero-copy {
    flex: 1 1 calc(100% - 84px);
  }

  .friend-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .project-mobile-back,
  .friend-mobile-back {
    display: inline-flex;
  }

  .project-workspace-mode.project-detail-open #project-browser,
  .friend-workspace-mode.friend-detail-open #friend-browser,
  .project-workspace-mode:not(.project-detail-open) #project-board,
  .friend-workspace-mode:not(.friend-detail-open) #friend-directory {
    display: none;
  }
}

@media (max-width: 580px) {
  body {
    padding-bottom: 78px;
  }

  .workspace-sidebar {
    padding-top: 5px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom));
  }

  .primary-nav-item {
    min-height: 54px;
  }

  .primary-nav-item strong {
    font-size: var(--font-control);
  }

  .prototype-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prototype-metrics article,
  .prototype-card {
    padding: 12px;
  }

  .prototype-detail-actions {
    justify-content: flex-start;
  }

  #project-invitation-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-activity-row > div {
    min-width: 0;
  }

  .friend-detail-avatar {
    width: 56px;
    height: 56px;
    border-radius: 17px;
  }

  .friend-project-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}
.project-activity-recipients {
  color: var(--muted);
  font-size: var(--font-meta);
  overflow-wrap: anywhere;
}

.project-activity-recipients summary {
  cursor: pointer;
}

.project-activity-recipients summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.project-activity-recipients > div {
  margin-top: 4px;
}
.task-discussion, .task-record-reply {
  min-width: 0;
  overflow-wrap: anywhere;
}
.task-discussion {
  border: 2px solid #7fa8df;
  border-radius: 14px;
  background: #edf4fd;
  overflow: hidden;
}
.task-discussion summary, .task-record-reply summary {
  cursor: pointer;
}
.task-discussion > summary {
  display: grid;
  gap: 9px;
  padding: 14px 16px;
  list-style-position: outside;
}
.task-discussion[open] > summary {
  border-bottom: 2px solid #a9c5e9;
  background: #e3eefc;
}
.task-discussion-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: #202124;
}
.task-discussion-heading strong {
  font-size: var(--font-item-title);
  line-height: 1.45;
}
.task-discussion-heading time {
  flex: 0 0 auto;
  color: #70757a;
  font-size: var(--font-meta);
  white-space: nowrap;
}
.task-discussion-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.task-message-fact {
  display: inline-flex;
  min-width: 0;
  gap: 5px;
  color: #4b5563;
  font-size: var(--font-meta);
  line-height: 1.5;
}
.task-message-fact b {
  flex: 0 0 auto;
  color: #5f6368;
  font-weight: 700;
}
.task-discussion > div {
  display: grid;
  gap: 10px;
  background: #f2f6fb;
  padding: 12px;
}
.task-discussion .project-activity-row {
  border: 1px solid #b7c6d8;
  border-left: 5px solid var(--human-accent, #1a73e8);
  background: var(--human-surface, #fff);
  box-shadow: none;
}
.task-discussion .project-activity-row.human-tone-0 { --human-accent: #1a73e8; --human-surface: #f5f9ff; }
.task-discussion .project-activity-row.human-tone-1 { --human-accent: #7b1fa2; --human-surface: #fcf6ff; }
.task-discussion .project-activity-row.human-tone-2 { --human-accent: #137333; --human-surface: #f2faf4; }
.task-discussion .project-activity-row.human-tone-3 { --human-accent: #b06000; --human-surface: #fff8ec; }
.task-discussion .project-activity-row.human-tone-4 { --human-accent: #c5221f; --human-surface: #fff5f4; }
.task-discussion .project-activity-row.human-tone-5 { --human-accent: #007b83; --human-surface: #eefafb; }
.task-message-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin-top: 3px;
  border: 1px solid #e6bd72;
  border-radius: 9px;
  background: #fff4dd;
  padding: 9px 11px;
}
.task-message-context .task-message-fact {
  grid-column: 1 / -1;
}
.task-message-body {
  display: grid;
  gap: 7px;
  margin-top: 3px;
  border: 1px solid #8eb9ea;
  border-left: 4px solid #1a73e8;
  border-radius: 8px;
  background: #eaf3ff;
  padding: 10px 12px;
}
.task-message-body > strong {
  color: #185abc;
  font-size: var(--font-meta);
}
.task-discussion .project-activity-recipients > summary {
  display: inline-flex;
  border: 1px solid #8bc49a;
  border-radius: 999px;
  background: #e9f7ed;
  color: #176b35;
  padding: 5px 9px;
}
.task-discussion .task-activity-attachment {
  border-color: #8eb9ea;
  background: #eaf3ff;
}
.task-discussion .task-activity-attachment > summary {
  background: #eaf3ff;
}
.task-message-body .task-activity-text-body {
  margin: 0;
}
.task-discussion summary p {
  font-size: var(--font-body);
  color: var(--muted);
  margin: 6px 0 0;
}
.task-record-reply form {
  display: grid;
  gap: 8px;
}
.task-record-reply textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
}

@media (max-width: 580px) {
  .task-discussion-heading {
    display: grid;
    gap: 4px;
  }

  .task-discussion-heading time {
    white-space: normal;
  }

  .task-message-context {
    grid-template-columns: 1fr;
  }

  .task-message-context .task-message-fact {
    grid-column: 1;
  }

  .task-execution-state-row {
  font-size: var(--font-meta);
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .task-record-toolbar .task-record-more {
    width: 100%;
    margin-left: 0;
  }

  .task-reply-suggestion {
  font-size: var(--font-meta);
    align-items: flex-start;
    flex-direction: column;
  }

  .task-reply-suggestion-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

/* Role-level typography shared by Tasks, Friends, AI, Settings and dialogs. */
.workspace, .approval-dialog, .attachment-preview-dialog {
  font-size: var(--font-body);
  line-height: 1.6;
}
.workspace :is(.section-heading, .agent-detail-heading) h2 {
  font-size: var(--font-page-title);
  line-height: 1.3;
}
:is(.workspace, dialog) :is(.primary-action, .quiet-button, .text-button),
.task-jump-nav button, .thread-mobile-back {
  font-size: var(--font-control);
  line-height: 1.5;
}
:is(.workspace, dialog) :is(input, select, textarea) {
  font-size: var(--font-item-title);
  line-height: 1.5;
}
.dialog-heading h2 {
  font-size: var(--font-section-title);
  line-height: 1.4;
}
.task-attention { font-size: var(--font-control); }
.task-attention > strong { font-size: var(--font-item-title); }
.task-readable-body :is(h3, h4, h5, h6) {
  font-size: var(--font-item-title);
  line-height: 1.5;
  font-weight: 650;
}
.task-readable-body h3 { font-size: var(--font-section-title); }
.task-activity-attachment-preview { font-size: var(--font-meta); }
.task-activity-attachment > summary { align-items: start; }
.task-activity-attachment > summary strong {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.project-activity-heading, .project-progress-heading { flex-wrap: wrap; }
.project-activity-heading strong, .project-progress-heading strong { overflow-wrap: anywhere; }
.project-activity-heading time, .project-progress-heading time { margin-left: auto; }
.task-id-row { flex-wrap: wrap; }
.task-id-row code { font-size: var(--font-caption); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  :root { --font-page-title: 1.5rem; }
}
@media (max-width: 580px) {
  .project-activity-row, .project-collaboration-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
  }
  .project-activity-avatar, .project-progress-avatar { width: 28px; height: 28px; }
  .task-activity-attachment > summary {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 6px;
  }
  .task-activity-attachment-icon { width: 22px; height: 24px; }
}

@media (max-width: 580px) {
  .task-discussion > summary {
    padding: 12px;
  }

  .task-discussion-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
  }

  .task-discussion > div {
    gap: 8px;
    padding: 8px 6px;
  }

  .task-discussion .project-activity-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 10px;
  }

  .task-discussion .project-activity-avatar {
    display: none;
  }

  .task-discussion .project-activity-copy {
    width: 100%;
  }

  .task-message-context {
    gap: 5px;
    margin-top: 5px;
    border-block: 1px solid #e5e7eb;
    border-radius: 0;
    background: transparent;
    padding: 8px 0;
  }

  .task-message-context .task-message-fact {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 6px;
  }

  .task-message-body {
    margin-top: 5px;
    padding: 9px 0 9px 10px;
  }

  .task-activity-attachment {
    border: 1px solid #8eb9ea;
    border-radius: 8px;
  }

  .task-activity-attachment > summary {
    grid-template-columns: minmax(0, 1fr);
    padding: 9px 10px;
  }

  .task-activity-attachment-icon {
    display: none;
  }

  .task-readable-body {
    padding: 12px 10px;
  }

  .task-original-source {
    margin: 0 10px 12px;
  }
}


.task-assignment-targets,
.task-assignment-human {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.task-assignment-targets > legend {
  margin-bottom: 10px;
  font-size: var(--font-body);
}

#task-assignment-agent {
  display: grid;
  gap: 12px;
}

.task-assignment-human {
  display: grid;
  gap: 8px;
}

.task-assignment-human > legend {
  margin-bottom: 6px;
  font-size: var(--font-meta);
  color: #5f6368;
  overflow-wrap: anywhere;
}

.task-assignment-human .task-agent-option {
  min-height: 44px;
  font-size: var(--font-control);
  overflow-wrap: anywhere;
}

.task-assignment-human input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
}

.task-assignment-human .task-agent-option:focus-within {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

#task-assignment-selection {
  margin-top: 8px;
}

.prototype-detail-actions > .prototype-status,
.prototype-detail-actions > .quiet-button,
.prototype-detail-actions > .task-personal-menu > summary {
  box-sizing: border-box;
  min-height: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: var(--font-control);
  line-height: 1;
}

.prototype-detail-actions > .prototype-status {
  border: 1px solid #b7dfc2;
}

.task-personal-menu {
  position: relative;
}

.task-personal-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #3c4043;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.task-personal-menu > summary::-webkit-details-marker {
  display: none;
}

.task-personal-menu > summary::after {
  content: "⌄";
  color: #6b7280;
  font-size: 15px;
  transform: translateY(-1px);
}

.task-personal-menu[open] > summary {
  border-color: #9ab7e6;
  background: #f4f8ff;
  color: #185abc;
}

.task-personal-menu[open] > summary::after {
  transform: rotate(180deg) translateY(-1px);
}

.task-personal-actions {
  position: fixed;
  z-index: 30;
  display: grid;
  width: min(330px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 8px;
  padding: 14px;
  border: 1px solid #b8c7dc;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(32 51 79 / 18%);
}

.task-personal-menu:not([open]) > .task-personal-actions {
  display: none;
}

.task-personal-actions p {
  margin: 0;
  font-size: var(--font-meta);
  line-height: 1.55;
}

.task-personal-actions .quiet-button,
.task-personal-destination {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  text-align: start;
}

.task-personal-actions .task-status-action {
  border-color: #b7cced;
  background: #f7f9fc;
  color: #27364b;
  font-weight: 700;
}

.task-personal-destination {
  border: 1px solid #b7cced;
  border-radius: 10px;
  background: #edf4ff;
  color: #185abc;
  font: inherit;
  font-size: var(--font-control);
  font-weight: 700;
  cursor: pointer;
}
.task-new-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-start: 6px;
  border-radius: 50%;
  background: #dc3545;
  box-shadow: 0 0 0 2px #fff;
  vertical-align: 0.12em;
}
#back-to-top { display: none; }
@media (max-width: 860px) {
  .prototype-browser, .prototype-browser-list { height: auto; max-height: none; overflow: visible; }
  #back-to-top:not([hidden]) { display: block; position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40; min-width: 44px; min-height: 44px; background: white; border: 1px solid #ccc; border-radius: 22px; box-shadow: 0 2px 12px #0002; }
}

/* Actionable Human requests use full-width cards on both desktop and mobile. */
.task-attention { display: block; padding: 0; overflow: hidden; }
.task-attention-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  cursor: pointer;
  list-style: none;
}
.task-attention-details > summary::-webkit-details-marker { display: none; }
.task-attention-details > summary::after {
  content: "⌄";
  margin-left: auto;
  color: #866d2d;
  transition: transform 0.16s ease;
}
.task-attention-details[open] > summary::after { transform: rotate(180deg); }
.task-attention-count {
  border-radius: 999px;
  background: #f2df9f;
  padding: 2px 8px;
  color: #634f1c;
  font-size: var(--font-caption);
  font-weight: 700;
}
.task-attention-note {
  margin: 0;
  padding: 0 14px 12px;
  color: #766943;
  font-size: var(--font-meta);
}
.task-attention-item { min-width: 0; width: 100%; box-sizing: border-box; padding: 12px; background: #fff; border: 1px solid #dbc68a; border-radius: 10px; overflow-wrap: anywhere; }
.task-attention-details .task-attention-item { width: auto; margin: 0 12px 12px; }
.task-attention-item p { margin: 8px 0 12px; white-space: pre-wrap; }
.task-attention-item button { max-width: 100%; white-space: normal; }
.task-attention-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.task-attention-controls .text-button { padding: 6px 2px; }
.task-attention-controls .text-button.muted { color: #747970; }
.task-attention-feedback { display: block; min-height: 1em; margin-top: 6px; color: #8b3a2b; font-size: var(--font-caption); }

/* Recent collaboration is separate from assignment history. */
.task-latest { margin-bottom: 18px; min-width: 0; }
.task-latest h3 { margin: 0; }
.task-latest-item { padding: 14px 16px; margin-top: 10px; border: 1px solid #b9cde6; border-left: 4px solid #397dba; border-radius: 12px; background: #f0f6ff; overflow-wrap: anywhere; min-width: 0; }
.task-latest-item:nth-of-type(even) { background: #f0f8f3; border-color: #b6d3c1; border-left-color: #448665; }
.task-latest-byline { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.task-latest-byline time { color: #59677a; font-size: 13px; }
.task-latest-item p { margin: 8px 0; line-height: 1.6; white-space: pre-wrap; }
.task-work-history { padding: 12px; border: 1px solid #bdc8d7; background: #f4f6f9; border-radius: 12px; }
.task-work-history > summary { cursor: pointer; font-weight: 600; }
.task-work-history > p { color: #586579; line-height: 1.5; }
@media (max-width: 700px) { .task-latest-item { padding: 12px; } .task-work-history { padding: 8px; } }

.task-latest-agent { display: block; margin-top: 5px; color: #59677a; }

.attachment-preview-dialog .attachment-download-link { color: #e5efff; border-color: #7890b1; }

.task-context-dialog { width: min(900px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; box-sizing: border-box; border: 1px solid #a8bdd8; border-radius: 14px; padding: 18px; }
.task-context-dialog .content { white-space: pre-wrap; overflow-wrap: anywhere; }
.task-context-dialog article { padding: 14px; margin: 12px 0; background: #edf5ff; border: 1px solid #b4cdee; border-radius: 10px; }
.task-context-dialog input { max-width: 100%; box-sizing: border-box; }
.task-context-dialog button { font: inherit; color: #175fb7; background: #fff; border: 1px solid #aec3dd; border-radius: 8px; padding: 9px 13px; margin: 4px 6px 4px 0; cursor: pointer; }
.task-context-dialog label { display: block; margin: 12px 0; }
.task-context-dialog input:not([type="checkbox"]), .task-context-dialog textarea { display: block; width: 100%; font: inherit; border: 1px solid #aec3dd; border-radius: 8px; padding: 9px; box-sizing: border-box; }
.task-context-dialog textarea { min-height: 90px; }
.task-context-dialog input[type="checkbox"] { width: auto; }
.task-context-dialog summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.task-context-dialog button:focus-visible, .task-context-dialog input:focus-visible, .task-context-dialog textarea:focus-visible { outline: 3px solid #da8600; outline-offset: 2px; }

/* Keep the opening excerpt only while collapsed, without repeating the body. */
.task-activity-attachment-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  color: #526174;
  font-size: var(--font-meta);
  line-height: 1.55;
  margin-top: 6px;
}
.task-activity-attachment[open] .task-activity-attachment-excerpt { display: none; }
.project-activity-copy > .task-activity-source-reference {
  display: block;
  font-size: var(--font-caption);
  line-height: 1.5;
  color: #526174;
  overflow-wrap: anywhere;
}

.task-discussion > .task-discussion-order-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  color: #526174;
  font-size: var(--font-meta);
}
.task-discussion-order {
  font: inherit;
  color: #185abc;
  background: #fff;
  border: 1px solid #a8bcd6;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.task-discussion-order:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

/* A message is one card: title, body, then sharing and reply controls. */
.project-activity-copy .task-message-title { margin: 5px 0; font-size: var(--font-item-title); overflow-wrap: anywhere; }
.project-activity-copy .task-message-body,
.project-activity-copy .compact-message-reading {
  border: 0; border-radius: 0; background: transparent; padding: 0; margin: 4px 0;
}
.project-activity-copy .compact-message-reading > summary {
  display: block; padding: 0; border: 0; background: transparent;
}
.compact-message-excerpt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; }
.compact-message-reading[open] .compact-message-excerpt { display: none; }
.compact-message-toggle { display: block; color: #185abc; font-size: var(--font-meta); margin: 5px 0; }
.project-activity-copy > .task-readable-body { margin: 4px 0; }
.project-activity-copy .task-readable-body { padding: 0; border: 0; background: transparent; }
.project-activity-copy .task-readable-body > :first-child { margin-top: 0; }
.project-activity-copy .task-readable-body > :last-child { margin-bottom: 0; }
.task-message-footer { display: flex; flex-wrap: wrap; align-items: start; gap: 8px 16px; border-top: 1px solid #d6dfe8; padding-top: 8px; margin-top: 8px; font-size: var(--font-meta); color: #5f6368; }
.task-message-footer > .project-activity-recipients { flex: 1 1 220px; min-width: 0; margin: 0; }
.project-activity-copy .task-message-footer > .project-activity-recipients > summary {
  display: block; border: 0; background: transparent; padding: 0; color: #526174; border-radius: 0; font-size: var(--font-meta); white-space: normal;
}
.task-message-footer > .task-record-reply { margin: 0; }
.task-message-footer > .task-record-reply[open] { flex-basis: 100%; }
.compact-agent-source { color: #70757a; font-size: var(--font-caption); overflow-wrap: anywhere; }
.compact-agent-source > summary { cursor: pointer; }

.contact-request-entry { display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;margin-bottom:12px; }
[data-first-contact].has-pending::before {content:"";display:inline-block;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#dc334c;margin-right:6px;}

.contact-alert-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#dc334c;margin-left:6px}.contact-alert-dot[hidden]{display:none}

.task-content-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.task-content-tabs button { width: 100%; margin: 0; }
.task-content-tabs button[aria-pressed="true"] { background: #e7f0ff; border-color: #2878e8; color: #1459b8; font-weight: 700; }
#task-pane-work { display: grid; gap: 16px; }
#task-pane-work[hidden], #task-pane-files[hidden], #task-pane-discussion[hidden], #task-settings[hidden] { display: none; }
.task-discussion-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.task-discussion-search input { flex: 1 1 160px; min-width: 0; width: auto; }
#task-search-dialog :is(button, input) { min-height: 44px; padding: 8px 12px; border: 1px solid var(--workspace-border); border-radius: 8px; background: var(--workspace-surface); color: var(--text); font: inherit; }
#task-search-dialog button { min-width: 44px; cursor: pointer; }
#task-search-dialog .task-discussion-search button[type="submit"] { background: var(--workspace-accent); border-color: var(--workspace-accent); color: #fff; }
#task-search-dialog :is(button, input):focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 2px; }
.task-search-result { padding: 14px 0; border-bottom: 1px solid #d7e1f0; overflow-wrap: anywhere; }
.task-search-result p { white-space: pre-wrap; }
#project-activity-list[hidden], #task-discussion-results[hidden] { display: none; }
.task-record-options { margin-bottom: 10px; color: #606a78; }
.task-record-options > summary { cursor: pointer; font-size: 13px; padding: 4px 0; }
/* Task matters share the existing Task permission and navigation boundary. */
.task-matter-card { padding: 16px 0; border-top: 1px solid #dce3e8; overflow-wrap: anywhere; }
.task-matter-card h4 { margin: 0 0 8px; font-size: 16px; }
.task-chat-detail { min-width: 0; padding: 18px; border: 1px solid #dce3e8; border-radius: 16px; background: #fff; overflow-wrap: anywhere; }
.task-chat-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.task-chat-tools button { font-size: 12px; padding: 6px 8px; min-height: 32px; }
.task-chat-tools [aria-pressed="true"] { color: #185abc; background: #e8f0fe; }
.task-chat-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.task-chat-identity time { color: #70757a; font-size: 11px; }
.task-chat-identity strong { font-size: 13px; }
.task-chat-agent { display: block; margin-top: 5px; color: #70757a; font-size: 12px; }
.task-chat-messages { height: clamp(320px, 52dvh, 600px); overflow: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 14px 10px; background: #f6f8fb; border: 1px solid #e8edf4; border-radius: 12px; }
.task-chat-load-more { display: block; margin: 0 auto 10px; font-size: 12px; }
.task-chat-latest { display: block; margin: 8px auto 0; color: #185abc; font-size: 12px; }
.task-chat-load-more[hidden], .task-chat-latest[hidden], .task-chat-compose [hidden], .task-chat-messages [hidden] { display: none!important; }
.task-chat-text { margin-top: 8px; padding: 0; font-size: 14px; line-height: 1.85; }
.task-chat-text > :first-child { margin-top: 0; }
.task-chat-text > :last-child { margin-bottom: 0; }
.task-chat-text.is-collapsed { max-height: 7.4em; overflow: hidden; }
.task-chat-subject { display: block; margin-top: 10px; font-size: 14px; }
.task-chat-bubble > .task-chat-reference { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; text-align: left; white-space: normal; overflow-wrap: anywhere; border: 0; border-left: 3px solid #c5d1df; border-radius: 4px; background: rgb(82 100 122 / 6%); color: #52647a; font-size: 12px; line-height: 1.6; box-shadow: none; }
.task-chat-actions { margin: 4px 0 0; }
.task-chat-actions button { border: 0; background: transparent; box-shadow: none; padding: 4px; color: #52647a; }
.task-chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; border-top: 1px solid #dce3e8; padding-top: 14px; margin-top: 12px; }
.task-chat-compose > label, .task-chat-compose > .task-chat-quote, .task-chat-compose > .form-status { grid-column: 1 / -1; }
.task-chat-compose > .form-status:empty { display: none; }
.task-chat-compose > small { align-self: center; line-height: 1.6; }
.task-chat-compose label { display: grid; gap: 6px; font-size: 13px; }
.task-chat-compose textarea { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #dce3e8; border-radius: 9px; padding: 10px; font: inherit; }
.task-chat-compose > button { justify-self: end; }
.task-chat-compose small, .task-chat-empty { font-size: 12px; color: #70757a; }
.task-chat-quote { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px; background: #f8fafd; font-size: 12px; overflow-wrap: anywhere; }
.task-chat-message { display: flex; align-items: flex-start; gap: 8px; padding: 0; margin-bottom: 18px; }
.task-chat-message:last-child { margin-bottom: 0; }
.task-chat-avatar { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #506482; background: #e5ebf3; font-size: 11px; font-weight: 600; }
.task-chat-bubble { min-width: 0; max-width: min(85%, calc(100% - 54px)); padding: 12px; border: 1px solid #e1e7ef; border-radius: 2px 12px 12px; background: #fff; overflow-wrap: anywhere; }
.task-chat-message[data-mine="true"] { flex-direction: row-reverse; }
.task-chat-message[data-mine="true"] .task-chat-avatar { background: #dceaff; color: #185abc; }
.task-chat-message[data-mine="true"] .task-chat-bubble { border-color: #cadffc; border-radius: 12px 2px 12px 12px; background: #eaf3ff; }
.task-chat-bubble > button { font-size: 12px; padding: 6px 8px; }
.task-chat-bubble .task-reading { background: transparent; }
.task-chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; }
.task-invite-link-box { flex: 0 0 auto; padding: 12px 14px; border: 1px solid #d6e2cf; border-radius: 8px; background: #f0f5ec; }
.task-invite-link-box h4 { margin: 0; color: #415b37; font-size: 13px; }
.task-invite-link-box p { margin: 6px 0 10px; font-size: 12px; line-height: 1.7; color: #6d7c64; }
.task-invite-link-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.task-invite-link-box input { margin-top: 8px; }
.project-invite-option[hidden] { display: none!important; }
#task-history-records > summary { cursor: pointer; padding: 16px 0; color: #70757a; font-size: 12px; }
@media (max-width: 600px) {
  .task-chat-detail { padding: 12px; }
  .task-chat-messages { height: clamp(280px, 48dvh, 500px); padding: 12px 6px; }
  .task-chat-bubble { max-width: calc(100% - 40px); padding: 10px; }
  .task-chat-avatar { flex-basis: 26px; width: 26px; height: 26px; }
}
.task-matter-card p { white-space: pre-wrap; margin: 8px 0; }
.task-matter-card button { margin: 4px 8px 4px 0; }
.task-matter-contribution { display: grid; grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) auto; gap: 10px; align-items: center; border-left: 3px solid #bdd1dd; padding: 8px 12px; margin: 8px 0; overflow-wrap: anywhere; }
.task-matter-contribution p { margin: 5px 0; }
#task-matter-overview p { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 8em; overflow: auto; }
#task-matter-overview button { margin: 6px 8px 0 0; }
#task-matter-overview summary { cursor: pointer; }
#task-matter-overview summary h3 { display: inline; }
.task-matter-dialog { width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: 85dvh; padding: 0; border: 1px solid #dce3e8; border-radius: 16px; color: #233341; background: #fff; }
.task-matter-dialog::backdrop { background: rgb(20 35 50 / 40%); }
.task-matter-dialog > header { position: sticky; top: 0; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #dce3e8; z-index: 1; }
.task-matter-dialog h3 { margin: 0; overflow-wrap: anywhere; }
.task-matter-dialog-body { padding: 16px 20px; overflow-wrap: anywhere; }
.task-matter-dialog-body input, .task-matter-dialog-body select, .task-matter-dialog-body textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.task-matter-dialog-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { .task-matter-dialog-body { padding: 12px; } .task-matter-dialog > header { padding: 12px; } .task-matter-contribution { grid-template-columns: minmax(0, 1fr) auto; } .task-matter-contribution strong { grid-column: 1 / -1; } }

/* Task messenger: visual tokens and composition from the approved chat Demo.
   Phosphor library icons are embedded in index.html (see docs/PHOSPHOR_ICONS_LICENSE.txt). */
:root {
  --google-blue: #27834e;
  --cyan-soft: #e7eee2;
  --ink: #f3f4f0;
  --ink-soft: #eef1ed;
  --line: #e0e5dc;
  --line-strong: #cbd6c5;
  --text: #354033;
  --muted: #74806f;
  --shadow: 0 12px 40px #24372b0c, 0 1px 3px #24372b0a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body { background: var(--workspace-soft); padding: 0; }
body::before, .sky-glow { display: none; }
.topbar { height: 64px; min-height: 64px; padding: 0 24px; background: transparent; border: 0; }
.brand-mark { display: none; }
.brand-copy { flex-direction: row; align-items: center; gap: 16px; }
.brand-copy strong { font-size: 18px; color: var(--text); }
.brand-copy small { border-left: 1px solid var(--workspace-border); padding-left: 16px; font-size: 11px; color: var(--muted); }
.topbar-account { gap: 16px; }
.connection { background: transparent; border: 0; padding: 0; font-size: 11px; }
.top-human-avatar { background: var(--workspace-selected); color: var(--muted); border: 0; border-radius: 6px; }
.top-human-copy small { display: none; }
.top-human-name, #top-human-name { font-size: 12px; }
main, body > footer { width: calc(100% - 48px); max-width: 1510px; margin-inline: auto; }
body > footer { height: 40px; min-height: 0; border: 0; padding: 12px 0; font-size: 10px; color: var(--muted); }
.workspace, .workspace.project-workspace-mode {
  display: grid; grid-template-columns: 76px 294px minmax(0, 1fr); gap: 0;
  height: calc(100dvh - 104px); min-height: 460px; padding: 0;
  border: 1px solid var(--workspace-border); border-radius: 12px; overflow: hidden;
  background: var(--workspace-canvas); box-shadow: var(--shadow);
}
.workspace[hidden] { display: none; }
.workspace-sidebar {
  position: static; align-self: stretch; display: flex; flex-direction: column;
  width: auto; min-height: 0; height: 100%; padding: 20px 0 14px; inset: auto;
  border: 0; border-radius: 0; background: var(--workspace-accent); box-shadow: none; backdrop-filter: none;
}
.rail-brand { color: var(--muted); font-size: 26px; font-weight: 720; letter-spacing: -1.8px; text-align: center; text-decoration: none; margin: 0 0 26px; }
.person-card { display: flex; justify-content: center; border: 0; padding: 0; }
.person-card > div { display: none; }
.person-card .avatar { width: 36px; height: 36px; flex-basis: 36px; border: 0; border-radius: 7px; background: var(--workspace-selected); color: var(--muted); font-size: 11px; }
.primary-navigation { display: flex; flex-direction: column; gap: 9px; margin: 25px 0 0; flex: 1; }
.workspace-sidebar .primary-nav-item { position: relative; display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 4px; width: 100%; min-height: 60px; padding: 8px 2px; border: 0; border-radius: 0; background: transparent; color: var(--muted); box-shadow: none; }
.workspace-sidebar .primary-nav-item strong { font-size: 10px; color: inherit; font-weight: 500; }
.workspace-sidebar .primary-nav-item small { display: none; }
.workspace-sidebar .primary-nav-icon { width: 25px; height: 25px; border: 0; border-radius: 0; background: transparent; color: inherit; padding: 0; }
.workspace-sidebar .primary-nav-icon svg { width: 25px; height: 25px; fill: currentColor; stroke: none; }
.workspace-sidebar .primary-nav-item.active, .workspace-sidebar .primary-nav-item:hover { background: var(--workspace-accent); color: var(--muted); }
.workspace-sidebar .primary-nav-item.active::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; background: var(--workspace-accent); border-radius: 0 2px 2px 0; }
.workspace-sidebar .sidebar-actions { display: flex; align-self: stretch; flex-direction: column; gap: 7px; width: 100%; padding: 10px 0 0; margin: 0; border: 0; }
.sidebar-actions .quiet-button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; border: 0; padding: 10px; background: transparent; color: var(--muted); }
.sidebar-actions .quiet-button span { display: none; }
.sidebar-actions .quiet-button:hover { color: var(--muted); background: var(--workspace-accent); }
.context-sidebar, .workspace.thread-workspace-mode .context-sidebar, .workspace.agent-workspace-mode .context-sidebar {
  position: static; display: flex; flex-direction: column; align-self: stretch; min-height: 0; height: 100%;
  max-height: none; overflow: auto; border: 0; border-right: 1px solid var(--workspace-border); border-radius: 0;
  padding: 0; background: var(--workspace-canvas); box-shadow: none; backdrop-filter: none;
}
.context-heading { padding: 24px 20px 16px; }
.context-navigation { padding: 0; }
.context-navigation > [data-context-module="projects"], .context-navigation > [data-context-module="friends"] { display: none; }
#project-browser { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; padding: 0; }
#project-browser[hidden] { display: none; }
#project-browser .prototype-browser-heading { padding: 24px 20px 18px; gap: 8px; }
#project-browser .prototype-browser-heading > div { gap: 8px; flex: 1; }
#project-browser .prototype-browser-heading > div > span { font-size: 10px; color: var(--muted); }
#project-browser .prototype-browser-heading strong { font-size: 18px; font-weight: 600; color: var(--text); }
#project-browser .count-pill { border: 0; background: transparent; font-size: 10px; padding: 0; color: var(--muted); }
#project-browser-new { width: 30px; height: 30px; min-height: 30px; padding: 4px; border: 0; background: var(--workspace-soft); color: var(--muted); border-radius: 6px; box-shadow: none; }
#project-browser-new span { display: none; }
#project-browser .thread-search { margin: 0 20px 14px; }
#project-browser .thread-search > span { display: none; }
#project-search-input { height: 36px; border: 1px solid transparent; border-radius: 6px; padding: 9px 12px; background: var(--workspace-soft); color: var(--text); font-size: 12px; }
#project-search-input:focus { border-color: var(--workspace-border); background: white; }
#project-filter { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; padding: 0 20px 8px; gap: 18px; border-bottom: 1px solid var(--workspace-border); }
#project-filter button, #project-filter-more > summary { min-height: 36px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
#project-filter > button.active, #project-filter-more > summary.active { color: var(--workspace-accent); box-shadow: inset 0 -2px var(--workspace-accent); font-weight: 600; }
#project-filter-more { position: relative; min-width: 0; }
#project-filter-more > summary { display: flex; align-items: center; gap: 5px; list-style: none; }
#project-filter-more > summary::-webkit-details-marker { display: none; }
#project-filter-current { font-size: 11px; color: var(--muted); }
#project-filter-current:not([hidden])::before { content: "· "; }
.project-filter-chevron { margin-left: 3px; font-size: 14px; }
#project-filter-more[open] .project-filter-chevron { transform: rotate(180deg); }
.project-filter-menu { position: absolute; z-index: 30; top: calc(100% + 5px); left: -12px; display: grid; width: 164px; max-height: min(300px, calc(100dvh - 220px)); overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid var(--workspace-border); border-radius: 8px; background: var(--workspace-canvas); box-shadow: 0 8px 24px #26392424; }
#project-filter-more:not([open]) > .project-filter-menu { display: none; }
#project-filter .project-filter-menu button { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 8px 10px; border-radius: 5px; text-align: left; }
#project-filter .project-filter-menu button:hover { background: var(--workspace-soft); color: var(--workspace-accent); }
#project-filter .project-filter-menu button.active { background: var(--workspace-soft); color: var(--workspace-accent); font-weight: 600; }

#project-filter :is(button,summary):focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; }
@media (max-width: 600px) {
  #project-filter > button, #project-filter-more > summary, #project-filter .project-filter-menu button { min-height: 44px; }
}
#project-browser-list { display: flex; flex-direction: column; gap: 0; padding: 5px 0; flex: 1; overflow: auto; }
#project-browser-list .prototype-list-item { flex: 0 0 auto; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; min-height: 92px; border: 0; border-left: 3px solid transparent; border-radius: 0; padding: 18px 16px 18px 17px; background: transparent; box-shadow: none; }
#project-browser-list .prototype-list-item.active { background: var(--workspace-soft); border-left-color: var(--workspace-accent); }
#project-browser-list .prototype-list-item:hover { background: var(--workspace-soft); }
#project-browser-list .prototype-list-avatar { width: 42px; height: 42px; border-radius: 9px; background: var(--workspace-selected); color: var(--muted); font-size: 13px; }
#project-browser-list .prototype-list-copy strong { font-size: 13px; color: var(--text); font-weight: 600; }
#project-browser-list .prototype-list-copy small { font-size: 11px; color: var(--muted); }
#project-browser-list .prototype-list-state { grid-column: 2; justify-self: start; margin-top: -5px; background: transparent; font-size: 10px; padding: 0; color: var(--muted); }
.workspace-content { display: block; height: 100%; min-height: 0; padding: 0; overflow: auto; background: var(--workspace-canvas); }
.content-section { border: 0; border-radius: 0; box-shadow: none; background: var(--workspace-canvas); backdrop-filter: none; }
#project-board { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0; gap: 0; }
#project-detail, #task-detail-content { display: flex; flex-direction: column; flex: 1; height: 100%; min-height: 0; gap: 0; }
#project-detail[hidden], #task-detail-content[hidden] { display: none; }
#project-detail .prototype-detail-heading { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: nowrap; gap: 20px; padding: 13px 28px; border-bottom: 1px solid var(--workspace-border); }
#project-detail .task-header-summary { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; overflow: hidden; }
#project-detail .task-header-summary #project-detail-title { flex: 1 1 auto; min-width: 4em; }
#project-detail-title { font-size: 18px; line-height: 1.5; font-weight: 600; margin: 0; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-chat-kind { display: none; }
.task-header-members { flex: 0 0 auto; margin: 0; }
#task-members-open { font-size: 11px; color: var(--muted); font-weight: 400; padding: 0; }
#task-members-open strong { font-weight: 500; }
.task-id-row { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: 8px; font-size: 12px; margin: 0 0 16px; color: var(--muted); }
.task-id-row code { display: block; flex: 1 1 240px; min-width: 0; background: transparent; color: var(--muted); padding: 0; font-size: 12px; white-space: normal; overflow-wrap: anywhere; user-select: text; }
#project-task-id-copy { flex: 0 0 auto; font-size: 12px; padding: 5px 8px; color: var(--muted); }
#task-info-copy-status:empty { display: none; }
#project-detail .prototype-detail-actions { gap: 12px; flex-wrap: nowrap; }
#project-detail-status { font-size: 10px; font-weight: 500; background: transparent; color: var(--muted); padding: 0; }
#project-invite, #task-history-open { display: flex; align-items: center; justify-content: center; width: 30px; height: 32px; min-height: 32px; padding: 4px; border: 0; background: transparent; color: var(--muted); border-radius: 5px; }
#project-invite span, #task-history-open span { display: none; }
#project-invite[hidden] { display: none; }
#task-jump-nav { gap: 9px; flex-wrap: nowrap; padding: 0; border: 0; background: none; }
#task-jump-nav button { display: flex; align-items: center; gap: 6px; width: auto; min-height: 32px; padding: 4px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 12px; }
#task-jump-nav button[data-task-pane="discussion"][aria-pressed="true"] { display: none; }
#task-jump-nav button[aria-pressed="true"] { color: var(--workspace-accent); background: var(--workspace-soft); }
.task-personal-menu { position: relative; }
.task-personal-menu > summary { display: flex; align-items: center; justify-content: center; width: 30px; min-height: 32px; padding: 0; border: 0; border-radius: 4px; color: var(--muted); background: transparent; list-style: none; }
.task-personal-menu > summary::-webkit-details-marker { display: none; }
.task-personal-actions { right: 0; width: 270px; z-index: 30; border-color: var(--workspace-border); background: var(--workspace-canvas); border-radius: 9px; box-shadow: 0 15px 45px #24372b26; }
#project-action-result:not(:empty) { flex: 0 0 auto; max-height: 64px; overflow: auto; padding: 6px 24px; margin: 0; font-size: 12px; background: #f6f4e8; }
#task-pane-discussion, #task-matters, #task-matter-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#task-pane-discussion[hidden], #task-pane-work[hidden], #task-pane-files[hidden] { display: none; }
#task-pane-work, #task-pane-files { min-height: 0; overflow: auto; padding: 24px; }
.task-chat-detail { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--workspace-soft); }
.task-chat-detail > .task-chat-tools { flex: 0 0 auto; margin: 0; padding: 6px 25px 0; gap: 14px; }
.task-chat-tools button { border: 0; background: transparent; padding: 2px 0; min-height: 27px; color: var(--muted); font-size: 10px; box-shadow: none; }
.task-chat-tools button[aria-pressed="true"] { color: var(--workspace-accent); background: transparent; box-shadow: inset 0 -1px var(--workspace-accent); }
.task-chat-messages { flex: 1; height: auto; min-height: 0; border: 0; border-radius: 0; padding: 20px 32px 24px; background: var(--workspace-soft); scrollbar-width: thin; scrollbar-color: #d7dfd0 transparent; }
.task-chat-load-more { flex: 0 0 auto; border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 3px; margin: 0; min-height: 25px; font-size: 10px; box-shadow: none; }
.task-chat-latest { position: absolute; right: 26px; bottom: calc(var(--task-chat-composer-height, 144px) + 12px); margin: 0; padding: 8px 12px; border: 1px solid var(--workspace-border); border-radius: 7px; background: var(--workspace-canvas); color: var(--workspace-accent); box-shadow: 0 4px 15px #23352a10; z-index: 2; }
.task-chat-message { gap: 10px; margin: 0 0 26px; }
.task-chat-column { display: flex; flex-direction: column; align-items: flex-start; max-width: min(76%, 780px); min-width: 0; }
.task-chat-avatar { width: 36px; height: 36px; flex-basis: 36px; border-radius: 7px; background: var(--workspace-selected); color: var(--muted); margin-top: 24px; font-size: 11px; }
.task-chat-identity { gap: 5px 8px; color: var(--muted); min-height: 17px; margin-bottom: 7px; line-height: 1.5; }
.task-chat-identity strong { font-size: 12px; font-weight: 500; }
.task-chat-identity time { color: var(--muted); font-size: 10px; }
.task-chat-agent { margin: 0; color: var(--muted); font-size: 10px; }
.task-chat-bubble { max-width: 100%; padding: 13px 16px; border: 1px solid var(--workspace-border); border-radius: 2px 8px 8px 8px; background: #fff; color: var(--text); }
.task-chat-message[data-mine="true"] .task-chat-column { align-items: flex-end; width: min(88%, 920px); max-width: min(88%, 920px); }
.task-chat-message[data-mine="true"] .task-chat-avatar { background: var(--workspace-selected); color: var(--muted); }
.task-chat-message[data-mine="true"] .task-chat-identity { flex-direction: row-reverse; }
.task-chat-message[data-mine="true"] .task-chat-bubble { width: 100%; box-sizing: border-box; background: var(--workspace-selected); border-color: var(--workspace-border); border-radius: 8px 2px 8px 8px; color: var(--workspace-accent); }
.task-chat-text { color: inherit; margin: 0; font-size: 14px; line-height: 1.85; }
.task-chat-subject { margin: 0 0 8px; font-size: 14px; }
.task-chat-bubble > .task-chat-reference { margin: 0 0 10px; padding: 7px 10px; border-left: 3px solid var(--workspace-accent); background: #dfe9d73d; color: var(--muted); font-size: 11px; border-radius: 0 4px 4px 0; }
.task-chat-bubble > button { background: transparent; border: 0; font-size: 11px; padding: 8px 0 0; color: var(--workspace-accent); box-shadow: none; }
.task-chat-actions { margin: 1px 0 -20px; opacity: 0; transition: opacity 120ms; }
.task-chat-actions button { padding: 0 4px; font-size: 10px; min-height: 21px; }
.task-chat-message:hover .task-chat-actions, .task-chat-message:focus-within .task-chat-actions { opacity: 1; }
.task-chat-compose { flex: 0 0 auto; box-sizing: border-box; height: 144px; max-height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 20px minmax(0, 1fr) 32px; gap: 4px 12px; background: var(--workspace-canvas); border-top: 1px solid var(--workspace-border); padding: 0 28px 12px; margin: 0; }
.task-chat-resize-handle { grid-column: 1 / -1; display: grid; place-items: center; min-width: 0; cursor: row-resize; touch-action: none; user-select: none; border-radius: 4px; }
.task-chat-resize-handle::after { content: ""; width: 44px; height: 3px; border-radius: 2px; background: var(--workspace-selected); }
.task-chat-resize-handle:hover::after, .task-chat-resize-handle:focus-visible::after, .is-resizing .task-chat-resize-handle::after { background: var(--workspace-accent); }
.task-chat-resize-handle:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: -2px; }
.task-chat-compose.is-resizing { user-select: none; }
.task-chat-compose > .form-status { min-height: 0; max-height: 48px; overflow: auto; margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.task-chat-compose label { gap: 0; }
.task-chat-compose textarea { display: block; min-height: 40px; height: 100%; resize: none; max-height: none; border: 0; border-radius: 0; padding: 8px 0; background: transparent; font-size: 14px; line-height: 1.8; color: var(--text); box-shadow: none; }
.task-chat-compose textarea::placeholder { color: var(--muted); }
.task-chat-compose textarea:focus-visible { outline: 1px solid var(--workspace-accent); outline-offset: 3px; }
.task-chat-compose > button { min-width: 85px; min-height: 32px; padding: 7px 20px; border: 0; border-radius: 5px; background: var(--workspace-accent); color: white; font-size: 11px; box-shadow: none; }
.task-chat-compose > button:disabled { opacity: 1; background: var(--workspace-selected); color: var(--muted); }
.task-chat-compose > small { color: var(--muted); font-size: 10px; }
.task-chat-quote { background: var(--workspace-soft); border-left: 3px solid var(--workspace-border); border-radius: 3px; padding: 7px 10px; font-size: 11px; color: var(--muted); }
.task-chat-quote button { background: none; border: 0; font-size: 11px; color: var(--muted); padding: 2px; }
.task-chat-empty { text-align: center; padding: 20px; }
.task-shell-dialog { width: min(760px, calc(100vw - 32px)); max-height: 86dvh; padding: 0; border: 1px solid var(--workspace-border); border-radius: 12px; background: var(--workspace-canvas); color: var(--text); box-shadow: 0 24px 90px #14291030; }
.task-shell-dialog::backdrop { background: #23332355; backdrop-filter: blur(3px); }
.task-shell-dialog > header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; position: sticky; top: 0; z-index: 2; background: var(--workspace-canvas); border-bottom: 1px solid var(--workspace-border); }
.task-shell-dialog > header h2 { margin: 0; font-size: 17px; font-weight: 600; }
.task-shell-dialog-body { padding: 22px; }
.task-shell-dialog .prototype-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.task-shell-dialog .prototype-metrics article { border: 0; border-radius: 7px; padding: 14px; background: var(--workspace-soft); }
.task-shell-dialog .prototype-metrics strong, .task-shell-dialog #project-state-axes { font-size: 14px; }
.task-shell-dialog #task-settings { margin-top: 20px; padding: 0; border: 0; box-shadow: none; }
.task-shell-dialog #task-settings > summary { font-size: 13px; color: var(--muted); }
.task-shell-dialog > .my-agent-shortcut { margin: 16px 22px 0; }
.task-agent-retained-note { grid-column: 1 / -1; margin: 6px 0 0; color: var(--muted); font-size: var(--font-caption); }
.task-shell-dialog #task-history-records > summary { display: none; }
.task-shell-dialog #task-records { border: 0; padding: 0; box-shadow: none; }
.task-shell-dialog .prototype-card { border-color: var(--workspace-border); box-shadow: none; border-radius: 8px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 861px) {
  .workspace, .workspace.project-workspace-mode { grid-template-columns: 64px 255px minmax(0, 1fr); }
  #project-detail .prototype-detail-heading { padding: 17px 20px; gap: 12px; }
  #project-detail .prototype-detail-actions { gap: 6px; }
  #project-detail-status, #task-jump-nav button[data-task-pane="files"] span { display: none; }
  .task-chat-column { max-width: 85%; }
  .task-chat-messages { padding: 20px; }
  .task-chat-identity time, .task-chat-agent { font-size: 9px; }
}
@media (max-width: 860px) {
  body { padding: 0; }
  .topbar { height: 46px; min-height: 46px; padding: 0 15px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { font-size: 10px; }
  .topbar-account .connection, .top-human-copy { display: none; }
  main { width: 100%; }
  body > footer { display: none; }
  .workspace, .workspace.project-workspace-mode { display: block; height: calc(100dvh - 46px); min-height: 0; padding: 0 0 64px; border: 0; border-radius: 0; box-shadow: none; }
  .workspace-sidebar { position: fixed; inset: auto 0 0; z-index: 20; display: block; height: 64px; padding: 2px 8px calc(2px + env(safe-area-inset-bottom)); background: var(--workspace-canvas); border-top: 1px solid var(--workspace-border); }
  .rail-brand, .person-card, .workspace-sidebar .sidebar-actions { display: none; }
  .primary-navigation { display: flex; flex-direction: row; gap: 0; height: 100%; margin: 0; }
  .workspace-sidebar .primary-nav-item { flex: 1; min-height: 52px; color: var(--muted); }
  .workspace-sidebar .primary-nav-item.active { background: transparent; color: var(--workspace-accent); }
  .workspace-sidebar .primary-nav-item.active::before { display: none; }
  .workspace-sidebar .primary-nav-item strong { font-size: 10px; }
  .context-sidebar { height: 100%; max-height: none; border: 0; }
  .workspace-content { height: 100%; }
  .workspace.project-workspace-mode:not(.project-detail-open) .workspace-content { display: none; }
  .workspace.project-workspace-mode.project-detail-open .context-sidebar { display: none; }
  .workspace.project-workspace-mode.project-detail-open .workspace-content { display: block; }
  .workspace.project-workspace-mode.project-detail-open { padding-bottom: 0; }
  .workspace.project-workspace-mode.project-detail-open .workspace-sidebar { display: none; }
  #project-browser .prototype-browser-heading { padding: 22px 20px 18px; }
  #project-browser-list .prototype-list-item { min-height: 90px; }
  #project-board { height: 100%; }
  #project-mobile-back { position: absolute; z-index: 2; left: 10px; top: 13px; width: 31px; height: 32px; overflow: hidden; white-space: nowrap; font-size: 0; padding: 0; margin: 0; border: 0; background: transparent; color: var(--muted); }
  #project-mobile-back::first-letter { font-size: 27px; }
  #project-detail .prototype-detail-heading { padding: 10px 12px 10px 46px; gap: 5px; align-items: center; }
  #project-detail .task-header-summary { gap: 8px; }
  #project-detail-title { font-size: 15px; }
  .task-header-members { margin: 0; }
  #task-members-open { font-size: 10px; }
  #project-detail .prototype-detail-actions { gap: 3px; }
  #project-detail-status, #project-invite, #task-history-open, #task-jump-nav button[data-task-pane="files"] span { display: none; }
  .task-personal-actions { position: fixed; inset: auto 0 0 0; width: 100%; max-height: min(68dvh, 560px); overflow: auto; border-radius: 18px 18px 0 0; padding: 18px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); box-shadow: 0 -18px 48px #2033272b; }
  .task-chat-detail > .task-chat-tools { padding: 5px 15px 0; }
  .task-chat-messages { padding: 16px 14px 22px; }
  .task-chat-column { max-width: calc(100% - 42px); }
  .task-chat-message { gap: 8px; margin-bottom: 25px; }
  .task-chat-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 10px; }
  .task-chat-bubble { max-width: 100%; padding: 11px 12px; }
  .task-chat-text { font-size: 13px; }
  .task-chat-identity { gap: 3px 6px; }
  .task-chat-identity strong { font-size: 11px; }
  .task-chat-agent, .task-chat-identity time { font-size: 9px; }
  .task-chat-actions { opacity: 1; }
  .task-chat-compose { padding: 0 16px calc(8px + env(safe-area-inset-bottom)); gap: 4px 8px; }
  .task-chat-compose textarea { font-size: 13px; }
  .task-chat-compose > small { font-size: 9px; }
  .task-chat-compose > button { min-width: 73px; }
  .task-chat-latest { right: 14px; }
  #task-pane-work, #task-pane-files { padding: 15px; }
  .task-shell-dialog-body { padding: 16px; }
  .task-shell-dialog .prototype-metrics { grid-template-columns: 1fr; }
}
@media (max-height: 650px) and (min-width: 861px) {
  .topbar { height: 45px; min-height: 45px; }
  .workspace, .workspace.project-workspace-mode { height: calc(100dvh - 70px); min-height: 350px; }
  body > footer { height: 25px; padding: 6px 0; }
  #project-detail .prototype-detail-heading { padding-top: 10px; padding-bottom: 10px; }
  .task-chat-compose { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .task-chat-actions { transition: none; } }
/* The quoted original and the draft share one editor surface. */
.task-chat-editor { grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; padding: 0; border: 1px solid transparent; border-radius: 8px; }
.task-chat-editor.has-quote { padding: 7px 10px 3px; margin: 0; background: var(--workspace-soft); border-color: var(--workspace-border); }
.task-chat-editor:focus-within.has-quote { border-color: var(--workspace-border); box-shadow: 0 0 0 2px #a9c7951a; }
.task-chat-editor .task-chat-quote { flex: 0 1 auto; flex-wrap: nowrap; align-items: stretch; min-height: 0; max-height: 76px; overflow: hidden; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--workspace-border); border-radius: 0; background: transparent; }
.task-chat-editor .task-chat-quote > span { flex: 1; min-width: 0; min-height: 0; overflow: auto; overflow-wrap: anywhere; }
.task-chat-editor .task-chat-quote > button { flex: 0 0 auto; align-self: flex-start; white-space: nowrap; }
.task-chat-editor label { display: block; flex: 1 1 auto; min-height: 0; }
.task-chat-editor.has-quote label { flex: 1 0 64px; min-height: 64px; }
.task-chat-editor.has-quote textarea { padding-top: 10px; outline: none; }
/* One editor focus ring; quoted text cannot cover the draft or dismiss control. */
.workspace .task-chat-editor:focus-within { border-color: var(--workspace-border); box-shadow: 0 0 0 2px #a9c7951a; }
.workspace .task-chat-editor textarea:focus-visible { outline: none; box-shadow: none; }
.workspace .task-chat-editor textarea { min-height: 0; }
.workspace .task-chat-editor .task-chat-quote > button { min-height: 24px; padding: 2px 4px; line-height: 20px; }
#task-search-open { display: flex; align-items: center; justify-content: center; width: 30px; height: 32px; min-height: 32px; padding: 4px; border: 0; background: transparent; color: var(--muted); border-radius: 5px; }
#task-search-open span { display: none; }
.task-search-hint { color: var(--muted); font-size: 12px; line-height: 1.8; }
#task-search-dialog .task-search-result { margin-top: 15px; padding: 15px; border: 1px solid var(--workspace-border); border-radius: 8px; font-size: 13px; }
#task-search-dialog .task-search-result strong { font-size: 12px; color: var(--muted); }
#task-history-records[hidden] { display: none !important; }
@media (max-width: 860px) { #task-search-open { display: none; } }
#task-focus-toggle { flex: 0 0 auto; width: 32px; min-height: 32px; padding: 4px; border: 0; background: transparent; color: var(--muted); }
#task-focus-toggle span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#task-focus-toggle:hover { background: var(--workspace-soft); }
@media (min-width: 861px) {
  .workspace.project-workspace-mode.task-focus-mode { grid-template-columns: minmax(0, 1fr); }
  .workspace.project-workspace-mode.task-focus-mode > .workspace-sidebar,
  .workspace.project-workspace-mode.task-focus-mode > .context-sidebar { display: none; }
  .task-focus-mode #task-focus-toggle svg { transform: rotate(180deg); }
}
@media (max-width: 860px) { #task-focus-toggle { display: none; } }
#project-detail .prototype-detail-heading > div:not(.prototype-detail-actions) { flex: 1; min-width: 0; }
.workspace-sidebar .primary-nav-item.active strong { color: inherit; }
#project-browser-list .prototype-list-item > .prototype-status { grid-column: 2; justify-self: start; padding: 0; margin-top: -6px; min-height: 0; background: transparent; color: var(--muted); font-size: 10px; }
#project-detail-status { border: 0; box-shadow: none; }
.task-personal-menu > summary svg { display: block; }
.task-personal-menu > summary::after { display: none; }
.task-info-description { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; line-height: 1.85; margin: 0 0 20px; }
.prototype-detail-actions > .task-personal-menu > summary { display: flex; align-items: center; justify-content: center; width: 30px; height: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; }
.task-personal-menu > summary svg, #project-mobile-back svg { flex: 0 0 22px; width: 22px; height: 22px; }
#project-mobile-back { align-items: center; justify-content: center; }
.personal-share-open { min-height: 30px; padding: 6px 11px; border: 1px solid var(--workspace-border); border-radius: 6px; background: var(--workspace-canvas); color: var(--muted); font-size: 11px; box-shadow: none; }
#personal-share-dialog { border: 1px solid var(--workspace-border); border-radius: 12px; background: var(--workspace-canvas); color: var(--text); }
#personal-share-dialog::backdrop { background: #23332355; backdrop-filter: blur(3px); }
#personal-share-dialog h2 { font-size: 18px; }
#personal-share-dialog .approval-submit { background: var(--workspace-accent); border-color: var(--workspace-accent); color: white; box-shadow: none; }
.friend-invitation-notice { background: var(--workspace-soft); }
@media (max-width: 860px) {
  .brand-actions { flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  .brand-copy small { display: none; }
  .personal-share-open { min-height: 30px; padding: 5px 8px; font-size: 10px; }
  #personal-share-dialog { padding: 20px; }
}

/* Shared workspace language: task chat, friends, AI and account settings. */
:root {
  --workspace-surface: #fbfcf9;
  --workspace-canvas: #f3f4f0;
  --workspace-soft: #edf2e8;
  --workspace-selected: #e5ebe1;
  --workspace-accent: #287d4c;
  --workspace-accent-hover: #226b40;
  --workspace-border: #dce4d5;
  --google-blue: var(--workspace-accent);
  --cyan: var(--workspace-accent);
  --cyan-soft: var(--workspace-soft);
}
.workspace[data-active-module]:not([data-active-module="projects"]) .workspace-content { background: var(--workspace-canvas); }
.workspace[data-active-module]:not([data-active-module="projects"]) .content-section { min-height: 100%; background: var(--workspace-canvas); padding: 26px 30px; }
.workspace .section-heading { gap: 16px; margin-bottom: 20px; align-items: center; }
.workspace :is(.section-heading h2, .agent-detail-heading h2, .friend-hero h2) { font-size: 20px; line-height: 1.45; font-weight: 600; letter-spacing: 0; }
.workspace :is(.section-tag, .section-intro) { color: var(--muted); letter-spacing: 0; }
.workspace .section-tag { font-size: 11px; margin: 0 0 6px; }
.workspace .section-intro { font-size: 12px; line-height: 1.85; margin: 0 0 22px; }
.workspace .context-heading { padding: 24px 20px 17px; min-height: 0; }
.workspace .context-heading > p:first-child { display: none; }
.workspace .context-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.workspace .context-heading > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.workspace .context-nav-item { min-height: 66px; padding: 14px 20px; border: 0; border-left: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none; }
.workspace .context-nav-item.active { background: var(--workspace-selected); border-left-color: var(--workspace-accent); }
.workspace .context-nav-item:hover { background: var(--workspace-soft); }
.workspace .context-nav-item strong { color: var(--text); font-size: 13px; font-weight: 550; }
.workspace .context-nav-item small { font-size: 11px; color: var(--muted); margin-top: 4px; }
.workspace .context-nav-item.active strong, .workspace .context-nav-item > span:last-child { color: var(--muted); }
.workspace .context-navigation > div { gap: 0; }
.workspace .context-navigation { margin: 0; }
.workspace .count-pill { background: transparent; color: var(--muted); border: 0; font-size: 11px; padding: 0; }
.workspace :is(.primary-action, .approval-submit), .approval-dialog .approval-submit { background: var(--workspace-accent); border: 1px solid var(--workspace-accent); border-radius: 6px; color: white; box-shadow: none; padding: 8px 14px; min-height: 35px; font-size: 12px; }
.workspace .primary-action:not(:disabled):hover, .approval-dialog .approval-submit:not(:disabled):hover { background: var(--workspace-accent-hover); box-shadow: none; }
.workspace .primary-action:disabled { opacity: .55; }
.workspace[data-active-module]:not([data-active-module="projects"]) :is(.workspace-content, .context-sidebar) :is(.quiet-button, .text-button), .approval-dialog :is(.quiet-button, .text-button) { border-color: var(--workspace-border); border-radius: 6px; background: var(--workspace-surface); color: var(--muted); box-shadow: none; font-size: 12px; padding: 8px 12px; }
.workspace[data-active-module]:not([data-active-module="projects"]) .workspace-content .quiet-button:hover, .approval-dialog .quiet-button:hover { background: var(--workspace-soft); border-color: var(--workspace-border); }
.workspace[data-active-module]:not([data-active-module="projects"]) .workspace-content .quiet-button.danger, .approval-dialog .quiet-button.danger { color: #a6433a; }
.workspace[data-active-module]:not([data-active-module="projects"]) .workspace-content .quiet-button.danger:hover { background: #fff0ed; border-color: #edc4bd; }
.workspace :is(.readonly-pill, .availability-badge) { border: 0; border-radius: 5px; background: var(--workspace-soft); color: var(--muted); font-size: 10px; padding: 5px 8px; }
.workspace .availability-card { margin-top: 20px; border: 1px solid var(--workspace-border); border-radius: 8px; padding: 16px; background: var(--workspace-soft); box-shadow: none; }
.workspace .availability-card strong { font-size: 12px; color: var(--muted); }
.workspace .availability-card p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.workspace .data-chip { font-size: 10px; padding: 4px 7px; min-height: 0; border-radius: 5px; }
.workspace :is(.capability-row span, .relation-chip) { font-size: 11px; border: 1px solid var(--workspace-border); background: var(--workspace-soft); color: var(--muted); border-radius: 5px; padding: 4px 9px; }
.workspace .empty-state, .workspace .prototype-inline-empty { color: var(--muted); font-size: 12px; line-height: 1.8; }
.workspace .thread-detail-empty { background: transparent; border: 0; box-shadow: none; min-height: 340px; }
.workspace .thread-detail-empty h2 { font-size: 18px; }
.workspace .thread-detail-empty p { max-width: 340px; font-size: 12px; line-height: 1.85; }
.workspace-empty-icon svg { width: 28px; height: 28px; }
.workspace .thread-detail-empty > span { border: 0; background: var(--workspace-soft); border-radius: 12px; color: var(--muted); box-shadow: none; }

/* Lists share the task sidebar's flat rows and soft selected state. */
#friend-browser, #agent-browser { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; border: 0; padding: 0; overflow: hidden; }
#friend-browser[hidden], #agent-browser[hidden] { display: none; }
#friend-browser > *, #agent-browser > * { flex: 0 0 auto; }
#friend-browser .thread-search, #agent-browser .thread-search { margin: 0 20px 14px; }
#friend-browser .thread-search > span, #agent-browser .thread-search > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#friend-search-input, #agent-search-input { min-height: 36px; height: 36px; border: 1px solid transparent; border-radius: 6px; background: var(--workspace-soft); color: var(--text); font-size: 12px; padding: 9px 12px; }
#friend-search-input:focus, #agent-search-input:focus { background: white; border-color: var(--workspace-border); }
#friend-filter { display: flex; gap: 6px 14px; flex-wrap: wrap; padding: 0 20px 12px; margin: 0; border-bottom: 1px solid var(--workspace-border); }
#friend-filter button { min-height: 28px; border: 0; border-radius: 0; background: transparent; padding: 3px 0; font-size: 11px; color: var(--muted); }
#friend-filter button.active { color: var(--workspace-accent); box-shadow: inset 0 -2px var(--workspace-accent); font-weight: 600; }
#friend-browser-count { margin-left: auto; align-self: center; }
#friend-browser .contact-request-entry { margin: 0 20px 14px; width: calc(100% - 40px); text-align: center; font-size: 11px; }
#friend-browser .friend-pending-notice { margin: 0 20px 12px; width: calc(100% - 40px); border: 1px solid #dbc99e; background: var(--status-warning-soft); color: var(--status-warning); border-radius: 6px; padding: 9px 12px; font-size: 11px; }
#friend-browser-list { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; padding: 5px 0; overflow-y: auto; }
#friend-browser-list .prototype-list-item { flex: 0 0 auto; }
#friend-browser-list .prototype-list-item { min-height: 84px; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 17px; border: 0; border-left: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none; }
#friend-browser-list .prototype-list-item.active { background: var(--workspace-selected); border-left-color: var(--workspace-accent); }
#friend-browser-list .prototype-list-item:hover { background: var(--workspace-soft); }
#friend-browser-list .prototype-list-avatar { width: 42px; height: 42px; border-radius: 8px; background: var(--workspace-selected); color: var(--muted); font-size: 14px; }
#friend-browser-list .prototype-list-copy strong { font-size: 13px; color: var(--text); font-weight: 600; }
#friend-browser-list .prototype-list-copy small { font-size: 11px; color: var(--muted); }
#friend-browser-list .prototype-status { grid-column: 2; justify-self: start; background: transparent; padding: 0; font-size: 10px; color: var(--muted); border: 0; }
#friend-browser-list .prototype-list-badge { grid-column: 2; justify-self: start; margin-top: -5px; padding: 0; background: transparent; color: var(--muted); font-size: 10px; }
#friend-browser-list > .empty-state { padding: 12px 20px; }
.workspace[data-active-module="relay"] .context-navigation { padding: 0 20px 16px; }
.workspace[data-active-module="relay"] .context-navigation > div:not([hidden]) { display: flex; width: 100%; gap: 16px; }
.workspace[data-active-module="relay"] .context-nav-item { width: auto; min-height: 30px; border: 0; padding: 5px 0; background: transparent; }
.workspace[data-active-module="relay"] .context-nav-item strong { font-size: 12px; }
.workspace[data-active-module="relay"] .context-nav-item small, .workspace[data-active-module="relay"] .context-nav-item > span:last-child { display: none; }
.workspace[data-active-module="relay"] .context-nav-item.active { background: transparent; box-shadow: inset 0 -2px var(--workspace-accent); }
#agent-browser .thread-browser-heading { margin: 0 20px 12px; }
#agent-browser .thread-browser-heading > div { display: none; }
#agent-browser-new { width: calc(100% - 40px); margin: 0 20px 16px; min-height: 34px; background: var(--workspace-soft); border-color: var(--workspace-border); color: var(--muted); font-size: 12px; }
#agent-browser-new:hover { background: var(--workspace-selected); }
#agent-browser-list { display: block; flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--workspace-border); }
.agent-browser-group { gap: 0; }
.agent-browser-group h3 { font-size: 10px; letter-spacing: 0; padding: 13px 20px 7px; color: var(--muted); font-weight: 400; }
#agent-browser-list .agent-browser-item { flex-direction: column; align-items: stretch; gap: 5px; min-height: 92px; padding: 16px 20px 16px 17px; border: 0; border-left: 3px solid transparent; border-radius: 0; background: transparent; box-shadow: none; }
#agent-browser-list .agent-browser-item.active { background: var(--workspace-selected); border-left-color: var(--workspace-accent); }
#agent-browser-list .agent-browser-item:hover { background: var(--workspace-soft); }
#agent-browser-list .agent-browser-identity { gap: 11px; }
#agent-browser-list .agent-mini-avatar { width: 40px; height: 40px; min-width: 40px; flex: 0 0 40px; border: 0; border-radius: 8px; background: var(--workspace-selected); color: var(--muted); }
#agent-browser-list .agent-browser-identity > span:last-child { flex: 1 1 0; min-width: 0; }
#agent-browser-list .agent-browser-identity strong { font-size: 13px; font-weight: 600; color: var(--text); }
#agent-browser-list .agent-browser-identity small { font-size: 11px; color: var(--muted); }
#agent-browser-list .agent-browser-item > .data-chip { align-self: flex-start; margin-left: 51px; background: transparent; border: 0; padding: 0; font-size: 10px; }

/* Detail pages use the same header rhythm and restrained surfaces. */
#friend-detail { gap: 20px; }
.friend-hero { gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--workspace-border); }
.friend-detail-avatar { width: 58px; height: 58px; border-radius: 10px; background: var(--workspace-selected); color: var(--muted); border: 0; font-size: 21px; }
.friend-hero-copy p { font-size: 12px; color: var(--muted); }
.friend-hero-actions { gap: 12px; }
.friend-hero-actions .prototype-status { font-size: 11px; border: 0; background: var(--workspace-soft); color: var(--muted); }
#friend-detail .prototype-card { padding: 20px; border: 1px solid var(--workspace-border); border-radius: 8px; background: var(--workspace-surface); box-shadow: none; }
#friend-detail .prototype-card-heading h3 { font-size: 14px; font-weight: 600; color: var(--text); }
#friend-detail .prototype-card-heading > div > span { font-size: 10px; color: var(--muted); }
#friend-detail .prototype-card-heading { margin-bottom: 14px; }
.friend-detail-note { font-size: 12px; color: var(--muted); line-height: 1.85; }
.friend-agent-row, .friend-project-row { background: transparent; border: 0; border-radius: 0; border-top: 1px solid var(--workspace-border); padding: 14px 0; box-shadow: none; }
.friend-agent-row:first-child, .friend-project-row:first-child { border-top: 0; }
.friend-agent-row > span { background: var(--workspace-selected); color: var(--muted); border-radius: 7px; }
.friend-agent-row strong, .friend-project-row strong { font-size: 13px; font-weight: 550; }
.friend-agent-row small, .friend-project-row small, .friend-project-row > span:last-child { font-size: 11px; color: var(--muted); }
.agent-detail-heading { align-items: flex-start; flex-wrap: wrap; border-bottom: 1px solid var(--workspace-border); padding-bottom: 20px; gap: 18px; }
.agent-detail-heading-actions { gap: 7px; justify-content: flex-start; }
.agent-detail-heading-actions .quiet-button { font-size: 11px; padding: 7px 10px; }
.agent-detail-avatar { border: 0; border-radius: 10px; background: var(--workspace-selected); color: var(--muted); width: 52px; height: 52px; }
.agent-detail-tabs { gap: 20px; padding: 0; border-bottom-color: var(--workspace-border); }
.agent-detail-tabs button { min-height: 38px; padding: 8px 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; }
.agent-detail-tabs button.active, .agent-detail-tabs button:hover { background: transparent; color: var(--workspace-accent); border: 0; }
.agent-detail-tabs button.active { box-shadow: inset 0 -2px var(--workspace-accent); }
.workspace :is(.agent-overview-metrics article, .agent-overview-groups article, .agent-detail-summary article, .connector-card, .connector-history, .agent-history-card, .agent-owner-actions section) { border: 1px solid var(--workspace-border); background: var(--workspace-surface); border-radius: 8px; box-shadow: none; padding: 18px; }
.agent-overview-metrics article { gap: 10px; }
.agent-overview-metrics strong { font-size: 26px; font-weight: 550; }
.agent-overview-metrics span { font-size: 11px; }
.agent-overview-groups article strong { font-size: 16px; }
.workspace .agent-detail-summary article strong { font-size: 13px; line-height: 1.75; font-weight: 550; }
.workspace .agent-detail-summary article span { font-size: 11px; }
.agent-technical-details { border-color: var(--workspace-border); background: var(--workspace-soft); border-radius: 8px; }
.agent-connection-banner { border-radius: 8px; padding: 16px 18px; }
.agent-wake-channel { background: var(--workspace-soft); border-color: var(--workspace-border); border-left-color: var(--workspace-accent); border-radius: 8px; }
.connector-card dl { gap: 14px; }
.connector-card :is(dt,dd,p), .agent-owner-actions p { font-size: 12px; line-height: 1.8; }
.connector-card, .agent-detail-panel { min-width: 0; }
.workspace .settings-archive-item { border-color: var(--workspace-border); background: var(--workspace-surface); border-radius: 8px; padding: 16px; }
.workspace .settings-archive-item:hover { background: var(--workspace-soft); }

/* Settings read as aligned account rows rather than a grid of large cards. */
.workspace[data-active-module="settings"] .section-heading { padding-bottom: 22px; border-bottom: 1px solid var(--workspace-border); margin-bottom: 24px; }
.profile-summary-grid { display: block; max-width: 850px; background: var(--workspace-surface); border: 1px solid var(--workspace-border); border-radius: 8px; padding: 0 20px; }
.profile-summary-grid > article { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: start; gap: 18px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--workspace-border); border-radius: 0; background: transparent; box-shadow: none; }
.profile-summary-grid > article:last-child { border-bottom: 0; }
.profile-summary-grid > article > span { font-size: 12px; line-height: 1.8; color: var(--muted); }
.profile-summary-grid > article > strong { font-size: 13px; line-height: 1.8; font-weight: 500; overflow-wrap: anywhere; }
.profile-username-controls { display: flex; align-items: center; gap: 10px; }
#profile-username-result:empty { display: none; }
#profile-username, #profile-name, #profile-expertise { min-width: 0; width: 100%; max-width: 320px; border: 1px solid var(--workspace-border); border-radius: 6px; padding: 9px 11px; min-height: 36px; background: #fff; color: var(--text); font: inherit; font-size: 13px; }
.profile-username-form small { font-size: 11px; line-height: 1.8; color: var(--muted); }
.profile-username-form .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.security-actions-grid, .governance-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 850px; }
.security-actions-grid > article, .governance-grid > article { padding: 22px; border: 1px solid var(--workspace-border); border-radius: 8px; background: var(--workspace-surface); box-shadow: none; }
.security-actions-grid strong, .governance-grid strong { font-size: 14px; font-weight: 600; }
.security-actions-grid p, .governance-grid p { font-size: 12px; line-height: 1.85; color: var(--muted); }
.governance-grid article > span { font-size: 10px; color: var(--muted); }

/* Shared dialog chrome includes friends, AI connection and account forms. */
.approval-dialog { background: var(--workspace-surface); color: var(--text); border: 1px solid var(--workspace-border); border-radius: 12px; box-shadow: 0 24px 90px #14291030; }
.approval-dialog::backdrop { background: #23332355; backdrop-filter: blur(3px); }
.approval-dialog :is(h2,h3) { color: var(--text); }
.approval-dialog h2 { font-size: 20px; }
.approval-dialog .dialog-summary { color: var(--muted); font-size: 13px; line-height: 1.8; }
.approval-dialog :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]) { border: 1px solid var(--workspace-border); border-radius: 6px; background: #fff; color: var(--text); box-shadow: none; }
.approval-dialog :is(.pairing-host-card,.pairing-preview,.pairing-chat-card,.task-agent-choice,.prototype-friend-option) { border-color: var(--workspace-border); border-radius: 8px; background: var(--workspace-soft); box-shadow: none; }
.approval-dialog .pairing-host-card.selected, .approval-dialog .pairing-host-card[aria-pressed="true"] { border-color: var(--workspace-accent); background: var(--workspace-soft); color: var(--workspace-accent); }
.approval-dialog .pairing-progress .active { color: var(--workspace-accent); }
.approval-dialog .pairing-chat-label { color: var(--workspace-accent); }
.approval-dialog .pairing-chat-prompt { color: var(--text); }
.approval-dialog label { color: var(--text); }
.approval-dialog .dialog-close { border-color: var(--workspace-border); border-radius: 6px; background: transparent; color: var(--muted); box-shadow: none; }
.approval-dialog .danger-submit { background: #b2483d; border-color: #b2483d; color: white; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--workspace-accent); }

@media (min-width: 861px) and (max-width: 1100px) {
  .workspace[data-active-module]:not([data-active-module="projects"]) .content-section { padding: 24px; }
  .agent-overview-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .friend-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .workspace[data-active-module]:not([data-active-module="projects"]) .workspace-content { min-height: 0; }
  .workspace[data-active-module]:not([data-active-module="projects"]) .content-section { padding: 18px 16px; }
  .workspace .context-sidebar { margin-bottom: 0; }
  .workspace .context-heading { padding: 20px 20px 15px; }
  .workspace .context-heading h2 { font-size: 18px; }
  .workspace .context-heading > p:last-child { font-size: 11px; }
  .workspace .section-heading h2, .workspace .agent-detail-heading h2, .workspace .friend-hero h2 { font-size: 18px; }
  .workspace .section-heading { gap: 12px; align-items: flex-start; text-align: left; }
  .workspace .section-heading .primary-action { font-size: 11px; padding: 8px 10px; }
  .workspace .context-navigation { overflow-x: auto; }
  .workspace[data-active-module="settings"], .workspace[data-active-module="relay"]:not(.agent-workspace-mode) { display: flex; flex-direction: column; }
  .workspace[data-active-module="settings"] > .context-sidebar, .workspace[data-active-module="relay"]:not(.agent-workspace-mode) > .context-sidebar { flex: 0 0 auto; height: auto; overflow: visible; }
  .workspace[data-active-module="settings"] > .workspace-content, .workspace[data-active-module="relay"]:not(.agent-workspace-mode) > .workspace-content { flex: 1; height: auto; min-height: 0; overflow: auto; }
  .workspace[data-active-module="settings"] .context-heading { padding: 14px 16px 10px; }
  .workspace[data-active-module="settings"] .context-heading > p:last-child { display: none; }
  .workspace[data-active-module="settings"] .context-navigation { padding: 0 16px; border-bottom: 1px solid var(--workspace-border); }
  .workspace[data-active-module="settings"] .context-navigation > div:not([hidden]) { display: flex; width: max-content; gap: 22px; }
  .workspace[data-active-module="settings"] .context-nav-item { min-height: 42px; border: 0; padding: 8px 0; background: transparent; }
  .workspace[data-active-module="settings"] .context-nav-item.active { box-shadow: inset 0 -2px var(--workspace-accent); }
  .workspace[data-active-module="settings"] .context-nav-item strong { font-size: 12px; }
  .workspace.friend-workspace-mode:not(.friend-detail-open) > .workspace-content { display: none; }
  .workspace.friend-workspace-mode.friend-detail-open > .context-sidebar { display: none; }
  .workspace.friend-workspace-mode.friend-detail-open > .workspace-content { display: block; height: 100%; }
  .workspace.agent-workspace-mode .context-sidebar { overflow-y: auto; }
  #friend-mobile-back, #agent-mobile-back { align-items: center; gap: 5px; min-height: 32px; margin: 0 0 16px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
  #friend-mobile-back svg, #agent-mobile-back svg { width: 18px; height: 18px; }
  .friend-hero { gap: 12px; padding-bottom: 18px; }
  .friend-hero-copy { flex: 1; min-width: 0; }
  .friend-detail-avatar { width: 48px; height: 48px; font-size: 18px; }
  .friend-hero-actions { width: 100%; justify-content: space-between; }
  .friend-detail-grid, .agent-detail-summary { grid-template-columns: 1fr; }
  #friend-detail .prototype-card { padding: 16px; }
  .agent-detail-heading { gap: 15px; }
  .agent-detail-heading-actions { width: 100%; }
  .agent-detail-tabs { gap: 20px; }
  .agent-overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .agent-overview-groups { grid-template-columns: 1fr; }
  .profile-summary-grid { padding: 0 14px; }
  .profile-summary-grid > article { grid-template-columns: 72px minmax(0,1fr); gap: 12px; padding: 17px 0; }
  .profile-summary-grid > .profile-username-card { grid-template-columns: 1fr; gap: 8px; }
  .security-actions-grid > article, .governance-grid > article { padding: 18px; }
  .workspace .availability-card { align-items: flex-start; flex-direction: column; gap: 10px; }
  .workspace .mobile-account-actions { flex-wrap: wrap; padding-bottom: 8px; }
  .approval-dialog { max-height: calc(100dvh - 32px); padding: 20px; }
  .approval-dialog h2 { font-size: 18px; }
}

.workspace[hidden] { display: none !important; }

/* Private conversations share the existing workspace and never expose Task actions. */
#private-chat-info-open { display: none; font-size: 11px; color: var(--muted); padding: 0; }
#project-detail.private-chat-open #private-chat-info-open { display: inline-flex; }
#project-detail.private-chat-open #task-members-open,
#project-detail.private-chat-open #project-invitation-actions,
#project-detail.private-chat-open:not(.chat-files-available) #task-jump-nav,
#project-detail.private-chat-open #project-detail-status,
#project-detail.private-chat-open #project-invite,
#project-detail.private-chat-open #task-personal-menu { display: none !important; }
#project-browser-list .private-chat-list-item { position: relative; }
#project-browser-list .private-chat-list-item .prototype-list-copy { padding-right: 28px; }
#project-browser-list .private-chat-list-item .prototype-list-badge { position: absolute; top: 15px; right: 13px; margin: 0; padding: 2px 5px; border-radius: 4px; color: var(--muted); background: var(--workspace-selected); font-size: 10px; }
.private-chat-agent-detail { padding: 12px 0; border-top: 1px solid var(--workspace-border); overflow-wrap: anywhere; }
.private-chat-agent-detail h3 { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.private-chat-agent-detail p { margin: 6px 0; }
.private-chat-agent-detail small, .private-chat-conversation-id { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.private-chat-list-note { margin: 12px 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.private-chat-load-more { display: block; width: calc(100% - 36px); margin: 12px 18px; border: 1px solid var(--workspace-border); border-radius: 6px; background: var(--workspace-soft); color: var(--muted); font-size: 12px; }
@media (max-width: 860px) {
  #project-detail.private-chat-open #task-search-open { display: flex; }
  #private-chat-info-open { font-size: 10px; }
}

/* New work belongs to the icon: visible without moving or crowding the label. */
.workspace-sidebar .primary-nav-item > span:last-child { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.workspace-sidebar .primary-nav-icon { position: relative; overflow: visible; }
.workspace-sidebar .primary-nav-notice:not([hidden]) {
  position: absolute;
  top: -4px;
  right: -5px;
  display: block;
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  border: 2px solid var(--workspace-accent);
  border-radius: 50%;
  background: #e34e4e;
  box-shadow: 0 1px 3px #1c272166;
  color: transparent;
  font-size: 0;
  pointer-events: none;
}
.workspace-sidebar .primary-nav-item.active .primary-nav-notice { border-color: var(--workspace-accent); }
/* Keep the invitation instructions and actions visible while the friend list scrolls. */
#project-invite-dialog { padding: 0; overflow: hidden; }
#project-invite-form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 32px); box-sizing: border-box; }
#project-invite-form > :not(#project-invite-options) { flex: 0 0 auto; }
#project-invite-summary { overflow-wrap: anywhere; }
#project-invite-options { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: none; overflow: hidden; gap: 12px; }
#project-invite-options > input[type="search"] { flex: 0 0 auto; width: 100%; min-width: 0; padding: 10px 12px; font: inherit; font-size: 13px; }
#project-invite-options .project-invite-friend-list { display: grid; gap: 8px; min-height: 48px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#project-invite-dialog .project-invite-option { margin: 0; border-color: var(--workspace-border); border-radius: 8px; color: var(--text); }
#project-invite-dialog .project-invite-option:has(input:checked) { border-color: var(--workspace-accent); background: var(--workspace-soft); }
#project-invite-dialog .project-invite-option strong, #project-invite-dialog .project-invite-option small { overflow-wrap: anywhere; }
#project-invite-result:empty { display: none; }
@media (max-width: 600px) {
  #project-invite-form { padding: 18px; gap: 10px; }
  #project-invite-dialog .dialog-summary { font-size: 12px; line-height: 1.5; margin: 0; }
  #project-invite-dialog .task-invite-link-box { padding: 10px 12px; }
  #project-invite-dialog .task-invite-link-actions button, #project-invite-dialog .dialog-actions button { min-height: 44px; }
}

/* White quoted originals remain distinct inside sent green message bubbles. */
.task-chat-message[data-mine="true"] .task-chat-bubble > .task-chat-reference { background: #fff; color: var(--text); border-left-color: var(--workspace-accent); }
.task-chat-message[data-mine="true"] .task-chat-bubble > .task-chat-reference:hover { background: var(--workspace-canvas); }
#project-filter .project-filter-chevron svg { display: block; width: 12px; height: 12px; transform: rotate(-90deg); }
#project-filter-more:not([open]) .project-filter-menu { display: none; }

/* Mist chat: approved visual option 1, 2026-09-17. */
:root {
  --workspace-surface: #ffffff;
  --workspace-canvas: #f7f9f7;
  --workspace-soft: #eef4ee;
  --workspace-selected: #edf4eb;
  --workspace-accent: #2f6b4f;
  --workspace-accent-hover: #24563e;
  --workspace-border: #e3e9e4;
  --text: #26352f;
  --muted: #68776f;
  --line: #e3e9e4;
  --google-blue: #2f6b4f;
  --font-body: 1rem;
  --font-control: .875rem;
  --font-meta: .8125rem;
}
.workspace, .approval-dialog { color: var(--text); -webkit-font-smoothing: antialiased; }
.workspace .context-sidebar { background: #fff; border-right-color: var(--workspace-border); }
.workspace .workspace-content, .workspace .content-section { background: var(--workspace-canvas); }
.workspace .primary-nav-item { transition: background-color 140ms, color 140ms; }
.workspace :is(button,a,input,textarea,summary):focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; }
.workspace .primary-nav-item:focus-visible { outline-color: var(--workspace-accent); outline-offset: -3px; }
#project-browser .prototype-browser-heading { padding: 24px 24px 22px; }
#project-browser .prototype-browser-heading > div > span, #project-browser .count-pill { display: none; }
#project-browser .prototype-browser-heading strong { font-size: 24px; letter-spacing: -.5px; color: var(--text); font-weight: 650; }
#project-browser-new { width: 38px; height: 38px; min-height: 38px; border-radius: 9px; background: var(--workspace-soft); color: var(--text); }
#project-browser .thread-search { margin: 0 22px 15px; }
#project-search-input { height: 44px; padding: 11px 14px; border-radius: 9px; font-size: 14px; color: var(--text); background: var(--workspace-soft); }
#project-search-input::placeholder { color: var(--muted); }
#project-filter { padding: 0 24px 9px; gap: 30px; border-bottom: 1px solid var(--workspace-border); }
#project-filter button, #project-filter-more > summary { min-height: 38px; font-size: 14px; color: var(--muted); }
#project-filter > button.active, #project-filter-more > summary.active { color: var(--workspace-accent); box-shadow: inset 0 -2px var(--workspace-accent); }
#project-browser-list { padding: 8px 10px; gap: 3px; }
#project-browser-list .prototype-list-item { grid-template-columns: minmax(0,1fr); padding: 17px 16px; min-height: 94px; gap: 7px; border-radius: 9px; border-left: 3px solid transparent; }
#project-browser-list .prototype-list-item.active { background: var(--workspace-soft); border-left-color: var(--workspace-border); }
#project-browser-list .prototype-list-item:hover { background: var(--workspace-soft); }
#project-browser-list .prototype-list-avatar { display: none; }
#project-browser-list .prototype-list-copy { gap: 7px; }
#project-browser-list .prototype-list-copy strong { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.45; }
#project-browser-list .prototype-list-copy small { font-size: 13px; color: var(--muted); line-height: 1.5; }
#project-browser-list .private-chat-list-item .prototype-list-copy { padding-right: 30px; }
#project-browser-list .private-chat-list-item .prototype-list-badge { top: 15px; right: 12px; font-size: 11px; padding: 3px 6px; border-radius: 5px; color: var(--muted); background: var(--workspace-soft); }
#project-detail .prototype-detail-heading { min-height: 76px; box-sizing: border-box; padding: 18px 30px; gap: 14px; background: #fff; border-bottom: 1px solid var(--workspace-border); }
#project-detail-title { color: var(--text); font-size: 21px; font-weight: 650; letter-spacing: -.2px; }
#task-members-open, #private-chat-info-open { color: var(--muted); font-size: 13px; }
#project-detail .prototype-detail-actions { gap: 15px; }
#project-detail-status { font-size: 12px; color: var(--workspace-accent); }
#task-jump-nav button { font-size: 14px; color: var(--text); gap: 8px; }
#task-focus-toggle, #task-search-open, #project-invite, .task-personal-menu > summary { color: var(--muted); width: 36px; min-height: 36px; border-radius: 7px; }
#task-focus-toggle:hover, #task-search-open:hover, #project-invite:hover, .task-personal-menu > summary:hover { background: var(--workspace-soft); }
.task-chat-detail, .task-chat-messages { background: var(--workspace-canvas); }
.task-chat-detail > .task-chat-tools { padding: 0 30px; gap: 30px; min-height: 44px; align-items: stretch; }
.task-chat-tools button { min-height: 44px; color: var(--muted); font-size: 14px; padding: 0 0 5px; border-radius: 0; }
.task-chat-tools button[aria-pressed="true"] { color: var(--workspace-accent); box-shadow: inset 0 -2px var(--workspace-accent); font-weight: 600; }
.task-chat-load-more { min-height: 28px; font-size: 12px; color: var(--muted); }
.task-chat-messages { padding: 22px 42px 26px; scrollbar-color: var(--workspace-border) transparent; }
.task-chat-message { margin-bottom: 22px; }
.task-chat-column, .task-chat-message[data-mine="true"] .task-chat-column { width: auto; max-width: min(82%, 680px); }
.task-chat-bubble, .task-chat-message[data-mine="true"] .task-chat-bubble { width: fit-content; max-width: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: 11px; border: 1px solid var(--workspace-border); color: var(--text); background: #fff; box-shadow: none; }
.task-chat-message[data-mine="true"] .task-chat-bubble { background: var(--workspace-selected); border-color: var(--workspace-border); }
.task-chat-identity { margin-bottom: 5px; gap: 5px 9px; color: var(--text); min-height: 20px; }
.task-chat-identity strong { font-size: 13px; font-weight: 500; }
.task-chat-identity time { color: var(--muted); font-size: 12px; }
.task-chat-agent { color: var(--muted); font-size: 12px; }
.task-chat-text { font-size: 16px; line-height: 1.7; letter-spacing: 0; }
.task-chat-subject { font-size: 16px; line-height: 1.6; margin-bottom: 8px; }
.task-chat-bubble > .task-chat-reference, .task-chat-message[data-mine="true"] .task-chat-bubble > .task-chat-reference { font-size: 13px; line-height: 1.55; background: #fff; color: var(--muted); border-left: 2px solid var(--workspace-accent); border-radius: 2px 6px 6px 2px; padding: 8px 10px; margin-bottom: 10px; }
.task-chat-actions { margin: 2px 0 -18px; }
.task-chat-actions button { font-size: 12px; min-height: 22px; }
.task-chat-bubble > button { font-size: 13px; color: var(--workspace-accent); }
.task-chat-compose { background: #fff; border-color: var(--workspace-border); padding: 0 30px 14px; grid-template-rows: 15px minmax(0,1fr) 38px; gap: 3px 12px; }
.task-chat-compose textarea { color: var(--text); font-size: 16px; line-height: 1.6; padding: 6px 4px; }
.task-chat-compose textarea::placeholder { color: var(--muted); }
.task-chat-compose > button { height: 38px; min-width: 94px; background: var(--workspace-accent); border-radius: 8px; font-size: 14px; padding: 8px 20px; }
.task-chat-compose > button:not(:disabled):hover { background: var(--workspace-accent); }
.task-chat-compose > button:disabled { color: var(--muted); background: var(--workspace-soft); }
.task-chat-compose > small { font-size: 12px; color: var(--muted); align-self: center; }
.task-chat-resize-handle::after { background: var(--workspace-selected); width: 40px; height: 3px; }
.task-chat-editor.has-quote { background: var(--workspace-soft); border-color: var(--workspace-border); }
.task-chat-editor .task-chat-quote { color: var(--muted); font-size: 13px; }
.task-chat-latest { background: #fff; border-color: var(--workspace-border); color: var(--workspace-accent); }
/* Shared typography, spacing and surfaces for Friends, AI and Settings. */
.workspace .context-heading { padding: 26px 24px 20px; }
.workspace .context-heading h2 { font-size: 24px; color: var(--text); letter-spacing: -.5px; }
.workspace .context-heading > p:last-child { font-size: 13px; line-height: 1.7; color: var(--muted); }
.workspace .context-nav-item { padding: 16px 24px; min-height: 68px; }
.workspace .context-nav-item strong { font-size: 15px; color: var(--text); }
.workspace .context-nav-item small { font-size: 13px; color: var(--muted); }
.workspace .context-nav-item.active { background: var(--workspace-soft); border-left-color: var(--workspace-border); }
.workspace[data-active-module]:not([data-active-module="projects"]) .content-section { padding: 30px 38px; background: var(--workspace-canvas); }
.workspace :is(.section-heading h2, .agent-detail-heading h2, .friend-hero h2) { font-size: 24px; color: var(--text); }
.workspace .section-tag { font-size: 12px; color: var(--muted); }
.workspace .section-intro { font-size: 14px; color: var(--muted); line-height: 1.75; }
.workspace :is(.primary-action, .approval-submit), .approval-dialog .approval-submit { font-size: 14px; min-height: 40px; border-radius: 8px; padding: 9px 16px; }
.workspace[data-active-module]:not([data-active-module="projects"]) :is(.workspace-content,.context-sidebar) :is(.quiet-button,.text-button), .approval-dialog :is(.quiet-button,.text-button) { font-size: 13px; border-radius: 8px; min-height: 36px; }
#friend-browser-list .friend-browser-item, #agent-browser-list .agent-browser-item { min-height: 94px; padding: 18px 22px; }
#friend-browser-list .friend-browser-copy strong, #agent-browser-list .agent-browser-identity strong { font-size: 16px; color: var(--text); }
#friend-browser-list .friend-browser-copy small, #agent-browser-list .agent-browser-identity small { font-size: 13px; color: var(--muted); }
#friend-search-input, #agent-search-input { font-size: 14px; min-height: 42px; background: var(--workspace-soft); border-radius: 8px; }
#friend-filter button, #agent-browser-new, .workspace[data-active-module="relay"] .context-nav-item strong, .agent-detail-tabs button { font-size: 13px; }
#agent-browser-list .agent-browser-item > .data-chip, .workspace .data-chip, .workspace .count-pill { font-size: 12px; }
#friend-detail .prototype-card, .workspace :is(.agent-overview-metrics article,.agent-overview-groups article,.agent-detail-summary article,.connector-card,.connector-history,.agent-history-card,.agent-owner-actions section) { border-color: var(--workspace-border); border-radius: 10px; background: #fff; padding: 24px; }
#friend-detail .prototype-card-heading h3, .friend-agent-row strong, .friend-project-row strong, .workspace .agent-detail-summary article strong { font-size: 16px; color: var(--text); }
.friend-detail-note, .friend-agent-row small, .friend-project-row small, .friend-project-row > span:last-child, .workspace .agent-detail-summary article span, .connector-card :is(dt,dd,p), .agent-owner-actions p { font-size: 13px; color: var(--muted); }
.profile-summary-grid { background: #fff; border-color: var(--workspace-border); padding: 0 24px; border-radius: 10px; }
.profile-summary-grid > article { padding: 21px 0; }
.profile-summary-grid > article > span, .profile-username-form small { font-size: 13px; color: var(--muted); }
.profile-summary-grid > article > strong, #profile-username, #profile-name, #profile-expertise { font-size: 15px; color: var(--text); }
.security-actions-grid strong, .governance-grid strong { font-size: 16px; }
.security-actions-grid p, .governance-grid p { font-size: 14px; color: var(--muted); }
.approval-dialog { background: #fff; border-radius: 14px; color: var(--text); }
.chat-task-form { display: grid; gap: 16px; min-width: 0; }
.chat-task-form label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; color: #263b34; }
.chat-task-form input, .chat-task-form textarea { color: #263b34; }
.chat-task-form input:not([type="checkbox"]), .chat-task-form textarea { width: 100%; box-sizing: border-box; min-height: 44px; }
.chat-task-form input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; }
.chat-task-form fieldset { min-width: 0; display: grid; gap: 12px; padding: 12px; border: 1px solid var(--border); }
.chat-task-form fieldset > div { display: grid; gap: 8px; }
.chat-task-form button { min-height: 44px; white-space: normal; }
.approval-dialog .dialog-summary { font-size: 14px; color: var(--muted); }
@media (min-width: 861px) {
  body:has(.workspace:not([hidden])) { background: #fff; overflow: hidden; }
  body:has(.workspace:not([hidden])) > .topbar { display: contents; }
  body:has(.workspace:not([hidden])) .topbar .brand, body:has(.workspace:not([hidden])) #connection-state { display: none; }
  body:has(.workspace:not([hidden])) main { width: 100%; max-width: none; margin: 0; }
  body:has(.workspace:not([hidden])) > footer { display: none; }
  .workspace, .workspace.project-workspace-mode { width: 100%; height: 100dvh; min-height: 0; grid-template-columns: 88px 360px minmax(0,1fr); border: 0; border-radius: 0; box-shadow: none; }
  .workspace.task-focus-mode { grid-template-columns: minmax(0,1fr); }
  .workspace.task-focus-mode .task-chat-column,
  .workspace.task-focus-mode .task-chat-message[data-mine="true"] .task-chat-column {
    max-width: min(90%, 1120px);
  }
  .workspace-sidebar { background: var(--workspace-accent); padding: 24px 0 160px; }
  .rail-brand { font-size: 34px; margin-bottom: 30px; letter-spacing: -2px; }
  .workspace-sidebar .person-card { display: none; }
  .primary-navigation { margin: 0; gap: 17px; flex: 1; }
  .workspace-sidebar .primary-nav-item { width: 72px; min-height: 82px; margin: 0 auto; gap: 9px; border-radius: 10px; color: var(--muted); }
  .workspace-sidebar .primary-nav-item strong { font-size: 13px; }
  .workspace-sidebar .primary-nav-icon, .workspace-sidebar .primary-nav-icon svg { width: 29px; height: 29px; }
  .workspace-sidebar .primary-nav-item.active { background: var(--workspace-accent); color: var(--muted); }
  .workspace-sidebar .primary-nav-item.active .primary-nav-icon { background: var(--workspace-selected); border-radius: 9px; padding: 8px; box-sizing: content-box; color: var(--workspace-accent); }
  .workspace-sidebar .primary-nav-item.active::before { left: -8px; background: var(--workspace-selected); top: 14px; bottom: 14px; }
  .workspace-sidebar .sidebar-actions { flex-direction: row; justify-content: center; gap: 0; padding: 0 6px; }
  .sidebar-actions .quiet-button { width: 44px; min-height: 44px; padding: 8px; border-radius: 8px; }
  body:has(.workspace:not([hidden])) #personal-share-open { position: fixed; z-index: 25; left: 8px; bottom: 94px; width: 72px; padding: 9px 2px; min-height: 38px; white-space: normal; background: transparent; border: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
  body:has(.workspace:not([hidden])) .topbar .top-human { position: fixed; z-index: 25; left: 4px; bottom: 19px; width: 80px; flex-direction: column; gap: 6px; }
  .topbar .top-human-avatar { width: 38px; height: 38px; background: var(--workspace-accent); color: var(--muted); border-radius: 50%; }
  #top-human-name { max-width: 78px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
  body:has(.workspace.task-focus-mode) #personal-share-open, body:has(.workspace.task-focus-mode) .topbar .top-human { display: none; }
}
@media (min-width: 861px) and (max-width: 1440px) {
  .workspace, .workspace.project-workspace-mode { grid-template-columns: 76px 290px minmax(0,1fr); }
  .workspace.task-focus-mode { grid-template-columns: minmax(0,1fr); }
  .workspace-sidebar .primary-nav-item { width: 64px; }
  body:has(.workspace:not([hidden])) .topbar .top-human { left: 0; width: 76px; }
  body:has(.workspace:not([hidden])) #personal-share-open { left: 2px; }
  #project-browser .prototype-browser-heading strong { font-size: 21px; }
  #project-detail .prototype-detail-heading { padding: 16px 22px; gap: 10px; }
  #project-detail-title { font-size: 19px; }
  .task-chat-messages { padding-inline: 26px; }
  #project-detail .prototype-detail-actions { gap: 8px; }
}
@media (max-width: 860px) {
  body, .topbar { background: var(--workspace-canvas); }
  .workspace-sidebar { background: #fff; border-top-color: var(--workspace-border); }
  .workspace-sidebar .primary-nav-item strong { font-size: 12px; }
  .workspace .context-heading { padding: 20px; }
  .workspace .context-heading h2 { font-size: 22px; }
  .workspace .context-heading > p:last-child { font-size: 12px; }
  #project-browser .prototype-browser-heading { padding: 20px; }
  #project-browser .prototype-browser-heading strong { font-size: 22px; }
  #project-browser-list .prototype-list-item { min-height: 88px; }
  #project-detail .prototype-detail-heading { min-height: 64px; padding: 10px 12px 10px 46px; gap: 6px; }
  #project-detail-title { font-size: 16px; }
  #task-members-open, #private-chat-info-open { font-size: 11px; }
  #project-detail .task-header-summary { gap: 6px; }
  #project-detail .prototype-detail-actions { gap: 2px; }
  /* Center the 44px hit area on the 32px title row after its 10px top inset. */
  #project-mobile-back { top: 4px; left: 0; width: 44px; height: 44px; }
  #project-detail .task-header-summary { min-height: 32px; }
  #task-search-open, .task-personal-menu > summary { width: 30px; min-height: 38px; }
  .task-chat-detail > .task-chat-tools { min-height: 42px; padding: 0 16px; gap: 24px; }
  .task-chat-tools button { font-size: 13px; min-height: 42px; }
  .task-chat-messages { padding: 14px 16px 20px; }
  .task-chat-column, .task-chat-message[data-mine="true"] .task-chat-column { max-width: 92%; }
  .task-chat-message { margin-bottom: 20px; }
  .task-chat-bubble, .task-chat-message[data-mine="true"] .task-chat-bubble { padding: 10px 13px; border-radius: 10px; }
  .task-chat-text { font-size: 15px; line-height: 1.7; }
  .task-chat-identity strong { font-size: 12px; }
  .task-chat-agent, .task-chat-identity time { font-size: 11px; }
  .task-chat-actions { margin-bottom: -12px; }
  .task-chat-compose { padding: 0 16px calc(10px + env(safe-area-inset-bottom)); grid-template-rows: 14px minmax(0,1fr) 38px; }
  .task-chat-compose textarea { font-size: 16px; }
  .task-chat-compose > small { font-size: 10px; }
  .task-chat-compose > button { min-width: 74px; font-size: 13px; }
  .workspace[data-active-module]:not([data-active-module="projects"]) .content-section { padding: 22px 18px; }
  .workspace :is(.section-heading h2,.agent-detail-heading h2,.friend-hero h2) { font-size: 21px; }
  .workspace .context-nav-item { padding: 12px 18px; }
  .workspace .context-nav-item strong { font-size: 13px; }
  .workspace .primary-action { font-size: 13px; }
  #friend-detail .prototype-card, .workspace :is(.agent-overview-metrics article,.agent-overview-groups article,.agent-detail-summary article,.connector-card,.connector-history,.agent-history-card,.agent-owner-actions section) { padding: 18px; }
  .profile-summary-grid { padding: 0 16px; }
  .profile-summary-grid > article { grid-template-columns: 74px minmax(0,1fr); }
  .profile-summary-grid > .profile-username-card { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .workspace .primary-nav-item { transition: none; } }

/* Keep the account and utility controls reachable in short desktop windows. */
@media (min-width: 861px) and (max-height: 720px) {
  .workspace-sidebar { padding-top: 14px; padding-bottom: 140px; }
  .rail-brand { font-size: 28px; margin-bottom: 16px; }
  .primary-navigation { gap: 5px; }
  .workspace-sidebar .primary-nav-item { min-height: 58px; gap: 3px; }
  .workspace-sidebar .primary-nav-icon, .workspace-sidebar .primary-nav-icon svg { width: 23px; height: 23px; }
  .workspace-sidebar .primary-nav-item.active .primary-nav-icon { padding: 5px; }
  .workspace-sidebar .primary-nav-item strong { font-size: 11px; }
}

/* Message identity: Human and AI remain readable without avatars. */
.task-chat-speaker { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.task-chat-role { flex: none; padding: 2px 8px; border: 1px solid var(--workspace-border); border-radius: 5px; background: var(--workspace-soft); color: var(--text); font-size: 12px; font-weight: 750; line-height: 1.5; letter-spacing: .04em; }
.task-chat-role[data-kind="agent"] { border-color: var(--workspace-border); background: var(--workspace-selected); color: var(--workspace-accent); }
.task-chat-identity .task-chat-attribution { padding: 0; min-height: 24px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; text-align: start; white-space: normal; overflow-wrap: anywhere; }
.task-chat-attribution:hover { text-decoration: underline; }
.task-chat-attribution:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; }
.task-chat-identity time { white-space: nowrap; }
.task-chat-message[data-mine="true"] .task-chat-identity { flex-direction: row; justify-content: flex-end; }
.task-chat-identity-fact { display: grid; gap: 5px; overflow-wrap: anywhere; }
.task-chat-identity-fact small { color: var(--muted); }
@media (max-width: 760px) {
  .task-chat-identity { gap: 3px 7px; }
  .task-chat-identity .task-chat-attribution { font-size: 11px; }
}
.task-chat-history-note { flex: 0 0 auto; margin: 0; padding: 14px 24px; border-top: 1px solid var(--workspace-border); background: #fff; color: var(--muted); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }

#profile-expertise { min-height: 44px; max-height: 180px; resize: none; overflow-y: auto; line-height: 1.55; }
.conversation-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.conversation-summary-fact { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--workspace-border); border-radius: 8px; background: var(--workspace-canvas); }
.conversation-summary-fact small { color: var(--muted); }
.conversation-summary-fact strong { color: var(--text); font-size: 17px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .conversation-summary-grid { grid-template-columns: 1fr; }
}

/* Settings are real choices, not explanatory placeholders. */
.interface-style-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.interface-style-options legend { grid-column: 1 / -1; }
.interface-style-options label { align-items: flex-start; min-height: 98px; padding: 14px; border: 1px solid var(--workspace-border); border-radius: 10px; background: #fff; }
.interface-style-options label:has(input:checked) { border-color: var(--workspace-accent); background: var(--workspace-soft); box-shadow: inset 0 0 0 1px var(--workspace-accent); }
.interface-style-options label span { display: grid; gap: 6px; }
.interface-style-options label strong { color: var(--text); }
.interface-style-options label small { color: var(--muted); line-height: 1.55; }
.login-sessions-card { margin-top: 18px; padding: 20px; border: 1px solid var(--workspace-border); border-radius: 10px; background: #fff; }
.login-sessions-list { display: grid; gap: 8px; margin-top: 12px; }
.login-session-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--workspace-border); }
.login-session-row div { display: grid; gap: 4px; }
.login-session-row small { color: var(--muted); }
.about-story { display: grid; gap: 14px; }
.about-story article { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px; border: 1px solid var(--workspace-border); border-radius: 12px; background: linear-gradient(135deg, #fff, var(--workspace-soft)); }
.about-story article > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--workspace-selected); color: var(--workspace-accent); font-weight: 750; }
.about-story strong { color: var(--text); font-size: 18px; }
.about-story p { margin: 7px 0 0; color: var(--muted); line-height: 1.75; }
.about-boundaries { margin-top: 18px; padding: 16px 20px; border: 1px solid var(--workspace-border); border-radius: 10px; background: #fff; }
.about-boundaries > summary { cursor: pointer; color: var(--workspace-accent); font-weight: 700; }
.about-boundaries .governance-grid { margin-top: 16px; }
.about-version { color: var(--muted); font-size: 12px; }
.friend-add-search-panel { display: grid; gap: 10px; margin-top: 12px; }
.friend-add-search-panel[hidden],
.friend-add-choices[hidden] { display: none; }
.friend-add-search-results { display: grid; gap: 8px; max-height: min(46dvh, 420px); overflow: auto; }
.friend-search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px; border: 1px solid var(--workspace-border); border-radius: 9px; background: #fff; }
.friend-search-result div { display: grid; gap: 3px; }
.friend-search-result small { color: var(--muted); }
.friend-search-result .form-status { grid-column: 1 / -1; }

html[data-interface-style="conversation"] .task-chat-column,
html[data-interface-style="conversation"] .task-chat-message[data-mine="true"] .task-chat-column { max-width: min(94%, 1040px); }
html[data-interface-style="conversation"] .task-chat-messages { padding-inline: clamp(18px, 3vw, 48px); }
/* Preference selectors must override the final workspace rules, including IDs. */
html[data-density="compact"] :is(#project-browser-list, #friend-browser-list) .prototype-list-item {
  min-height: 66px; padding: 10px 14px; gap: 4px;
}
html[data-density="compact"] .task-chat-message { margin-bottom: 12px; }
html[data-density="compact"] .task-chat-bubble,
html[data-density="compact"] .task-chat-message[data-mine="true"] .task-chat-bubble { padding: 8px 12px; }
html[data-density="compact"] .task-chat-identity { margin-bottom: 4px; }

html[data-theme="contrast"] {
  --workspace-border: #879a8d; --workspace-canvas: #fff; --text: #17281e; --muted: #3b5044; --line: #879a8d;
}
html[data-theme="contrast"] .task-chat-detail,
html[data-theme="contrast"] .task-chat-messages { background: #fff; }
html[data-theme="contrast"] .task-chat-bubble { border-color: #879a8d; color: #17281e; }
html[data-theme="contrast"] .task-chat-message[data-mine="true"] .task-chat-bubble { border-color: #648572; background: #cee4d0; color: #17281e; }
html[data-theme="contrast"] :is(.task-chat-identity, .task-chat-identity time, .task-chat-attribution, .task-chat-compose > small, .prototype-list-item small, .preferences-form small, .preferences-form p) { color: #3b5044; }
html[data-theme="contrast"] #project-browser-list .prototype-list-item + .prototype-list-item { border-top-color: #879a8d; }

.task-preference-overview { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 30px; border-bottom: 1px solid var(--workspace-border); background: var(--workspace-soft); font-size: 13px; }
.task-preference-overview[hidden], .task-focus-mode .task-preference-overview { display: none; }
.task-progress-status { min-height: 44px; padding: 5px 9px; border: 1px solid var(--workspace-border); border-radius: 8px; background: var(--workspace-surface); color: var(--text); font: inherit; cursor: pointer; }
.task-progress-status:hover { background: var(--workspace-selected); border-color: var(--workspace-accent); }
.task-progress-status:focus-visible, .task-progress-item:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 2px; }
.task-progress-context { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.task-progress-list { display: grid; gap: 10px; }
.task-progress-item { display: grid; gap: 7px; width: 100%; min-width: 0; padding: 14px; border: 1px solid var(--workspace-border); border-radius: 10px; background: var(--workspace-surface); text-align: left; color: var(--text); font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.task-progress-item:hover { background: var(--workspace-selected); border-color: var(--workspace-accent); }
.task-progress-item span { font-size: 13px; line-height: 1.6; }
.task-progress-item:disabled { cursor: progress; opacity: .65; }
.task-progress-item .task-progress-link { color: var(--workspace-accent); }

.task-preference-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; min-width: 0; color: var(--text); }
.task-preference-facts strong { color: var(--text); }
.task-preference-acceptance { border-left: 1px solid var(--workspace-border); padding-left: 14px; }
.task-preference-overview > button { flex: 0 0 auto; min-height: 36px; white-space: nowrap; }
.task-preference-overview > .task-progress-mobile-summary { display: none; }
.task-progress-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.task-progress-choices .task-progress-status { font-size: 14px; line-height: 1.5; }
.task-progress-choices > p { grid-column: 1 / -1; }
.task-progress-dialog .quiet-button { min-width: 44px; min-height: 44px; }
.task-progress-dialog .task-progress-list { margin-top: 12px; }
.task-progress-acceptance { border-top: 1px solid var(--workspace-border); padding-top: 14px; }
@media (max-width: 760px) {
  .task-preference-overview { padding: 4px 12px; font-size: 12px; }
  .task-preference-overview > :is(.task-preference-facts, .task-progress-work-entry) { display: none; }
  .task-preference-overview > .task-progress-mobile-summary { display: grid; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 52px; gap: 4px; padding: 6px 4px; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
  .task-progress-mobile-heading, .task-progress-mobile-detail { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; line-height: 18px; }
  .task-progress-mobile-heading > span { color: var(--workspace-accent); }
  .task-progress-mobile-detail { color: var(--muted); font-size: 11px; }
  .task-progress-mobile-detail > span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .task-progress-mobile-summary:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 0; border-radius: 6px; }
}
@media (max-height: 560px) {
  .task-preference-overview { display: none; }
}

/* At laptop widths, protect the reading column without turning a two-action menu into a side panel. */
@media (min-width: 861px) and (max-width: 1100px) {
  .workspace.project-workspace-mode.project-detail-open { grid-template-columns: 76px minmax(0, 1fr); }
  .workspace.project-workspace-mode.project-detail-open > .context-sidebar { display: none; }
  .workspace.project-workspace-mode.project-detail-open #project-mobile-back { display: inline-flex; position: absolute; z-index: 3; left: 88px; top: 16px; width: 34px; height: 34px; margin: 0; }
  .workspace.project-workspace-mode.project-detail-open #project-detail .prototype-detail-heading { padding-left: 62px; }
}

@media (max-width: 760px) {
  .interface-style-options { grid-template-columns: 1fr; }
  .interface-style-options label { min-height: 0; }
  .login-session-row, .friend-search-result { grid-template-columns: 1fr; }
}

/* Compact task actions: each command is one clear row; current status expands in-place. */
.task-personal-actions {
  gap: 0;
  width: min(286px, calc(100vw - 24px));
  padding: 6px;
  border-color: var(--workspace-border);
  border-radius: 10px;
}
.task-personal-actions .task-menu-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.task-personal-actions .task-menu-action[hidden] { display: none; }
.task-personal-actions .task-menu-action:hover,
.task-personal-actions .task-menu-action:focus-visible,
.task-personal-actions .task-menu-action[aria-expanded="true"] { background: var(--workspace-soft); color: var(--workspace-accent); }
.task-personal-actions .task-menu-action > span:last-child { color: var(--muted); font-size: 17px; }
.task-personal-actions .task-menu-action[aria-expanded="true"] > span:last-child { transform: rotate(90deg); }
.task-situation-inline { display: grid; gap: 8px; margin: 2px 5px 6px; padding: 10px; border-radius: 7px; background: var(--workspace-soft); }
.task-situation-inline[hidden] { display: none; }
.task-situation-inline h3 { margin: 0; color: var(--text); font-size: 12px; }
.task-situation-inline > p { color: var(--muted); font-size: 11px; }
.task-situation-inline > small { color: var(--muted); font-size: 10px; line-height: 1.6; }
.task-situation-inline .conversation-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.task-situation-inline .conversation-summary-fact { min-width: 0; padding: 7px; border: 0; border-radius: 5px; background: #fff; }
.task-situation-inline .conversation-summary-fact small { font-size: 9px; }
.task-situation-inline .conversation-summary-fact strong { margin-top: 2px; font-size: 11px; }

/* Wrappers keep the desktop layout while grouping each mobile list toolbar. */
.mobile-list-toolbar { display: contents; }
.mobile-toolbar-action-mark { display: none; }

/* These dialogs have no form wrapper to provide the shared dialog padding. */
#friend-add-dialog, #personal-share-dialog { box-sizing: border-box; padding: 28px; }
#friend-add-dialog .dialog-heading { margin-bottom: 16px; gap: 20px; }
#friend-add-dialog .dialog-summary { margin: 0; line-height: 1.7; }
#friend-add-dialog .friend-add-choices { gap: 16px; margin-top: 24px; }
#friend-add-dialog .friend-add-choice { box-sizing: border-box; padding: 20px; line-height: 1.6; }
#friend-add-dialog .friend-add-search-panel { gap: 14px; margin-top: 20px; }
#friend-add-search-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; font: inherit; }

.preferences-preview { max-width: 850px; padding: 18px; border: 1px solid var(--workspace-border); border-radius: 10px; background: var(--workspace-soft); color: var(--text); }
.preferences-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.preferences-preview-heading span, .preferences-preview > p, .preferences-preview > small { font-size: 12px; color: var(--muted); }
.preferences-preview > p { margin: 8px 0; }
.preferences-preview-progress { padding: 8px 10px; border-radius: 6px; background: var(--workspace-selected); font-size: 12px; }
.preferences-preview-messages { display: grid; gap: 14px; margin: 14px 0; }
.preferences-preview-messages p { width: fit-content; max-width: 90%; margin: 0; padding: 12px 16px; border: 1px solid var(--workspace-border); border-radius: 8px; background: #fff; font-size: 13px; }
.preferences-preview-messages p:last-child { justify-self: end; background: var(--workspace-selected); }
.preferences-preview[data-style="conversation"] .preferences-preview-progress { display: none; }
.preferences-preview[data-density="compact"] .preferences-preview-messages { gap: 6px; margin: 8px 0; }
.preferences-preview[data-density="compact"] .preferences-preview-messages p { padding: 6px 10px; }
.preferences-preview[data-theme="contrast"] { background: #fff; color: #17281e; border-color: #648572; }
.preferences-preview[data-theme="contrast"] .preferences-preview-messages p { border-color: #648572; color: #17281e; }
.preferences-preview[data-theme="contrast"] .preferences-preview-messages p:last-child { background: #cee4d0; }
html[data-theme="contrast"] .workspace :is(.context-sidebar, .content-section, .preferences-form, .profile-summary-grid) { background: #fff; color: #17281e; border-color: #879a8d; }
html[data-theme="contrast"] .workspace :is(.context-nav-item strong, .context-nav-item small, .section-intro, .section-tag, .preferences-form small, .preferences-form p) { color: #314d3e; }
html[data-theme="contrast"] .preferences-form :is(fieldset, .interface-style-options label) { border-color: #879a8d; }

@media (max-width: 860px) {
  #friend-add-dialog, #personal-share-dialog { padding: 20px; }
  #friend-add-dialog .friend-add-choice { padding: 16px; }
}

/* Settings navigation and account actions use one alignment system at every width. */
.workspace[data-active-module="settings"] .context-navigation { padding: 6px 10px 14px; }
.workspace[data-active-module="settings"] .context-navigation > div:not([hidden]) { display: grid; gap: 4px; width: 100%; }
.workspace[data-active-module="settings"] .context-nav-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
}
.workspace[data-active-module="settings"] .context-nav-item > span:first-child { display: grid; gap: 2px; min-width: 0; }
.workspace[data-active-module="settings"] .context-nav-item strong { font-size: 13px; }
.workspace[data-active-module="settings"] .context-nav-item small { margin: 0; font-size: 11px; line-height: 1.45; }
.workspace[data-active-module="settings"] .context-nav-item.active { border-left-color: transparent; background: var(--workspace-soft); box-shadow: inset 3px 0 var(--workspace-accent); }
.workspace .mobile-account-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 850px);
  margin-top: 18px;
  padding: 0 0 8px;
}
.workspace .mobile-account-actions > :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 9px 10px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 860px) {
  .workspace[data-active-module="settings"] .context-navigation { overflow: visible; padding: 0 12px 10px; }
  .workspace[data-active-module="settings"] .context-navigation > div:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 5px; }
  .workspace[data-active-module="settings"] .context-nav-item { display: flex; justify-content: center; min-height: 40px; padding: 8px 5px; border-radius: 7px; text-align: center; }
  .workspace[data-active-module="settings"] .context-nav-item small,
  .workspace[data-active-module="settings"] .context-nav-item > span:last-child { display: none; }
  .workspace[data-active-module="settings"] .context-nav-item.active { background: var(--workspace-soft); box-shadow: none; }
  .task-personal-actions { inset: auto; width: min(286px, calc(100vw - 24px)); padding: 7px; border-radius: 10px; box-shadow: 0 12px 32px #2033272b; }
  .task-personal-actions .task-menu-action { min-height: 44px; font-size: 13px; }
  .workspace-sidebar .primary-nav-item .primary-nav-notice,
  .workspace-sidebar .primary-nav-item.active .primary-nav-notice { border-color: var(--workspace-border); }
}

/* Keep mobile titles, search and the primary action on one accessible row. */
@media (max-width: 860px) {
  #workspace-view .mobile-list-toolbar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 44px;
    grid-template-areas: "title search action";
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    min-width: 0;
    padding: 8px 12px;
  }
  #workspace-view .mobile-list-toolbar :is(.prototype-browser-heading, .prototype-browser-title, .thread-browser-heading) { display: contents; }
  #workspace-view .mobile-list-toolbar :is(.prototype-browser-heading, .thread-browser-heading) > div { display: block; grid-area: title; }
  #workspace-view .mobile-list-toolbar :is(.prototype-browser-heading, .thread-browser-heading) > div > span,
  #workspace-view .mobile-list-toolbar .count-pill { display: none; }
  #workspace-view .mobile-list-toolbar strong,
  #project-browser .mobile-list-toolbar strong { grid-area: title; margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
  .workspace :is(#project-browser, #friend-browser, #agent-browser) .mobile-list-toolbar .thread-search { grid-area: search; min-width: 0; margin: 0; }
  #workspace-view .mobile-list-toolbar input[type="search"] { box-sizing: border-box; width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 8px 10px; font-size: 16px; }
  #workspace-view .mobile-list-toolbar .primary-action {
    grid-area: action;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--workspace-soft);
    color: var(--text);
  }
  #workspace-view .mobile-list-toolbar .mobile-toolbar-action-label { display: none; }
  #workspace-view .mobile-list-toolbar .mobile-toolbar-action-mark { display: block; font-size: 26px; line-height: 1; }
  .workspace.friend-workspace-mode .context-heading,
  .workspace.agent-workspace-mode .context-heading { display: none; }
  .workspace[data-active-module="relay"].agent-workspace-mode .context-navigation { order: 1; padding: 0 12px 8px; }
  .workspace.agent-workspace-mode #agent-browser { display: contents; }
  .workspace.agent-workspace-mode #agent-browser[hidden] { display: none; }
  .workspace.agent-workspace-mode #agent-browser-list { order: 2; flex: 1; min-height: 0; }
  #project-filter { padding: 0 12px 4px; }
  #friend-filter { padding: 0 12px 4px; }
  #friend-filter button { min-height: 44px; }
  .workspace[data-active-module="settings"] .context-heading { display: none; }
  .workspace[data-active-module="settings"] .context-navigation { padding: 8px 12px; }
  .workspace[data-active-module="settings"] .context-nav-item { min-height: 44px; }
  .workspace[data-active-module="settings"] .section-heading { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 12px; }
  .workspace[data-active-module="settings"] .section-heading .section-tag { display: none; }
}

#friend-add-dialog label { color: var(--text); }


/* The planet fills the friends home until a friend is selected. */
.friend-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#friend-browser-list .prototype-list-copy strong { white-space: normal; overflow-wrap: anywhere; }
.friend-growth-badge { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 400; color: var(--workspace-accent); white-space: nowrap; }
.growth-confirmation-options { display: grid; gap: 20px; }
.growth-confirmation-options form, .growth-confirmation-options label { display: grid; gap: 8px; min-width: 0; }
.growth-confirmation-options textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 80px; color: var(--text); background: var(--workspace-soft); border: 1px solid var(--workspace-border); border-radius: 6px; padding: 10px; }
.growth-contribution-dialog [hidden] { display: none; }
.growth-contribution-dialog { width: min(640px, calc(100vw - 24px)); }
.growth-contribution-dialog p { margin: 0; line-height: 1.6; }
.growth-contribution-dialog .task-matter-dialog-body { display: grid; gap: 16px; }
.growth-contribution-intro { font-weight: 600; }
.growth-contribution-hint { color: var(--muted); line-height: 1.6; }
.growth-contribution-source, .growth-contribution-history { padding: 12px; border: 1px solid var(--workspace-border); border-radius: 8px; }
.growth-contribution-dialog summary { cursor: pointer; line-height: 1.5; }
.growth-contribution-source p, .growth-contribution-entry { margin-top: 12px; }
.growth-contribution-source p { max-height: 140px; overflow: auto; }
.growth-contribution-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 0 0 8px; border: 0; min-width: 0; }
.growth-contribution-choices legend { padding: 0 0 12px; font-weight: 600; }
.growth-contribution-choices .growth-contribution-choice { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--workspace-border); border-radius: 8px; cursor: pointer; }
.growth-contribution-choice:has(input:checked) { border-color: var(--workspace-accent); background: var(--workspace-soft); }
.growth-contribution-choice:focus-within { outline: 2px solid var(--workspace-accent); outline-offset: 2px; }
.growth-contribution-dialog .growth-contribution-choice input { width: 16px; height: 16px; flex: 0 0 16px; margin: 3px 0 0; accent-color: var(--workspace-accent); }
.growth-contribution-choice span { display: grid; gap: 4px; }
.growth-contribution-choice small { line-height: 1.5; color: var(--muted); }
.growth-contribution-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.growth-contribution-actions button { min-height: 44px; }
.growth-contribution-entry { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--workspace-border); }
.task-chat-contribution { border-left: 3px solid var(--workspace-accent); }
@media (max-width: 600px) {
  .growth-contribution-choices { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .growth-contribution-choices .growth-contribution-choice { padding: 10px; }
}
#friend-browser-list .friend-has-growth { grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 10px; }
#friend-browser-list .friend-has-growth .prototype-list-avatar { grid-column: 1; grid-row: 1; }
#friend-browser-list .friend-has-growth .prototype-list-copy { grid-column: 2; grid-row: 1; }
#friend-browser-list .friend-has-growth .prototype-list-badge { grid-column: 2; grid-row: 2; }
#friend-browser-list .friend-growth-badge { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: end; margin: 0; padding: 5px 6px; border-radius: 5px; background: var(--workspace-soft); font-size: 10px; line-height: 1.5; }
#friend-detail-growth { margin-left: 0; }
#friend-mobile-back { min-height: 44px; border: 0; background: transparent; color: var(--workspace-accent); }
.workspace.friend-workspace-mode.friend-detail-open #friend-mobile-back { display: inline-flex; width: fit-content; }
.workspace.friend-workspace-mode.friend-planet-open #friend-mobile-back { display: none; }
.workspace.friend-workspace-mode.friend-planet-open #friend-directory { display: block; height: 100%; min-height: 0; padding: 0; }
.workspace.friend-workspace-mode.friend-planet-open > .workspace-content { display: block; height: 100%; overflow: hidden; }
.workspace.friend-planet-open #planet-workspace-panel { overflow: hidden; }
.workspace.friend-planet-open #planet-workspace-frame { flex: 1 1 0; min-height: 0; height: 100%; }

/* Device notification settings */
.push-settings-card { max-width: 760px; padding: 24px; border: 1px solid var(--workspace-border); border-radius: 18px; background: var(--surface, #fff); }
.push-settings-card > p, .push-help { line-height: 1.7; overflow-wrap: anywhere; }
.push-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.push-actions button { min-height: 44px; }
.push-settings-card .secondary-action { border: 1px solid var(--workspace-border); border-radius: 8px; padding: 9px 14px; background: var(--workspace-soft); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.push-settings-card .secondary-action:disabled { opacity: .5; cursor: default; }
.push-settings-card :is(h3, .push-rules p) { margin: 0; }
.push-settings-card > h3 { margin: 0 0 16px; }
.push-settings-card :is(#push-result, #push-rules-result):empty { display: none; }
#push-status { padding: 14px 16px; background: var(--workspace-soft); border-radius: 12px; color: var(--workspace-accent); }
.push-help { margin-top: 20px; }
.push-help summary { cursor: pointer; padding: 8px 0; }
.push-help li { margin-bottom: 8px; }
@media (max-width: 640px) { .push-settings-card { padding: 18px; } .push-actions button { flex: 1 1 140px; } }

.push-rules { border-top: 1px solid var(--workspace-border); margin-top: 24px; padding-top: 16px; display: grid; gap: 12px; }
.push-rules fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.push-rules fieldset[hidden] { display: none; }
.push-rules legend { font-weight: 600; margin-bottom: 12px; }
.push-rules label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.push-rules input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--workspace-accent); }
.push-rules select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; background: white; color: var(--workspace-accent); border: 1px solid var(--workspace-border); border-radius: 10px; }
.push-rules button { justify-self: start; min-height: 44px; }
@media (max-width: 860px) {
  .workspace[data-active-module="settings"] .context-navigation > div:not([hidden]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.notification-audience { display: flex; gap: 8px; margin: 0 0 18px; }
.notification-audience button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--workspace-border); border-radius: 10px; background: #fff; color: var(--text); font: inherit; cursor: pointer; }
.notification-audience button[aria-pressed="true"] { background: var(--workspace-selected); border-color: var(--workspace-accent); font-weight: 600; }
#notify-ai-panel select { display: block; width: 100%; min-height: 44px; min-width: 0; max-width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--workspace-border); border-radius: 8px; font: inherit; background: #fff; }
#notify-ai-panel .ai-notify-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; }
#notify-ai-panel input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--workspace-accent); }
#ai-notify-result:empty { display: none; }

/* Plain-language AI setup, consistent with the existing mist workspace. */
.ai-setup-card { margin: 20px 0; padding: 24px; border: 1px solid var(--workspace-border); border-radius: 20px; background: var(--workspace-canvas); }
.ai-setup-card h3 { margin: 8px 0; font-size: 23px; line-height: 1.4; }
.ai-setup-card > p:not(.section-tag), .ai-setup-help p, .ai-setup-dialog > p { color: var(--muted); line-height: 1.8; }
.ai-setup-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0; padding: 0; list-style: none; counter-reset: setup; }
.ai-setup-steps li { counter-increment: setup; padding: 15px; border: 1px solid var(--workspace-border); border-radius: 12px; background: #fff; }
.ai-setup-steps li::before { content: counter(setup); display: block; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.ai-setup-steps li[aria-current] { border-color: var(--workspace-accent); box-shadow: inset 0 0 0 1px var(--workspace-accent); }
.ai-setup-steps li.complete::before { content: "✓"; }
.ai-setup-steps strong, .ai-setup-steps span { display: block; line-height: 1.65; }
.ai-setup-steps span { color: var(--muted); font-size: 13px; margin-top: 6px; }
.ai-setup-help { margin: 20px 0; padding: 18px; border: 1px solid var(--workspace-border); border-radius: 14px; }
.ai-setup-help summary { cursor: pointer; font-weight: 600; }
.ai-setup-dialog { max-width: min(520px, calc(100vw - 32px)); }
.ai-setup-dialog h2 { font-size: 25px; line-height: 1.45; }
.ai-setup-note { padding: 14px; background: var(--workspace-canvas); border-radius: 12px; }
@media (max-width: 700px) {
  .ai-setup-card { padding: 18px; }
  .ai-setup-card h3 { font-size: 21px; }
  .ai-setup-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ai-setup-steps li { padding: 12px; }
  .ai-setup-steps li::before { float: left; margin: 1px 12px 0 0; }
  .ai-setup-card > button { width: 100%; }
}
.ai-setup-dialog { width: 520px; padding: 26px; box-sizing: border-box; }
.ai-setup-dialog .dialog-heading { margin-bottom: 16px; }
.ai-setup-dialog h2 { margin: 0 0 14px; }
.ai-setup-dialog .dialog-actions { padding-top: 12px; }
@media (max-width: 700px) { .ai-setup-dialog { padding: 20px; } }
.agent-overview-metrics[hidden] { display: none; }
.pairing-dialog { padding: 0; }
.pairing-dialog form { min-width: 0; padding: 24px; }
.pairing-dialog form > *, .pairing-guide > *, .pairing-chat-card > div { min-width: 0; }
.pairing-host-picker { min-inline-size: 0; }
#pairing-prompt-preview summary { cursor: pointer; color: var(--muted); font-size: 13px; }
#pairing-prompt-preview .pairing-chat-prompt { margin-top: 12px; max-height: 240px; overflow: auto; overflow-wrap: anywhere; }
/* Add-AI dialog: one sentence, one copy action; the connected state replaces it with examples. */
.pairing-dialog .pairing-chat-label { margin: 0 0 6px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.pairing-dialog .pairing-chat-card { padding: 16px 18px; border-radius: 12px; }
.pairing-dialog:has(#pairing-guide:not([hidden])),
.pairing-dialog:has(#pairing-approval:not([hidden])) { width: min(600px, calc(100vw - 32px)); }
.pairing-dialog .pairing-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 14px 16px; }
.pairing-dialog .pairing-preview strong { font-size: 16px; color: var(--text); }
.pairing-dialog .pairing-preview p { margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
.pairing-dialog .pairing-preview span { grid-column: 1 / -1; color: var(--muted); font-family: inherit; font-size: 13px; letter-spacing: 0; }
.pairing-dialog #pairing-result:empty, .pairing-dialog #pairing-target-summary:empty { display: none; }
.pairing-dialog .pairing-existing-toggle { justify-self: start; min-height: 0; padding: 0; border: 0; background: none; color: var(--workspace-accent); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.pairing-dialog .pairing-approval .split-actions { justify-content: space-between; }
.pairing-dialog #pairing-copy-result:empty { display: none; }
.pairing-connected[hidden] { display: none; }
.pairing-connected { display: grid; gap: 10px; }
.pairing-connected h3 { margin: 0; font-size: 16px; color: var(--workspace-accent); }
.pairing-connected > p { margin: 0; color: var(--muted); font-size: 13px; }
.pairing-examples { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pairing-examples li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; border: 1px solid var(--workspace-border); border-radius: 8px; background: var(--workspace-soft); padding: 10px 12px; }
.pairing-examples li > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }
.pairing-examples .pairing-example-copy { flex: none; min-height: 32px; padding: 0 12px; font-size: 13px; }
@media (max-width: 860px) {
  .pairing-dialog form { padding: 20px; }
  #agent-browser > .ai-setup-card { margin: 8px 10px 18px; }
  #agent-browser > .ai-setup-help { margin-inline: 10px; }
  .ai-setup-steps { grid-template-columns: minmax(0, 1fr); }
}


/* Bright palette: keep all existing navigation, columns, spacing and typography. */
html[data-theme="bright"], .preferences-preview[data-theme="bright"] {
  --workspace-surface: #fff; --workspace-canvas: #f8faff; --workspace-soft: #edf3ff;
  --workspace-selected: #e8f0fe; --workspace-accent: #1967d2; --workspace-accent-hover: #1557b0;
  --workspace-border: #dce3ed; --text: #202b3b; --muted: #526174; --line: #dce3ed;
  --google-blue: #1967d2; --cyan: #1967d2;
}
html[data-theme="bright"] .workspace-sidebar { background: #fff; color: var(--text); border-color: var(--workspace-border); }
html[data-theme="bright"] :is(.rail-brand,.workspace-sidebar .primary-nav-item,.workspace-sidebar .sidebar-footer button) { color: var(--theme-sidebar-text); }
html[data-theme="bright"] .workspace-sidebar .primary-nav-item.active { background: var(--workspace-selected); color: var(--workspace-accent-hover); }
html[data-theme="bright"] .workspace-sidebar .primary-nav-item.active .primary-nav-icon { background: var(--workspace-selected); color: var(--workspace-accent-hover); }
html[data-theme="bright"] .workspace-sidebar .primary-nav-item.active::before { background: var(--workspace-accent); }
html[data-theme="bright"] .primary-nav-item[data-module="projects"] .primary-nav-icon { color: var(--workspace-accent); }
html[data-theme="bright"] .primary-nav-item[data-module="friends"] .primary-nav-icon { color: var(--theme-nav-friends); }
html[data-theme="bright"] .primary-nav-item[data-module="relay"] .primary-nav-icon { color: var(--theme-nav-ai); }
html[data-theme="bright"] .primary-nav-item[data-module="settings"] .primary-nav-icon { color: var(--theme-nav-settings); }
html[data-theme="bright"] .primary-nav-notice { background: var(--status-error); border-color: #fff !important; }
html[data-theme="bright"] .workspace :is(button,a,input,textarea,summary):focus-visible { outline-color: var(--workspace-accent); }
html[data-theme="bright"] .workspace:not([data-active-module="relay"]) .context-nav-item.active,
html[data-theme="bright"] .workspace[data-active-module="settings"] .context-nav-item.active { background: var(--workspace-selected); border-left-color: var(--workspace-accent); box-shadow: inset 3px 0 var(--workspace-accent); }
html[data-theme="bright"] .workspace :is(.context-nav-item.active strong,.context-nav-item > span:last-child) { color: var(--workspace-accent-hover); }
html[data-theme="bright"] #project-browser-list .prototype-list-item.active { background: var(--workspace-selected); border-left-color: var(--workspace-accent); }
html[data-theme="bright"] #project-browser-list .prototype-list-item:hover { background: var(--workspace-soft); }
html[data-theme="bright"] :is(#project-search-input,#project-browser-new) { background: var(--workspace-soft); color: var(--workspace-accent-hover); }
html[data-theme="bright"] :is(#project-filter > button.active,#project-filter-more > summary.active,.task-chat-tools button[aria-pressed="true"]) { color: var(--workspace-accent-hover); box-shadow: inset 0 -2px var(--workspace-accent); }
html[data-theme="bright"] :is(.task-chat-detail,.task-chat-messages) { background: #fff; }
html[data-theme="bright"] .task-chat-bubble { background: var(--workspace-canvas); border-color: var(--workspace-border); color: var(--text); }
html[data-theme="bright"] .task-chat-message[data-mine="true"] .task-chat-bubble { background: var(--workspace-selected); border-color: var(--workspace-border); color: var(--text); }
html[data-theme="bright"] :is(.task-chat-compose,.task-chat-editor,.preferences-form) { background: #fff; border-color: var(--workspace-border); }
html[data-theme="bright"] .task-chat-agent { background: var(--theme-ai-soft); color: var(--theme-ai-text); }
html[data-theme="bright"] :is(.task-preference-overview,.preferences-preview-progress) { background: var(--theme-progress-soft); color: var(--theme-progress-text); }
html[data-theme="bright"] :is(.interface-style-options label:has(input:checked)) { background: var(--workspace-selected); border-color: var(--workspace-accent); }
html[data-theme="bright"] :is(input[type="checkbox"],input[type="radio"]) { accent-color: var(--workspace-accent); }
.preferences-preview[data-theme="bright"] { background: var(--workspace-canvas); color: var(--text); border-color: var(--workspace-border); }
.preferences-preview[data-theme="bright"] .preferences-preview-progress { background: var(--theme-progress-soft); color: var(--theme-progress-text); }
.preferences-preview[data-theme="bright"] .preferences-preview-messages p { background: #fff; border-color: var(--workspace-border); color: var(--text); }
.preferences-preview[data-theme="bright"] .preferences-preview-messages p:last-child { background: var(--workspace-selected); }
.theme-four-colors { display: inline-flex; gap: 3px; vertical-align: middle; }
.theme-four-colors i { width: 10px; height: 10px; border-radius: 50%; background: #1a73e8; }
.theme-four-colors i:nth-child(2) { background: #ea4335; }
.theme-four-colors i:nth-child(3) { background: #fbbc04; }
.theme-four-colors i:nth-child(4) { background: #34a853; }
html[data-enhanced-contrast="on"] { --workspace-border: #667582; --muted: #354355; --text: #152235; --line: #667582; }
html[data-enhanced-contrast="on"] :is(.task-chat-detail,.task-chat-messages,.preferences-form,.content-section) { background: #fff; color: #152235; }
html[data-enhanced-contrast="on"] :is(.task-chat-bubble,.task-chat-message[data-mine="true"] .task-chat-bubble,.preferences-form fieldset,.interface-style-options label) { border-color: #667582; color: #152235; }
html[data-enhanced-contrast="on"] :is(.task-chat-identity,.task-chat-identity time,.task-chat-attribution,.task-chat-compose > small,.prototype-list-item small,.preferences-form small,.preferences-form p,.section-tag) { color: #354355; }
.preferences-preview[data-enhanced-contrast="on"] { color: #152235; border-color: #667582; }
.preferences-preview[data-enhanced-contrast="on"] :is(p,small,.preferences-preview-heading span) { color: #152235; border-color: #667582; }

/* Additional mention controls live inside the existing composer. */
.task-mention-area { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 8px; }
.task-mention-chips,.task-message-mentions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.task-mention-chip { display: inline-block; max-width: 100%; border-radius: 14px; padding: 4px 9px; background: var(--workspace-selected); color: var(--workspace-accent); font-size: 12px; overflow-wrap: anywhere; }
.task-mention-hint { flex-basis: 100%; color: #536174; font-size: 11px; }
.task-mention-menu { position: absolute; z-index: 15; bottom: 100%; left: 0; width: min(420px,100%); max-height: 220px; overflow: auto; background: #fff; border: 1px solid var(--workspace-border); border-radius: 8px; box-shadow: 0 6px 20px #1522351a; padding: 6px; box-sizing: border-box; }
.task-mention-menu[hidden] { display: none; }
.task-mention-menu p { padding: 10px; font-size: 13px; }
.task-mention-option { border: 0; background: #fff; display: block; width: 100%; min-height: 48px; text-align: left; padding: 8px 10px; color: var(--text); }
.task-mention-option small { display: block; color: #536174; overflow-wrap: anywhere; margin-top: 4px; }
.task-mention-option[aria-selected="true"] { background: var(--workspace-selected); }
.task-message-mentions { margin-bottom: 6px; }
.task-mention-details { display: none; color: #354355; background: #fff; padding: 4px; }
.task-mention-chip:focus .task-mention-details,.task-mention-chip:hover .task-mention-details { display: block; }
@media (max-width: 600px) {
  .task-mention-chips button { min-height: 44px; }
  .task-mention-menu { max-height: min(220px,35dvh); }
}
.task-chat-compose > .task-mention-area { grid-column: 1; grid-row: 3; padding: 0; flex-wrap: nowrap; min-width: 0; }
.task-chat-compose:has(> .task-mention-area) > .task-chat-send-hint { display: none; }
.task-chat-compose:has(> .task-mention-area) > button[type="submit"] { grid-column: 2; grid-row: 3; }
.task-mention-area .task-mention-chips { flex-wrap: nowrap; overflow-x: auto; }
.task-mention-area .task-mention-chip { flex: none; white-space: nowrap; }
.task-mention-area .task-mention-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html[data-theme="bright"] .task-chat-compose > button { background: #1967d2; color: #fff; }
html[data-theme="bright"] .task-chat-compose > button:not(:disabled):hover { background: #1557b0; }
html[data-theme="bright"] .task-chat-compose > button:disabled { background: #e7edf7; color: #53647d; }
html[data-theme="bright"] .workspace .task-chat-editor:focus-within { border-color: #1967d2; box-shadow: 0 0 0 2px #1967d21a; }

/* AI entry: the same overview on both screens; detail opens only by selection. */
.workspace[data-active-module="relay"] .context-sidebar { background: var(--workspace-surface); }
.ai-setup-card[hidden], .ai-setup-help[hidden] { display: none; }
.ai-setup-card.compact { padding: 16px 18px; }
.ai-setup-card.compact .ai-setup-steps,
.ai-setup-card.compact #ai-setup-progress,
.ai-setup-card.compact #ai-setup-copy { display: none; }
.ai-setup-card.compact h3 { margin: 0 0 12px; font-size: 17px; }
.agent-overview-groups { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.agent-overview-groups .agent-browser-item { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; min-height: 116px; padding: 20px; border: 1px solid var(--workspace-border); border-radius: 10px; background: var(--workspace-surface); text-align: left; }
.agent-overview-groups .agent-browser-item > .data-chip { align-self: flex-start; }
.agent-overview-groups .agent-browser-identity { min-width: 0; }
.agent-overview-groups .agent-browser-identity > span:last-child { min-width: 0; }
.agent-overview-groups .agent-browser-item:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: -2px; }
@media (max-width: 860px) {
  .workspace.agent-workspace-mode:not(.agent-detail-open) .context-sidebar { overflow: hidden; }
  .workspace[data-active-module="relay"] .context-sidebar { border-right: 0; }
  .workspace[data-active-module="relay"] .context-heading { display: none; }
  #workspace-view[data-active-module="relay"] .context-navigation { order: 0; flex: 0 0 auto; padding: 0 12px; border-bottom: 1px solid var(--workspace-border); }
  .workspace[data-active-module="relay"] .context-nav-item { min-height: 44px; }
  .workspace.agent-workspace-mode #agent-browser { display: flex; order: 1; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding-bottom: 16px; scroll-padding-top: 72px; }
  .workspace.agent-workspace-mode #agent-browser[hidden] { display: none; }
  .workspace.agent-workspace-mode #agent-browser > .mobile-list-toolbar { position: sticky; top: 0; z-index: 2; flex: 0 0 auto; background: var(--workspace-surface); }
  .workspace.agent-workspace-mode #agent-browser-list { order: 0; flex: 0 0 auto; overflow: visible; }
  .workspace.agent-workspace-mode #agent-browser > .ai-setup-card { margin: 12px; }
  .workspace.agent-workspace-mode #agent-browser > .ai-setup-help { margin: 12px; }
  /* Both AI pages keep the tabs and toolbar at the same height. Each body owns its scroll. */
  #workspace-view[data-active-module="relay"] #connections { padding: 0; min-height: 100%; background: var(--workspace-surface); }
  #connections > .section-heading { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; min-height: 60px; margin: 0; padding: 8px 12px; gap: 12px; border: 0; box-shadow: inset 0 -1px var(--workspace-border); background: var(--workspace-surface); }
  #connections > .section-heading .section-tag { display: none; }
  #connections > .section-heading h2 { margin: 0; font-size: 16px; line-height: 1.5; }
  #connections #open-pairing { flex: 0 0 auto; min-height: 44px; font-size: 13px; }
  #connections > .section-intro { margin: 12px; }
  #connections > .connector-grid { margin: 16px 12px; }
  .workspace[data-active-module="relay"] > .workspace-content { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  #agent-mobile-back { min-height: 44px; }
}

/* Chat review: keep task identity together and controls reachable at narrow widths. */
#project-detail #task-jump-nav { display: flex; gap: 2px; }
#project-detail .prototype-detail-actions { gap: 4px; }
#task-jump-nav button, #task-search-open, #project-invite,
#project-detail .task-personal-menu > summary { min-width: 44px; min-height: 44px; height: 44px; justify-content: center; }
.task-chat-editor.has-quote { overflow-y: auto; }
.task-chat-editor .task-chat-quote { flex: 0 0 44px; }
.workspace .task-chat-editor .task-chat-quote > button { min-height: 44px; padding: 8px; color: var(--workspace-accent); border-radius: 6px; }
.workspace .task-chat-editor .task-chat-quote > button:hover:not(:disabled) { background: var(--workspace-selected); }
.workspace .task-chat-editor .task-chat-quote > button:disabled { color: var(--muted); cursor: default; opacity: 0.65; }
.workspace .task-chat-editor .task-chat-quote > button:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: -2px; }
#project-detail .task-header-summary #project-detail-title { flex: 0 1 auto; }
#project-detail-status { display: inline-flex; flex: 0 0 auto; white-space: nowrap; }
#task-members-open, #private-chat-info-open { min-height: 44px; padding: 6px; }
#task-search-open, #project-invite { display: flex; }
#task-info-dialog #task-overview-open { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; }
#task-info-dialog #task-overview-open:hover { background: var(--workspace-selected); }
.task-mention-menu { position: fixed; z-index: 1000; width: min(480px, calc(100vw - 24px)); }
#task-leave { width: 100%; min-height: 44px; text-align: left; }
@media (max-width: 1100px) {
  #project-detail .prototype-detail-heading { flex-wrap: wrap; gap: 4px 12px; }
  #project-detail .task-header-summary { flex: 1 1 calc(100% - 60px); }
  #project-detail .prototype-detail-actions { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
  #project-detail .prototype-detail-actions > * { flex-shrink: 0; }
  #task-members-open, #private-chat-info-open { font-size: 12px; }
  #task-search-open, #project-invite, .task-personal-menu > summary,
  #task-jump-nav button { width: 44px; min-height: 44px; }
  #project-detail.private-chat-open .task-header-summary { flex-basis: auto; }
  #project-detail.private-chat-open .prototype-detail-actions { flex: 0 0 auto; }
}
@media (max-width: 860px) {
  /* Reserve the back-button gutter only beside the title, not the action row. */
  #project-detail:not(.private-chat-open) .prototype-detail-heading { padding-left: 12px; }
  #project-detail:not(.private-chat-open) .task-header-summary { margin-left: 34px; }
}
/* The preview is part of the selected workspace theme, including its controls. */
.attachment-preview-dialog { background: var(--workspace-canvas); color: var(--text); border-color: var(--workspace-border); }
.attachment-preview-dialog::backdrop { background: #23332366; backdrop-filter: blur(3px); }
.attachment-preview-dialog :is(.dialog-summary, .attachment-preview-note, .section-tag) { color: var(--muted); }
.attachment-preview-dialog :is(.dialog-close, .attachment-download-link) { background: var(--workspace-surface); color: var(--workspace-accent); border-color: var(--workspace-border); }
.attachment-preview-dialog .approval-submit { background: var(--workspace-accent); color: #fff; border-color: var(--workspace-accent); }
.attachment-preview-dialog :is(button, a):focus-visible { outline-color: var(--workspace-accent); }
.task-chat-actions { opacity: 1; margin: 4px 0 0; flex-wrap: wrap; }
.task-chat-actions button { min-height: 32px; padding: 4px 8px; color: var(--workspace-accent); }
.task-copy-status { order: 1; flex-basis: 100%; font-size: 12px; color: var(--muted); }
.task-copy-status:empty { display: none; }
.task-reading-table { max-width: 100%; overflow-x: auto; }
.task-reading-table table { border-collapse: collapse; min-width: 100%; }
.task-reading-table :is(th, td) { border: 1px solid var(--workspace-border); padding: 6px 10px; text-align: left; }
.task-reading-table th { background: var(--workspace-selected); }
@media (pointer: coarse), (max-width: 860px) { .task-chat-actions button { min-height: 44px; } }
.attachment-preview-dialog :is(.dialog-close, .attachment-download-link, .approval-submit):focus-visible { outline-color: var(--workspace-accent); }
.workspace .thread-attachment-card { background: var(--workspace-surface); border-color: var(--workspace-border); }
.workspace .thread-attachment-action { color: var(--workspace-accent); border-color: var(--workspace-border); }
.workspace .thread-attachment-action.is-primary { color: #fff; background: var(--workspace-accent); border-color: var(--workspace-accent); }
.workspace .thread-attachment-action.is-primary:is(:hover, :focus-visible) { background: var(--workspace-accent-hover); border-color: var(--workspace-accent-hover); }
.task-file-card { background: var(--workspace-surface); border-color: var(--workspace-border); border-left-color: var(--workspace-accent); }
.task-files-card h3 small, .task-file-card .data-chip { background: var(--workspace-selected); color: var(--workspace-accent); border-color: var(--workspace-border); }
.task-file-card .task-file-source { color: var(--text); }
.task-file-toolbar :is(input[type="search"], select) { border-color: var(--workspace-border); }
.task-file-actions :is(.text-button, .task-record-link) { color: var(--workspace-accent); border-color: var(--workspace-border); background: var(--workspace-surface); }
.task-file-actions :is(.text-button, .task-record-link):hover { background: var(--workspace-selected); }

/* Theme completion: decoration follows the palette; outcome colors stay semantic. */
:root {
  --status-success: #18713b;
  --status-success-soft: #e7f4eb;
  --status-warning: #785700;
  --status-warning-soft: #fff4ce;
  --status-error: #b3261e;
  --status-error-soft: #fcebea;
  --green: var(--status-success);
  --red: var(--status-error);
  --gold: var(--status-warning);
  --theme-nav-friends: #956000;
  --theme-nav-ai: #188038;
  --theme-nav-settings: #c5221f;
  --theme-ai-soft: #e7f4eb;
  --theme-ai-text: #137333;
  --theme-progress-soft: #fff4ce;
  --theme-progress-text: #654d00;
  --theme-on-accent: #fff;
  --theme-sidebar: #26332d;
  --theme-sidebar-text: #d3dfd5;
  --theme-sidebar-selected: #35463a;
  --theme-sidebar-selected-text: #edf5eb;
  --muted: #56695d;
}
html[data-theme="bright"] {
  --theme-sidebar: #fff;
  --theme-sidebar-text: #425166;
  --theme-sidebar-selected: var(--workspace-selected);
  --theme-sidebar-selected-text: var(--workspace-accent-hover);
  --ink: var(--workspace-canvas);
  --ink-soft: var(--workspace-soft);
  --line-strong: #b9c8db;
}
body { background: var(--workspace-canvas); }
.workspace-sidebar { background: var(--theme-sidebar); }
.workspace-sidebar :is(.rail-brand, .primary-nav-item, .sidebar-actions button),
body:has(.workspace:not([hidden])) #personal-share-open,
#top-human-name { color: var(--theme-sidebar-text); }
.workspace-sidebar .primary-nav-item.active { background: var(--theme-sidebar-selected); color: var(--theme-sidebar-selected-text); }
.workspace-sidebar .primary-nav-item.active .primary-nav-icon { background: var(--workspace-selected); color: var(--workspace-accent); }
.topbar .top-human-avatar { background: var(--workspace-accent); color: var(--theme-on-accent); }
.workspace :is(.approval-submit, .friend-primary-action),
.approval-dialog .approval-submit,
#personal-share-dialog .approval-submit,
.task-chat-compose > button { background: var(--workspace-accent); border-color: var(--workspace-accent); color: var(--theme-on-accent); }
.approval-dialog .approval-submit:not(:disabled):hover,
.task-chat-compose > button:not(:disabled):hover { background: var(--workspace-accent-hover); }
.workspace :is(button, a, input, textarea, select, summary):focus-visible,
dialog :is(button, a, input, textarea, select, summary):focus-visible,
.filing-record:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; }
.task-chat-editor:focus-within { border-color: var(--workspace-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--workspace-accent) 18%, transparent); }
.form-status.success { color: var(--status-success); }
.form-status.error, .danger { color: var(--status-error); }
.approval-dialog .danger-submit { background: var(--status-error); border-color: var(--status-error); color: #fff; }
.theme-options label:has(input:checked) { border-color: var(--workspace-accent); background: var(--workspace-selected); }
.theme-options input { accent-color: var(--workspace-accent); }
.about-filing { padding-block: 16px; border-top: 1px solid var(--workspace-border); color: var(--muted); font-size: 12px; }
.filing-record { color: var(--workspace-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Keep the existing footer visible without overlaying the conversation. */
@media (min-width: 861px) {
  body:has(.workspace:not([hidden])) > footer { display: flex; width: 100%; height: 28px; padding: 4px 18px; background: var(--workspace-surface); color: var(--muted); font-size: 11px; }
  body:has(.workspace:not([hidden])) .workspace { height: calc(100dvh - 28px); }
  body:has(.workspace:not([hidden])) .topbar .top-human { bottom: 47px; }
  body:has(.workspace:not([hidden])) #personal-share-open { bottom: 122px; }
}
@media (max-width: 860px) {
  .workspace-sidebar { background: var(--workspace-surface); }
  .workspace-sidebar .primary-nav-item, #top-human-name { color: var(--muted); }
  .workspace-sidebar .primary-nav-item.active { color: var(--workspace-accent); background: var(--workspace-selected); }
  body:has(.workspace:not([hidden])) #personal-share-open { color: var(--workspace-accent); }
  body:not(:has(.workspace:not([hidden]))) > footer { display: flex; flex-wrap: wrap; height: auto; min-height: 44px; padding: 12px; color: var(--muted); }
}
html[data-enhanced-contrast="on"] {
  --workspace-border: #667582;
  --muted: #354355;
  --text: #152235;
  --line: #667582;
}

/* An unsaved preview owns its palette, independently of the active page theme. */
.preferences-preview[data-theme="mist"] {
  --workspace-canvas: #f7f9f7;
  --workspace-soft: #eef4ee;
  --workspace-selected: #edf4eb;
  --workspace-border: #e3e9e4;
  --text: #26352f;
  --muted: #56695d;
}
.preferences-preview[data-enhanced-contrast="on"] {
  --workspace-border: #667582;
  --text: #152235;
  --muted: #354355;
}

.preferences-form .form-status.success { color: var(--status-success); }
.preferences-form .form-status.error { color: var(--status-error); }

.attachment-preview-dialog { background: var(--workspace-surface); color: var(--text); border-color: var(--workspace-border); }
.attachment-preview-dialog :is(.dialog-summary, .attachment-preview-note) { color: var(--muted); }
.attachment-preview-dialog :is(.dialog-close, .attachment-download-link) { color: var(--workspace-accent); border-color: var(--workspace-border); }
.attachment-preview-dialog .approval-submit { background: var(--workspace-accent); border-color: var(--workspace-accent); color: var(--theme-on-accent); }
.attachment-preview-dialog :is(.dialog-close, .attachment-download-link, .approval-submit):focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; }

.data-chip:is(.connected, .ready) { background: var(--status-success-soft); color: var(--status-success); }
.data-chip:is(.awaiting_agent, .recovering) { background: var(--status-warning-soft); color: var(--status-warning); }
.preferences-preview[data-theme="mist"] .preferences-preview-progress { background: var(--workspace-selected); color: var(--text); }

/* The mobile header omits the decorative Human avatar. */
@media (max-width: 860px) {
  .topbar .top-human { display: none; }
}

/* Human task file publication and unbroken file type badges. */
.task-file-card > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: start; }
.task-file-card > div:first-child .data-chip { white-space: nowrap; flex-shrink: 0; word-break: normal; overflow-wrap: normal; }
.task-upload-form { display: grid; gap: 10px; margin-bottom: 18px; padding: 14px; min-width: 0; border: 1px solid var(--workspace-border); border-radius: 12px; background: var(--workspace-surface); color: var(--text); }
.task-upload-form label { display: grid; gap: 8px; font-weight: 600; min-width: 0; }
.task-upload-form input[type="file"] { width: 100%; min-width: 0; min-height: 44px; font: inherit; color: var(--text); }
.task-upload-form p { margin: 0; color: var(--muted); font-size: var(--font-meta); overflow-wrap: anywhere; }
.task-upload-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.task-upload-form button, .task-upload-form input::file-selector-button { min-height: 44px; border-radius: 8px; border: 1px solid var(--workspace-border); background: var(--workspace-surface); color: var(--workspace-accent); padding: 8px 12px; font: inherit; cursor: pointer; }
.task-upload-form .task-upload-submit { background: var(--workspace-accent); color: var(--theme-on-accent, #fff); border-color: var(--workspace-accent); }
.task-upload-form button:disabled, .task-upload-form input:disabled { opacity: .6; cursor: default; }
.task-upload-form :is(button, input):focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; }

.task-file-actions > :is(.text-button, .task-record-link) { display: inline-flex; min-height: 44px; align-items: center; }
/* Keep the login page within the available viewport, including its footer. */
body:has(#welcome-view:not([hidden])) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: 0;
}
body:has(#welcome-view:not([hidden])) .topbar-account { display: none; }
body:has(#welcome-view:not([hidden])) > main {
  display: flex;
  flex: 1;
}
body:has(#welcome-view:not([hidden])) > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  height: auto;
  min-height: 40px;
  margin-block: 0;
  padding: 8px 0;
}
#welcome-view {
  width: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .85fr);
  gap: clamp(24px, 5vw, 80px);
  padding: 20px clamp(0px, 2vw, 32px);
}
#welcome-view .entry-card { width: 100%; max-width: 480px; justify-self: end; padding: 28px; }
#welcome-view .entry-card h2 { font-size: clamp(1.65rem, 2.4vw, 2.25rem); }
#welcome-view .entry-card > p:not(.section-tag, .form-status) { margin: 14px 0 20px; }
#login-form .choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 4px 0 0;
  cursor: pointer;
  line-height: 1.5;
}
#login-remember {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--workspace-accent);
}
#access-result:empty { display: none; }
@media (max-width: 700px) {
  body:has(#welcome-view:not([hidden])) > main,
  body:has(#welcome-view:not([hidden])) > footer { width: calc(100% - 32px); }
  #welcome-view { grid-template-columns: 1fr; align-content: center; gap: 18px; padding: 12px 0; }
  #welcome-view .welcome-copy { max-width: 480px; width: 100%; justify-self: center; }
  #welcome-view .kicker { margin-bottom: 8px; font-size: 10px; }
  #welcome-view .welcome-copy h1 { font-size: clamp(1.7rem, 7.2vw, 2.5rem); line-height: 1.15; }
  #welcome-view .lead { margin-top: 10px; font-size: 12px; line-height: 1.6; }
  #welcome-view .principle-row { margin-top: 10px; gap: 16px; font-size: 10px; }
  #welcome-view .entry-card { justify-self: center; padding: 20px; border-radius: 20px; }
  #welcome-view .section-tag { display: none; }
  #welcome-view .entry-card h2 { max-width: none; font-size: 22px; }
  #welcome-view .entry-card > p:not(.section-tag, .form-status) { margin: 10px 0 14px; font-size: 12px; }
  #login-form { gap: 6px; }
  #login-form > input:not([type="hidden"]) { min-height: 42px; }
  #login-form .entry-submit { min-height: 44px; margin-top: 4px; }
  #welcome-view .entry-links { margin-top: 8px; }
}
@media (max-width: 700px) and (max-height: 740px) {
  #welcome-view { gap: 12px; }
  #welcome-view .kicker, #welcome-view .principle-row { display: none; }
  #welcome-view .lead { margin-top: 8px; }
  #welcome-view .entry-card { padding: 16px; }
}
@media (max-width: 700px) and (max-height: 600px) {
  #welcome-view .lead { display: none; }
  #welcome-view .entry-card h2 { font-size: 20px; }
  #welcome-view .entry-card > p:not(.section-tag, .form-status) { display: none; }
  #welcome-view #login-form { margin-top: 14px; }
}
@media (min-width: 701px) and (max-height: 700px) {
  body:has(#welcome-view:not([hidden])) > .topbar { height: 48px; min-height: 48px; }
  #welcome-view { padding-block: 12px; }
  #welcome-view .entry-card { padding: 24px; }
  #welcome-view .section-tag { margin-bottom: 10px; }
  #welcome-view .entry-card > p:not(.section-tag, .form-status) { margin: 12px 0 16px; }
}

/* Keep selected attachments within the resizable composer on narrow screens. */
.composer-files{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;padding:4px 8px;font-size:12px}
.composer-files>button,.composer-file-chip button{font:inherit;border:0;background:transparent;color:inherit;cursor:pointer;padding:4px}
.composer-file-list{display:flex;gap:5px;flex-wrap:wrap;max-height:72px;overflow:auto;min-width:0;width:100%}
.composer-file-list:empty{display:none}.composer-file-chip{display:flex;align-items:center;gap:4px;max-width:100%;background:var(--surface-soft,#eef2f6);border-radius:6px;padding:2px 5px}
.composer-file-chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.composer-file-chip button{flex:none}
.composer-file-status{font-size:11px;color:var(--text-muted,#62736b);overflow-wrap:anywhere}
.task-chat-editor:has(.composer-files){display:flex;flex-direction:column;min-height:0}.task-chat-editor:has(.composer-files)>label{flex:1;min-height:35px}
.task-readable-body hr{border:0;border-top:1px solid var(--border,#d5dfd6);margin:12px 0}
.task-readable-body strong{display:inline;font-weight:700;word-break:normal}

.composer-files{flex:0 0 auto}.task-chat-editor:has(.composer-files){overflow-y:auto}

.composer-file-status:empty{display:none}

/* Keep the draft and send action alongside each other in every theme. */
.workspace .task-chat-compose {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 12px minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 0 20px 10px;
  background: var(--workspace-canvas);
}
.workspace .task-chat-compose > .task-chat-editor {
  grid-column: 1;
  grid-row: 2;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--workspace-accent) 40%, var(--workspace-border));
  background: var(--workspace-canvas);
  border-radius: 8px;
}
.workspace .task-chat-editor:focus-within {
  border-color: var(--workspace-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--workspace-accent) 15%, transparent);
}
.workspace .task-chat-compose > button[type="submit"] {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  min-width: 72px;
  min-height: 44px;
  height: 100%;
  max-width: 110px;
  padding: 10px 14px;
}
.workspace .task-chat-compose > .task-chat-send-hint { display: none; }
.workspace .task-chat-compose > .task-mention-area { grid-column: 1 / -1; grid-row: 3; }
.workspace .task-chat-compose > .task-mention-area:not(:has(.task-mention-chip)):not(:has(.task-mention-menu:not([hidden]))) { position: absolute; width: 0; height: 0; padding: 0; }
.workspace .task-chat-compose > .form-status { grid-column: 1 / -1; }
.workspace .task-chat-compose > .form-status:empty { display: none; }
.workspace .task-chat-editor .task-chat-quote > button { width: 44px; min-width: 44px; font-size: 24px; line-height: 24px; padding: 8px; }
.workspace .task-chat-editor .composer-files { padding: 0; }
.task-personal-actions #task-personal-feedback:empty { display: none; }
.task-chat-bubble { cursor: pointer; }
.task-chat-bubble:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 3px; }
.rail-filing { display: none; }
@media (min-width: 861px) {
  body:has(.workspace:not([hidden])) > footer { display: none; }
  body:has(.workspace:not([hidden])) .workspace { height: 100dvh; }
  body:has(.workspace:not([hidden])) .topbar .top-human { bottom: 10px; }
  body:has(.workspace:not([hidden])) .workspace-sidebar { padding-bottom: 84px; }
  body:has(.workspace:not([hidden])) .topbar .top-human-copy { width: 100%; min-width: 0; align-items: center; text-align: center; }
  body:has(.workspace:not([hidden])) #top-human-name { max-width: 100%; }
  body:has(.workspace:not([hidden])) .rail-filing { display: block; margin-top: 5px; padding: 3px 1px; color: var(--theme-sidebar-text); font-size: 9px; line-height: 1.5; font-weight: 400; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
}
@media (max-width: 860px) {
  .workspace .task-chat-compose { padding: 0 12px calc(8px + env(safe-area-inset-bottom)); gap: 4px 8px; }
  .workspace .task-chat-compose > button[type="submit"] { min-width: 60px; max-width: 80px; padding: 10px; }
}

/* Task-local views share the same conversation and authoritative actions. */
.task-interaction-toolbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 7px 24px; border-bottom: 1px solid var(--workspace-border);
  background: var(--workspace-canvas);
}
.task-interaction-toolbar[hidden], #task-workbench[hidden], #task-workbench-back[hidden] { display: none; }
#task-workbench-back { padding: 5px 8px; font-size: 12px; }
#task-interaction-layout { display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
#task-interaction-layout > #task-pane-work, #task-interaction-layout > #task-pane-files { flex: 1; }
#task-interaction-layout[data-mode="workbench"] {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(275px, 33%); grid-template-rows: minmax(0, 1fr);
}
#task-interaction-layout[data-mode="workbench"] > #task-pane-discussion { grid-column: 1; grid-row: 1; min-width: 0; }
#task-interaction-layout[data-mode="workbench"] > :is(#task-workbench, #task-pane-work, #task-pane-files) {
  grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow: auto;
  border-left: 1px solid var(--workspace-border); padding: 18px;
  background: var(--workspace-canvas); scrollbar-width: thin; overscroll-behavior: contain;
}
#task-detail-content[data-interaction="workbench"] > :is(#task-attention, #task-preference-overview) { display: none; }
#task-detail-content[data-interaction="chat"] > #task-preference-overview { padding: 4px 24px; }
#task-detail-content[data-interaction="chat"] .task-preference-overview > :is(.task-preference-facts, .task-progress-work-entry) { display: none; }
#task-detail-content[data-interaction="chat"] .task-preference-overview > .task-progress-mobile-summary {
  display: flex; flex-wrap: wrap; flex: 1; align-items: center; justify-content: space-between;
  min-height: 36px; min-width: 0; gap: 4px 18px; padding: 4px 0; border: 0;
  background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 12px;
}
#task-detail-content[data-interaction="chat"] :is(.task-progress-mobile-heading, .task-progress-mobile-detail) { display: flex; flex-wrap: wrap; gap: 8px; }
.task-workbench-section + .task-workbench-section { margin-top: 22px; border-top: 1px solid var(--workspace-border); padding-top: 20px; }
.task-workbench-section h3 { margin: 0 0 12px; color: var(--text); font-size: 14px; font-weight: 600; }
.task-workbench-note { margin: 8px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.task-workbench-statuses { display: flex; flex-wrap: wrap; gap: 7px; }
.task-workbench-statuses button { min-height: 34px; padding: 5px 9px; background: var(--workspace-soft); border-color: var(--workspace-border); color: var(--workspace-accent); font-size: 12px; }
.task-workbench-file, .task-workbench-action { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--workspace-border); border-radius: 8px; background: var(--workspace-soft); margin-bottom: 10px; overflow-wrap: anywhere; }
.task-workbench-file strong, .task-workbench-action strong { font-size: 13px; color: var(--text); }
.task-workbench-file small, .task-workbench-action p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0; white-space: pre-wrap; }
.task-workbench-section button { white-space: normal; overflow-wrap: anywhere; max-width: 100%; font-size: 12px; }
#task-interaction-layout[data-mode="workbench"] :is(.task-assignment-targets, .task-file-toolbar, .task-file-card > div, .task-work-requirement) { min-width: 0; }
#task-interaction-layout[data-mode="workbench"] #task-pane-work .prototype-detail-actions { flex-wrap: wrap; }
#task-interaction-layout[data-mode="workbench"] #task-pane-work .task-agent-check { max-width: 100%; }
#task-interaction-layout[data-mode="workbench"] .task-file-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
#task-interaction-layout[data-mode="workbench"] .task-chat-messages { padding-inline: 20px; }
@media (max-width: 1100px) {
  #task-interaction-layout[data-mode="workbench"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(115px, 30%) minmax(0, 1fr); }
  #task-interaction-layout[data-mode="workbench"] > #task-pane-discussion { grid-column: 1; grid-row: 2; }
  #task-interaction-layout[data-mode="workbench"] > :is(#task-workbench, #task-pane-work, #task-pane-files) {
    grid-column: 1; grid-row: 1; padding: 12px 16px; border-left: 0; border-bottom: 1px solid var(--workspace-border);
  }
  #task-workbench { display: flex; flex-direction: column; }
  #task-workbench .task-workbench-attention { order: -1; border-top: 0; padding-top: 0; margin-top: 0; margin-bottom: 16px; }
  .task-interaction-toolbar { padding: 6px 12px; }
  #task-workbench-back { min-height: 40px; }
  .task-workbench-section button { min-height: 40px; }
  #task-interaction-layout[data-mode="workbench"] .task-chat-messages { padding-inline: 12px; }
}
@media (max-width: 400px) {
  #task-workbench-back { font-size: 11px; padding-inline: 4px; }
}

/* Discussion to-dos live outside .workspace and need their own themed controls. */
.task-human-action-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border-color: var(--workspace-border);
  border-radius: 16px;
  background: var(--workspace-surface);
  color: var(--text);
  box-shadow: 0 24px 80px rgb(20 35 28 / 18%);
}
.task-human-action-dialog::backdrop { background: rgb(20 35 28 / 32%); }
.task-human-action-dialog > header {
  padding: 16px 24px;
  border-color: var(--workspace-border);
  background: var(--workspace-surface);
}
.task-human-action-dialog h3 { font-size: 18px; font-weight: 650; }
.task-human-action-dialog .task-matter-dialog-body { display: grid; gap: 20px; padding: 24px; }
.task-human-action-context { display: grid; justify-items: start; gap: 8px; }
.task-human-action-context p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.task-human-action-dialog button {
  appearance: none;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--workspace-border);
  border-radius: 8px;
  background: var(--workspace-surface);
  color: var(--workspace-accent);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: none;
}
.task-human-action-dialog button:not(:disabled):hover { background: var(--workspace-soft); }
.task-human-action-context button { padding-inline: 0; border-color: transparent; background: transparent; }
.task-human-action-dialog .entry-form { display: grid; gap: 20px; margin: 0; min-width: 0; }
.task-human-action-dialog label { position: relative; display: grid; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.task-human-action-dialog :is(textarea, select) {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--workspace-border);
  border-radius: 8px;
  background: var(--workspace-canvas);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
.task-human-action-dialog textarea { min-height: 112px; resize: vertical; }
.task-human-action-dialog select { padding-right: 36px; text-overflow: ellipsis; }
.task-human-action-dialog label:has(> select)::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 20px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
  color: var(--muted);
}
.task-human-action-dialog :is(textarea, select):focus-visible { outline-offset: 2px; border-color: var(--workspace-accent); }
.task-human-action-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.task-human-action-dialog .task-human-action-submit { background: var(--workspace-accent); border-color: var(--workspace-accent); color: var(--theme-on-accent); }
.task-human-action-dialog .task-human-action-submit:not(:disabled):hover { background: var(--workspace-accent-hover); border-color: var(--workspace-accent-hover); }
.task-human-action-dialog button:disabled { opacity: .55; cursor: default; }
.task-human-action-dialog .task-human-action-row { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--workspace-border); border-radius: 10px; background: var(--workspace-canvas); }
.task-human-action-dialog .task-human-action-row p { margin: 0; line-height: 1.6; }
.task-human-action-dialog .task-human-action-row > button { justify-self: start; }
.task-human-action-feedback { margin: 0; color: var(--status-error); font-size: 13px; line-height: 1.6; }
.task-human-action-feedback:empty { display: none; }
@media (max-width: 600px) {
  .task-human-action-dialog > header { padding: 12px 16px; }
  .task-human-action-dialog .task-matter-dialog-body { padding: 20px 16px; }
  .task-human-action-dialog :is(textarea, select) { font-size: 16px; }
  .task-human-action-actions > button { flex: 1; }
  .task-human-action-dialog .task-human-action-submit { flex: 2; }
}
#conversation-members {display:flex;align-items:center;text-align:left}
#conversation-members:empty {display:none}
#conversation-members > button {border:0;background:transparent;padding:6px 0;color:var(--muted);font:inherit;font-size:13px}
.conversation-member {display:flex;flex-direction:column;gap:2px;padding:5px 9px;border-radius:10px;background:var(--surface-muted,#edf3ef);min-width:0;max-width:100%;overflow-wrap:anywhere}
.conversation-member strong {font-size:13px}
.conversation-member small {font-size:11px;color:var(--muted,#63736b)}
.task-header-members {display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-width:0}
#project-detail .prototype-detail-actions .task-header-members {flex:0 1 auto;min-width:0}
#private-chat-info-dialog {position:fixed;inset:auto;margin:0;width:min(272px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:auto;max-height:65dvh;border-radius:10px;box-shadow:0 8px 28px #14291024}
#private-chat-info-dialog::backdrop {background:transparent;backdrop-filter:none}
#private-chat-info-dialog > header {padding:8px 12px;position:static}
#private-chat-info-dialog > header h2 {font-size:13px;color:var(--muted)}
#private-chat-info-dialog > header button {min-height:28px;padding:3px 6px;font-size:12px}
#private-chat-info-body:empty {display:none}
#private-chat-info-body {padding:12px;font-size:13px}
#private-chat-info-actions {display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px;border:0}
#private-chat-info-actions > button {width:100%;margin:0;text-align:left;min-height:40px;border:0;border-radius:6px;background:transparent;padding:10px 12px}
#private-chat-info-actions > button:hover {background:var(--workspace-selected)}
#project-browser-list .prototype-list-item {position:relative}
#project-browser-list .prototype-list-item .prototype-list-copy {padding-right:40px}
#project-browser-list .prototype-list-item .prototype-list-badge {position:absolute;top:15px;right:12px;margin:0;padding:3px 6px;border-radius:5px;color:var(--muted);background:var(--workspace-soft);font-size:11px}
.private-chat-open #chat-members-add:not([hidden]) {display:inline-flex}
@media (max-width:600px) {
  #project-detail.private-chat-open .prototype-detail-actions {flex:1 1 100%;width:100%;max-width:100%;align-items:center}
  #project-detail .prototype-detail-actions .task-header-members {flex:1 1 0;max-width:calc(100% - 48px);gap:12px}
  .task-header-members .text-button {min-height:36px}
}

/* One geometry and type scale for every conversation-header action. */
#project-detail .prototype-detail-actions,
#project-detail .task-header-members,
#project-detail #conversation-members {align-items:center}
#project-detail :is(#conversation-members > button, #task-members-open, #chat-members-add, #private-chat-info-open, #task-personal-menu > summary) {
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  height:44px;min-height:44px;margin:0;padding:0 6px;border:0;
  font-family:inherit;font-size:13px;font-weight:400;line-height:20px;
  color:var(--muted);background:transparent;white-space:nowrap;vertical-align:middle;
}
#project-detail #task-personal-menu > summary {width:44px;min-width:44px;border-radius:8px}
#project-detail #task-personal-menu > summary svg {display:block;width:20px;height:20px}
#project-detail:not(.private-chat-open) #private-chat-info-open {display:none}
#project-detail.private-chat-open #task-members-open {display:none}
#project-detail #chat-members-add[hidden] {display:none}
#project-detail #chat-members-add {width:44px;min-width:44px;padding:0;flex:0 0 44px;border-radius:7px}
#project-detail #chat-members-add svg {display:block;width:22px;height:22px;flex:0 0 22px}
#project-detail #chat-members-add:hover {background:var(--workspace-soft)}
.member-management-row {display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.member-management-row > .project-member-row {flex:1;min-width:180px}
.member-management-row > button, .conversation-member > button {min-height:44px;white-space:nowrap}
.chat-member-details > .conversation-member {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;margin-bottom:8px;padding:10px 12px}
.chat-member-details > .conversation-member strong, .chat-member-details > .conversation-member small {grid-column:1}
.chat-member-details > .conversation-member > button {grid-column:2;grid-row:1 / 3;align-self:center}
#project-detail.private-chat-open .prototype-detail-actions {gap:4px;flex-wrap:nowrap}
#project-detail.private-chat-open .prototype-detail-actions .task-header-members {flex:1 1 auto;max-width:none}

/* Filing stays at the bottom of login and About & Help only. */
body > footer { justify-content: center; align-items: center; text-align: center; }
body:has(.workspace:not([hidden])) > footer { display: none; }
.settings-filing { display: none; }
#governance .settings-filing { display: flex; justify-content: center; align-items: center; width: 100%; margin: 24px 0 0; padding: 18px 12px; border: 0; text-align: center; }
.filing-record, .filing-record:visited, .filing-record:hover { color: #777; font-size: 12px; font-weight: 400; text-decoration: none; }
/* Keep a long registered name compact; keyboard and touch reveal its full identity. */
.task-mention-inline { display: inline-flex; flex-wrap: wrap; vertical-align: middle; border: 0; text-align: left; }
.task-mention-label { display: inline-block; max-width: min(20em, 55vw); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task-mention-inline .task-mention-details { flex-basis: 100%; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.task-mention-inline:is(:focus,:hover) .task-mention-details { display: none; }
.task-mention-inline[aria-expanded="true"] .task-mention-details { display: block; }
.task-mention-inline:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 2px; }
.pairing-host-picker[hidden] {
  display: none;
}

/* Withdrawn messages and conversation notices: one centred line, like mature chat apps. */
.task-chat-message.task-chat-notice,
.task-chat-message.task-chat-notice[data-mine="true"] { flex-direction: row; justify-content: center; margin-bottom: 14px; }
.task-chat-message .task-chat-notice-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; max-width: 100%; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; white-space: normal; }
.task-chat-notice-line .task-chat-notice-action { min-height: 0; padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; cursor: pointer; }
.task-chat-notice-line .task-chat-notice-action:hover,
.task-chat-notice-line .task-chat-notice-action:focus-visible { color: var(--cyan); text-decoration: underline; }
.task-chat-message .task-chat-reference-retracted { margin: 0 0 6px; color: var(--muted); font-size: 12px; }

/* Task goal at the top of the conversation, and the guide for an empty conversation. */
.task-chat-goal { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: var(--workspace-canvas, #f6f8fb); color: var(--text); font-size: 13px; line-height: 1.5; }
.task-chat-goal strong { flex: 0 0 auto; color: var(--muted); font-weight: 600; }
.task-chat-goal span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-is-empty > .task-chat-messages { display: none; }
.task-chat-guide[hidden] { display: none; }
.task-chat-guide { display: grid; justify-items: center; gap: 8px; max-width: 520px; margin: 16px auto; padding: 28px 16px; color: var(--muted); text-align: center; }
.task-chat-guide strong { color: var(--text); font-size: 16px; }
.task-chat-guide p { margin: 0; font-size: 13px; line-height: 1.7; }
.task-chat-guide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.task-chat-guide-actions .quiet-button { min-height: 34px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); }

/* Human collaboration: focus on people, messages and the next useful action. */
.conversation-list-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.task-readable-body a { color: var(--workspace-accent-hover, #327157); text-decoration: underline; overflow-wrap: anywhere; }
.task-chat-actions { align-items: center; gap: 12px; }
.member-ai-details { flex-basis: 100%; padding: 0 14px; font-size: 13px; }
.member-ai-details p { margin: 4px 0; }
.task-mention-owner { margin: 0; padding: 6px 12px; color: var(--muted); font-size: 12px; background: var(--workspace-canvas); }
.task-mention-option { min-height: 48px; }
.task-mention-expand { width: 100%; padding: 8px 12px; color: var(--workspace-accent); text-align: left; }
.friend-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 16px; }
.friend-home-grid > button { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-align: left; }
#friend-home { margin: 20px; }
#friend-planet-back { min-height: 44px; padding: 8px 16px; }
.planet-workspace-toolbar { flex: 0 0 auto; border-bottom: 1px solid var(--line); background: var(--panel); }
.workspace.friend-workspace-mode.friend-planet-open > .context-sidebar { display: none; }
.workspace.friend-workspace-mode.friend-planet-open > .workspace-content { grid-column: 2 / -1; }
@media (max-width: 860px) {
  .workspace.friend-workspace-mode.friend-planet-open { display: flex; flex-direction: column; overflow: hidden; }
  .workspace.friend-workspace-mode.friend-planet-open > .workspace-content { flex: 1 1 0; min-height: 0; height: auto; }
}
@media (max-width: 860px) {
  #project-filter { flex-wrap: wrap; }
  #project-filter > button { flex: 0 0 auto; padding-inline: 8px; }
  #project-detail .prototype-detail-heading { padding-top: 7px; padding-bottom: 7px; }
  #project-detail .prototype-detail-actions { gap: 2px; }
  #project-detail .task-chat-kind, #project-detail-status { display: none; }
  #project-detail .task-header-summary h2 { font-size: 17px; }
  #project-detail .task-header-members { gap: 4px; }
  .task-chat-goal { margin: 0; padding: 3px 12px; font-size: 12px; }
  .task-chat-goal span { max-width: 100%; }
  .task-chat-detail > .task-chat-tools { min-height: 32px; gap: 20px; }
  .task-chat-detail > .task-chat-tools button { min-height: 32px; padding-bottom: 2px; font-size: 12px; }
  .task-chat-load-more { padding-block: 3px; min-height: 28px; }
  #task-detail-content[data-interaction="chat"] > #task-preference-overview { padding: 2px 12px; }
  .task-progress-mobile-summary { min-height: 30px; padding: 3px 0; font-size: 12px; }
  .task-chat-latest { min-height: 36px; border-radius: 20px; }
  .task-mention-menu { max-height: 320px; }
  #friend-home { display: none; }
  .task-chat-actions button { min-height: 32px; }
}

.prototype-list-copy .task-list-people-time { display: flex; gap: 8px; min-width: 0; width: 100%; }
.task-list-owner { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-list-people-time time { flex: 0 0 auto; white-space: nowrap; }

.task-chat-actions .task-message-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; min-height: 36px; padding: 7px; border-radius: 50%; color: #687b73; }
.task-message-icon svg { width: 19px; height: 19px; }
.task-message-icon:hover, .task-message-icon:focus-visible { background: #e8f1ec; color: #327157; }
@media (pointer: coarse), (max-width: 860px) { .task-chat-actions .task-message-icon { width: 44px; min-height: 44px; } }

.task-chat-actions .task-message-icon.is-liked { background: #dcece2; color: #286348; }
.task-chat-actions .task-message-like { width: auto; min-width: 36px; gap: 3px; }
.task-like-count { font-size: 12px; line-height: 1; }
.task-like-status:empty { display: none; }
.task-like-status { color: var(--muted); font-size: 12px; }
@media (pointer: coarse), (max-width: 860px) { .task-chat-actions .task-message-like { min-width: 44px; } }
@media (min-width: 861px) {
  #project-filter { flex-wrap: wrap; gap: 6px; }
  #project-filter > button { flex: 0 0 auto; white-space: nowrap; }
}

/* A single chat toolbar, with all AI choices inside the people dialog. */
#project-detail.private-chat-open .task-header-members { flex-wrap: nowrap; }
#project-detail.private-chat-open #conversation-members { flex: 0 1 auto; min-width: 0; }
#project-detail.private-chat-open #conversation-members > button { overflow: hidden; text-overflow: ellipsis; }
#project-browser-list .prototype-list-item:not(:has(.prototype-list-badge)) .prototype-list-copy { padding-right: 0; }
.chat-agent-form .task-my-agent-options { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.chat-agent-form .task-agent-option > span { display: flex; flex-direction: column; min-width: 0; }
.chat-agent-form .task-agent-option small { color: var(--muted); font-size: 12px; }

.chat-member-actions { display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
.chat-member-actions > button.quiet-button { flex: 0 0 auto; min-width: 80px; min-height: 44px; white-space: nowrap; }

/* Both invitation methods share one flat, readable design. */
.chat-invite-section { margin: 0; padding: 0; background: transparent; }
.chat-invite-section + .chat-invite-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.chat-invite-section h4 { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.chat-invite-section p { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.chat-invite-section .primary-action { display: block; width: 100%; min-height: 44px; box-sizing: border-box; }
.chat-invite-section .task-invite-link-actions { margin: 0; }
.chat-invite-section .chat-task-form { gap: 10px; }
.chat-invite-section .chat-invite-friend { box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.chat-invite-section .form-status:empty { display: none; }
.chat-invite-section .chat-invite-manage { margin-top: 10px; font-size: 12px; color: var(--muted); }
.chat-invite-section input[readonly] { margin-top: 10px; min-height: 44px; font-size: 13px; }

/* AI list: name, tool and default mark only. */
.data-chip.default { border: 0; border-radius: 999px; background: var(--workspace-soft); color: var(--workspace-accent); font-weight: 600; }
.agent-browser-identity small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }

/* Conversation header: one people icon (with count) for members, their AIs and adding people. */
.prototype-detail-actions > #project-invite,
.prototype-detail-actions #chat-members-add { display: none !important; }
.header-people-button { position: relative; display: inline-flex; align-items: center; gap: 4px; min-width: 40px; min-height: 36px; padding: 0 8px; border-color: transparent; background: transparent; color: var(--muted); }
.header-people-button:hover, .header-more-button:hover { background: var(--workspace-soft); color: var(--text); }
.header-people-button svg, .header-more-button svg { width: 20px; height: 20px; }
.header-people-count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--workspace-soft); color: var(--workspace-accent); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.header-more-button { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); }
.chat-member-details .chat-member-add { justify-self: start; }
#task-jump-nav [data-task-pane="files"] > span,
#task-personal-menu > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat-member-details .chat-member-add { margin-bottom: 8px; }

/* About & Help: every category is the same collapsed card. */
.about-sections { display: grid; gap: 10px; margin-top: 18px; }
.about-sections > .about-boundaries { margin-top: 0; padding: 0; border-radius: 12px; overflow: hidden; }
.about-sections > .about-boundaries > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; color: var(--text); font-size: 15px; font-weight: 600; list-style: none; }
.about-sections > .about-boundaries > summary::-webkit-details-marker { display: none; }
.about-sections > .about-boundaries > summary::after { content: "›"; color: var(--muted); font-size: 18px; transition: transform .15s ease; }
.about-sections > .about-boundaries[open] > summary::after { transform: rotate(90deg); }
.about-sections > .about-boundaries > summary:hover { background: var(--workspace-soft); }
.about-sections > .about-boundaries .governance-grid { margin: 0; padding: 4px 20px 20px; }
.about-sections .governance-grid a { color: var(--workspace-accent); text-decoration: underline; text-underline-offset: 3px; }
#governance .about-version { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   2026-10-09 refinement layer: same layout, calmer details.
   Radii: cards 12px, controls 8px, chips fully rounded. Spacing on a 4px grid.
   --------------------------------------------------------------------------- */
.workspace { --refine-card-radius: 12px; --refine-control-radius: 8px; --refine-shadow: 0 1px 2px rgb(20 41 16 / 6%); }

/* Conversation list: one row of filters, quiet type labels, clear selection. */
.workspace #project-filter { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.workspace #project-filter::-webkit-scrollbar { display: none; }
.workspace #project-filter button { flex: 0 0 auto; min-width: 0; padding: 6px 8px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.workspace #project-filter button.active { background: var(--workspace-soft); }
#project-browser-list .prototype-list-item .prototype-list-badge { padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; font-weight: 400; }

/* Composer: the send action sits inside the writing box. */
.workspace .task-chat-compose > .task-chat-editor {
  grid-column: 1 / -1;
  padding: 8px 92px 8px 12px;
  border: 1px solid var(--workspace-border);
  border-radius: var(--refine-card-radius);
  background: var(--workspace-surface, #fff);
  box-shadow: var(--refine-shadow);
}
.workspace .task-chat-compose > button[type="submit"] {
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
  align-self: end;
  justify-self: end;
  height: 34px;
  min-height: 34px;
  min-width: 64px;
  max-width: none;
  margin: 0 8px 8px 0;
  padding: 0 14px;
  border-radius: var(--refine-control-radius);
  font-size: 13px;
}
.workspace .composer-files > button:first-child {
  display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 6px 2px 2px;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; box-shadow: none;
}
.workspace .composer-files > button:first-child > svg { width: 14px; height: 14px; flex: none; }
.workspace .composer-files > button:first-child:not(:disabled):hover { background: var(--workspace-soft); color: var(--text); }
@media (max-width: 860px) {
  .workspace .task-chat-compose > .task-chat-editor { padding-right: 76px; }
  .workspace .task-chat-compose > button[type="submit"] { min-width: 56px; max-width: none; padding: 0 12px; }
}

/* Message attachments: one compact row with icon, name, size and actions. */
.workspace .thread-attachment-card:not(.thread-attachment-image-card) {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  max-width: 440px;
  padding: 8px 8px 8px 10px;
  border: 1px solid var(--workspace-border);
  border-radius: 10px;
  background: var(--workspace-surface, #fff);
  box-shadow: none;
}
.workspace .thread-attachment-card:not(.thread-attachment-image-card) > .thread-attachment-icon {
  grid-column: 1; grid-row: 1 / span 2; box-sizing: border-box; width: 32px; height: 32px; padding: 8px;
  border-radius: 8px; background: var(--workspace-soft); color: var(--workspace-accent);
}
.workspace .thread-attachment-image-card > .thread-attachment-icon, .thread-attachment-icon { display: none; }
.workspace .thread-attachment-card:not(.thread-attachment-image-card) > .thread-attachment-icon { display: block; }
@media (max-width: 860px) { .workspace .task-chat-goal { padding: 6px 12px; } }
.workspace .thread-attachment-card:not(.thread-attachment-image-card) > strong { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.workspace .thread-attachment-card:not(.thread-attachment-image-card) > span { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 12px; }
.workspace .thread-attachment-card:not(.thread-attachment-image-card) > .thread-attachment-actions { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
.workspace .thread-attachment-actions > :is(button, a) { display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 30px; height: 30px; padding: 0 10px; border-radius: var(--refine-control-radius); font-size: 12px; white-space: nowrap; }
.workspace .thread-attachment-list { display: grid; gap: 6px; }

/* Task summary strips: one calm block instead of three different bars. */
.workspace #task-detail-content > #task-attention:not([hidden]) {
  margin: 0; border: 0; border-bottom: 1px solid var(--workspace-border); border-left: 3px solid #d9a93a;
  border-radius: 0; background: color-mix(in srgb, #f7d98c 18%, var(--workspace-canvas));
}
.workspace .task-attention-details > summary { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.workspace #task-detail-content[data-interaction="chat"] > #task-preference-overview { border-bottom: 1px solid var(--workspace-border); background: var(--workspace-canvas); }
.workspace .task-chat-goal { margin: 0; padding: 6px 24px; border-radius: 0; border-bottom: 1px solid var(--workspace-border); background: var(--workspace-canvas); font-size: 12px; }

/* Shared dialog chrome: same heading, padding and close control everywhere. */
.workspace ~ dialog.approval-dialog, dialog.approval-dialog { border-radius: 14px; }
.approval-dialog .dialog-heading { align-items: center; margin-bottom: 12px; }
.approval-dialog .dialog-heading h2 { margin: 0; font-size: 18px; font-weight: 650; }
.approval-dialog .dialog-close { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: 8px; font-size: 18px; }
.approval-dialog .dialog-actions { gap: 8px; margin-top: 16px; }
.approval-dialog :is(.approval-submit, .quiet-button, .primary-action) { border-radius: var(--refine-control-radius, 8px); }
.task-shell-dialog > header { padding-top: 14px; padding-bottom: 14px; }
.task-shell-dialog > header h2 { font-size: 17px; }
.task-shell-dialog > header .quiet-button { min-height: 32px; padding: 4px 12px; border-radius: 8px; font-size: 13px; }

/* Help lines are written only when there is something to say; empty ones take no space. */
.field-help:empty,
.task-field-help:empty,
.attachment-preview-note:empty { display: none; }
#context-copy:empty { display: none; }

/* ---------------------------------------------------------------------------
   Refinement 2 (2026-10-09): closer to the earlier calm-workbench draft without
   changing the layout or palette. Rules here only tighten existing elements.
   --------------------------------------------------------------------------- */

/* Conversation list: avatar | title + preview | type tag + time, like the calm draft. */
#project-browser-list .prototype-list-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 10px;
}
html[data-density="compact"] #project-browser-list .prototype-list-item { padding: 8px 12px; }
#project-browser-list .prototype-list-item + .prototype-list-item { border-top: 0; margin-top: 2px; }
#project-browser-list .prototype-list-avatar {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--workspace-selected);
  color: var(--workspace-accent);
  font-size: 14px;
  font-weight: 600;
}
#project-browser-list .prototype-list-copy,
#project-browser-list .prototype-list-copy .task-list-people-time { display: contents; }
#project-browser-list .prototype-list-copy strong {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#project-browser-list .prototype-list-copy small {
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#project-browser-list .conversation-list-preview,
#project-browser-list .task-list-people-time .task-list-owner { grid-column: 2; grid-row: 2; }
/* Chat dates and task times share the right column under the type tag. */
#project-browser-list .prototype-list-copy > small:not(.conversation-list-preview):not(.task-list-people-time),
#project-browser-list .task-list-people-time time { grid-column: 3; grid-row: 2; justify-self: end; }
#project-browser-list .prototype-list-item .prototype-list-badge {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 11px;
}

/* Task summary: the goal lives in 成员与详情, so the chat head keeps one alert and one progress line. */
.task-chat-goal { display: none; }

/* Composer: the send button reads as the primary action once there is something to send. */
.task-chat-compose button[type="submit"].primary-action:not(:disabled) {
  background: var(--workspace-accent);
  border-color: var(--workspace-accent);
  color: #fff;
}
.task-chat-compose button[type="submit"].primary-action:not(:disabled):hover {
  background: var(--workspace-accent-hover, var(--workspace-accent));
}
.task-chat-compose .task-chat-send-hint:empty { display: none; }

/* Attachments: type tag, quiet "打开阅读" link and a light download action. */
.workspace .thread-attachment-card:not(.thread-attachment-image-card) > .thread-attachment-icon {
  display: grid;
  place-items: center;
  min-width: 38px;
  width: auto;
  height: 38px;
  padding: 0 6px;
  white-space: nowrap;
  border-radius: 8px;
  background: var(--workspace-soft);
  color: var(--muted);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .02em;
}
.workspace .thread-attachment-actions > .thread-attachment-action,
.workspace .thread-attachment-actions > .thread-attachment-action.is-primary {
  background: transparent;
  border-color: transparent;
  color: var(--workspace-accent);
  font-weight: 600;
  padding: 0 8px;
}
.workspace .thread-attachment-actions > .thread-attachment-action:is(:hover, :focus-visible),
.workspace .thread-attachment-actions > .thread-attachment-action.is-primary:is(:hover, :focus-visible) {
  background: var(--workspace-soft);
  border-color: transparent;
  color: var(--workspace-accent);
}

/* Message actions stay available but quiet until the message is hovered or focused. */
@media (hover: hover) and (pointer: fine) {
  .task-chat-actions { opacity: .45; transition: opacity .15s ease; }
  :is(.task-chat-message, .task-chat-row, li, article):hover > .task-chat-actions,
  .task-chat-actions:focus-within,
  .task-chat-actions:has(.is-liked) { opacity: 1; }
}

/* Files panel on phones: search on its own line, the two filters side by side, no field labels. */
@media (max-width: 600px) {
  .task-file-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .task-file-toolbar > label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .task-file-toolbar > label:first-child,
  .task-file-toolbar > .task-file-mine,
  .task-file-toolbar > .task-file-clear { grid-column: 1 / -1; }
}

/* Dialogs: an empty status line stays a live region but takes no room in the flow. */
.approval-dialog .form-status:empty { position: absolute; min-height: 0; margin: 0; }
#handle-dialog .dialog-actions { margin-top: 4px; }
.filing-record.ai-connect-entry { margin-left: 14px; }
/* The login subtitle is gone; keep the heading clear of the first field. */
.entry-card #entry-title { margin-bottom: 18px; }

/* ---------------------------------------------------------------------------
   Refinement 3 (2026-10-09): one calm visual pass across the workspace.
   Same layout and palette; softer surfaces, one radius scale, quieter chrome.
   --------------------------------------------------------------------------- */
:root {
  --r-card: 14px;
  --r-control: 10px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(20, 40, 30, .05), 0 4px 14px -6px rgba(20, 40, 30, .10);
  --shadow-float: 0 1px 2px rgba(20, 40, 30, .06), 0 18px 40px -18px rgba(20, 40, 30, .28);
}

/* Phone top bar: the brand sits in the middle. */
@media (max-width: 860px) {
  .topbar { position: relative; justify-content: center; }
  .topbar .brand-actions { position: absolute; left: 50%; transform: translateX(-50%); }
}

/* Primary navigation: a soft active pill instead of a bright tile. */
.primary-nav-item.active .primary-nav-icon { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.primary-nav-item:not(.active):hover .primary-nav-icon { background: rgba(255, 255, 255, .07); }

/* Conversation list filters: one pill style, no underline. */
.workspace #project-filter button {
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: none;
  text-decoration: none;
  color: var(--muted);
}
.workspace #project-filter button::after,
.workspace #project-filter button::before { display: none; }
.workspace #project-filter button.active { color: var(--workspace-accent); font-weight: 600; }

/* AI list avatars match the round avatars everywhere else. */
#agent-browser-list .agent-mini-avatar { border-radius: 50%; color: var(--workspace-accent); font-weight: 600; }

/* Chat header controls. */
#project-detail .header-people-button { border-radius: var(--r-pill); padding: 0 10px; }
#project-detail .prototype-detail-actions > :is(button, nav, details) { border-radius: var(--r-control); }

/* Task summary: one inset card instead of full-width bands. */
.workspace #task-detail-content > #task-attention:not([hidden]),
.workspace #task-detail-content[data-interaction="chat"] > #task-preference-overview:not([hidden]) {
  margin: 12px 20px 0;
  border: 1px solid var(--workspace-border);
  border-left: 1px solid var(--workspace-border);
  background: var(--workspace-surface, #fff);
  overflow: hidden;
}
.workspace #task-detail-content > #task-attention:not([hidden]) {
  border-radius: var(--r-card) var(--r-card) 0 0;
  border-bottom: 0;
}
.workspace #task-detail-content > #task-attention[hidden] + #task-preference-overview:not([hidden]) { border-radius: var(--r-card); }
.workspace #task-detail-content > #task-attention:not([hidden]) + #task-preference-overview:not([hidden]) {
  margin-top: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.workspace #task-detail-content > #task-attention:not([hidden]) .task-attention-details > summary {
  min-height: 40px;
  padding: 0 14px;
  background: color-mix(in srgb, #f4c95d 18%, var(--workspace-surface, #fff));
}
#task-attention .task-attention-count { border-radius: var(--r-pill); padding: 1px 8px; font-size: 12px; }
#task-preference-overview .task-progress-mobile-summary { min-height: 38px; padding: 0 14px; background: transparent; border: 0; }

/* Message filters: a small segmented control. */
.task-chat-tools:not(.task-chat-actions) {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: auto;
  min-height: 0;
  gap: 2px;
  margin: 12px 20px 10px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--workspace-soft);
}
.task-chat-tools:not(.task-chat-actions) > button {
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  box-shadow: none;
}
.task-chat-tools:not(.task-chat-actions) > button::after { display: none; }
.task-chat-tools:not(.task-chat-actions) > button[aria-pressed="true"] {
  background: var(--workspace-surface, #fff);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 40, 30, .10);
}

/* Messages: lighter bubbles, others on white, mine on the soft accent. */
.task-chat-message .task-chat-bubble {
  border-radius: var(--r-card);
  border: 1px solid var(--workspace-border);
  background: var(--workspace-surface, #fff);
  box-shadow: var(--shadow-soft);
}
.task-chat-message[data-mine="true"] .task-chat-bubble {
  background: var(--workspace-soft);
  border-color: transparent;
  box-shadow: none;
}
.task-chat-message .task-chat-subject { font-size: 15px; }
.task-chat-message .task-chat-identity { font-size: 12px; gap: 6px; }
.task-chat-message .task-chat-identity time { color: var(--muted); }
.task-chat-message .task-chat-role { height: 20px; padding: 0 6px; font-size: 11px; border-radius: 6px; }
.task-chat-message .thread-attachment-card { box-shadow: none; }

/* Message actions: right under the bubble, compact; on desktop only on hover/focus. */
.task-chat-message .task-chat-actions { gap: 2px; margin-top: 2px; }
.task-chat-message .task-chat-actions .task-message-icon { width: 32px; height: 32px; min-height: 32px; border-radius: 8px; }
.task-chat-message .task-chat-actions .task-message-icon svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .task-chat-message .task-chat-actions { opacity: 0; transition: opacity .15s ease; }
  .task-chat-message:hover .task-chat-actions,
  .task-chat-message:focus-within .task-chat-actions,
  .task-chat-message .task-chat-actions:has(.is-liked) { opacity: 1; }
}

/* Composer: a floating card with a solid send button. */
.task-chat-compose {
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  border-color: var(--workspace-border);
}
.task-chat-compose button[type="submit"].primary-action {
  min-height: 34px;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--workspace-accent);
  border-color: var(--workspace-accent);
  color: #fff;
  font-weight: 600;
}
.task-chat-compose button[type="submit"].primary-action:disabled { opacity: .38; }
.task-chat-compose .composer-files > button { color: var(--muted); }

/* AI page: no duplicate counters; fuller cards. */
#agent-browser-count { display: none !important; }
.agent-browser-group > h3 { display: none; }
#agent-overview-groups { gap: 14px; }
#agent-overview-groups > button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  border: 1px solid var(--workspace-border);
  background: var(--workspace-surface, #fff);
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: box-shadow .15s ease, transform .15s ease;
}
#agent-overview-groups > button:hover { box-shadow: var(--shadow-float); transform: translateY(-1px); }
#agent-overview-groups > button > span:first-child { display: contents; }
#agent-overview-groups .agent-mini-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 600;
}
#agent-overview-groups > button strong { font-size: 15px; }
#agent-overview-groups > button small { color: var(--muted); font-size: 12px; }
#agent-overview-groups > button > .data-chip { justify-self: end; }

/* Cards and dialogs share one radius and shadow. */
.approval-dialog { border-radius: 18px; box-shadow: var(--shadow-float); }
.governance-section details.about-boundaries,
.governance-section .about-boundaries { border-radius: var(--r-card); box-shadow: var(--shadow-soft); }

/* Phones: back, title and actions on one header row. */
@media (max-width: 860px) {
  #project-detail .prototype-detail-heading { flex-wrap: nowrap; gap: 4px; min-height: 64px; }
  /* One 64px header row now: center the 44px back button on it, level with the title. */
  #project-mobile-back { top: 10px; }
  #project-detail .task-header-summary { flex: 1 1 auto; min-width: 0; }
  #project-detail .task-header-summary h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
  #project-detail .prototype-detail-actions,
  #project-detail.private-chat-open .prototype-detail-actions { flex: 0 0 auto; width: auto; max-width: none; flex-wrap: nowrap; gap: 0; }
  #project-detail .prototype-detail-actions .task-header-members,
  #project-detail.private-chat-open .prototype-detail-actions .task-header-members { flex: 0 0 auto; width: auto; max-width: none; }
  .workspace #task-detail-content > #task-attention:not([hidden]),
  .workspace #task-detail-content[data-interaction="chat"] > #task-preference-overview:not([hidden]) { margin-left: 12px; margin-right: 12px; }
  .task-chat-tools:not(.task-chat-actions) { margin: 10px 12px 10px; }
}

/* Compact task panels, without changing task or execution semantics. */
#task-detail-content[data-interaction="workbench"] #task-jump-nav button[data-task-pane="discussion"] { display: inline-flex; align-items: center; justify-content: center; font-weight: 500; }
#task-interaction-layout[data-mode="workbench"] > :is(#task-workbench, #task-pane-work, #task-pane-files) { background: var(--workspace-surface); padding: 18px; scrollbar-gutter: stable; overflow-anchor: none; }
.task-panel-overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-bottom: 20px; }
.task-panel-overview-heading h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.5; }
.task-panel-overview-heading button { min-height: 32px; padding: 4px 0 4px 8px; border: 0; background: transparent; font-size: 12px; line-height: 1.6; color: var(--workspace-accent); }
#task-workbench .task-workbench-attention { margin: 0 0 18px; padding: 0; border: 0; }
#task-workbench .task-workbench-attention { order: 0; }
#task-workbench .task-workbench-attention > h3 { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
#task-workbench .task-workbench-action { background: var(--workspace-soft); padding: 16px; border: 1px solid var(--workspace-border); border-radius: 8px; margin-bottom: 12px; box-shadow: none; }
#task-workbench .task-workbench-action strong { font-size: 15px; line-height: 1.6; }
#task-workbench .task-workbench-action p { font-size: 14px; line-height: 1.6; }
#task-workbench .task-workbench-action .primary-action { background: var(--workspace-accent); border-color: var(--workspace-accent); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.6; min-height: 40px; padding: 9px 12px; }
#task-workbench .task-workbench-file { border: 0; border-bottom: 1px solid var(--workspace-border); border-radius: 0; background: transparent; padding: 12px 0; }
.task-overview-disclosure { border-top: 1px solid var(--workspace-border); }
.task-overview-disclosure > summary { padding: 16px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
#task-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; min-width: 36px; height: 36px; padding: 6px; border: 0; border-radius: 6px; color: var(--muted); }
#task-sidebar-toggle[hidden] { display: none; }
#task-sidebar-toggle svg { transform: scaleX(-1); }
#task-sidebar-toggle:hover, #task-sidebar-toggle[aria-expanded="false"] { background: var(--workspace-soft); color: var(--workspace-accent); }
#task-sidebar-toggle:focus-visible { outline: 2px solid var(--workspace-accent); outline-offset: 2px; }
#task-interaction-layout[data-mode="workbench"][data-sidebar-collapsed="true"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#task-interaction-layout[data-mode="workbench"][data-sidebar-collapsed="true"] > :is(#task-workbench, #task-pane-work, #task-pane-files) { display: none; }
#task-interaction-layout[data-mode="workbench"][data-sidebar-collapsed="true"] > #task-pane-discussion { grid-column: 1; grid-row: 1; }
.prototype-card-heading > .task-interaction-toolbar { display: flex; justify-content: flex-end; flex: 0 0 auto; padding: 0; min-height: 0; border: 0; background: transparent; }
.prototype-card-heading > .task-interaction-toolbar[hidden] { display: none; }
#task-workbench-back { margin-left: auto; min-height: 32px; padding: 4px 0 4px 8px; font-size: 12px; line-height: 1.6; white-space: nowrap; color: var(--workspace-accent); }
#task-interaction-layout[data-mode="workbench"] > :is(#task-pane-work, #task-pane-files) { padding: 18px; background: var(--workspace-surface); }
#task-pane-work { display: block; }
#task-pane-work > .prototype-card + .prototype-card { margin-top: 12px; }
#task-pane-work > .prototype-card,
#task-pane-files > .prototype-card { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#task-pane-work > .prototype-card + .prototype-card { border-top: 1px solid var(--workspace-border); padding-top: 12px; }
#task-pane-work .prototype-card-heading,
#task-pane-files .prototype-card-heading { min-height: 36px; margin-bottom: 20px; align-items: center; gap: 8px; }
#task-pane-work .prototype-card-heading h3,
#task-pane-files .prototype-card-heading h3 { font-size: 20px; font-weight: 600; line-height: 1.5; margin: 0; }
#task-pane-work .prototype-card-heading span,
#task-pane-files .prototype-card-heading span { font-size: 11px; line-height: 1.5; }
#task-pane-work .project-collaboration-list { gap: 12px; min-width: 0; }
#task-pane-work .prototype-inline-empty { padding: 8px 0; background: transparent; font-size: 12px; line-height: 1.6; }
#task-pane-work .task-work-history { padding: 0; border: 0; border-top: 1px solid var(--workspace-border); border-radius: 0; background: transparent; }
#task-pane-work :is(.task-work-history, .task-execution-state) > summary { padding: 16px 0; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--text); }
#task-pane-work .task-work-history > p { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.task-earlier-work { min-width: 0; border: 0; border-top: 1px solid var(--workspace-border); border-radius: 0; padding: 0; background: transparent; }
.task-earlier-work > summary { display: flex; align-items: flex-start; gap: 7px; padding: 10px 0; cursor: pointer; list-style: none; }
.task-earlier-work > summary::before { content: "›"; flex: 0 0 12px; color: var(--workspace-accent); font-size: 16px; line-height: 1.5; }
.task-earlier-work[open] > summary::before { content: "⌄"; }
.task-history-copy { display: grid; gap: 5px; flex: 1; min-width: 0; }
.task-history-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--text); }
.task-history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-history-status { color: var(--workspace-accent); }
#task-pane-work .project-collaboration-row { display: block; min-height: 0; padding: 16px; border: 1px solid var(--workspace-border); background: var(--workspace-soft); border-radius: 8px; }
#task-pane-work .project-progress-avatar { display: none; }
#task-pane-work .task-current-heading { font-size: 14px; font-weight: 600; line-height: 1.6; margin: 0; }
#task-pane-work .task-response-disclosure > summary { display: block; padding: 9px 12px; border-radius: 6px; background: var(--workspace-accent); color: #fff; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; list-style: none; }
#task-pane-work .task-response-disclosure[open] > summary { margin-bottom: 12px; }
#task-pane-work .task-response-disclosure { margin-top: 12px; }
#task-pane-work .project-progress-copy > .task-work-technical { margin: 10px 0 0; color: var(--muted); }
#task-pane-work .project-progress-copy > .task-work-technical > summary { font-size: 12px; }
#task-pane-work .task-work-technical > small { display: block; margin-top: 8px; }
#task-pane-work .project-progress-avatar { width: 26px; height: 26px; font-size: 11px; }
#task-pane-work .project-progress-copy { min-width: 0; }
#task-pane-work .project-progress-copy :is(p, small, h4) { overflow-wrap: anywhere; }
#task-pane-work .project-progress-copy h4 { font-size: 15px; font-weight: 600; line-height: 1.6; margin: 0 0 8px; }
#task-pane-work .project-progress-copy p { font-size: 14px; line-height: 1.6; }
#task-pane-work .project-progress-copy small { font-size: 12px; line-height: 1.6; }
#task-pane-work .project-progress-heading { flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--muted); }
#task-pane-work .project-progress-heading time { margin-left: 0; }
#task-pane-work .project-progress-heading > span { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--workspace-accent); }
#task-pane-work .project-progress-heading strong { font-size: 13px; }
#task-pane-work .project-progress-heading :is(time, span) { font-size: 12px; }
#task-pane-work .task-compose-panel > summary { padding: 4px 0; font-size: 14px; font-weight: 600; line-height: 1.6; }
#task-pane-work :is(label, textarea, select, button, .task-field-help, .task-work-requirement, .project-progress-copy details) { font-size: 13px; line-height: 1.6; }
#task-pane-work .project-progress-copy textarea { min-height: 76px; }
#task-pane-work .task-execution-state { padding: 0; border: 0; border-top: 1px solid var(--workspace-border); border-radius: 0; background: transparent; }
#task-pane-work .task-execution-state > p { margin: 0 0 8px; font-size: 12px; line-height: 1.6; }
#task-pane-work .task-execution-state-row {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto;
  align-items: start; align-content: start; justify-items: start;
  min-width: 0; min-height: 0; height: auto; gap: 3px; padding: 10px 0;
  font-size: 12px; line-height: 1.5; border-color: var(--workspace-border);
}
#task-pane-work .task-execution-state-row > * { min-width: 0; max-width: 100%; margin: 0; white-space: normal; overflow-wrap: anywhere; }
#task-pane-work .task-execution-state-row strong { color: var(--text); font-size: 13px; }
#task-pane-work .task-execution-state-row :is(.task-execution-status, time) { color: var(--muted); font-size: 12px; }
@media (min-width: 1101px) {
  #task-pane-work { display: flex; flex-direction: column; gap: 12px; }
  #task-pane-work > .prototype-card { flex-shrink: 0; }
  #task-pane-work > #task-progress { display: flex; flex-direction: column; flex: 1 0 auto; }
  #task-progress > .project-collaboration-list { display: flex; flex-direction: column; flex: 1; }
  #task-progress .task-execution-state { margin-top: auto; }
  #task-pane-work > .prototype-card + .prototype-card { margin-top: 0; }
}
#task-pane-work #task-owner-controls .task-compose-panel > summary { list-style: none; color: var(--workspace-accent); }
#task-pane-files .task-files-note { margin: 0 0 10px; font-size: 11px; line-height: 1.5; }
#task-pane-files .task-upload-form { padding: 0 0 12px; margin: 0 0 12px; border: 0; border-bottom: 1px solid var(--workspace-border); border-radius: 0; background: transparent; gap: 7px; font-size: 12px; }
#task-pane-files .task-upload-form label { gap: 6px; font-size: 12px; }
#task-pane-files .task-upload-form :is(button, input::file-selector-button) { min-height: 36px; padding: 6px 9px; font-size: 12px; }
#task-pane-files .task-upload-form input[type="file"] { min-height: 36px; font-size: 11px; }
#task-pane-files .task-upload-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#task-pane-files .task-upload-help-details { color: var(--muted); font-size: 11px; line-height: 1.5; }
#task-pane-files .task-upload-help-details summary { cursor: pointer; padding: 4px 0; }
#task-pane-files .task-upload-form p:empty { display: none; }
#task-interaction-layout #task-pane-files .task-file-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 8px; }
#task-pane-files .task-file-toolbar > label:first-child { grid-column: 1 / -1; }
#task-pane-files .task-file-toolbar label { font-size: 11px; gap: 4px; }
#task-pane-files .task-file-toolbar :is(input[type="search"], select) { min-height: 34px; border-radius: 6px; padding: 5px 7px; font-size: 12px; }
#task-pane-files .task-file-toolbar .task-file-mine { padding: 0; min-height: 32px; grid-column: 1 / -1; }
#task-pane-files .task-file-clear { min-height: 32px; grid-column: 1 / -1; font-size: 11px; }
#task-pane-files .task-file-list { gap: 0; }
#task-pane-files .task-file-card { padding: 11px 0; border: 0; border-top: 1px solid var(--workspace-border); border-radius: 0; background: transparent; }
#task-pane-files .task-file-card strong { font-size: 13px; line-height: 1.5; font-weight: 600; }
#task-pane-files .task-file-card .data-chip { min-height: 20px; padding: 1px 5px; font-size: 10px; }
#task-pane-files .task-file-card p { margin-top: 4px; font-size: 11px; line-height: 1.5; }
#task-pane-files .task-file-actions { padding-top: 5px; gap: 6px; }
#task-pane-files .task-file-actions > :is(.text-button, .task-record-link) { min-height: 32px; padding: 3px 7px; font-size: 11px; border-radius: 5px; }
@media (max-width: 860px) {
  #task-sidebar-toggle { min-width: 44px; height: 44px; }
  #task-interaction-layout[data-mode="workbench"] > :is(#task-workbench, #task-pane-work, #task-pane-files) { padding: 12px; }
  #task-pane-files .task-file-actions > :is(.text-button, .task-record-link),
  #task-pane-files .task-upload-form button,
  #task-pane-files .task-file-toolbar :is(input[type="search"], select) { min-height: 44px; }
  .task-earlier-work > summary { min-height: 44px; }
}

/* @ mention picker: grouped by person, one row per person or AI. */
.task-mention-menu {
  padding: 6px;
  border: 1px solid var(--workspace-border);
  border-radius: 14px;
  background: var(--workspace-surface, #fff);
  box-shadow: 0 1px 2px rgba(20, 40, 30, .06), 0 18px 40px -18px rgba(20, 40, 30, .30);
}
.task-mention-menu > p:not(.task-mention-owner) { margin: 0; padding: 12px 10px; color: var(--muted); font-size: 13px; }
.task-mention-menu .task-mention-owner {
  position: static;
  margin: 0;
  padding: 10px 10px 4px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.task-mention-menu .task-mention-owner:first-child { padding-top: 4px; }
.task-mention-menu .task-mention-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.task-mention-menu .task-mention-option:hover,
.task-mention-menu .task-mention-option[aria-selected="true"] { background: var(--workspace-soft); }
.task-mention-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--workspace-selected);
  color: var(--workspace-accent);
  font-size: 13px;
  font-weight: 600;
}
.task-mention-avatar[data-kind="agent"] { background: color-mix(in srgb, #6d5ce7 14%, var(--workspace-surface, #fff)); color: #5a4bc9; }
.task-mention-copy { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.task-mention-copy strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.task-mention-copy small { flex-basis: 100%; color: var(--muted); font-size: 12px; margin: 0; }
.task-mention-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--workspace-soft);
  color: var(--muted);
  font-size: 11px;
  line-height: 18px;
}
.task-mention-option[aria-selected="true"] .task-mention-tag { background: var(--workspace-surface, #fff); }
.task-mention-menu .task-mention-expand {
  width: 100%;
  min-height: 34px;
  margin: 2px 0;
  padding: 0 10px 0 50px;
  border: 0;
  background: transparent;
  color: var(--workspace-accent);
  font-size: 12px;
  text-align: left;
}
.task-mention-chip { border-radius: 999px; padding: 3px 10px; font-size: 12px; }

/* All five conversation filters fit the desktop list column on one line. */
@media (min-width: 861px) {
  .workspace #project-filter { gap: 2px; }
  .workspace #project-filter > button { padding: 6px; }
}

/* "查看更早的消息" reads as a button above the list, not text over a message. */
.task-chat-load-more { align-self: center; width: auto; margin: 6px auto 8px; padding: 4px 14px; border: 1px solid var(--workspace-border); border-radius: 999px; background: var(--workspace-surface); color: var(--muted); font-size: 12px; }
.task-chat-load-more:hover { color: var(--text); }

/* Name, username and expertise share one card and one save button below it. */
#profile-expertise { resize: none; line-height: 1.5; }
.profile-summary-grid > .profile-username-card:has(#profile-expertise) { row-gap: 6px; }
.profile-summary-grid > .profile-username-card > label { font-size: 12px; line-height: 1.8; color: var(--muted); }
.profile-summary-grid > .profile-username-card > small { grid-column: -2; color: var(--muted); font-size: var(--font-caption); }
.profile-save-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 14px 0 18px; }
.profile-save-row .form-status { margin: 0; }
.friend-capabilities-empty { margin: 0; color: var(--muted); font-size: 13px; }
.prototype-two-column.friend-detail-grid { row-gap: 20px; }

/* Task files: one "上传文件" button in the title row; the confirm row shows only after picking. */
#task-files > .prototype-card-heading { align-items: center; }
#task-files .task-upload-pick { min-height: 36px; padding: 6px 14px; font-size: 13px; white-space: nowrap; }
#task-pane-files .task-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#task-pane-files .task-upload-form[hidden] { display: none; }
#task-pane-files .task-upload-selection { flex: 1 1 200px; margin: 0; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
#task-pane-files #task-upload-status { flex-basis: 100%; }
@media (pointer: coarse), (max-width: 860px) { #task-files .task-upload-pick { min-height: 44px; } }
#task-pane-files .task-upload-actions[hidden], #task-pane-files .task-upload-form [hidden] { display: none; }

/* Members panel: people first, my AIs with a save row pinned to the bottom, then task info. */
#task-info-dialog .task-settings { display: grid; gap: 16px; margin-top: 0; }
#task-info-dialog .task-settings[hidden] { display: none; }
#task-info-dialog .task-settings > .prototype-card { margin: 0; }
#task-info-dialog .task-agent-save-row { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 12px 0 0; padding: 12px 0 2px; border-top: 1px solid var(--workspace-border); background: inherit; }
#task-info-dialog #task-my-agent-form { background: inherit; }
#task-info-dialog .task-agent-save-row .form-status { flex: 1; margin: 0; }
#task-info-dialog .task-agent-save-row .form-status:empty { visibility: hidden; }
#task-info-dialog .task-agent-retained { grid-column: 1 / -1; }
#task-info-dialog .task-agent-retained > summary { padding: 6px 0; color: var(--muted); font-size: 13px; cursor: pointer; }
#task-info-dialog .task-agent-retained > .task-agent-retained-note { margin: 4px 0 8px; }
#task-info-dialog .task-agent-retained-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
/* ⋯ → 任务信息: ID with copy, description and expected delivery, then plain facts. */
#task-detail-dialog .task-detail-body { display: grid; gap: 14px; }
#task-detail-dialog .task-info-description { margin: 0; white-space: pre-line; line-height: 1.7; }
#task-detail-dialog .task-detail-facts { display: grid; gap: 8px; margin: 0; padding-top: 14px; border-top: 1px solid var(--workspace-border); }
#task-detail-dialog .task-detail-facts > div { display: flex; gap: 16px; }
#task-detail-dialog .task-detail-facts dt { min-width: 64px; color: var(--muted); font-size: 13px; }
#task-detail-dialog .task-detail-facts dd { margin: 0; font-size: 14px; }
#task-detail-dialog #task-info-copy-status:empty { display: none; }
.member-ai-details .member-ai-details-meta { color: var(--muted); }
/* "移除" is a quiet text action at the end of a member row, not a full-width button. */
.member-management-row > .member-remove-button, .conversation-member > .member-remove-button { min-height: 36px; padding: 6px 4px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.member-management-row > .member-remove-button:hover, .conversation-member > .member-remove-button:hover { color: var(--danger, #b42318); }
@media (pointer: coarse), (max-width: 860px) { .member-management-row > .member-remove-button, .conversation-member > .member-remove-button { min-height: 44px; } }
.member-management-row > .project-member-row { flex: 1 1 0; }
.chat-member-details > .conversation-member > .member-remove-button { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
#task-detail-dialog .task-id-row { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
#task-detail-dialog .task-id-row > span { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
#task-detail-dialog .task-id-row > code { font-size: 12px; overflow-wrap: anywhere; }
#task-detail-dialog .task-id-row > button { margin: 0; }

/* Keep the title and its common actions on one row on a narrow desktop. */
@media (min-width: 861px) and (max-width: 1100px) {
  #project-detail .prototype-detail-heading { flex-wrap: nowrap; gap: 12px; }
  #project-detail .task-header-summary { flex: 1 1 auto; min-width: 0; }
  #project-detail .prototype-detail-actions { flex: 0 0 auto; flex-wrap: nowrap; }
  #project-detail .prototype-detail-actions .task-header-members { flex: 0 0 auto; }
}
@media (min-width: 861px) {
  .workspace.project-workspace-mode.task-focus-mode { grid-template-columns: minmax(0, 1fr); }
}

/* 2026-10-11 zcode review of 0.1.148. */
/* Add AI: the expanded full text uses the whole card; the copy action moves below it. */
.pairing-dialog .pairing-chat-card:has(#pairing-prompt-preview[open]) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 581px) { .pairing-dialog .pairing-chat-card:has(#pairing-prompt-preview[open]) .approval-submit { justify-self: end; } }
/* Notifications: compact rule rows, two columns on a wide screen; task choices side by side. */
.push-rules { margin-top: 20px; gap: 10px; }
.push-rules fieldset { gap: 0; }
.push-rules legend { margin-bottom: 4px; }
.push-rules > label[for] { min-height: 0; }
@media (min-width: 720px) {
  .push-rules fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .push-rules fieldset label { min-height: 36px; }
  #push-task-form, #ai-notify-task-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 8px; }
  #push-task-form > :is(h3, fieldset, button), #ai-notify-task-form > :is(h3, fieldset, button) { grid-column: 1 / -1; }
  :is(#push-task-form, #ai-notify-task-form) > label:first-of-type { grid-area: 2 / 1; }
  :is(#push-task-form, #ai-notify-task-form) > select:first-of-type { grid-area: 3 / 1; }
  :is(#push-task-form, #ai-notify-task-form) > label:nth-of-type(2) { grid-area: 2 / 2; }
  :is(#push-task-form, #ai-notify-task-form) > select:nth-of-type(2) { grid-area: 3 / 2; }
}
/* Preferences: one card, sections split by a line instead of boxes inside the box. */
.preferences-form { gap: 0; }
.preferences-form fieldset { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--workspace-border); border-radius: 0; }
.preferences-form fieldset:first-of-type { padding-top: 0; border-top: 0; }
.preferences-form legend { float: left; width: 100%; margin-bottom: 2px; padding: 0; }
.preferences-form fieldset { row-gap: 2px; }
#preferences-result:empty { display: none; }
.preferences-form > .prototype-detail-actions { padding-top: 14px; border-top: 1px solid var(--workspace-border); }
/* About & Help: an opened category lists its points, not cards inside the card. */
.about-sections > .about-boundaries .governance-grid { gap: 0; }
.about-sections .governance-grid > article { padding: 14px 0; border: 0; border-top: 1px solid var(--workspace-border); border-radius: 0; background: transparent; }
.about-sections .governance-grid > article:first-child { padding-top: 4px; border-top: 0; }
.about-sections .governance-grid strong { font-size: 15px; }
.about-sections .governance-grid p { margin: 6px 0 0; }