:root {
  --yeby-panel-width: 380px;
}

.yeby-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.yeby-bubble {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: auto;
  z-index: 99999;
  background: linear-gradient(135deg, var(--yeby-primary, #6C5CE7) 0%, #a363d9 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: scale(1);
  animation: yeby-pulse 2s infinite;
  max-width: calc(100vw - 2rem);
}

.yeby-bubble:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(108, 92, 231, 0.6);
}

@keyframes yeby-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(108, 92, 231, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
  }
}

.yeby-panel {
  position: fixed;
  left: 1rem;
  right: auto;
  bottom: calc(1rem + 56px);
  width: min(380px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  height: 500px;
  max-height: 60vh;
  z-index: 99999;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  display: none;
  flex-direction: column;
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

.yeby-panel.dark {
  background: #151515;
  color: #eee;
  background: #151515;
  color: #eee
}

.yeby-panel header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  background: #f8fafc;
}

.yeby-panel .msgs {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.yeby-panel footer {
  flex-shrink: 0;
  padding: 16px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f8fafc;
}

.yeby-panel input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: .6rem .8rem;
  font-size: .9rem;
  outline: none;
}

.yeby-panel input:focus {
  border-color: #6366f1;
}

.yeby-3d {
  position: fixed;
  left: 1rem;
  right: auto;
  bottom: calc(1rem + 56px + 420px + 12px);
  width: min(380px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  display: none;
  background: #000;
  z-index: 99998;
}

/* Override for visibility when not hidden */
.yeby-3d:not(.yeby-hidden) {
  display: block !important;
  left: 1rem !important;
  right: auto !important;
  bottom: calc(1rem + 56px + 420px + 12px) !important;
  width: min(380px, calc(100vw - 2rem)) !important;
  height: 260px !important;
}



/* Ajustes responsivos para pantallas pequeñas */

@media (max-width: 600px) {

  /* Force hide horizontal scroll */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Split layout: 3D on top, chat on bottom */
  .yeby-3d:not(.yeby-hidden) {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 50vh !important;
    border-radius: 0 0 16px 16px !important;
  }

  /* Chat panel on bottom half */
  .yeby-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 50vh !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 50vh !important;
    max-height: 50vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* Bubble stays bottom-left on mobile */
  .yeby-bubble {
    left: 1rem !important;
    right: auto !important;
    bottom: 1rem !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    position: fixed !important;
    z-index: 100000 !important;
  }
}




/* Espaciado entre mensajes dentro del widget. Evita que los mensajes del
   usuario y del bot queden “pegados” uno encima del otro. */
.yeby-panel .msgs div {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}


/* ==== YEBY v3 AR Overlay ==== */
#yeby-ar-overlay {
  pointer-events: none;
}

#yeby-ar-overlay .yeby-ar-ui {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

#yeby-ar-overlay .yeby-ar-top {
  position: absolute;
  top: 10px;
  right: 10px;
  pointer-events: auto;
}

#yeby-ar-overlay .yeby-btn {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

#yeby-ar-overlay .yeby-ar-chat {
  pointer-events: auto;
  background: rgba(20, 20, 20, 0.75);
  color: #fff;
  border-radius: 16px;
  padding: 8px;
  max-width: 520px;
  margin: 0 auto;
}

#yeby-ar-overlay .yeby-ar-msgs {
  max-height: 28vh;
  overflow: auto;
  padding: 6px;
}

#yeby-ar-overlay .yeby-ar-input {
  display: flex;
  gap: 6px;
  padding: 4px;
}

#yeby-ar-overlay .yeby-ar-input input {
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  padding: 8px 10px;
}

#yeby-ar-stage {
  background: #000;
}

#yeby-ar-overlay .msg {
  padding: 6px 10px;
  margin: 4px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

#yeby-ar-overlay .msg.me {
  background: rgba(102, 163, 255, 0.3);
  align-self: flex-end;
}

.yeby-ar-btn {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}

@media (max-width: 600px) {
  #yeby-ar-overlay .yeby-ar-chat {
    max-width: calc(100% - 16px);
  }
}


/* Mensajes con mejor separación y legibilidad */
.yeby-panel .msgs .yeby-msg {
  margin: 8px 0;
  line-height: 1.35;
  display: block;
}

.yeby-panel .msgs .yeby-author {
  display: inline-block;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  margin-right: 6px;
}

.yeby-author-bot {
  background: rgba(108, 92, 231, .15);
}

.yeby-author-user {
  background: rgba(46, 204, 113, .15);
}





/* v3 final: dark select legibility */
body.bg-dark,
body.dark,
:root[data-theme="dark"] {
  color-scheme: dark;
}

body.bg-dark .form-select,
body.dark .form-select,
:root[data-theme="dark"] .form-select {
  background-color: #171a26 !important;
  color: #e8ecff !important;
  border-color: #2a2f4a !important;
}

body.bg-dark option,
body.dark option,
:root[data-theme="dark"] option {
  background: #0f1323 !important;
  color: #e8ecff !important;
}

/* v3 final: navbar collapse visual smoothing (sin cambiar estructura) */
.navbar-collapse.collapse.show {
  background: var(--bg-navbar, rgba(16, 20, 40, .92));
  backdrop-filter: blur(6px);
  z-index: 1040;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
}

.navbar-collapse.collapse {
  will-change: height;
  transition: height .25s ease, opacity .2s ease;
}

.nav-transitioning .welcome-card,
.nav-transitioning .hero-welcome {
  pointer-events: none;
}

/* Q&A quick panel */
.yeby-qs-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer
}

#yeby-qs-panel {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  margin: 8px;
  padding: 6px;
  background: var(--yeby-panel-bg, #fff)
}

.yeby-panel.dark #yeby-qs-panel {
  background: #0f1323;
  border-color: #1d2235
}

.yeby-qs-head {
  font-weight: 600;
  margin: 4px 6px 8px;
  opacity: .8
}

.yeby-qs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto
}

.yeby-qs-item {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer
}

.yeby-panel.dark .yeby-qs-item {
  background: #131a2c;
  border-color: #232a42;
  color: #e8ecff
}

.yeby-qs-item:hover {
  filter: brightness(0.97)
}

.yeby-qs-empty {
  opacity: .6;
  font-size: 13px;
  padding: 8px
}

/* Preguntas rápidas - botón pill con glow sutil */
.yeby-qs-btn-glow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: linear-gradient(180deg, #ffffffcc, #ffffff99);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  margin-right: 8px
}

.yeby-panel.dark .yeby-qs-btn-glow {
  background: linear-gradient(180deg, #1a2238, #121a2c);
  color: #e8ecff;
  border-color: #222a44
}

.yeby-qs-btn-glow .icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, .25) inset
}

.yeby-qs-btn-glow:hover {
  filter: brightness(0.98)
}

#yeby-qs-panel {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  margin: 8px;
  padding: 6px;
  background: var(--yeby-panel-bg, #fff)
}

.yeby-panel.dark #yeby-qs-panel {
  background: #0f1323;
  border-color: #1d2235
}

.yeby-qs-head {
  font-weight: 600;
  margin: 4px 6px 8px;
  opacity: .85
}

.yeby-qs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow: auto
}

.yeby-qs-item {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 13px
}

.yeby-panel.dark .yeby-qs-item {
  background: #131a2c;
  border-color: #232a42;
  color: #e8ecff
}

.yeby-qs-item:hover {
  filter: brightness(0.97)
}

.yeby-qs-empty {
  opacity: .65;
  font-size: 13px;
  padding: 8px
}

/* === RESTORED CHAT UI STYLES === */

/* Chat message styles */
.msg {
  margin-bottom: .6rem;
  display: flex;
}

.msg.me {
  justify-content: flex-end;
}

.msg .bubble {
  background: #e5e7eb;
  padding: .6rem .9rem;
  border-radius: .9rem;
  max-width: 80%;
  line-height: 1.4;
}

.msg.me .bubble {
  background: #6366f1;
  color: #fff;
}

.msg.bot .bubble {
  background: rgba(15, 23, 42, .12);
  border: 1px solid rgba(148, 163, 184, .2);
  color: #1f2937;
}

.msg.typing .bubble {
  display: flex;
  gap: .3rem;
  padding: .8rem;
}

.msg.typing .dot {
  width: 7px;
  height: 7px;
  background: #94a3b8;
  border-radius: 50%;
  animation: yeby-dot 1.2s infinite;
}

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

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

@keyframes yeby-dot {

  0%,
  100% {
    opacity: .3;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* Quick questions holder */
.yeby-qs-holder {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .5rem 0;
}

/* Panel display control */
.yeby-panel {
  display: none;
  flex-direction: column;
}

/* Panel header */
.yeby-panel header h6 {
  margin: 0;
  font-weight: 600;
  font-size: .95rem;
}

.yeby-panel .yeby-status {
  font-size: .7rem;
  opacity: .7;
}

.yeby-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yeby-close:hover {
  color: #374151;
}

/* Panel footer input */
.yeby-panel input {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: .6rem;
  font-size: .85rem;
  outline: none;
}

.yeby-panel input:focus {
  border-color: #6366f1;
}

#yeby-send {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .6rem .9rem;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background .2s ease;
}

#yeby-send:hover {
  background: #4f46e5;
}

/* Mobile responsiveness */

/* Q&A quick panel (widget) */
.yeby-qs-btn-glow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: linear-gradient(180deg, #ffffffcc, #ffffff99);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  margin-right: 8px
}

.yeby-panel.dark .yeby-qs-btn-glow {
  background: linear-gradient(180deg, #1a2238, #121a2c);
  color: #e8ecff;
  border-color: #222a44
}

.yeby-qs-btn-glow .icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, .25) inset
}

#yeby-qs-panel {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  margin: 8px;
  padding: 6px;
  background: var(--yeby-panel-bg, #fff)
}

.yeby-panel.dark #yeby-qs-panel {
  background: #0f1323;
  border-color: #1d2235
}

.yeby-qs-head {
  font-weight: 600;
  margin: 4px 6px 8px;
  opacity: .85
}

.yeby-qs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow: auto
}

.yeby-qs-item {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 13px
}

.yeby-panel.dark .yeby-qs-item {
  background: #131a2c;
  border-color: #232a42;
  color: #e8ecff
}

.yeby-qs-item:hover {
  filter: brightness(0.97)
}

.yeby-qs-empty {
  opacity: .65;
  font-size: 13px;
  padding: 8px
}