.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  border-radius: 1rem;
  padding: 0.75rem 0.875rem;
  border: 0.0625rem solid var(--stroke);
}

body[data-theme="dark"] .chat-header {
  background: #0f241f;
}

.chat-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.5rem;
}

.chat-meta {
  margin: 0.125rem 0 0;
  color: var(--muted);
  font-size: 0.8125rem;
}

.chat-actions {
  display: flex;
  gap: 0.5rem;
  position: relative;
}

.menu-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid var(--stroke);
  background: #ffffff;
  display: grid;
  place-items: center;
  color: var(--ink);
}

body[data-theme="dark"] .menu-btn {
  background: #0f241f;
}

.menu-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 12rem;
  border-radius: 0.75rem;
  border: 0.0625rem solid var(--stroke);
  background: var(--panel-strong);
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
  z-index: 2;
}

body[data-theme="dark"] .menu {
  background: #0f241f;
}

.menu[hidden] {
  display: none;
}

.menu-item {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink);
}

.menu-item:hover {
  background: rgba(37, 211, 102, 0.1);
}

body[data-theme="dark"] .menu-item:hover {
  background: rgba(18, 140, 126, 0.2);
}

.menu-item.danger {
  color: #7a1b1b;
}

body[data-theme="dark"] .menu-item.danger {
  color: #ffb7b7;
}

.chat-window {
  flex: 1;
  background-color: #efeae2;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 0.0625rem, transparent 0.0625rem);
  background-size: 1.375rem 1.375rem;
  border-radius: 1.25rem;
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  min-height: 0;
}

body[data-theme="dark"] .chat-window {
  background-color: #0f1f1c;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.0625rem, transparent 0.0625rem);
}

.message {
  max-width: 68%;
  padding: 0.625rem 0.75rem;
  border-radius: 1rem;
  background: white;
  box-shadow: none;
  position: relative;
}

body[data-theme="dark"] .message {
  background: #132a25;
  color: #e8f5ef;
}

.message span {
  font-size: 0.6875rem;
  color: var(--muted);
  margin-top: 0.375rem;
  display: block;
}

.message.inbound {
  align-self: flex-start;
  border-top-left-radius: 0.5rem;
}

.message.outbound {
  align-self: flex-end;
  background: #d9fdd3;
  border-top-right-radius: 0.5rem;
}

body[data-theme="dark"] .message.outbound {
  background: #164c40;
}

.message.note {
  align-self: center;
  background: rgba(26, 26, 26, 0.08);
  font-size: 0.75rem;
  box-shadow: none;
}

.composer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.625rem;
  align-items: center;
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--stroke);
}

body[data-theme="dark"] .composer {
  background: #0f241f;
}

.composer-left {
  display: flex;
  gap: 0.5rem;
}

.composer input {
  border: 0;
  background: transparent;
  font-size: 0.875rem;
  outline: none;
}

body[data-theme="dark"] .composer input {
  color: #e8f5ef;
}