/* ── AI Chatbot Widget ─────────────────────────────── */
:root{--ai-ac:#e01c1c;--ai-ac2:#b91414}

/* launcher button */
#ai-chatbot-icon{
  position:fixed;bottom:24px;left:24px;z-index:9001;
  width:54px;height:54px;border-radius:50%;cursor:pointer;
  background:var(--ai-ac);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);transition:transform .2s,box-shadow .2s
}
#ai-chatbot-icon:hover{transform:scale(1.07);box-shadow:0 6px 18px rgba(0,0,0,.32)}
#ai-chatbot-icon svg{width:26px;height:26px;flex-shrink:0}

/* notification badge — sits beside the launcher button */
#ai-notification{
  position:fixed;bottom:30px;left:calc(24px + 54px + 12px);z-index:9000;
  background:var(--ai-card);color:var(--ai-t);font-size:12.5px;line-height:1.45;
  padding:8px 13px;border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,.18);
  max-width:220px;direction:rtl;text-align:right;
  opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;
  pointer-events:none
}
#ai-notification.ai-show{opacity:1;transform:translateX(0)}

/* container */
#ai-chatbot-container{
  position:fixed;bottom:88px;left:24px;z-index:9001;
  width:360px;min-height:480px;max-height:580px;
  display:flex;flex-direction:column;
  background:var(--ai-bg);border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  overflow:hidden;font-family:inherit;direction:rtl;
  opacity:0;transform:translateY(10px);
  transition:opacity .22s,transform .22s;pointer-events:none
}
#ai-chatbot-container.ai-show{opacity:1;transform:translateY(0);pointer-events:auto}
#ai-chatbot-container.ai-hide{display:none}

/* header */
#ai-chatbot-header{
  background:var(--ai-ac);color:#fff;
  padding:0 14px;height:62px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;direction:rtl
}
.ai-hdr-av{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.25);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.ai-hdr-av img{width:100%;height:100%;object-fit:cover}
.ai-hdr-info{flex:1;min-width:0}
.ai-hdr-name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-hdr-sub{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-hdr-btns{display:flex;gap:2px}
.ai-hdr-btns button{
  background:none;border:none;color:#fff;
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:.85
}
.ai-hdr-btns button:hover{background:rgba(255,255,255,.18);opacity:1}

/* messages area — patterned background like screenshot */
#ai-chatbot-messages{
  flex:1;overflow-y:auto;padding:14px 12px 10px;
  display:flex;flex-direction:column;gap:8px;
  min-height:220px;-webkit-overflow-scrolling:touch;
  /* subtle dot/diamond pattern background */
  background-color:var(--ai-bg2);
  background-image:
    radial-gradient(circle, var(--ai-dot1) 1px, transparent 1px),
    radial-gradient(circle, var(--ai-dot2) 1px, transparent 1px);
  background-size:20px 20px;
  background-position:0 0, 10px 10px
}
#ai-chatbot-messages::-webkit-scrollbar{width:3px}
#ai-chatbot-messages::-webkit-scrollbar-thumb{background:var(--ai-scroll);border-radius:3px}

/* ── Welcome card ── */
.ai-welcome{
  background:var(--ai-card);border-radius:14px;padding:12px 13px;
  direction:rtl;border:1px solid var(--ai-bd);
  box-shadow:0 1px 4px rgba(0,0,0,.07);max-width:calc(88% - 37px)
}
.ai-welcome-txt{font-size:13px;color:var(--ai-t);line-height:1.6}
.ai-welcome-txt strong{display:block;font-size:13.5px;color:var(--ai-t);margin-bottom:2px}
.ai-qa-btns{display:flex;flex-direction:column;gap:7px;margin-top:4px;direction:rtl;width:100%;box-sizing:border-box}
.ai-qa-btns-wrap{display:flex;flex-direction:column;gap:7px;width:100%;box-sizing:border-box;max-width:calc(88% - 37px)}
.ai-qa-footer{width:100%;max-width:100%;padding:2px 0}
.ai-qa-footer .ai-qa-btn{margin:0}
.ai-qa-btn{
  background:var(--ai-ac);color:#fff;border:none;
  border-radius:10px;padding:9px 13px;
  font-size:13px;font-family:inherit;
  text-align:right;cursor:pointer;line-height:1.45;
  transition:opacity .15s;width:100%
}
.ai-qa-btn:hover{opacity:.88}
.ai-qa-btn:active{opacity:.75}

/* ── Message rows ── */
/* outer wrapper: controls left/right alignment */
.msg{display:flex;flex-direction:column;direction:rtl;max-width:100%}

.msg-u{align-items:flex-start}
.msg-b{align-items:flex-end}

.msg-row{
  display:flex;flex-direction:row;
  align-items:flex-end;gap:7px;direction:ltr;
  max-width:88%
}

.msg-u .msg-row{flex-direction:row-reverse}

/* avatar circle outside bubble */
.msg-av{
  width:30px;height:30px;border-radius:50%;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:11px;font-weight:700;
  background:var(--ai-ac);color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.15)
}
.msg-av img{width:100%;height:100%;object-fit:cover}
.msg-av svg{width:16px;height:16px;flex-shrink:0}

/* user avatar: white bg with person icon */
.msg-u .msg-av{background:#6c8ebf;color:#fff}
/* bot avatar: uses accent color */
.msg-b .msg-av{background:var(--ai-ac)}

/* bubble */
.bbl{
  padding:9px 13px;border-radius:14px;
  font-size:13px;line-height:1.65;
  word-break:break-word;direction:rtl;text-align:right
}
/* user bubble */
.msg-u .bbl{
  background:var(--ai-ac);color:#fff;
  border-bottom-right-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.12)
}
/* bot bubble */
.msg-b .bbl{
  background:var(--ai-card);color:var(--ai-t);
  border-bottom-left-radius:4px;
  border:1px solid var(--ai-bd);
  box-shadow:0 1px 4px rgba(0,0,0,.07)
}
.msg-b .bbl p{margin:0 0 4px}.msg-b .bbl p:last-child{margin:0}
.msg-b .bbl code{
  background:var(--ai-code-bg);border-radius:4px;
  padding:1px 5px;font-size:11.5px;
  direction:ltr;display:inline-block
}
.msg-b .bbl ul{margin:4px 0;padding-right:18px}
.msg-b .bbl li{margin-bottom:2px}

/* timestamp */
.msg-time{font-size:11px;color:var(--ai-t2);margin-top:3px;padding:0 4px}

/* typing indicator */
#ai-typing .bbl{display:flex;align-items:center;gap:8px;padding:10px 14px}
.tyd{display:flex;gap:4px}
.tyd span{
  width:6px;height:6px;border-radius:50%;
  background:var(--ai-ac);opacity:.4;
  animation:tya 1s infinite ease-in-out
}
.tyd span:nth-child(2){animation-delay:.15s}
.tyd span:nth-child(3){animation-delay:.3s}
@keyframes tya{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-4px);opacity:.9}
}

/* ── Input area ── */
#ai-chatbot-input{
  padding:10px 10px 12px;background:var(--ai-bg);
  border-top:1px solid var(--ai-bd);
  display:flex;gap:8px;align-items:flex-end;
  flex-shrink:0;direction:rtl
}
#message-input{
  flex:1;border:1.5px solid var(--ai-bd);border-radius:10px;
  padding:8px 12px;font-size:13px;font-family:inherit;
  direction:rtl;resize:none;outline:none;
  background:var(--ai-input-bg);color:var(--ai-t);line-height:1.5;
  max-height:100px;overflow-y:auto;
  transition:border-color .18s
}
#message-input:focus{border-color:var(--ai-ac);background:var(--ai-card)}
#message-input::placeholder{color:var(--ai-t2)}
#send-message{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  border:none;background:var(--ai-ac);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s
}
#send-message:hover{opacity:.86}
#send-message:disabled{opacity:.4;cursor:default}
.send-text{display:none}

@media(max-width:600px){
  #ai-chatbot-container{
    bottom:0;left:0;right:0;width:100%;
    max-height:100%;height:100%;border-radius:0;
    transform:translateY(100%);
    transition:transform .25s ease,opacity .25s
  }
  #ai-chatbot-container.ai-show{transform:translateY(0);opacity:1}
  #ai-chatbot-icon{bottom:20px;left:16px}
  #ai-notification{bottom:26px;left:calc(16px + 54px + 10px)}
  #ai-chatbot-messages{
    background-color:var(--ai-bg2);
    background-image:
      radial-gradient(circle, var(--ai-dot1) 1px, transparent 1px),
      radial-gradient(circle, var(--ai-dot2) 1px, transparent 1px);
    background-size:20px 20px;
    background-position:0 0, 10px 10px
  }
  body.ai-open{overflow:hidden}
}