:root{
  --aya-primary:#8b5e3c;
  --aya-accent:#6f4b33;
  --aya-accent-light:#b08968;
  --aya-dark:#3f2a1d;
  --aya-chat-bg:rgba(255,250,246,0.97);
  --aya-chat-bot:#f3e6dc;
}

/* ==============================
   FLOATING AYABOT BUTTON
============================== */

#chatbot-btn{
  position:fixed;
  bottom:24px;
  right:24px;

  width:100px;
  height:100px;

  border-radius:50%;
  overflow:hidden;
  cursor:pointer;

  z-index:9999;

  background:#fffaf7;

  border:3px solid #fff;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:4px;

  box-shadow:
    0 10px 30px rgba(63,42,29,.28),
    0 0 0 2px rgba(176,137,104,.18);

  animation:pulseGlow 2.5s infinite;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

#chatbot-btn:hover{
  transform:scale(1.08);

  box-shadow:
    0 14px 36px rgba(63,42,29,.34),
    0 0 0 5px rgba(176,137,104,.15);
}

/* Bot logo */

#chatbot-btn img{
  width:100%;
  height:100%;

  object-fit:contain;

  border-radius:50%;

  display:block;

  transform:scale(1.08);
}

/* Gentle pulse */

@keyframes pulseGlow{
  0%{
    box-shadow:
      0 10px 28px rgba(63,42,29,.28),
      0 0 0 0 rgba(176,137,104,.40);
  }

  70%{
    box-shadow:
      0 12px 32px rgba(63,42,29,.30),
      0 0 0 14px rgba(176,137,104,0);
  }

  100%{
    box-shadow:
      0 10px 28px rgba(63,42,29,.28),
      0 0 0 0 rgba(176,137,104,0);
  }
}


/* ==============================
   CHATBOT WINDOW
============================== */

#chatbot-box{
  position:fixed;

  bottom:125px;
  right:24px;

  width:370px;
  height:530px;

  background:var(--aya-chat-bg);

  border-radius:24px;

  display:none;
  flex-direction:column;

  overflow:hidden;

  box-shadow:0 20px 45px rgba(63,42,29,.25);

  z-index:9999;

  border:1px solid rgba(111,75,51,.12);

  backdrop-filter:blur(16px);
}


/* ==============================
   CHAT HEADER
============================== */

.chat-header{
  background:
    linear-gradient(
      135deg,
      var(--aya-accent),
      var(--aya-accent-light)
    );

  color:white;

  padding:14px 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;
}

.chat-header-left{
  display:flex;
  align-items:center;
  gap:12px;
}


/* Bigger AyaBot logo in header */

.chat-header img{
  width:48px;
  height:48px;

  border-radius:50%;

  object-fit:contain;

  background:#fffaf7;

  padding:2px;

  border:2px solid rgba(255,255,255,.85);

  box-shadow:0 4px 12px rgba(63,42,29,.18);

  flex-shrink:0;
}

.chat-title{
  font-weight:700;
  font-size:15px;
}

.chat-subtitle{
  font-size:11px;
  opacity:.9;
}

#close-chatbot{
  border:none;
  background:transparent;

  color:white;

  font-size:24px;

  cursor:pointer;
}


/* ==============================
   MESSAGES
============================== */

#chat-messages{
  flex:1;

  padding:16px;

  overflow-y:auto;

  background:
    linear-gradient(
      to bottom,
      #fffaf7,
      #f8efe8
    );

  display:flex;
  flex-direction:column;

  gap:10px;
}

.chat-bubble{
  max-width:84%;

  padding:11px 14px;

  border-radius:18px;

  font-size:13px;
  line-height:1.5;

  word-wrap:break-word;

  box-shadow:0 6px 16px rgba(63,42,29,.08);

  white-space:pre-line;
}

.chat-bubble.bot{
  background:var(--aya-chat-bot);
  color:var(--aya-dark);

  align-self:flex-start;

  border-bottom-left-radius:6px;
}

.chat-bubble.user{
  background:
    linear-gradient(
      135deg,
      var(--aya-accent),
      var(--aya-accent-light)
    );

  color:white;

  align-self:flex-end;

  border-bottom-right-radius:6px;
}

.aya-guide-card{
  max-width:94%;
  white-space:normal;
}

.aya-guide-title{
  display:block;
  margin-bottom:7px;
  color:var(--aya-accent);
  font-size:14px;
}

.aya-guide-card p{
  margin:6px 0;
}

.aya-booking-steps{
  margin:8px 0 8px 20px;
  padding:0;
}

.aya-booking-steps li{
  margin-bottom:7px;
  padding-left:3px;
  line-height:1.45;
}

.aya-guide-note{
  padding:8px 10px;
  border-left:3px solid var(--aya-accent-light);
  border-radius:6px;
  background:#fffaf7;
  font-size:12px;
}

.aya-location-hours{
  color:#705746;
  font-size:12px;
}

.aya-chat-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.aya-chat-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 11px;
  border:1px solid var(--aya-accent);
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  transition:.2s ease;
}

.aya-chat-action.primary{
  background:var(--aya-accent);
  color:white;
}

.aya-chat-action.secondary{
  background:#fffaf7;
  color:var(--aya-accent);
}

.aya-chat-action:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(63,42,29,.13);
}


/* ==============================
   SUGGESTIONS
============================== */

.chat-suggestions{
  display:flex;
  flex-wrap:wrap;

  gap:8px;

  padding:10px 14px;

  background:#fffaf7;

  border-top:1px solid rgba(111,75,51,.08);
}

.suggestion-btn{
  border:none;

  background:#f1e4d7;

  color:var(--aya-accent);

  padding:8px 11px;

  border-radius:999px;

  font-size:12px;

  cursor:pointer;

  transition:.2s ease;
}

.suggestion-btn:hover{
  background:#e7d3c2;

  transform:translateY(-1px);
}


/* ==============================
   INPUT
============================== */

.chat-input-area{
  display:flex;

  align-items:center;

  gap:8px;

  padding:12px;

  background:#fffaf7;

  border-top:1px solid rgba(111,75,51,.10);
}

#chat-input{
  flex:1;

  border:1px solid rgba(111,75,51,.14);

  border-radius:999px;

  padding:12px 14px;

  outline:none;

  font-size:13px;

  color:var(--aya-dark);

  background:white;
}

#chat-input:focus{
  border-color:var(--aya-accent-light);

  box-shadow:
    0 0 0 3px rgba(176,137,104,.12);
}


/* SEND BUTTON */

#send-btn{
  border:none;

  border-radius:999px;

  padding:0 17px;

  height:42px;

  background:
    linear-gradient(
      135deg,
      var(--aya-accent),
      var(--aya-accent-light)
    );

  color:white;

  cursor:pointer;

  font-weight:600;
}


/* VOICE BUTTON */

#voice-btn{
  border:none;

  border-radius:50%;

  width:42px;
  height:42px;

  min-width:42px;

  background:#f1e4d7;

  color:#6f4b33;

  cursor:pointer;

  font-size:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:.2s ease;
}

#voice-btn:hover{
  background:#e7d3c2;

  transform:scale(1.05);
}


/* ==============================
   MOBILE
============================== */

@media(max-width:420px){

  #chatbot-box{
    width:92%;
    right:4%;

    height:500px;

    bottom:112px;
  }

  #chatbot-btn{
    width:78px;
    height:78px;

    right:18px;
    bottom:18px;
  }

  #chatbot-btn img{
    transform:scale(1.08);
  }

  .chat-header img{
    width:44px;
    height:44px;
  }

  .aya-chat-actions{
    flex-direction:column;
  }

  .aya-chat-action{
    width:100%;
  }
}