* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: oklch(0.16 0.02 285);
  --bg-raised: oklch(0.21 0.025 285);
  --bg-input: oklch(0.24 0.03 285);
  --text: oklch(0.92 0.01 285);
  --text-dim: oklch(0.68 0.02 285);
  --violet: oklch(0.72 0.18 300);
  --violet-dim: oklch(0.45 0.12 300);
  --amber: oklch(0.78 0.14 75);
  --rose: oklch(0.7 0.16 10);
  --border: oklch(0.32 0.03 285);
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background-image: radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.28 0.08 300 / 0.35), transparent);
}

.app {
  max-width: 780px;
  margin: 0 auto;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px 14px;
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: baseline; gap: 10px; }

.rune {
  width: 24px;
  height: 24px;
  align-self: center;
  color: var(--violet);
  filter: drop-shadow(0 0 6px oklch(0.72 0.18 300 / 0.8));
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 4px oklch(0.72 0.18 300 / 0.5)); }
  50% { filter: drop-shadow(0 0 10px oklch(0.72 0.18 300 / 0.95)); }
}

.title { font-size: 19px; font-weight: 650; letter-spacing: 0.02em; }
.subtitle { font-size: 12px; color: var(--text-dim); font-style: italic; }

.identity { display: flex; align-items: center; gap: 10px; }

.badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid;
}
.badge.guest { color: var(--amber); border-color: oklch(0.78 0.14 75 / 0.4); }
.badge.user  { color: var(--violet); border-color: oklch(0.72 0.18 300 / 0.45); box-shadow: 0 0 12px oklch(0.72 0.18 300 / 0.25); }

.auth-btn {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-btn:hover { border-color: var(--violet-dim); box-shadow: 0 0 14px oklch(0.72 0.18 300 / 0.25); }

.messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 4px;
}

.msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 14px;
  line-height: 1.5;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.msg.user {
  align-self: flex-end;
  background: oklch(0.34 0.09 300 / 0.55);
  border: 1px solid oklch(0.45 0.12 300 / 0.5);
  border-bottom-right-radius: 4px;
}

.msg.agent {
  align-self: flex-start;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.msg.agent.thinking::after {
  content: "▍";
  color: var(--violet);
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.msg.system {
  align-self: center;
  max-width: 92%;
  text-align: center;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  font-size: 13.5px;
}
.msg.system .hint { margin-top: 6px; font-size: 12.5px; font-style: italic; }
.msg.system.error { border-color: oklch(0.7 0.16 10 / 0.5); color: var(--rose); }

.recall {
  align-self: flex-start;
  max-width: 85%;
  font-size: 12px;
  color: var(--text-dim);
}
.recall summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 99px;
  user-select: none;
}
.recall summary::before { content: "◆"; color: var(--rose); font-size: 9px; }
.recall[open] summary { border-color: oklch(0.7 0.16 10 / 0.4); }
.recall ul { margin: 8px 0 0 14px; display: flex; flex-direction: column; gap: 5px; }
.recall li { line-height: 1.4; }

.composer {
  display: flex;
  gap: 10px;
  padding: 12px 4px 18px;
  border-top: 1px solid var(--border);
}

.composer input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.composer input:focus { border-color: var(--violet-dim); box-shadow: 0 0 16px oklch(0.72 0.18 300 / 0.2); }

.composer button {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.34 0.09 300 / 0.6);
  border: 1px solid oklch(0.45 0.12 300 / 0.5);
  border-radius: 10px;
  color: var(--violet);
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.composer button svg { width: 20px; height: 20px; }
.composer button:hover:not(:disabled) { box-shadow: 0 0 16px oklch(0.72 0.18 300 / 0.4); }
.composer button:disabled { opacity: 0.4; cursor: default; }