/* Modern flat design with light/dark mode and responsive layout */
:root {
  --bg: #0e1117;
  --bg-elev: #141924;
  --card: #161b22;
  --muted: #8b949e;
  --text: #e6edf3;
  --border: #30363d;
  --primary: #3da9fc;
  --accent: #2dd4bf;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.2);
  /* Unified nav item height */
  --nav-item-h: 38px;
}

html.theme-light {
/* Gray out inactive (not selected) actor chips */
.actor-chip {
  filter: none;
  opacity: 1;
  transition: opacity .15s ease, filter .15s ease;
}
.actor-chip.inactive {
  opacity: .5;
  filter: grayscale(55%);
}
.actor-chip.active {
  opacity: 1;
  filter: none;
}
/* While waking or writing, keep emphasis regardless of inactive */
.actor-chip.waking,
.actor-chip.writing {
  opacity: 1 !important;
  filter: none !important;
}
  --bg: #f6f7fb;
  --bg-elev: #ffffff;
  --card: #ffffff;
  --muted: #5b6270;
  --text: #0f172a;
  --border: #e5e7eb;
  --primary: #2563eb;
  --accent: #10b981;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* When modal chat is open, prevent underlying page from scrolling */
html.no-scroll, body.no-scroll { overflow: hidden; height: 100%; }

.container { max-width: 1200px; margin: 0 auto; padding: 1rem; }

header.appbar {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg), transparent 0%), color-mix(in srgb, var(--bg), transparent 20%));
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--border);
}
.appbar .container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.appbar-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration: none; color: inherit; }
.brand .logo { width: 28px; height: 28px; background: var(--primary); border-radius: 6px; display:inline-block; box-shadow: var(--shadow); }
.brand .brand-logo { width: 28px; height: 28px; display: inline-block; border-radius: 6px; box-shadow: var(--shadow); object-fit: contain; background: transparent; }
/* Recolor raster logo via CSS filters: white in dark, brand blue in light */
html:not(.theme-light) .brand .brand-logo { filter: brightness(0) invert(1); }
/* Approximate Tailwind indigo-600 (#2563eb) from a black source */
html.theme-light .brand .brand-logo { filter: invert(17%) sepia(78%) saturate(3023%) hue-rotate(214deg) brightness(99%) contrast(93%); }
.brand .title { font-weight: 700; letter-spacing: .2px; }

.theme-toggle { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: .4rem .7rem; cursor: pointer; box-shadow: var(--shadow); }
.theme-toggle:hover { filter: brightness(1.04); }

/* Unified navigation links */
.nav-group { display: inline-flex; align-items: center; gap: .4rem; }
.nav-link { display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--border); background: var(--card); color: var(--text); border-radius: 10px; padding: .4rem .7rem; text-decoration: none; box-shadow: var(--shadow); }
.nav-link:hover { filter: brightness(1.04); }
.nav-icon { line-height: 1; }
.nav-label { line-height: 1; }

/* Active nav item (current page) */
.nav-link.active,
.nav-link[aria-current="page"] {
  outline: 2px solid color-mix(in srgb, var(--primary), transparent 60%);
  background: color-mix(in srgb, var(--card), var(--primary) 10%);
  border-color: color-mix(in srgb, var(--primary), transparent 60%);
}

/* Make all appbar nav items the same height */
.appbar .nav-link,
.appbar .theme-toggle,
.appbar .badge,
.appbar #preload-status-top {
  height: var(--nav-item-h);
  min-height: var(--nav-item-h);
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

/* Make the day/night toggle flat in the header (no border/shadow/background) */
.appbar #theme-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: .35rem;
  padding-right: .35rem;
  border-radius: 8px; /* subtle rounding for focus ring */
}
.appbar #theme-toggle:hover { filter: none; opacity: .85; }
.appbar #theme-toggle:focus { outline: 2px solid color-mix(in srgb, var(--primary), transparent 55%); outline-offset: 2px; }

/* Unify header badge/button heights */
.appbar .theme-toggle, .appbar .badge { padding: .4rem .7rem; border-radius: 10px; display: inline-flex; align-items: center; }
/* Keep explicit top badge rule consistent */
#preload-status-top { padding: .4rem .7rem; border-radius: 10px; display: inline-flex; align-items: center; }

/* Simple stacked form fields */
.form-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .8rem; }
.form-field > label { font-size: .9rem; color: var(--muted); }

.hero {
  position: relative; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card);
  box-shadow: var(--shadow);
}
.hero-bg { position:absolute; inset:0; background: var(--bg-elev); }
.hero-overlay { position: relative; z-index: 1; background: linear-gradient(135deg, color-mix(in srgb, var(--bg), transparent 10%), color-mix(in srgb, var(--bg), transparent 60%)); padding: 1.2rem; display: grid; grid-template-columns: 120px 1fr; gap: 1rem; }
/* Book cover (image): constrain by max-height, keep aspect, no cropping */
/* Make the PNG truly transparent and add a soft drop-shadow that respects alpha */
img.hero-cover {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent !important; /* ensure no checker/pattern background behind transparent areas */
  /* Use drop-shadow so the shadow follows the non-transparent pixels of the cover image */
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.22)) drop-shadow(0 2px 6px rgba(0,0,0,.14));
}
/* Placeholder block when no cover image available */
div.hero-cover { width: 100%; height: 180px; display: block; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev); }
.hero h1 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.8rem); }
.hero p.muted { margin:.2rem 0 0 0; }

.kv { display:grid; grid-template-columns: minmax(120px, 180px) 1fr; gap:.4rem .8rem; }
.kv .label { color: var(--muted); }

.section { margin-top: 1rem; background: var(--card); border:1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.section > .section-header { padding: .9rem 1rem; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.section > .section-content { padding: 1rem; }

/* Pane-styled fieldsets on Chatify */
fieldset.pane { border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem 1rem 1rem; background: var(--card); box-shadow: var(--shadow); margin: .8rem 0; }
fieldset.pane > legend { padding: 0 .4rem; color: var(--muted); font-weight: 600; }
fieldset.pane label { display: inline-flex; align-items: center; gap: .4rem; margin-right: .8rem; margin-bottom: .3rem; }

.grid { display: grid; gap: 1rem; }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Book section two-column layout */
.book-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display:flex; flex-direction: column; box-shadow: var(--shadow); }
.card-media { width:100%; background: var(--bg-elev); display:flex; align-items:center; justify-content:center; }
.card-media img { width: 100%; height: auto; object-fit: contain; display:block; }
.img-cover { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.card-body { padding: .8rem 1rem; display:flex; flex-direction:column; gap:.3rem; }
.card-title { margin:0; font-size: 1rem; }
.card-sub { color: var(--muted); font-size: .9rem; margin:0; }

.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .6rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { text-align: left; color: var(--muted); font-weight: 600; }

.badge { display:inline-block; padding:.2rem .5rem; border:1px solid var(--border); border-radius:.5rem; color: var(--muted); }
.badge.ok { color: var(--ok, #16a34a); border-color: rgba(22,163,74,.4); }
.badge.warn { color: var(--warn, #d97706); border-color: rgba(217,119,6,.35); }
.badge.err { color: var(--err, #dc2626); border-color: rgba(220,38,38,.35); }

/* Small circular status dot for overlays (e.g., chat ready on covers) */
.status-dot { display:inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.7); }
.status-dot.ok { background: var(--ok, #16a34a); }

/* Spicy pepper toggle */
label.pepper-toggle { position: relative; display:inline-flex; align-items:center; justify-content:center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); cursor: pointer; }
label.pepper-toggle input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
label.pepper-toggle .pepper { font-size: 18px; line-height: 1; filter: grayscale(100%); opacity: .45; transition: filter .15s ease, opacity .15s ease, transform .1s ease; transform: translateY(1px); }
label.pepper-toggle input:checked + .pepper { filter: none; opacity: 1; transform: translateY(0); }
label.pepper-toggle:hover .pepper { opacity: .7; }

/* Flash the pepper toggle when responses are empty or need tone-down */
@keyframes pepperFlashPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.12); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.0); }
}
label.pepper-toggle.flash {
  border-color: rgba(239, 68, 68, .65); /* red-500 */
  background: color-mix(in srgb, var(--card), #ef4444 12%);
  animation: pepperFlashPulse 1.4s ease-in-out infinite;
}
/* Give a subtle glow to the emoji itself */
label.pepper-toggle.flash .pepper { filter: none; opacity: 1; text-shadow: 0 0 10px rgba(239,68,68,.5); }

/* Make the top context badge match header button height */
#preload-status-top {
  padding: .4rem .7rem; /* match .theme-toggle */
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
}

/* Spinner animation for loading context */
@keyframes spin { to { transform: rotate(360deg); } }
/* Subtle pulse while loading */
@keyframes pulseBadge {
  0% { box-shadow: 0 0 0 0 rgba(217,119,6, 0.0); }
  50% { box-shadow: 0 0 0 4px rgba(217,119,6, 0.08); }
  100% { box-shadow: 0 0 0 0 rgba(217,119,6, 0.0); }
}
/* Show spinner when the top badge is in loading/warn state */
#preload-status-top.warn::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: .45rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  opacity: .85;
}
/* Remove spinner dot in ok or err state */
#preload-status-top.ok::after, #preload-status-top.err::after { display: none; content: none; }
/* Apply pulse effect to the whole badge while loading */
#preload-status-top.warn { animation: pulseBadge 1.6s ease-in-out infinite; }
/* Also show a small spinner for the inline status in chat header when muted/loading */
#preload-status.muted::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: .4rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .9s linear infinite;
  opacity: .7;
  vertical-align: -0.12em;
}

.img-contain { width: 100%; height: auto; object-fit: contain; }
.img-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .2rem; }
.img-grid.lg { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Force a 2x2 gallery when requested */
.character-gallery .img-grid.lg { grid-template-columns: repeat(2, 1fr); }
.character-gallery .img-grid.lg > * { min-width: 0; }
.img-frame { background: var(--bg-elev); border:1px solid var(--border); border-radius: 10px; padding: .4rem; display:flex; flex-direction:column; gap:.3rem; margin: 0; }
.img-grid.bare { gap: .2rem; }
.img-frame.bare { background: transparent; border: none; padding: 0; border-radius: 0; }
.img-frame img { width: 100%; height: auto; object-fit: contain; border-radius: 6px; }
.character-gallery .img-grid, .character-gallery .img-grid.bare, .character-gallery .img-grid.lg { gap: 0; }
.character-gallery .img-frame.bare img { border-radius: 0; display:block; }
.img-frame figcaption { color: var(--muted); font-size: .8rem; display:none; }

.muted { color: var(--muted); }
pre { background: var(--bg-elev); border:1px solid var(--border); border-radius: 8px; padding:.6rem; overflow:auto; }

/* Lightbox */
.lightbox-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 2rem; }
.lightbox-backdrop.show { display: flex; }
.lightbox-backdrop img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.lightbox-caption { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; background: rgba(0,0,0,.6); color: #e5e7eb; padding: .6rem .8rem; border-radius: 8px; max-height: 38vh; overflow: auto; font-size: .95rem; }
.enlargeable { cursor: zoom-in; }

@media (max-width: 720px) {
  .hero-overlay { grid-template-columns: 1fr; }
}

/* On small screens, hide the header brand title text (keep only the logo) */
@media (max-width: 720px) {
  .brand .title { display: none; }
  .nav-label { display: none; }
}

/* Add horizontal padding in header on small screens to avoid cropped look */
@media (max-width: 720px) {
  /* Nudge the theme toggle in slightly so it never hugs the edge */
  header.appbar #theme-toggle { margin-right: .25rem; }
}

/* On small screens, stack the section header text (for My books) */
@media (max-width: 720px) {
  .section > .section-header.stack-sm { flex-direction: column; align-items: flex-start; gap: .2rem; }
}

/* Characters layout */
.characters-list { display: grid; gap: 1rem; }
.character-card { border:1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); padding: .8rem; }
.character-grid { display:grid; grid-template-columns: 1.1fr 1.9fr; gap: 1rem; align-items: stretch; }
.character-details p { margin:.3rem 0; }
.short-italic { text-align: center; font-style: italic; padding: .4rem 0; }
.centered-text { text-align: center; }
.pill-box { border:1px solid var(--border); background: var(--bg-elev); border-radius: 10px; padding: .4rem .6rem; margin:.4rem 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.pill-box p { margin: 0; }
.character-gallery { min-height: 100%; }
@media (max-width: 980px) { .character-grid { grid-template-columns: 1fr; } }

/* Rounded outer corners for the 2x2 character gallery */
.character-gallery .img-grid.lg > :nth-child(1) img { border-top-left-radius: 10px; }
.character-gallery .img-grid.lg > :nth-child(2) img { border-top-right-radius: 10px; }
.character-gallery .img-grid.lg > :nth-child(3) img { border-bottom-left-radius: 10px; }
.character-gallery .img-grid.lg > :nth-child(4) img { border-bottom-right-radius: 10px; }

/* Quote slider */
.quote-slider { position: relative; width: 100%; margin: .2rem 0 .4rem 0; height: 2.2rem; overflow: hidden; transition: height .25s ease; }
.quote-slide { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; padding: 0 .6rem; border-radius: 8px; background: color-mix(in srgb, var(--bg-elev), transparent 50%); color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; text-align: center; font-style: italic; }
.quote-slide.active { opacity: 1; transform: translateY(0); }

/* Image crossfade slider (characters) */
.img-slider { position: relative; width: 100%; height: 100%; min-height: 260px; overflow: hidden; border-radius: 16px; display: flex; }
.img-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.img-slide.active { opacity: 1; }
.img-slide img { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }

/* Overlays inside character image slider */
.img-slider .overlay-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: .6rem .6rem .2rem .6rem; pointer-events: none; }
.img-slider .quote-slider.overlay-top { height: auto; min-height: 2.2rem; margin: 0; padding-top: .25rem; padding-bottom: .25rem; background: rgba(0,0,0,.55); }
.img-slider .quote-slider.overlay-top .quote-slide { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); background: transparent; height: auto; white-space: normal; line-height: 1.2; padding: 0 .4rem; }
.img-slider .img-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .7rem .9rem; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); background: rgba(0,0,0,.55); pointer-events: none; white-space: normal; line-height: 1.25; }

/* Ensure the small regenerate button sits above overlays and is clickable */
.img-slider .img-retry { z-index: 3; pointer-events: auto; }

/* Chapters layout */
.chapters-list { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.chapter-card { border:1px solid var(--border); border-radius:12px; background: var(--card); box-shadow: var(--shadow); padding: .8rem; display:flex; flex-direction: column; gap: .6rem; }
.chapter-head { display:flex; align-items: baseline; gap:.5rem; }
.chapter-row { display:grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; }
.chapter-image .img-frame.bare img { width: 100%; height: auto; object-fit: contain; border-radius: 6px; }
@media (max-width: 800px) { .chapter-row { grid-template-columns: 1fr; } }

/* Character thumbnails strip */
.character-thumbs { display: grid; gap: .6rem; }
.character-thumbs .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.character-thumbs .row.mains { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.character-thumbs a.thumb { position: relative; display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-elev); box-shadow: var(--shadow); }
.character-thumbs a.thumb img { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--bg); }
.character-thumbs .row.mains a.thumb img { height: 160px; }
/* Overlay labels */
.character-thumbs a.thumb .label-top-right { position: absolute; top: .35rem; right: .35rem; display: inline-flex; pointer-events: none; }
.character-thumbs a.thumb .label-top-right .chat-badge { pointer-events: auto; cursor: pointer; background: rgba(0,0,0,.65); color: #fff; border-color: rgba(255,255,255,.4); text-transform: uppercase; font-size: .7rem; letter-spacing: .02em; }
.character-thumbs a.thumb .label-bottom { position: absolute; left: .35rem; right: .35rem; bottom: .35rem; display: flex; align-items: center; justify-content: flex-start; pointer-events: none; }
.character-thumbs a.thumb .label-bottom .badge { display: block; width: 100%; text-align: left; }
.character-thumbs a.thumb .badge { background: rgba(0,0,0,.55); color: #fff; border-color: rgba(255,255,255,.35); }

/* --- Chat UI --- */
.btn { padding: .5rem .75rem; border-radius: .5rem; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: white; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Turns stepper */
.turns-wrap { display: none; align-items: center; gap: .4rem; background: color-mix(in srgb, var(--bg-elev), var(--primary) 20%); border: 1px solid var(--primary); padding: .2rem .4rem; border-radius: .5rem; }
.turns-wrap.show { display: inline-flex; }
.turns-wrap label { color: #fff; font-weight: 600; }
#chat-turns { width: 4.2rem; appearance: textfield; -moz-appearance: textfield; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; border-radius: .4rem; padding: .35rem .5rem; font-size: 1.05rem; font-weight: 700; text-align: center; }
#chat-turns::-webkit-outer-spin-button, #chat-turns::-webkit-inner-spin-button { opacity: 1; height: 24px; }

.chat-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 1000; }
.chat-modal.hidden { display: none; }
.chat-panel { width: 100%; max-width: 820px; max-height: 88vh; display: flex; flex-direction: column; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.chat-header { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.chat-header-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.chat-title { font-weight: 600; }
.chat-subtitle { font-size: .85rem; color: var(--muted); }
.chat-actions { position: relative; display: inline-flex; gap: .3rem; align-items: center; }
.chat-header .icon-btn, .chat-header .chat-close { background: transparent; color: inherit; border: none; box-shadow: none; padding: .2rem .4rem; }
.chat-header .pepper-toggle { border: none; background: transparent; box-shadow: none; }
.icon-btn { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: .3rem .5rem; cursor: pointer; box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.icon-btn:hover { filter: brightness(1.05); }
.chat-close { background: var(--card); color: inherit; border: 1px solid var(--border); font-size: 1.2rem; cursor: pointer; line-height: 1; border-radius: 8px; padding: .2rem .5rem; }
.chat-actors { display: flex; flex-direction: column; gap: .25rem; margin-top: .35rem; --chip-h: 30px; }
.chat-actors .row { display: flex; flex-wrap: wrap; gap: .3rem; }
.chat-actors .row.combined { margin: 0; }
.actor-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--border); border-radius: 999px; padding: 0 .45rem 0 0; background: var(--bg-elev); color: var(--text); cursor: pointer; height: var(--chip-h); overflow: hidden; }
/* Make the thumbnail fill the chip height so the left rounding matches the badge radius */
.actor-chip img { width: var(--chip-h); height: 100%; border-radius: 0; object-fit: cover; border: 0; background: transparent; flex: 0 0 var(--chip-h); display: block; }
.actor-chip.waking { opacity: .55; animation: pulseWake 1.6s ease-in-out infinite; }
@keyframes pulseWake { 0%{ opacity:.35; } 50%{ opacity:1; } 100%{ opacity:.35; } }
.actor-chip span { font-size: .8rem; line-height: 1; }
.actor-chip.active { outline: 2px solid var(--primary); }
.actor-chip.writing { background: color-mix(in srgb, var(--bg-elev), var(--primary) 15%); border-color: var(--primary); }
/* When chat is open, give main personas a darker gray border and others a lighter gray border */
.actor-chip[data-priority="main"] { border-color: color-mix(in srgb, var(--border), #000 45%); }
.actor-chip[data-priority="other"] { border-color: color-mix(in srgb, var(--border), #fff 20%); }
/* Online indicator when context is fully loaded */
/* Keep gray borders based on priority even when online (no green border) */
.actor-chip.online[data-priority="main"] { border-color: color-mix(in srgb, var(--border), #000 45%); }
.actor-chip.online[data-priority="other"] { border-color: color-mix(in srgb, var(--border), #fff 20%); }
.actor-chip.online span::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-left: .35em;
  background: var(--ok, #16a34a);
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-elev), transparent 80%);
  vertical-align: middle;
}
.chat-body { padding: 1rem; overflow: auto; display: flex; flex-direction: column; gap: .5rem; min-height: 240px; }
.msg-row { display: grid; grid-template-columns: 40px 1fr; gap: .5rem; align-items: start; }
.msg-row.user { grid-template-columns: 1fr 40px; }
.avatar { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elev); }
.chat-input { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border); position: relative; }
.chat-input input { flex: 1; background: transparent; color: inherit; border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem; }
.msg { max-width: 85%; padding: .6rem .8rem; border-radius: 12px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: #1f2937; color: #e5e7eb; border-top-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: #0b1020; color: #dbeafe; border-top-left-radius: 4px; }
.msg { position: relative; }

/* --- Chatify page polish --- */
/* File icons in dropzone */
.dropzone .icon-pdf { filter: invert(23%) sepia(97%) saturate(3424%) hue-rotate(346deg) brightness(94%) contrast(101%); }
.dropzone .icon-epub { color: var(--primary); }

/* Form controls modern look */
select, input[type="text"], input[type="number"], input[type="file"], button {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: .5rem .7rem;
  box-shadow: var(--shadow);
}
select:focus, input:focus, button:focus { outline: 2px solid color-mix(in srgb, var(--primary), transparent 60%); }
.msg-actions { position: absolute; right: .35rem; bottom: .25rem; display: flex; align-items: center; gap: .2rem; }
.icon-btn.mini { padding: .15rem; width: 28px; height: 28px; line-height: 1; font-size: 1rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; opacity: .95; }
.icon-btn.mini.spinning { position: relative; color: transparent; }
.icon-btn.mini.spinning::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.chat-image { max-width: 420px; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
/* Inline formatting for assistant/user content */
.msg strong { font-weight: 700; }
.msg em { font-style: italic; }
.msg a { color: #60a5fa; text-decoration: underline; }
/* Mention highlight */
.msg .mention { display: inline-block; padding: 0 .25rem; border-radius: .35rem; background: color-mix(in srgb, var(--bg-elev), var(--primary) 25%); color: #fff; font-weight: 700; }
/* Assistant color variants per avatar */
.msg.assistant.color-0 { background: color-mix(in srgb, var(--bg-elev), #3b82f6 25%); color: var(--text); border-left: 3px solid #3b82f6; }
.msg.assistant.color-1 { background: color-mix(in srgb, var(--bg-elev), #22c55e 25%); color: var(--text); border-left: 3px solid #22c55e; }
.msg.assistant.color-2 { background: color-mix(in srgb, var(--bg-elev), #f59e0b 25%); color: var(--text); border-left: 3px solid #f59e0b; }
.msg.assistant.color-3 { background: color-mix(in srgb, var(--bg-elev), #ec4899 25%); color: var(--text); border-left: 3px solid #ec4899; }
.msg.assistant.color-4 { background: color-mix(in srgb, var(--bg-elev), #8b5cf6 25%); color: var(--text); border-left: 3px solid #8b5cf6; }
.msg.assistant.color-5 { background: color-mix(in srgb, var(--bg-elev), #06b6d4 25%); color: var(--text); border-left: 3px solid #06b6d4; }
.msg.assistant.color-6 { background: color-mix(in srgb, var(--bg-elev), #ef4444 25%); color: var(--text); border-left: 3px solid #ef4444; }
.msg.assistant.color-7 { background: color-mix(in srgb, var(--bg-elev), #f97316 25%); color: var(--text); border-left: 3px solid #f97316; }
/* Dev-only assistant meta footer */
.msg .msg-meta { display: flex; align-items: center; gap: .35rem; margin-top: .25rem; font-size: .75rem; opacity: .8; }
.msg .msg-meta .icon-btn.mini { padding: 0 .25rem; line-height: 1.1; }
.chat-typing { display: flex; align-items: center; gap: .75rem; padding: .25rem 1rem .75rem 1rem; }
.chat-typing img.typing-avatar { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; display: none; border: 1px solid var(--border); background: var(--bg-elev); }
.chat-typing.show-avatar img.typing-avatar { display: inline-block; }
.chat-typing.hidden { display: none; }
.typing-dots { display: inline-flex; gap: .25rem; }
.typing-dots span { width: .4rem; height: .4rem; background: #9ca3af; border-radius: 50%; display: inline-block; animation: bounce 1s infinite ease-in-out; }
.typing-dots span:nth-child(2){ animation-delay: .15s; }
.typing-dots span:nth-child(3){ animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .6; } 40% { transform: translateY(-4px); opacity: 1; } }
.progress { flex: 1; height: 6px; background: #111; border-radius: 999px; overflow: hidden; border: 1px solid #222; }
.progress .bar { height: 100%; width: 0%; background: linear-gradient(90deg,#22c55e,#3b82f6,#a78bfa); transition: width .2s ease; }

/* Mention autocomplete menu */
.mention-menu { position: absolute; bottom: calc(100% + 6px); left: .75rem; min-width: 220px; max-width: 360px; max-height: 230px; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); z-index: 20; padding: .25rem; }
.mention-menu.hidden { display: none; }
.mention-item { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 6px; cursor: pointer; }
.mention-item img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); background: var(--bg-elev); }
.mention-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-item.active, .mention-item:hover { background: color-mix(in srgb, var(--bg-elev), var(--primary) 18%); }

@media (max-width: 640px){
  /* Use stable viewport height on small screens to avoid resize jumps when the URL bar/keyboard shows */
  .chat-panel { height: 100vh; max-height: 100vh; width: 100%; }
  .chat-panel { height: 100svh; max-height: 100svh; }
}

/* Mobile and small screens: make chat fullscreen and pin controls to top-right */
@media (max-width: 768px) {
  .chat-modal { padding: 0; align-items: stretch; justify-content: stretch; overscroll-behavior: none; }
  /* Prefer stable viewport height to prevent the panel from growing when browser UI collapses or keyboard opens */
  .chat-panel { width: 100vw; height: 100vh; max-width: none; max-height: 100vh; border-radius: 0; border: 0; overflow: hidden; overscroll-behavior: none; }
  .chat-panel { height: 100svh; max-height: 100svh; }
  .chat-header { position: sticky; top: 0; z-index: 1001; padding: calc(.6rem + env(safe-area-inset-top)) .75rem .6rem .75rem; }
  .chat-actions { position: static; }
  .chat-body { flex: 1; padding: .5rem .75rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .chat-input { padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)) .75rem; max-width: 100vw; }
  /* Prevent iOS from zooming on focus (which can cause layout jump) */
  .chat-input input { font-size: 16px; min-width: 0; }
}

/* Lock global scroll when modal is open */
html.no-scroll, body.no-scroll { overflow: hidden; height: 100%; }