/* ========== CHAT-SPECIFIC TOPBAR STYLES ========== */
.topbar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  flex: 1;
}
.topbar-title-text {
  flex-shrink: 0;
}
.topbar-title-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar-title-icons button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
}
.topbar-title-icons button:hover {
  background: var(--neutral-700);
}
.topbar-title-icons svg {
  width: 18px;
  height: 18px;
  fill: var(--neutral-400);
}

/* ========== CHAT LAYOUT ========== */
.chat-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  padding: 0 16px 16px;
  gap: 16px;
}

/* Left Panel - Chat List */
.chat-list-panel {
  width: 340px;
  min-width: 340px;
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  position: relative;
}
.chat-list-panel.collapsed {
  width: 0;
  min-width: 0;
  border: none;
  padding: 0;
  opacity: 0;
}

/* Avatar strip — shown when chat list is collapsed */
.chat-avatar-strip {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  align-items: center;
  overflow-y: auto;
  width: 60px;
  min-width: 60px;
  flex-shrink: 0;
}
.chat-avatar-strip::-webkit-scrollbar { width: 4px; }
.chat-avatar-strip::-webkit-scrollbar-thumb { 
  background: var(--neutral-700); 
  border-radius: 4px; 
}
.chat-avatar-strip { scrollbar-width: thin; scrollbar-color: var(--neutral-700) transparent; }
.chat-avatar-strip.show { display: flex; }
.chat-avatar-strip img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
  flex-shrink: 0;
}
.chat-avatar-strip img:hover { border-color: var(--purple-400); }
.chat-avatar-strip img.active { border-color: var(--purple-400); }
.chat-avatar-strip .unread-dot {
  position: relative;
}
.chat-avatar-strip .unread-dot::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--purple-400);
  border-radius: 50%;
  border: 2px solid #000;
}

/* Toggle inherits topbar-title-icons button style */
#chatToggleBtn {
  position: relative;
}
#chatToggleBtn svg {
  transition: transform 0.3s ease;
}
#chatToggleBtn.flipped svg {
  transform: rotate(90deg);
}
.toggle-unread-badge {
  display: none;
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--purple-400);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
}
.toggle-unread-badge.show { display: block; }
.toggle-unread-badge.mobile-badge {
  position: static;
  display: inline-block;
}
.toggle-unread-badge.mobile-badge.show {
  display: inline-block;
}
.chat-list-search {
  padding: 16px;
}
.chat-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 8px;
  padding: 8px 16px 8px 8px;
  width: 100%;
}
.chat-search-box img { width: 16px; height: 16px; }
.chat-search-box input {
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Heebo',sans-serif;
  font-size: 12px;
  flex: 1;
}
.chat-search-box input::placeholder { color: var(--neutral-500); }

.chat-list {
  flex: 1;
  overflow-y: auto;
}
.chat-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  height: 72px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  border-left: 3px solid transparent;
}
.chat-list-item:hover { background: rgba(255,255,255,0.03); }
.chat-list-item.active {
  background: rgba(255,255,255,0.03);
  border-left-color: var(--neutral-800);
  border-bottom: 1px solid var(--neutral-700);
  border-top: 1px solid var(--neutral-700);
}
.chat-list-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.chat-list-info {
  flex: 1;
  min-width: 0;
}
.chat-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.chat-list-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-list-date {
  font-size: 11px;
  color: var(--neutral-500);
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-list-preview {
  font-size: 12px;
  color: var(--neutral-500);
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-list-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.chat-list-badge {
  background: var(--purple-400);
  color: #000;
  font-size: 11px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-list-menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: var(--neutral-500);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
}
.chat-list-menu:hover { color: #fff; }

/* Center Panel - Chat Messages */
.chat-center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  overflow: hidden;
}
/* Make astro-island wrapper stretch & shrink inside flex column */
.chat-center-panel > astro-island {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

/* Scroll to bottom floating button */
.scroll-to-bottom-btn {
  position: sticky;
  bottom: 8px;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--neutral-600);
  background: var(--neutral-800);
  color: var(--neutral-300);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
  z-index: 10;
  flex-shrink: 0;
  animation: scrollBtnFadeIn 0.2s ease-out;
}
.scroll-to-bottom-btn:hover {
  background: var(--neutral-700);
  border-color: var(--purple-400);
  color: var(--purple-400);
  transform: scale(1.1);
}
.scroll-to-bottom-btn:active {
  transform: scale(0.95);
}
@keyframes scrollBtnFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* New image toast notification */
.image-toast-btn {
  position: sticky;
  bottom: 8px;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 24px;
  border: 1px solid var(--purple-400, #a855f7);
  background: rgba(168, 85, 247, 0.15);
  color: var(--purple-300, #c084fc);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 11;
  flex-shrink: 0;
  transition: all 0.2s ease;
  animation: imageToastSlideIn 0.3s ease-out;
}
.image-toast-btn:hover {
  background: rgba(168, 85, 247, 0.25);
  transform: scale(1.02);
}
.image-toast-btn:active {
  transform: scale(0.98);
}
@keyframes imageToastSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Highlight effect when scrolling to image */
.msg-highlight .msg-bubble {
  animation: msgHighlight 1.5s ease-out;
}
@keyframes msgHighlight {
  0%   { box-shadow: 0 0 0 2px var(--purple-400, #a855f7); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Chat bubbles */
.msg-row {
  display: flex;
  gap: 8px;
  max-width: 70%;
}
.msg-row.ai { align-self: flex-start; }
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-end;
}
.msg-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* === Exact Figma chat styles === */
.msg-bubble {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 8px;
  font-size: var(--chat-font-size, 14px);
  line-height: 1.5;
  word-break: break-word;
}
.msg-bubble .msg-time {
  font-size: 12px;
  color: var(--neutral-500);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 16px;
  padding: 2px 0;
}
.msg-row.ai .msg-bubble {
  background: var(--neutral-700);
  border-radius: 12px 12px 12px 4px;
}
.msg-row.user .msg-bubble {
  background: #000;
  border: 1px solid var(--neutral-700);
  border-radius: 12px 12px 4px 12px;
  padding: 6px 12px;
}
.msg-row.user { align-items: flex-end; }
.msg-row.user .msg-content { align-items: flex-end; }

.msg-actions {
  display: flex;
  gap: 4px;
  padding: 2px 0;
}
.msg-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-action-btn:hover { opacity: 0.7; }
.msg-action-btn img { width: 16px; height: 16px; }

.msg-photo-container {
  background: var(--neutral-700);
  border-radius: 12px;
  padding: 2px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-start;
  max-width: 300px;
}
.msg-photo {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--neutral-700);
  object-fit: cover;
  display: block;
  cursor: pointer;
  transition: opacity 0.2s;
}
.msg-photo:hover {
  opacity: 0.9;
}

/* ========== IMAGE GENERATING PLACEHOLDER ==========
   Reuses the loader markup from BnGenerateImage but scaled down so it
   fits inline inside a chat bubble. Scoped styles live here so we don't
   have to import bn_generate-image.css on chat pages. */
.msg-photo-container.msg-gen-loading {
  width: 220px;
  max-width: 220px;
  padding: 16px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: transparent;
}
.msg-gen-loading .gen-loader-wrap {
  position: relative;
  width: 72px;
  height: 72px;
}
.msg-gen-loading .gen-loader-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  filter: blur(14px);
  animation: msgGenGlowSpin 4s linear infinite;
  background: conic-gradient(
    from 200deg,
    rgba(204, 149, 255, 0) 0deg,
    rgba(254, 255, 119, 0.55) 60deg,
    rgba(254, 255, 119, 0.25) 100deg,
    rgba(204, 149, 255, 0) 140deg,
    rgba(204, 149, 255, 0) 180deg,
    rgba(180, 120, 255, 0.8) 240deg,
    rgba(204, 149, 255, 0.85) 300deg,
    rgba(180, 120, 255, 0.5) 340deg,
    rgba(204, 149, 255, 0) 360deg
  );
}
.msg-gen-loading .gen-loader-pulse {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 120, 255, 0.18) 30%, transparent 70%);
  animation: msgGenPulse 3s ease-in-out infinite;
}
.msg-gen-loading .gen-loader {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.msg-gen-loading .gen-loader img {
  width: 26px;
  height: 26px;
  filter: brightness(10);
}
.msg-gen-loading h3 {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.msg-gen-loading p {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  color: var(--neutral-500);
  text-align: center;
}
/* Higher specificity than `.msg-row.ai .msg-bubble` so the generating
   placeholder sits on a transparent background (the inner container
   provides its own neutral-700 pill). */
.msg-row.ai .msg-bubble.msg-bubble-generating,
.msg-row.user .msg-bubble.msg-bubble-generating {
  padding: 4px;
  background: transparent;
  border: none;
}
@keyframes msgGenGlowSpin { to { transform: rotate(360deg); } }
@keyframes msgGenPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.date-separator {
  align-self: center;
  background: var(--neutral-500);
  color: #000;
  font-size: 12px;
  line-height: 16px;
  padding: 4px 16px;
  border-radius: 16px;
  margin: 8px 0;
}

/* Chat input bar */
.chat-input-bar {
  background: var(--neutral-700);
  border-radius: 16px 16px 16px 16px;
  padding: 2px;
  display: flex;
  flex-direction: column;
}
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #000;
  border-radius: 32px;
  padding: 8px 8px 8px 20px;
}
.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  color: #fff;
  font-family: 'Heebo',sans-serif;
  /* iOS Safari zooms the page on focus when the input's computed
     font-size is < 16px. Force >=16px in every state, and use
     !important to beat any inline / utility overrides. */
  font-size: 16px !important;
  line-height: 1.4;
  outline: none;
  /* Belt: disable iOS text-size auto adjust which can momentarily
     report a smaller computed size and trigger zoom anyway. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Suspenders: keep the 16px on focus too. */
}
.chat-input:focus,
.chat-input:focus-visible { font-size: 16px !important; }
.chat-input::placeholder { color: var(--neutral-500); font-size: 16px; }
.btn-mic {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;          /* prevent scroll/zoom on long-press */
}
.btn-mic img { width: 24px; height: 24px; pointer-events: none; }

/* Recording state */
.btn-mic.recording {
  background: rgb(116 48 255 / 15%);
  box-shadow: 0 0 0 3px rgb(105 48 255 / 30%);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
.btn-mic.recording img {
  filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(5000%) hue-rotate(255deg) brightness(100%) contrast(105%);
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgb(105 48 255 / 30%); }
  50%      { box-shadow: 0 0 0 8px rgb(105 48 255 / 12%); }
}

/* Transcribing state — audio sent to server, waiting for text */
.btn-mic.transcribing {
  background: rgb(116 48 255 / 10%);
  animation: mic-spin 0.8s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}
@keyframes mic-spin {
  0%   { box-shadow: 0 0 0 2px rgb(105 48 255 / 40%); }
  50%  { box-shadow: 0 0 0 5px rgb(105 48 255 / 15%); }
  100% { box-shadow: 0 0 0 2px rgb(105 48 255 / 40%); }
}
.btn-send {
  background: var(--neutral-500);
  border: none;
  cursor: pointer;
  border-radius: 40px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.btn-send:hover { opacity: 0.85; }
.btn-send img { width: 24px; height: 24px; }
.chat-input-extras {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
}
.quick-prompts-link {
  font-size: 12px;
  color: var(--neutral-400);
  text-decoration: none;
  font-weight: 600;
  background: var(--neutral-800);
  border-radius: 16px;
  padding: 4px 8px 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.quick-prompts-link img { width: 12px; height: 12px; }
.quick-prompts-link:hover { background: var(--neutral-700); color: #fff; }
.chat-extra-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-extra-icon svg { width: 16px; height: 16px; fill: var(--neutral-500); }

/* Right Panel - Character Profile */
/* Expand profile panel when chat list is collapsed */
.chat-layout:has(.chat-list-panel.collapsed) .chat-profile-panel {
  width: 280px;
  min-width: 280px;
}

.chat-profile-panel {
  width: 221px;
  min-width: 221px;
  transition: width 0.3s ease, min-width 0.3s ease;
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 80px);
}
/* 3:4 portrait ratio so the carousel box grows/shrinks with the panel
   width (~221px desktop → ~full-viewport mobile) instead of being
   pinned to a fixed 300px height that crops hi-res portraits.

   Using the padding-top hack instead of `aspect-ratio: 3/4` because in
   this layout `aspect-ratio` was rendering as a square in some browsers
   (carousel stretched horizontally when a parent had no explicit height
   constraint). padding-top:133.333% = 4/3 → guaranteed portrait. */
.profile-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  width: 100%;
  padding-top: 133.333%;
  height: 0;
}
.profile-carousel-track {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.4s ease;
}
.profile-carousel-img {
  width: 100%;
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
}
.profile-carousel-dots {
  display: flex;
  gap: 4px;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  z-index: 3;
}
.profile-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neutral-600);
  cursor: pointer;
  transition: background 0.2s;
}
.profile-carousel-dot.active { background: #fff; }
.profile-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-carousel-arrow:hover { background: rgba(0,0,0,0.7); }
.profile-carousel-arrow svg { width: 14px; height: 14px; fill: #fff; }
.profile-carousel-arrow.left { left: 6px; }
.profile-carousel-arrow.right { right: 6px; }

.profile-gen-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.btn-gen-image {
  flex: 1;
  background: none;
  border: 1px solid var(--neutral-700);
  border-radius: 8px;
  color: var(--purple-400);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  transition: background 0.15s;
}
.btn-gen-image:hover { background: var(--neutral-700); }
.btn-gen-camera {
  background: none;
  border: 1px solid var(--neutral-700);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-gen-camera:hover { background: var(--neutral-700); }
.btn-gen-camera svg { width: 16px; height: 16px; fill: var(--neutral-400); }

.profile-info {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-char-name {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.profile-bio {
  font-size: 12px;
  color: var(--neutral-400);
  line-height: 18px;
}
.profile-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--neutral-500);
  margin-bottom: 4px;
}
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.profile-tag {
  background: var(--purple-900);
  border: 1px solid var(--purple-800);
  color: var(--purple-400);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

/* ========== MOBILE OVERLAY ========== */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 99;
}
.sidebar-overlay.show { display: block; }
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.mobile-menu-btn img { height: 25px; }

.mobile-profile-btn {
  display: none;
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-profile-btn svg { width: 20px; height: 20px; fill: var(--neutral-400); }

.mobile-back-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  align-items: center;
  justify-content: center;
}
.mobile-back-btn svg { width: 20px; height: 20px; fill: #fff; }

/* Scrollbar styling */
.chat-messages::-webkit-scrollbar,
.chat-list::-webkit-scrollbar,
.chat-profile-panel::-webkit-scrollbar {
  width: 4px;
}
.chat-messages::-webkit-scrollbar-track,
.chat-list::-webkit-scrollbar-track,
.chat-profile-panel::-webkit-scrollbar-track {
  background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb,
.chat-list::-webkit-scrollbar-thumb,
.chat-profile-panel::-webkit-scrollbar-thumb {
  background: var(--neutral-700);
  border-radius: 4px;
}

/* ========== TABLET (<=1024px) ========== */
@media (max-width: 1024px) {
  .chat-list-panel { width: 280px; min-width: 280px; }
  .chat-profile-panel { width: 200px; min-width: 200px; }
}

/* ========== MOBILE (<=768px) ========== */
@media (max-width: 768px) {
  body {
    flex-direction: column;
    height: var(--real-vh, 100dvh); /* use JS-measured height on mobile */
  }

  /* Sidebar -- off-canvas */
  .sidebar {
    position: fixed;
    left: -237px;
    top: 0;
    z-index: 100;
    transition: left 0.3s ease;
  }
  .sidebar.open { left: 0; }
  .sidebar.collapsed { left: -72px; width: 72px; min-width: 72px; }
  .sidebar.collapsed.open { left: 0; }
  .sidebar-overlay.show { display: block; }

  .mobile-menu-btn { display: block; }
  .chat-avatar-strip { display: none !important; }
  .mobile-back-btn { display: flex; }
  .mobile-profile-btn { display: flex; }

  /* Topbar — show credits + profile inline */
  .topbar { flex-wrap: nowrap; gap: 6px; padding: 10px 12px; align-items: center; overflow: visible; }
  .topbar-title-text { display: none; }
  .credits-box { margin-left: auto; }
  .profile-box { flex-shrink: 0; overflow: visible; }
  .profile-box > img:last-child { display: none; }
  .profile-pro { font-size: 10px; }

  /* Hide Buy Credits button on mobile */
  .btn-buy { display: none; }
  .credits-box { padding: 6px 12px; gap: 0; }

  /* Hide desktop chat toggle, show mobile chat toggle */
  #chatToggleBtn { display: none; }
  .mobile-chat-toggle {
    display: flex !important;
    align-items: center;
    gap: 6px;
    background: var(--neutral-800);
    border: 1px solid var(--neutral-700);
    border-radius: 8px;
    padding: 6px 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
  }
  .mobile-chat-toggle img { width: 16px; height: 16px; }

  .main-content {
    overflow: hidden;  /* prevent scroll; let flex children fill height */
    min-height: 0;
  }

  .chat-layout {
    flex-direction: column;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    flex: 1;
    min-height: 0;
    gap: 0;
  }

  /* Chat list hidden by default on mobile, toggle to show */
  .chat-list-panel {
    display: none;
    width: 100%;
    min-width: 0;
    height: 100%;
    flex: 1;
    overflow-y: auto;
  }
  .chat-list-panel.mobile-show {
    display: flex;
  }
  /* Conversation visible by default on mobile */
  .chat-center-panel {
    display: flex;
    flex: 1;
    min-height: 0;
    border-radius: 0;
    border: none;
  }
  .chat-center-panel.mobile-hide {
    display: none;
  }
  .chat-profile-panel,
  /* The desktop "chat list collapsed → profile panel wider" rule
     (.chat-layout:has(.chat-list-panel.collapsed) .chat-profile-panel)
     has higher specificity than a plain `.chat-profile-panel`, so its
     280px width leaks into mobile unless we match that selector here. */
  .chat-layout:has(.chat-list-panel.collapsed) .chat-profile-panel {
    display: none;
    width: 100%;
    min-width: 0;
    position: static;
    max-height: none;
    /* On mobile the panel goes fullscreen — flatten the desktop card
       chrome (border + radius + padding) so the profile reaches the
       viewport edges instead of looking like a narrower floating card
       with gutters around it. Background stays so the page bg doesn't
       bleed through. */
    border: none;
    border-radius: 0;
    padding: 12px 16px;
  }
  .chat-profile-panel.mobile-show,
  .chat-layout:has(.chat-list-panel.collapsed) .chat-profile-panel.mobile-show {
    display: flex;
  }
  .msg-row { max-width: 85%; }
}

/* ========== QUICK PROMPTS MODAL ========== */
.qp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
  padding: 80px 16px;
}
.qp-overlay.show { display: flex; }
.qp-modal {
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 16px;
  width: 460px;
  max-width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qp-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qp-header-title {
  font-size: 16px;
  font-weight: 500;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qp-header-title img { width: 20px; height: 20px; }
.qp-spicy {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-400);
}
.qp-desc {
  font-size: 12px;
  color: var(--neutral-500);
  margin-top: -8px;
}
.qp-search {
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 10px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
  font-family: 'Heebo',sans-serif;
  width: 100%;
  outline: none;
}
.qp-search::placeholder { color: var(--neutral-500); }
.qp-big-btns {
  display: flex;
  gap: 8px;
}
.qp-big-btn {
  flex: 1;
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  transition: border-color 0.2s;
}
.qp-big-btn:hover { border-color: var(--purple-400); }
.qp-tabs {
  display: flex;
  gap: 16px;
}
.qp-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--neutral-500);
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Heebo',sans-serif;
  padding: 0;
}
.qp-tab.active { color: #fff; }
.qp-tab-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--neutral-500);
}
.qp-tab.active .qp-tab-dot {
  border-color: var(--purple-400);
  background: var(--purple-400);
  box-shadow: inset 0 0 0 3px var(--neutral-800);
}
.qp-categories {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex-shrink: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.qp-categories:active {
  cursor: grabbing;
}
.qp-categories::-webkit-scrollbar { 
  height: 4px;
}
.qp-categories::-webkit-scrollbar-track {
  background: var(--neutral-800);
  border-radius: 2px;
}
.qp-categories::-webkit-scrollbar-thumb {
  background: var(--neutral-600);
  border-radius: 2px;
}
.qp-categories::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500);
}
.qp-cat {
  background: none;
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--neutral-400);
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.qp-cat:hover, .qp-cat.active { background: var(--neutral-700); color: #fff; border-color: var(--neutral-500); }
.qp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  overflow-y: auto;
  max-height: 200px;
}
.qp-grid::-webkit-scrollbar { width: 4px; }
.qp-grid::-webkit-scrollbar-thumb { background: var(--neutral-700); border-radius: 2px; }
.qp-item {
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  transition: border-color 0.2s;
}
.qp-item:hover { border-color: var(--purple-400); }
.qp-item.locked {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--neutral-800);
}
.qp-item.locked:hover {
  border-color: var(--neutral-700);
}

.qp-cat.locked {
  opacity: 0.7;
}

/* ========== GALLERY MODAL ========== */
.gal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.gal-overlay.show { display: flex; }
.gal-modal {
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  width: 720px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gal-top {
  padding: 20px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}
.gal-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 0;
}
.gal-content::-webkit-scrollbar {
  width: 6px;
}
.gal-content::-webkit-scrollbar-track {
  background: transparent;
}
.gal-content::-webkit-scrollbar-thumb {
  background: var(--neutral-600);
  border-radius: 3px;
}
.gal-content::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500);
}
.gal-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gal-header-icon {
  width: 32px;
  height: 32px;
  background: var(--purple-900);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gal-header-icon img { width: 18px; height: 18px; }
.gal-header-info { flex: 1; }
.gal-header-info h3 { font-size: 16px; font-weight: 600; margin: 0; }
.gal-header-info p { font-size: 12px; color: var(--neutral-500); margin: 0; }
.gal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-400);
  font-size: 22px;
  padding: 4px;
  line-height: 1;
}
.gal-preview-area {
  background: var(--neutral-900);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 200px;
}
.gal-preview-area img {
  max-width: 220px;
  max-height: 180px;
  object-fit: contain;
}
.gal-empty {
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 0 20px;
}
.gal-donate-card {
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  margin: 0 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.gal-donate-text {
  font-size: 13px;
  color: var(--neutral-400);
  line-height: 20px;
}
.gal-credits {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.gal-credit-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--neutral-700);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--neutral-400);
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  transition: all 0.2s;
}
.gal-credit-btn:hover { border-color: var(--neutral-500); }
.gal-credit-btn.active {
  border-color: #fff;
  color: #fff;
}
.gal-credit-btn img { width: 16px; height: 16px; }
.gal-donate-btn {
  background: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  box-shadow: 0 2px 20px rgba(255,255,255,0.56);
}
.gal-donate-btn:hover { background: #eee; }
.gal-cancel {
  padding: 16px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

/* ========== STICKER MODAL ========== */
.stk-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.stk-overlay.show { display: flex; }
.stk-modal {
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 16px;
  width: 620px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.stk-header-icon {
  width: 32px;
  height: 32px;
  background: var(--neutral-700);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stk-header-icon img { width: 18px; height: 18px; }
.stk-header-text { flex: 1; }
.stk-header-text h3 { font-size: 16px; font-weight: 500; margin: 0; }
.stk-header-text p { font-size: 12px; color: var(--neutral-500); margin: 0; }
.stk-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-400);
  font-size: 20px;
  padding: 4px;
}
.stk-cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex-shrink: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.stk-cats:active {
  cursor: grabbing;
}
.stk-cats::-webkit-scrollbar { 
  height: 4px;
}
.stk-cats::-webkit-scrollbar-track {
  background: var(--neutral-800);
  border-radius: 2px;
}
.stk-cats::-webkit-scrollbar-thumb {
  background: var(--neutral-600);
  border-radius: 2px;
}
.stk-cats::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500);
}
.stk-cat {
  background: none;
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--neutral-400);
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.stk-cat:hover, .stk-cat.active { background: #fff; color: #000; border-color: #fff; }
.stk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.stk-grid::-webkit-scrollbar { width: 4px; }
.stk-grid::-webkit-scrollbar-thumb { background: var(--neutral-700); border-radius: 2px; }
.stk-card {
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 6px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s;
}
.stk-card:hover { border-color: var(--purple-400); }
.stk-card-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: contain;
  background: var(--neutral-800);
}
.stk-card-name { font-size: 12px; color: #fff; text-align: center; }
.stk-pro {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--purple-400);
  color: #000;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.stk-back {
  align-self: center;
  background: var(--neutral-700);
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  flex-shrink: 0;
}
.stk-back:hover { background: var(--neutral-600); }
@media (max-width: 768px) {
  .stk-grid { grid-template-columns: repeat(2, 1fr); }
  .stk-modal { width: 100%; }
}

/* ========== GIFT MODAL ========== */
.gift-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.gift-overlay.show { display: flex; }
.gift-modal {
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 16px;
  width: 560px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gift-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gift-header-icon {
  width: 32px;
  height: 32px;
  background: var(--neutral-700);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-header-icon img { width: 18px; height: 18px; }
.gift-header-text { flex: 1; }
.gift-header-text h3 { font-size: 16px; font-weight: 500; margin: 0; }
.gift-header-text p { font-size: 12px; color: var(--neutral-500); margin: 0; }
.gift-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-400);
  font-size: 20px;
  padding: 4px;
}
.gift-cats {
  display: flex;
  gap: 6px;
}
.gift-cat {
  background: none;
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--neutral-400);
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
}
.gift-cat:hover, .gift-cat.active { background: #fff; color: #000; border-color: #fff; }
.gift-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}
.gift-grid::-webkit-scrollbar { width: 4px; }
.gift-grid::-webkit-scrollbar-thumb { background: var(--neutral-700); border-radius: 2px; }
.gift-card {
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 6px;
  position: relative;
}
.gift-card-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: contain;
  background: var(--neutral-800);
}
.gift-rarity {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.gift-rarity.rare { background: #e74c3c; color: #fff; }
.gift-rarity.uncommon { background: var(--purple-400); color: #000; }
.gift-rarity.epic { background: #9b59b6; color: #fff; }
.gift-rarity.pro {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  background: var(--purple-400);
  color: #000;
}
.gift-card-name {
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.gift-send-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gift-send-btn {
  background: var(--neutral-700);
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
}
.gift-send-btn:hover { background: var(--neutral-600); }
.gift-cost {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--neutral-400);
}
.gift-cost img { width: 14px; height: 14px; }
.gift-back {
  align-self: center;
  background: var(--neutral-700);
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
}
.gift-back:hover { background: var(--neutral-600); }
@media (max-width: 768px) {
  .gift-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========== FEEDBACK MODAL ========== */
.fb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.fb-overlay.show { display: flex; }
.fb-modal {
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 24px;
  width: 420px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.fb-icon {
  width: 40px;
  height: 40px;
  background: var(--neutral-700);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-icon img { width: 20px; height: 20px; }
.fb-title { font-size: 18px; font-weight: 500; }
.fb-desc { font-size: 13px; color: var(--neutral-400); line-height: 18px; }
.fb-msg {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--neutral-700);
  border-radius: 12px 12px 12px 4px;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  width: 100%;
}
.fb-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-start;
}
.fb-msg-text { flex: 1; }
.fb-msg-time { font-size: 11px; color: var(--neutral-500); white-space: nowrap; }
.fb-textarea {
  width: 100%;
  min-height: 120px;
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
  font-family: 'Heebo',sans-serif;
  font-size: 13px;
  outline: none;
  resize: vertical;
}
.fb-textarea::placeholder { color: var(--neutral-500); }
.fb-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ========== SETTINGS MODAL ========== */
.settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.settings-overlay.show { display: flex; }
.settings-modal {
  background: var(--neutral-800);
  border: 1px solid var(--neutral-700);
  border-radius: 16px;
  padding: 16px;
  width: 320px;
  max-width: 90vw;
}
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.settings-header h3 { font-size: 18px; font-weight: 500; }
.settings-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-400);
  font-size: 20px;
  padding: 4px;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-bottom: 1px solid var(--neutral-700);
}
.settings-row img { width: 20px; height: 20px; }
.settings-row span { flex: 1; font-size: 14px; }
.settings-sub {
  display: flex;
  gap: 0;
  padding: 8px 8px 16px;
  border-bottom: 1px solid var(--neutral-700);
}
.settings-radio {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 12px;
  color: var(--neutral-400);
  cursor: pointer;
}
.settings-radio.active { color: #fff; }
.settings-radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--neutral-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-radio.active .settings-radio-dot {
  border-color: var(--purple-400);
}
.settings-radio.active .settings-radio-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--purple-400);
}
.switcher {
  width: 33px;
  height: 20px;
  border-radius: 16px;
  background: var(--neutral-600);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.switcher.on { background: var(--purple-400); }
.switcher::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4d4d4;
  top: 3px;
  left: 3px;
  transition: left 0.2s;
}
.switcher.on::after { left: 16px; background: #000; }
.settings-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 16px;
}
.btn-cancel {
  background: var(--neutral-700);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
.btn-apply {
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 20px rgba(255,255,255,0.56);
}

/* ========== SMALL MOBILE (<=480px) ========== */
@media (max-width: 480px) {
  .credits-box { justify-content: space-between; }
  .msg-row { max-width: 92%; }
}


/* ========== SKELETON ANIMATIONS ========== */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ========== GALLERY MODAL - ALBUM GRID ========== */
.gal-albums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 20px;
  margin-bottom: 16px;
}
.gal-album {
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gal-album-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  position: relative;
}
.gal-album-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-album-badges {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: flex;
  gap: 4px;
}
.gal-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.gal-badge.hot { background: #e74c3c; color: #fff; }
.gal-badge.new { background: var(--purple-400); color: #000; }
.gal-badge.featured { background: var(--purple-400); color: #000; }
.gal-album-info {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gal-album-name { font-size: 13px; font-weight: 500; }
.gal-album-unlock {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gal-unlock-btn {
  background: var(--neutral-700);
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
}
.gal-unlock-btn:hover { background: var(--neutral-600); }
.gal-unlock-cost {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--neutral-400);
}
.gal-unlock-cost img { width: 16px; height: 16px; }

/* Request new album section */
.gal-request {
  margin: 0 20px;
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
  color: #fff;
}
.gal-request:hover { background: var(--neutral-800); }
.gal-request svg { width: 16px; height: 16px; fill: var(--neutral-400); transition: transform 0.2s; }
.gal-request.open svg { transform: rotate(180deg); }
.gal-request.open {
  border-radius: 12px 12px 0 0;
}

.gal-request-panel {
  margin: 0 20px;
  background: var(--neutral-900);
  border: 1px solid var(--neutral-700);
  border-top: none;
  border-radius: 0 0 12px 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.gal-request-panel.open {
  max-height: 400px;
}
.gal-request-panel-inner {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gal-request-panel .tip-desc {
  font-size: 13px;
  color: var(--neutral-400);
  text-align: center;
  line-height: 1.4;
}
.gal-request-panel .tip-amounts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gal-request-panel .tip-btn {
  background: none;
  border: 1px solid var(--neutral-700);
  border-radius: 8px;
  padding: 4px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  font-family: 'Heebo', sans-serif;
  transition: border-color 0.2s, background 0.2s;
}
.gal-request-panel .tip-btn:hover,
.gal-request-panel .tip-btn.active {
  border-color: var(--purple-400);
  background: var(--neutral-800);
}
.gal-request-panel .tip-btn img {
  width: 16px;
  height: 16px;
}
.gal-request-panel .btn-donate {
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  box-shadow: 0px 2px 20px rgba(255,255,255,0.56);
  transition: opacity 0.15s, box-shadow 0.15s;
}
.gal-request-panel .btn-donate:hover:not(:disabled) { opacity: 0.9; }
.gal-request-panel .btn-donate:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

/* Inline error/success messages for the tip (donate) action */
.gal-donate-error,
.gal-donate-success {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}
.gal-donate-error {
  background: rgba(255, 71, 87, 0.12);
  border: 1px solid rgba(255, 71, 87, 0.35);
  color: #ff8a9a;
}
.gal-donate-success {
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #34d399;
}

.gal-request-panel .tip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive gallery grid */
@media (max-width: 1024px) {
  .gal-albums { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .gal-albums { grid-template-columns: repeat(2, 1fr); }
}

/* ========== TYPING INDICATOR ========== */
.typing-indicator {
  /* Hidden by default; bn-chat/[id].astro inline scripts flip display
     to 'flex' when SSE / polling reports the AI is typing. Keeping the
     default here (instead of inline style) avoids React hydration
     mismatches when the script fires before React hydrates. */
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 16px;
  animation: fadeIn 0.3s ease-in-out;
}

.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.typing-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-500);
  animation: typingBounce 1.4s infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== CHARACTER COUNTER ========== */
.char-counter {
  position: absolute;
  bottom: 12px;
  right: 90px;
  font-size: 11px;
  color: var(--neutral-500);
  pointer-events: none;
  z-index: 1;
  font-family: 'Heebo', sans-serif;
}

/* ========== CUSTOM TOAST ANIMATIONS ========== */
@keyframes slideInRight {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ========== IMAGE LIGHTBOX ========== */
.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.95);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.image-lightbox.open { 
  display: flex; 
}

.image-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--neutral-700);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}
.image-lightbox-close:hover { 
  background: var(--neutral-600); 
}
.image-lightbox-close svg { 
  width: 20px; 
  height: 20px; 
  stroke: #fff; 
}

.image-lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
}

.image-lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 768px) {
  .image-lightbox-stage { 
    padding: 80px 16px; 
  }
}

/* Chat lock screen styles moved to bn_style.css (global) so they work
   on both /chat/* and /my-chats without duplicate rules. */