/* ============================================================
   Lume Canister · Demo — editorial / blueprint design
   ============================================================ */

html, body { background: #FAFAF7; color: #141413; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A8A82;
}

.hairline { border-color: #E5E2D8; }

.display { letter-spacing: -0.03em; line-height: 0.95; font-weight: 600; }

.num { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; letter-spacing: -0.02em; }

/* Blueprint backdrop behind the bottle */
.blueprint {
  background-image:
    linear-gradient(0deg, rgba(20,20,19,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,19,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* Liquid surface shimmer */
.meniscus {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%,100% { opacity: 0.3; transform: translateX(-30%); }
  50%     { opacity: 0.9; transform: translateX(30%); }
}

/* Pulse on active cartridge */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(232,163,61,0.55); }
  100% { box-shadow: 0 0 0 14px rgba(232,163,61,0); }
}
.cart-active { animation: pulse-ring 1.6s ease-out infinite; border-color: #141413 !important; }

/* Flash ring around bottle on pour completion */
@keyframes flash {
  0%   { opacity: 0; }
  30%  { opacity: 0.7; }
  100% { opacity: 0; }
}
.flash-on { animation: flash 0.8s ease-out 1; }

/* Liquid rect transitions smoothly */
#liquid-rect, #liquid-rect-mini {
  transition: y 200ms linear, height 200ms linear;
}
.cart-fill { transition: height 360ms ease, background-color 200ms ease; }

/* ============================================================
   Chat bubbles — written by app.js into #chat-messages
   App.js wraps each bubble in <div class="flex chat-row {role}">
   with .chat-bubble.{user|assistant|error} inside.
   ============================================================ */

.chat-row { display: flex; }
.chat-row.user { justify-content: flex-end; }
.chat-row.assistant, .chat-row.error { justify-content: flex-start; }

.chat-bubble {
  padding: 12px 16px;
  max-width: 85%;
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-bubble.user {
  background: #141413; color: #FAFAF7;
  border-radius: 16px 16px 4px 16px;
}
.chat-bubble.assistant {
  background: #F4F2EC; color: #141413;
  border: 1px solid #E5E2D8;
  border-radius: 16px 16px 16px 4px;
}
.chat-bubble.assistant.error,
.chat-bubble.error {
  background: #FBE9E7; color: #7A2E2A;
  border: 1px solid #E8C5C0;
  border-radius: 16px;
}
.chat-bubble.thinking {
  display: inline-flex; gap: 5px; align-items: center;
  padding: 14px 16px;
}
.chat-bubble.thinking .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #8A8A82;
  animation: think-pulse 1.4s infinite ease-in-out;
}
.chat-bubble.thinking .dot:nth-child(2) { animation-delay: 0.2s; }
.chat-bubble.thinking .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes think-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40%           { opacity: 1;   transform: scale(1.1); }
}

/* Suggestion chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid #E5E2D8;
  border-radius: 999px;
  background: #FAFAF7;
  color: #3A3A37;
  font-size: 13px;
  transition: all 160ms ease;
  white-space: nowrap;
  cursor: pointer;
  font-family: 'Inter', system-ui;
}
.chip:hover { border-color: #141413; background: #F4F2EC; }

/* Focus rings */
*:focus-visible {
  outline: 2px solid #141413;
  outline-offset: 2px;
  border-radius: 2px;
}
button, input, select, textarea { outline-offset: 3px; }

/* Native select styled */
.select-native {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  padding: 8px 32px 8px 12px;
  border: 1px solid #E5E2D8;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #141413;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23141413' stroke-width='1.4'><path d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: 'Inter', system-ui;
}
.select-native:hover { border-color: #141413; }

/* Scrollbar */
.nice-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.nice-scroll::-webkit-scrollbar-thumb { background: #D9D5C9; border-radius: 3px; }
.nice-scroll::-webkit-scrollbar-track { background: transparent; }

/* Sticky bottle on mobile */
@media (max-width: 1023px) {
  #dispenser-shell {
    position: sticky;
    top: 56px;
    z-index: 20;
    background: #FAFAF7;
    border-bottom: 1px solid #E5E2D8;
  }
}

/* Number tick-up animation */
.num-tick { transition: color 240ms ease; }
.num-tick.bumped { color: #E8A33D; }

/* Live dot */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #7B8C5C;
  box-shadow: 0 0 0 0 rgba(123,140,92,0.6);
  animation: live 2s ease-in-out infinite;
  display: inline-block;
}
@keyframes live {
  0%,100% { box-shadow: 0 0 0 0 rgba(123,140,92,0.6); }
  50%     { box-shadow: 0 0 0 5px rgba(123,140,92,0); }
}
.live-dot.thinking { background: #E8A33D; }
.live-dot.disconnected { background: #C25450; animation: none; box-shadow: none; }

/* Voice + status pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border: 1px solid #E5E2D8;
  border-radius: 999px;
  font-size: 12px;
  color: #3A3A37;
  background: #FAFAF7;
  cursor: pointer;
  font-family: 'Inter', system-ui;
}
.pill[data-on="true"] {
  border-color: #141413;
  background: #141413;
  color: #FAFAF7;
}

/* Parental lock styled button (parental.js generates a <button> inside #parental-mount) */
#parental-mount button {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid #E5E2D8;
  background: #FAFAF7;
  color: #141413;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  transition: background-color 150ms ease, border-color 150ms ease;
}
#parental-mount button:hover { border-color: #141413; }
#parental-mount button.is-locked {
  background: #C25450; color: #FAFAF7; border-color: #C25450;
}

/* "+ Mi preset" button (custom-preset.js injects this next to the <select>) */
.custom-preset-add-btn,
.cp-add-btn {
  font-size: 11px; padding: 5px 9px; border-radius: 999px;
  background: #FAFAF7; border: 1px solid #E5E2D8; color: #3A3A37;
  cursor: pointer; margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
}
.custom-preset-add-btn:hover,
.cp-add-btn:hover { background: #F4F2EC; border-color: #141413; }

/* Mic button states (extends inline classes from index.html) */
#mic-btn.mic-recording {
  background: #C25450 !important;
  border-color: #C25450 !important;
  color: #FAFAF7;
  animation: mic-pulse 1.2s infinite ease-in-out;
}
#mic-btn.mic-recording svg { stroke: #FAFAF7; }
#mic-btn.mic-processing {
  background: #FBE6C0 !important;
  border-color: #E8A33D !important;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 84, 80, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(194, 84, 80, 0); }
}

/* Generic modal overlay used by custom-preset and parental modules */
.envase-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,20,19,0.55);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.envase-modal {
  background: #FAFAF7; border: 1px solid #E5E2D8; border-radius: 12px;
  padding: 22px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px -20px rgba(20,20,19,0.35);
}
.envase-modal h3 { font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.envase-modal input, .envase-modal textarea {
  width: 100%; padding: 9px 11px; border: 1px solid #E5E2D8;
  border-radius: 8px; background: #FFFEF9; font-size: 13px; margin-bottom: 8px;
  font-family: 'Inter', system-ui;
}
.envase-modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .meniscus, .live-dot, .cart-active, .flash-on, .chat-bubble.thinking .dot, #mic-btn.mic-recording {
    animation: none !important;
  }
}