/* Chat screen: cinematic backdrop, per-character colour, narration vs speech, motion.
   Loaded after app-theme.css. --hue is set from the character portrait by paintMood(). */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

#chat-view {
  --hue: 15;
  --char: hsl(var(--hue) 95% 68%);
  --char-2: hsl(calc(var(--hue) + 30) 92% 60%);
  --char-soft: hsl(var(--hue) 45% 80%);
  --glass: rgba(20,18,24,.58);
  --glass-line: rgba(255,255,255,.08);
  font-family: var(--brand-font-body);
}
#chat-view.is-spicy { --char-2: hsl(338 95% 62%); }

/* Backdrop: the scene or portrait, blurred and tinted by the character's colour */
#chat-view .chat-backdrop { background: #09090b; }
#chat-view .chat-backdrop img { filter: blur(48px) saturate(1.6) brightness(.5); opacity: 1; transform: scale(1.2); }
#chat-view .chat-backdrop::after {
  background:
    radial-gradient(90% 60% at 50% -12%, hsl(var(--hue) 95% 55% / .26), transparent 62%),
    radial-gradient(70% 50% at 100% 110%, hsl(calc(var(--hue) + 30) 95% 50% / .14), transparent 70%),
    linear-gradient(180deg, rgba(9,9,11,.25), rgba(9,9,11,.62) 55%, rgba(9,9,11,.92));
}
#chat-view.is-spicy .chat-backdrop::after {
  background:
    radial-gradient(90% 60% at 50% -12%, hsl(345 95% 55% / .3), transparent 62%),
    radial-gradient(70% 50% at 100% 110%, hsl(var(--hue) 95% 50% / .18), transparent 70%),
    linear-gradient(180deg, rgba(9,9,11,.25), rgba(9,9,11,.62) 55%, rgba(9,9,11,.92));
}
.chat-sprite {
  display: none; position: absolute; z-index: 1; right: 0; bottom: 0;
  width: min(30vw, 460px); height: 92%;
  background-size: cover; background-position: center 20%; opacity: .34;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%), linear-gradient(to top, transparent 0, #000 45%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 55%), linear-gradient(to top, transparent 0, #000 45%);
  mask-composite: intersect;
}
@media (min-width: 1280px) { .chat-sprite { display: block; } }

/* Header */
#chat-view .chat-top { background: linear-gradient(#0c0a0e, #0e0b10); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 18px 30px -18px rgba(0,0,0,.7); z-index: 20; }
#chat-view .chat-head { background: transparent; border-bottom: 0; }
.avatar-ring { position: relative; flex: none; display: inline-flex; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, var(--char), var(--char-2), var(--char)); box-shadow: 0 0 22px -2px hsl(var(--hue) 95% 55% / .55); }
#chat-view .chat-person img { border: 2px solid #0d0c10; box-shadow: none; display: block; }
.avatar-ring::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #3ee089; border: 2.5px solid #0d0c10; animation: online 2.4s ease-out infinite; }
@keyframes online { 0% { box-shadow: 0 0 0 0 #3ee08980; } 70%, 100% { box-shadow: 0 0 0 7px #3ee08900; } }
#chat-view .chat-person small { color: var(--char-soft); opacity: .85; }
#chat-view .chat-menu { background: rgba(26,23,30,.92); border-color: rgba(255,255,255,.1); }

/* Message list, anchored to the bottom like a messenger */
#chat-view .messages { width: min(720px, 100%); margin: auto auto 0; padding: 30px 18px 26px; }
#chat-view .message { margin: 0 0 22px; }
#chat-view .message.assistant { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; align-items: start; }
#chat-view .message.assistant.no-avatar { grid-template-columns: minmax(0,1fr); padding-left: 47px; margin-top: -12px; }
#chat-view .message-avatar { width: 36px; height: 36px; border: 0; box-shadow: 0 0 0 1.5px hsl(var(--hue) 90% 65% / .55), 0 6px 16px -6px hsl(var(--hue) 90% 50% / .8); }
#chat-view .body { min-width: 0; display: flex; flex-direction: column; }
#chat-view .user .body { align-items: flex-end; max-width: min(82%, 540px); }
.who { font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--char); margin: 1px 0 7px 2px; text-shadow: 0 0 18px hsl(var(--hue) 95% 55% / .6); }

/* Assistant reply: narration lines + speech bubbles */
#chat-view .assistant .bubble { max-width: min(100%, 600px); padding: 0; background: none; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; white-space: normal; }
.seg { white-space: pre-line; }
.seg.say { padding: 11px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)), var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid hsl(var(--hue) 70% 75% / .14); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px -16px rgba(0,0,0,.8); color: #f7f2ee; font-size: 16px; line-height: 1.55; font-weight: 500; }
.bubble > .seg.say:first-child { border-top-left-radius: 6px; }
.seg.act { position: relative; padding: 1px 6px 1px 15px; color: var(--char-soft); font-style: italic; font-size: 15px; line-height: 1.62; opacity: .92; }
.seg.act::before { content: ""; position: absolute; left: 2px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(var(--char), hsl(var(--hue) 90% 60% / 0)); }
#chat-view .seg strong { color: var(--char); font-weight: 700; }
#chat-view .seg.say em { color: #c9c1c7; }

/* Player bubble */
#chat-view .user .bubble { max-width: 100%; padding: 11px 16px; border-radius: 20px 20px 6px 20px; background: linear-gradient(135deg, var(--char), var(--char-2)); color: #1a0e0b; font-size: 16px; line-height: 1.5; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 34px -14px hsl(var(--hue) 95% 55% / .85); }
#chat-view .user .bubble em { color: rgba(26,14,11,.72); }

/* Motion */
.message.fresh.assistant { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.message.fresh.user { animation: pop .42s cubic-bezier(.3,1.4,.5,1) both; transform-origin: 100% 100%; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.86); } }
#chat-view .typing::after { content: none; }
.typing > .seg:last-child::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -3px; border-radius: 2px; background: var(--char); box-shadow: 0 0 10px var(--char); animation: blink 1s steps(2,start) infinite; }
.dots { display: inline-flex; gap: 5px; padding: 15px 17px; border-radius: 6px 20px 20px 20px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid hsl(var(--hue) 70% 75% / .14); }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--char); animation: bounce 1.1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Scene intro */
#chat-view .scene-intro img { border-radius: 22px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 34px 80px -34px hsl(var(--hue) 95% 50% / .75); }
#chat-view .scene-intro .scene-kicker { color: var(--char); }

/* Continue the scene */
#chat-view .continue { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 auto 12px; padding: 9px 17px 9px 13px; border-radius: 999px; border: 1.5px solid transparent; color: #fff; font-weight: 700; font-size: 14px; background: linear-gradient(rgba(20,16,22,.8), rgba(20,16,22,.8)) padding-box, conic-gradient(from var(--spin), var(--char), hsl(var(--hue) 90% 60% / .1) 30%, var(--char-2) 55%, hsl(var(--hue) 90% 60% / .1) 80%, var(--char)) border-box; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px -12px hsl(var(--hue) 95% 55% / .8); animation: spin 4s linear infinite; transition: transform .18s, box-shadow .18s; }
#chat-view .continue svg { color: var(--char); filter: drop-shadow(0 0 6px var(--char)); }
#chat-view .continue:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px hsl(var(--hue) 95% 55% / .95); }
#chat-view .continue:active { transform: scale(.96); }
@keyframes spin { to { --spin: 360deg; } }

/* Composer */
#chat-view .composer-wrap { background: linear-gradient(rgba(9,9,11,0), rgba(9,9,11,.7) 45%); padding-top: 18px; }
#chat-view .composer { width: min(720px, 100%); align-items: flex-end; gap: 4px; padding: 6px; border-radius: 28px; background: rgba(22,19,26,.62); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 50px -24px rgba(0,0,0,.9); transition: border-color .2s, box-shadow .2s; }
#chat-view .composer:focus-within { border-color: hsl(var(--hue) 90% 65% / .55); box-shadow: 0 0 0 4px hsl(var(--hue) 90% 60% / .12), 0 24px 50px -20px hsl(var(--hue) 90% 40% / .55); }
#chat-view .composer textarea { font-size: 16px; padding: 11px 4px; }
.act-btn { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #a39da4; cursor: pointer; transition: background .15s, color .15s; }
.act-btn:hover { background: rgba(255,255,255,.07); color: var(--char); }
#chat-view .send { display: grid; place-items: center; color: #8d8790; background: rgba(255,255,255,.08); transform: scale(.9); transition: transform .25s cubic-bezier(.3,1.5,.5,1), background .2s, color .2s, box-shadow .2s; }
#chat-view .ready .send { color: #1a0e0b; background: linear-gradient(135deg, var(--char), var(--char-2)); box-shadow: 0 8px 22px -6px hsl(var(--hue) 95% 58% / .95); transform: none; }
#chat-view .ready .send:hover { transform: scale(1.07); }
#chat-view .ready .send:active { transform: scale(.92); }

@media (max-width: 719px) {
  #chat-view .messages { padding-inline: 14px; }
  #chat-view .message.assistant { grid-template-columns: 30px minmax(0,1fr); gap: 9px; }
  #chat-view .message.assistant.no-avatar { grid-template-columns: minmax(0,1fr); padding-left: 39px; }
  #chat-view .message-avatar { width: 30px; height: 30px; }
  .seg.say, #chat-view .user .bubble { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .message.fresh, #chat-view .continue, .avatar-ring::after, .dots i { animation: none !important; }
}
#chat-view .composer textarea:focus-visible { outline: none; }
#chat-view .bubble em { padding-right: .18em; }

/* Layout: the chat fills exactly one screen. Header and message box stay put;
   only the message list scrolls between them. */
#chat-view { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; grid-template-rows: auto minmax(0,1fr) auto; }
#chat-view .chat-top { position: relative; top: auto; }
#chat-view .messages { width: 100%; min-height: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 30px max(18px, calc((100% - 720px) / 2)) 26px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
#chat-view .messages > :first-child { margin-top: auto; }
#chat-view .composer-wrap { position: relative; bottom: auto; }
@media (max-width: 680px) {
  #chat-view { height: calc(100vh - var(--tab-h)); height: calc(100dvh - var(--tab-h)); }
  #chat-view .messages { padding: 22px 14px 18px; }
}

/* Story icons in the side rail: bigger, face-cropped, with a readable number badge */
.rail .rail-chats { width: 100%; min-height: 0; margin: 0; padding: 8px 4px 6px; gap: 14px; grid-auto-rows: 58px; }
.rail .rail-chat { display: block; width: 54px; height: 54px; min-width: 0; min-height: 0; padding: 0; border-radius: 18px; overflow: visible; background: transparent; box-shadow: 0 0 0 1px rgba(255,255,255,.12); transition: transform .15s ease-out, box-shadow .15s ease-out; }
.rail .rail-chat img, .rail .rail-chat-letter { display: block; width: 100%; height: 100%; border-radius: 18px; }
.rail .rail-chat img { object-fit: cover; object-position: center 22%; }
.rail .rail-chat-letter { display: grid; place-items: center; background: var(--raised); font-size: 20px; }
.rail .rail-chat:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.rail .rail-chat.active { background: transparent; box-shadow: 0 0 0 2px #101316, 0 0 0 4px var(--accent); }
.rail .rail-chat-number { inset: -6px -6px auto auto; min-width: 22px; height: 22px; padding-inline: 5px; border-radius: 11px; border: 2px solid #101316; background: var(--accent); color: #1a0e0b; font-size: 11.5px; font-weight: 800; line-height: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.rail .rail-chat:not(.active) .rail-chat-number { background: #f1ece6; }

/* Message avatars: a little larger now that they show a face, not a full figure */
#chat-view .message-avatar { width: 40px; height: 40px; }
#chat-view .message.assistant { grid-template-columns: 40px minmax(0,1fr); gap: 12px; }
#chat-view .message.assistant.no-avatar { grid-template-columns: minmax(0,1fr); padding-left: 52px; }
#chat-view .message-avatar img { object-fit: cover; object-position: center 22%; }
@media (max-width: 719px) {
  #chat-view .message-avatar { width: 34px; height: 34px; }
  #chat-view .message.assistant { grid-template-columns: 34px minmax(0,1fr); gap: 9px; }
  #chat-view .message.assistant.no-avatar { padding-left: 43px; }
}