:root {
  --bg: #e2e2e2;
  --surface: #ececec;
  --surface-2: #f4f4f4;
  --border: #d0d0d0;
  --border-2: #bdbdbd;
  --text: #222;
  --text-dim: #777;
  --accent: #d6d6d6;
  --accent-hover: #c2c2c2;
  --textarea-color: #222;
  --track: #bfbfbf;
  --action: #1a6df0;
  --action-hover: #155bd0;
  --action-icon: #ffffff;
}

html.dark {
  --bg: #121212;
  --surface: #1a1a1a;
  --surface-2: #222;
  --border: #2e2e2e;
  --border-2: #333;
  --text: #d4d4d4;
  --text-dim: #777;
  --accent: #3a3a3a;
  --accent-hover: #4a4a4a;
  --textarea-color: #d4d4d4;
  --action: #2f7df6;
  --action-hover: #2568d0;
  --action-icon: #ffffff;
  --track: #333;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.25s, color 0.25s;
}

header {
  flex-shrink: 0;
}

main {
  flex: 1;
  display: flex;
  overflow-y: auto;
}

body:has(.chat-layout) main {
  overflow: hidden;
}

/* Chat Layout */
.chat-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.chat-main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

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

.message-content {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

/* "Load more" button shown above the chat when history is longer than the page */
.load-more-wrap {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 6px 20px 0;
}

.load-more-wrap[hidden] {
  display: none;
}

.load-more-btn {
  font-size: 12px;
  padding: 4px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.load-more-btn:hover {
  color: var(--text);
  border-color: var(--action);
}

.load-more-wrap.loading .load-more-btn {
  opacity: 0.5;
  pointer-events: none;
}

.message {
  max-width: 80%;
  line-height: 1.5;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}

/* The visible bubble. Edit/delete actions are OUTSIDE of it (a sibling),
   hovering anywhere on the row reveals them. */
.message-bubble {
  flex: 0 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 12px;
  word-wrap: break-word;
}

.user-message {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.user-message .message-content {
  text-align: right;
}

.user-message .message-bubble {
  background-color: var(--accent);
  color: var(--text);
  border-bottom-right-radius: 4px;
}

.ai-message {
  align-self: flex-start;
}

.ai-message .message-bubble {
  background-color: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.system-message {
  align-self: center;
  background-color: transparent;
  color: var(--text-dim);
  font-style: italic;
  max-width: 100%;
}

.message.ai-error .message-content {
  color: var(--text-dim);
  font-style: italic;
}

.message.thinking .message-content {
  color: var(--text-dim);
  font-style: italic;
}

/* Typing indicator: three dots that fill in */
.typing-dots span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: currentColor;
  animation: typing-dot 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

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

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

@keyframes typing-dot {
  0%,
  60%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Message action buttons (edit / delete) — overlaid on the bubble corner,
   taken OUT of the flex row flow entirely. The actions never reserve a lane
   and never influence the bubble's width/height, so hovering the buttons
   can never rewrap or shift the message text. */
.message-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4.8px;
  visibility: hidden;
}

.user-message .message-actions {
  left: 0;
  right: auto;
}

.message:hover .message-actions {
  visibility: visible;
}

.stopped-icon {
  display: block;
  color: var(--text-dim);
  opacity: 0.6;
}

/* Locked message (outside the WorldMovesCap edit/delete window): the actions
   lane stays in the DOM — the "editing world…" indicator is appended to it —
   but the Edit/Delete buttons are hidden, so only the newest messages can be
   corrected. site.js keeps the class in sync as the history changes. */
.message.msg-locked .msg-action {
  display: none;
}

.msg-action {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0.5;
}

.message:hover .msg-action {
  opacity: 1;
}

.msg-action svg {
  width: 14px;
  height: 14px;
}

.msg-action:hover {
  background: var(--accent);
  color: var(--text);
  border-color: var(--border-2);
  opacity: 1;
}

.message-content.editing {
  outline: 2px dashed var(--action);
  outline-offset: 2px;
  border-radius: 8px;
  background-color: rgba(42, 122, 255, 0.08);
  cursor: text;
  min-height: 1.5em;
}

.world-fix-indicator {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  animation: thinking-pulse 1.3s ease-in-out infinite;
}

/* "editing world…"/"editing user world…" indicator sits in the actions
   column, under the Delete button. The column itself is visibility-hidden
   until hover, so the indicator re-enables visibility explicitly. It is
   absolutely positioned so a long label never widens the actions lane.
   It grows RIGHTWARD from the icons (left-aligned), so on AI messages it
   never overlaps the bubble text; user messages keep the mirrored
   right-anchored layout because their actions column sits to the LEFT
   of the (right-aligned) bubble. */
.message-actions .world-fix-indicator {
  position: absolute;
  top: 100%;
  left: 0;
  visibility: visible;
  margin-top: 2px;
  white-space: nowrap;
}

.user-message .message-actions .world-fix-indicator {
  left: auto;
  right: 0;
}

@keyframes thinking-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

/* "Updating world state…" banner — mirrors the dynamically-injected one
   from site.js so the WorldState page shows the same fixed position
   indicator while a correction/reconciliation is in flight. */
#worldFixBanner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(20, 20, 24, .85);
  color: #fff;
  font-size: 13px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  pointer-events: none;
}
#worldFixBanner.show {
  display: flex !important;
}
.world-fix-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  animation: worldFixSpin .8s linear infinite;
}
@keyframes worldFixSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Sidebar */
.chat-sidebar {
  width: 300px;
  background-color: var(--surface);
  border-left: 1px solid var(--border);
  padding: 20px 20px 76px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.sidebar-fields {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-field {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.sidebar-field .form-control {
  flex: 1;
  background-color: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--textarea-color);
  border-radius: 8px;
  font-size: 0.9rem;
  resize: none;
  min-height: 120px;
}

.sidebar-field .form-control:focus {
  background-color: var(--surface-2);
  border-color: var(--text-dim);
  color: var(--textarea-color);
  box-shadow: 0 0 0 0.15rem rgba(120, 120, 120, 0.2);
}

.btn-sidebar {
  background-color: var(--accent);
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 16px;
  transition: background-color 0.2s;
}

.btn-sidebar:hover {
  background-color: var(--accent-hover);
}

/* Theme toggle. Icon and label are switched by pure CSS from html.dark,
   which the inline <head> script sets before the first paint — the button
   is always rendered in the correct state, no flip on page navigation. */
.theme-icon-sun,
.theme-label-dark {
  display: inline;
}

.theme-icon-moon,
.theme-label-light {
  display: none;
}

html.dark .theme-icon-sun,
html.dark .theme-label-dark {
  display: none;
}

html.dark .theme-icon-moon,
html.dark .theme-label-light {
  display: inline;
}

.theme-icon {
  font-size: 1.05rem;
  line-height: 1;
  margin-right: 5px;
}

/* Input Area */
.chat-input-area {
  flex-shrink: 0;
  padding: 16px 20px;
  background-color: var(--surface);
  border-top: 1px solid var(--border);
}

.chat-input-wrapper {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 100%;
  margin: 0 auto;
}

.chat-input-wrapper textarea {
  flex: 1;
  background-color: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--textarea-color);
  border-radius: 12px;
  padding: 16px 20px;
  resize: none;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 56px;
  max-height: 160px;
  overflow-y: auto;
}

.chat-input-wrapper textarea:focus {
  background-color: var(--surface-2);
  border-color: var(--text-dim);
  color: var(--textarea-color);
  box-shadow: 0 0 0 0.15rem rgba(120, 120, 120, 0.2);
}

.send-btn {
  width: 52px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--action-icon);
  background-color: var(--action);
  border: 1px solid var(--action);
  transition: background-color 0.2s, opacity 0.2s;
}

.send-btn:hover:not(:disabled) {
  background-color: var(--action-hover);
  border-color: var(--action-hover);
}

.send-btn:disabled {
  color: var(--text-dim);
  background-color: var(--accent);
  border-color: var(--border-2);
  opacity: 0.5;
}

.send-btn svg {
  stroke: currentColor;
}

.send-btn.story-btn {
  width: auto;
  padding: 0 16px;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Stop button — fixed at the right side of the message area, always visible */
.chat-stop {
  position: absolute;
  bottom: 16px;
  right: 20px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.stop-btn {
  width: 52px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  border: 1px solid var(--border-2);
  color: var(--text);
  opacity: 0.55;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.stop-btn:hover:disabled {
  opacity: 0.9;
}

.stop-btn.streaming {
  background-color: #d9433d;
  border-color: #d9433d;
  color: #ffffff;
  opacity: 1;
}

.stop-btn.streaming:hover {
  background-color: #b9342e;
  border-color: #b9342e;
}

.theme-btn {
  color: var(--text);
  border: 1px solid var(--border-2);
  background-color: var(--accent);
  white-space: nowrap;
}

.theme-btn:hover {
  color: var(--text);
  background-color: var(--accent-hover);
}

.world-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1030;
  border-radius: 50px;
  padding: 10px 18px;
  background-color: var(--accent);
  border: 1px solid var(--border-2);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.world-btn:hover {
  background-color: var(--accent-hover);
  color: var(--text);
}

.world-entity {
  margin-bottom: 12px;
  padding: 10px 12px;
  background-color: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
}

.world-entity .badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}

.btn-clear {
  background: transparent;
  border: 1px solid rgba(196, 99, 91, 0.55);
  color: #c4635b;
  border-radius: 8px;
  padding: 9px 20px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-clear:hover {
  background: rgba(196, 99, 91, 0.12);
  border-color: #c4635b;
  color: #d47a72;
}

.settings-toast {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-left: 4px solid #4caf50;
  color: var(--text);
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-weight: 600;
}

.settings-clear-row {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* Dual range slider */
.range-field {
  position: relative;
  height: 34px;
  margin-bottom: 4px;
}

.range-field::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 8px;
  border-radius: 4px;
  background: var(--track);
}

.range-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}

.range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
}

.range-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  cursor: pointer;
  margin-top: -5px;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--text-dim);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.range-field input[type="range"]::-moz-range-track {
  height: 8px;
  background: transparent;
}

.range-field input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  cursor: pointer;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  border: 2px solid var(--surface);
}

html:not(.dark) .range-field input[type="range"]::-webkit-slider-thumb {
  background: #4a4a4a;
  border: 2px solid #ffffff;
}

html:not(.dark) .range-field input[type="range"]::-moz-range-thumb {
  background: #4a4a4a;
  border: 2px solid #ffffff;
}

.range-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.range-limits {
  display: flex;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Navbar */
.navbar {
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

.navbar-brand {
  color: var(--text) !important;
  font-weight: 700;
}

.nav-link {
  color: var(--text) !important;
}

.nav-link:hover {
  color: var(--text) !important;
  opacity: 0.7;
}

.navbar .nav-link.active {
  opacity: 1;
  font-weight: 600;
  color: var(--action) !important;
  border-bottom: 2px solid var(--action);
}

/* Secondary, muted nav links (Help) */
.navbar .nav-link-muted {
  opacity: 0.55;
}

.navbar .nav-link-muted:hover {
  opacity: 0.85;
}

.navbar .nav-link-muted.active {
  opacity: 1;
  font-weight: 600;
  color: var(--text) !important;
}

/* Help & Contact page */
.help-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.help-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin: 0 0 8px;
}

.help-section {
  margin-top: 28px;
}

.help-section-title {
  font-size: 1.2rem;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.help-item {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.help-item summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 16px;
  font-size: 1.02rem;
  font-weight: 600;
  position: relative;
  padding-right: 44px;
  user-select: none;
}

.help-item summary::-webkit-details-marker {
  display: none;
}

/* Chevron indicator */
.help-item summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.15s ease;
  opacity: 0.6;
}

.help-item[open] summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.help-item summary:hover {
  opacity: 0.85;
}

.help-item p {
  margin: 0;
  padding: 0 16px 14px;
  line-height: 1.6;
  opacity: 0.9;
}

.help-mail {
  color: var(--action);
  text-decoration: none;
  font-weight: 600;
}

.help-mail:hover {
  text-decoration: underline;
}

/* Roadmap list */
.help-plans ul {
  margin: 0;
  padding-left: 20px;
}

.help-plans li {
  margin: 0 0 12px;
  line-height: 1.6;
}

.help-plans li:last-child {
  margin-bottom: 0;
}

/* Help text list (inside FAQ answers) */
.help-item ul {
  margin: 0 0 14px;
  padding: 0 36px 0 50px;
}

.help-item li {
  margin: 0 0 8px;
  line-height: 1.6;
}

.help-item li:last-child {
  margin-bottom: 0;
}

/* Boxes whose first element is a plain paragraph or list (no summary header,
   e.g. Contact, Our plans and every Privacy section) would otherwise touch
   the top edge: `.help-item p` only pads the bottom. Mirror the 14px bottom
   spacing at the top. */
.help-item > p:first-child,
.help-item > ul:first-child {
  padding-top: 14px;
}

/* Scrollbar */
.chat-messages::-webkit-scrollbar,
.chat-sidebar::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.chat-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb,
.chat-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--border-2);
  border-radius: 3px;
}

/* Footer - hidden */
.footer {
  display: none;
}

/* Settings page */
.settings-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 20px;
}

.settings-title {
  margin-bottom: 24px;
  font-weight: 700;
}

.settings-field {
  margin-bottom: 20px;
}

/* One visual block = one setting plus everything that belongs to it (its
   help text, its collapsible footnote, its checkbox + hint). The blocks
   themselves are separated by a clear gap, while the pieces INSIDE one
   block stay tight — a hint that floats halfway down the page no longer
   looks like it belongs to the field above it. */
.settings-group {
  margin-bottom: 28px;
}

.settings-group > .settings-field:last-child {
  margin-bottom: 0;
}

/* The world-AI footnote belongs to "Remember every": hug it instead of
   letting the default .settings-instructions margins open a hole. */
.settings-group .settings-instructions {
  margin: 10px 0 0;
}

.settings-section-title {
  margin: 28px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

.settings-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.settings-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-field .form-control {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background-color: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--textarea-color);
  border-radius: 8px;
  padding: 10px 14px;
}

.settings-field select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.settings-field .form-control:focus {
  background-color: var(--surface-2);
  border-color: var(--text-dim);
  color: var(--textarea-color);
  box-shadow: 0 0 0 0.15rem rgba(120, 120, 120, 0.2);
}

.settings-field .form-control:disabled {
  opacity: 0.5;
}

.settings-model-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.settings-model-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-model-row .btn-sidebar {
  flex: 0 0 auto;
  white-space: nowrap;
}

.horde-picker {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.horde-picker .form-control {
  width: 100%;
  cursor: pointer;
}

.horde-picker-toggle {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horde-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
  background-color: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  padding: 6px 0;
}

.horde-picker-panel .horde-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 0;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9rem;
  color: var(--text);
  border-left: 3px solid transparent;
}

.horde-picker-panel .horde-picker-item:hover {
  background-color: rgba(128, 128, 128, 0.13);
}

.horde-picker-panel .horde-picker-item.is-auto {
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 4px;
  padding-bottom: 8px;
}

.horde-picker-panel .horde-picker-item input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.horde-picker-panel .horde-picker-item span {
  overflow-wrap: anywhere;
}

.settings-option-desc {
  min-width: 0;
}

.settings-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.settings-check-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.settings-check-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
}

.settings-current {
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  font-size: 0.85rem;
}

.settings-help {
  margin: 6px 0 0;
  font-size: 0.85rem;
}

.settings-horde-help {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-2);
  border-left: 4px solid var(--accent-hover);
  border-radius: 6px;
  background-color: var(--surface-2);
}

.settings-horde-help ol {
  margin: 8px 0 0;
  padding-left: 20px;
}

.settings-horde-help ol ol {
  margin-top: 4px;
}

.settings-horde-help li {
  margin: 4px 0;
}

.settings-instructions {
  margin: 14px 0;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background-color: var(--surface);
}

.settings-instructions summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  user-select: none;
}

.settings-instructions[open] summary {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.settings-instructions > :not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}

.settings-instructions .settings-alt {
  margin-top: 10px;
}

/* Smoothly expand/collapse the AI-source-dependent sections so switching
   "AI source" on the Settings page doesn't make the layout jump. */
#endpointField,
#apiKeyField,
#hordeHint,
#aiEndpointHelp,
#hordeModelHelp {
  display: block;
  max-height: 640px;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.28s ease, margin 0.28s ease, padding 0.28s ease, border-width 0.28s ease;
}

#endpointField.d-none,
#apiKeyField.d-none,
#hordeHint.d-none,
#aiEndpointHelp.d-none,
#hordeModelHelp.d-none {
  display: block !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0;
  opacity: 0;
}

.settings-option-desc {
  display: block;
}

.settings-option-desc.d-none {
  display: none;
}

/* ---- provider slider ---- */
.provider-slider {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface-2);
}

.provider-slider-track {
  display: flex;
  transition: transform 0.3s ease;
}

.provider-slide {
  flex: 0 0 100%;
  padding: 14px 16px;
  box-sizing: border-box;
  overflow: hidden;
}

.provider-slide-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
}

.provider-slide-icon {
  font-size: 1rem;
  line-height: 1;
}

.provider-slide-badge {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--action);
  color: #fff;
}

.provider-steps {
  margin: 0;
  padding-left: 20px;
}

.provider-steps li {
  margin-bottom: 4px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.provider-code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg);
  font-size: 0.78rem;
  word-break: break-all;
}

.provider-note {
  margin-top: 8px !important;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.provider-slider-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 10px;
}

.provider-arrow {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.provider-arrow:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--accent-hover);
}

.provider-arrow:active {
  transform: scale(0.94);
}

.provider-slider-nav .provider-dot {
  margin: 0 4px;
}

.provider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: var(--bg);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
}

.provider-dot.active {
  background: var(--action);
  border-color: var(--action);
}

.settings-unit {
  align-self: center;
  color: var(--text-dim);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* "optional" marker on a field whose blank value is a valid, common choice.
   Sits after the label text rather than on its own line, so the optional fields
   do not cost an extra row each. */
.settings-optional {
  color: var(--text-dim);
  font-size: 0.85em;
  font-weight: 400;
  margin-left: 6px;
}

.settings-save {
  padding: 11px 36px;
  background-color: var(--text);
  border: 1px solid var(--text);
  color: var(--bg);
  font-weight: 600;
}

.settings-save:hover {
  background-color: var(--text-dim);
  border-color: var(--text-dim);
  color: var(--bg);
}

.world-save-btn {
  margin-left: auto;
  background-color: #1f9d55;
  border-color: #1f9d55;
  color: #fff;
}

.world-save-btn:hover,
.world-save-btn:focus-visible {
  background-color: #178a48;
  border-color: #178a48;
  color: #fff;
}

/* World state page */
.page {
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
}

.world-page {
  max-width: 1400px;
  width: 100%;
  padding: 32px 24px;
}

.world-page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.world-page-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.world-textarea {
  background-color: var(--surface-2);
  border-color: var(--border-2);
  color: var(--textarea-color);
}

.world-textarea:focus {
  background-color: var(--surface-2);
  border-color: var(--text-dim);
  color: var(--textarea-color);
  box-shadow: 0 0 0 0.15rem rgba(120, 120, 120, 0.2);
}

.world-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.world-row .settings-field {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  .world-row {
    flex-direction: column;
    gap: 0;
  }
}

#entitiesPanel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  align-items: stretch;
}

#entitiesPanel > p {
  grid-column: 1 / -1;
}

.error-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.entity-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.entity-card-head {
  display: flex;
  gap: 8px;
  align-items: center;
}

.entity-field-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #888);
  margin: 0 0 4px 2px;
}

.entity-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.entity-card-head .entity-field.entity-type-field {
  flex: 0 0 150px;
}

.entity-card-head > .entity-field:first-child {
  flex: 2;
}

.entity-meta-row .entity-field {
  flex: 1;
}

.entity-card-head .entity-field .entity-type {
  width: 100%;
}

.entity-card-head .entity-field .entity-name {
  flex: 1;
}

.entity-remove {
  align-self: flex-end;
  padding: 6px 12px;
  line-height: 1;
}

.entity-desc {
  margin-top: 12px;
  min-height: 110px;
  resize: vertical;
  background-color: var(--surface-2);
  border-color: var(--border-2);
  color: var(--textarea-color);
}

.entity-meta-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.entity-meta-row .form-control {
  flex: 1;
  min-width: 0;
}

.entity-relations {
  margin-top: 8px;
  min-height: 60px;
  resize: vertical;
  background-color: var(--surface-2);
  border-color: var(--border-2);
  color: var(--textarea-color);
}

.world-meta {
  margin-bottom: 16px;
}

.settings-alert {
  background-color: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: 8px;
}

/* General input theme on non-chat pages */
body:not(:has(.chat-layout)) .form-control {
  background-color: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--textarea-color);
}

body:not(:has(.chat-layout)) .form-control:focus {
  background-color: var(--surface-2);
  border-color: var(--text-dim);
  color: var(--textarea-color);
  box-shadow: 0 0 0 0.15rem rgba(120, 120, 120, 0.2);
}

/* Auth pages */
.settings-error {
  margin-bottom: 16px;
}

.settings-alt {
  margin-top: 20px;
  color: var(--text-dim);
}

.settings-alt a {
  color: var(--text);
  text-decoration: underline;
}

/* .settings-alt sits later in this file and, at the same specificity, used to
   win over .settings-help's margin — so every "hint" was pushed 20px away from
   the control it explains and drifted toward the next block. Both classes on one
   element means "explain this control", which wins the tie explicitly. */
.settings-alt.settings-help {
  margin-top: 6px;
}

/* Agreement line above the Register submit button */
.settings-consent {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: var(--text-dim);
}

.settings-consent a {
  color: var(--text);
  text-decoration: underline;
}

/* Show/hide password toggle (Login, Register) */
.password-wrap {
  position: relative;
}

.password-wrap .form-control {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--text);
}

.password-toggle:focus-visible {
  outline: 1px solid var(--text-dim);
  outline-offset: 1px;
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

.password-toggle .icon-eye-off {
  display: none;
}

.password-toggle.is-visible .icon-eye {
  display: none;
}

.password-toggle.is-visible .icon-eye-off {
  display: block;
}

.navbar-user {
  opacity: 0.7;
}

.navbar-logout {
  padding: 0;
  text-decoration: none;
}

.navbar-logout:hover {
  text-decoration: none;
  opacity: 0.7;
}

/* Guest hero (Index, unauthenticated only) */
.guest-hero {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px 24px;
}

.guest-hero-inner h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: 0 0 14px;
  line-height: 1.2;
}

.guest-hero-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 18px;
}

.guest-hero-features {
  margin: 0 0 22px;
  padding-left: 20px;
  line-height: 1.6;
}

.guest-hero-features li + li {
  margin-top: 8px;
}

.guest-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.guest-hero-cta {
  text-decoration: none;
  padding: 10px 22px;
  font-size: 1rem;
}

.guest-hero-dismiss {
  padding: 10px 22px;
  font-size: 1rem;
}

.guest-hero-note {
  font-size: 0.9rem;
  opacity: 0.75;
  margin: 0;
}

.guest-hero-note a {
  text-decoration: underline;
}

.guest-hero.is-hidden {
  display: none;
}