/* Custom CSS for Love Signal 2 - Bright/Light Theme */

:root {
  --pink-primary: #ff4a7d;
  --pink-hover: #e03b68;
  --pink-light: #fff0f3;
  --pink-border: #ffd1db;
  --bg-ambient: linear-gradient(135deg, #fff6f8 0%, #f3f6ff 100%);
  --chat-bg: #fdfefe;
  --chat-bubble-user: linear-gradient(135deg, #ff6b95 0%, #ff4a7d 100%);
  --chat-bubble-ai: #f1f3f9;
  --text-dark: #2c3038;
  --text-muted: #6c757d;
  --tsundere-color: #ff5e7e;
  --gentle-color: #4dabf7;
  --mysterious-color: #9c27b0;
  --kakaopay-bg: #fee500;
  --kakaopay-text: #191919;
}

body {
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  color: var(--text-dark);
  overflow-x: hidden;
  background: #f8fafc;
}

/* Bright Ambient Gradient Background */
.bg-light-ambient {
  background: var(--bg-ambient);
  background-attachment: fixed;
}

/* Ambient glow blobs */
.ambient-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(130px);
  z-index: -1;
  opacity: 0.45;
  pointer-events: none;
}
.glow-pink {
  top: 10%;
  right: -5%;
  background: rgba(255, 74, 125, 0.25);
}
.glow-blue {
  bottom: 10%;
  left: -5%;
  background: rgba(77, 171, 247, 0.2);
}

/* Custom Typography & Spacing */
.tracking-tight {
  letter-spacing: -0.03em;
}
.fs-7 {
  font-size: 0.85rem;
}
.fs-8 {
  font-size: 0.75rem;
}
.text-pink {
  color: var(--pink-primary) !important;
}
.bg-pink-light {
  background-color: var(--pink-light) !important;
}

/* Buttons */
.btn-pink {
  background-color: var(--pink-primary);
  border-color: var(--pink-primary);
  color: white;
  transition: all 0.2s ease;
}
.btn-pink:hover, .btn-pink:focus {
  background-color: var(--pink-hover);
  border-color: var(--pink-hover);
  color: white;
  transform: translateY(-1px);
}
.btn-outline-pink {
  color: var(--pink-primary);
  border-color: var(--pink-primary);
  background-color: transparent;
  transition: all 0.2s ease;
}
.btn-outline-pink:hover {
  background-color: var(--pink-primary);
  border-color: var(--pink-primary);
  color: white;
}

/* KakaoPay Button styling */
.btn-kakaopay {
  background-color: var(--kakaopay-bg);
  border-color: var(--kakaopay-bg);
  color: var(--kakaopay-text);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}
.btn-kakaopay:hover {
  background-color: #f7dd00;
  border-color: #f7dd00;
  color: var(--kakaopay-text);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.pay-logo-symbol {
  height: 18px;
  width: auto;
  object-fit: contain;
}

/* Logo pulse animation */
.animate-pulse {
  animation: logo-pulse 2s infinite ease-in-out;
}
@keyframes logo-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Fade-in transitions */
.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Welcome Banner card */
.welcome-banner {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 240, 243, 0.8) 100%);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.max-w-600 {
  max-width: 600px;
}

/* Character Cards */
.character-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 74, 125, 0.05) !important;
}
.character-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(255, 74, 125, 0.08) !important;
}
.char-img-wrapper {
  height: 240px;
  overflow: hidden;
  background-color: #f1f3f9;
}
.char-img-wrapper img {
  height: 100%;
  width: 100%;
  transition: transform 0.5s ease;
}
.character-card:hover .char-img-wrapper img {
  transform: scale(1.05);
}
.char-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.bg-tsundere { background-color: var(--tsundere-color); }
.bg-gentle { background-color: var(--gentle-color); }
.bg-mysterious { background-color: var(--mysterious-color); }

/* Chat View Panel Layout */
.chat-layout-card {
  height: calc(100vh - 160px);
  min-height: 500px;
}
.chat-sidebar {
  height: 100%;
}
.sidebar-item {
  transition: background-color 0.2s ease;
}
.sidebar-item:hover {
  background-color: var(--pink-light);
}
.sidebar-item.active {
  background-color: var(--pink-light) !important;
  border-left: 4px solid var(--pink-primary) !important;
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.chat-main {
  height: 100%;
}
.bg-light-chat {
  background-color: #f7fafc;
}
.btn-icon {
  background: none;
  border: none;
  color: var(--text-dark);
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}
.btn-icon:hover {
  background-color: #f1f3f9;
}

/* Chat Message Bubbles */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.message-group {
  display: flex;
  align-items: flex-start;
  max-width: 75%;
}
.message-group.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.message-group.model {
  align-self: flex-start;
}
.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.message-bubble {
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  word-break: break-word;
}
.user .message-bubble {
  background: var(--chat-bubble-user);
  color: white;
  border-bottom-right-radius: 4px;
}
.model .message-bubble {
  background: var(--chat-bubble-ai);
  color: var(--text-dark);
  border-bottom-left-radius: 4px;
  border: 1px solid #eef1f6;
}

/* Visual Novel Story Screen Layout */
.novel-screen-wrapper {
  height: calc(100vh - 160px);
  min-height: 520px;
}
.novel-screen {
  height: 100%;
  background-color: #ffe6ea;
  overflow: hidden;
}
.novel-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 230, 234, 0.4) 0%, rgba(255, 240, 243, 0.95) 100%);
  z-index: 1;
}
.novel-character-stand {
  height: 70%;
  bottom: 0;
  z-index: 2;
  transition: all 0.5s ease-in-out;
}
.novel-character-stand img {
  height: 100%;
  width: auto;
  max-width: 100%;
}
.novel-dialog-box {
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  width: 90%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.novel-speaker-badge {
  font-size: 0.95rem;
}
.novel-dialog-text {
  min-height: 56px;
}

/* Decision options overlay style */
.novel-options-overlay {
  z-index: 1000;
}
.novel-options-overlay .card {
  border: 1px solid var(--pink-border);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
}

/* Floating Controls Toolbar & Circle Button */
.novel-controls-toolbar {
  z-index: 1100 !important;
}
.btn-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-circle:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  background: #ffffff;
}

.voyage-status-panel {
  max-width: calc(100% - 220px) !important;
  pointer-events: auto;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.94) 0%, rgba(30, 41, 59, 0.96) 100%) !important;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

.status-item-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: all 0.2s ease;
  padding: 6px 8px;
}
.status-item-badge:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
.status-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.status-value {
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (max-width: 767.98px) {
  .voyage-status-panel {
    max-width: 95% !important;
    top: 55px !important;
  }
}

/* Global loader design */
.loading-overlay {
  z-index: 2000;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
}
.spinner-border.text-pink {
  color: var(--pink-primary) !important;
}

/* Credits Shop Card */
.shop-item-card {
  background: white;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}
.shop-item-card.popular {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(255, 74, 125, 0.12) !important;
}
.shop-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}
.shop-item-card.popular:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 28px rgba(255, 74, 125, 0.16) !important;
}

/* Custom Scrollbar for Chat */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
  .chat-layout-card {
    height: calc(100vh - 110px);
  }
  .novel-screen-wrapper {
    height: calc(100vh - 110px);
  }
  .novel-character-stand {
    height: 55%;
  }
  .novel-dialog-box {
    width: 95%;
    padding: 16px !important;
  }
}

/* Auth Modal Tabs Styling */
#authTab {
  background: var(--pink-primary);
}
#authTab .nav-link {
  background: transparent;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 0;
  border: none;
  transition: all 0.2s ease;
}
#authTab .nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
}
#authTab .nav-link.active {
  background: #ffffff !important;
  color: var(--pink-primary) !important;
}

/* Policy Modal Custom Tabs */
#policyTab {
  background: #6c757d;
}
#policyTab .nav-link {
  background: transparent;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 0;
  border: none;
  transition: all 0.2s ease;
}
#policyTab .nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
}
#policyTab .nav-link.active {
  background: #ffffff !important;
  color: #6c757d !important;
}

.w-33 {
  width: 33.33% !important;
}
.w-34 {
  width: 33.34% !important;
}

/* Model Tier & Story Route Selection Cards */
.cursor-pointer {
  cursor: pointer;
}
.model-tier-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: #ffffff;
}
.model-tier-card:hover {
  transform: translateY(-3px);
  border-color: var(--pink-primary) !important;
  box-shadow: 0 6px 16px rgba(255, 74, 125, 0.12) !important;
}
.model-tier-card.active-tier {
  border-color: var(--pink-primary) !important;
  background: linear-gradient(135deg, #ffffff 0%, #fff6f8 100%) !important;
  box-shadow: 0 4px 14px rgba(255, 74, 125, 0.15) !important;
}
.story-route-card {
  transition: all 0.2s ease;
  background: #ffffff;
}
.story-route-card:hover {
  transform: translateX(4px);
  border-color: var(--pink-primary) !important;
  background: #fff8f9;
}
.story-route-card.active-route {
  border-color: var(--pink-primary) !important;
  background: #fff0f3 !important;
}
.shadow-xs {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.fs-9 {
  font-size: 0.72rem;
}

/* Novel Generating State in Dialog Box */
.novel-generating-box {
  animation: fadeIn 0.3s ease-out;
}
#generating-flavor-quote {
  transition: opacity 0.25s ease-in-out;
}
.novel-dialog-box.generating-active {
  border: 2px solid rgba(255, 74, 125, 0.4) !important;
  box-shadow: 0 10px 30px rgba(255, 74, 125, 0.2) !important;
}

/* AI Illustration Generation & Blur Paywall Styles */
.btn-ai-gen {
  background: linear-gradient(135deg, #ff4a7d 0%, #a855f7 100%);
  color: white;
  border: none;
  transition: all 0.25s ease;
}
.btn-ai-gen:hover {
  background: linear-gradient(135deg, #e03b68 0%, #9333ea 100%);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}

.blur-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #1a1a24;
}

.blur-image-target {
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s ease;
}

.blur-image-target.blurred {
  filter: blur(20px) brightness(0.75);
  transform: scale(1.06);
}

.blur-image-target.unblurred {
  filter: blur(0px) brightness(1);
  transform: scale(1);
}

.blur-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.blur-lock-overlay.unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.blur-lock-card {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.illustration-preview-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 2px dashed rgba(255, 74, 125, 0.4);
  background: #fff8f9;
}





/* AI Live Expression Transitions & Styling */
#live-expression-img {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
}
#live-expression-img.pop-anim {
  transform: scale(1.08);
}
.expr-chip {
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.expr-chip:hover {
  background: #fff0f5;
  border-color: #ff4d88;
  color: #ff4d88;
  transform: translateY(-1px);
}
.expr-chip.active {
  background: #ff4d88;
  color: white;
  border-color: #ff4d88;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255, 77, 136, 0.35);
}
.expr-chip img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

/* Big Portrait & Story Stage Styling */
.harin-portrait-wrapper {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(255, 77, 136, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.harin-portrait-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(255, 77, 136, 0.25);
}
#harin-big-portrait {
  width: 100%;
  max-width: 320px;
  height: 380px;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#harin-big-portrait.pop-anim {
  transform: scale(1.04);
}
.choice-chip {
  cursor: pointer;
  background: #fff0f5;
  color: #d63384;
  border: 1px solid #ffccd8;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 0.78rem;
  transition: all 0.2s ease;
  user-select: none;
}
.choice-chip:hover {
  background: #ff4d88;
  color: white;
  border-color: #ff4d88;
  transform: translateY(-1px);
}
.choice-chip-refresh {
  cursor: pointer;
  background: #f8fafc;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 0.78rem;
  transition: all 0.2s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.choice-chip-refresh:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
  border-style: solid;
  transform: translateY(-1px);
}
.choice-chip-refresh:active i {
  transform: rotate(180deg);
  transition: transform 0.25s ease;
}

/* =========================================================
   Mobile Viewport & Screen Fit Enhancements (Aichat 16)
   ========================================================= */
@media (max-width: 767.98px) {
  /* Prevent full-page cut off, fit exactly to screen */
  body {
    overflow-x: hidden;
  }
  
  /* Smart Auto-hide Navbar for Mobile Chat */
  nav.navbar {
    transition: transform 0.25s ease-out, margin-top 0.25s ease-out;
  }
  nav.navbar.navbar-scrolled-hidden {
    transform: translateY(-100%);
  }
  
  /* When navbar is scrolled away, expand chat card to 100% viewport */
  body.chat-nav-hidden .chat-layout-card {
    height: 100dvh !important;
    margin-top: -65px !important;
  }
  
  /* Compact mobile navbar so it never takes excessive vertical space */
  .navbar .container {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .navbar-brand {
    font-size: 0.92rem !important;
  }
  #navbar-credit-badge {
    padding: 3px 8px !important;
    font-size: 0.76rem !important;
  }
  #navbar-user-badge button {
    padding: 2px 7px !important;
    font-size: 0.72rem !important;
  }
  #open-shop-btn {
    padding: 3px 9px !important;
    font-size: 0.76rem !important;
  }

  .chat-layout-card {
    height: calc(100dvh - 65px) !important;
    min-height: unset !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    transition: height 0.25s ease-out, margin-top 0.25s ease-out;
  }
  .chat-main {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #chat-messages-log {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px !important;
  }
  .message-group {
    margin-bottom: 12px;
  }
  .message-bubble {
    max-width: 84% !important;
    font-size: 0.88rem !important;
    padding: 8px 12px !important;
    line-height: 1.45;
  }
  .message-avatar {
    width: 32px !important;
    height: 32px !important;
    margin-right: 6px !important;
  }
  
  /* Choice Chips: Keep 3 vertical items clearly visible, but optimize padding & density */
  #story-choices-bar {
    max-height: 96px;
    overflow-y: auto;
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  .choice-chip {
    font-size: 0.76rem !important;
    padding: 4px 10px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  #chat-input-container {
    padding: 6px 10px !important;
    background: #ffffff;
    z-index: 10;
  }
  #chat-text-input {
    font-size: 0.85rem !important;
    padding: 6px 12px !important;
  }
  #chat-send-btn {
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
  }
}

/* =========================================================
   Aichat 17: Large Profile & Grand Visual Novel Experience
   ========================================================= */
.message-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  border: 2px solid #ff4d88 !important;
  box-shadow: 0 4px 10px rgba(255, 77, 136, 0.2) !important;
  object-fit: cover !important;
  object-position: top center !important;
  transition: transform 0.2s ease;
}
.message-avatar:hover {
  transform: scale(1.1);
}

/* Big portrait hover & click effect */
.mobile-portrait-zoom-trigger {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.mobile-portrait-zoom-trigger:active {
  transform: scale(0.96);
}
#desktop-portrait-wrapper {
  cursor: pointer;
}

@media (max-width: 767.98px) {
  /* Mobile Stage: Spacious & Clear without covering the whole screen */
  .chat-layout-card {
    height: calc(100dvh - 65px) !important;
    display: flex;
    flex-direction: column;
  }
  .mobile-hero-stage {
    min-height: 140px;
    padding: 10px 12px !important;
  }
  .message-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    margin-right: 8px !important;
  }
  .message-bubble {
    max-width: 82% !important;
    font-size: 0.9rem !important;
    padding: 9px 13px !important;
  }
}

/* Fullscreen modal styling */
#character-fullscreen-modal .modal-content {
  border: 2px solid #ff80ab !important;
}

/* =========================================================
   Aichat 18: Emotional Typewriter Cursor & Human Pacing
   ========================================================= */
.typing-cursor {
  display: inline-block;
  width: 2.5px;
  height: 1.15em;
  background-color: #ff4d88;
  vertical-align: text-bottom;
  margin-left: 2px;
  border-radius: 1px;
  animation: typingCursorBlink 0.65s infinite ease-in-out;
}

@keyframes typingCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.message-bubble.is-typing {
  border-bottom-left-radius: 6px !important;
  cursor: pointer;
  position: relative;
}

.message-bubble.is-typing:hover::after {
  content: "클릭 시 즉시 완성";
  position: absolute;
  top: -18px;
  right: 6px;
  font-size: 0.65rem;
  color: #ff4d88;
  background: #fff0f5;
  padding: 1px 6px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}


/* =========================================================
   Aichat 20: Bright Visual Novel Story UI (UI 1 - Default)
   vs Classic Messenger UI (UI 2)
   ========================================================= */

/* --- UI 1 Mode: Novel Story Stream Layout --- */
#chat-view.ui-mode-novel .harin-portrait-panel {
  display: none !important;
}

#chat-view.ui-mode-novel .mobile-hero-stage {
  display: none !important;
}

#chat-view.ui-mode-novel .chat-main {
  width: 100% !important;
  max-width: 100% !important;
  background-color: #faf8f9 !important;
}

#chat-view.ui-mode-novel #chat-messages-log {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem 1rem !important;
  background-color: transparent !important;
}

/* User Message in UI 1: Clean, right-aligned gentle card */
.novel-msg-user-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
  width: 100%;
}
.novel-msg-user {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #fecdd3;
  border-radius: 18px 18px 4px 18px;
  padding: 12px 18px;
  max-width: 82%;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.06);
  font-size: 0.96rem;
  line-height: 1.65;
  word-break: break-word;
}

/* AI Message in UI 1: Spacious, Novel-style reading experience */
.novel-msg-ai-wrap {
  margin-bottom: 2.2rem;
  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid #fce7f3;
  box-shadow: 0 4px 20px rgba(225, 29, 72, 0.05);
  transition: all 0.25s ease;
  width: 100%;
}

.novel-char-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.novel-char-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #be185d;
}
.novel-char-badge img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #f43f5e;
}

.novel-text-content {
  font-size: 1.04rem;
  line-height: 1.85;
  color: #334155;
  letter-spacing: -0.015em;
  word-break: break-word;
}

/* Dialogue quote highlight (Speech) - Bright Rose/Pink Accent */
.novel-speech-highlight {
  color: #e11d48 !important;
  font-weight: 600;
  display: block;
  margin: 0.75rem 0;
  padding-left: 4px;
  font-size: 1.08rem;
  line-height: 1.7;
}

/* Character Picture Card in Stream (As shown in user's reference image!) */
.novel-stream-pic-card {
  max-width: 480px;
  width: 100%;
  margin: 1.25rem auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 3px solid #ffffff;
  position: relative;
  cursor: pointer;
  background: #fff0f5;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.novel-stream-pic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(225, 29, 72, 0.15);
}
.novel-stream-pic-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: filter 0.3s ease;
}
.novel-stream-pic-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 0.8rem;
}

/* Action Icons Bar under message (copy, retry, bookmark, zoom) */
.novel-msg-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #f8fafc;
  color: #94a3b8;
  font-size: 0.88rem;
}
.novel-msg-actions button {
  background: none;
  border: none;
  color: #94a3b8;
  padding: 4px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.novel-msg-actions button:hover {
  color: #e11d48;
}

/* UI 1 Novel Input Dock (Floats elegantly above bottom) */
#chat-view.ui-mode-novel #chat-input-container {
  background: #faf8f9 !important;
  border-top: none !important;
  padding: 0.5rem 1rem 1.25rem 1rem !important;
}

.novel-dock-card {
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 6px 24px rgba(225, 29, 72, 0.09);
  border: 1.5px solid #fce7f3;
  padding: 10px 14px 12px 14px;
}

.novel-dock-upper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.novel-dock-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 0.98rem;
  padding: 8px 6px;
  color: #1e293b;
  flex: 1;
}
.novel-dock-input:focus {
  outline: none;
}

.novel-dock-continue-btn {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  color: #ffffff !important;
  border: none;
  border-radius: 50rem;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(225, 29, 72, 0.3);
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
}
.novel-dock-continue-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(225, 29, 72, 0.4);
}

.novel-dock-lower {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid #fdf2f8;
}

.novel-quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
}
.novel-chip {
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.novel-chip:hover {
  background: #fce7f3;
  color: #9d174d;
}

/* --- UI 2 Mode: Classic Messenger Layout --- */
#chat-view.ui-mode-messenger .harin-portrait-panel {
  display: flex !important;
}
#chat-view.ui-mode-messenger .novel-dock-card {
  border-radius: 50rem;
}

/* UI 1 Novel Mode Mobile Reading Optimization */
@media (max-width: 767.98px) {
  #chat-view.ui-mode-novel #chat-messages-log {
    padding: 0.8rem 0.5rem 2.5rem 0.5rem !important;
  }
  #chat-view.ui-mode-novel .novel-msg-ai-wrap {
    padding: 1.1rem 0.85rem 1rem 0.85rem !important;
    border-radius: 18px !important;
    margin-bottom: 1.5rem !important;
  }
  #chat-view.ui-mode-novel .novel-text-content {
    font-size: 1.0rem !important;
    line-height: 1.75 !important;
  }
  /* Hide redundant AI model status bar above choices (accessible via dock) */
  #chat-view.ui-mode-novel #chat-model-statusbar {
    display: none !important;
  }
  #chat-view.ui-mode-novel .novel-dock-card {
    padding: 8px 12px 10px 12px !important;
    border-radius: 18px !important;
  }
}

/* ==========================================================================
   aichat26: Bright Profile Detail & Pre-Chat Multi-Illustration Carousel UI
   ========================================================================== */

.profile-modal-content {
  border-radius: 28px !important;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.16) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  background: #ffffff !important;
}

.profile-nav-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease;
}

.profile-nav-btn:hover {
  background: #f1f5f9 !important;
  transform: translateY(-1px);
}

.profile-carousel-container {
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #f5f3ff 100%);
  position: relative;
  user-select: none;
}

.profile-exclusive-badge {
  background: linear-gradient(135deg, #ff4081 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.btn-white-glass {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease;
}

.btn-white-glass:hover {
  background: #ffffff !important;
  transform: scale(1.08);
}

.profile-slide-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 460px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.5) 100%);
}

#profile-main-slide-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

.carousel-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-nav-arrow:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  color: #ff4081;
}

.carousel-nav-arrow.arrow-left {
  left: 12px;
}

.carousel-nav-arrow.arrow-right {
  right: 12px;
}

.profile-char-overlay-tag {
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.65) 100%);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  max-width: 220px;
}

.profile-char-overlay-tag .char-overlay-name {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.profile-char-overlay-tag .char-overlay-sub {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.profile-page-counter {
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(8px);
  color: #ffffff !important;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.profile-thumbnail-chip {
  width: 52px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.22s ease;
  opacity: 0.55;
  background: #f1f5f9;
  position: relative;
}

.profile-thumbnail-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.profile-thumbnail-chip:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.profile-thumbnail-chip.active {
  border-color: #ff4081;
  opacity: 1;
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(255, 64, 129, 0.35);
}

.profile-tag-chip {
  background: #f8fafc;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 50px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
  user-select: none;
}

.profile-tag-chip:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.profile-follow-btn {
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.profile-follow-btn.following {
  background: #ff4081 !important;
  color: #ffffff !important;
  border-color: #ff4081 !important;
}

.profile-heart-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff0f5;
  border: 1px solid #ffd1db;
  transition: all 0.2s ease;
}

.profile-heart-btn:hover {
  background: #ffe4ec;
  transform: scale(1.08);
}

.profile-heart-btn.liked i {
  font-weight: 900 !important;
  color: #ff4081 !important;
  animation: heartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.profile-start-chat-btn {
  background: linear-gradient(135deg, #ff4081 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 22px rgba(255, 64, 129, 0.38) !important;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
}

.profile-start-chat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255, 64, 129, 0.5) !important;
}

/* Worldbuilding RPG */
.worldsim-view{color:#eef7ff}.worldsim-shell{max-width:780px;margin:0 auto;background:#070b14;border:1px solid #164e63;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px #02061740}.worldsim-header{height:64px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:#030712;border-bottom:1px solid #132234;color:#21d4ec}.worldsim-header>span:first-child{font-size:11px;font-weight:700}.worldsim-header strong{color:#fff;font-size:18px}.worldsim-credit{font-size:13px}.worldsim-setup{padding:30px 24px 26px;min-height:350px}.worldsim-step-title{text-align:center;font-size:19px;font-weight:700;margin:2px 0 8px}.worldsim-step-help{text-align:center;color:#bed1e3;font-size:14px;line-height:1.7;margin:0 auto 22px;max-width:560px}.worldsim-field{display:block;width:min(100%,560px);margin:0 auto 15px;background:#050912;border:1px solid #15566b;border-radius:12px;padding:13px;color:#effbff}.worldsim-field:focus{outline:2px solid #0891b2}.worldsim-field-label{display:block;width:min(100%,560px);margin:14px auto 6px;font-size:12px;color:#76d9e8}.worldsim-select{appearance:auto}.worldsim-setup-actions{display:flex;justify-content:space-between;gap:10px;max-width:560px;margin:22px auto 0}.worldsim-btn{border:1px solid #087c91;background:#08202b;color:#bff7ff;border-radius:9px;padding:10px 18px;font-weight:700}.worldsim-btn.primary{background:#087e95;color:white}.worldsim-progress{height:3px;background:#083442;margin:0 22px}.worldsim-progress span{height:100%;display:block;background:#00bcd4;transition:width .2s}.worldsim-play{padding:22px 20px 18px}.worldsim-story{white-space:pre-wrap;line-height:1.85;color:#eee;padding:0 4px 20px;min-height:40px}.worldsim-status-card{background:#0f172a;border:1px solid #087e95;border-radius:14px;padding:16px;color:#eff6ff}.worldsim-status-top{display:flex;justify-content:space-between;align-items:start;color:#21cbe4}.worldsim-kicker{font-size:14px}.worldsim-date{font-size:12px;margin:7px 0 0 22px;color:#41cce1}.worldsim-pill{border:1px solid #087e95;border-radius:9px;padding:6px 10px;font-size:12px}.worldsim-status-line{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:14px}.worldsim-status-line>i,.worldsim-section-label i{width:14px;color:#2bd3e5}.worldsim-status-line #worldsim-cast{display:grid;gap:5px}.worldsim-cast-item{display:flex;align-items:center;gap:8px}.worldsim-cast-mark{font-size:10px;border:1px solid #27718f;color:#7dd3fc;padding:1px 4px;border-radius:3px}.worldsim-status-card hr{border-color:#1c4556;opacity:1;margin:15px 0}.worldsim-details{color:#23cde1;margin-top:14px;font-size:14px;font-weight:700}.worldsim-details>div{display:flex;gap:12px;flex-wrap:wrap;padding:10px;color:#b8cedd;font-size:12px}.worldsim-section-label{font-size:12px;color:#28d0e3;margin:13px 0 6px}.worldsim-box{border:1px solid #203348;border-radius:9px;padding:10px;font-size:13px;color:#d6e8f6}.worldsim-goal{border:1px solid #087e95;border-radius:11px;padding:12px;margin-top:13px;background:#102033}.worldsim-goal strong{font-size:14px}.worldsim-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.worldsim-actions button,.worldsim-choices button{border:1px solid #087e95;background:#10192b;color:#b9f5ff;border-radius:9px;padding:10px 6px;font-size:13px;font-weight:700}.worldsim-actions button:hover,.worldsim-choices button:hover{background:#0b3443}.worldsim-choices{display:flex;flex-direction:column;gap:7px;margin:12px 0}.worldsim-choices button{text-align:left;padding:11px 13px}.worldsim-input{display:flex;gap:8px}.worldsim-input input{min-width:0;flex:1;background:#090f1c;border:1px solid #284054;color:white;border-radius:10px;padding:12px}.worldsim-input button{background:#087e95;border:0;color:white;border-radius:10px;padding:0 18px;font-weight:700}.worldsim-reset{display:block;margin:12px auto 0;background:none;border:0;color:#98aabc;font-size:12px}.worldsim-notice{padding:0 22px 15px;text-align:center;color:#22c8df;font-size:13px}.worldsim-notice:empty{display:none}@media(max-width:560px){.worldsim-header{padding:0 13px}.worldsim-setup{padding:22px 15px}.worldsim-play{padding:14px 12px}.worldsim-actions{grid-template-columns:repeat(2,1fr)}.worldsim-status-card{padding:13px}.worldsim-header strong{font-size:15px}}

/* World RPG 2 — light story workshop */
.worldsim2-view{padding:8px 0 28px;color:#263b37}.w2-shell{max-width:1180px;margin:0 auto;background:#f5faf7;border:1px solid #dcebe2;border-radius:22px;padding:22px;box-shadow:0 16px 42px #25463812}.w2-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 20px}.w2-brand,.w2-eyebrow{color:#27876b;font-size:11px;font-weight:800;letter-spacing:.11em}.w2-top h1{font-size:28px;margin:6px 0;color:#1e3930}.w2-top p{margin:0;color:#71827b}.w2-credit{background:#fff;border:1px solid #dcebe2;border-radius:999px;padding:10px 15px;color:#27876b;white-space:nowrap}.w2-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:18px;align-items:start}.w2-card{background:#fff;border:1px solid #dfebe4;border-radius:18px;box-shadow:0 8px 26px #2444360a}.w2-builder{padding:22px}.w2-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.w2-heading h2{font-size:19px;margin:5px 0 0}.w2-chip{font-size:11px;color:#628074;background:#eff8f2;padding:7px 10px;border-radius:99px}.w2-origin{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:18px}.w2-origin-card{background:#fbfdfb;border:1px solid #dce9e1;border-radius:12px;padding:13px;text-align:left;min-height:95px;color:#36564a}.w2-origin-card b,.w2-origin-card span{display:block}.w2-origin-card b{font-size:13px;margin-bottom:7px}.w2-origin-card span{font-size:11px;line-height:1.55;color:#74877e}.w2-origin-card.selected{border-color:#62ae8c;background:#f0faf4;box-shadow:0 0 0 2px #62ae8c20}.w2-label{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:7px}.w2-label span{font-size:11px;color:#87968f;font-weight:500}#w2-seed,.w2-select-grid select,.w2-advanced input:not([type=checkbox]):not([type=range]){width:100%;border:1px solid #d7e5dc;background:#fbfdfb;border-radius:10px;padding:11px;color:#263b37}#w2-seed{resize:vertical;line-height:1.6}.w2-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.w2-select-grid>label,.w2-advanced-grid>label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#4d685c}.w2-select-grid select{font-size:12px}.w2-advanced,.w2-examples{border-top:1px solid #edf2ee;padding:13px 0;color:#426154}.w2-advanced summary,.w2-examples summary{cursor:pointer;font-weight:700;font-size:13px}.w2-advanced summary small{font-weight:400;color:#85958c;margin-left:8px}.w2-advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px 2px 4px}.w2-advanced-grid input{font-weight:400}.w2-wide{grid-column:1/-1}.w2-checks{display:flex;flex-wrap:wrap;gap:8px}.w2-checks label{font-weight:500;background:#f3f8f4;border-radius:8px;padding:7px 9px}.w2-checks input{accent-color:#398b6d}.w2-advanced input[type=range]{accent-color:#398b6d}.w2-examples>div{display:grid;gap:6px;padding-top:10px}.w2-examples button{border:0;background:#f2f8f4;text-align:left;padding:9px 11px;border-radius:8px;color:#3d6755}.w2-actions{display:flex;gap:10px;margin-top:12px}.w2-actions button,.w2-input button{border:0;border-radius:10px;padding:12px 16px;font-weight:700}.w2-quiet{background:#f2f6f3;color:#71827a}.w2-primary,.w2-input button{background:#318768;color:#fff}.w2-actions .w2-primary{flex:1}.w2-builder #w2-notice{min-height:18px;margin:10px 0 0;color:#328363;font-size:12px}.w2-play{padding:20px;position:sticky;top:16px;min-height:300px}.w2-empty{text-align:center;padding:48px 20px;color:#75877e}.w2-empty>span{font-size:34px;color:#7db69b}.w2-empty h2{font-size:17px;color:#385a4b}.w2-empty p{font-size:13px;line-height:1.7}.w2-play-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eaf0ec;padding-bottom:13px}.w2-play-header h2{font-size:17px;margin:0;color:#28533f}.w2-turn{font-size:11px;background:#eff8f2;color:#398768;padding:6px 9px;border-radius:99px}.w2-scene{white-space:pre-wrap;line-height:1.85;color:#354b41;padding:18px 2px}.w2-status{background:#f4faf6;border:1px solid #deeee3;border-radius:12px;padding:13px;font-size:12px;line-height:1.7;color:#547064}.w2-status b{color:#2b7255}.w2-choices{display:grid;gap:7px;margin:13px 0}.w2-choices button{border:1px solid #d9e9de;background:#fff;border-radius:10px;padding:10px;text-align:left;color:#38664f}.w2-input{display:flex;gap:8px}.w2-input input{flex:1;min-width:0;border:1px solid #d7e5dc;border-radius:10px;padding:11px}.w2-play-reset{display:block;margin:13px auto 0;border:0;background:none;color:#82928a;font-size:11px}.w2-busy{opacity:.65;pointer-events:none}@media(max-width:850px){.w2-layout{grid-template-columns:1fr}.w2-play{position:static}}@media(max-width:560px){.w2-shell{padding:12px;border-radius:14px}.w2-top{padding:5px 4px 15px}.w2-top h1{font-size:23px}.w2-top p{font-size:12px}.w2-builder{padding:15px}.w2-origin{grid-template-columns:1fr}.w2-origin-card{min-height:0}.w2-select-grid{grid-template-columns:1fr}.w2-advanced-grid{grid-template-columns:1fr}.w2-wide{grid-column:auto}.w2-actions button{padding:11px 10px;font-size:12px}}
.exs-shell{--exs-ink:#292538;--exs-muted:#817d8d;--exs-line:#eeeaf1;--exs-pink:#ec3568;max-width:1180px;margin:0 auto;padding:8px 0 42px;color:var(--exs-ink)}
.exs-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;padding:30px 34px;margin-bottom:20px;border:1px solid #f4dbe4;border-radius:24px;background:radial-gradient(circle at 90% 10%,#ffd6e4 0,transparent 32%),linear-gradient(120deg,#fff8fa,#fff 58%,#f7f3ff);box-shadow:0 12px 32px #34233b0c}
.exs-eyebrow,.exs-kicker{display:block;color:#d72a5b;font-size:.68rem;font-weight:850;letter-spacing:.13em}
.exs-hero h1{margin:8px 0;font-size:clamp(1.6rem,4vw,2.3rem);font-weight:900;letter-spacing:-.045em}
.exs-hero p{max-width:650px;margin:0 0 14px;color:#686476;line-height:1.7}
.exs-note{display:inline-flex;align-items:center;gap:7px;color:#8a5267;font-size:.8rem;font-weight:700}
.exs-hero-icon{flex:0 0 auto;display:grid;place-items:center;width:104px;height:104px;border-radius:30px;background:#fff;color:#ea3567;font-size:3.4rem;box-shadow:0 12px 32px #db3b7318;transform:rotate(5deg)}
.exs-panel{padding:22px;border:1px solid var(--exs-line);border-radius:20px;background:#fff;box-shadow:0 8px 25px #34233b08}
.exs-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.exs-section-head h2{margin:3px 0 0;font-size:1.1rem;font-weight:850;letter-spacing:-.03em}
.exs-count{padding:6px 10px;border-radius:999px;background:#fff1f5;color:#d72a5b;font-size:.72rem;font-weight:800}
.exs-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:11px}
.exs-performer{display:flex;align-items:center;gap:11px;min-width:0;padding:10px;border:1px solid #efedf1;border-radius:15px;background:#fff;text-align:left;transition:.18s ease}
.exs-performer:hover{border-color:#f1a0b7;transform:translateY(-2px)}
.exs-performer.is-selected{border:2px solid var(--exs-pink);background:#fff6f8;box-shadow:0 5px 18px #ea35671a}
.exs-performer img{flex:0 0 auto;width:48px;height:58px;object-fit:cover;object-position:top;border-radius:10px;background:#f5f2f5}
.exs-performer span{display:grid;min-width:0;gap:4px}.exs-performer b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}.exs-performer small{color:var(--exs-muted);font-size:.7rem}
.exs-start-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #f1eef2}
.exs-start-row p{margin:0;color:var(--exs-muted);font-size:.78rem}
.exs-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:0;border-radius:13px;background:linear-gradient(135deg,#ed3568,#ca2456);color:white;font-weight:850;box-shadow:0 8px 18px #d431601f}
.exs-primary:disabled{opacity:.55;cursor:wait}
.exs-empty{padding:30px;text-align:center;color:var(--exs-muted)}
.exs-live-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.exs-back{padding:0;border:0;background:transparent;color:#746f7d;font-size:.8rem;font-weight:700}.exs-back:hover{color:var(--exs-pink)}
.exs-live-head h1{margin:5px 0 0;font-size:1.45rem;font-weight:950;letter-spacing:-.04em}.exs-live-head h1 small{font-size:.74rem;color:#777281;font-weight:700;letter-spacing:0}
.exs-live-dot{display:inline-block;width:9px;height:9px;margin:0 5px 2px 0;border-radius:50%;background:#f03357;box-shadow:0 0 0 4px #ffe5ea;animation:exs-pulse 1.5s infinite}
@keyframes exs-pulse{50%{box-shadow:0 0 0 7px #ffe5ea80}}
.exs-turn{padding:8px 12px;border:1px solid #f2d4df;border-radius:999px;background:#fff5f8;color:#c72a56;font-size:.75rem;font-weight:850;letter-spacing:.04em}
.exs-live-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.8fr);align-items:start;gap:16px}
.exs-stream-column{display:grid;gap:12px;min-width:0}
.exs-stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:350px;border-radius:22px;background:radial-gradient(circle at center,#4d4259,#171522 70%);box-shadow:0 12px 32px #1b152633}
.exs-main-image{width:100%;height:clamp(350px,48vw,525px);object-fit:contain;object-position:center top}
.exs-onair{position:absolute;left:15px;top:15px;display:grid;gap:5px;min-width:125px;padding:11px 13px;border:1px solid #ffffff33;border-radius:14px;background:#191522bf;color:white;backdrop-filter:blur(12px)}
.exs-onair span{color:#ff587a;font-size:.62rem;font-weight:900;letter-spacing:.1em}.exs-onair b{font-size:1rem}.exs-onair small{color:#ede7f0;font-size:.73rem}
.exs-viewers{position:absolute;right:14px;top:15px;padding:8px 10px;border:1px solid #ffffff33;border-radius:999px;background:#191522bf;color:white;font-size:.72rem;font-weight:800;backdrop-filter:blur(12px)}
.exs-expression-strip{display:flex;gap:8px;overflow:auto;padding:2px 1px 5px;scrollbar-width:thin}
.exs-expression{flex:0 0 81px;display:grid;gap:5px;min-width:0;padding:5px;border:1px solid var(--exs-line);border-radius:12px;background:white;color:#777281;font-size:.64rem;text-align:center}
.exs-expression.selected{border-color:#eb3b6b;background:#fff4f7;color:#c82957}.exs-expression img{width:100%;height:76px;object-fit:cover;object-position:top;border-radius:8px}
.exs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.exs-stats>div{display:grid;gap:5px;padding:12px;border:1px solid var(--exs-line);border-radius:13px;background:#fff}.exs-stats small{color:var(--exs-muted);font-size:.68rem}.exs-stats b{font-size:1rem;font-weight:900}.exs-stats b span{font-size:.68rem;color:var(--exs-muted)}
.exs-actions-panel{padding:17px}.exs-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.exs-action{display:grid;justify-items:start;gap:5px;padding:13px;border:1px solid #f0eaf0;border-radius:13px;background:#fff;color:#413b4c;text-align:left;transition:.16s}.exs-action:hover:not(:disabled){transform:translateY(-2px);border-color:#ec93ad;background:#fff8fa}.exs-action i{color:#e33366;font-size:1.05rem}.exs-action b{font-size:.82rem}.exs-action small{color:#948e9c;font-size:.67rem}.exs-action:disabled{opacity:.55}
.exs-side{display:grid;gap:13px}.exs-side .exs-panel{padding:17px}.exs-red{color:#e43164}.exs-rank-list{display:grid;gap:7px}.exs-rank-row{display:grid;grid-template-columns:24px 34px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border-radius:12px;background:#f9f8fa}.exs-rank-row.mine{border:1px solid #f1b1c4;background:#fff2f6}.exs-rank-number{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#ece9ef;font-size:.72rem;font-weight:900}.exs-rank-row:first-child .exs-rank-number{background:#ffedbc;color:#a56a00}.exs-rank-row img{width:34px;height:38px;object-fit:cover;object-position:top;border-radius:8px}.exs-rank-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}.exs-rank-row>span:last-child{color:#786f80;font-size:.68rem;font-weight:800}
.exs-chat-panel{min-height:260px}.exs-chat-feed{display:flex;flex-direction:column;gap:9px;max-height:310px;overflow:auto}.exs-chat-line{display:grid;gap:2px;font-size:.74rem;line-height:1.45}.exs-chat-line b{color:#d52d5d;font-size:.68rem}.exs-chat-line span{color:#635d6b}.exs-chat-line.mine{padding:8px;border-radius:10px;background:#fff2f6}.exs-chat-line.mine b{color:#493247}.exs-side-note{margin:0;color:#817b89;font-size:.71rem;line-height:1.5}.exs-result{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #ebe6ed;border-radius:17px;background:#faf8fb}.exs-result.winner{border-color:#f0dcaa;background:linear-gradient(110deg,#fff9e8,#fff)}.exs-result>span{font-size:1.8rem}.exs-result>div{display:grid;flex:1;gap:5px}.exs-result b{font-size:.93rem}.exs-result small{color:#777281;line-height:1.45}.exs-result .exs-primary{flex:0 0 auto;padding:9px 13px;font-size:.78rem}
.exs-tip-note{margin:-4px 0 12px;color:#817b89;font-size:.73rem;line-height:1.5}.exs-action.exs-gift{border-color:#f2dbe3;background:linear-gradient(145deg,#fff,#fff6f9)}.exs-action.exs-gift small{color:#bf2c56;font-weight:800}.exs-action.exs-free-chat{border-style:dashed}
.exs-chat-composer form{display:grid;gap:9px}.exs-chat-composer textarea{width:100%;min-height:82px;resize:vertical;padding:11px 12px;border:1px solid #e9e2eb;border-radius:12px;background:#fff;color:#342d3b;font:inherit;font-size:.84rem}.exs-chat-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.exs-chat-controls label{display:flex;align-items:center;gap:7px;color:#746d7b;font-size:.74rem}.exs-chat-controls select{max-width:210px;padding:8px;border:1px solid #e9e2eb;border-radius:9px;background:white;color:#423b49;font:inherit}.exs-chat-controls>b{margin-left:auto;color:#c72a56;font-size:.82rem}.exs-chat-controls .exs-primary{padding:9px 14px;border:0;border-radius:999px;background:#e33366;color:#fff;font-weight:800}.exs-chat-controls .exs-primary:disabled{opacity:.6}.exs-choices{display:flex;gap:7px;overflow:auto;padding:2px 0}.exs-choice{flex:0 0 auto;padding:7px 10px;border:1px solid #f0d8e1;border-radius:999px;background:#fff7fa;color:#a82a50;font-size:.7rem}.exs-chat-line.bj{padding:8px;border-radius:10px;background:#f4f1fb}.exs-chat-line.bj b{color:#6851a5}
@media(max-width:800px){.exs-live-grid{grid-template-columns:1fr}.exs-side{grid-template-columns:1fr 1fr}.exs-side-note{grid-column:1/-1}}
@media(max-width:560px){.exs-shell{padding-top:0}.exs-hero{padding:22px 18px;border-radius:18px}.exs-hero-icon{width:62px;height:62px;border-radius:20px;font-size:2rem}.exs-hero p{font-size:.87rem}.exs-panel{padding:16px}.exs-roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.exs-performer{gap:7px;padding:7px}.exs-performer img{width:38px;height:48px}.exs-performer b{font-size:.78rem}.exs-performer small{font-size:.6rem}.exs-start-row{align-items:flex-start;flex-direction:column}.exs-start-row .exs-primary{width:100%}.exs-stage{min-height:300px}.exs-main-image{height:380px}.exs-side{grid-template-columns:1fr}.exs-result{align-items:flex-start;flex-wrap:wrap}.exs-result>div{min-width:calc(100% - 58px)}.exs-result .exs-primary{width:100%}.exs-rank-row{grid-template-columns:24px 32px minmax(0,1fr) auto}}
.cg2-summary-text.cg2-summary-expanded {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  min-height: 0 !important;
  white-space: normal;
}