:root {
  --bg: #fbf7f8;
  --panel: #ffffff;
  --line: #e6d7dc;
  --text: #35252b;
  --muted: #7e6971;
  --accent: #8b2447;
  --accent2: #bd5b78;
}

body {
  background:
    radial-gradient(circle at 84% 0, rgba(183, 76, 112, .12), transparent 34%),
    linear-gradient(180deg, #fff 0, #fbf7f8 60%, #f7eff2 100%);
  color: var(--text);
}

.shell { background: transparent; }
.topbar {
  border-bottom-color: rgba(255, 255, 255, .15);
  background: rgba(116, 31, 59, .97);
  color: #fff;
  box-shadow: 0 10px 30px rgba(72, 18, 37, .18);
}
.topbar .brand small,
.topbar .user-name { color: #ead6dd; }
.topbar select,
.topbar .ghost {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.topbar select option { background: #fff; color: #3d2830; }
.topbar .ghost:hover { background: rgba(255, 255, 255, .2); }

.sidebar {
  border-color: #682039;
  background: #681f39;
  box-shadow: 8px 0 28px rgba(73, 17, 37, .17);
}
.sidebar h2,
.sidebar .side-note { color: #ead5dd; }
.sidebar .side-note a { color: #fff; }
.new-chat,
.history-toggle {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.new-chat:hover,
.history-toggle:hover { background: rgba(255, 255, 255, .2); }
.conversation-link { color: #fff; }
.conversation-link:hover { background: rgba(255, 255, 255, .13); }

.brand-mark,
.avatar,
.user-photo-fallback {
  background: linear-gradient(135deg, #a93259, #d36b88);
  color: #fff;
  box-shadow: 0 8px 20px rgba(83, 19, 41, .2);
}
.eyebrow { color: #94294d; }
.welcome h1 { color: #401e2a; }
.welcome > p { color: #76636a; }
.suggestions button {
  border-color: #ead9df;
  background: rgba(255, 255, 255, .94);
  color: #4b3039;
  box-shadow: 0 12px 30px rgba(88, 33, 52, .08);
}
.suggestions button:hover {
  border-color: #b94c70;
  background: #fff;
  box-shadow: 0 16px 36px rgba(120, 35, 65, .13);
}

.message { scroll-margin-top: 96px; }
.message.user .avatar { background: #ead9df; color: #6d2540; box-shadow: none; }
.bubble { color: #4c3940; }
.content small { color: #917c84; }
.composer-wrap { background: linear-gradient(transparent, rgba(251, 247, 248, .98) 30%); }
.composer {
  border-color: #decbd2;
  background: #fff;
  box-shadow: 0 18px 50px rgba(89, 31, 51, .16);
}
.composer:focus-within { border-color: #a93259; }
textarea { color: #3f2b32; }
textarea::placeholder { color: #9b858d; }
#send { background: linear-gradient(135deg, #842342, #c45375); }
.notice { color: #89747c; }

.media-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.media-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid #e3d2d8;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(91, 31, 52, .1);
}
.media-card img,
.media-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  object-fit: cover;
  background: #f2e9ec;
}
.media-card figcaption {
  padding: 10px 12px;
  color: #543841;
  font-size: .86rem;
  line-height: 1.4;
}
.media-video-link {
  display: grid;
  min-height: 110px;
  place-items: center;
  color: #8b2447;
  font-weight: 800;
  text-decoration: none;
  background: #fbf3f6;
}

.auth-card {
  background: #fff;
  border-color: #e4d3d9;
  box-shadow: 0 24px 70px rgba(91, 29, 51, .18);
}
.auth-form label { color: #5b4049; }
.auth-form input { border-color: #dfcdd3; background: #fdfafb; color: #3f2b32; }
.auth-switch a { color: #8b2447; }
.flash.error { background: #f9dfe7; color: #842342; }
.flash.success { background: #dff4e9; color: #246046; }
.history-backdrop { background: rgba(54, 20, 32, .42); }

@media (max-width: 650px) {
  .topbar { background: rgba(116, 31, 59, .98); }
  .media-gallery { grid-template-columns: 1fr; }
}