/* ===== TOGGLE ===== */
    #chat-toggle, #expand-toggle {
      display: none;
    }

    
    /* Floating open chat button */
    .chat-button {
      position: fixed;
      right: 30px;
      bottom: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      width: 60px;
      height: 60px;
      background-color: #4caf50;
      border-radius: 50%;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s ease;
      z-index: 10;
    }

    .chat-button:hover {
      background-color: #4caf50;
    }

    /* Pulsate Animation */
    .chat-button::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(76, 175, 80, 0.6);
      z-index: -1;
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }
      70% {
        transform: scale(1.5);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }

    /* ===== CHAT CONTAINER ===== */
    .chat-container {
      position: fixed;
      bottom: 40px;
      right: 41px;
      width: 320px;
      /* height: 460px; */
      height: calc(100% - 120px); /* adjusts dynamically */
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(30px);
      opacity: 0;
      pointer-events: none;
      transition: all 0.4s ease;
      z-index: 9999;
    }

    .chat-messages{
      height: calc(100% - 80px); /* adjusts dynamically */
    }

    /* Show when checked */
    #chat-toggle:checked ~ .offcanvas {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    #chat-toggle:checked ~ .offcanvas {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    #expand-toggle:checked ~ .offcanvas{
      width: calc(100% - 80px) !important;
    } 

    /* ===== HEADER ===== */
    .close-btn,.expand-btn {
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      cursor: pointer;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      line-height: 1.8;
      text-align: center;
      transition: background 0.3s;
    }

    .close-btn:hover {
      background: rgba(255,255,255,0.3);
    }

    .chat-header .btn.btn-outline-dark,
    .chat-header .btn.btn-danger-dark{
      line-height: 1;
    }

    .chat-header .btn.btn-outline-dark:hover,
    .chat-header .btn.btn-outline-danger:hover{
      background: transparent !important;
      border:none;
      box-shadow: none !important;
      color: initial !important;
      opacity: 0.5;
    }

    /* ===== CHAT MESSAGES ===== */
    .chat-messages {
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      flex: 1;
      background: #f7f7f7;
      scroll-behavior: smooth;
    }

    .ai-avt.avatar {
      width: 50px;
      height: 43px;
      border-radius: 50%;
      overflow: hidden;
    }

    .ai-avt.avatar img{
      object-fit: contain;
      object-position: center;
      width: 100%;
    }

    .ai-msg .msg-txt{
      line-height: 1.2;
      border-bottom-left-radius:0 !important ;
    }

    .ai-msg.timestamp {
      font-size: 0.7em;
      margin-top: 3px;
      display: flex;
      justify-content: end;
    }

    .human-msg .msg-txt{
      line-height: 1.2;
      border-bottom-right-radius:0 !important ;
    }

    .human-msg.timestamp {
      font-size: 0.7em;
      margin-top: 3px;
      display: flex;
      justify-content: start;
    }

    /* ===== INPUT AREA ===== */
    .chat-input {
      display: flex;
      align-items: center;
      padding: 10px;
      background: #ffffff;
      gap: 15px;
    }

    .chat-input .form-control {
      font-size: 0.9em;
      border: 0;
    }

    .chat-input .form-control:focus {
      border:0;
      outline: 0;
      box-shadow:none;
    }

    .send-btn.btn {
      background: #fff;
      color: #212529;
      border: 1px solid #212529;
      padding: 0 !important;
      border-radius: 50% !important;
      width: 36px;
      height: 36px;
      cursor: pointer;
      margin-left: 20px !important;
      transition: background 0.3s ease;
    }

    .send-btn.btn:hover {
      color: #fff;
      background: #212529;
      transition: background 0.3s ease;
    }

@media screen and (max-device-width: 736px) {
  .expand-btn.text-muted{display: none !important;} 
}    

@media screen and (max-device-width: 480px) {
  .chat-button{right: 20px}

  .chat-container{
    bottom: 45px;
    right: 35px;
    left: 27px;
    width: auto;
  }
}

/* === MARKDOWN FIXES === */

/* Allow Markdown paragraphs to display correctly */
.msg-text p {
    margin: 0 0 10px 0;
}

/* Allow HTML content generated by Showdown to render properly */
.msg-text {
    white-space: normal !important;
    display: block;
    overflow-wrap: break-word;
}

/* Bullet lists styling */
.msg-text ul {
    padding-left: 20px;
    margin: 10px 0;
}

.msg-text li {
    list-style-type: disc;
    margin-bottom: 6px;
}