/* Embedded chat styling (Dudley) */

/* No .embedded-chat-section .container override: it capped this section's
   container narrower than the site-wide .container everything else uses
   (e.g. the Affordability accordion), which is why the chat box didn't
   scale in step with the rest of the page. See dudley.css for the same fix
   and more detail — this file duplicated the same rule. */

.chat-panel.chat-panel-embedded{
  width:100%;
  max-width:980px;
  margin:0 auto;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  overflow:hidden;
  background:#fff;
}

.chat-messages{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  max-height:420px;
  overflow:auto;
  background:#fff;
}
/* Chat container layout */
.chat-panel { ... }

/* Section header */
.chat-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-heading-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* message bubbles */
.chat-msg { ... }
/* message bubbles */
.chat-msg{
  max-width:85%;
  padding:12px 14px;
  border-radius:14px;
  line-height:1.45;
  border:1px solid rgba(0,0,0,0.08);
  white-space:pre-wrap;
  word-break:break-word;
}

.chat-msg-user{
  align-self:flex-end;
  background:#e9f2ff;
  border-color:rgba(0,0,0,0.06);
}

.chat-msg-bot{
  align-self:flex-start;
  background:#ffffff;
}

/* input row */
.chat-input-row,
.chat-input-row-inline{
  display:flex;
  gap:12px;
  align-items:stretch;
  padding:14px;
  border-top:1px solid rgba(0,0,0,0.08);
  background:#f7f8fa;
}

#chat-input{
  flex:1;
  width:100%;
  min-height:56px;
  max-height:140px;
  resize:none;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.14);
  font:inherit;
  line-height:1.4;
  background:#fff;
  outline:none;
}

#chat-input:focus{
  border-color:rgba(0,0,0,0.35);
}

.chat-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.btn-primary,
.btn-outline{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
}

.btn-primary{
  border:0;
}

.btn-outline{
  background:transparent;
  border:1px solid rgba(0,0,0,0.18);
}
/* Dudley chat – primary action button */
.embedded-chat-section .btn-primary {
  background-color: #D60078; /* replace with site pink */
  color: #fff;
}

.embedded-chat-section .btn-primary:hover {
  background-color: #BE006B; /* darker hover */
}

.embedded-chat-section .btn-primary:active {
  background-color: #A8005E; /* pressed state */
}
.embedded-chat-section .btn-outline {
  border-color: #e94b7d;
  color: #e94b7d;
}

.embedded-chat-section .btn-outline:hover {
  background: rgba(233, 75, 125, 0.08);
}
/* Broker (user) bubble: Dudley pale blue theme */
.chat-msg-user{
  background: rgba(0, 156, 221, 0.12); /* light tint of #009cdd */
  border-color: rgba(0, 156, 221, 0.28);
  color: #004c97; /* dark blue text */
}
.chat-msg-bot{
  background: #ffffff;
  border-color: rgba(0, 76, 151, 0.10);
  color: #111;
}
.chat-msg-bot ul,
.chat-msg-bot ol {
  margin: 8px 0 0 18px;
  padding: 0;
}

.chat-msg-bot li {
  margin: 6px 0;
}
/* Typing container */
.bs-typing{
  display:inline-flex;
  align-items:center;
}

/* Size of the animated logo */
.bs-typing-lenny{
  width:28px !important;
  height:28px !important;
  display:inline-block !important;
}

.bs-typing{
  display:inline-flex;
  align-items:center;
}

/* Each turret slice */
.bs-turret{
  transform-origin: bottom center;
  animation: chatTypingBounce 1s infinite ease-in-out;
}

/* Same stagger timing you used before */
.bs-turret-mid{ animation-delay: 0.15s; }
.bs-turret-right{ animation-delay: 0.30s; }

/* Same motion curve + opacity logic as dots */
@keyframes chatTypingBounce{
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-8px);
    opacity: 0.9;
  }
}

/* Keep your compact bubble styling */
.chat-msg[data-typing="1"]{
  padding:10px 14px;
  min-height:auto;
  line-height:1;
}