:root {
  color-scheme: light;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  color: #29231e;
  background: #f8f5ed;
}

* { box-sizing: border-box; }

html,
body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #f8f5ed;
}

button,
textarea { font: inherit; }

button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

button:disabled { cursor: wait; opacity: 0.62; }

.page {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
}

.workspace {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  width: 100%;
  height: auto;
  min-height: 0;
}

.sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  min-height: 0;
  padding: 26px 14px 16px;
  border-right: 1px solid rgb(83 68 51 / 10%);
  background: #eee8dc;
}

.sidebar-brand { padding: 0 10px 26px; }
.brand-title {
  margin: 0;
  color: #8d3d2b;
  font-family: system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sidebar-header { display: grid; gap: 24px; }
.sidebar h2 {
  margin: 0 10px;
  color: #766b5d;
  font-family: system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

#new-session {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgb(83 68 51 / 16%);
  color: #443a31;
  background: rgb(255 255 255 / 48%);
  text-align: left;
}

#new-session:hover { background: rgb(255 255 255 / 76%); }

#sessions-status { padding: 8px 10px 2px; }

.session-list {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 0;
  overflow-y: auto;
  padding: 5px 2px 20px;
  scrollbar-width: thin;
}

.session-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 42px;
  border-radius: 8px;
}

.session-row:hover { background: rgb(255 255 255 / 48%); }
.session-row.active { background: #e1d6c5; }

.session-item {
  min-width: 0;
  overflow: hidden;
  padding: 10px 8px 10px 12px;
  color: #493f35;
  background: transparent;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-menu-button {
  width: 30px;
  height: 30px;
  padding: 0 0 5px;
  color: #685e51;
  background: transparent;
  font: 1.05rem/1 system-ui, sans-serif;
  opacity: 0;
}

.session-row:hover .session-menu-button,
.session-row.active .session-menu-button,
.session-menu-button[aria-expanded="true"] { opacity: 1; }

.session-menu-button:hover { background: rgb(83 68 51 / 9%); }

.session-menu {
  position: absolute;
  z-index: 10;
  top: 36px;
  right: 4px;
  display: grid;
  min-width: 112px;
  padding: 5px;
  border: 1px solid rgb(83 68 51 / 13%);
  border-radius: 9px;
  background: #fffdf8;
  box-shadow: 0 10px 28px rgb(54 43 31 / 16%);
}

.session-menu[hidden] { display: none; }
.session-menu button {
  padding: 8px 10px;
  color: #493f35;
  background: transparent;
  text-align: left;
}
.session-menu button:hover { background: #f1eadf; }
.session-menu button.danger { color: #a33f32; }

.chat {
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background: #fcfaf5;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-bottom: 1px solid rgb(83 68 51 / 8%);
}

.chat-header h2 {
  overflow: hidden;
  margin: 0;
  color: #5f554a;
  font: 500 0.9rem system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages {
  display: grid;
  align-content: start;
  gap: 30px;
  min-height: 0;
  overflow-y: auto;
  padding: 42px max(28px, calc((100% - 840px) / 2)) 54px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.message {
  display: grid;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  font-family: system-ui, sans-serif;
}

.message strong {
  color: #6e3427;
  font-size: 0.86rem;
  font-weight: 650;
}

.message p {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.82;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.user { justify-items: end; }
.message.user strong { color: #675e54; }
.message.user p {
  width: fit-content;
  max-width: min(76%, 650px);
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
  background: #ece3d4;
  line-height: 1.65;
}

.message.assistant p { max-width: 100%; }
.message.waiting { color: #776c5e; }
.message-meta {
  display: block;
  margin-top: 10px;
  color: #948a7e;
  font: 0.74rem/1.4 system-ui, sans-serif;
}

.empty-state {
  align-self: center;
  justify-self: center;
  margin-top: min(18vh, 150px);
  color: #665b50;
  text-align: center;
}

.empty-state strong { font-size: 1.55rem; font-weight: 600; letter-spacing: 0.08em; }
.empty-state p { margin: 12px 0 0; color: #8a7e70; font: 1rem system-ui, sans-serif; }

.composer {
  width: min(840px, calc(100% - 56px));
  margin: 0 auto;
  padding: 12px 0 18px;
}

.composer-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border: 1px solid rgb(83 68 51 / 20%);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 22px rgb(63 49 34 / 8%);
}

.composer textarea {
  width: 100%;
  min-height: 48px;
  max-height: 150px;
  padding: 10px 0 4px;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: 1rem/1.55 system-ui, sans-serif;
  resize: vertical;
}

#submit-button {
  min-width: 78px;
  padding: 10px 13px;
  color: #fff;
  background: #8d3d2b;
  font-family: system-ui, sans-serif;
}

#submit-button:hover:not(:disabled) { background: #783225; }
.status { min-height: 1.3em; margin: 0; color: #776c5e; font: 0.78rem/1.4 system-ui, sans-serif; }
.composer .status { padding: 7px 4px 0; }

.site-footer {
  min-width: 0;
  padding: 10px 20px 12px;
  color: #948a7e;
  background: #f8f5ed;
  font: 0.72rem/1.6 system-ui, sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .sidebar { padding-inline: 10px; }
  .messages { padding-inline: 22px; }
  .composer { width: calc(100% - 36px); }
  .message.user p { max-width: 88%; }
}

@media (max-width: 580px) {
  .workspace { grid-template-columns: 168px minmax(0, 1fr); }
  .sidebar-brand { padding-inline: 6px; }
  .brand-title { font-size: 1.05rem; }
  .chat-header { padding-inline: 16px; }
  .messages { padding: 28px 14px 38px; }
  .composer { width: calc(100% - 20px); }
  .composer-box { padding-left: 12px; }
  #submit-button { min-width: auto; }
  .site-footer { padding: 8px 12px 10px; }
}