:root {
  color-scheme: dark;
}

/* Prevent overall window scroll; restrict scrolling to panels */
html, body { height: 100%; }
body { overflow: hidden; }
/* Glassy modern background */
body {
  background: radial-gradient(1200px 600px at 10% 0%, rgba(16,185,129,0.18), transparent 50%),
              radial-gradient(1000px 500px at 90% 10%, rgba(245,158,11,0.18), transparent 55%),
              linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
}

/* Chat bubble styles */
.bubble {
  max-width: 80%;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 0.95rem;
  line-height: 1.35;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.bubble-feed {
  max-width: 80%;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 0.85rem;
  line-height: 1.25;
}
.bubble-user {
  background: linear-gradient(135deg, #10b981 0%, #f59e0b 100%);
  color: white;
  margin-left: auto;
}
.bubble-assistant {
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(100, 116, 139, 0.22);
  backdrop-filter: blur(6px);
}

/* Panel glassy helpers */
.glass {
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(100, 116, 139, 0.22);
  backdrop-filter: blur(10px);
}

/* Inputs subtle glow */
input, select, button {
  transition: box-shadow 0.2s ease, transform 0.02s ease;
}
input:focus, select:focus, button:focus {
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
}
button:active { transform: translateY(0.5px); }

/* Status ticks */
.tick-single { color: #94a3b8; } /* slate-400 */
.tick-double { color: #10b981; } /* emerald-500 */
.tick-fail { color: #ef4444; } /* red-500 */
.tick-inline { font-size: 0.75rem; line-height: 1; }

/* Smooth scroll area */
#chat { scroll-behavior: smooth; }

/* Bubble footer: timestamp and ticks aligned to right (WhatsApp-like) */
.bubble-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 4px;
}
.bubble-feed .bubble-meta {
  font-size: 0.7rem;
  opacity: 0.7;
}