/* =========================================================
   CD Chat — Full width dentro container Bootstrap
   ========================================================= */

/* Wrapper: occupa tutta la larghezza del contenitore padre */
.cd-chat-wrap{
  width: 100%;
  max-width: 100%;
  margin: 24px 0;
  padding: 0; /* lascia che sia il container WP/Bootstrap a gestire i padding */
  box-sizing: border-box;
}

/* Card: finestra "app-like" dentro la pagina */
.cd-chat-card{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  background: #fff;

  /* Altezza app-like (adatta il valore se hai header molto alto) */
  height: calc(100vh - 160px);
  min-height: 520px;

  display: flex;
  flex-direction: column;
}

/* Header statico */
.cd-chat-header{
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex: 0 0 auto;
}

.cd-chat-title{
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
}

.cd-chat-subtitle{
  opacity: .78;
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.35;
}

/* Messaggi: unica area scrollabile */
.cd-chat-messages{
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px;
  background: #fafafa;

  /* scroll più fluido su iOS */
  -webkit-overflow-scrolling: touch;
}

/* Quick actions */
.cd-chat-quick{
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

.cd-quick-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.1;
  transition: background .15s ease, transform .05s ease, border-color .15s ease;
}

.cd-quick-btn:hover{
  background: #f3f3f3;
  border-color: rgba(0,0,0,.18);
}

.cd-quick-btn:active{
  transform: translateY(1px);
}

/* Input */
.cd-chat-input{
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

.cd-chat-input input{
  flex: 1;
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  outline: none;
  box-sizing: border-box;
}

.cd-chat-input input:focus{
  border-color: rgba(0,0,0,.22);
}

.cd-chat-input button{
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  background: #111;
  color: #fff;
  font-size: 14px;
  line-height: 1.1;
  transition: transform .05s ease, opacity .15s ease;
}

.cd-chat-input button:hover{
  opacity: .92;
}

.cd-chat-input button:active{
  transform: translateY(1px);
}

/* Footer */
.cd-chat-footer{
  flex: 0 0 auto;
  padding: 10px 14px;
  font-size: 12px;
  opacity: .82;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

.cd-chat-footer a{
  color: inherit;
  text-decoration: underline;
}

/* Bubble styling */
.cd-msg{
  display: flex;
  margin: 10px 0;
}

.cd-msg--bot{
  justify-content: flex-start;
}

.cd-msg--user{
  justify-content: flex-end;
}

.cd-bubble{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 14px;
  white-space: pre-wrap;
  line-height: 1.35;
  font-size: 14px;
  box-sizing: border-box;
}

.cd-msg--bot .cd-bubble{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.cd-msg--user .cd-bubble{
  background: #0b5fff;
  color: #fff;
}

/* =========================================================
   Typing indicator — "Emma sta scrivendo..."
   Tre pallini animati che rimbalzano in sequenza.
   ========================================================= */
.cd-bubble--typing {
    padding: 12px 16px;
    min-width: 56px;
}

.cd-dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.cd-dots span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bbb;
    animation: cd-bounce 1.2s ease-in-out infinite;
}

.cd-dots span:nth-child(1) { animation-delay: 0s;    }
.cd-dots span:nth-child(2) { animation-delay: 0.2s;  }
.cd-dots span:nth-child(3) { animation-delay: 0.4s;  }

@keyframes cd-bounce {
    0%,  80%, 100% { transform: translateY(0);    opacity: .4; }
    40%            { transform: translateY(-5px);  opacity: 1;  }
}

/* Input e bottone disabilitati durante la risposta di Claude */
.cd-chat-input input:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

.cd-chat-input button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 575px){
  .cd-chat-wrap{
    margin: 12px 0;
  }

  .cd-chat-card{
    height: calc(100vh - 120px);
    min-height: 480px;
    border-radius: 14px;
  }

  .cd-bubble{
    max-width: 88%;
  }
}