:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background: #f6f7f9;
  color: #151a20;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-width: 320px;
}

button {
  font: inherit;
}

textarea {
  font: inherit;
}

.shell {
  min-height: 100vh;
  padding: 20px;
}

.topbar,
.tabs,
.section,
.message {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
}

.topbar {
  align-items: center;
  background: rgba(5, 25, 34, 0.94);
  border: 1px solid rgba(95, 212, 236, 0.16);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 10px 12px;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbarActions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.topbarBrand {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.topbarLogo {
  display: block;
  flex: 0 0 32px;
  height: 32px;
  width: 32px;
}

.eyebrow {
  color: #667280;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 4px;
  text-transform: uppercase;
}

h1,
h2 {
  letter-spacing: 0;
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: 1.15;
}

h2 {
  font-size: 20px;
}

.identity {
  align-items: flex-end;
  color: #667280;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 3px;
  min-width: 170px;
  text-align: right;
}

.identity strong {
  color: #151a20;
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.identity span {
  color: #5fd4ec;
  display: block;
  font-size: 12px;
  line-height: 1.2;
  min-height: 15px;
  white-space: nowrap;
}

.bannerActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.tabs {
  align-items: center;
  border-bottom: 1px solid #d8dee8;
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #54606d;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  min-height: 42px;
  padding: 0 14px;
  white-space: nowrap;
}

.tab:hover {
  color: #151a20;
}

.tab.active {
  border-bottom-color: #1d778f;
  color: #151a20;
}

.message {
  border: 1px solid #dfbf72;
  border-radius: 8px;
  color: #5d4814;
  font-size: 14px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.message[data-tone="success"] {
  border-color: #83bf9b;
  color: #235437;
}

.section {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  min-height: 360px;
  padding: 16px;
}

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

.primaryButton,
.ghostButton,
.dangerButton {
  background: #ffffff;
  border: 1px solid #aeb8c7;
  border-radius: 6px;
  color: #243142;
  cursor: pointer;
  font-weight: 750;
  min-height: 34px;
  padding: 0 12px;
}

.primaryButton {
  background: #1d778f;
  border-color: #1d778f;
  color: #ffffff;
}

.primaryButton:hover {
  background: #155f74;
}

.ghostButton:hover {
  background: #f1f4f8;
}

.dangerButton {
  background: #9f2d3c;
  border-color: #9f2d3c;
  color: #ffffff;
}

.dangerButton:hover {
  background: #7d2130;
}

.primaryButton:disabled,
.ghostButton:disabled,
.dangerButton:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.inlineButton {
  background: transparent;
  border: 0;
  color: #1d647a;
  cursor: pointer;
  font-weight: 800;
  padding: 0;
}

.standaloneLoginBackdrop {
  align-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(29, 119, 143, 0.14), transparent 34%),
    #f6f7f9;
  display: grid;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.standaloneLoginCard {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(15, 30, 45, 0.12);
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 460px;
  padding: 26px;
  width: min(100%, 460px);
}

.standaloneLoginCard h1 {
  font-size: 28px;
}

.standaloneLoginCopy {
  color: #54606d;
  line-height: 1.5;
  margin: 0;
}

.standaloneLoginForm {
  display: grid;
  gap: 14px;
}

.standaloneMaintenanceMessage {
  border: 1px solid rgba(95, 212, 236, 0.42);
  color: #dff8fc;
  font-size: 15px;
  line-height: 1.55;
  padding: 14px;
  text-align: center;
}

.standaloneLoginForm label,
.standaloneTenantPicker {
  display: grid;
  gap: 7px;
}

.standaloneLoginForm label span,
.standaloneTenantTitle {
  color: #4f5b68;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.standaloneLoginForm input {
  border: 1px solid #c5cedb;
  border-radius: 6px;
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
}

.standaloneLoginForm input:focus {
  border-color: #1d778f;
  box-shadow: 0 0 0 3px rgba(29, 119, 143, 0.14);
  outline: 0;
}

.standaloneTenantChoices {
  display: grid;
  gap: 8px;
}

.standaloneTenantChoice {
  align-items: center;
  background: #f8fbfc;
  border: 1px solid #d8e5eb;
  border-radius: 8px;
  color: #243142;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-height: 42px;
  padding: 9px 11px;
  text-align: left;
}

.standaloneTenantChoice:hover,
.standaloneTenantChoice[aria-pressed="true"] {
  border-color: #1d778f;
  box-shadow: 0 0 0 3px rgba(29, 119, 143, 0.12);
}

.standaloneTenantChoice small {
  color: #667280;
}

.placeholder {
  align-content: center;
  background: #f9fafb;
  border: 1px dashed #c9d1de;
  border-radius: 8px;
  color: #54606d;
  display: grid;
  gap: 6px;
  min-height: 250px;
  padding: 24px;
}

.placeholder strong {
  color: #151a20;
  font-size: 18px;
}

.placeholder span {
  font-size: 14px;
  line-height: 1.45;
  max-width: 620px;
}

.chatLayout {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  min-height: 520px;
}

.agentRail {
  border-right: 1px solid #e2e7ef;
  min-width: 0;
  padding-right: 14px;
}

.chiefExecPanel {
  background: #f8fbfc;
  border: 1px solid #d8e5eb;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
}

.chiefExecNameBlock {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr);
}

.chiefExecInitial {
  background: #dff2f7;
  border-color: #a6d4df;
}

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

.chiefExecNameLine strong {
  color: #17202b;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.chiefExecNameForm {
  border-top: 1px solid #d8e5eb;
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.chiefExecNameForm label {
  display: grid;
  gap: 5px;
}

.chiefExecNameForm label span,
.suggestionChips > span {
  color: #4f5b68;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.chiefExecNameForm input {
  border: 1px solid #c5cedb;
  border-radius: 6px;
  min-height: 34px;
  padding: 7px 9px;
}

.nameFormActions {
  display: flex;
  gap: 8px;
}

.councilDialHeader {
  align-items: end;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.councilDialHeader strong {
  color: #17202b;
  font-size: 14px;
}

.councilDialHeader span {
  color: #55707b;
  font-size: 12px;
  font-weight: 800;
}

.councilDial {
  display: grid;
  gap: 7px;
}

.councilToggle {
  background: #ffffff;
  border: 1px solid #d5dde7;
  border-radius: 8px;
  color: #5b6674;
  cursor: pointer;
  display: grid;
  gap: 2px 8px;
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 54px;
  padding: 8px;
  text-align: left;
}

.councilToggle span {
  align-self: center;
  color: #60717c;
  font-size: 12px;
  font-weight: 900;
  grid-row: span 2;
}

.councilToggle strong,
.councilToggle em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.councilToggle strong {
  color: #293747;
  font-size: 13px;
}

.councilToggle em {
  color: #71808d;
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}

.councilToggle.active {
  background: #e8f7fa;
  border-color: #1d778f;
  color: #12596b;
}

.councilToggle.host {
  cursor: default;
  opacity: 1;
}

.councilToggle:disabled {
  cursor: default;
  opacity: 1;
}

.suggestionChips {
  border-top: 1px solid #d8e5eb;
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.suggestionChips > div,
.messageSuggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.suggestionChip {
  background: #ffffff;
  border: 1px solid #b9c5d3;
  border-radius: 999px;
  color: #1d647a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  min-height: 28px;
  padding: 0 10px;
}

.suggestionChip:hover,
.suggestionChip:focus-visible {
  background: #edf7fa;
  border-color: #1d778f;
}

.directAgentAccess {
  display: grid;
  gap: 8px;
}

.directAgentAccess summary {
  color: #243142;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  margin-bottom: 8px;
}

.inlineState,
.inlineStatus,
.mutedText {
  color: #5b6674;
  font-size: 14px;
}

.inlineState {
  padding: 12px 0;
}

.inlineStatus {
  background: #f7f9fb;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
}

.agentGrid {
  display: grid;
  gap: 8px;
}

.agentCard {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  color: #151a20;
  cursor: pointer;
  display: grid;
  gap: 4px 10px;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 76px;
  padding: 10px;
  text-align: left;
  width: 100%;
}

.agentCard:hover,
.agentCard.active {
  border-color: #1d778f;
  box-shadow: 0 0 0 1px #1d778f;
}

.agentInitial {
  align-items: center;
  background: #e8f3f6;
  border: 1px solid #c3dde5;
  border-radius: 999px;
  color: #155f74;
  display: flex;
  font-size: 14px;
  font-weight: 850;
  grid-row: span 2;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.agentCard strong,
.agentCard span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agentCard strong {
  font-size: 14px;
}

.agentCard span:last-child {
  color: #5b6674;
  font-size: 12px;
}

.chatThreadPanel {
  min-height: 0;
  min-width: 0;
}

.chatThread {
  display: grid;
  grid-template-rows: auto auto minmax(0, auto) auto auto;
  min-height: 0;
}

.chatThreadHeader,
.rememberHeader,
.rememberActions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.chatThreadHeader {
  border-bottom: 1px solid #e2e7ef;
  margin-bottom: 10px;
  padding-bottom: 12px;
}

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

.chatThreadHeader h3,
.rememberHeader h3 {
  font-size: 17px;
  letter-spacing: 0;
  margin: 0;
}

.mutedText {
  line-height: 1.35;
  margin: 5px 0 0;
  max-width: 720px;
}

.messageList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: clamp(140px, 34vh, 360px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 12px;
}

.messageList::before {
  content: "";
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

.messageList > * {
  flex: 0 0 auto;
}

.messageList:has(.emptyThread) {
  justify-content: center;
}

.messageList:has(.emptyThread)::before {
  content: none;
}

.emptyThread {
  align-content: center;
  color: #5b6674;
  display: grid;
  min-height: 220px;
  text-align: center;
}

.messageBubble {
  animation: fadeIn 180ms ease-out;
  background: #f4f7fa;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  align-self: flex-start;
  display: grid;
  gap: 6px;
  justify-self: start;
  max-width: min(720px, 88%);
  padding: 10px 12px;
}

.messageBubble.user {
  background: #eaf4f7;
  border-color: #bfdae3;
  align-self: flex-end;
  justify-self: end;
}

.messageBubble.pending {
  opacity: 0.72;
}

.messageMeta {
  align-items: baseline;
  color: #667280;
  display: flex;
  font-size: 12px;
  gap: 8px;
}

.messageMeta strong {
  color: #243142;
  font-size: 12px;
}

.messageBubble p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

.messageMarkdown {
  color: #17202b;
  display: grid;
  font-size: 14px;
  gap: 8px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.messageMarkdown > :first-child {
  margin-top: 0;
}

.messageMarkdown > :last-child {
  margin-bottom: 0;
}

.messageMarkdown h1,
.messageMarkdown h2,
.messageMarkdown h3,
.messageMarkdown h4,
.messageMarkdown h5,
.messageMarkdown h6 {
  color: #1d2a36;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 2px 0 0;
}

.messageMarkdown h1,
.messageMarkdown h2 {
  font-size: 17px;
}

.messageMarkdown h3 {
  font-size: 16px;
}

.messageMarkdown h4,
.messageMarkdown h5,
.messageMarkdown h6 {
  font-size: 14px;
}

.messageMarkdown p,
.messageMarkdown ul,
.messageMarkdown ol,
.messageMarkdown blockquote,
.messageMarkdown pre {
  margin: 0;
  white-space: normal;
}

.messageMarkdown ul,
.messageMarkdown ol {
  padding-left: 20px;
}

.messageMarkdown li + li {
  margin-top: 4px;
}

.messageMarkdown code {
  background: #edf2f6;
  border-radius: 5px;
  color: #162232;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  overflow-wrap: anywhere;
  padding: 1px 4px;
}

.messageMarkdown pre {
  background: #f8fafc;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}

.messageMarkdown pre code {
  background: transparent;
  border-radius: 0;
  display: block;
  padding: 0;
  white-space: pre-wrap;
}

.messageMarkdown blockquote {
  border-left: 3px solid #bfd0dd;
  color: #4a5663;
  padding-left: 10px;
}

.messageMarkdown a {
  color: #1d778f;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.citationList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.messageActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.deliberationLink {
  min-height: 28px;
}

.citeInline {
  background: transparent;
  border: 0;
  color: #60717c;
  cursor: pointer;
  display: inline;
  font: inherit;
  font-size: 0.82em;
  font-weight: 800;
  margin: 0 1px;
  padding: 0 1px;
  vertical-align: 0.08em;
}

.citeInline:hover,
.citeInline:focus-visible {
  color: #1d778f;
  outline: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.citationBlock {
  display: grid;
  gap: 3px;
}

.citationChip {
  background: #ffffff;
  border: 1px solid #b9c5d3;
  border-radius: 999px;
  color: #243142;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 26px;
  padding: 0 9px;
}

.citationChip:hover:not(:disabled),
.citationChip:focus-visible {
  background: #edf7fa;
  border-color: #1d778f;
  color: #12596b;
}

.citationChip:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.citationDetail {
  color: #5b6674;
  font-size: 12px;
  max-width: 260px;
}

.chatComposer {
  align-items: end;
  border-top: 1px solid #e2e7ef;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 12px;
}

.composerField {
  display: grid;
  gap: 6px;
}

.composerField span {
  color: #4f5b68;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.composerField textarea {
  border: 1px solid #c5cedb;
  border-radius: 8px;
  min-height: 82px;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.composerField textarea:focus {
  border-color: #1d778f;
  outline: 2px solid color-mix(in srgb, #1d778f, transparent 78%);
}

.rememberPanel {
  background: #fbfcfd;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
}

.draftItems {
  display: grid;
  gap: 8px;
}

.draftItem {
  align-items: start;
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px;
}

.draftItem input {
  margin-top: 4px;
}

.draftItem span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.draftItem strong {
  font-size: 13px;
  text-transform: capitalize;
}

.draftItem em {
  color: #5b6674;
  font-size: 12px;
  font-style: normal;
}

.draftItem span span {
  color: #263240;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.memoryFilters {
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr 180px 220px 130px;
  margin-bottom: 14px;
  padding: 12px;
}

.filterGroup,
.filterField,
.pinnedOnly {
  display: grid;
  gap: 7px;
}

.filterGroup > span,
.filterField > span,
.pinnedOnly > span {
  color: #4f5b68;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

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

.filterChip,
.segmented button {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #354354;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  min-height: 28px;
  padding: 0 10px;
}

.filterChip.active,
.segmented button.active {
  background: #e8f4f7;
  border-color: #1d778f;
  color: #174e5e;
}

.filterField select,
.field input {
  border: 1px solid #c5cedb;
  border-radius: 8px;
  color: #151a20;
  min-height: 40px;
  padding: 9px 10px;
  width: 100%;
}

.segmented {
  background: #eef2f6;
  border-radius: 999px;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.segmented button {
  border-radius: 999px;
  flex: 1;
}

.pinnedOnly {
  align-content: center;
  display: flex;
  gap: 8px;
}

.pinnedOnly input {
  margin: 0;
}

.memoryLayout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
}

.memoryListPane,
.memoryDetailPane {
  min-width: 0;
}

.memoryRows {
  display: grid;
  gap: 8px;
}

.memoryRow {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  color: #151a20;
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.memoryRow:hover,
.memoryRow.active {
  border-color: #1d778f;
}

.memoryRow.active {
  box-shadow: inset 3px 0 0 #1d778f;
}

.memoryRowTop {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
}

.memoryRowTop strong {
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.pinDot {
  background: #1d778f;
  border-radius: 999px;
  height: 9px;
  margin-top: 5px;
  width: 9px;
}

.memoryRowMeta,
.memoryRowFoot,
.citationChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memoryRowMeta span,
.memoryRowFoot span,
.citationChips span {
  background: #f3f6f9;
  border: 1px solid #dce3eb;
  border-radius: 999px;
  color: #526171;
  font-size: 12px;
  font-weight: 750;
  padding: 3px 8px;
}

.kindBadge {
  background: #e9f5ef !important;
  border-color: #b5d9c5 !important;
  color: #24583a !important;
}

.memorySkeleton {
  display: grid;
  gap: 8px;
}

.memorySkeleton span {
  animation: pulse 1.4s ease-in-out infinite;
  background: #edf1f5;
  border-radius: 8px;
  height: 88px;
}

.loadMoreButton {
  margin-top: 10px;
  width: 100%;
}

.memoryDetailCard {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-height: 520px;
  padding: 14px;
}

.memoryDetailHeader {
  align-items: center;
  border-bottom: 1px solid #e2e7ef;
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
}

.memoryDetailHeader h3 {
  font-size: 18px;
  letter-spacing: 0;
  margin: 0;
}

.memoryContent {
  color: #17202b;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

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

.metadataGrid div {
  border-bottom: 1px solid #edf1f5;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-bottom: 7px;
}

.metadataGrid dt {
  color: #667280;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.metadataGrid dd {
  color: #29333d;
  font-size: 13px;
  margin: 0;
  overflow-wrap: anywhere;
}

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

.provenanceBlock {
  display: grid;
  gap: 8px;
}

.provenanceBlock h4 {
  font-size: 14px;
  letter-spacing: 0;
  margin: 0;
}

.provenanceBlock p {
  color: #5b6674;
  font-size: 13px;
  margin: 0;
}

.memoryActions {
  align-items: center;
  border-top: 1px solid #e2e7ef;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
}

.knowledgeLayout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(300px, 0.82fr) minmax(380px, 1.18fr);
}

.knowledgeListPane,
.knowledgeDetailPane {
  min-width: 0;
}

.knowledgeRows,
.knowledgeSkeleton {
  display: grid;
  gap: 8px;
}

.knowledgeSkeleton span {
  animation: pulse 1.4s ease-in-out infinite;
  background: #edf1f5;
  border-radius: 8px;
  height: 76px;
}

.knowledgeRow {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  color: #151a20;
  cursor: pointer;
  display: grid;
  gap: 9px;
  min-height: 82px;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.knowledgeRow:hover,
.knowledgeRow.active {
  border-color: #1d778f;
}

.knowledgeRow.active {
  box-shadow: inset 3px 0 0 #1d778f;
}

.knowledgeRowTop {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: auto minmax(0, 1fr);
}

.knowledgeRowTop strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.knowledgeRowMeta span:not(.statusPill) {
  background: #f3f6f9;
  border: 1px solid #dce3eb;
  border-radius: 999px;
  color: #526171;
  font-size: 12px;
  font-weight: 750;
  padding: 3px 8px;
}

.fileBadge {
  background: #f0f5ff;
  border: 1px solid #c7d7f6;
  border-radius: 6px;
  color: #27446f;
  font-size: 12px;
  font-weight: 850;
  min-width: 38px;
  padding: 4px 7px;
  text-align: center;
}

.knowledgeDetailCard {
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: grid;
  gap: 14px;
  min-height: 520px;
  padding: 14px;
}

.knowledgeDetailHeader,
.knowledgePreviewHeader {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.knowledgeDetailHeader {
  border-bottom: 1px solid #e2e7ef;
  padding-bottom: 12px;
}

.knowledgeDetailHeader h3,
.knowledgePreviewHeader h4 {
  letter-spacing: 0;
  margin: 0;
}

.knowledgeDetailHeader h3 {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.knowledgePreviewHeader h4 {
  font-size: 14px;
}

.knowledgePreviewBlock {
  display: grid;
  gap: 8px;
}

.knowledgeContentPreview {
  background: #f8fafc;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  color: #243142;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.knowledgeErrorBlock {
  background: #fff2f3;
  border: 1px solid #e1a0aa;
  border-radius: 8px;
  color: #6b2030;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.knowledgeErrorBlock strong {
  font-size: 13px;
}

.knowledgeErrorBlock span {
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.knowledgeActions {
  align-items: center;
  border-top: 1px solid #e2e7ef;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 12px;
}

.knowledgeStatus.pending {
  background: #fff8e9;
  border-color: #e2bf6d;
  color: #604716;
}

.knowledgeStatus.chunking,
.knowledgeStatus.embedding {
  background: #edf5ff;
  border-color: #b9d0ee;
  color: #254f80;
}

.knowledgeStatus.ready {
  background: #e9f5ef;
  border-color: #b5d9c5;
  color: #24583a;
}

.knowledgeStatus.failed {
  background: #fff2f3;
  border-color: #e1a0aa;
  color: #7b2435;
}

.knowledgeModal {
  max-width: 720px;
}

.knowledgeAddMode {
  border-radius: 8px;
}

.knowledgeInputPanel {
  display: grid;
  gap: 10px;
}

.knowledgeDropZone {
  align-items: center;
  background: #f8fafc;
  border: 1px dashed #9fb0c4;
  border-radius: 8px;
  color: #4f5b68;
  cursor: pointer;
  display: grid;
  gap: 6px;
  justify-items: center;
  min-height: 160px;
  padding: 22px;
  text-align: center;
}

.knowledgeDropZone.dragging {
  background: #eef8fb;
  border-color: #1d778f;
}

.knowledgeDropZone input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.knowledgeDropZone strong {
  color: #243142;
  font-size: 15px;
}

.knowledgeDropZone span {
  font-size: 13px;
}

.knowledgeDropZone span[data-tone="error"] {
  color: #8c293a;
  font-weight: 800;
}

.compactModal {
  max-width: 560px;
}

.confirmMessage {
  color: #29333d;
  line-height: 1.45;
  margin: 0;
}

.confirmPreview {
  background: #f6f8fb;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  color: #29333d;
  font-family: inherit;
  line-height: 1.45;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}

.successBanner,
.attentionBanner {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-size: 14px;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
  min-height: 42px;
  padding: 10px 12px;
}

.successBanner {
  background: #eff9f2;
  border: 1px solid #8ccaa1;
  color: #245838;
}

.attentionBanner {
  background: #fff8e9;
  border: 1px solid #e2bf6d;
  color: #604716;
}

.reconnectBanner .ghostButton {
  background: #ffffff;
}

.bannerActions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.meetingsDefault {
  display: grid;
  gap: 18px;
}

.meetingCta {
  align-items: center;
  background: #f8fbfc;
  border: 1px solid #bfd9e2;
  border-radius: 8px;
  color: #14212a;
  cursor: pointer;
  display: grid;
  gap: 5px;
  min-height: 112px;
  padding: 18px;
  text-align: left;
  width: 100%;
}

.meetingCta:hover {
  border-color: #1d778f;
  box-shadow: 0 0 0 1px #1d778f;
}

.meetingCta strong {
  font-size: 20px;
}

.meetingCta span {
  color: #53606e;
  font-size: 14px;
}

.recentMeetings {
  display: grid;
  gap: 10px;
}

.compactHeader {
  margin-bottom: 0;
}

.compactHeader h3,
.agendaHeader h3,
.liveMeetingHeader h3,
.modalHeader h2 {
  letter-spacing: 0;
  margin: 0;
}

.compactHeader h3,
.agendaHeader h3,
.liveMeetingHeader h3 {
  font-size: 17px;
}

.rowList {
  display: grid;
  gap: 8px;
}

.meetingRow {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  display: flex;
  gap: 8px;
  min-height: 62px;
  padding: 0 12px 0 0;
  width: 100%;
}

.meetingRow:hover {
  border-color: #1d778f;
}

.meetingRowMain {
  align-items: center;
  background: transparent;
  border: 0;
  color: #151a20;
  display: flex;
  flex: 1 1 auto;
  gap: 12px;
  justify-content: space-between;
  min-height: 62px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
}

.meetingRowMain span:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.meetingRowMain strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meetingRowMain em {
  color: #5b6674;
  font-size: 12px;
  font-style: normal;
}

.meetingRowDelete {
  flex: 0 0 auto;
}

.meetingRowSummary {
  flex: 0 0 auto;
}

.statusPill {
  background: #edf3f5;
  border: 1px solid #c8d9df;
  border-radius: 999px;
  color: #255365;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  text-transform: capitalize;
}

.agendaView {
  display: grid;
  gap: 14px;
}

.agendaHeader,
.liveMeetingHeader {
  align-items: center;
  border-bottom: 1px solid #e2e7ef;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 12px;
}

.agendaList {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}

.agendaList li {
  padding-left: 4px;
}

.agendaList strong,
.agendaList span {
  display: block;
}

.agendaList strong {
  font-size: 15px;
}

.agendaList span {
  color: #5b6674;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 3px;
}

.sectionActions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.liveMeetingView {
  display: grid;
  gap: 12px;
  min-height: 680px;
}

.liveMeetingHeader .inlineStatus {
  margin: 0;
}

.liveMeetingActions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.meetingIframeFrame {
  border: 1px solid #d8dee8;
  border-radius: 8px;
  min-height: 620px;
  overflow: hidden;
}

.meetingIframeFrame iframe {
  border: 0;
  display: block;
  height: 620px;
  width: 100%;
}

.modalBackdrop {
  align-items: center;
  background: rgba(14, 21, 28, 0.46);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 18px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

.modalPanel {
  background: #ffffff;
  border: 1px solid #c8d1dd;
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(16, 24, 32, 0.22);
  display: grid;
  gap: 14px;
  max-height: min(760px, calc(100vh - 36px));
  max-width: 680px;
  overflow: auto;
  padding: 16px;
  width: min(680px, 100%);
}

.modalHeader,
.modalActions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.modalActions {
  justify-content: flex-end;
}

.field {
  display: grid;
  gap: 6px;
}

.field span,
.meetingControlMode legend {
  color: #4f5b68;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.field select,
.field textarea {
  border: 1px solid #c5cedb;
  border-radius: 8px;
  color: #151a20;
  min-height: 40px;
  padding: 9px 10px;
  width: 100%;
}

.field textarea {
  line-height: 1.45;
  min-height: 120px;
  resize: vertical;
}

.meetingControlMode {
  border: 1px solid #d8dee8;
  border-radius: 8px;
  margin: 0;
  padding: 12px;
}

.meetingControlMode .segmented {
  margin-top: 10px;
}

.meetingRosterNote {
  background: #f6f8fa;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  color: #415061;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  padding: 10px 12px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 700px) {
  .shell {
    padding: 14px;
  }

  .topbar {
    align-items: flex-start;
    display: grid;
  }

  .identity {
    align-items: start;
    justify-items: start;
  }

  .topbarActions {
    align-items: flex-start;
    display: grid;
    justify-content: start;
  }

  .identity {
    text-align: left;
  }

  h1 {
    font-size: 24px;
  }

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

  .memoryFilters,
  .memoryLayout,
  .knowledgeLayout {
    grid-template-columns: 1fr;
  }

  .agentRail {
    border-right: 0;
    border-bottom: 1px solid #e2e7ef;
    padding: 0 0 12px;
  }

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

  .chatThreadHeader {
    align-items: flex-start;
    display: grid;
  }

  .chatActions {
    justify-content: flex-start;
  }

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

  .messageBubble {
    max-width: 96%;
  }

  .agendaHeader,
  .liveMeetingHeader,
  .successBanner,
  .attentionBanner {
    align-items: flex-start;
    display: grid;
  }

  .meetingIframeFrame,
  .meetingIframeFrame iframe {
    min-height: 560px;
  }
}

/* Track B visual layer: dark blue-teal Novaloop surface. */
:root {
  color-scheme: dark;
  --ce-bg: #03131a;
  --ce-panel: rgba(5, 25, 34, 0.92);
  --ce-panel-strong: rgba(7, 33, 44, 0.96);
  --ce-panel-soft: rgba(12, 45, 58, 0.72);
  --ce-border: rgba(95, 212, 236, 0.18);
  --ce-border-strong: rgba(95, 212, 236, 0.38);
  --ce-accent: #38c0da;
  --ce-accent-bright: #5fd4ec;
  --ce-rail: #1f6a7a;
  --ce-text: #e6f4f8;
  --ce-muted: #7fb8c8;
  --ce-subtle: #5e7e8c;
  --ce-pill: #cdeaf2;
  --ce-danger: #ff6f88;
  --ce-warning: #f1c76b;
  --ce-success: #74d7a4;
}

html,
body {
  background: var(--ce-bg);
}

body {
  color: var(--ce-text);
}

.ceRain {
  background: var(--ce-bg);
  bottom: 0;
  height: 100vh;
  left: 0;
  opacity: 0.55;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 0;
}

.standaloneLoginBackdrop {
  background:
    radial-gradient(circle at 50% 18%, rgba(56, 192, 218, 0.16), transparent 36%),
    var(--ce-bg);
}

.standaloneLoginCard {
  background: rgba(5, 25, 34, 0.94);
  border-color: var(--ce-border);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.standaloneLoginCard h1 {
  color: var(--ce-text);
}

.standaloneLoginCopy,
.standaloneTenantChoice small {
  color: var(--ce-muted);
}

.standaloneLoginForm label span,
.standaloneTenantTitle {
  color: var(--ce-muted);
}

.standaloneLoginForm input {
  background: rgba(2, 14, 20, 0.72);
  border-color: var(--ce-border-strong);
  color: var(--ce-text);
}

.standaloneLoginForm input:focus {
  border-color: var(--ce-accent-bright);
  box-shadow: 0 0 0 3px rgba(56, 192, 218, 0.16);
}

.standaloneTenantChoice {
  background: rgba(12, 45, 58, 0.7);
  border-color: var(--ce-border);
  color: var(--ce-text);
}

.standaloneTenantChoice:hover,
.standaloneTenantChoice[aria-pressed="true"] {
  border-color: var(--ce-accent-bright);
  box-shadow: 0 0 0 3px rgba(56, 192, 218, 0.16);
}

.shell {
  position: relative;
  z-index: 1;
}

.topbar,
.tabs,
.section,
.message {
  backdrop-filter: blur(12px);
}

.topbar {
  color: var(--ce-text);
}

.topbar h1,
h2,
h3,
.placeholder strong,
.identity strong,
.chiefExecNameLine strong,
.councilDialHeader strong,
.agentCard strong,
.chatThreadHeader h3,
.rememberHeader h3,
.memoryDetailHeader h3,
.knowledgeDetailHeader h3,
.knowledgePreviewHeader h4,
.compactHeader h3,
.agendaHeader h3,
.liveMeetingHeader h3,
.modalHeader h2,
.meetingCta strong,
.knowledgeDropZone strong {
  color: var(--ce-text);
}

.eyebrow,
.identity,
.inlineState,
.inlineStatus,
.mutedText,
.agentCard span:last-child,
.messageMeta,
.citationDetail,
.composerField span,
.field span,
.meetingControlMode legend,
.filterGroup > span,
.filterField > span,
.pinnedOnly > span,
.chiefExecNameForm label span,
.suggestionChips > span,
.metadataGrid dt,
.provenanceBlock p,
.knowledgeDropZone,
.meetingCta span,
.meetingRowMain em,
.agendaList span,
.draftItem em {
  color: var(--ce-muted);
}

.tabs {
  border-bottom-color: var(--ce-border);
}

.tab {
  color: var(--ce-subtle);
}

.tab:hover {
  color: var(--ce-pill);
}

.tab.active {
  border-bottom-color: var(--ce-accent-bright);
  color: var(--ce-text);
}

.section,
.chiefExecPanel,
.rememberPanel,
.memoryFilters,
.memoryDetailCard,
.knowledgeDetailCard,
.meetingControlMode,
.modalPanel,
.meetingRosterNote,
.meetingCta,
.meetingRow,
.knowledgeDropZone,
.confirmPreview,
.knowledgeContentPreview {
  background: var(--ce-panel);
  border-color: var(--ce-border);
  box-shadow: inset 0 1px 0 rgba(205, 234, 242, 0.04);
}

.section {
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(205, 234, 242, 0.04);
}

.placeholder,
.inlineStatus,
.agentCard,
.councilToggle,
.messageBubble,
.draftItem,
.memoryRow,
.knowledgeRow,
.knowledgeErrorBlock,
.memoryRowMeta span,
.memoryRowFoot span,
.citationChips span,
.knowledgeRowMeta span:not(.statusPill),
.fileBadge,
.statusPill,
.filterChip,
.segmented button,
.citationChip,
.suggestionChip,
.messageMarkdown code,
.messageMarkdown pre {
  background: rgba(8, 31, 42, 0.82);
  border-color: var(--ce-border);
  color: var(--ce-text);
}

.placeholder,
.emptyThread {
  color: var(--ce-muted);
}

.agentRail,
.chatThreadHeader,
.chatComposer,
.chiefExecNameForm,
.suggestionChips,
.memoryDetailHeader,
.memoryActions,
.knowledgeDetailHeader,
.knowledgeActions,
.agendaHeader,
.liveMeetingHeader,
.meetingIframeFrame {
  border-color: var(--ce-border);
}

.primaryButton,
.ghostButton,
.dangerButton,
.inlineButton {
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.primaryButton {
  background: var(--ce-accent);
  border-color: var(--ce-accent-bright);
  color: #03131a;
  box-shadow: 0 0 18px rgba(56, 192, 218, 0.18);
}

.primaryButton:hover {
  background: var(--ce-accent-bright);
  color: #03131a;
}

.ghostButton,
.dangerButton {
  background: rgba(5, 25, 34, 0.72);
  border-color: var(--ce-border-strong);
  color: var(--ce-pill);
}

.ghostButton:hover {
  background: rgba(31, 106, 122, 0.22);
  border-color: var(--ce-accent-bright);
}

.dangerButton {
  border-color: rgba(255, 111, 136, 0.64);
  color: #ffd6de;
}

.dangerButton:hover {
  background: rgba(159, 45, 60, 0.34);
}

.inlineButton,
.messageMarkdown a {
  color: var(--ce-accent-bright);
}

.citeInline {
  color: rgba(127, 184, 200, 0.72);
}

.citeInline:hover,
.citeInline:focus-visible {
  color: var(--ce-accent-bright);
}

.message,
.attentionBanner {
  background: rgba(81, 60, 17, 0.46);
  border-color: rgba(241, 199, 107, 0.55);
  color: #ffe2a1;
}

.message[data-tone="success"],
.successBanner {
  background: rgba(19, 72, 47, 0.52);
  border-color: rgba(116, 215, 164, 0.58);
  color: #c9f6db;
}

.reconnectBanner .ghostButton {
  background: rgba(5, 25, 34, 0.86);
}

.agentInitial,
.chiefExecInitial {
  background: rgba(56, 192, 218, 0.12);
  border-color: var(--ce-border-strong);
  color: var(--ce-accent-bright);
}

.agentCard:hover,
.agentCard.active,
.memoryRow:hover,
.memoryRow.active,
.knowledgeRow:hover,
.knowledgeRow.active,
.meetingCta:hover,
.meetingRow:hover {
  border-color: var(--ce-accent-bright);
  box-shadow:
    0 0 0 1px rgba(95, 212, 236, 0.32),
    0 0 24px rgba(56, 192, 218, 0.1);
}

.memoryRow.active,
.knowledgeRow.active {
  box-shadow:
    inset 3px 0 0 var(--ce-accent-bright),
    0 0 24px rgba(56, 192, 218, 0.1);
}

.councilToggle {
  background: rgba(5, 25, 34, 0.68);
}

.councilToggle span,
.councilToggle strong {
  color: var(--ce-text);
}

.councilToggle em {
  color: var(--ce-subtle);
}

.councilToggle.active {
  background: rgba(56, 192, 218, 0.15);
  border-color: var(--ce-accent-bright);
  box-shadow: inset 0 0 0 1px rgba(95, 212, 236, 0.18);
  color: var(--ce-pill);
}

.suggestionChip,
.citationChip,
.filterChip,
.segmented button {
  color: var(--ce-pill);
}

.suggestionChip:hover,
.suggestionChip:focus-visible,
.citationChip:hover:not(:disabled),
.citationChip:focus-visible,
.filterChip.active,
.segmented button.active {
  background: rgba(56, 192, 218, 0.16);
  border-color: var(--ce-accent-bright);
  color: var(--ce-text);
}

.segmented {
  background: rgba(2, 14, 20, 0.68);
}

.directAgentAccess summary {
  color: var(--ce-pill);
}

.messageBubble {
  background: rgba(10, 37, 49, 0.86);
}

.messageBubble.user {
  background: rgba(31, 106, 122, 0.26);
  border-color: rgba(95, 212, 236, 0.34);
}

.messageMeta strong,
.messageMarkdown,
.messageMarkdown h1,
.messageMarkdown h2,
.messageMarkdown h3,
.messageMarkdown h4,
.messageMarkdown h5,
.messageMarkdown h6,
.draftItem span span,
.memoryContent,
.metadataGrid dd,
.confirmMessage,
.knowledgeContentPreview,
.meetingRowMain,
.agendaList strong {
  color: var(--ce-text);
}

.messageMarkdown blockquote {
  border-left-color: var(--ce-rail);
  color: var(--ce-muted);
}

.composerField textarea,
.chiefExecNameForm input,
.filterField select,
.field input,
.field select,
.field textarea {
  background: rgba(2, 14, 20, 0.72);
  border-color: var(--ce-border-strong);
  color: var(--ce-text);
}

.composerField textarea::placeholder,
.field textarea::placeholder,
.chiefExecNameForm input::placeholder {
  color: var(--ce-subtle);
}

.composerField textarea:focus,
.chiefExecNameForm input:focus,
.filterField select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ce-accent-bright);
  box-shadow: 0 0 0 3px rgba(56, 192, 218, 0.16);
  outline: 0;
}

.kindBadge,
.knowledgeStatus.ready {
  background: rgba(24, 96, 62, 0.6) !important;
  border-color: rgba(116, 215, 164, 0.58) !important;
  color: #c9f6db !important;
}

.knowledgeStatus.pending {
  background: rgba(81, 60, 17, 0.52);
  border-color: rgba(241, 199, 107, 0.55);
  color: #ffe2a1;
}

.knowledgeStatus.chunking,
.knowledgeStatus.embedding,
.fileBadge {
  background: rgba(31, 106, 122, 0.32);
  border-color: rgba(95, 212, 236, 0.42);
  color: var(--ce-pill);
}

.knowledgeStatus.failed,
.knowledgeErrorBlock {
  background: rgba(90, 25, 41, 0.52);
  border-color: rgba(255, 111, 136, 0.55);
  color: #ffd6de;
}

.pinDot {
  background: var(--ce-accent-bright);
}

.memorySkeleton span,
.knowledgeSkeleton span {
  background: rgba(95, 212, 236, 0.14);
}

.modalBackdrop {
  background: rgba(1, 8, 12, 0.74);
  backdrop-filter: blur(8px);
}

.modalPanel {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48);
}

.councilThinkingStatus {
  align-items: center;
  display: flex;
  gap: 12px;
}

.councilThinkingStatus > span {
  color: var(--ce-pill);
  font-weight: 850;
}

.councilThinkingCopy {
  display: grid;
  gap: 3px;
}

.councilThinkingCopy span {
  color: var(--ce-pill);
  font-weight: 850;
}

.councilThinkingCopy small {
  color: rgba(172, 228, 235, 0.68);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}

.inlineStatus[data-mode="council"] {
  background: rgba(2, 14, 20, 0.72);
  border-color: rgba(95, 212, 236, 0.36);
}

.fastThinking {
  align-items: center;
  color: var(--ce-pill);
  display: inline-flex;
  gap: 8px;
  font-weight: 800;
}

.fastThinkingDot {
  animation: centerPulse 1.5s ease-in-out infinite;
  background: var(--ce-accent-bright);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(95, 212, 236, 0.45);
  height: 8px;
  width: 8px;
}

.onboardingBackdrop {
  z-index: 70;
}

.onboardingPanel {
  background:
    radial-gradient(circle at 50% 18%, rgba(95, 212, 236, 0.14), transparent 34%),
    rgba(3, 15, 22, 0.96);
  border-color: rgba(95, 212, 236, 0.28);
  color: var(--ce-text);
  gap: 18px;
  max-width: 640px;
  min-height: 520px;
  padding: 24px;
  position: relative;
  text-align: left;
}

.onboardingChrome {
  display: flex;
  justify-content: center;
  min-height: 146px;
  pointer-events: none;
}

.onboardingRing {
  align-items: center;
  display: flex;
  justify-content: center;
}

.onboardingRing .councilRing {
  height: 142px;
  width: 142px;
}

.onboardingStep {
  display: grid;
  gap: 14px;
}

.onboardingStep[hidden] {
  display: none;
}

.onboardingStep h2 {
  color: var(--ce-text);
  font-size: 1.55rem;
  letter-spacing: 0;
  line-height: 1.16;
  margin: 0;
}

.onboardingCopy {
  color: var(--ce-muted);
  font-weight: 650;
  line-height: 1.55;
  margin: 0;
}

.onboardingCenterStep {
  align-content: center;
  min-height: 210px;
  text-align: center;
}

.onboardingPanel .field input,
.onboardingPanel .field textarea {
  background: rgba(1, 10, 15, 0.74);
  border-color: rgba(95, 212, 236, 0.28);
  color: var(--ce-text);
}

.onboardingPanel .field input:focus,
.onboardingPanel .field textarea:focus {
  border-color: rgba(95, 212, 236, 0.7);
  box-shadow: 0 0 0 3px rgba(95, 212, 236, 0.14);
  outline: none;
}

.onboardingPanel .field textarea {
  min-height: 150px;
  resize: vertical;
}

.onboardingPanel .modalActions {
  padding-top: 4px;
}

.onboardingBackdrop[data-step="awakening"] .onboardingRing,
.onboardingBackdrop[data-step="learning"] .onboardingRing {
  animation: onboardingRingLift 1.2s ease-in-out infinite;
}

@keyframes onboardingRingLift {
  0%,
  100% {
    filter: drop-shadow(0 0 12px rgba(95, 212, 236, 0.18));
    transform: translateY(0);
  }

  50% {
    filter: drop-shadow(0 0 24px rgba(95, 212, 236, 0.32));
    transform: translateY(-3px);
  }
}

.councilRing {
  flex: 0 0 auto;
  height: 118px;
  width: 118px;
}

.councilRing svg {
  display: block;
  height: 100%;
  overflow: visible;
  width: 100%;
}

.councilRing .ringTrack {
  fill: none;
  stroke: rgba(31, 106, 122, 0.34);
  stroke-width: 1;
}

.councilRing .rail {
  stroke: var(--ce-rail);
  stroke-linecap: round;
  stroke-opacity: 0.38;
  stroke-width: 1.25;
}

.councilRing .spoke {
  animation: spokeInflow 1.25s linear infinite;
  animation-delay: var(--d);
  filter: drop-shadow(0 0 7px rgba(95, 212, 236, 0.65));
  stroke: var(--ce-accent-bright);
  stroke-dasharray: 8 15;
  stroke-linecap: round;
  stroke-width: 1.65;
}

.ringNode .halo {
  animation: nodePulse 1.7s ease-in-out infinite;
  animation-delay: var(--d);
  fill: rgba(56, 192, 218, 0.09);
  stroke: rgba(95, 212, 236, 0.52);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

.ringNode .core {
  animation: nodePulse 1.7s ease-in-out infinite;
  animation-delay: var(--d);
  fill: var(--ce-accent-bright);
  filter: drop-shadow(0 0 8px rgba(95, 212, 236, 0.72));
  transform-box: fill-box;
  transform-origin: center;
}

.ringNode text {
  fill: var(--ce-muted);
  font-size: 7px;
  font-weight: 900;
  text-anchor: middle;
}

.centerHalo {
  animation: centerPulse 2.6s ease-in-out infinite;
  fill: rgba(205, 234, 242, 0.04);
  stroke: rgba(205, 234, 242, 0.16);
  stroke-width: 1;
}

.fallbackCore {
  animation: centerPulse 1.8s ease-in-out infinite;
  fill: rgba(95, 212, 236, 0.62);
  filter: drop-shadow(0 0 8px rgba(95, 212, 236, 0.45));
}

.novaloopCoreMark {
  animation: markPulse 2.8s ease-in-out infinite;
  opacity: 0.34;
}

@keyframes spokeInflow {
  from {
    stroke-dashoffset: 23;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nodePulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes centerPulse {
  0%,
  100% {
    opacity: 0.54;
  }

  50% {
    opacity: 1;
  }
}

@keyframes markPulse {
  0%,
  100% {
    opacity: 0.26;
  }

  50% {
    opacity: 0.38;
  }
}

@media (max-width: 700px) {
  .agentRail {
    border-bottom-color: var(--ce-border);
  }

  .councilThinkingStatus {
    align-items: flex-start;
  }

  .councilRing {
    height: 96px;
    width: 96px;
  }

  .onboardingPanel {
    min-height: min(560px, calc(100vh - 36px));
    padding: 18px;
  }

  .onboardingRing .councilRing {
    height: 112px;
    width: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ceRain {
    opacity: 0.18;
  }

  .councilRing .spoke,
  .ringNode .halo,
  .ringNode .core,
  .centerHalo,
  .fallbackCore,
  .novaloopCoreMark,
  .onboardingRing,
  .fastThinkingDot,
  .memorySkeleton span,
  .knowledgeSkeleton span {
    animation: none;
  }
}

/* ============================================================
   Branded standalone login (Collegium One / Novaloop look)
   Appended last so it wins the cascade. Dark + teal, Inter,
   molecule logo, subtle digital rain visible behind.
   ============================================================ */
.standaloneLoginBackdrop {
  background:
    radial-gradient(circle at 50% 30%, rgba(56, 192, 218, 0.12), transparent 46%),
    rgba(2, 11, 15, 0.66);
  place-items: center;
  z-index: 1;
}

.standaloneLoginCard.brandCard {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 30px;
  justify-items: center;
  max-width: 540px;
  padding: 28px 24px;
  width: min(100%, 540px);
}

.brandLogin__head {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}

.brandLogin__title {
  color: #cdd8dd;
  font-size: clamp(1.45rem, 1rem + 1.6vw, 1.95rem);
  font-weight: 600;
  letter-spacing: 0.34em;
  margin: 0;
  /* nudge right to visually centre the trailing letter-spacing */
  padding-left: 0.34em;
  text-transform: uppercase;
}

.brandLogin__title span {
  color: var(--ce-accent-bright, #5fd4ec);
}

.brandLogin__sub {
  color: var(--ce-muted, #7fb8c8);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  margin: 0;
}

.brandLogin__note {
  color: var(--ce-subtle, #5e7e8c);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  margin: 2px 0 0;
}

.brandLogin__logo {
  display: flex;
  justify-content: center;
  margin: 4px 0 2px;
}

.brandLogin__logo svg {
  height: auto;
  width: clamp(148px, 20vw, 208px);
  filter: drop-shadow(0 0 22px rgba(56, 192, 218, 0.22));
}

.brandLogin__form {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  text-align: left;
  width: min(100%, 460px);
}

.brandLogin__field {
  display: grid;
  gap: 8px;
}

.brandLogin__field span {
  color: #c4d3d8;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
}

.brandLogin__field input {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(95, 212, 236, 0.22);
  border-radius: 10px;
  color: var(--ce-text, #e6f4f8);
  min-height: 46px;
  padding: 12px 14px;
  width: 100%;
}

.brandLogin__field input::placeholder {
  color: rgba(127, 184, 200, 0.55);
}

.brandLogin__field input:focus {
  border-color: var(--ce-accent-bright, #5fd4ec);
  box-shadow: 0 0 0 3px rgba(56, 192, 218, 0.16);
  outline: 0;
}

.brandLogin__error {
  color: var(--ce-danger, #ff6f88);
  text-align: left;
}

.brandLogin__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.brandLogin__access {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(95, 212, 236, 0.35);
  border-radius: 10px;
  color: var(--ce-text, #e6f4f8);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  padding: 11px 26px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.brandLogin__access:hover {
  background: rgba(56, 192, 218, 0.16);
  border-color: var(--ce-accent-bright, #5fd4ec);
  box-shadow: 0 0 18px rgba(56, 192, 218, 0.22);
}

.brandLogin__access:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Brand wordmark accent (topbar) to match the login. */
.topbar h1 .brandOne {
  color: var(--ce-accent-bright, #5fd4ec);
}

/* ============================================================
   Thin typography pass (Novaloop "Intelligence Platform ONE"
   aesthetic). Light weights everywhere; no bold headings.
   Appended last so it wins the cascade.
   ============================================================ */
body {
  font-weight: 300;
}
h1,
h2,
h3,
h4 {
  font-weight: 300;
  letter-spacing: 0.012em;
}
.brandLogin__title {
  font-weight: 300;
}
.eyebrow,
.tab,
.primaryButton,
.ghostButton,
.dangerButton,
.inlineButton,
.brandLogin__field span,
.brandLogin__access,
.standaloneLoginForm label span,
.standaloneTenantTitle,
.suggestionChips > span,
.suggestionChip,
.directAgentAccess summary,
.agentInitial,
.councilDialHeader span,
.councilToggle span,
.messageMarkdown a,
.citeInline,
.citationChip,
.composerField span,
.pinnedOnly > span,
.kindBadge,
.knowledgeStatus,
.fileBadge,
.segmented button,
.knowledgeDropZone span[data-tone="error"],
.statusPill,
.meetingControlMode legend,
.meetingRosterNote,
.councilThinkingStatus > span,
.councilThinkingCopy span,
.councilThinkingCopy small,
.onboardingCopy,
.fastThinking,
.ringNode text,
strong,
b {
  font-weight: 400;
}

/* ─── Operator tab ─────────────────────────────────────────────────────────── */

.operatorLayout {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

.operatorHeaderActions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#operatorThreadPanel {
  display: flex;
  flex-direction: column;
  height: clamp(440px, 68vh, 720px);
  min-height: 0;
  overflow: hidden;
}

#operatorMessages {
  flex: 1 1 auto;
  max-height: none;
}

#operatorComposer {
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .operatorLayout {
    align-items: start;
    grid-template-columns: 1fr 340px;
  }
}

.operatorArtifactArea {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: clamp(440px, 68vh, 720px);
  min-height: 0;
  overflow-y: auto;
}

.operatorArtifact {
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  padding: 16px;
}

.operatorArtifact--doc .operatorArtifactContent {
  font-size: 14px;
  line-height: 1.6;
}

.operatorArtifact--doc .operatorArtifactContent p:first-child {
  margin-top: 0;
}

.operatorArtifact--doc .operatorArtifactContent p:last-child {
  margin-bottom: 0;
}

.operatorArtifact--unsupported {
  color: #667280;
  font-size: 13px;
}

.operatorTable {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}

.operatorTable caption {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  text-align: left;
}

.operatorTable th,
.operatorTable td {
  border: 1px solid #dde3ea;
  padding: 6px 10px;
  text-align: left;
}

.operatorTable th {
  background: #f6f7f9;
  font-weight: 600;
}

.operatorMessageArtifacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.operatorApprovalCard {
  background: #fffbe6;
  border: 1px solid #f0c040;
  border-radius: 8px;
  padding: 16px;
}

.operatorApprovalHeader {
  margin-bottom: 12px;
}

.operatorApprovalHeader p {
  margin: 0 0 4px;
}

.operatorApprovalHeader strong {
  font-size: 15px;
  font-weight: 600;
}

.operatorApprovalInputs pre {
  background: #f6f7f9;
  border: 1px solid #dde3ea;
  border-radius: 6px;
  font-size: 12px;
  margin: 0 0 12px;
  overflow-x: auto;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-break: break-all;
}

.operatorApprovalActions {
  justify-content: flex-end;
}

/* ─── End Operator tab ──────────────────────────────────────────────────────── */

/* --- Settings: integrations -------------------------------------------- */
.integrationCard {
  border: 1px solid var(--ce-border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: var(--ce-panel);
}

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

.integrationCardHeader h3 {
  margin: 0;
}

.integrationStatus {
  font-size: 13px;
  color: var(--ce-muted);
  white-space: nowrap;
}

.integrationForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.integrationConfirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ce-border-strong);
  border-radius: 12px;
  background: var(--ce-pill);
}