/* ==========================================================
   MOONWORKS – NEO CHATBOT
   Comet orbit + responsive popup positioning
========================================================== */


/* ==========================================================
   1. SHARED SETTINGS
========================================================== */

:root {
  /* Chat window */
  --neo-chat-width: 520px;
  --neo-chat-width-laptop: 460px;
  --neo-chat-height: 650px;

  /* Avatar and positioning */
  --neo-avatar-size: 55px;
  --neo-avatar-gap: 15px;
  --neo-bottom-offset: 25px;
  --neo-side-offset: 25px;

  /* Minimum free space above the popup */
  --neo-top-gap: 20px;
}


/* ==========================================================
   2. NEO COMET ORBIT

   De komeet staat volledig los van de Social Intents-avatar.
   De overlay wordt door JavaScript boven de avatar geplaatst.
========================================================== */

.neo-comet-overlay {
  position: fixed;
  display: block;

  width: 96px;
  height: 96px;

  overflow: visible;
  pointer-events: none;

  z-index: 999998;

  transform-origin: center;
}

.neo-comet-overlay .neo-comet-group {
  transform-origin: 50px 50px;
  animation: neoCometOrbit 16s linear infinite;
}

.neo-comet-overlay .neo-comet-tail-blur {
  fill: none;
  stroke: rgba(0, 177, 193, 0.28);
  stroke-width: 10px;
  stroke-linecap: round;
  filter: url("#neo-comet-tail-blur");
  opacity: 1;
}

.neo-comet-overlay .neo-comet-tail-core {
  fill: none;
  stroke: url("#neo-comet-tail-gradient");
  stroke-width: 5px;
  stroke-linecap: round;
  filter: url("#neo-comet-tail-glow");
  opacity: 1;
}

.neo-comet-overlay .neo-comet-head {
  fill: #efffff;
  filter: url("#neo-comet-head-glow");
}

@keyframes neoCometOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* Bij geopende chat iets rustiger */

body.neo-chat-open .neo-comet-overlay .neo-comet-group {
  animation-duration: 24s;
  opacity: 0.72;
}


/* ==========================================================
   3. SOCIAL INTENTS AVATAR POSITION
========================================================== */

#silc-btn {
  left: auto !important;
  right: var(--neo-side-offset) !important;
  bottom: var(--neo-bottom-offset) !important;
}


/* ==========================================================
   4. CHAT WINDOW
========================================================== */

#siWidget-chat {
  left: auto !important;
  right: var(--neo-side-offset) !important;

  /*
   * De popup staat altijd boven de avatar:
   * bottom offset + avatarhoogte + tussenruimte.
   */
  bottom: calc(
    var(--neo-bottom-offset)
    + var(--neo-avatar-size)
    + var(--neo-avatar-gap)
  ) !important;

  /*
   * Brede standaardversie op voldoende grote schermen.
   */
  width: min(
    var(--neo-chat-width),
    calc(100vw - 32px)
  ) !important;

  /*
   * Maximale hoogte van 650 px.
   * Op lagere schermen wordt de popup automatisch kleiner.
   */
  height: min(
    var(--neo-chat-height),
    calc(
      100vh
      - var(--neo-bottom-offset)
      - var(--neo-avatar-size)
      - var(--neo-avatar-gap)
      - var(--neo-top-gap)
    )
  ) !important;

  height: min(
    var(--neo-chat-height),
    calc(
      100dvh
      - var(--neo-bottom-offset)
      - var(--neo-avatar-size)
      - var(--neo-avatar-gap)
      - var(--neo-top-gap)
    )
  ) !important;

  max-width: none !important;

  max-height: calc(
    100vh
    - var(--neo-bottom-offset)
    - var(--neo-avatar-size)
    - var(--neo-avatar-gap)
    - var(--neo-top-gap)
  ) !important;

  max-height: calc(
    100dvh
    - var(--neo-bottom-offset)
    - var(--neo-avatar-size)
    - var(--neo-avatar-gap)
    - var(--neo-top-gap)
  ) !important;
}


/* ==========================================================
   5. SMALLER DESKTOPS AND LAPTOPS
========================================================== */

@media (max-width: 1200px) {
  #siWidget-chat {
    width: min(
      var(--neo-chat-width-laptop),
      calc(100vw - 32px)
    ) !important;
  }
}


/* ==========================================================
   6. LOW BROWSER WINDOWS
   Bijvoorbeeld een lage laptopresolutie of verkleind venster.
========================================================== */

@media (max-height: 800px) {
  :root {
    --neo-bottom-offset: 10px;
    --neo-avatar-gap: 10px;
    --neo-top-gap: 10px;
  }
}


/* ==========================================================
   7. MOBILE AND SMALL TABLETS
========================================================== */

@media (max-width: 768px) {
  :root {
    --neo-bottom-offset: 10px;
    --neo-side-offset: 10px;
    --neo-avatar-gap: 10px;
    --neo-top-gap: 10px;
  }

  #siWidget-chat {
    width: calc(100vw - 20px) !important;

    height: calc(
      100vh
      - var(--neo-bottom-offset)
      - var(--neo-avatar-size)
      - var(--neo-avatar-gap)
      - var(--neo-top-gap)
    ) !important;

    height: calc(
      100dvh
      - var(--neo-bottom-offset)
      - var(--neo-avatar-size)
      - var(--neo-avatar-gap)
      - var(--neo-top-gap)
    ) !important;

    max-height: calc(
      100vh
      - var(--neo-bottom-offset)
      - var(--neo-avatar-size)
      - var(--neo-avatar-gap)
      - var(--neo-top-gap)
    ) !important;

    max-height: calc(
      100dvh
      - var(--neo-bottom-offset)
      - var(--neo-avatar-size)
      - var(--neo-avatar-gap)
      - var(--neo-top-gap)
    ) !important;
  }
}


/* ==========================================================
   8. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .neo-comet-overlay .neo-comet-group {
    animation: none !important;
  }
}



/* ==========================================================
   MOONWORKS – NEO GLASS
   V1: layout, spacing en verhoudingen
========================================================== */


/* ==========================================================
   HEADER
========================================================== */

.bg-blue-600 {
  min-height: 74px !important;
  padding: 12px 16px !important;
}


/* ==========================================================
   CHAT CONTENT
========================================================== */

#chatContent {
  padding: 18px !important;
  scroll-padding-bottom: 20px !important;
}


/* ==========================================================
   MESSAGE WRAPPERS
========================================================== */

.si-comment-wrapper-admin,
.si-comment-wrapper-user {
  margin-bottom: 16px !important;
}


/* ==========================================================
   MESSAGE BUBBLES
========================================================== */

.si-comment-wrapper-admin .si-comment,
.si-comment-wrapper-user .si-comment {
  max-width: 82% !important;

  padding: 12px 16px !important;

  border-radius: 16px !important;

  font-size: 14px !important;
  line-height: 1.5 !important;

  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}


/* Neo message */

.si-comment-wrapper-admin .si-comment {
  border-bottom-left-radius: 6px !important;
}


/* Visitor message */

.si-comment-wrapper-user .si-comment {
  border-bottom-right-radius: 6px !important;
}


/* ==========================================================
   MESSAGE META
========================================================== */

.si-comment-wrapper-admin-name,
.si-comment-wrapper-admin-time,
.si-comment-wrapper-user-time,
.si-nt-admin,
.si-nt-user {
  margin-top: 5px !important;

  font-size: 10px !important;
  line-height: 1.3 !important;

  letter-spacing: 0.01em !important;
}


/* ==========================================================
   INPUT AREA
========================================================== */

#textarea-wrapper {
  padding: 10px 12px 12px !important;
}


/* Text field */

#message,
.msgArea {
  min-height: 50px !important;
  max-height: 140px !important;

  padding: 13px 48px 13px 15px !important;

  border-radius: 16px !important;

  font-size: 14px !important;
  line-height: 1.4 !important;

  resize: none !important;
}


/* ==========================================================
   FOOTER
========================================================== */

#footer {
  padding: 8px 14px 10px !important;

  font-size: 10px !important;
  line-height: 1.35 !important;
}


/* ==========================================================
   TYPING INDICATOR
========================================================== */

.typing-indicator {
  padding: 10px 14px !important;

  border-radius: 14px !important;
  border-bottom-left-radius: 6px !important;
}


/* ==========================================================
   SCROLLBAR
========================================================== */

#chatContent::-webkit-scrollbar {
  width: 6px !important;
}

#chatContent::-webkit-scrollbar-track {
  background: transparent !important;
}

#chatContent::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
}