/* CHATI-AI V10 — launch screen, ambient glow, display font, profile cover
   and stats, last-chat badges, typing dots, image viewer, toasts, robot
   empty states and a more polished light theme. */

/* ---------- 1. Launch screen: the robot on the first-visit splash ---------- */
.cinematic-splash {
  background: radial-gradient(ellipse at 50% 42%, #2a1f52 0%, #120e22 45%, #0b0b0f 80%) !important;
}

.cinematic-splash-ambient,
.cinematic-splash-lightfield,
.cinematic-splash-halo,
.cinematic-splash-word-glow {
  display: none !important;
}

.cinematic-splash-logo {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.v10-splash-robot {
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 10px 28px rgba(124, 58, 237, 0.6));
  animation: v10-bob 1.6s ease-in-out infinite;
}

.cinematic-splash-wordmark,
.cinematic-splash-word {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #f1edff !important;
  -webkit-text-fill-color: #f1edff !important;
  background: none !important;
}

.v10-splash-dots {
  display: flex;
  gap: 6px;
}

.v10-splash-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a78bfa;
  animation: v10-dot 1.1s ease-in-out infinite;
}

.v10-splash-dots span:nth-child(2) { animation-delay: 0.15s; }
.v10-splash-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes v10-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* The first-visit splash plays while the app's scripts load, when the main
   thread is busy. Blur/brightness (filter) animations run on that thread and
   froze there, so the splash animates only transform and opacity, which the
   browser animates on its own (it keeps moving while scripts load). */
.cinematic-splash-stage {
  animation-name: v10-stage-enter !important;
  will-change: transform, opacity;
}

.cinematic-splash-monogram,
.cinematic-splash-sweep,
.cinematic-splash-ray {
  display: none !important;
}

.cinematic-splash.is-leaving {
  filter: none !important;
}

.cinematic-splash-wordmark {
  animation: v10-word-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both !important;
  filter: none !important;
}

@keyframes v10-word-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.v10-splash-robot,
.v10-splash-dots span {
  will-change: transform, opacity;
}

@keyframes v10-stage-enter {
  0% { opacity: 0; transform: translateY(calc(-1vh + 12px)) scale(0.94); }
  100% { opacity: 1; transform: translateY(-1vh) scale(0.965); }
}

@keyframes v10-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.15); }
}

/* ---------- 2. Ambient glow ---------- */
#homeView {
  background-image:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(139, 92, 246, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 95% 20%, rgba(99, 102, 241, 0.10), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: local;
}

html[data-chati-theme="light"] #homeView {
  background-image:
    radial-gradient(ellipse 70% 45% at 15% 0%, rgba(139, 92, 246, 0.10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 95% 20%, rgba(99, 102, 241, 0.07), transparent 70%);
}

/* ---------- 3. Display font ---------- */
#homeView .top-bar h2,
#homeView h2,
.v9-hero-copy strong,
.character-info h3,
.chat-empty h3,
.create-choice-panel h2,
.v6-panel-identity strong,
.v8-chati-welcome h3 {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.015em;
}

#homeView .top-bar h2 {
  font-weight: 800;
}

/* ---------- 4. Profile cover + stats ---------- */
.v6-profile-panel .v6-panel-head {
  position: relative;
  padding-top: 26px;
  padding-bottom: 18px;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(167, 139, 250, 0.45), transparent 65%),
    linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(99, 102, 241, 0.18));
}

.v6-profile-panel .v6-profile-avatar.large {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 10px 26px rgba(76, 29, 149, 0.45);
}

.v10-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 6px;
}

.v10-profile-stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--v9-surface-line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: var(--v9-accent-soft, rgba(139, 92, 246, 0.16));
}

.v10-profile-stats strong {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.v10-profile-stats small {
  font-size: 11.5px;
  opacity: 0.7;
  text-align: center;
}

/* ---------- 5. Your characters: badge ---------- */
#charactersGrid .character-card {
  position: relative;
}

.v10-last-chat {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-radius: 999px;
  background: rgba(15, 12, 28, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
}

/* ---------- 6. Typing dots ---------- */
.typing-bubble .typing-indicator span {
  background: #a78bfa !important;
  animation: v10-dot 1.1s ease-in-out infinite !important;
}

.typing-bubble .typing-indicator span:nth-child(2) { animation-delay: 0.15s !important; }
.typing-bubble .typing-indicator span:nth-child(3) { animation-delay: 0.3s !important; }

.typing-bubble {
  border-color: var(--v9-accent-line, rgba(167, 139, 250, 0.38)) !important;
}

/* ---------- 7. Image viewer ---------- */
#messages .message-attachment.image img {
  cursor: zoom-in;
}

.v10-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 16px;
  background: rgba(6, 5, 12, 0.92);
  backdrop-filter: blur(10px);
  animation: v10-fade 0.2s ease both;
}

.v10-viewer img {
  max-width: 100%;
  max-height: calc(100% - 70px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: v10-zoom 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.v10-viewer-bar {
  display: flex;
  gap: 10px;
}

.v10-viewer-bar a,
.v10-viewer-bar button {
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.v10-viewer-bar a {
  border-color: transparent;
  background: var(--v9-gradient, linear-gradient(135deg, #a78bfa, #6366f1));
}

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

@keyframes v10-zoom {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* ---------- 8. Toasts ---------- */
.v10-toasts {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(440px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.v10-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #f4f2ff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(24, 20, 40, 0.94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  animation: v10-toast-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.v10-toast-error {
  border-color: rgba(248, 113, 113, 0.45);
}

.v10-toast img {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

.v10-toast span {
  flex: 1;
}

.v10-toast button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  border: 0;
  border-radius: 8px;
  background: transparent;
  opacity: 0.6;
  cursor: pointer;
}

.v10-toast button:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

.v10-toast.v10-toast-out {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@keyframes v10-toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

html[data-chati-theme="light"] .v10-toast {
  color: #1f1b33;
  border-color: rgba(20, 20, 40, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(40, 30, 80, 0.16);
}

/* ---------- 10. Robot in empty states ---------- */
#emptyState .empty-icon {
  background: transparent !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
}

#emptyState .empty-icon .v10-robot {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 6px 16px rgba(124, 58, 237, 0.45));
  animation: v10-bob 2.4s ease-in-out infinite;
}

#homeView.v9-first-run #emptyState .empty-icon {
  display: none;
}

.chat-history-list .history-empty::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 4px auto 8px;
  background: url("assets/icons/favicon.svg") center / contain no-repeat;
  opacity: 0.9;
}

.v6-signed-out-mark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.v6-signed-out-mark .v10-robot {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 8px 22px rgba(124, 58, 237, 0.5));
}

/* ---------- 9. Light theme polish ---------- */
html[data-chati-theme="light"] .v9-hero {
  border-color: rgba(20, 20, 40, 0.08);
  box-shadow: 0 14px 40px rgba(60, 40, 120, 0.18);
}

html[data-chati-theme="light"] .character-card {
  border-color: rgba(20, 20, 40, 0.08);
  box-shadow: 0 6px 20px rgba(60, 40, 120, 0.1);
}

html[data-chati-theme="light"] .v9-tag-chip {
  color: #3b3558;
  background: #fff;
  border-color: rgba(20, 20, 40, 0.1);
}

html[data-chati-theme="light"] .v9-tag-chip.active {
  color: #fff;
  border-color: transparent;
  background: var(--v9-gradient);
}

html[data-chati-theme="light"] .v9-popular-item:hover {
  background: rgba(139, 92, 246, 0.08);
}

html[data-chati-theme="light"] #v6MobileDock {
  box-shadow: 0 10px 30px rgba(60, 40, 120, 0.14);
}

html[data-chati-theme="light"] .v10-profile-stats div {
  background: rgba(139, 92, 246, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .v10-splash-robot,
  .v10-splash-dots span,
  #emptyState .empty-icon .v10-robot,
  .typing-bubble .typing-indicator span,
  .v10-toast,
  .v10-viewer,
  .v10-viewer img {
    animation: none !important;
  }
}

/* ---------- Reply length option in the character editor ---------- */
.reply-length-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.reply-length-field label {
  font-size: 14px;
  font-weight: 600;
}

.reply-length-field select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: inherit;
  border: 1px solid var(--v9-surface-line, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  background: var(--v9-surface, rgba(24, 22, 36, 0.78));
  cursor: pointer;
}

.reply-length-field select:focus {
  outline: none;
  border-color: var(--v9-accent-line, rgba(167, 139, 250, 0.38));
  box-shadow: 0 0 0 3px var(--v9-accent-soft, rgba(139, 92, 246, 0.16));
}

.reply-length-field select option {
  color: #111;
}

.reply-length-field small {
  font-size: 12.5px;
  line-height: 1.45;
  opacity: 0.65;
}