/* ================================================================
   AI assistant — additions on top of the base .chatbot-* rules in
   main.css. Widget: inc/chatbot_widget.php · Engine: assets/js/chatbot.js
   Full page: assistant.php (.assistant-page)
   ================================================================ */
#bmmc-window{border:1px solid rgba(94,199,184,.15);box-shadow:0 24px 80px rgba(0,0,0,.35),0 0 0 1px rgba(94,199,184,.08);
  display:flex;flex-direction:column}
#bmmc-toggle{width:56px;height:56px}
.chatbot-window .chatbot-messages{flex:1 1 auto}
.chat-suggestions[hidden]{display:none!important}

/* main.css gives every header span display:flex, which beat the language
   switch — both subtitles showed at once. Re-assert it here. */
body:not(.lang-ar) .chatbot-header-info .display-ar,
body.lang-ar .chatbot-header-info .display-en{display:none!important}

/* Header tools: new chat · full page · close */
.chatbot-header{position:relative}
.bmmc-tools{margin-inline-start:auto;display:flex;gap:6px}
.bmmc-tool{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(94,199,184,.3);
  background:rgba(255,255,255,.06);color:#009383;font-size:.875rem;cursor:pointer;text-decoration:none;transition:background .25s,color .25s,transform .25s}
.bmmc-tool:hover{background:var(--gold);color:var(--primary-dark);transform:translateY(-1px)}
.bmmc-tool:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Messages */
.chat-msg-bubble{overflow-wrap:anywhere}
.chat-msg.bot .chat-msg-bubble{min-width:0}
.chat-msg.bot{max-width:94%}
.bmmc-answer:empty{display:none}
.bmmc-answer a{color:#00796A;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.bmmc-answer code{background:rgba(0,107,94,.08);padding:1px 5px;border-radius:5px;font-size:.85em}
.bmmc-answer ul{margin:6px 0;padding-inline-start:20px}
.bmmc-answer li{margin:2px 0}
.bmmc-answer hr{margin:10px 0;opacity:.2}
.bmmc-h{font-weight:800;color:var(--primary-dark);margin:8px 0 4px}
.bmmc-table{overflow-x:auto;margin:8px 0;border-radius:10px;border:1px solid rgba(0,107,94,.18)}
.bmmc-table table{border-collapse:collapse;width:100%;font-size:.8125rem;margin:0}
.bmmc-table th,.bmmc-table td{border-bottom:1px solid rgba(0,107,94,.12);padding:7px 9px;text-align:start;vertical-align:top}
.bmmc-table th{background:rgba(0,107,94,.07);font-weight:800;white-space:nowrap}
.bmmc-table tr:last-child td{border-bottom:0}

/* Progress line while the answer is prepared (📚 / ⚖️ / ✍️) — never model reasoning */
.bmmc-status{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--primary)}
.bmmc-status[hidden]{display:none}
.bmmc-status-ic{animation:bmmcPulse 1.2s ease-in-out infinite}
.bmmc-status-text::after{content:"";display:inline-block;width:1.2em;text-align:start;animation:bmmcDots 1.2s steps(4) infinite}
@keyframes bmmcPulse{50%{transform:scale(1.2);opacity:.6}}
@keyframes bmmcDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* Canonical legal section — rendered from the database by the server */
.bmmc-legal{margin-top:10px;padding-top:9px;border-top:1px dashed rgba(0,107,94,.25);font-size:.8125rem}
.bmmc-legal[hidden]{display:none}
.bmmc-legal-h{font-weight:800;color:var(--primary-dark);margin:6px 0 3px}
.bmmc-legal-list{margin:0 0 4px;padding-inline-start:18px}
.bmmc-legal-list li{margin:2px 0}
.bmmc-legal-list a{color:#00796A;font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.bmmc-legal-note{margin:6px 0 0;color:#6b7a72;font-size:max(.75rem, var(--fs-min, 12px));line-height:1.5}

/* Input: auto-growing textarea */
textarea.chatbot-input{resize:none;line-height:1.45;max-height:140px;border-radius:18px;padding:9px 16px;overflow-y:auto}
.chatbot-send:disabled{opacity:.45;cursor:progress;transform:none}
.bmmc-disclaimer{padding:0 16px 10px;font-size:max(.75rem, var(--fs-min, 12px));color:#7a857e;text-align:center}
.chat-suggestion{text-align:start}

/* Phones: the widget is full-screen (main.css); keep the page behind still
   and hide the floating toggle so it can't cover the send button. */
@media (max-width:768px){
  #bmmc-window.open{height:100dvh}
  #bmmc-window .chatbot-messages{height:auto;min-height:0}
  body.bmmc-open{overflow:hidden}
  body.bmmc-open .chatbot-bubble:not(.is-page) .chatbot-toggle,
  body.bmmc-open .chatbot-bubble:not(.is-page) .chatbot-notification,
  body.bmmc-open #pwa-install-banner,body.bmmc-open #pwa-ios-tip,body.bmmc-open #bmm-push-chip,body.bmmc-open #back-to-top{display:none!important}
  .chatbot-header{padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top))}
  .chatbot-input-area{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}

/* ── Full page (assistant.php) ── */
.chatbot-bubble.is-page{position:static;z-index:auto}
.assistant-page.chatbot-window{position:relative;inset:auto;bottom:auto;right:auto;width:100%;height:100%;max-height:none;
  transform:none;opacity:1;pointer-events:all;border-radius:22px;transition:none}
.assistant-page .chatbot-messages{height:auto;padding:22px clamp(14px,3vw,28px)}
.assistant-page .chat-msg{max-width:min(88%,820px)}
.assistant-page .chat-msg-bubble{font-size:.9375rem}
.assistant-page .chat-suggestions{flex-direction:row;flex-wrap:wrap}
@media (max-width:768px){
  .assistant-page.chatbot-window{position:relative;height:100%;width:100%;border-radius:18px}
}

/* ── Voice questions ── */
.bmmc-mic{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,107,94,.2);background:#fff;color:var(--primary);
  display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,transform .25s,box-shadow .25s}
.bmmc-mic:hover{background:rgba(0,107,94,.08)}
.bmmc-mic:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bmmc-mic:disabled{opacity:.45;cursor:not-allowed}
.bmmc-mic[hidden]{display:none}
.is-listening .bmmc-mic{background:#C0392B;color:#fff;border-color:#C0392B;animation:bmmcMic 1.3s ease-out infinite}
.is-listening .chatbot-input{border-color:#C0392B;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
@keyframes bmmcMic{0%{box-shadow:0 0 0 0 rgba(192,57,43,.45)}100%{box-shadow:0 0 0 12px rgba(192,57,43,0)}}
.bmmc-voice{position:relative;display:flex;align-items:center;gap:8px;margin:0 16px -4px;padding:7px 10px;border-radius:12px;overflow:hidden;
  font-size:max(.75rem, var(--fs-min, 12px));font-weight:600;background:rgba(0,107,94,.06);color:var(--primary-dark)}
.bmmc-voice[hidden]{display:none}
.bmmc-voice-text{flex:1;min-width:0}
.bmmc-voice-dot{width:9px;height:9px;border-radius:50%;background:#00796A;flex:none}
.bmmc-voice.is-listening{background:rgba(192,57,43,.08);color:#8e2a1f}
.bmmc-voice.is-listening .bmmc-voice-dot{background:#C0392B;animation:bmmcPulse 1s ease-in-out infinite}
.bmmc-voice.is-error{background:#fdecea;color:#a3281b}.bmmc-voice.is-error .bmmc-voice-dot{background:#C0392B}
.bmmc-voice.is-edit .bmmc-voice-dot{background:var(--gold)}
.bmmc-voice-lang,.bmmc-voice-x{flex:none;border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:999px;cursor:pointer;font:700 max(.75rem, var(--fs-min, 12px))/1 inherit;color:inherit}
.bmmc-voice-lang{padding:4px 9px}.bmmc-voice-lang[hidden]{display:none}
.bmmc-voice-x{width:24px;height:24px;display:grid;place-items:center;padding:0}
.bmmc-voice-bar{position:absolute;inset-inline-start:0;bottom:0;height:3px;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
[dir="rtl"] .bmmc-voice-bar{transform-origin:right}
.bmmc-voice.is-confirm .bmmc-voice-bar{animation:bmmcCountdown 3s linear forwards}
@keyframes bmmcCountdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media print{#bmmc-toggle,#bmmc-window:not(.assistant-page),.chatbot-notification{display:none!important}}
@media (prefers-reduced-motion:reduce){.bmmc-status-ic,.bmmc-status-text::after{animation:none}}