html {
  color-scheme: dark;
}

body {
  margin: 0;
  color: #e8edf2;
  background:
    radial-gradient(circle at top left, rgba(47, 111, 237, 0.16), transparent 32%),
    #12161c;
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
}

h1, h2, h3, .serif {
  font-family: "Source Serif 4", Georgia, serif;
  color: #f3f6f9;
}

a { color: #8ec7ff; }

.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.eyebrow {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: #8ec7ff;
  margin-bottom: 6px;
}

h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
}

.sub {
  margin: 8px 0 0;
  color: #9aa7b4;
  max-width: 640px;
}

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

button, .ghost {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
}

button.primary {
  background: #2f6fed;
  color: #f3f6f9;
}

button.primary:disabled {
  opacity: 0.55;
  cursor: wait;
}

.ghost {
  background: transparent;
  color: #e8edf2;
  border: 1px solid #3a4553;
}

.grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 16px;
  margin-bottom: 16px;
}

.card {
  background: #1c2128;
  border: 1px solid #2a333d;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

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

.kpi {
  background: #161b21;
  border-radius: 16px;
  padding: 12px;
}

.kpi b {
  display: block;
  font-size: 20px;
  color: #f3f6f9;
}

.kpi span {
  color: #9aa7b4;
  font-size: 13px;
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  background: #2b3440;
  color: #e8edf2;
}

.status-pill.success { background: #1f4d32; color: #b7ebc6; }
.status-pill.partial { background: #5a4318; color: #f3d399; }
.status-pill.failed, .status-pill.error { background: #5a2420; color: #f3b4ac; }
.status-pill.running { background: #1d3d66; color: #b9d6ff; }

.overview {
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  color: #e8edf2;
}

.waiting {
  margin: 8px 0 0;
  font-weight: 500;
}

#dataGaps:empty {
  display: none;
}

#decisionsCard[hidden],
#unrepliedCard[hidden] {
  display: none;
}

.list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list li {
  background: #161b21;
  border-radius: 16px;
  padding: 12px 14px;
}

.muted { color: #9aa7b4; font-size: 13px; }

.thread {
  margin-top: 12px;
  padding: 14px 16px;
  background: #161b21;
  border: 1px solid #2a333d;
  border-radius: 18px;
  cursor: pointer;
}

.thread:hover {
  border-color: #3d5f9c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.thread .summary {
  margin: 10px 0 0;
  line-height: 1.5;
  color: #c5d0da;
}

.thread.quiet {
  opacity: 0.78;
}

#projectCount {
  margin: 0 0 4px;
}

.thread header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #2b3440;
  flex: 0 0 44px;
}

.avatar.fallback {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 650;
  color: #8ec7ff;
}

.titles {
  flex: 1;
  min-width: 0;
}

.project-name {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  color: #f3f6f9;
}

.client-name {
  margin-top: 2px;
  color: #9aa7b4;
  font-size: 14px;
}

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

.pin-btn {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  background: #2b3440;
  color: #c5d0da;
  border: 1px solid #3a4553;
}

.pin-btn.on {
  background: #3d2e12;
  color: #f3d399;
  border-color: #5a4318;
}

.status-pill.wait {
  background: #5a4318;
  color: #f3d399;
}

.thread.waiting-reply {
  border-color: #5a4318;
}

.thread.pinned {
  border-color: #3d5f9c;
}

.unreplied-card {
  border-color: #5a4318;
}

.unreplied-card h2 {
  color: #f3d399;
}

.messages {
  margin-top: 10px;
  border-top: 1px dashed #2a333d;
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.msg {
  font-size: 14px;
  line-height: 1.45;
}

.msg .who {
  font-weight: 650;
}

.settings-row {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}

label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: #9aa7b4;
}

input {
  font: inherit;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #3a4553;
  background: #12161c;
  color: #e8edf2;
  width: 88px;
}

a.ghost {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(420px, 100%);
  background: #1a2028;
  border: 1px solid #2a3340;
  border-radius: 20px;
  padding: 28px 24px 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.login-card h1 {
  font-size: 28px;
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.login-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
}

.warn {
  background: #3d2e12;
  color: #f3d399;
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 12px;
}

.empty {
  color: #9aa7b4;
}

@media (max-width: 860px) {
  .grid, .topbar { grid-template-columns: 1fr; display: grid; }
}

.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(8, 10, 14, 0.62);
  display: grid;
  place-items: center;
  padding: 18px;
}

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

.chat-panel {
  width: min(760px, 100%);
  height: min(860px, 100%);
  background: #1c2128;
  color: #e8edf2;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
}

.chat-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #161b21;
  border-bottom: 1px solid #2a333d;
}

.chat-back {
  background: transparent;
  color: #9ec9ff;
  border: 0;
  padding: 6px 8px;
}

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

.chat-head h3 {
  margin: 0;
  font-size: 16px;
  font-family: "Be Vietnam Pro", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-head .subname {
  color: #9aa7b4;
  font-size: 12px;
}

.chat-summary {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: #c5d0da;
  background: #20262e;
  border-bottom: 1px solid #2a333d;
}

.chat-summary:empty {
  display: none;
}

.chat-log {
  flex: 1;
  overflow: auto;
  padding: 16px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #1c2128;
}

.chat-day {
  align-self: center;
  font-size: 12px;
  color: #8b98a5;
  margin: 6px 0;
}

.bubble-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 86%;
}

.bubble-row.mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.bubble-row .chat-ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #2d3640;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  font-size: 10px;
}

.bubble {
  background: #2b3440;
  border-radius: 14px;
  padding: 8px 12px;
  line-height: 1.45;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.bubble-row.mine .bubble {
  background: #2f6fed;
}

.mention {
  color: #8ec7ff;
  font-weight: 650;
}

.bubble-row.mine .mention {
  color: #d6e8ff;
}

.chat-time {
  font-size: 11px;
  color: #8b98a5;
  margin: 0 36px;
}

.bubble-row.mine + .chat-time,
.time-mine {
  text-align: right;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1b222b;
  border-radius: 12px;
  padding: 8px 10px;
  margin: 6px 0;
  min-width: 220px;
}

.bubble-row.mine .file-chip {
  background: rgba(0, 0, 0, 0.18);
}

.file-ext {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 650;
  background: #3a4553;
  letter-spacing: 0.04em;
}

.file-name {
  font-size: 13px;
  color: #7ec2ff;
}

.chat-image {
  display: block;
  max-width: 280px;
  border-radius: 12px;
  margin: 6px 0;
}

.chat-footer {
  padding: 10px 14px;
  font-size: 12px;
  color: #8b98a5;
  border-top: 1px solid #2a333d;
  background: #161b21;
}