:root {
  --ink: #101010;
  --muted: #5f5b52;
  --line: #ded6c5;
  --paper: #fffaf0;
  --panel: #fffdf8;
  --yellow: #ffd229;
  --yellow-dark: #c79600;
  --green: #1d6b43;
  --red: #b42318;
  --shadow: 0 14px 35px rgba(20, 17, 9, 0.12);
}

html[data-theme="dark"] {
  --ink: #fff7d7;
  --muted: #d7c98c;
  --line: #4c4128;
  --paper: #19170f;
  --panel: #222017;
  --yellow: #ffd229;
  --yellow-dark: #f0b90b;
  --green: #58d68d;
  --red: #ff6f61;
  --shadow: 0 14px 35px rgba(0, 0, 0, 0.38);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(135deg, #fff7d7 0%, #f8f4ea 45%, #fffdf8 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] body {
  background: linear-gradient(135deg, #0e0d09 0%, #17150e 46%, #232014 100%);
}

a {
  color: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
}

.sidebar {
  background: #101010;
  color: #fff7d7;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: var(--yellow);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.duck-mark {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #101010;
  background: var(--yellow);
  font-weight: 950;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.14);
}

nav {
  display: grid;
  gap: 8px;
}

.nav-item {
  color: #fff7d7;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 8px;
  font-weight: 800;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.nav-badge,
.thread-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--yellow);
  color: #101010;
  font-size: 11px;
  font-weight: 950;
}

.nav-item.active .nav-badge,
.nav-item:hover .nav-badge {
  background: #101010;
  color: var(--yellow);
}

.nav-item:hover,
.nav-item.active {
  background: var(--yellow);
  color: #101010;
}

.nav-item.unread-attention {
  animation: chats-unread-flash 1.15s ease-in-out infinite;
}

@keyframes chats-unread-flash {
  0%,
  100% {
    background: transparent;
    color: #fff7d7;
    box-shadow: none;
  }
  50% {
    background: var(--yellow);
    color: #101010;
    box-shadow: 0 0 0 4px rgba(255, 210, 41, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item.unread-attention {
    animation: none;
    background: var(--yellow);
    color: #101010;
  }
}

.side-foot {
  margin-top: auto;
  padding: 14px;
  border: 1px solid rgba(255, 210, 41, 0.32);
  border-radius: 8px;
  display: grid;
  gap: 4px;
}

.side-foot span {
  color: #d6cda9;
  font-size: 12px;
}

.side-foot strong {
  overflow-wrap: anywhere;
}

.main {
  padding: 28px;
}

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

.crumb {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 34px;
}

h2 {
  margin-bottom: 6px;
  font-size: 22px;
}

.operator-pill,
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 10px;
  background: #101010;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 900;
}

.hero-panel,
.panel,
.metric,
.person-card {
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hero-panel {
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-left: 8px solid var(--yellow);
}

.hero-panel h2 {
  font-size: 30px;
}

.hero-panel p,
.panel p {
  color: var(--muted);
  line-height: 1.5;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--yellow);
  color: #101010;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
}

.button.secondary {
  background: #101010;
  color: var(--yellow);
}

.button.small {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

.button.icon-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 6px;
  font-size: 19px;
  line-height: 1;
}

.control-icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

summary.icon-button {
  list-style: none;
}

summary.icon-button::-webkit-details-marker {
  display: none;
}

.button.danger {
  background: var(--red);
  color: #fff;
}

.flash {
  position: sticky;
  top: 12px;
  z-index: 20;
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--green);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  font-weight: 900;
}

.flash.error {
  border-left-color: var(--red);
}

html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .operator-pill,
html[data-theme="dark"] .status-chip {
  background: #090907;
  border: 1px solid rgba(255, 210, 41, 0.24);
}

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

.metric {
  padding: 18px;
  display: grid;
  gap: 6px;
}

.metric span,
.line-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.metric strong {
  font-size: 28px;
}

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

.panel {
  padding: 22px;
  margin-bottom: 18px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

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

.line-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fffaf0;
  display: grid;
  gap: 5px;
}

html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .person-card {
  background: rgba(34, 32, 23, 0.96);
}

html[data-theme="dark"] .line-grid div,
html[data-theme="dark"] .thread-row,
html[data-theme="dark"] .audit-row,
html[data-theme="dark"] .message-stack,
html[data-theme="dark"] .radio-row label,
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .empty {
  background: #19170f;
}

html[data-theme="dark"] .thread-row:hover,
html[data-theme="dark"] .thread-row.selected {
  border-color: var(--yellow);
}

.line-grid strong {
  overflow-wrap: anywhere;
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.thread-row,
.audit-row {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
  margin-bottom: 10px;
  text-decoration: none;
}

.thread-row {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) auto;
}

.audit-row {
  grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1fr) auto;
}

.thread-row:hover,
.thread-row.selected {
  border-color: #101010;
  box-shadow: inset 5px 0 0 var(--yellow);
}

.thread-row > *,
.audit-row {
  min-width: 0;
  max-width: 100%;
}

.thread-row strong,
.thread-row span,
.audit-row strong,
.audit-row span,
.audit-row small {
  display: block;
}

.thread-pin {
  display: inline-flex !important;
  margin-left: 5px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.thread-row p {
  margin: 0;
  color: var(--ink);
}

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

.thread-row .status-chip {
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.settings-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
}

.settings-control-row h3,
.settings-control-row p {
  margin: 0;
}

.settings-control-row h3 {
  font-size: 16px;
}

.settings-control-row p {
  color: var(--muted);
  line-height: 1.45;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid #101010;
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--yellow);
  color: #101010;
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  white-space: nowrap;
}

.theme-toggle-track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #101010;
  padding: 3px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.theme-toggle-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yellow);
  transition: transform 160ms ease;
}

html[data-theme="dark"] .settings-control-row {
  background: #19170f;
}

html[data-theme="dark"] .theme-toggle-track {
  justify-content: flex-end;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  align-items: end;
}

.stack {
  display: grid;
  gap: 12px;
}

.settings-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.settings-block h3 {
  margin: 0;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

.toggle-row input,
.thread-search input[type="checkbox"] {
  width: auto;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0f0e09;
  color: var(--ink);
}

textarea {
  resize: vertical;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.radio-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fffaf0;
}

.radio-row input {
  width: auto;
}

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

.person-card {
  padding: 16px;
  display: grid;
  gap: 4px;
}

.person-card span,
.person-card small {
  color: var(--muted);
}

.compact-actions,
.thread-actions > form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.compact-actions form {
  margin: 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  gap: 18px;
}

.thread-detail {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 16px;
}

.message-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
  min-height: 280px;
  max-height: 55vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.message-bubble {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}

html[data-theme="dark"] .message-bubble {
  background: #0f0e09;
}

.message-bubble.outbound {
  align-self: flex-end;
  background: #101010;
  color: #fff7d7;
  border-color: #101010;
}

.message-bubble.internal {
  align-self: flex-end;
  background: #101010;
  color: #fff7d7;
  border-color: #101010;
}

.message-bubble.inbound {
  align-self: flex-start;
  background: #fff;
}

html[data-theme="dark"] .message-bubble.inbound {
  background: #0f0e09;
}

.message-bubble.system {
  align-self: center;
  max-width: 92%;
  background: #fff6c2;
  border-color: var(--yellow-dark);
}

html[data-theme="dark"] .message-bubble.system {
  background: #3b3212;
}

.message-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: inherit;
  opacity: 0.72;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.message-bubble p {
  margin: 8px 0;
  line-height: 1.45;
}

.message-meta > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.message-bubble .message-status {
  display: flex;
  width: fit-content;
  align-items: center;
  align-self: flex-start;
  box-sizing: border-box;
  min-height: 26px;
  max-width: 100%;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-weight: 900;
  opacity: 0.68;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.reply-box {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.participant-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.participant-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--yellow);
  color: #101010;
  font-size: 12px;
  font-weight: 950;
}

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

.new-message-notice {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--yellow-dark);
  border-radius: 8px;
  background: var(--yellow);
  color: #101010;
  font-weight: 950;
  cursor: pointer;
}

.file-link {
  display: inline-flex;
  margin-top: 4px;
  color: var(--yellow-dark);
  font-weight: 900;
}

.inline-upload,
.file-upload,
.thread-search,
.audit-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}

.thread-search,
.audit-filter {
  grid-template-columns: minmax(180px, 1fr) auto auto;
}

.thread-search > label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  color: var(--ink);
}

.file-list,
.failure-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.file-row,
.failure-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.file-row div,
.file-row span,
.failure-row div,
.failure-row span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.file-row span,
.file-row small,
.failure-row span,
.failure-row small {
  color: var(--muted);
}

.audit-filter {
  margin-bottom: 16px;
}

.add-participant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

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

.thread-start .wide {
  grid-column: 1 / -1;
}

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

.check-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf0;
  color: var(--ink);
}

.check-card input {
  width: auto;
}

.check-card span,
.check-card strong,
.check-card small {
  display: block;
}

.check-card small {
  color: var(--muted);
}

.empty {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fffaf0;
  font-weight: 800;
}

.empty.compact {
  padding: 12px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metrics,
  .line-grid,
  .form-grid,
  .card-grid,
  .split,
  .checkbox-grid,
  .add-participant,
  .participant-management,
  .inline-upload,
  .file-upload,
  .thread-search,
  .audit-filter,
  .file-row,
  .failure-row {
    grid-template-columns: 1fr;
  }

  .hero-panel,
  .topbar,
  .panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-control-row {
    align-items: stretch;
    flex-direction: column;
  }

  .thread-row,
  .audit-row {
    grid-template-columns: 1fr;
  }

  .thread-row .status-chip {
    justify-self: start;
  }
}

/* Canonical dark theme: later navy palette only. These final selectors
   intentionally override every earlier brown dark-theme generation. */
html[data-theme="dark"] {
  --ink: #edf2f7;
  --muted: #aeb8c6;
  --line: #354155;
  --paper: #0f131a;
  --panel: #171d27;
  --yellow: #f5c542;
  --yellow-dark: #f7d35c;
  --green: #58d68d;
  --red: #ff7a70;
  --blue: #7ba7ff;
}

html[data-theme="dark"] body {
  background: #0f131a;
  color: #edf2f7;
}

html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .person-card,
html[data-theme="dark"] .message-stack,
html[data-theme="dark"] .message-bubble,
html[data-theme="dark"] .thread-menu-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .settings-control-row,
html[data-theme="dark"] .settings-block,
html[data-theme="dark"] .flash,
html[data-theme="dark"] .notice {
  background: #171d27;
  color: #edf2f7;
  border-color: #354155;
}

html[data-theme="dark"] .line-grid div,
html[data-theme="dark"] .thread-row,
html[data-theme="dark"] .audit-row,
html[data-theme="dark"] .radio-row label,
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .help-grid > div,
html[data-theme="dark"] .attachment-chip,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #111722;
  color: #edf2f7;
  border-color: #354155;
}

html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .panel h1,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .hero-panel h1,
html[data-theme="dark"] .hero-panel h2,
html[data-theme="dark"] .metric strong,
html[data-theme="dark"] .message-bubble strong,
html[data-theme="dark"] .thread-row strong {
  color: #edf2f7;
}

html[data-theme="dark"] .crumb,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .metric small,
html[data-theme="dark"] .line-grid span,
html[data-theme="dark"] small {
  color: #aeb8c6;
}

html[data-theme="dark"] .message-row.own .message-bubble {
  background: #17233a;
  border-color: #46658f;
}

html[data-theme="dark"] .message-row.system .message-bubble {
  background: #1b2230;
  border-color: #4a5870;
}

html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .operator-pill,
html[data-theme="dark"] .status-chip,
html[data-theme="dark"] .file-picker {
  background: #0b1018;
  color: #f5c542;
  border-color: #45526a;
}

/* 2026-08 feature-parity shell */
:root {
  --ink: #111827;
  --muted: #5b6472;
  --line: #d7dde7;
  --paper: #f6f8fb;
  --panel: #ffffff;
  --yellow: #f5c542;
  --yellow-dark: #8a6400;
  --green: #147a5a;
  --red: #b42318;
  --blue: #2457d6;
  --shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
}

body {
  background: var(--paper);
}

html[data-theme="dark"] {
  --ink: #edf2f7;
  --muted: #aeb8c6;
  --line: #354155;
  --paper: #0f131a;
  --panel: #171d27;
  --yellow: #f5c542;
  --yellow-dark: #f7d35c;
  --green: #58d68d;
  --red: #ff7a70;
  --blue: #7ba7ff;
}

html[data-theme="dark"] body {
  background: var(--paper);
}

.app-shell {
  display: block;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px);
}

.brand {
  min-width: 180px;
  color: var(--ink);
}

.duck-mark {
  border-radius: 8px;
}

.header-nav,
.account-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.account-controls {
  justify-content: flex-end;
}

.nav-item,
.nav-button,
.thread-menu-summary {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: none;
}

.nav-button {
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.nav-item:hover,
.nav-item.active,
.thread-menu[open] .thread-menu-summary {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  color: var(--ink);
}

.nav-badge,
.thread-unread {
  background: var(--yellow);
  color: #111827;
}

.thread-menu {
  position: relative;
}

.thread-menu > summary {
  list-style: none;
  cursor: pointer;
}

.thread-menu > summary::-webkit-details-marker {
  display: none;
}

.thread-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(520px, calc(100vw - 24px));
  max-height: min(72vh, 680px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

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

.segmented {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.segmented a {
  padding: 9px 11px;
  text-decoration: none;
  font-weight: 850;
}

.segmented a + a {
  border-left: 1px solid var(--line);
}

.thread-menu-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}

.thread-menu-row {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}

.thread-menu-row.selected,
.thread-menu-row:hover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
}

.thread-menu-row span,
.thread-menu-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.thread-menu-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.main {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 22px;
}

.topbar {
  margin-bottom: 16px;
}

.operator-pill,
.status-chip {
  border-radius: 8px;
  background: #111827;
  color: var(--yellow);
}

.icon-toggle {
  min-height: 38px;
  padding: 7px 9px;
}

.modal::backdrop {
  background: rgba(17, 24, 39, 0.48);
}

.modal {
  width: min(860px, calc(100vw - 24px));
  max-height: 88vh;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
}

.modal-card {
  max-height: 88vh;
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.thread-search-strip {
  margin-bottom: 12px;
}

.compact-panel {
  padding: 16px;
}

.full-thread {
  min-height: calc(100vh - 190px);
}

.thread-open-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}

.thread-open-head h2 {
  margin-bottom: 3px;
}

.thread-title-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.thread-details-panel {
  margin: 10px 0;
}

.thread-details-panel > summary {
  width: fit-content;
  list-style: none;
  cursor: pointer;
}

.thread-details-panel > summary::-webkit-details-marker {
  display: none;
}

.thread-details-body {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

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

.metadata-grid div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.metadata-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.metadata-grid strong {
  overflow-wrap: anywhere;
}

.message-stack {
  max-height: none;
  min-height: 360px;
  padding: 12px 0;
  border: 0;
  background: transparent;
}

.message-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.message-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.avatar-img,
.avatar-fallback {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.avatar-img {
  object-fit: cover;
  border: 1px solid var(--line);
}

.avatar-fallback {
  display: grid;
  place-items: center;
  background: #111827;
  color: var(--yellow);
  font-weight: 950;
}

.message-row .message-bubble {
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
  padding: 13px;
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

.message-row.own .message-bubble {
  background: color-mix(in srgb, var(--blue) 8%, var(--panel));
  color: var(--ink);
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
}

.message-row.system .message-bubble {
  background: color-mix(in srgb, var(--yellow) 20%, var(--panel));
  border-color: color-mix(in srgb, var(--yellow-dark) 55%, var(--line));
}

.message-body {
  margin: 9px 0;
  font-weight: 700;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
}

.message-link {
  color: var(--blue);
  font-weight: 850;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.message-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.message-controls form,
.message-controls details {
  margin: 0;
}

.message-edit {
  position: relative;
}

.message-edit[open] {
  flex-basis: 100%;
}

.message-edit textarea {
  margin-top: 8px;
  min-height: 132px;
}

.attachment-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.attachment-chip small {
  grid-column: 1 / -1;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.reply-box {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.reply-box textarea,
.modal textarea {
  min-height: 150px;
  font-size: 16px;
  line-height: 1.45;
}

.composer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.file-picker {
  display: inline-flex;
  width: auto;
  min-height: 34px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  background: #111827;
  color: var(--yellow);
  cursor: pointer;
}

.file-picker input {
  max-width: 260px;
  padding: 0 0 0 8px;
  border: 0;
  background: transparent;
  color: inherit;
}

.person-card-head,
.profile-editor-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.copy-code {
  display: inline-flex;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #111827;
  color: var(--yellow);
  font-weight: 950;
  letter-spacing: 0.04em;
}

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

.help-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

pre {
  margin: 0;
  padding: 12px;
  overflow: auto;
  border-radius: 8px;
  background: #111827;
  color: #f9fafb;
  white-space: pre-wrap;
}

@media (max-width: 980px) {
  .app-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .brand {
    min-width: 0;
  }

  .header-nav,
  .account-controls {
    justify-content: flex-start;
  }

  .thread-menu {
    position: static;
  }

  .thread-menu-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 116px;
    width: auto;
    max-height: calc(100vh - 132px);
  }

  .main {
    padding: 14px;
  }

  .thread-open-head,
  .thread-title-form,
  .metadata-grid,
  .help-grid,
  .thread-menu-tools {
    grid-template-columns: 1fr;
  }

  .thread-open-head {
    display: grid;
  }

  .message-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .message-avatar,
  .avatar-img,
  .avatar-fallback {
    width: 36px;
    height: 36px;
  }

  .message-footer,
  .composer-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .message-controls,
  .message-controls form,
  .message-controls .button,
  .composer-tools .button,
  .file-picker {
    width: 100%;
  }
}

/* Final dark-mode cascade lock: navy only, after every legacy and responsive rule. */
html[data-theme="dark"] {
  --ink: #edf2f7;
  --muted: #aeb8c6;
  --line: #354155;
  --paper: #0f131a;
  --panel: #171d27;
  --yellow: #f5c542;
  --yellow-dark: #f7d35c;
  --green: #58d68d;
  --red: #ff7a70;
  --blue: #7ba7ff;
}
html[data-theme="dark"] body { background: #0f131a; color: #edf2f7; }
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .person-card,
html[data-theme="dark"] .message-stack,
html[data-theme="dark"] .message-bubble,
html[data-theme="dark"] .thread-menu-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .settings-control-row,
html[data-theme="dark"] .settings-block,
html[data-theme="dark"] .flash,
html[data-theme="dark"] .notice { background: #171d27; color: #edf2f7; border-color: #354155; }
html[data-theme="dark"] .line-grid div,
html[data-theme="dark"] .thread-row,
html[data-theme="dark"] .audit-row,
html[data-theme="dark"] .radio-row label,
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .help-grid > div,
html[data-theme="dark"] .attachment-chip,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background: #111722; color: #edf2f7; border-color: #354155; }
html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .panel h1,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .hero-panel h1,
html[data-theme="dark"] .hero-panel h2,
html[data-theme="dark"] .metric strong,
html[data-theme="dark"] .message-bubble strong,
html[data-theme="dark"] .thread-row strong { color: #edf2f7; }
html[data-theme="dark"] .crumb,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .panel p,
html[data-theme="dark"] .metric span,
html[data-theme="dark"] .metric small,
html[data-theme="dark"] .line-grid span,
html[data-theme="dark"] small { color: #aeb8c6; }
html[data-theme="dark"] .message-row.own .message-bubble { background: #17233a; border-color: #46658f; }
html[data-theme="dark"] .message-row.system .message-bubble { background: #1b2230; border-color: #4a5870; }
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .operator-pill,
html[data-theme="dark"] .status-chip,
html[data-theme="dark"] .file-picker { background: #0b1018; color: #f5c542; border-color: #45526a; }

/* PC Relay interaction parity: sticky tools, full-screen editing, and alternating sender runs. */
.message-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: -13px -13px 9px;
  padding: 10px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 8px 8px 0 0;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(8px);
}

.message-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
}

.message-action-buttons form,
.message-action-buttons details { margin: 0; }

.message-photo-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.message-photo-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.button.icon-button.action-attachment,
html[data-theme="dark"] .button.icon-button.action-attachment {
  color: #2374d8 !important;
}

.thread-detail.file-drag-active {
  outline: 3px dashed #2374d8;
  outline-offset: -7px;
}

.thread-detail.file-drag-active::after {
  content: "Drop file to share";
  position: sticky;
  bottom: 12px;
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #2374d8;
  color: #fff;
  font-weight: 700;
  z-index: 40;
}

.message-row.sender-run.shade-0 .message-bubble {
  background: color-mix(in srgb, var(--message-accent) 2.5%, var(--panel));
  border-left-color: color-mix(in srgb, var(--message-accent) 42%, var(--line));
}

.message-row.sender-run.shade-1 .message-bubble {
  background: color-mix(in srgb, var(--message-accent) 16%, var(--panel));
  border-left-color: color-mix(in srgb, var(--message-accent) 78%, var(--line));
}

.message-row.sender-run.shade-0 .message-header {
  background: color-mix(in srgb, var(--message-accent) 2.5%, var(--panel));
}

.message-row.sender-run.shade-1 .message-header {
  background: color-mix(in srgb, var(--message-accent) 16%, var(--panel));
}

/* Recognizable action colors: reserve color for the icon's meaning. */
.button.icon-button.action-copy {
  color: #0285ff;
}

.button.icon-button.action-edit,
html[data-theme="dark"] .button.icon-button.action-edit {
  background: #e5e5e5;
  color: #0d0d0d;
  border-color: #c8c8c8;
}

.button.icon-button.action-delete,
html[data-theme="dark"] .button.icon-button.action-delete {
  background: color-mix(in srgb, var(--ink) 5%, var(--panel));
  color: #e02e2a;
  border-color: color-mix(in srgb, #e02e2a 35%, var(--line));
}

html[data-theme="dark"] .button.icon-button.action-delete {
  color: #fa423e;
}

.button.icon-button.action-complete {
  color: #00a240;
}

html[data-theme="dark"] .button.icon-button.action-complete {
  color: #04b84c;
}

.button.icon-button.action-camera,
html[data-theme="dark"] .button.icon-button.action-camera {
  color: #ff6a00;
}

/* One scroll owner only: the conversation pane, never the expanding message stack. */
.conversation-column .message-stack {
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

body.message-edit-open { overflow: hidden; }

.message-edit[open] { position: static; }

.message-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  padding: 18px;
  background: rgba(5, 10, 18, 0.82);
}

.message-edit-fullscreen {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.message-edit-fullscreen-header,
.message-edit-actions {
  position: sticky;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--panel);
}

.message-edit-fullscreen-header { top: 0; border-bottom: 1px solid var(--line); }
.message-edit-actions { bottom: 0; justify-content: flex-end; border-top: 1px solid var(--line); }
.message-edit-fullscreen-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.message-edit-fullscreen textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 18px;
  resize: none;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .message-header { align-items: stretch; flex-direction: column; }
  .message-action-buttons { justify-content: flex-start; }
  .message-edit-overlay { padding: 0; }
  .message-edit-fullscreen { border: 0; border-radius: 0; }
  .message-edit-fullscreen-header { align-items: flex-start; flex-direction: column; }
}

/* Server -> thread categorization. */
.server-menu-section {
  display: grid;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.server-menu-section:last-child { border-bottom: 0; }

.server-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.server-menu-head > a {
  color: var(--ink);
  text-decoration: none;
}

.server-browser {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.server-browser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.server-browser-head > div { display: grid; gap: 2px; }
.server-browser-head span { color: var(--muted); font-size: 0.78rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; }
.server-browser-head strong { font-size: 1.15rem; }

.server-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.server-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
}

.server-tab span {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--panel));
  text-align: center;
  font-size: 0.75rem;
  font-weight: 900;
}

.server-tab.active {
  border-color: var(--blue);
  box-shadow: inset 0 -3px 0 var(--blue);
}

.server-thread-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}

@media (max-width: 640px) {
  .server-browser-head { align-items: stretch; flex-direction: column; }
  .server-browser-head .button { width: 100%; }
}

/* Exact Codex Windows app palette lock, sourced from the installed app package. */
:root {
  --ink: #0d0d0d;
  --muted: rgba(0, 0, 0, 0.60);
  --line: rgba(0, 0, 0, 0.08);
  --paper: #f9f9f9;
  --panel: #ffffff;
  --yellow: #0d0d0d;
  --yellow-dark: #2f2f2f;
  --green: #00a240;
  --red: #e02e2a;
  --blue: #0285ff;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] {
  --ink: #f2f2f2;
  --muted: rgba(255, 255, 255, 0.70);
  --line: rgba(255, 255, 255, 0.08);
  --paper: #212121;
  --panel: #2f2f2f;
  --yellow: #f9f9f9;
  --yellow-dark: #ececec;
  --green: #04b84c;
  --red: #fa423e;
  --blue: #339cff;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
}

body,
html[data-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}

.app-header {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-color: var(--line);
}

html[data-theme="dark"] .app-header {
  background: color-mix(in srgb, #181818 94%, transparent);
}

.hero-panel,
.panel,
.metric,
.person-card,
.message-stack,
.message-bubble,
.thread-menu-panel,
.modal-card,
.settings-control-row,
.settings-block,
.flash,
.notice,
.server-browser,
.message-edit-fullscreen,
.message-edit-fullscreen-header,
.message-edit-actions {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

.line-grid div,
.thread-row,
.thread-menu-row,
.audit-row,
.radio-row label,
.check-card,
.empty,
.help-grid > div,
.attachment-chip,
.server-tab,
input,
textarea,
select,
.message-edit-fullscreen textarea {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

.nav-item,
.nav-button,
.thread-menu-summary,
.button.secondary,
.operator-pill,
.status-chip,
.file-picker {
  background: color-mix(in srgb, var(--ink) 5%, var(--panel));
  color: var(--ink);
  border-color: var(--line);
}

.nav-item:hover,
.nav-item.active,
.thread-menu[open] .thread-menu-summary,
.thread-menu-row.selected,
.thread-menu-row:hover,
.server-tab.active {
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
  color: var(--ink);
  border-color: var(--blue);
}

.button:not(.secondary):not(.danger),
.nav-badge,
.thread-unread {
  background: #0d0d0d;
  color: #ffffff;
  border-color: #0d0d0d;
}

html[data-theme="dark"] .button:not(.secondary):not(.danger),
html[data-theme="dark"] .nav-badge,
html[data-theme="dark"] .thread-unread {
  background: #f9f9f9;
  color: #0d0d0d;
  border-color: #f9f9f9;
}

.duck-mark {
  background: #0d0d0d;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] .duck-mark {
  background: #f9f9f9;
  color: #0d0d0d;
}

.brand small,
.message-link,
a.message-link { color: var(--blue); }

html[data-theme="dark"] .message-row.own .message-bubble {
  background: color-mix(in srgb, #339cff 9%, #2f2f2f);
  border-color: color-mix(in srgb, #339cff 42%, var(--line));
}

html[data-theme="dark"] .message-row.system .message-bubble {
  background: #282828;
  border-color: var(--line);
}

.message-header {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border-color: var(--line);
}

.message-row.sender-run.shade-0 .message-header,
.message-row.sender-run.shade-0 .message-bubble {
  background: color-mix(in srgb, var(--message-accent) 2.5%, var(--panel));
}

.message-row.sender-run.shade-1 .message-header,
.message-row.sender-run.shade-1 .message-bubble {
  background: color-mix(in srgb, var(--message-accent) 16%, var(--panel));
}

::selection {
  background: color-mix(in srgb, var(--blue) 32%, transparent);
}

/* Codex button surfaces: quiet gray controls instead of black blocks. */
.button:not(.danger),
button.button:not(.danger) {
  background: #ededed;
  color: #0d0d0d;
  border-color: rgba(0, 0, 0, 0.08);
}

.button:not(.danger):hover,
button.button:not(.danger):hover {
  background: #d9d9d9;
  color: #0d0d0d;
}

html[data-theme="dark"] .button:not(.danger),
html[data-theme="dark"] button.button:not(.danger) {
  background: #414141;
  color: #f2f2f2;
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .button:not(.danger):hover,
html[data-theme="dark"] button.button:not(.danger):hover {
  background: #4f4f4f;
  color: #f2f2f2;
}

/* Match the earlier primary-button selector exactly so gray wins the cascade. */
html .button:not(.secondary):not(.danger),
html button.button:not(.secondary):not(.danger) {
  background: #ededed;
  color: #0d0d0d;
  border-color: rgba(0, 0, 0, 0.08);
}

html .button:not(.secondary):not(.danger):hover,
html button.button:not(.secondary):not(.danger):hover {
  background: #d9d9d9;
  color: #0d0d0d;
}

html[data-theme="dark"] .button:not(.secondary):not(.danger),
html[data-theme="dark"] button.button:not(.secondary):not(.danger) {
  background: #414141;
  color: #f2f2f2;
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .button:not(.secondary):not(.danger):hover,
html[data-theme="dark"] button.button:not(.secondary):not(.danger):hover {
  background: #4f4f4f;
  color: #f2f2f2;
}

/* Discord-style communication workspace: Servers | Threads | Conversation. */
.main:has(.server-workspace) {
  width: 100%;
  max-width: none;
  padding: 14px;
}

.server-workspace {
  --server-rail-width: 220px;
  display: grid;
  grid-template-columns: var(--server-rail-width) 300px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 94px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.server-workspace.servers-collapsed { --server-rail-width: 76px; }

.server-rail,
.thread-column {
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - 94px);
  position: sticky;
  top: 80px;
  overflow: hidden;
}

.server-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 10px;
  border-right: 1px solid var(--line);
  background: #f3f3f3;
}

html[data-theme="dark"] .server-rail { background: #181818; }

.server-rail-toggle {
  width: 32px;
  height: 32px;
  margin: 0 0 10px auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ededed;
  color: #0d0d0d;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

html[data-theme="dark"] .server-rail-toggle { background: #303030; color: #f2f2f2; }

.server-rail-nav {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.server-rail-link {
  min-height: 50px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}

.server-rail-link:hover,
.server-rail-link.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--panel));
}

.server-rail-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #d9d9d9;
  color: #0d0d0d;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.03em;
}

html[data-theme="dark"] .server-rail-icon { background: #414141; color: #f2f2f2; }
.server-rail-link.active .server-rail-icon { border-radius: 9px; background: var(--blue); color: #ffffff; }
.server-rail-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 850; }
.server-rail-count { color: var(--muted); font-size: 12px; font-weight: 850; }

.servers-collapsed .server-rail-toggle { margin-right: auto; }
.servers-collapsed .server-rail-link { grid-template-columns: 42px; justify-content: center; padding: 4px 6px; }
.servers-collapsed .server-rail-label,
.servers-collapsed .server-rail-count { display: none; }

.thread-column {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 3%, var(--panel));
}

.thread-column-head {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.thread-column-head > div { min-width: 0; display: grid; gap: 2px; }
.thread-column-head span { color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.thread-column-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thread-column-search {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.thread-column-search input[type="search"] { width: 100%; }
.thread-column-search label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.thread-column-list { min-height: 0; display: grid; align-content: start; gap: 6px; overflow-y: auto; padding: 10px; scrollbar-width: thin; }
.thread-column-list .thread-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.thread-column-list .thread-row > p { margin: 0; max-height: 2.8em; overflow: hidden; }
.thread-column-list .status-chip { justify-self: start; }

.conversation-column {
  min-width: 0;
  padding: 14px;
  overflow: visible;
  background: var(--paper);
}

.conversation-column .full-thread { margin: 0; }

@media (max-width: 980px) {
  .server-workspace,
  .server-workspace.servers-collapsed {
    --server-rail-width: 76px;
    grid-template-columns: var(--server-rail-width) 250px minmax(0, 1fr);
  }
  .server-rail-label,
  .server-rail-count { display: none; }
  .server-rail-link { grid-template-columns: 42px; justify-content: center; padding: 4px 6px; }
}

@media (max-width: 720px) {
  .server-workspace,
  .server-workspace.servers-collapsed {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    overflow: visible;
  }
  .server-rail,
  .thread-column { position: static; max-height: none; }
  .server-rail { grid-template-rows: auto auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .server-rail-toggle { display: none; }
  .server-rail-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .server-rail-link { flex: 0 0 52px; }
  .thread-column { max-height: 430px; border-right: 0; border-bottom: 1px solid var(--line); }
  .conversation-column { padding: 10px; }
}

/* Final visible-button lock: light gray in both themes, never black. */
html .button:not(.danger),
html button:not(.danger),
html summary.button,
html .file-picker,
html .server-rail-toggle {
  background: #d9d9d9 !important;
  color: #0d0d0d !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

html .button:not(.danger):hover,
html button:not(.danger):hover,
html summary.button:hover,
html .file-picker:hover,
html .server-rail-toggle:hover {
  background: #ededed !important;
  color: #0d0d0d !important;
}

html[data-theme="dark"] .button:not(.danger),
html[data-theme="dark"] button:not(.danger),
html[data-theme="dark"] summary.button,
html[data-theme="dark"] .file-picker,
html[data-theme="dark"] .server-rail-toggle {
  background: #d9d9d9 !important;
  color: #0d0d0d !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .button:not(.danger):hover,
html[data-theme="dark"] button:not(.danger):hover,
html[data-theme="dark"] summary.button:hover,
html[data-theme="dark"] .file-picker:hover,
html[data-theme="dark"] .server-rail-toggle:hover {
  background: #ededed !important;
  color: #0d0d0d !important;
}

/* Codex avatar fallback: visible gray initials, never a black square. */
html .avatar-fallback {
  background: #d9d9d9 !important;
  color: #0d0d0d !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}

html[data-theme="dark"] .avatar-fallback {
  background: #414141 !important;
  color: #f2f2f2 !important;
  border-color: rgba(255, 255, 255, 0.08);
}

/* Scoped workspace search for servers, threads, messages, words, and phrases. */
.workspace-search-panel {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.workspace-search-form {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 240px) auto auto;
  gap: 10px;
  align-items: end;
}

.workspace-search-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 850; }
.workspace-search-input input { width: 100%; }
.workspace-search-archived { display: flex !important; align-items: center; gap: 6px !important; min-height: 40px; }

.workspace-search-results {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.workspace-results-head,
.workspace-result-group h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workspace-result-group { display: grid; gap: 7px; }
.workspace-result-group h3 { margin: 0; font-size: 14px; }
.workspace-result-group h3 span { color: var(--muted); font-size: 12px; }

.workspace-search-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.workspace-search-result:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--panel)); }
.workspace-search-result .server-rail-icon { width: 36px; height: 36px; border-radius: 10px; }
.workspace-search-result > span:last-child { min-width: 0; display: grid; gap: 2px; }
.workspace-search-result strong,
.workspace-search-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-search-result small { color: var(--muted); }
.workspace-result-type { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #d9d9d9; color: #0d0d0d; font-weight: 950; }
html[data-theme="dark"] .workspace-result-type { background: #414141; color: #f2f2f2; }

@media (max-width: 900px) {
  .workspace-search-form { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); }
}

@media (max-width: 600px) {
  .workspace-search-form { grid-template-columns: minmax(0, 1fr); }
  .workspace-search-form .button { width: 100%; }
}

/* Final thread scroll-container fix: wheel scrolling uses the conversation pane. */
@media (min-width: 721px) {
  .server-workspace {
    height: calc(100vh - 190px);
    min-height: 240px;
  }

  .conversation-column {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

}

@media (max-width: 720px) {
  .conversation-column {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}

/* Per-message toolbar sticks while that message scrolls through the thread pane. */
.message-row .message-bubble {
  overflow: visible;
}

.message-row {
  scroll-margin-top: 8px;
}

.message-row.message-targeted .message-bubble {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.message-row .message-header {
  position: sticky;
  top: 0;
  z-index: 32;
  background: color-mix(in srgb, var(--panel) 98%, transparent);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
}

.message-row.sender-run.shade-0 .message-header {
  background: color-mix(in srgb, var(--message-accent) 2.5%, var(--panel));
}

.message-row.sender-run.shade-1 .message-header {
  background: color-mix(in srgb, var(--message-accent) 16%, var(--panel));
}

/* Final semantic icon lock; must follow the global light-gray button lock. */
html .button.icon-button.action-copy,
html[data-theme="dark"] .button.icon-button.action-copy {
  color: #0285ff !important;
}

html .button.icon-button.action-edit,
html[data-theme="dark"] .button.icon-button.action-edit {
  background: #d9d9d9 !important;
  color: #0d0d0d !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

html .button.icon-button.action-delete,
html[data-theme="dark"] .button.icon-button.action-delete {
  background: #d9d9d9 !important;
  color: #e02e2a !important;
  border-color: color-mix(in srgb, #e02e2a 38%, transparent) !important;
}

html[data-theme="dark"] .button.icon-button.action-delete {
  color: #fa423e !important;
}

html .button.icon-button.action-complete,
html[data-theme="dark"] .button.icon-button.action-complete {
  color: #00a240 !important;
}

html[data-theme="dark"] .button.icon-button.action-complete {
  color: #04b84c !important;
}

html .button.icon-button.action-camera,
html[data-theme="dark"] .button.icon-button.action-camera {
  color: #ff6a00 !important;
}

html .button.icon-button.action-camera .control-icon,
html[data-theme="dark"] .button.icon-button.action-camera .control-icon {
  width: 23px;
  height: 23px;
}

html .button.icon-button.action-camera .control-icon *,
html[data-theme="dark"] .button.icon-button.action-camera .control-icon * {
  stroke-width: 2.3;
}

/* Neutral alternating message shade: translucent light gray, never salmon. */
html .message-row.sender-run.shade-1 .message-bubble,
html .message-row.sender-run.shade-1 .message-header {
  background: rgba(190, 190, 190, 0.18) !important;
}

html[data-theme="dark"] .message-row.sender-run.shade-1 .message-bubble,
html[data-theme="dark"] .message-row.sender-run.shade-1 .message-header {
  background: rgba(220, 220, 220, 0.10) !important;
}

/* Only the action/edit toolbar sticks; author and timestamp scroll normally. */
html .message-row .message-header {
  position: static;
  z-index: auto;
  box-shadow: none;
}

html .message-row .message-action-buttons {
  position: sticky;
  top: 0;
  z-index: 32;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  margin: 0 0 9px auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 98%, transparent);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
}

html .message-row.sender-run.shade-1 .message-action-buttons {
  background: rgba(190, 190, 190, 0.92);
}

html[data-theme="dark"] .message-row.sender-run.shade-1 .message-action-buttons {
  background: rgba(68, 68, 68, 0.94);
}


/* Keep participant choices legible as selectable cards in both themes. */
html .check-card,
html .check-card span,
html .check-card strong { color: #18181b; }
html .check-card { background: #f3f4f6; }
html .check-card small { color: #52525b; }
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .check-card span,
html[data-theme="dark"] .check-card strong { color: #edf2f7; }
html[data-theme="dark"] .check-card { background: #202023; }
html[data-theme="dark"] .check-card small { color: #b8c0cc; }


/* Keep the selected thread overview as its own card at the top of the conversation scroller. */
html .thread-header-sticky {
  position: sticky;
  top: 0;
  z-index: 35;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}


html .reply-box textarea {
  min-height: 68px;
  height: 68px;
}

/* Thread overview has its own layout row; only the conversation below scrolls. */
html .conversation-column { overflow: hidden; min-height: 0; }
html .conversation-column #thread-panel {
  height: 100%; min-height: 0; max-height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px;
  overflow: hidden;
}
html .thread-header-sticky {
  position: static; z-index: auto; margin: 0; box-shadow: none;
}
html .thread-message-scroll {
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-gutter: stable; padding: 4px 8px;
}
html .message-row .message-header { position: static; }
html .message-row .message-action-buttons { position: sticky; top: 0; z-index: 32; }
@media (max-width: 720px) {
  html .conversation-column { height: 85dvh; max-height: 85dvh; }
}

/* Compact the thread overview title, actions, and details spacing. */
html .thread-header-sticky { padding: 10px 14px; gap: 6px; }
html .thread-header-sticky .thread-open-head { margin: 0; gap: 8px; }
html .thread-header-sticky .thread-open-head h2 { margin: 0 0 3px; }
html .thread-header-sticky .thread-open-head p { margin: 0; }
html .thread-header-sticky .thread-actions > form { margin: 0; }
html .thread-header-sticky .thread-details-panel { margin: 0; }

/* Keep Thread details alongside the lifecycle actions, expanding below both. */
html .thread-header-sticky {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 8px; row-gap: 6px; align-items: start;
}
html .thread-header-sticky .thread-open-head { grid-column: 1 / -1; }
html .thread-header-sticky .thread-actions { grid-column: 1; grid-row: 2; }
html .thread-header-sticky .thread-details-panel { display: contents; }
html .thread-header-sticky .thread-details-panel::details-content { display: contents; }
html .thread-header-sticky .thread-details-panel > summary {
  grid-column: 2; grid-row: 2; justify-self: start;
}
html .thread-header-sticky .thread-details-body { grid-column: 1 / -1; grid-row: 3; margin: 0; }
html .thread-header-sticky .thread-details-panel:not([open]) > .thread-details-body { display: none; }
@media (max-width: 480px) {
  html .thread-header-sticky { grid-template-columns: minmax(0, 1fr); }
  html .thread-header-sticky .thread-details-panel > summary { grid-column: 1; grid-row: 3; }
  html .thread-header-sticky .thread-details-body { grid-row: 4; }
}

/* One compact title/control row; participant names and status are omitted. */
html .thread-header-sticky {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  align-items: center; padding: 8px 12px;
}
html .thread-header-sticky .thread-open-head { grid-column: 1; grid-row: 1; min-width: 0; }
html .thread-header-sticky .thread-open-head h2 { margin: 0; overflow-wrap: anywhere; }
html .thread-header-sticky .thread-actions { grid-column: 2; grid-row: 1; }
html .thread-header-sticky .thread-details-panel > summary { grid-column: 3; grid-row: 1; }
html .thread-header-sticky .thread-details-body { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 720px) {
  html .thread-header-sticky { grid-template-columns: minmax(0, 1fr) max-content; }
  html .thread-header-sticky .thread-actions { grid-column: 1; grid-row: 2; }
  html .thread-header-sticky .thread-details-panel > summary { grid-column: 2; grid-row: 2; }
  html .thread-header-sticky .thread-details-body { grid-row: 3; }
}

/* Keep the title and controls together at the start of the overview row. */
html .thread-header-sticky {
  grid-template-columns: max-content max-content max-content;
  justify-content: start; column-gap: 10px;
}
@media (max-width: 720px) {
  html .thread-header-sticky { grid-template-columns: minmax(0, 1fr) max-content; }
}

/* Compact icon-only thread overview row. */
html .thread-header-sticky { padding: 3px 10px; row-gap: 0; }
html .thread-header-sticky .thread-open-head h2 { font-size: 18px; line-height: 28px; }
html .thread-header-sticky .icon-button {
  width: 30px; height: 30px; min-height: 30px; padding: 5px;
}
html .thread-header-sticky .thread-details-panel[open] > .thread-details-body { margin-top: 6px; }

/* Bring the conversation closer to its overview row. */
html .conversation-column #thread-panel { row-gap: 4px; }
html .thread-message-scroll { padding-top: 0; }

/* Selected photos stay visible in the composer before sending. */
.composer-image-preview:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.composer-image-preview img { display: block; max-width: 100%; width: auto; max-height: 160px; object-fit: contain; border-radius: 5px; }
.composer-image-preview span { overflow-wrap: anywhere; min-width: 0; }
.message-inline-image { display: block; width: auto; max-width: 100%; max-height: 640px; object-fit: contain; border-radius: 6px; margin: 8px 0; }

/* Composer controls use the same visible gray surface and black glyphs in both themes. */
html .reply-box .composer-tools .button,
html[data-theme="dark"] .reply-box .composer-tools .button {
  background: #d9d9d9 !important; border-color: #b8b8b8 !important;
  color: #0d0d0d !important; opacity: 1 !important;
}
html .reply-box .composer-tools .button svg,
html[data-theme="dark"] .reply-box .composer-tools .button svg { color: #0d0d0d !important; }


/* Center compact thread controls directly beneath the thread title. */
html .thread-header-sticky {
  grid-template-columns: max-content max-content;
  justify-content: center;
  column-gap: 6px;
  row-gap: 4px;
  padding: 6px 10px;
}
html .thread-header-sticky .thread-open-head {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  text-align: center;
}
html .thread-header-sticky .thread-actions {
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
}
html .thread-header-sticky .thread-actions > form { display: flex; gap: 4px; }
html .thread-header-sticky .thread-details-panel > summary {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}
html .thread-header-sticky .icon-button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 3px;
}
html .thread-header-sticky .icon-button .control-icon { width: 15px; height: 15px; }

/* Communication interface parity: row-specific tools, unread counts and compact toolbar. */
.thread-row { position:relative; display:block; }
.thread-name-link { display:block; color:inherit; text-decoration:none; padding-right:28px; overflow-wrap:anywhere; }
.thread-row-actions { display:flex; gap:4px; margin-top:6px; align-items:center; }
.thread-row-actions form { margin:0; }
.thread-row-actions .icon-button { width:24px!important; min-width:24px!important; height:24px!important; min-height:24px!important; padding:4px!important; }
.thread-row-actions .control-icon { width:12px!important; height:12px!important; }
.thread-row-actions .action-edit { color:#000!important; background:#dedede!important; }
.thread-row-actions .action-delete { color:#c52828!important; }
.thread-row.has-unread { background:#fff0b3; border-color:#b38300; }
.thread-row.has-unread .thread-name-link { color:#302200; }
.thread-row.selected { outline:2px solid var(--blue); outline-offset:-2px; }
.thread-row .thread-unread { position:absolute; top:6px; right:6px; background:#986900; color:white; border-radius:12px; min-width:20px; text-align:center; padding:1px 4px; }
html[data-theme="dark"] .thread-row.has-unread { background:#4b3a13; border-color:#d8ad42; }
html[data-theme="dark"] .thread-row.has-unread .thread-name-link { color:#fff0bc; }
html .thread-header-sticky { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:8px; }
html .thread-header-sticky .thread-open-head { flex:1 1 140px; text-align:left; min-width:0; }
html .thread-header-sticky .thread-open-head h2 { text-align:left; overflow-wrap:anywhere; }
html .thread-header-sticky .thread-actions { display:flex; flex:0 1 auto; align-items:center; gap:4px; flex-wrap:wrap; }
html .thread-header-sticky .thread-actions form { display:flex; gap:4px; flex-wrap:wrap; }
#message-search { width:min(680px,calc(100vw - 28px)); max-height:85vh; overflow:auto; padding:20px; border:1px solid var(--line,#888); border-radius:12px; background:var(--panel,#fff); color:var(--text,#111); }
#message-search::backdrop { background:rgba(0,0,0,.45); }
#message-search form,#message-search nav { display:flex; gap:8px; flex-wrap:wrap; }
#message-search label { flex:1 1 100%; }
.message-search-result { padding:12px 0; border-bottom:1px solid var(--line,#888); overflow-wrap:anywhere; }
.message-search-result p { white-space:pre-wrap; }
@media(max-width:480px) { html .thread-header-sticky .thread-open-head { flex-basis:100%; } #message-search { padding:12px; } }

/* No separate conversation header: title/search live in the actual sticky message tools. */
html .conversation-column #thread-panel { grid-template-rows:minmax(0,1fr); gap:0; }
.thread-row-actions { flex-wrap:wrap; }
.thread-row-actions form { display:flex; gap:4px; align-items:center; }
.message-action-buttons .message-thread-title { min-width:0; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:24px; margin-right:4px; }
.message-action-buttons .message-search-button { flex:0 0 auto; }
@media(max-width:480px) { .message-action-buttons .message-thread-title { max-width:140px; } .message-action-buttons { gap:3px; } }
@media(max-width:720px) { .thread-column-list { grid-template-columns:minmax(0,1fr)!important; } }

/* Owner-requested composer action colors; preserve the approved gray button surfaces. */
.reply-box .composer-tools [data-composer-photo-button] { --composer-icon:#ff6a00; }
.reply-box .composer-tools [data-paste-clipboard],
.reply-box .composer-tools .action-attachment { --composer-icon:#2563eb; }
.reply-box .composer-tools button[type="submit"] { --composer-icon:#14833b; }
html .reply-box .composer-tools .button,
html[data-theme="dark"] .reply-box .composer-tools .button,
html .reply-box .composer-tools .button svg,
html[data-theme="dark"] .reply-box .composer-tools .button svg { color:var(--composer-icon,#0d0d0d)!important; }