/* public/js/help-chat/help-chat.css */


/* =====================================================
   CONTENEUR GLOBAL
===================================================== */

.help-chat-container {
  position: fixed;
  right: 20px;
  bottom: 20px;

  z-index: 8500;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;

  font-family: inherit;
}


/* =====================================================
   PETIT BONHOMME
===================================================== */

.help-chat-toggle {
  width: 58px;
  height: 58px;

  border: none;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--primary, #6c5ce7);
  color: white;

  font-size: 28px;
  
  overflow: hidden;
padding: 0;

  cursor: pointer;

  box-shadow:
    0 6px 20px
    rgba(0, 0, 0, 0.22);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.help-chat-toggle:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.28);
}


.help-chat-toggle:active {
  transform: scale(0.96);
}

/* =====================================================
   LOGO ASSISTANT
===================================================== */

.help-chat-floating-logo {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 50%;
}


.help-chat-header-logo {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  border-radius: 50%;
}


/* =====================================================
   FENÊTRE
===================================================== */

.help-chat-panel {
  width: 360px;
  max-width: calc(100vw - 32px);

  height: 480px;
  max-height: calc(100vh - 110px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;

  border:
    1px solid
    rgba(0, 0, 0, 0.10);

  border-radius: 18px;

  box-shadow:
    0 12px 38px
    rgba(0, 0, 0, 0.22);
}


.help-chat-panel.hidden {
  display: none;
}


/* =====================================================
   EN-TÊTE
===================================================== */

.help-chat-header {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 13px 14px;

  background: var(--primary, #6c5ce7);
  color: white;
}


.help-chat-title {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}


.help-chat-title-icon {
  flex-shrink: 0;

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.18);

  font-size: 20px;
}


.help-chat-title > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.help-chat-title strong {
  font-size: 14px;
  line-height: 1.2;
}


.help-chat-title small {
  opacity: 0.85;

  font-size: 11px;
  line-height: 1.2;
}


.help-chat-close {
  flex-shrink: 0;

  width: 32px;
  height: 32px;

  border: none;
  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.14);

  color: white;

  font-size: 16px;

  cursor: pointer;
}


.help-chat-close:hover {
  background:
    rgba(255, 255, 255, 0.24);
}


/* =====================================================
   MESSAGES
===================================================== */

.help-chat-messages {
  flex: 1;
  min-height: 0;

  overflow-y: auto;

  padding: 14px;

  background: #f7f7fa;
}


.help-chat-message {
  width: fit-content;
  max-width: 82%;

  padding: 9px 11px;

  border-radius: 13px;

  font-size: 13px;
  line-height: 1.4;

  overflow-wrap: anywhere;
}


.help-chat-message-assistant {
  margin-right: auto;

  background: white;

  border:
    1px solid
    rgba(0, 0, 0, 0.08);

  color: #252525;

  border-bottom-left-radius: 5px;
}

.help-chat-message-user {
  margin-top: 10px;
  margin-left: auto;

  background:
    var(--primary, #6c5ce7);

  color: white;

  border-bottom-right-radius: 5px;
}


.help-chat-message-user
+ .help-chat-message-assistant {
  margin-top: 10px;
}


/* =====================================================
   CHAMP QUESTION
===================================================== */

.help-chat-form {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 8px;

  padding: 10px;

  background: white;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.08);
}


.help-chat-input {
  flex: 1;
  min-width: 0;

  height: 40px;

  box-sizing: border-box;

  padding: 0 12px;

  border:
    1px solid
    #d8d8df;

  border-radius: 20px;

  outline: none;

  background: #f8f8fa;

  color: #222;

  font: inherit;
  font-size: 13px;
}


.help-chat-input:focus {
  border-color:
    var(--primary, #6c5ce7);
}


.help-chat-send {
  flex-shrink: 0;

  width: 40px;
  height: 40px;

  border: none;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--primary, #6c5ce7);
  color: white;

  font-size: 17px;

  cursor: pointer;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

  .help-chat-container {
    right: 12px;

    bottom:
      calc(
        12px +
        env(safe-area-inset-bottom)
      );
  }


  .help-chat-toggle {
    width: 54px;
    height: 54px;

    font-size: 25px;
  }


  .help-chat-panel {
    width:
      calc(100vw - 24px);

    height: min(480px, 70vh);

    max-height:
      calc(
        100vh -
        90px -
        env(safe-area-inset-bottom)
      );

    border-radius: 16px;
  }

}

/* =====================================================
   SOURCES / LIENS OFFICIELS
===================================================== */

.help-chat-sources {
  display: flex;
  flex-direction: column;
  gap: 7px;

  margin-top: 10px;
  padding-top: 9px;

  border-top:
    1px solid
    rgba(0, 0, 0, 0.10);
}


.help-chat-source-link {
  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;

  color:
    var(--primary, #6c5ce7);

  text-decoration: none;

  overflow-wrap: anywhere;
}


.help-chat-source-link:hover {
  text-decoration: underline;
}


.help-chat-source-link:focus-visible {
  outline:
    2px solid
    var(--primary, #6c5ce7);

  outline-offset: 2px;

  border-radius: 4px;
}