:root{
  /* positions relative to your Back-to-Top */
  --chat-bottom: 32px;
  --chat-size: 48px;
  --gap-buttons: 14px;

  --am-bottom: var(--chat-bottom);
  --btt-bottom: calc(var(--chat-bottom) + var(--chat-size) + var(--gap-buttons));
  --am-right: 32px;

  /* brand + ui */
  --am-ink:#111; --am-border:#e6e6e6; --am-gray:#f6f6f6;
  --am-brand:#d3142a; --am-shadow:0 20px 40px rgba(0,0,0,.14);
  --am-font:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* ============ Launcher (match Back-to-Top timing) ============ */
.amchat-launcher {
  position: fixed;
  right: var(--am-right);
  bottom: var(--am-bottom);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--am-brand);
  color: #fff;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 9999 !important;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}

/* when visible */
.amchat-launcher.show 
  { opacity: 1; visibility: visible; transform: translateY(0); }

.amchat-launcher svg { stroke: #fff; transition: transform .3s ease; }

/* tooltip stays the same */
.amchat-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: #111;
  font: 600 13px/1 var(--am-font);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--am-border);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.amchat-launcher:hover .amchat-tooltip {
  opacity: 1;
}


/* ============ Panel ============ */
.amchat-panel{
  position:fixed; right:var(--am-right); bottom:calc(var(--am-bottom) + 10px);
  width:min(520px,96vw); height:min(78vh,780px);
  background:#fff; border:1px solid var(--am-border); border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.15);
  display:none; flex-direction:column; z-index:3500; overflow:hidden;
  z-index: 99999 !important;
}
.amchat-panel.am-open{ display:flex; }

/* Header (red) */
.amchat-head{
  background:var(--am-brand); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
}
.amchat-head__title{ font:700 15px/1.3 var(--am-font); }
.amchat-head__tools{ display:flex; gap:6px; align-items:center; }
.amchat-btn--close, .amchat-btn--lang{
  background:transparent; border:none; color:#fff; cursor:pointer;
  font:600 13px/1 var(--am-font); border-radius:6px; padding:4px 6px;
}
.amchat-btn--close:hover, .amchat-btn--lang:hover{ background:rgba(255,255,255,.15); }

/* Body */
.amchat-body{ position:relative; flex:1; overflow:auto; padding:18px 16px 100px; background:#fff; }

/* Bubbles */
.amchat-msg{ margin:10px 0; padding:12px 14px; border-radius:14px; max-width:82%;
  font:500 14px/1.55 var(--am-font); }
.amchat-msg--bot{ background:#f9fafb; border:1px solid #eef0f2; }
.amchat-msg--user{ background:#eef6ff; border:1px solid #d8e8ff; margin-left:auto; }

/* Chips */
.amchat-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.amchat-chip{
  background:#fff; border:1px solid var(--am-border); border-radius:999px;
  padding:8px 12px; cursor:pointer; font:600 13px/1 var(--am-font);
  transition: all 0.2s ease;
}
.amchat-chip:hover{ background:#f7f7f7; }

/* Disabled chips (after clicking Yes/No) */
.amchat-chip:disabled,
.amchat-chip--disabled {
  background: #f0f0f0 !important;
  color: #999 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  border-color: #ddd !important;
}

/* Footer (gray, input starts on the left and stretches) */
.amchat-foot{ position:absolute; left:0; right:0; bottom:0; background:var(--am-gray); border-top:1px solid #ddd; padding:10px 14px; }
.amchat-foot__row{ display:flex; align-items:center; gap:8px; justify-content:flex-start; }
.amchat-quick{ display:flex; align-items:center; gap:8px; width:100%; }
.amchat-input{
  flex:1; min-width:0; padding:9px 12px; border:1px solid #ccc; border-radius:10px; font:500 14px/1.3 var(--am-font);
  resize: none; /* disable the little resize handles */
}

/* Buttons: all gray, no color change */
.amchat-btn{ padding:9px 12px; border:none; border-radius:10px; font:600 13px/1 var(--am-font); cursor:pointer; background:#ddd; color:#000; }
.amchat-btn--primary{ background:#ddd; color:#000; }
.amchat-btn:hover, .amchat-btn:active{ filter:none; background:#ddd; color:#000; }

/* Typing */
.amchat-typing{ display:inline-flex; gap:4px; align-items:center; }
.amchat-dot{ width:6px; height:6px; border-radius:50%; background:#aaa; animation:am-bounce 1s infinite ease-in-out; }
.amchat-dot:nth-child(2){ animation-delay:.15s; }
.amchat-dot:nth-child(3){ animation-delay:.3s; }
@keyframes am-bounce{ 0%,80%,100%{ transform:scale(.6); opacity:.5; } 40%{ transform:scale(1); opacity:1; } }

/* ============ Feedback Label ============ */
.amchat-feedback-label {
  margin: 8px 0;
  font-size: 13px;
  color: #666;
  font-family: var(--am-font);
}

/* ============ Feedback Modal (popup) ============ */
.amchat-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);      /* dark transparent backdrop */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;                        /* above the chat panel */
}

.amchat-modal__card {
  background: #fff;
  border: 1px solid var(--am-border);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2);
  width: min(480px, 92vw);
  padding: 20px 22px;
  animation: modalFade .25s ease;
  font-family: var(--am-font);
}

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

.amchat-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.amchat-modal__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--am-ink);
}

.amchat-modal__close {
  background: #ddd;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
}

.amchat-modal form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.amchat-modal label {
  font: 600 12px var(--am-font);
  color: #333;
  display: grid;
  gap: 6px;
}

.amchat-modal input,
.amchat-modal textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font: 500 14px var(--am-font);
  resize: none; /* disables resize handles */
}

.amchat-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}


/* =========================
   FORCE BOT/USER BUBBLE ALIGNMENT
   ========================= */

/* FORCE BOT TO LEFT ALWAYS (RTL & LTR) */
.amchat-msg--bot {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* FORCE USER TO RIGHT ALWAYS (RTL & LTR) */
.amchat-msg--user {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* RTL chip handling */
[dir="rtl"] .amchat-chips {
  direction: ltr !important;               /* do NOT flip chip order */
  justify-content: flex-start !important;
}

/* Chip text becomes RTL */
[dir="rtl"] .amchat-chip {
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext !important;
}

/* RTL feedback label - align to right in Arabic */
[dir="rtl"] .amchat-feedback-label {
  text-align: right !important;
  direction: rtl !important;
}

/* RTL general text elements in chat body */
[dir="rtl"] .amchat-body > div:not(.amchat-msg):not(.amchat-chips):not(.amchat-typing-wrap) {
  text-align: right !important;
  direction: rtl !important;
}


/* =========================
   RESPONSIVE CHAT IMPROVEMENTS
   ========================= */

/* ---- Tablets & small laptops ---- */
@media (max-width: 1200px) {
  .amchat-panel {
    width: min(420px, 92vw);
    height: min(70vh, 680px);
    right: 24px;
    bottom: calc(var(--btt-bottom) + 80px);
  }

}

/* ---- Tablets portrait & large phones ---- */
@media (max-width: 900px) {
  .amchat-panel {
    width: min(380px, 94vw);
    height: min(68vh, 640px);
    right: 20px;
    bottom: calc(var(--btt-bottom) + 60px);
    border-radius: 14px;
  }

  .amchat-head {
    padding: 10px 14px;
  }

  .amchat-head__title {
    font-size: 14px;
  }

  .amchat-input {
    font-size: 13px;
  }
}

@media (max-width: 600px) {
  .amchat-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;

    /* LOWER IT A LITTLE FROM THE TOP */
    top: 24px !important;

    width: 100% !important;
    height: calc(100vh - 24px) !important;

    max-height: calc(100vh - 24px) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
    z-index: 99999 !important;
  }

  .amchat-body {
    padding: 18px 12px 110px !important;
  }

  .amchat-foot {
    padding: 12px !important;
  }

  .amchat-tooltip {
    display: none !important;
  }
}


/* ---- Ultra-small screens (foldables or narrow) ---- */
@media (max-width: 360px) {
  .amchat-panel {
    height: 85vh;
  }

  .amchat-body {
    padding: 10px 10px 80px;
  }
}