:root{
  /* Palette */
  --rcv2-blue: #1E3456;
  --rcv2-light-blue: #457B9D;
  --rcv2-green: #2CA821;
  --rcv2-white: #ffffff;
  --rcv2-black: #000000;

  /* UI colors */
  --rcv2-bg: var(--rcv2-white);
  --rcv2-text: #111;
  --rcv2-muted-bg: transparent;
  --rcv2-border: #ccc;

  /* Accents */
  --rcv2-primary: #F4F5F9;
  --rcv2-card-bg: #fff;
  --rcv2-input-bg: #fff;
  --rcv2-icon-color: #bccfdb;

  /* Typography */
  --rcv2-font-family: inherit;
  --rcv2-title-size: 36px;
  --rcv2-title-size-mobile: 22px;
  --rcv2-body-size: 17px;
  --rcv2-body-size-mobile: 14px;
  --rcv2-card-font-size: 16px;
  --rcv2-card-font-weight: 600;
  --rcv2-input-font-weight: 500;

  /* Shadow */
  --rcv2-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}


/*
*   STYLE
*/
.conver-widget-v2 {
  font-family: var(--rcv2-font-family) !important;
  color: var(--rcv2-text) !important;
  background: linear-gradient(180deg, #E3F2FD 0%, #F0F9FF 50%, #FFF 100%), #FFF;
  width: 100% !important;
  max-width: 100vw !important;
}

.conver-widget-v2 .chat-container {
  background-color: transparent;
  width: 55% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 500px !important;
  margin: auto !important;
  justify-content: center;
  padding: 115px 0px;
}

.conver-widget-v2 .chat-header {
  padding: 20px 20px 20px 0px !important;
  text-align: center !important;
  font-size: var(--rcv2-title-size) !important;
  font-weight: 700 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-header-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.conver-widget-v2 .sub-chat-header {
  background: var(--rcv2-primary) !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

.conver-widget-v2 .sub-chat-header-colorless{
  color: var(--rcv2-primary) !important;
}

.conver-widget-v2 .chat-header span {
  font-size: var(--rcv2-title-size-mobile);
  font-weight: 400;
}

/* Domande rapide */
.entry-chats-wrapper {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  row-gap: 10px;
  column-gap: 10px;
  padding: 10px;
  margin: 0px auto;
  height: fit-content !important;
  margin-top: 15px;
}

.conver-widget-v2 .entry-chat {
  background-color: var(--rcv2-card-bg) !important;
  padding: 15px !important;
  border-radius: 95px !important;
  cursor: pointer !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  min-height: fit-content !important;
  width: 100% !important;
  border: none !important;
  outline: none !important;
  color: var(--rcv2-white) !important;
  font-weight: var(--rcv2-card-font-weight) !important;
  font-size: var(--rcv2-card-font-size) !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.conver-widget-v2 .entry-chat {
  background-color: var(--rcv2-card-bg) !important;
  padding: 8px 15px !important;
  border-radius: 95px !important;
  cursor: pointer !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  min-height: fit-content !important;
  width: 100% !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #E5E7EB !important;
  outline: none !important;
  color: var(--rcv2-black) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  white-space: normal !important;
  word-break: break-word !important;
  font-family: 'Codec Cold News', sans-serif !important;
  text-transform: math-auto !important;
  margin: 0px !important;
}

.conver-widget-v2 .entry-chat:hover {
  cursor: pointer !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: #0197C8 !important;
  color: #0197C8 !important;
}

button.entry-chat:last-of-type {
  grid-column-start: 2;
  grid-column-end: 2;
}

/* Chat box */
.conver-widget-v2 .chat-box {
  flex-grow: 0 !important;
  padding: 0px !important;
  overflow-y: auto !important;
  height: fit-content !important;
  border: none;
}

/* Input area */
.conver-widget-v2 .input-area-conver {
  display: flex !important;
  align-items: center !important;
  background-color: var(--rcv2-input-bg) !important;
  border-radius: 40px !important;
  padding: 5px 14px !important;
  width: 100% !important;
  box-shadow: var(--rcv2-shadow) !important;
  max-height: 100% !important;
  margin: 0px;
}

.user-input-conver {
  width: 100%;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
  box-sizing: border-box;

  /* base: una riga */
  min-height: calc(1.4em + 12px); /* 12px = esempio padding totale se c’è */
}

.input-area-conver-wrapper {
  border-radius: 40px !important;
  padding: 0px !important;
  width: 100% !important;
  box-shadow: 0px 4px 4px 0px rgb(0 0 0 / 23%) !important;
  border-style: solid;
  border-width: 1px;
  background: linear-gradient(90deg, #00B4D8 0%, #0077B6 100%) !important;
  border-color: transparent;
}

/* base */
.icon-erase{
  opacity: 0;
  transition: opacity 2.35s ease-in-out;
  pointer-events: none;
}

/* visibile */
.icon-erase.active {
  opacity: 1 !important;
  pointer-events: auto;
  font-size: 21px;
  cursor: pointer;
}

.icon-erase.hidden{
  opacity: 0;
  pointer-events: none;
}

.conver-widget-v2 .user-input-conver {
  flex-grow: 1 !important;
  border: none !important;
  background-color: transparent !important;
  font-size: var(--rcv2-body-size) !important;
  padding: 10px !important;
  outline: none !important;
  color: var(--rcv2-text) !important;
  margin-right: 10px !important;
  font-weight: var(--rcv2-input-font-weight) !important;
  line-height: normal;
}

@property --gA {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.box-btn-conver{
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  margin: 3px 15px;
  padding: 3px;
  border-radius: 25px;
  --gA: 0;
  background:
    linear-gradient(
      90deg,
      rgba(224, 97, 112, var(--gA)) 0%,
      rgba(253, 226, 31, var(--gA)) 33%,
      rgba(115, 195, 114, var(--gA)) 66%,
      rgba(50, 135, 255, var(--gA)) 100%
    ),
    #fff !important;
  background-size: 300% 300%, auto;
  background-position: 0% 50%, 0 0;
  transition: --gA .25s ease;
}

.box-btn-conver:hover{
  --gA: 1;
  animation: boxGradientLoop 2s ease-in-out infinite alternate;
}

.box-btn-conver.active{
  --gA: 0 !important;
  animation: none !important;
}

@keyframes boxGradientLoop{
  0%   { background-position: 0% 50%, 0 0; }
  100% { background-position: 100% 50%, 0 0; }
}

.conver-widget-v2 .send-btn-conver {
  width: 180px !important;
  height: fit-content !important;
  background-color: var(--rcv2-primary) !important;
  border: none !important;
  border-radius: 25px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  color: var(--rcv2-black) !important;
  padding: 7px 17px !important;
  margin: 0px;
  gap: 8px;
  white-space: nowrap !important;
  overflow: hidden !important;
  transition: width 0.3s ease-in-out, background-color 0.2s ease !important;
}

.conver-widget-v2 a.send-btn-conver.active {
  width: 20px !important;
  background: #0A4ADD !important;
  color: white !important;
}

/* Messaggi della chat */
.conver-widget-v2 .chat-message {
  margin-bottom: 40px !important;
  display: flex !important;
}

.conver-widget-v2 .chat-message.user {
  justify-content: flex-end !important;
}

.conver-widget-v2 .chat-message.system {
  justify-content: flex-start !important;
}

.conver-widget-v2 .chat-message.system:last-of-type {
  margin-bottom: 65px !important;
}

.conver-widget-v2 .chat-message .message-content {
  max-width: 100% !important;
  padding: 15px 25px !important;
  border-radius: 15px !important;
}

.conver-widget-v2 .chat-message.user .message-content {
  background-color: var(--rcv2-white) !important;
  color: var(--rcv2-black) !important;
  text-align: right !important;
}

.conver-widget-v2 .chat-message.system .message-content {
  background-color: var(--rcv2-muted-bg) !important;
  color: inherit !important;
  padding: 0px !important;
}

/* Loading dots */
.conver-widget-v2 .loading-conver {
  display: flex !important;
  justify-content: flex-start !important;
  padding: 10px !important;
  margin-bottom: 20px;
}

.conver-widget-v2 .dot {
  height: 10px !important;
  width: 10px !important;
  margin: 5px !important;
  border-radius: 50% !important;
  background-color: var(--rcv2-blue) !important;
  animation: rcv2-bounce 1.2s infinite !important;
}

.conver-widget-v2 .dot:nth-child(2) { animation-delay: 0.2s !important; }
.conver-widget-v2 .dot:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes rcv2-bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

.conver-widget-v2 .hidden { display: none !important; margin-bottom: 20px !important;}

.conver-widget-v2 .arrow-sending-conver {
  font-size: 20px !important;
}

.conver-widget-v2 .box-btn-conver a {
  text-decoration: none !important;
}

span.show-quick-questions {
    display: flex;
    justify-content: flex-end;
    width: fit-content;
    margin: 0px 0px 0px 25px;
    font-size: 12px;
    background: #cccccc73;
    padding: 5px 10px;
    border-radius: 0px 0px 16px 16px;
    cursor: pointer;
}

span.ai-search-text {
    font-weight: 400 !important;
}

/*
*   RESPONSIVE
*/
@media (max-width: 768px) {

  .conver-widget-v2 .chat-container {
    width: 90vw !important;
    min-height: unset !important;
    padding-bottom: 100px !important;
  }

  /* slider */
  .conver-widget-v2 .entry-chats-wrapper {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
  }

  .conver-widget-v2 .entry-chat {
    min-height: fit-content !important;
    padding: 10px !important;
    width: 100% !important;
    min-width: 70% !important;
    margin: 0px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
  }

  .conver-widget-v2 .entry-chat-icon-wrap {
    padding: 8px !important;
  }

  .conver-widget-v2 .entry-chat-icon {
    height: unset !important;
    width: unset !important;
  }

  .conver-widget-v2 .chat-header {
    font-size: 28px !important;
    padding: 10px !important;
  }

  .conver-widget-v2 .chat-header h1 {
    line-height: normal !important;
    margin-bottom: 0 !important;
    font-size: var(--rcv2-title-size-mobile) !important;
  }

  .conver-widget-v2 .input-area-conver {
    width: 100% !important;
    padding: 4px 8px !important;
  }

  .conver-widget-v2 .user-input-conver {
    font-size: var(--rcv2-body-size-mobile) !important;
  }

  .conver-widget-v2 .send-btn-conver {
    width: auto !important;
    height: fit-content !important;
  }

  .conver-widget-v2 .chat-box {
    padding: 15px !important;
    flex-grow: unset !important;
  }

  .conver-widget-v2 .chat-container {
    padding: 40px 0px 0px 0px;
  }

  .entry-chats-wrapper {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    row-gap: 10px;
    column-gap: 10px;
    padding: 0px;
    margin-top: 30px !important;
    height: fit-content !important;
  }

  .conver-widget-v2 .chat-message.system:last-of-type {
    margin-bottom: 25px !important;
  }

  span.ai-search-text {
    font-size: 14px;
  }

  .box-btn-conver {
    margin: 3px 0px;
  }
}

@media (min-width: 768px) and (max-width: 1540px) {
  .conver-widget-v2 .chat-container {
    width: 80vw !important;
  }
}