:root {
  /* Neon Nightcity palette */
  --bg: #0a0a18;
  --surface: #12122a;
  --surface-hover: #1a2a4a;
  --accent: #5af;
  --accent-glow: rgba(85, 170, 255, 0.3);
  --text: #9cf;
  --text-bright: #f8f8ff;
  --text-dim: #6a8aba;
  --border: #1a3a5a;
  --danger: #f48771;
  --success: #6fbf8f;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size: clamp(14px, 4vw, 16px);
  --font-size-sm: clamp(11px, 3vw, 13px);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;

  /* Radius */
  --radius: 10px;
  --radius-sm: 6px;
}

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

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

#app {
  /* Use the JS-measured visible viewport height (--app-height) when available.
     Falls back to svh (small viewport, never behind chrome) then dvh then vh.
     The embedded browser's chrome eats into the bottom, so viewport units
     alone report more than is actually visible — the JS value is the truth. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-height, 100svh);
  height: var(--app-height, 100dvh);
  height: var(--app-height, 100vh);
  display: flex;
  flex-direction: column;
}

/* Screen container fills the space below the tab bar and stacks screens. */
#screenContainer {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Tab bar */
.tab-bar {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0;
  flex-shrink: 0;
}

.tab {
  flex: 1;
  padding: var(--space-sm) var(--space-xs);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--font-size-sm);
  font-weight: 600;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: var(--accent);
  background: var(--bg);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}

/* Screen container */
.screen {
  flex: 1;
  overflow-y: auto;
  display: none;
}

.screen.active {
  display: flex;
  flex-direction: column;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Focus */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Touch */
* {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Inputs */
select, input[type="text"], input[type="password"] {
  outline: none;
  transition: border-color 0.2s;
}

select:focus, input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px var(--accent-glow);
}

/* Story screen — chat bubbles */
.story-screen {
  flex-direction: column;
}

.message-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.error-banner {
  display: none;
  padding: var(--space-sm) var(--space-md);
  background: #2a0f0f;
  color: var(--danger);
  font-size: var(--font-size-sm);
}

/* Input bar — pinned to bottom. Bottom padding absorbs the manual inset
   (--app-bottom-inset, the Screen-fit trim) plus the phone's home-indicator
   safe area, so the Send button never sits behind browser chrome or the home
   indicator. This padding IS the inset zone — no separate strip element. */
.story-input-bar {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  padding-bottom: max(var(--space-md), calc(var(--app-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px)));
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.story-input { flex: 1; background: var(--bg); color: var(--text-bright); }
.story-send { box-shadow: 0 0 12px var(--accent-glow); }

#messageList {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Typing indicator */
.typing-indicator {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  color: var(--text-dim);
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* --- Reusable form pieces ---------------------------------------------- */

.settings-screen {
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + var(--app-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.settings-screen h2 {
  color: var(--text-bright);
  font-size: var(--font-size);
  margin: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.field label {
  color: var(--text-dim);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.hint {
  color: var(--text-dim);
  font-size: var(--font-size-sm);
  font-weight: 400;
  opacity: 0.8;
}

.input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-size: var(--font-size);
  font-family: inherit;
}

/* Row layout — input + button side by side */
.row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}
.row .input { flex: 1; min-width: 0; }

/* Buttons */
.btn {
  background: var(--accent);
  color: #0a0a18;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn:hover { box-shadow: 0 0 12px var(--accent-glow); }
.btn:active { opacity: 0.8; }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-hover); box-shadow: none; color: var(--text-bright); }

/* Status lines */
.save-status { color: var(--success); font-size: var(--font-size-sm); min-height: 1em; }
.conn-ok { color: var(--success); font-size: var(--font-size-sm); word-break: break-word; }
.conn-err { color: var(--danger); font-size: var(--font-size-sm); word-break: break-word; }

/* --- Model picker ------------------------------------------------------ */

.model-picker {
  display: none;
  flex-direction: column;
  gap: var(--space-sm);
}
.model-picker.active { display: flex; }

.model-search { font-size: var(--font-size-sm); }

.model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.model-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
}
.model-item:last-child { border-bottom: none; }
.model-item:hover { background: var(--surface-hover); color: var(--text-bright); }
.model-item.empty {
  color: var(--text-dim);
  font-style: italic;
  cursor: default;
}
.model-item.empty:hover { background: transparent; }

/* --- Modal dialogs ----------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 15, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
  animation: modal-fade 0.12s ease-out;
}

.modal-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 0 40px rgba(85, 170, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.6);
  padding: var(--space-lg);
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.modal-title {
  color: var(--text-bright);
  font-size: var(--font-size);
  margin: 0;
}

.modal-label {
  color: var(--text-dim);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.modal-input { width: 100%; }

.modal-message {
  color: var(--text);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: 0;
}

.modal-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.btn-danger {
  background: var(--danger);
  color: #1a0808;
}
.btn-danger:hover { box-shadow: 0 0 12px rgba(244, 135, 113, 0.4); }

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Textarea (matches .input) ---------------------------------------- */
.textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-size: var(--font-size);
  font-family: inherit;
  resize: vertical;
  min-height: 4em;
  outline: none;
  transition: border-color 0.2s;
}
.textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px var(--accent-glow);
}

/* --- Hidden file inputs ------------------------------------------------ */
.file-input-hidden { display: none; }

/* --- Small / icon buttons ---------------------------------------------- */
.btn-sm { padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-sm); }
.btn-icon { padding: var(--space-xs) var(--space-sm); }

/* --- Active mark (✓ on selected card / background) --------------------- */
.active-mark {
  color: var(--success);
  font-weight: 700;
  margin-left: var(--space-xs);
}

/* --- Tag chips --------------------------------------------------------- */
.tag-chip {
  display: inline-block;
  background: var(--surface-hover);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px var(--space-sm);
  font-size: var(--font-size-sm);
  margin-right: var(--space-xs);
  margin-bottom: 2px;
}

/* --- Character avatars ------------------------------------------------- */
.char-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
}
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
.char-avatar-placeholder {
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  background: var(--surface-hover);
}
.char-avatar-lg { width: 72px; height: 72px; font-size: 28px; }

/* --- Characters screen ------------------------------------------------- */
.characters-screen {
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + var(--app-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.characters-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.characters-header h2 {
  color: var(--text-bright);
  font-size: var(--font-size);
  margin: 0;
}

.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

.char-card {
  display: flex;
  gap: var(--space-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.char-card:hover { background: var(--surface-hover); border-color: var(--accent); }
.char-card.active { border-color: var(--success); box-shadow: 0 0 12px rgba(111, 191, 143, 0.25); }

.char-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.char-card-name {
  color: var(--text-bright);
  font-weight: 700;
  font-size: var(--font-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.char-card-tags { display: flex; flex-wrap: wrap; }
.char-card-actions { display: flex; gap: var(--space-xs); margin-top: auto; }

.empty-state {
  display: none;
  color: var(--text-dim);
  font-size: var(--font-size-sm);
  padding: var(--space-lg);
  text-align: center;
  line-height: 1.6;
}

/* --- Card editor ------------------------------------------------------- */
.card-editor {
  padding: var(--space-md);
  padding-bottom: calc(var(--space-md) + var(--app-bottom-inset, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.card-editor-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.card-editor-header h2 {
  flex: 1;
  color: var(--text-bright);
  font-size: var(--font-size);
  margin: 0;
}
.avatar-field .avatar-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.alt-greetings { display: flex; flex-direction: column; gap: var(--space-sm); }
.alt-greeting-row { display: flex; gap: var(--space-sm); align-items: stretch; }
.alt-greeting-row .textarea { flex: 1; }

/* --- Story background + portrait --------------------------------------- */
.story-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.story-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 24, 0.55);
  z-index: 0;
  pointer-events: none;
}
.story-screen { position: relative; }
.message-list { position: relative; z-index: 1; }

.story-portrait {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.story-portrait-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.story-portrait-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-portrait-placeholder { color: var(--accent); font-weight: 700; font-size: var(--font-size-sm); }
.story-portrait-name {
  color: var(--text-bright);
  font-size: var(--font-size-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Background picker panel ------------------------------------------- */
.bg-picker { max-width: 420px; }
.bg-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 280px;
  overflow-y: auto;
}
.bg-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
}
.bg-item:hover { border-color: var(--accent); }
.bg-item.active { border-color: var(--success); }
.bg-thumb {
  width: 48px;
  height: 32px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-hover);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.bg-item-name { flex: 1; min-width: 0; color: var(--text); font-size: var(--font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }