#chat-widget { font-family: Arial, sans-serif; }
.chat-button { position:fixed; bottom:20px; right:20px;border-radius: 20px; display:flex; align-items:center; justify-content:center; cursor:pointer;color:#fff;font-size:30px; box-shadow:0 3px 10px rgba(0,0,0,0.3); }
.chat-window { position:fixed; bottom:90px; right:20px; width:300px; height:400px; background:#fff;border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.3);display:none; flex-direction:column; overflow:hidden; }
.chat-header { background:#0078ff;color:white; padding:10px; display:flex; justify-content:space-between; align-items:center;}
.chat-header .left { display:flex; align-items:center; gap:8px; }
.bot-avatar { width:30px; height:30px; border-radius:50%; }
.chat-body { flex:1; padding:10px; overflow-y:auto; background:#f8f8f8; }
.chat-footer { display:flex; border-top:1px solid #ddd; }
#chat-input { flex:1; border:none; padding: 10px 10px 10px 15px; }
#chat-input:focus {
    outline: none;
}

#chat-send { background:#0078ff; border:none; color:#fff; padding:8px 15px; cursor:pointer; }

/* Mobile */
@media (max-width: 995px) {
  .chat-button {
    bottom: 100px;
  }
}

.message-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 8px;
  }
  
  .message-row.user {
    justify-content: flex-end;
  }
  
  .bubble-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  
  .message {
    position: relative;
    padding: 6px 10px 14px;
    border-radius: 6px;
    max-width: 75%;
    font-size: 14px;
    min-width: 60px;          /* 👈 prevents tiny bubbles */
    max-width: 75%;
    word-break: break-word;
  }
  
  .timestamp {
    position: absolute;
    bottom: 2px;
    right: 6px;
    font-size: 10px;
    opacity: 0.6;
  }
  
  /* Typing animation */
  .typing span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    background: #999;
    border-radius: 50%;
    animation: blink 1.4s infinite both;
  }
  
  .typing span:nth-child(2) { animation-delay: .2s }
  .typing span:nth-child(3) { animation-delay: .4s }
  
  @keyframes blink {
    0% { opacity: .2 }
    20% { opacity: 1 }
    100% { opacity: .2 }
  }
  
  .chat-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .chat-row.user {
    justify-content: flex-end;
  }
  
  /* AVATAR */
  .chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  
  /* CONTENT BLOCK */
  .chat-content {
    max-width: 75%;
  }
  
  /* NAME + TAG */
  .chat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    font-size: 12px;
  }
  
  .chat-name {
    font-weight: 600;
  }
  
  .chat-tag {
    background: #e5e5e5;
    color: #333;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
  }
  
  /* BUBBLES */
  .message.bot {
    background: #e5e5e5;
    color: #000;
    border-radius: 8px;
    padding: 8px 10px;
  }
  
  .message.user {
    background: #0078ff;
    color: #fff;
    border-radius: 8px;
    padding: 8px 10px;
  }
  
  /* TIMESTAMP OUTSIDE */
  .chat-time {
    font-size: 11px;
    color: #777;
    margin-top: 4px;
  }
  
  /* USER ALIGNMENT */
  .chat-row.user .chat-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    justify-content: flex-end;
  }
  
  /* TYPING BUBBLE */
  .typing-bubble {
    background: #e5e5e5;
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    gap: 4px;
  }
  
  .typing-bubble span {
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
    animation: blink 1.4s infinite both;
  }
  
  .typing-bubble span:nth-child(2) { animation-delay: .2s; }
  .typing-bubble span:nth-child(3) { animation-delay: .4s; }
  
  @keyframes blink {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
  }
  
  #chat-window {
    position: fixed;
    bottom: 90px;
    right: 20px;
  
    width: 360px;
    height: 520px;
  
    display: flex;
    flex-direction: column;
  
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
  
    /* animation */
    opacity: 0;
    transform: translateY(20px) scale(.95);
    pointer-events: none;
    transition: all .25s ease;
  }
  
  #chat-window.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }