body {
  margin: 0;
  background: #e6ecf0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #14171a;
}

header {
  background: #1da1f2;
  color: white;
  padding: 14px 0;
  font-size: 24px;
  font-weight: 700;
  border-bottom: 1px solid #1991da;
  position: sticky;
  top: 0;
  z-index: 10;
  text-align: center;
}

.github-link {
  color: white;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.github-link:hover {
  text-decoration: underline;
}

.home-link {
  color: white;
  text-decoration: none;
}

.home-link:hover {
  text-decoration: underline;
}

main {
  max-width: 620px;
  margin: 40px auto 60px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e1e8ed;
  box-shadow: 0 10px 30px rgba(27, 149, 224, 0.08);
  padding: 24px 30px;
}

.identity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.identity input {
  flex: 1;
  border: 1px solid #ccd6dd;
  border-radius: 24px;
  padding: 10px 16px;
  font-size: 14px;
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #1da1f2;
  object-fit: cover;
  cursor: pointer;
}

.compose-box {
  background: #f5f8fa;
  padding: 16px;
  border: 1px solid #e1e8ed;
  border-radius: 16px;
  margin-bottom: 24px;
}

.reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #e8f5fe;
  border: 1px solid #c6e7fd;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #0f1419;
}

.reply-context-hidden {
  display: none;
}

.reply-context button {
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: none;
  color: #1d9bf0;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.compose-box textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e1e8ed;
  resize: none;
  height: 70px;
  font-family: inherit;
  font-size: 16px;
  padding: 8px 0;
  background: transparent;
  outline: none;
}

.compose-box button {
  background: #1da1f2;
  border: none;
  color: white;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  float: right;
  transition: background 0.2s ease;
}

.compose-box button:hover {
  background: #1684c9;
}

.message {
  border-bottom: 1px solid #e6ecf0;
  display: flex;
  gap: 12px;
  padding: 16px 0;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.message strong {
  color: #14171a;
  font-size: 15px;
}

.pubkey {
  font-size: 12px;
  color: #657786;
  text-decoration: none;
}

.body {
  white-space: pre-wrap;
  color: #14171a;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 6px;
}

.message-reply-ref {
  font-size: 12px;
  color: #657786;
  margin-top: 4px;
}

.message-reply-ref a {
  color: #1d9bf0;
  text-decoration: none;
}

.message-reply-ref a:hover {
  text-decoration: underline;
}

.message-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.reply-btn {
  background: transparent;
  border: 1px solid #cfd9de;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  color: #1d9bf0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.reply-btn:hover {
  background: rgba(29, 155, 240, 0.1);
}

.reply-count {
  font-size: 12px;
  color: #657786;
}

.raw-link {
  font-size: 12px;
  color: #1d9bf0;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.raw-link:hover {
  color: #1684c9;
}

a.reply-count {
  text-decoration: none;
}

a.reply-count:hover {
  text-decoration: underline;
  color: #1d9bf0;
}

.inline-reply-wrapper {
  margin: -8px 0 16px 64px;
}

.inline-reply-composer .reply-context {
  margin-bottom: 8px;
}

.keypair {
  font-size: 12px;
  color: #657786;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #e6ecf0;
  border-radius: 12px;
  background: #fdfefe;
  word-break: break-all;
}

.keypair code {
  background: #f0f4f8;
  padding: 2px 4px;
  border-radius: 4px;
}

.page {
  min-height: 100vh;
}

.feed-container h2 {
  margin: 0 0 16px;
  font-size: 20px;
  color: #14171a;
}

.message-list {
  margin-top: 10px;
}

.empty-feed {
  padding: 24px 0;
  text-align: center;
  color: #657786;
  font-style: italic;
}

.reply-thread {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e6ecf0;
}

.reply-thread h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #14171a;
}

.reply-thread.empty {
  border-top: none;
  padding-top: 0;
}

.reply-thread .reply-children {
  margin-left: 12px;
  border-left: 2px solid #e6ecf0;
  padding-left: 8px;
}

.reply-thread .reply-children.inline-replies {
  margin-top: 12px;
}

.reply-thread .reply-children .reply-children {
  border-color: #f2f5f7;
}

.reply-thread .message {
  border-bottom: 1px solid #eef1f4;
  padding: 12px 0;
}

.reply-thread .message:last-child {
  border-bottom: none;
}

.message.reply {
  padding-bottom: 0;
}

.message.inline-generated {
  padding: 12px 0;
}

@media (prefers-color-scheme: dark) {
  body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: radial-gradient(circle at top, #173f74 0%, #0d1b33 38%, #050b18 70%);
    color: #e0e9ff;
  }

  header {
    background: rgba(3, 9, 23, 0.92);
    backdrop-filter: blur(18px);
    color: #f7fbff;
    padding: 18px 0;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: center;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.65);
  }

  .github-link {
    color: #70b7ff;
  }

  .home-link {
    color: inherit;
    text-decoration: none;
    letter-spacing: 0.5px;
  }

  .home-link:hover {
    color: #69b3ff;
  }

  main {
    max-width: 620px;
    margin: 48px auto 80px;
    background: rgba(6, 14, 32, 0.92);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 40px 80px rgba(1, 5, 16, 0.75);
    padding: 32px 34px;
  }

  .feed a,
  .message a {
    color: #73c4ff;
  }

  .feed a:hover,
  .message a:hover {
    color: #9ed6ff;
  }

  .identity {
    gap: 14px;
    margin-bottom: 24px;
  }

  .identity input {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 11px 18px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.04);
    color: #f2f6ff;
  }

  .avatar {
    border: 3px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(54, 129, 255, 0.45);
  }

  .compose-box {
    background: rgba(14, 23, 48, 0.85);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    margin-bottom: 28px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25);
  }

  .reply-context {
    background: rgba(34, 73, 132, 0.4);
    border: 1px solid rgba(118, 190, 255, 0.35);
    border-radius: 14px;
    padding: 10px 14px;
    color: #ddebff;
  }

  .reply-context button {
    color: #73c4ff;
  }

  .compose-box textarea {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #f7fbff;
  }

  .compose-box button {
    background: linear-gradient(135deg, #1c9eff, #2d6bff);
    padding: 9px 20px;
    box-shadow: 0 8px 20px rgba(33, 116, 255, 0.45);
  }

  .compose-box button:hover {
    background: linear-gradient(135deg, #45a7ff, #4c7dff);
  }

  .message {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #eff5ff;
  }

  .message-header {
    color: rgba(255, 255, 255, 0.72);
  }

  .message strong {
    color: #fbfdff;
  }

  .pubkey {
    color: rgba(255, 255, 255, 0.5);
  }

  .body {
    color: #e3ecff;
  }

  .message-reply-ref {
    color: rgba(255, 255, 255, 0.6);
  }

  .message-reply-ref a {
    color: #73c4ff;
  }

  .message-actions {
    gap: 12px;
  }

  .reply-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ed6ff;
  }

  .reply-btn:hover {
    background: rgba(114, 192, 255, 0.12);
  }

  .reply-count {
    color: rgba(255, 255, 255, 0.5);
  }

  .raw-link {
    color: #73c4ff;
  }

  .raw-link:hover {
    color: #9ed6ff;
  }

  a.reply-count:hover {
    color: #9ed6ff;
  }

  .inline-reply-wrapper {
    border-left: 2px solid rgba(255, 255, 255, 0.06);
    padding-left: 12px;
  }

  .keypair {
    color: rgba(255, 255, 255, 0.5);
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(12, 22, 46, 0.8);
  }

  .keypair code {
    background: rgba(255, 255, 255, 0.06);
    color: #fdfdff;
  }

  .feed-container h2 {
    color: #f2f6ff;
  }

  .empty-feed {
    color: rgba(255, 255, 255, 0.45);
  }

  .reply-thread {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .reply-thread h3 {
    color: #f8fbff;
  }

  .reply-thread .reply-children {
    border-left: 2px solid rgba(255, 255, 255, 0.08);
  }

  .reply-thread .reply-children .reply-children {
    border-color: rgba(255, 255, 255, 0.04);
  }

  .reply-thread .message {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
}