/* Conversations list view */
.conversation-item { display: flex; align-items: center; background: var(--card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 12px; margin-bottom: 12px; cursor: pointer; transition: 0.15s ease; }
.conversation-item:hover { background: var(--card-hover); border-color: rgba(127, 90, 240, 0.4); }
.conversation-thumb { width: 68px; height: 68px; border-radius: 12px; background-size: cover; background-position: center; margin-right: 14px; flex-shrink: 0; }
.conversation-info { flex: 1; }
.conversation-title { font-size: 15px; font-weight: 600; }
.conversation-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.conversation-meta { font-size: 11px; color: var(--text-soft); margin-top: 6px; }
.conversation-play-btn { width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(135deg, #7f5af0, #ff6bcb); border: none; font-size: 18px; font-weight: bold; color: white; cursor: pointer; margin-left: 12px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.conversation-play-btn:hover { transform: scale(1.07); box-shadow: 0 0 18px rgba(127,90,240,0.7); }
.conv-play-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #7f5af0 0%, #5327c8 100%); border: none; padding: 8px 14px; border-radius: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: #ffffff; cursor: pointer; transition: 0.15s ease-in-out; box-shadow: 0 0 8px rgba(127, 90, 240, 0.5); }
.conv-play-btn:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 14px rgba(127, 90, 240, 0.9); }
.conv-play-btn:active { transform: translateY(0px) scale(0.98); }
.conv-play-btn::before { content: "▶"; font-size: 13px; margin-right: 2px; opacity: 0.9; }
.play-icon { width: 14px; height: 14px; }
/* Views
   - Characters, Conversations, Chat specific sections
*/

#character-selection {
  /* Acts as middle-column content area */
}
/* Character selection view */
#character-selection { padding: 26px 22px 18px; display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-height: 0; overflow: visible; }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.section-header h2 { font-size: 20px; font-weight: 600; }
.section-header p { font-size: 13px; color: var(--text-soft); }
.section-actions { display: flex; align-items: center; gap: 10px; }
.filters-row { margin-top: 12px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; width: 100%; }
.filters-row .chips { display: flex; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.tag-chip { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.03); color: var(--text-soft); border: 1px solid rgba(255,255,255,0.04); cursor: pointer; font-size: 13px; }
.tag-chip:hover { transform: translateY(-2px); }
.tag-chip.selected { background: linear-gradient(135deg, rgba(127,90,240,0.18), rgba(255,107,203,0.12)); color: var(--text); border-color: rgba(127,90,240,0.6); }
.tag-chip.disabled { opacity: 0.44; cursor: not-allowed; }
.nsfw-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 13px; }
.nsfw-toggle .switch { position: relative; width: 44px; height: 24px; display: inline-block; }
.nsfw-toggle .nsfw-checkbox { opacity: 0; width: 0; height: 0; position: absolute; left: 0; top: 0; }
.nsfw-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.08); border-radius: 24px; transition: background 160ms ease, box-shadow 160ms ease; }
.nsfw-toggle .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; top: 3px; background: #ffffff; border-radius: 50%; transition: transform 160ms ease, background 160ms ease; box-shadow: 0 6px 12px rgba(0,0,0,0.25); }
.nsfw-toggle .nsfw-checkbox:checked + .slider { background: linear-gradient(135deg, var(--accent), #ff6bcb); }
.nsfw-toggle .nsfw-checkbox:checked + .slider:before { transform: translateX(20px); background: #050509; }
.nsfw-toggle .nsfw-label { font-size: 13px; color: var(--text-soft); }
.showing-count { color: var(--text-soft); font-size: 13px; margin-right: 8px; min-width: 140px; text-align: left; }
.nsfw-only-chip { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.02); color: var(--text-soft); border: 1px solid rgba(255,255,255,0.04); cursor: pointer; font-size: 13px; margin-right: 6px; }
.nsfw-only-chip.selected { background: linear-gradient(135deg, rgba(255,107,107,0.18), rgba(255,80,80,0.12)); color: var(--text); border-color: rgba(255,107,107,0.6); }
.clear-tags-btn { padding: 6px 8px; border-radius: 8px; background: transparent; color: var(--text-soft); border: 1px solid rgba(255,255,255,0.04); cursor: pointer; margin-left: 8px; }
.clear-tags-btn:hover { transform: translateY(-1px); }
.sort { display: flex; align-items: center; gap: 8px; }
.sort-label { color: var(--text-soft); font-size: 13px; }
.sort-select { padding: 6px 8px; border-radius: 8px; background: rgba(10,10,20,0.9); color: var(--text); border: 1px solid var(--border-subtle); }
.character-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, 300px); justify-content: center; gap: 18px; overflow: visible; padding-bottom: 8px; }
.character-grid::-webkit-scrollbar { width: 6px; }
.character-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }
.char-card { background: var(--card); border-radius: var(--radius-xl); padding: 12px 12px 14px; border: 1px solid var(--border-subtle); display: flex; flex-direction: column; cursor: pointer; position: relative; overflow: hidden; width: 300px; height: 460px; transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, border-color 0.16s ease-out, background 0.16s ease-out; }
.char-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(127, 90, 240, 0.18), transparent 60%); opacity: 0; transition: opacity 0.2s ease-out; pointer-events: none; }
.char-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.7); border-color: rgba(127, 90, 240, 0.7); background: var(--card-hover); z-index: 2; }
.char-card:hover::before { opacity: 1; }
.char-image { width: 100%; height: 220px; border-radius: 16px; background-size: cover; background-position: center; margin-bottom: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75); }
.char-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.char-avatar { width: 40px; height: 40px; border-radius: 999px; background: radial-gradient(circle at 20% 0, #ffffff, #7f5af0); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #050509; flex-shrink: 0; box-shadow: 0 0 18px rgba(127, 90, 240, 0.7); }
.char-meta { display: flex; flex-direction: column; gap: 2px; }
.char-name { font-size: 15px; font-weight: 600; }
.char-tagline { font-size: 12px; color: var(--text-soft); }
.char-body { font-size: 12px; color: var(--text-soft); margin-top: 2px; line-height: 1.4; flex: 1; overflow: hidden; }
.char-footer { display: flex; align-items: center; justify-content: flex-start; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--text-soft); flex-wrap: wrap; }
.char-footer .play-btn { padding: 6px 10px; border-radius: 10px; font-size: 12px; border: none; cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, opacity 0.12s ease-out; background: linear-gradient(135deg, var(--accent), #ff6bcb); color: #050509; box-shadow: 0 6px 18px rgba(127,90,240,0.22); }
.char-footer .play-btn:hover { transform: translateY(-2px); }
.char-footer .delete-btn { padding: 6px 10px; border-radius: 10px; font-size: 12px; border: 1px solid rgba(255,255,255,0.06); background: transparent; color: var(--text-soft); cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, opacity 0.12s ease-out; }
.char-footer .delete-btn:hover { background: rgba(255,107,107,0.06); color: var(--danger); transform: translateY(-2px); }
.char-card.owner { box-shadow: 0 20px 50px rgba(127,90,240,0.18); border: 1px solid rgba(127,90,240,0.9); }
.char-footer .edit-btn { padding: 6px 10px; border-radius: 10px; font-size: 12px; border: 1px solid rgba(127,90,240,0.16); background: rgba(127,90,240,0.06); color: var(--accent); cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, opacity 0.12s ease-out; }
.char-footer .edit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(127,90,240,0.12); }
.char-pill { padding: 3px 8px; border-radius: 999px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.03); white-space: nowrap; }
.char-pill.accent { border-color: rgba(127, 90, 240, 0.6); color: var(--accent); background: rgba(127, 90, 240, 0.12); }
.char-pill.nsfw { border-color: rgba(255, 107, 107, 0.7); color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }

@media (max-width: 600px) { .character-grid { grid-template-columns: 1fr; gap: 12px; } .char-card { padding: 10px 10px 12px; width: auto; height: auto; } .char-image { height: 220px; } }

/* Tag animations */
.tag-count { display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--text-soft); font-size: 12px; }
.tag-count-pop { animation: tagPop 420ms cubic-bezier(.2,.9,.2,1); }
@keyframes tagPop { 0% { transform: scale(1); opacity: 0.9; } 30% { transform: scale(1.28); opacity: 1; } 60% { transform: scale(0.98); } 100% { transform: scale(1); } }
.tag-chip.tag-enter { animation: tagEnter 300ms cubic-bezier(.2,.9,.2,1) both; }
@keyframes tagEnter { 0% { opacity: 0; transform: translateY(-8px) scale(0.985); } 60% { opacity: 1; transform: translateY(2px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.tag-chip.tag-exit { animation: tagExit 260ms ease-in both; }
@keyframes tagExit { 0% { opacity: 1; transform: translateY(0) scale(1); } 60% { opacity: 0.6; transform: translateY(-6px) scale(0.99); } 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

#conversations-view {
}
#character-selection .conversation-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 12px; transition: 0.15s ease; cursor: pointer; }
#character-selection .conversation-row:hover { background: var(--card-hover); border-color: rgba(127, 90, 240, 0.4); }
#character-selection .conv-thumb { width: 72px; height: 72px; border-radius: 12px; background-size: cover; background-position: center; flex-shrink: 0; box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
#character-selection .conv-main { flex: 1; display: flex; flex-direction: column; gap: 4px; }
#character-selection .conv-title { font-size: 15px; font-weight: 600; }
#character-selection .conv-sub { font-size: 12px; color: var(--text-soft); }
#character-selection .conv-meta { font-size: 11px; color: var(--text-soft); opacity: 0.85; }
#character-selection .conv-actions { display: flex; align-items: center; gap: 8px; }
#character-selection .conv-pill.nsfw { padding: 3px 8px; border-radius: 999px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255, 107, 107, 0.7); color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }
#character-selection .conv-continue { padding: 6px 10px; border-radius: 10px; font-size: 12px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--accent), #ff6bcb); color: #050509; box-shadow: 0 6px 18px rgba(127,90,240,0.22); transition: transform 0.12s ease-out, box-shadow 0.12s ease-out; }
#character-selection .conv-continue:hover { transform: translateY(-2px); }
#character-selection .conv-delete { padding: 6px 10px; border-radius: 10px; font-size: 12px; border: 1px solid rgba(255,255,255,0.06); background: transparent; color: var(--text-soft); cursor: pointer; transition: transform 0.12s ease-out; }
#character-selection .conv-delete:hover { background: rgba(255,107,107,0.06); color: var(--danger); transform: translateY(-2px); }

@media (max-width: 600px) { 
  #character-selection .conversation-row { padding: 10px; gap: 10px; }
  #character-selection .conv-thumb { width: 64px; height: 64px; }
}

/* New: Full-width conversation list cards (200px tall) */
.conversation-list { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.conversation-card { display: flex; flex-direction: column; width: 100%; height: 200px; border:1px solid var(--border-subtle); border-radius: 16px; background: var(--card); overflow: hidden; }
.conversation-card:focus { outline: 2px solid rgba(127,90,240,0.5); }
.conversation-card .conv-header { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px 8px; border-bottom: 1px solid var(--border-subtle); }
.conversation-card .conv-title { font-size: 18px; font-weight: 600; display: inline-flex; align-items: baseline; gap: 8px; }
.conversation-card .conv-id { color: var(--text-soft); font-size: 13px; }
.conversation-card .conv-pill.nsfw { padding: 3px 8px; border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255, 107, 107, 0.7); color: #ff6b6b; background: rgba(255, 107, 107, 0.12); }
.conversation-card .conv-body { display: grid; grid-template-columns: 180px 1fr auto; gap: 16px; padding: 12px 16px; align-items: center; }
.conversation-card .conv-info { min-width: 0; }
.conversation-card .conv-desc { color: var(--text-soft); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-card .conv-last { color: var(--text-soft); font-size: 12px; margin-bottom: 6px; }
.conversation-card .conv-rating { color: var(--text-soft); font-size: 13px; margin-bottom: 6px; }
.conversation-card .stars { position: relative; display: inline-block; margin-right: 8px; }
.conversation-card .stars-outer, .conversation-card .stars-inner { font-size: 16px; line-height: 1; letter-spacing: 2px; font-weight: 700; }
.conversation-card .stars-outer { color: rgba(255,255,255,0.2); }
.conversation-card .stars-inner { color: #ffd166; position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; }
.conversation-card .rating-number { color: var(--text-soft); font-size: 13px; }
.conversation-card .conv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.conversation-card .tag-chip { background: rgba(255,255,255,0.03); color: var(--text-soft); padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,0.06); }
.conversation-card .conv-media { width: 160px; height: 120px; display: flex; align-items: center; justify-content: center; }
.conversation-card .conv-media img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: cover; box-shadow: 0 8px 20px rgba(0,0,0,0.6); }
.conversation-card .conv-actions { display: flex; gap: 12px; align-items: center; }
#character-selection .conversation-card .btn.primary { background: linear-gradient(135deg, var(--accent), #ff6bcb); color: #050509; border: none; padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 22px rgba(127,90,240,0.28); }
#character-selection .conversation-card .btn.subtle { background: transparent; color: var(--text-soft); border: 1px solid var(--border-subtle); padding: 12px 18px; border-radius: 12px; font-size: 14px; }

/* Ensure conversations mode stacks vertically and uses list layout on desktop */
#character-selection.conversations-mode .character-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#character-selection.conversations-mode .conversation-list { width: 100%; }
/* Hide character cards when in conversations mode to avoid overlap */
#character-selection.conversations-mode .char-card { display: none; }

/* In Conversations mode, show NSFW toggle but hide tag chips and tag controls */
#character-selection.conversations-mode .filters-row .chips { display: none; }
#character-selection.conversations-mode .filters-row .showing-count { display: none; }
#character-selection.conversations-mode .filters-row .nsfw-only-chip { display: none; }
#character-selection.conversations-mode .filters-row .sort { display: none; }

@media (max-width: 600px) {
  .conversation-card { height: auto; }
  .conversation-card .conv-body { grid-template-columns: 1fr; }
  .conversation-card .conv-media { width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; }
  .conversation-card .conv-media img { width: 220px; height: 220px; object-fit: cover; border-radius: 12px; }
  .conversation-card .conv-actions { justify-content: flex-start; }
}

#chat-view {
}

/* Chat view */
#chat-screen { display: none; height: 100vh; border-top: 1px solid var(--border-subtle); background: radial-gradient(circle at top right, rgba(127, 90, 240, 0.12), transparent 55%); flex-direction: row; min-height: 0; margin: 0; }
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-header { padding: 12px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-subtle); background: rgba(5, 5, 9, 0.9); backdrop-filter: blur(14px); }
.back-button { border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02); color: var(--text-soft); width: 30px; height: 30px; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out; flex-shrink: 0; }
.back-button:hover { background: rgba(127, 90, 240, 0.14); border-color: rgba(127, 90, 240, 0.7); transform: translateY(-1px); }
.chat-header-main { display: flex; align-items: center; gap: 10px; flex: 1; }
.chat-model { display: flex; align-items: center; }
.chat-model-select {
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 10, 20, 0.9);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  outline: none;
}
.chat-model-select:focus { border-color: rgba(127, 90, 240, 0.8); box-shadow: 0 0 0 1px rgba(127, 90, 240, 0.35); }
.chat-info-toggle { border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(10, 10, 20, 0.9); color: var(--text-soft); width: 30px; height: 30px; font-size: 16px; display: none; align-items: center; justify-content: center; cursor: pointer; }
.chat-avatar { width: 38px; height: 38px; border-radius: 999px; background: radial-gradient(circle at 20% 0, #ffffff, #7f5af0); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #050509; flex-shrink: 0; }
.chat-meta { display: flex; flex-direction: column; }
.chat-name { font-size: 14px; font-weight: 600; }
.chat-status { font-size: 11px; color: var(--text-soft); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 16px 10px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; min-height: 0; }
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; }
.chat-input-bar { padding: 10px 12px; border-top: 1px solid var(--border-subtle); background: rgba(5, 5, 9, 0.95); display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.chat-input-wrapper { position: relative; flex: 1; }
.chat-input { width: 100%; padding: 9px 36px 9px 12px; border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(10, 10, 20, 0.95); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.14s ease-out, background 0.14s ease-out, box-shadow 0.14s ease-out; }
.chat-input::placeholder { color: #6a6b83; }
.chat-input:focus { border-color: rgba(127, 90, 240, 0.8); background: rgba(12, 13, 28, 1); box-shadow: 0 0 0 1px rgba(127, 90, 240, 0.4); }
.chat-send-btn { width: 34px; height: 34px; border-radius: 999px; border: none; outline: none; cursor: pointer; background: radial-gradient(circle at 20% 0, #ffffff, #7f5af0); display: flex; align-items: center; justify-content: center; font-size: 16px; color: #050509; flex-shrink: 0; box-shadow: 0 0 16px rgba(127, 90, 240, 0.7); transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, opacity 0.12s ease-out; }
.chat-send-btn:disabled { opacity: 0.4; box-shadow: none; cursor: default; }
.chat-send-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(127, 90, 240, 0.9); }
.chat-info-panel { width: 240px; background: rgba(10, 10, 20, 0.55); border-left: 1px solid var(--border-subtle); backdrop-filter: blur(12px); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-info-image { width: 100%; height: 180px; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6); }
.chat-info-name { font-size: 18px; font-weight: 600; }
.chat-info-desc { font-size: 13px; color: var(--text-soft); line-height: 1.4; }
.chat-info-rating { margin-top: 4px; }
.chat-info-rating .chat-rating-view { display: inline-flex; align-items: center; gap: 8px; }
.chat-info-rating .stars { position: relative; display: inline-block; }
.chat-info-rating .stars-outer, .chat-info-rating .stars-inner { font-size: 16px; line-height: 1; letter-spacing: 2px; font-weight: 700; }
.chat-info-rating .stars-outer { color: rgba(255,255,255,0.2); }
.chat-info-rating .stars-inner { color: #ffd166; position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; }
.chat-info-rating .rating-number, .chat-info-rating .rating-count { color: var(--text-soft); font-size: 13px; }
.chat-info-rating .chat-rating-action { margin-top: 8px; font-size: 13px; color: var(--text-soft); }
.chat-info-rating .rate-stars { display: inline-flex; gap: 6px; margin-left: 8px; }
.chat-info-rating .rate-star { background: transparent; border: none; cursor: pointer; color: rgba(255,255,255,0.35); font-size: 20px; line-height: 1; padding: 0 2px; }
.chat-info-rating .rate-star.selected { color: #ffd166; }
.chat-info-rating .rate-star:hover, .chat-info-rating .rate-star:focus { color: #ffd166; outline: none; }
.message-row { display: flex; margin-bottom: 4px; }
.message-row.user { justify-content: flex-end; }
.message-bubble { max-width: 70%; padding: 9px 11px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.message-user { background: linear-gradient(135deg, #7f5af0, #ff6bcb); color: #ffffff; border-bottom-right-radius: 4px; box-shadow: 0 4px 14px rgba(127, 90, 240, 0.35); }
.message-assistant { background: #15182a; border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text); border-bottom-left-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); }

/* Chat actions/emotions: text between *asterisks* */
.message-bubble .chat-emote {
  color: var(--text-soft);
  font-style: italic;
  font-weight: 600;
  opacity: 0.95;
}
.message-row.message-enter { animation: messageIn 180ms cubic-bezier(.2,.8,.25,1); }
@keyframes messageIn { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.typing-indicator { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--text-soft); }
.typing-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--text-soft); animation: typing 1s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* Responsive chat view */
@media (max-width: 720px) {
  body.chat-open header.app-header { display: none; }
  html.chat-open, body.chat-open { height: 100vh; height: 100dvh; overflow: hidden; }
  #character-selection { height: auto; }
  .character-grid { overflow-y: visible; }
  body.chat-open #chat-screen { position: fixed; inset: 0; display: flex; flex-direction: column; z-index: 90; }
  .chat-main { width: 100%; display: flex; flex-direction: column; min-height: 0; }
  .chat-info-toggle { display: inline-flex; }
  .chat-info-panel { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-height: 60vh; border-left: none; border-top: 1px solid var(--border-subtle); flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; background: rgba(10, 10, 20, 0.98); backdrop-filter: blur(18px); transform: translateY(100%); transition: transform 0.18s ease-out; z-index: 80; }
  #chat-screen.info-open .chat-info-panel { transform: translateY(0); }
  .chat-input-bar { padding: 6px 10px 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); gap: 10px; }
  .chat-input { font-size: 16px; }
  .chat-send-btn { width: 38px; height: 38px; }
  .chat-body { flex: 1 1 auto; overflow-y: auto; padding-bottom: 12px; }
  input, textarea, select { font-size: 16px; }
}

/* Landing view */
#landing { padding: 26px 22px 18px; display: none; flex-direction: column; gap: 18px; }
.landing-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; align-items: stretch; }
.landing-hero-content { background: radial-gradient(circle at top left, rgba(127,90,240,0.18), rgba(255,107,203,0.08)); border: 1px solid rgba(127,90,240,0.25); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-soft); }
.landing-badge { display: inline-block; font-size: 11px; letter-spacing: 0.12em; color: var(--accent); background: rgba(127,90,240,0.12); border: 1px solid rgba(127,90,240,0.4); padding: 4px 10px; border-radius: 999px; }
.landing-title { font-size: 34px; font-weight: 800; margin-top: 10px; }
.landing-subtitle { color: var(--text-soft); margin-top: 6px; font-size: 15px; }
.landing-cta { display: flex; gap: 10px; margin-top: 14px; }
.cta-primary { padding: 10px 14px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--accent), #ff6bcb); color: #050509; font-weight: 700; cursor: pointer; box-shadow: 0 8px 22px rgba(127,90,240,0.35); }
.cta-secondary { padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--text); cursor: pointer; }
.landing-stats { display: flex; gap: 20px; margin-top: 16px; opacity: 0.9; }
.landing-stats .stat-num { display: block; font-size: 18px; font-weight: 700; }
.landing-stats .stat-label { display: block; font-size: 12px; color: var(--text-soft); }
.landing-hero-art { border-radius: 20px; border: 1px solid rgba(255,255,255,0.06); background: radial-gradient(80% 60% at 20% 0%, rgba(127,90,240,0.45), transparent 60%), radial-gradient(80% 60% at 90% 20%, rgba(255,107,203,0.35), transparent 60%), linear-gradient(145deg, #141624, #0b0c16); box-shadow: 0 20px 50px rgba(0,0,0,0.65); }