/* Luna V1 — asistente web. Debajo de navbar (100) y toasts (1000). */
.luna-root {
  --luna-bg: var(--ink2, #0D0F14);
  --luna-card: var(--ink3, #12151C);
  --luna-raised: var(--ink4, #191D26);
  --luna-gold: var(--gold, #C9A24B);
  --luna-gold2: var(--gold2, #E8CE8C);
  --luna-text: var(--text, #EAE5D9);
  --luna-text2: var(--text2, #A89F8C);
  --luna-line: var(--line, rgba(232, 206, 140, .12));
  font-family: var(--font-body, 'Manrope', -apple-system, sans-serif);
}
.luna-root.luna-hidden-page { display: none; }

.luna-fab {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, .55);
  background: rgba(8, 9, 12, .92);
  color: var(--luna-text);
  font: 700 14px/1 var(--font-body, sans-serif);
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .2s, transform .2s;
}
.luna-fab:hover { border-color: var(--luna-gold2); transform: translateY(-1px); }
.luna-fab:focus-visible, .luna-icon-btn:focus-visible, .luna-chip:focus-visible, .luna-send:focus-visible {
  outline: 2px solid var(--luna-gold2);
  outline-offset: 2px;
}
.luna-fab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--luna-gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2); }
.luna-fab-badge, .luna-title-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 5px;
  border-radius: 6px;
  background: var(--luna-gold);
  color: #08090C;
  line-height: 1;
}
.luna-open .luna-fab { display: none; }

.luna-panel {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: min(600px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--luna-bg);
  border: 1px solid var(--luna-line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  color: var(--luna-text);
  overflow: hidden;
}
.luna-panel[hidden] { display: none; }

/* Luna V2: window stays docked, can collapse to a header or expand without losing chat. */
.luna-root.luna-expanded .luna-panel {
  width: min(620px, calc(100vw - 32px));
  height: min(780px, calc(100dvh - 32px));
}
.luna-root.luna-minimized .luna-panel {
  width: min(300px, calc(100vw - 32px));
  height: auto;
  max-height: none;
}
.luna-root.luna-minimized .luna-log,
.luna-root.luna-minimized .luna-typing,
.luna-root.luna-minimized .luna-input-row {
  display: none;
}
.luna-root.luna-minimized .luna-header {
  padding: 10px 12px;
}
.luna-root.luna-minimized .luna-subtitle {
  display: none;
}
.luna-header-btns { flex-shrink: 0; }
.luna-panel { max-height: calc(100dvh - 24px); }


.luna-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px 16px;
  border-bottom: 1px solid var(--luna-line);
  background: var(--luna-card);
}
.luna-title { display: flex; align-items: center; gap: 8px; font: 600 18px/1.1 var(--font-display, Georgia, serif); color: var(--luna-gold2); }
.luna-subtitle { margin-top: 3px; font-size: 12px; color: var(--luna-text2); }
.luna-header-btns { display: flex; gap: 6px; }
.luna-icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: transparent;
  color: var(--luna-text2);
  font-size: 18px; line-height: 1;
  cursor: pointer;
}
.luna-icon-btn:hover { color: var(--luna-text); border-color: var(--luna-line); }

.luna-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}
.luna-msg {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.luna-msg-assistant { align-self: flex-start; background: var(--luna-raised); border: 1px solid rgba(255, 255, 255, .06); border-bottom-left-radius: 4px; }
.luna-msg-user { align-self: flex-end; background: rgba(201, 162, 75, .16); border: 1px solid rgba(201, 162, 75, .35); border-bottom-right-radius: 4px; }
.luna-msg.luna-notice { border-color: rgba(201, 162, 75, .5); color: var(--luna-gold2); font-weight: 600; }

.luna-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.luna-chip {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, .45);
  background: transparent;
  color: var(--luna-gold2);
  font: 600 13px/1.2 var(--font-body, sans-serif);
  cursor: pointer;
}
.luna-chip:hover:not(:disabled) { background: rgba(201, 162, 75, .12); }
.luna-chip:disabled { opacity: .5; cursor: default; }

.luna-typing { padding: 0 16px 8px; font-size: 12px; color: var(--luna-text2); font-style: italic; }
.luna-typing[hidden] { display: none; }

.luna-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--luna-line);
  background: var(--luna-card);
}
.luna-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--luna-bg);
  color: var(--luna-text);
  font: 500 15px/1 var(--font-body, sans-serif);
}
.luna-input:focus { outline: none; border-color: var(--luna-gold); }
.luna-send {
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 0;
  background: var(--luna-gold);
  color: #08090C;
  font: 700 14px/1 var(--font-body, sans-serif);
  cursor: pointer;
}
.luna-send:disabled, .luna-input:disabled { opacity: .6; cursor: default; }

/* Espacio extra al final de los formularios para que el botón no tape el envío. */
body.luna-enabled .form-body { padding-bottom: 72px; }

@media (max-width: 640px) {
  .luna-fab { height: 40px; padding: 0 12px 0 10px; font-size: 13px; }
  .luna-panel {
    left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: auto; max-height: 85vh; min-height: 55vh;
    border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .luna-root.luna-expanded .luna-panel {
    left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: 96dvh; min-height: 0; max-height: 96dvh;
  }
  .luna-root.luna-minimized .luna-panel {
    left: auto;
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: min(300px, calc(100vw - 24px));
    min-height: 0; height: auto; max-height: none;
    border: 1px solid var(--luna-line);
    border-radius: 12px;
  }
  .luna-input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .luna-fab { transition: none; }
}