:root {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
  --bg: #111216;
  --panel: #1b1d23;
  --line: #30333d;
  --soft: #a7abb7;
  --text: #f3f4f7;
  --accent: #b78cff;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, textarea, input, select { font: inherit; }
.app { max-width: 1500px; margin: auto; padding: 24px; }
header { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; }
h1 { margin: 0 0 4px; }
p { margin: 0; color: var(--soft); }
.layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, .8fr); gap: 18px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.chat-panel { min-height: 78vh; display: flex; flex-direction: column; }
.messages { flex: 1; overflow: auto; max-height: 65vh; padding-right: 8px; }
.message { margin: 0 0 14px; padding: 13px 15px; border-radius: 12px; line-height: 1.55; white-space: pre-wrap; }
.message.user { background: #252833; margin-left: 8%; }
.message.assistant { background: #181a20; margin-right: 8%; border: 1px solid var(--line); }
.message strong { display: block; color: var(--accent); margin-bottom: 5px; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 14px; }
textarea, input, select { width: 100%; border: 1px solid var(--line); background: #101116; color: var(--text); border-radius: 9px; padding: 10px; }
textarea { min-height: 100px; resize: vertical; }
button { border: 0; border-radius: 9px; background: var(--accent); color: #121016; font-weight: 700; padding: 10px 16px; cursor: pointer; }
aside { display: grid; gap: 18px; align-content: start; }
h2, h3 { margin-top: 0; }
.memory-form { display: grid; gap: 9px; }
.memory-form label { color: var(--soft); font-size: .9rem; }
.memory-list { margin-top: 15px; display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.memory { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 4px; }
.memory span, .memory small, .hint, .status { color: var(--soft); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; background: #101116; border-radius: 8px; padding: 10px; font-size: .78rem; }
summary { cursor: pointer; font-weight: 700; margin-bottom: 10px; }
.status { min-height: 1.4em; padding-top: 8px; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .chat-panel { min-height: auto; } }

.panel-heading { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 12px; }
.character-core-form { display: grid; gap: 12px; margin-top: 12px; }
.character-core-form label, .field-label { color: var(--soft); font-size: .9rem; display: grid; gap: 6px; }
.character-core-form textarea { min-height: 132px; }
.field-help { display: block; font-size: .78rem; line-height: 1.4; color: #858a98; }
.character-core-panel select { margin-top: 3px; }

/* Chat generation feedback */
.typing-indicator {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 0;
  color: var(--soft);
  font-size: .9rem;
}

.typing-indicator[hidden] {
  display: none;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .35;
  animation: typing-pulse 1.15s infinite ease-in-out;
}

.typing-dots i:nth-child(2) {
  animation-delay: .16s;
}

.typing-dots i:nth-child(3) {
  animation-delay: .32s;
}

@keyframes typing-pulse {
  0%, 60%, 100% {
    opacity: .25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dots i {
    animation: none;
    opacity: .7;
  }
}

.message.pending {
  opacity: .82;
}

.message.send-error {
  border-color: #8a4d59;
}

.composer button:disabled {
  cursor: wait;
  opacity: .7;
}