:root {
  --sidebar-width: 260px;
  --transition-speed: 200ms;
  --kb-offset: 0px;
}

/* Issue 8: kill the WebKit tap-highlight flash globally (mobile Chrome shows
   a blue square on every tap). Per-element rules existed but missed spots;
   this covers everything, including future elements. */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

[data-theme="light"] {
  --bg-primary: #FFF9F0;
  --bg-secondary: #FFF3E6;
  --bg-sidebar: #FAF0E4;
  --bg-input: #FFFAF5;
  --bg-hover: rgba(255, 181, 158, 0.12);
  --bg-code: #F5EDE3;
  --bg-code-block: #2D2A24;
  --bg-user-bubble: #FFE0D3;
  --bg-ai-bubble: transparent;
  --text-primary: #2B2B2B;
  --text-secondary: #5A5A5A;
  --text-tertiary: #8A8A8A;
  --text-code-block: #F0E8DC;
  --accent: #FFB59E;
  --accent-hover: #FFA07A;
  --border: #F0E4D8;
  --border-light: #F5EDE3;
  --shadow: rgba(180, 120, 80, 0.08);
  --shadow-strong: rgba(180, 120, 80, 0.15);
  --scrollbar-thumb: #DDD0C0;
  --scrollbar-track: transparent;
  --overlay-bg: rgba(0, 0, 0, 0.3);
  --code-header-bg: #3A362E;
  --msg-avatar-bg: #FFF3E6;

  /* Monet background blobs — light theme (impressionist water-lilies palette) */
  --monet-blob-1: #bcd7f0;
  --monet-blob-2: #d9cdf2;
  --monet-blob-3: #f6cdd8;
  --monet-blob-4: #f7e3b8;
  --monet-blob-5: #cfe3c8;

  /* Glass tints */
  --glass-bg: rgba(255, 249, 240, 0.55);
  --glass-bg-sidebar: rgba(250, 240, 228, 0.60);
  --glass-bg-bubble-user: rgba(255, 224, 211, 0.65);
  --glass-bg-bubble-ai: rgba(255, 249, 240, 0.40);
  --glass-bg-input: rgba(255, 250, 245, 0.60);
  --glass-bg-popup: rgba(255, 249, 240, 0.72);
  --glass-highlight: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] {
  --bg-primary: #1E1B16;
  --bg-secondary: #252219;
  --bg-sidebar: #1A1710;
  --bg-input: #2A2620;
  --bg-hover: rgba(255, 181, 158, 0.08);
  --bg-code: #2A2620;
  --bg-code-block: #14120E;
  --bg-user-bubble: #3D2E24;
  --bg-ai-bubble: transparent;
  /* Jessica 2026-10-23 17:48: ALL dark-mode text pure white #FFFFFF */
  --text-primary: #FFFFFF;
  --text-secondary: #FFFFFF;
  --text-tertiary: #FFFFFF;
  --text-code-block: #FFFFFF;
  --accent: #FFB59E;
  --accent-hover: #FFC8B4;
  --border: #342F26;
  --border-light: #2A2620;
  --shadow: rgba(0, 0, 0, 0.2);
  --shadow-strong: rgba(0, 0, 0, 0.4);
  --scrollbar-thumb: #3A352C;
  --scrollbar-track: transparent;
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --code-header-bg: #0E0D0A;
  --msg-avatar-bg: #2A2620;

  /* Monet background blobs — dark theme (deep impressionist tones) */
  --monet-blob-1: #1e3a5f;
  --monet-blob-2: #3a2d5c;
  --monet-blob-3: #5c2d44;
  --monet-blob-4: #5c4a24;
  --monet-blob-5: #2d4a38;

  /* Glass tints */
  --glass-bg: rgba(30, 27, 22, 0.55);
  --glass-bg-sidebar: rgba(26, 23, 16, 0.65);
  --glass-bg-bubble-user: rgba(61, 46, 36, 0.65);
  --glass-bg-bubble-ai: rgba(30, 27, 22, 0.40);
  --glass-bg-input: rgba(42, 38, 32, 0.60);
  --glass-bg-popup: rgba(30, 27, 22, 0.75);
  --glass-highlight: rgba(255, 255, 255, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

/* ===== Aurora hue cycling (Jessica 2026-10-23) =====
   Registered angle property so the hue drift transitions smoothly.
   JS sets --huerot on .monet-bg to a new random target every ~18-30s;
   the 12s ease-in-out crossfade keeps every tone shift slow and natural.
   The rotation rides on top of the active theme's palette, so dark mode
   stays deep and light mode stays soft. Without @property support the
   var() falls back to 0deg (static background = today's look). */
@property --huerot {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* ===== FIX 7: Diffuse aurora / mesh-gradient background ===== */
.monet-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Shared wash properties ---------- */
.aurora-wash {
  position: absolute;
  border-radius: 50%;
  will-change: transform, filter;
  /* Large sizes + heavy blur = soft bleeding color fields, no hard edges.
     hue-rotate drifts the whole palette through pink/violet/blue/teal/
     green/amber over time (see --huerot); uniform shift keeps the Monet
     harmony at every angle. */
  filter: blur(100px) hue-rotate(var(--huerot, 0deg));
  opacity: 0.6;
  mix-blend-mode: screen;
  /* Slow crossfade for the JS-driven hue targets (12s, ease-in-out). */
  transition: --huerot 24s ease-in-out;
}

/* ---------- Dark-theme washes (6 large color fields) ---------- */
/* Wash 1 — blue-periwinkle — top-left anchor */
.aurora-wash:nth-child(1) {
  width: 110vmax;
  height: 90vmax;
  top: -35%;
  left: -25%;
  background: radial-gradient(ellipse at 40% 40%,
    rgba(80, 130, 220, 0.55) 0%,
    rgba(120, 90, 200, 0.30) 40%,
    transparent 70%);
  animation: auroraDrift1 72s ease-in-out infinite alternate;
}

/* Wash 2 — rose-pink — right side */
.aurora-wash:nth-child(2) {
  width: 100vmax;
  height: 85vmax;
  top: 10%;
  right: -30%;
  background: radial-gradient(ellipse at 55% 45%,
    rgba(210, 100, 150, 0.50) 0%,
    rgba(180, 70, 130, 0.25) 45%,
    transparent 72%);
  animation: auroraDrift2 84s ease-in-out infinite alternate;
}

/* Wash 3 — teal-aqua — bottom-left */
.aurora-wash:nth-child(3) {
  width: 95vmax;
  height: 80vmax;
  bottom: -30%;
  left: -10%;
  background: radial-gradient(ellipse at 35% 60%,
    rgba(50, 180, 170, 0.45) 0%,
    rgba(60, 130, 200, 0.22) 42%,
    transparent 70%);
  animation: auroraDrift3 68s ease-in-out infinite alternate;
}

/* Wash 4 — amber-peach — center-right */
.aurora-wash:nth-child(4) {
  width: 85vmax;
  height: 75vmax;
  top: 15%;
  left: 30%;
  background: radial-gradient(ellipse at 60% 35%,
    rgba(240, 170, 80, 0.40) 0%,
    rgba(220, 110, 70, 0.20) 45%,
    transparent 70%);
  animation: auroraDrift4 78s ease-in-out infinite alternate;
}

/* Wash 5 — lavender-violet — bottom-right */
.aurora-wash:nth-child(5) {
  width: 100vmax;
  height: 90vmax;
  bottom: -20%;
  right: -20%;
  background: radial-gradient(ellipse at 55% 55%,
    rgba(155, 100, 230, 0.45) 0%,
    rgba(200, 100, 180, 0.22) 42%,
    transparent 68%);
  animation: auroraDrift5 90s ease-in-out infinite alternate;
}

/* Wash 6 — soft mint — mid-left, ties the palette together */
.aurora-wash:nth-child(6) {
  width: 80vmax;
  height: 70vmax;
  top: 40%;
  left: -20%;
  background: radial-gradient(ellipse at 40% 50%,
    rgba(100, 210, 180, 0.38) 0%,
    rgba(80, 170, 200, 0.18) 44%,
    transparent 70%);
  animation: auroraDrift6 82s ease-in-out infinite alternate;
}

/* ---------- Light-theme overrides ---------- */
/* Use soft-light blend + lower opacity so colors tint the bright bg gently */
[data-theme="light"] .aurora-wash {
  mix-blend-mode: multiply;
  opacity: 0.35;
}

[data-theme="light"] .aurora-wash:nth-child(1) {
  background: radial-gradient(ellipse at 40% 40%,
    rgba(140, 180, 240, 0.60) 0%,
    rgba(170, 145, 230, 0.30) 40%,
    transparent 70%);
}
[data-theme="light"] .aurora-wash:nth-child(2) {
  background: radial-gradient(ellipse at 55% 45%,
    rgba(240, 140, 175, 0.55) 0%,
    rgba(230, 120, 170, 0.28) 45%,
    transparent 72%);
}
[data-theme="light"] .aurora-wash:nth-child(3) {
  background: radial-gradient(ellipse at 35% 60%,
    rgba(110, 220, 200, 0.50) 0%,
    rgba(120, 185, 235, 0.25) 42%,
    transparent 70%);
}
[data-theme="light"] .aurora-wash:nth-child(4) {
  background: radial-gradient(ellipse at 60% 35%,
    rgba(250, 200, 120, 0.50) 0%,
    rgba(245, 160, 100, 0.25) 45%,
    transparent 70%);
}
[data-theme="light"] .aurora-wash:nth-child(5) {
  background: radial-gradient(ellipse at 55% 55%,
    rgba(180, 140, 240, 0.50) 0%,
    rgba(230, 140, 200, 0.25) 42%,
    transparent 68%);
}
[data-theme="light"] .aurora-wash:nth-child(6) {
  background: radial-gradient(ellipse at 40% 50%,
    rgba(140, 230, 200, 0.45) 0%,
    rgba(130, 200, 230, 0.22) 44%,
    transparent 70%);
}

/* ---------- Aurora drift keyframes ----------
   Each wash travels 20–35vw/vh over its cycle — clearly perceptible movement.
   Staggered durations (68–90s) so they never sync up.
   Scale morphs (0.85–1.2) reshape the color field.                          */

@keyframes auroraDrift1 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(18vw, 15vh) scale(1.12) rotate(3deg); }
  66%  { transform: translate(-10vw, 25vh) scale(0.92) rotate(-2deg); }
  100% { transform: translate(8vw, -10vh) scale(1.05) rotate(1deg); }
}

@keyframes auroraDrift2 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(-22vw, -12vh) scale(1.15) rotate(-3deg); }
  66%  { transform: translate(12vw, -25vh) scale(0.88) rotate(2deg); }
  100% { transform: translate(-8vw, 10vh) scale(1.08) rotate(-1deg); }
}

@keyframes auroraDrift3 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(25vw, -10vh) scale(1.18) rotate(4deg); }
  66%  { transform: translate(-15vw, -20vh) scale(0.90) rotate(-3deg); }
  100% { transform: translate(10vw, 8vh) scale(1.06) rotate(1deg); }
}

@keyframes auroraDrift4 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(-12vw, 20vh) scale(0.88) rotate(-2deg); }
  66%  { transform: translate(20vw, 10vh) scale(1.15) rotate(3deg); }
  100% { transform: translate(-5vw, -15vh) scale(0.95) rotate(-1deg); }
}

@keyframes auroraDrift5 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(20vw, -18vh) scale(1.10) rotate(2deg); }
  66%  { transform: translate(-18vw, 12vh) scale(0.92) rotate(-4deg); }
  100% { transform: translate(12vw, 20vh) scale(1.05) rotate(1deg); }
}

@keyframes auroraDrift6 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(15vw, 22vh) scale(1.14) rotate(-3deg); }
  66%  { transform: translate(-20vw, -8vh) scale(0.86) rotate(2deg); }
  100% { transform: translate(8vw, -18vh) scale(1.10) rotate(-2deg); }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora-wash {
    animation-duration: 200s !important;
    animation-timing-function: linear !important;
  }
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

.app-layout {
  display: flex;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--glass-bg-sidebar);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-speed) ease;
  z-index: 100;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.sidebar-top {
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sidebar-logo-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.sidebar-logo-avatar svg {
  width: 100%;
  height: 100%;
}

.sidebar-logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.new-chat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-speed), box-shadow var(--transition-speed);
}

.new-chat-btn:hover {
  background: var(--bg-hover);
  box-shadow: 0 2px 8px var(--shadow);
}

.sidebar-conversations {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.conv-group-label {
  padding: 8px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: none;
}

.conv-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition-speed);
  gap: 4px;
}

.conv-item:hover {
  background: var(--bg-hover);
}

.conv-item.active {
  background: var(--bg-hover);
}

.conv-item-title {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conv-item-delete {
  display: none;
}

.sidebar-bottom {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-bottom .theme-toggle-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
}

.sidebar-bottom .settings-text-btn {
  justify-content: center;
}

.model-switcher {
  position: relative;
}

.model-switcher-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-speed);
}

.model-switcher-btn:hover {
  background: var(--bg-hover);
}

.model-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--glass-bg-popup);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px var(--shadow-strong), inset 0 1px 0 var(--glass-highlight);
  z-index: 10;
}

.model-menu.open {
  display: block;
}

.model-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-speed);
}

.model-option:hover {
  background: var(--bg-hover);
}

.model-option.active {
  color: var(--accent);
  font-weight: 600;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition-speed);
}

.theme-toggle-btn:hover {
  background: var(--bg-hover);
}

.main-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
}

.top-bar {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-light);
  gap: 12px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}

.top-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-icon-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-speed), border-color var(--transition-speed);
  font-family: inherit;
  line-height: 1.4;
}

.header-icon-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.hamburger-btn {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background var(--transition-speed);
}

.hamburger-btn:hover {
  background: var(--bg-hover);
}

.top-bar-model {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Subtle readability scrim so text never fights blob overlap */
.messages-area::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] .messages-area::before {
  background: rgba(255, 249, 240, 0.25);
}

[data-theme="dark"] .messages-area::before {
  background: rgba(20, 17, 13, 0.55);
}

.welcome-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
}

.welcome-avatar {
  width: 80px;
  height: 80px;
}

.welcome-avatar svg {
  width: 100%;
  height: 100%;
}

.welcome-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
}

.message {
  display: flex;
  gap: 12px;
  max-width: 800px;
  width: 100%;
  margin: 0 auto 20px;
  animation: msgIn 0.25s ease-out;
}

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

.message.user {
  /* Issue 15: column layout (name above, bubble+avatar row below), right aligned */
  flex-direction: column;
  align-items: flex-end;
  /* Issue C: match .message.assistant's gap so the name label sits at the
     same distance above the bubble (base .message has gap: 12px) */
  gap: 0;
}

.message.assistant {
  justify-content: flex-start;
}

.msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--msg-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-avatar svg {
  width: 26px;
  height: 26px;
}

.message.user .msg-avatar {
  display: none;
}

.msg-content {
  max-width: 70%;
  line-height: 1.7;
  font-size: 15px;
}

.message.user .msg-content {
  background: var(--glass-bg-bubble-user);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  padding: 12px 18px;
  border-radius: 20px 20px 4px 20px;
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.message.assistant .msg-content {
  background: var(--glass-bg-bubble-user);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  padding: 12px 18px;
  border-radius: 20px 20px 20px 4px;
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.message.error .msg-content {
  background: rgba(224, 96, 80, 0.1);
  padding: 12px 18px;
  border-radius: 16px;
  color: #E06050;
}

.msg-content p {
  margin-bottom: 8px;
}

.msg-content p:last-child {
  margin-bottom: 0;
}

.msg-content strong {
  font-weight: 700;
}

.msg-content em {
  font-style: italic;
}

.msg-content del {
  text-decoration: line-through;
}

.msg-content h1, .msg-content h2, .msg-content h3 {
  margin: 16px 0 8px;
  font-weight: 700;
}

.msg-content h1 { font-size: 1.4em; }
.msg-content h2 { font-size: 1.2em; }
.msg-content h3 { font-size: 1.05em; }

.msg-content ul, .msg-content ol {
  margin: 8px 0;
  padding-left: 24px;
}

.msg-content li {
  margin-bottom: 4px;
}

.msg-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 12px;
  margin: 8px 0;
  color: var(--text-secondary);
}

.msg-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.msg-content a {
  color: var(--accent);
  text-decoration: underline;
}

.msg-content code {
  background: var(--bg-code);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
}

.msg-content .code-block {
  margin: 12px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-code-block);
}

.msg-content .code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: var(--code-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

.msg-content .code-block pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-code-block);
}

.msg-content .code-block code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

.typing-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* AI title pending placeholder: three bouncing dots (Jessica's order 2026-10-23).
   Applied to the sidebar conversation title and the header title while the
   AI-generated title is still on its way. */
.title-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 1em;
}
.title-pending .tp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: typingBounce 1.4s infinite ease-in-out;
}
.title-pending .tp-dot:nth-child(1) { animation-delay: 0s; }
.title-pending .tp-dot:nth-child(2) { animation-delay: 0.2s; }
.title-pending .tp-dot:nth-child(3) { animation-delay: 0.4s; }

.input-area {
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom) + var(--kb-offset));
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: padding-bottom 0.1s ease-out;
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 800px;
  background: var(--glass-bg-input);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1.5px solid rgba(255, 181, 158, 0.25);
  border-radius: 20px;
  padding: 8px 8px 8px 18px;
  box-shadow:
    0 0 24px 6px rgba(255, 181, 158, 0.18),
    0 0 48px 12px rgba(255, 181, 158, 0.08),
    inset 0 1px 0 var(--glass-highlight);
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.input-wrapper:focus-within {
  box-shadow:
    0 0 28px 8px rgba(255, 181, 158, 0.24),
    0 0 56px 16px rgba(255, 181, 158, 0.12),
    inset 0 1px 0 var(--glass-highlight);
}

/* The + button is touch-only — focusing it must NOT light up the input bar
   once the menu is closed. Mobile Chrome focus is unreliable to clear via
   blur() (hence the lingering glow), so suppress it in CSS. Higher
   specificity than :focus-within, so it wins whenever #plusBtn is the focused
   descendant. Textarea / send / thinking-toggle focus still get the glow
   normally.
   The :not(.plus-open) carve-out lets the deliberate menu-open glow (below)
   show while the menu is up. */
.input-wrapper:has(#plusBtn:focus):not(.plus-open) {
  box-shadow:
    0 0 24px 6px rgba(255, 181, 158, 0.18),
    0 0 48px 12px rgba(255, 181, 158, 0.08),
    inset 0 1px 0 var(--glass-highlight);
}

/* Deliberate "active" glow while the + menu is open. JS adds .plus-open in
   showPlusMenu() and removes it in closePlusMenu() — deterministic, unlike
   :hover/:focus which stick on mobile. */
.input-wrapper.plus-open {
  box-shadow:
    0 0 28px 8px rgba(255, 181, 158, 0.24),
    0 0 56px 16px rgba(255, 181, 158, 0.12),
    inset 0 1px 0 var(--glass-highlight);
}

.input-wrapper textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.5;
  max-height: 160px;
  padding: 6px 0;
}

.input-wrapper textarea::placeholder {
  color: var(--text-tertiary);
}

.send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-speed), transform 0.15s;
}

.send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.send-btn:active:not(:disabled) {
  animation: sendBounce 0.3s ease;
}

.send-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Light theme: deeper send-button color (Jessica fine-tune 2026-10-23) */
[data-theme="light"] .send-btn:not(:disabled) {
  background: #FF8A5C;
}

[data-theme="light"] .send-btn:hover:not(:disabled) {
  background: #FF7442;
}

@keyframes sendBounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.85); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.disclaimer {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 8px;
  margin-bottom: 4px;
  text-align: center;
}

[data-theme="dark"] .disclaimer {
  color: var(--text-secondary);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

#thinkingToggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  color: var(--text-tertiary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  box-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  /* Issue 13: no 300ms tap delay / double-tap-zoom weirdness on mobile */
  touch-action: manipulation;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}

#thinkingToggle:hover {
  border-color: var(--accent);
}

/* Issue 13: on touch devices :hover sticks after a tap (until tapping
   elsewhere), leaving a phantom accent ring. Only apply hover where
   hover truly exists. */
@media (hover: none) {
  #thinkingToggle:hover {
    border-color: var(--border);
  }
}

/* Kill any focus/active glow leaking — glow is purely .on-driven */
#thinkingToggle:focus,
#thinkingToggle:active,
#thinkingToggle:focus-visible {
  box-shadow: none;
  outline: none;
}

#thinkingToggle.on {
  background: linear-gradient(135deg, #FFE0D3, #FFD1C1);
  border-color: var(--accent);
  color: var(--text-primary);
  box-shadow: 0 0 12px rgba(255, 181, 158, 0.3);
}

/* Ensure .on glow wins over :focus/:active even when combined */
#thinkingToggle.on:focus,
#thinkingToggle.on:active,
#thinkingToggle.on:focus-visible {
  box-shadow: 0 0 12px rgba(255, 181, 158, 0.3);
  outline: none;
}

[data-theme="dark"] #thinkingToggle.on {
  background: linear-gradient(135deg, #3D2E24, #4A3728);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 99;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    z-index: 100;
    box-shadow: 4px 0 20px var(--shadow-strong);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar.open + .sidebar-overlay,
  .sidebar-overlay.open {
    display: block;
  }

  .hamburger-btn {
    display: flex;
  }

  .msg-content {
    max-width: 85%;
  }

  .suggestion-chips {
    flex-direction: column;
    align-items: center;
  }

  .input-area {
    padding: 8px 10px calc(36px + env(safe-area-inset-bottom) + var(--kb-offset));
  }

  .input-wrapper {
    padding: 6px 6px 6px 12px;
    gap: 6px;
  }

  .input-wrapper textarea {
    font-size: 14px;
    min-width: 0;
  }

  #thinkingToggle {
    padding: 5px 10px;
    font-size: 12px;
  }

  .send-btn {
    width: 34px;
    height: 34px;
  }

  .disclaimer {
    font-size: 11px;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (hover: none) {
}


/* ===== Cute Polish ===== */

/* Part 4a: Welcome avatar floating animation */
.welcome-avatar {
  animation: gentleFloat 3s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Part 4a: Suggestion chips */
.suggestion-chips {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.suggestion-chip {
  padding: 10px 20px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed), transform 0.15s;
  font-family: inherit;
}

.suggestion-chip:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  box-shadow: 0 2px 12px var(--shadow);
  transform: translateY(-1px);
}

.suggestion-chip:active {
  transform: translateY(0) scale(0.97);
}

/* Part 4b: Typing indicator mascot bounce */
#typingMsg .msg-avatar {
  animation: mascotBounce 1.2s ease-in-out infinite;
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Part 4c: Input wrapper warm glow on focus — see main .input-wrapper block */

/* Part 4e: Assistant name label */
.msg-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 2px;
  margin-left: 42px;
}

/* Part 3d: Sidebar empty state */
.sidebar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
}

.sidebar-empty-icon {
  width: 40px;
  height: 40px;
  opacity: 0.5;
}

.sidebar-empty-icon svg {
  width: 100%;
  height: 100%;
}

.sidebar-empty p {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Part 4f: Dark theme contrast adjustments */
/* Jessica 2026-10-23 16:49: welcome screen greeting + subtitle must be pure white in dark mode */
[data-theme="dark"] .welcome-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

[data-theme="dark"] .welcome-subtitle {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

[data-theme="dark"] .suggestion-chip {
  background: var(--bg-secondary);
  border-color: var(--border);
}

[data-theme="dark"] .suggestion-chip:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

/* Jessica 2026-10-23 fine-tune round 3 (+16:41 hardening): harden the dark-mode
   title white. The header title is rendered by .top-bar .top-bar-model (set by
   updateHeaderTitle() in app.js); sidebar titles are
   .conv-item .conv-item-title. Both must render exactly as white as the
   user's own message text — higher specificity so no glass, backdrop, or
   later rule can dim them. Light mode untouched.
   16:41: previous rule did not stick (title still rendered gray on device) —
   escalate with !important plus -webkit-text-fill-color (Blink/Android
   Chrome honors text-fill over color) so the white cannot be overridden. */
[data-theme="dark"] .top-bar .top-bar-model,
[data-theme="dark"] .conv-item .conv-item-title {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* 16:41: the hamburger icon in the dark header was also rendering dim —
   same hardening so the whole header reads at full brightness. */
[data-theme="dark"] .top-bar .hamburger-btn {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Jessica 2026-10-23 16:49: sidebar "Mousse" brand text must be pure white in dark mode too. */
[data-theme="dark"] .sidebar-logo-text {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Assistant message row layout */
.msg-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.message.assistant {
  flex-direction: column;
  gap: 0;
}

.attach-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  font-size: 18px;
  transition: background var(--transition-speed), border-color var(--transition-speed), transform 0.15s;
}

.attach-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.attach-btn:active {
  transform: scale(0.93);
}

/* The + button is touch-only. On touch devices :hover sticks after tap
   (mobile Chrome keeps it until the next "real" tap elsewhere), leaving a
   peach ring that needs extra taps to clear. Neutralize hover where there's
   no hover capability — same pattern as #thinkingToggle.
   BUT: keep :active so the button still gives brief tap feedback (peach
   border while the finger is down). :active doesn't stick on mobile. */
@media (hover: none) {
  .attach-btn:hover {
    background: var(--bg-input);
    border-color: var(--border);
  }
  .attach-btn:active {
    background: var(--bg-hover);
    border-color: var(--accent);
  }
}

.attach-btn svg {
  display: block;
  flex-shrink: 0;
}

.preview-strip-old-unused {
  display: none;
}

.preview-item {
  display: none;
}

.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-item .preview-remove {
  display: none;
}

.preview-item .preview-remove:hover {
  background: rgba(0, 0, 0, 0.8);
}

.bubble-images {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.bubble-images img {
  max-width: 160px;
  max-height: 120px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
}

/* AI-generated images from backend models (Phase 1: GPT via chat2api) */
.md-generated-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 12px;
  margin: 8px 0;
  display: block;
  cursor: pointer;
}

/* Issue 3: multiple images -> compact name list, one row per attachment */
.bubble-images.image-name-list {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 4px;
}
.bubble-image-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-code);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  max-width: 100%;
}
.bubble-image-row:hover {
  filter: brightness(0.97);
}
.bubble-image-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.bubble-image-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mousse-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 27, 22, 0.88);
  color: #FFFFFF;
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
  font-family: inherit;
}

.mousse-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  .attach-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .bubble-images img {
    max-width: 120px;
    max-height: 90px;
  }
}


/* ===== Code block header with buttons ===== */
.code-block-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.code-copy-btn, .code-dl-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.code-copy-btn:hover, .code-dl-btn:hover {
  background: rgba(255,181,158,0.2);
  color: var(--accent);
}

.code-lang-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}

/* ===== Download full text button ===== */
.download-full-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 8px 18px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-input));
  border: 1.5px solid var(--border);
  border-radius: 16px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.download-full-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px var(--shadow);
}

/* ===== File preview chips ===== */
.preview-strip {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 800px;
  padding: 0 4px 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.preview-strip:empty {
  display: none;
}

/* Issue 18: per-attachment upload progress */
.preview-chip-progress {
  flex: 1 1 60px;
  min-width: 60px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.preview-chip-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.15s linear;
}
.preview-chip-pct {
  font-size: 11px;
  color: var(--text-tertiary);
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.processing-chip {
  border-style: dashed;
}

.preview-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  flex-shrink: 0;
  max-width: 200px;
  animation: chipIn 0.2s ease-out;
}

@keyframes chipIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.preview-chip-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.preview-chip-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.preview-chip-name {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}

.preview-chip-size {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.preview-chip-remove {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}

.preview-chip-remove:hover {
  color: var(--accent);
}

/* ===== Bubble attachment chips ===== */
.bubble-attachments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.bubble-attach-chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--bg-code);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ===== Context menu ===== */
.conv-context-menu {
  position: fixed;
  z-index: 200;
  background: var(--glass-bg-popup);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 24px var(--shadow-strong), inset 0 1px 0 var(--glass-highlight);
  padding: 6px;
  min-width: 140px;
  animation: menuIn 0.15s ease-out;
  /* Prevent 300ms tap delay and double-tap zoom on the entire menu */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Modal backdrop for conversation context menu — transparent full-screen
   layer below the menu (z-index 199) that blocks ALL interaction with
   underlying UI while the menu is open. Tapping it closes the menu.
   Jessica's order: only the 3 menu buttons + empty-space tap may respond. */
.conv-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 199;
  background: transparent;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* "+" attach/camera popup menu — bottom-sheet style above the input bar.
   Same cute glass style as the conversation context menu. */
.plus-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 299;
  background: transparent;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.plus-menu {
  position: fixed;
  z-index: 300;
  background: var(--glass-bg-popup);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 24px var(--shadow-strong), inset 0 1px 0 var(--glass-highlight);
  padding: 6px;
  min-width: 150px;
  animation: menuIn 0.15s ease-out;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.plus-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--transition-speed);
}

.plus-menu-item:hover,
.plus-menu-item:active {
  background: var(--bg-hover);
}

/* Issue 14: no native text selection on user bubbles — long-press opens the
   action menu instead of summoning the OS text selector (which conflicted
   with the popup). */
/* Issue 15: user messages show username + avatar, mirroring the AI's mascot */
.message.user {
  flex-direction: column;
  align-items: flex-end;
}
.message.user .msg-row {
  justify-content: flex-end;
  width: 100%;
}
.message.user .msg-name {
  margin-left: 0;
  margin-right: 42px;
  text-align: right;
}
.message.user .msg-avatar.user-avatar {
  display: flex;
}
.msg-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.user-avatar-initial {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Issue 15: Settings profile section */
.settings-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--glass-bg-popup);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.settings-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--msg-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--border);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.settings-avatar .user-avatar-initial {
  font-size: 24px;
}
.settings-profile-info {
  flex: 1;
  min-width: 0;
}
.settings-profile-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}
.settings-username {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-username-input {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  width: 100%;
  outline: none;
}
.settings-profile-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.settings-profile-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.settings-password-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.settings-password-form input {
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text-primary);
  outline: none;
}

/* Issue 17: page-wide no-selection policy — no selecting or copying text
   anywhere by default (including AI replies); all copying goes through the
   long-press popup actions. Inputs stay editable/selectable. */
html, body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* No-selection policy for message bubbles (user + assistant).
   NOTE: -webkit-touch-callout is NOT an inherited property, so the rule must
   cover descendants explicitly — a finger landing on nested markup (KaTeX
   spans, <p>, <code>, ...) would otherwise still trigger Android's native
   long-press callout. Links/buttons are excluded so their native behavior
   (which our JS intentionally leaves alone) is preserved. */
.message .msg-content,
.message .msg-content *:not(a):not(button) {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Select-text mode: temporarily re-enable native selection inside ONE bubble
   (and its descendants). Specificity (0,3,0)+ beats the no-select rule above. */
.message .msg-content.selecting,
.message .msg-content.selecting * {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* Floating toolbar for select-text mode (Copy + Done) */
.msg-select-toolbar {
  position: fixed;
  z-index: 300;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--glass-bg-popup);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 24px var(--shadow-strong), inset 0 1px 0 var(--glass-highlight);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: menuIn 0.15s ease-out;
}
.msg-select-btn {
  min-height: 44px;
  padding: 10px 18px;
  background: none;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.msg-select-btn:active {
  background: var(--glass-highlight);
}

/* Message long-press menu: options stacked vertically (user's order 2026-10-23) */
.conv-context-menu.msg-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}
.conv-context-menu.msg-menu .conv-menu-item {
  white-space: nowrap;
  text-align: left;
}

@keyframes menuIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.conv-menu-item {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 14px 18px;
  background: none;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  /* Ensure the entire button area receives touch/pointer events */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.conv-menu-item:hover {
  background: var(--bg-hover);
}

.conv-menu-item.danger {
  color: #E06050;
}

.conv-menu-item.danger:hover {
  background: rgba(224, 96, 80, 0.1);
}

/* ===== Confirm dialog ===== */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.confirm-dialog {
  background: var(--glass-bg-popup);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border-radius: 20px;
  padding: 28px 28px 20px;
  min-width: 280px;
  max-width: 90vw;
  box-shadow: 0 8px 40px var(--shadow-strong), inset 0 1px 0 var(--glass-highlight);
  text-align: center;
  animation: menuIn 0.15s ease-out;
}

.confirm-dialog p {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.5;
}

.confirm-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.confirm-cancel, .confirm-ok {
  padding: 8px 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.confirm-cancel {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.confirm-cancel:hover {
  background: var(--bg-hover);
}

.confirm-ok {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.confirm-ok:hover {
  background: var(--accent-hover);
}

/* Jessica 2026-10-23 fine-tune: light-mode delete-confirm OK button must be
   deep red, not the light/pinkish accent. Dark mode untouched. */
[data-theme="light"] .confirm-ok {
  background: #D32F2F;
  border-color: #D32F2F;
}

[data-theme="light"] .confirm-ok:hover {
  background: #B71C1C;
}

/* Jessica 2026-10-23 16:42: dark-mode delete-confirm OK button must be the
   SAME deep red as light mode (was light peach/pink accent). */
[data-theme="dark"] .confirm-ok {
  background: #D32F2F;
  border-color: #D32F2F;
  color: #FFFFFF;
}

[data-theme="dark"] .confirm-ok:hover,
[data-theme="dark"] .confirm-ok:active {
  background: #B71C1C;
  border-color: #B71C1C;
}

/* ===== Pin indicator ===== */
.pin-indicator {
  font-size: 11px;
  margin-right: 4px;
}

/* ===== Archived section ===== */
.archived-section {
  margin-top: 8px;
  border-top: 1px solid var(--border-light);
  padding-top: 4px;
}

.archived-section.archived-fixed {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 4px;
  margin: 8px 0;
}

/* Light mode: soften the archived box so it blends with the glass sidebar
   instead of glaring as a solid bright panel */
[data-theme="light"] .archived-section.archived-fixed {
  background: rgba(255, 243, 230, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border-color: rgba(180, 158, 134, 0.28);
}

.archived-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

.archived-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  user-select: none;
}

.archived-toggle:hover {
  background: var(--bg-hover);
}

.archived-arrow {
  font-size: 10px;
}

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease-out;
}

.settings-panel {
  background: var(--glass-bg-popup);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  border-radius: 20px;
  width: 90vw;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px var(--shadow-strong), inset 0 1px 0 var(--glass-highlight);
  animation: menuIn 0.15s ease-out;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid var(--border-light);
}

.settings-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}

.settings-close:hover {
  color: var(--text-primary);
}

.settings-body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  flex: 1;
}

.settings-section {
  margin-bottom: 24px;
}

/* Memory block: visually distinct settings group */
.settings-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.settings-block-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--text-primary);
}

.settings-block .settings-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

/* Settings navigation list */
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-primary);
  transition: background 0.15s;
}

.settings-nav-item:active {
  background: var(--bg-tertiary);
}

.settings-nav-icon {
  font-size: 20px;
}

.settings-nav-label {
  flex: 1;
  font-weight: 600;
}

.settings-nav-arrow {
  font-size: 20px;
  color: var(--text-tertiary);
}

.settings-detail-title {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 16px 0;
  color: var(--text-primary);
}

.settings-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 15px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 8px;
}

/* Driver selection */
.settings-driver-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.settings-driver-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-driver-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-driver-option.selected {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.settings-driver-check {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.settings-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.settings-toggle input {
  display: none;
}

.settings-toggle-slider {
  width: 40px;
  height: 22px;
  background: var(--border);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
}

.settings-toggle-slider::after {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--accent);
}

.settings-toggle input:checked + .settings-toggle-slider::after {
  transform: translateX(18px);
}

.settings-toggle-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-memory-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 12px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
}

.settings-memory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  animation: chipIn 0.2s ease-out;
}

.settings-memory-item:last-child {
  border-bottom: none;
}

.settings-memory-text {
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.4;
}

.settings-memory-delete {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: #E06050;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s;
}

.settings-memory-delete:hover {
  background: rgba(224, 96, 80, 0.1);
}

.settings-memory-empty {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

.settings-memory-count {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 8px 0;
}

.settings-clear-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  color: #E06050;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.settings-clear-btn:hover {
  background: rgba(224, 96, 80, 0.08);
}

.settings-about-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 10px;
}

.settings-about-textarea::placeholder {
  color: var(--text-tertiary);
}

.settings-about-textarea:focus {
  border-color: var(--accent);
}

.settings-save-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--accent);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.settings-save-btn:hover {
  background: var(--accent-hover);
}

/* ===== Angry Mousse easter egg 😡 — double-tap any mascot ===== */
.mousse-mascot {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

.mousse-mascot .mousse-face-expr {
  display: none;
}

.mousse-mascot.mousse-expr .mousse-face-happy {
  display: none;
}

.mousse-mascot.mousse-expr-angry .mousse-face-angry,
.mousse-mascot.mousse-expr-aggrieved .mousse-face-aggrieved,
.mousse-mascot.mousse-expr-speechless .mousse-face-speechless,
.mousse-mascot.mousse-expr-joyful .mousse-face-joyful,
.mousse-mascot.mousse-expr-crying .mousse-face-crying {
  display: block;
}

.mousse-mascot.mousse-expr {
  animation: mousseShake 0.45s ease-in-out infinite;
}

.mousse-mascot.mousse-expr.angrier {
  animation-duration: 0.28s;
}

.mousse-mascot.mousse-expr-angry svg {
  animation: mousseFlush 0.9s ease-in-out infinite;
}

.mousse-mascot.mousse-expr-angry::after {
  content: '💢';
  position: absolute;
  top: -10px;
  right: -2px;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  animation: angerPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mousseShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-4px) rotate(-4deg); }
  75% { transform: translateX(4px) rotate(4deg); }
}

@keyframes mousseFlush {
  0%, 100% { filter: none; }
  50% { filter: sepia(0.45) saturate(2.2) hue-rotate(-25deg); }
}

@keyframes angerPop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mousse-mascot.mousse-expr,
  .mousse-mascot.mousse-expr svg {
    animation: none;
  }
}

.msg-timestamp {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 16px 0 8px 0;
  user-select: none;
}

[data-theme="dark"] .msg-timestamp {
  color: var(--text-secondary);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.typing-phrase {
  font-size: 13px;
  color: var(--text-secondary);
  margin-right: 4px;
}

.settings-logout .settings-nav-label {
  color: #E06050;
}

.private-chat-btn {
  margin-top: 8px;
  opacity: 0.85;
}

.private-banner {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 12px 0;
  user-select: none;
}

.send-btn.stop-mode {
  background: #E06050;
  border-color: #E06050;
  color: #fff;
}
.send-btn.stop-mode:hover {
  background: #D05040;
}

.settings-danger-btn {
  background: #E06050;
  border-color: #E06050;
  color: #fff;
}
.settings-danger-btn:hover {
  background: #D05040;
}

/* ===== Attachment preview overlay ===== */
.attachment-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attachment-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.attachment-preview-content {
  position: relative;
  max-width: 92vw;
  max-height: 86vh;
  overflow: auto;
  z-index: 1;
}
.attachment-preview-image {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 12px;
  object-fit: contain;
  cursor: zoom-out;
  display: block;
}
.attachment-preview-text-wrap {
  background: var(--glass-bg-popup);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border-radius: 16px;
  padding: 20px;
  max-width: 86vw;
  width: 560px;
  max-height: 80vh;
  overflow: auto;
}
.attachment-preview-filename {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  word-break: break-all;
}
.attachment-preview-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
}
.attachment-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attachment-preview-close:active {
  transform: scale(0.92);
}
.bubble-attach-chip[data-name] {
  cursor: default;
}

/* ============ Avatar editor (Issue B) — cute touch-friendly overlay ============ */
.av-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: msgIn 0.2s ease-out;
}
.av-editor-panel {
  width: min(94vw, 420px);
  max-height: 94vh;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 18px 50px var(--shadow-strong);
  padding: 14px 14px 18px;
}
.av-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.av-editor-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.av-editor-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
}
.av-editor-ok {
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  box-shadow: 0 4px 14px var(--shadow-strong);
  cursor: pointer;
}
.av-editor-ok:active { transform: scale(0.95); }
.av-editor-canvas-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.av-editor-canvas-wrap canvas {
  border-radius: 18px;
  border: 2px solid var(--border);
  background: var(--bg-input);
  box-shadow: 0 6px 20px var(--shadow);
  touch-action: none;
  cursor: grab;
}
.av-editor-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  min-height: 18px;
  margin-bottom: 8px;
}
.av-editor-tools {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
}
.av-tool {
  flex: 1;
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  border-radius: 14px;
  padding: 9px 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.av-tool.active {
  border-color: var(--accent);
  background: var(--bg-hover);
  color: var(--text-primary);
  box-shadow: 0 2px 10px var(--shadow);
}
.av-editor-sub {
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 12px;
  min-height: 64px;
}
.av-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.av-slider-row:last-child { margin-bottom: 0; }
.av-slider-row span { min-width: 38px; }
.av-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent-hover);
}
.av-colors {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.av-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 2px 6px var(--shadow);
}
.av-color.active { border-color: var(--text-primary); transform: scale(1.12); }
.av-doodle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.av-sizes { display: flex; gap: 6px; }
.av-size {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.av-size span {
  border-radius: 50%;
  background: var(--text-primary);
  display: block;
}
.av-size.active { border-color: var(--accent); }
.av-mini {
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.av-mini.active { border-color: var(--accent); color: var(--text-primary); }
.av-presets {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.av-preset {
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.av-preset.active {
  border-color: var(--accent);
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* KaTeX math rendering — inherits theme text color, mobile-safe */
.msg-content .katex { color: inherit; font-size: 1.05em; }
.msg-content .katex-display {
  margin: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
}
.msg-content .katex-display > .katex { white-space: nowrap; }

/* Image lightbox — full-screen preview for AI-generated images.
   Click any .md-generated-image to open. Back button / tap-outside / X closes. */
.img-lightbox-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: lbFadeIn 0.2s ease-out;
}
@keyframes lbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.img-lightbox-img {
  max-width: 96vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  -webkit-user-select: none;
  user-select: none;
}
.img-lightbox-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 401;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  pointer-events: none;
}
.img-lightbox-toolbar > * {
  pointer-events: auto;
}
.img-lightbox-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(30, 30, 30, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.img-lightbox-btn:active {
  background: rgba(60, 60, 60, 0.85);
}
.img-lightbox-close {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}