/* Contact Chatbot Styles - Adapted from working_claude_chat_bot.html */
/* Modified for embedded use within Bootstrap grid */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --primary:#5C0002;
  --secondary:#8A8D8F;
  --white:#FFFFFF;
  --black:#000000;
  --gray:#f3f4f6;
  --border:#e5e7eb
}

/* Chat Box Container - Adapted for embedded use */
.chat-box{
  width:100%;
  max-width:800px;
  margin:0 auto 2rem;
  background:var(--white);
  border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:600px;
  max-height:650px;
}

@media(min-width:768px){
  .chat-box{
    min-height:650px;
  }
}

/* Larger size for desktop */
@media(min-width:1024px){
  .chat-box{
    max-width:1100px;
    min-height:750px;
    max-height:800px;
    font-size:16px;
  }

  .chat-box .bubble{
    max-width:500px;
    font-size:15px;
  }

  .chat-box .header-info h1{
    font-size:18px;
  }
}

/* Header */
.chat-box .header{
  background:var(--primary);
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:12px;
}

.chat-box .logo{
  width:44px;
  height:44px;
  background:var(--white);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Kanit',sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--primary);
}

.chat-box .header-info h1{
  color:var(--white);
  font-family:'Kanit',sans-serif;
  font-size:16px;
  font-weight:600;
  margin:0;
}

.chat-box .header-info p{
  color:rgba(255,255,255,.7);
  font-size:12px;
  margin:0;
}

.chat-box .dot{
  width:8px;
  height:8px;
  background:#33673B;
  border-radius:50%;
  display:inline-block;
  margin-right:5px;
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

/* Messages Area */
.chat-box .messages{
  flex:1;
  overflow-y:auto;
  padding:16px;
  background:var(--gray);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.chat-box .msg{
  display:flex;
  gap:10px;
  animation:fadeIn .3s;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.chat-box .msg.user{
  flex-direction:row-reverse;
}

.chat-box .avatar{
  width:32px;
  height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  flex-shrink:0;
  font-family:'Lato',sans-serif;
}

.chat-box .msg.bot .avatar{
  background:var(--primary);
  color:var(--white);
}

.chat-box .msg.user .avatar{
  background:var(--secondary);
  color:var(--white);
}

.chat-box .bubble{
  max-width:320px;
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.55;
  font-family:'Lato',sans-serif;
}

.chat-box .msg.bot .bubble{
  background:var(--white);
  color:var(--black);
  border-bottom-left-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}

.chat-box .msg.user .bubble{
  background:var(--primary);
  color:var(--white);
  border-bottom-right-radius:4px;
}

/* Message Content Sections */
.chat-box .section{
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}

.chat-box .section:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
}

.chat-box .section-title{
  font-family:'Kanit',sans-serif;
  font-weight:600;
  font-size:14px;
  color:var(--primary);
  margin-bottom:6px;
}

.chat-box .section-text{
  font-size:14px;
  line-height:1.6;
  color:#374151;
}

.chat-box .section-text ul{
  margin:8px 0 0 18px;
}

.chat-box .section-text li{
  margin-bottom:5px;
}

.chat-box .section-text a{
  color:var(--primary);
  font-weight:700;
  word-break:break-all;
  text-decoration:none;
}

.chat-box .section-text a:hover{
  text-decoration:underline;
}

/* Info Boxes */
.chat-box .info-box{
  background:#e0f2fe;
  border-left:4px solid #0ea5e9;
  padding:10px 12px;
  border-radius:0 8px 8px 0;
  margin-top:10px;
  font-size:13px;
  color:#0369a1;
}

.chat-box .warn-box{
  background:#fef3c7;
  border-left-color:#f59e0b;
  color:#92400e;
}

.chat-box .link-box{
  background:#f3f4f6;
  padding:10px 12px;
  border-radius:8px;
  margin-top:8px;
  font-size:13px;
  word-break:break-all;
}

/* Option Buttons */
.chat-box .options{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:14px;
}

@media(max-width:500px){
  .chat-box .options{
    grid-template-columns:1fr;
  }
}

.chat-box .opt-btn{
  background:var(--white);
  border:2px solid var(--border);
  border-radius:10px;
  padding:12px 10px;
  cursor:pointer;
  text-align:center;
  font-family:'Lato',sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--black);
  transition:all .2s;
}

.chat-box .opt-btn:hover{
  border-color:var(--primary);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(92,0,2,.12);
}

.chat-box .opt-btn.full{
  grid-column:1/-1;
}

.chat-box .opt-btn.back{
  background:#f9fafb;
  border-color:#d1d5db;
  color:var(--secondary);
}

.chat-box .opt-btn.back:hover{
  background:#f3f4f6;
  transform:none;
  box-shadow:none;
}

.chat-box .opt-btn.contact{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--white);
}

.chat-box .opt-btn.contact:hover{
  background:#4a0001;
}

.chat-box .opt-icon{
  font-size:20px;
  display:block;
  margin-bottom:4px;
}

/* Input Area */
.chat-box .input-area{
  padding:14px 16px;
  background:var(--white);
  border-top:1px solid var(--border);
}

.chat-box .input-wrap{
  display:flex;
  gap:10px;
}

.chat-box .input-field{
  flex:1;
  padding:12px 16px;
  border:2px solid var(--border);
  border-radius:20px;
  font-size:14px;
  font-family:'Lato',sans-serif;
  outline:none;
}

.chat-box .input-field:focus{
  border-color:var(--primary);
}

.chat-box .send-btn{
  width:44px;
  height:44px;
  background:var(--primary);
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}

.chat-box .send-btn:hover{
  background:#4a0001;
}

.chat-box .send-btn svg{
  width:18px;
  height:18px;
  fill:var(--white);
}

/* Loading Indicator */
.chat-box .loading-indicator{
  display:flex;
  gap:4px;
  padding:12px 16px;
  background:var(--white);
  border-radius:16px;
  border-bottom-left-radius:4px;
  width:fit-content;
}

.chat-box .loading-indicator span{
  width:8px;
  height:8px;
  background:#9ca3af;
  border-radius:50%;
  animation:bounce 1.4s infinite;
}

.chat-box .loading-indicator span:nth-child(2){
  animation-delay:.2s;
}

.chat-box .loading-indicator span:nth-child(3){
  animation-delay:.4s;
}

@keyframes bounce{
  0%,80%,100%{transform:translateY(0)}
  40%{transform:translateY(-5px)}
}