/* ==========================================================================
   MAADANOL — AI Technical Assistant (global floating widget)
   Loaded on EVERY page (see maadanol_enqueue_assets in functions.php —
   unconditional, unlike the page-scoped stylesheets elsewhere in this
   theme). Reuses shared tokens from style.css, which is enqueued as
   this stylesheet's dependency.

   Positioning uses CSS logical properties (inset-inline-end, etc.) so
   the button/panel sit bottom-right in LTR and automatically flip to
   bottom-left in RTL — no separate RTL override rules needed.
   ========================================================================== */

/* .sr-only is defined once in style.css (loaded on every page as this
   stylesheet's dependency), so it isn't repeated here. */

.mai{ position: fixed; z-index: 1000; inset-block-end: 24px; inset-inline-end: 24px; }
@media (max-width: 640px){ .mai{ inset-block-end: 16px; inset-inline-end: 16px; } }

/* ---------- Floating toggle button ---------- */
.mai__toggle{
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #163a63);
  color: #fff; border: none; box-shadow: 0 10px 30px rgba(15,39,68,0.35), 0 0 0 4px rgba(255,255,255,0.6);
  display:flex; align-items:center; justify-content:center; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mai__toggle:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 36px rgba(15,39,68,0.4), 0 0 0 4px rgba(255,255,255,0.7); }
.mai__toggle-icon{ position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; transition: opacity .2s, transform .2s; }
.mai__toggle-icon--close{ opacity: 0; transform: scale(.6) rotate(-45deg); }
.mai.is-open .mai__toggle-icon--open{ opacity: 0; transform: scale(.6) rotate(45deg); }
.mai.is-open .mai__toggle-icon--close{ opacity: 1; transform: scale(1) rotate(0); }
.mai__toggle-badge{
  position: absolute; top: -2px; inset-inline-end: -2px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--secondary-text); color: #fff; font-size: 11px; font-weight: 800;
  display:flex; align-items:center; justify-content:center; border: 2px solid var(--white);
}
@media (max-width: 640px){ .mai__toggle{ width: 54px; height: 54px; } }

/* Gentle pulse to draw the eye on first load, stops once opened once. */
@keyframes maiPulse{
  0%, 100% { box-shadow: 0 10px 30px rgba(15,39,68,0.35), 0 0 0 4px rgba(255,255,255,0.6), 0 0 0 0 rgba(242,140,40,0.5); }
  50% { box-shadow: 0 10px 30px rgba(15,39,68,0.35), 0 0 0 4px rgba(255,255,255,0.6), 0 0 0 10px rgba(242,140,40,0); }
}
.mai__toggle.mai__toggle--pulse{ animation: maiPulse 2.4s ease-out 3; }

/* ---------- Chat panel ---------- */
.mai__panel{
  position: absolute; inset-block-end: 78px; inset-inline-end: 0;
  width: 396px; max-width: calc(100vw - 32px); height: min(640px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(15,39,68,0.28);
  transform-origin: bottom var(--mai-origin-side, right);
  opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
html[dir="rtl"] .mai__panel{ --mai-origin-side: left; }
.mai.is-open .mai__panel{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

@media (max-width: 640px){
  .mai__panel{
    position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%;
    border-radius: 0; border: none;
  }
}

/* ---------- Header ---------- */
.mai__head{
  display:flex; align-items:center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid rgba(15,39,68,0.08); flex-shrink:0;
}
.mai__head-id{ display:flex; align-items:center; gap: 10px; }
.mai__avatar{
  width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: var(--secondary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mai__head-id strong{ display:block; font-size: 13.5px; color: var(--primary); }
.mai__status{ display:flex; align-items:center; gap: 5px; font-size: 11.5px; color: var(--gray); }
.mai__status-dot{ width: 7px; height: 7px; border-radius: 50%; background: #1E9163; box-shadow: 0 0 0 2px rgba(30,145,99,0.2); }
.mai__head-actions{ display:flex; align-items:center; gap: 6px; }

.mai__lang-switch{ display:flex; gap: 2px; background: rgba(15,39,68,0.06); border-radius: 8px; padding: 2px; }
.mai__lang-switch button{
  border: none; background: none; padding: 4px 8px; font-size: 10.5px; font-weight: 700; color: var(--gray);
  border-radius: 6px; transition: background .2s, color .2s;
}
.mai__lang-switch button.is-active{ background: var(--white); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.mai__menu-wrap{ position: relative; }
.mai__menu{
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; min-width: 200px; z-index: 10;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 6px; display:flex; flex-direction: column; gap: 2px;
}
.mai__menu button{
  text-align: start; padding: 9px 12px; border-radius: 8px; border: none; background: none;
  font-size: 12.5px; color: var(--dark); transition: background .2s;
}
.mai__menu button:hover{ background: var(--bg); }
.mai__icon-btn{
  width: 32px; height: 32px; border-radius: 8px; border: none; background: none; color: var(--gray);
  display:flex; align-items:center; justify-content:center; transition: background .2s, color .2s;
}
.mai__icon-btn:hover{ background: rgba(15,39,68,0.06); color: var(--primary); }

/* ---------- Message body ---------- */
.mai__body{ flex: 1; overflow-y: auto; padding: 18px; display:flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.mai-msg{ display:flex; gap: 10px; max-width: 92%; animation: maiMsgIn .25s var(--ease); }
.mai-msg__col{ flex: 1; min-width: 0; }
@keyframes maiMsgIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }
.mai-msg--bot{ align-self: flex-start; }
.mai-msg--user{ align-self: flex-end; flex-direction: row-reverse; }
html[dir="rtl"] .mai-msg--user{ flex-direction: row; }
.mai-msg__avatar{
  width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--secondary); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.mai-msg__bubble{ padding: 11px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.75; }
.mai-msg--bot .mai-msg__bubble{ background: var(--white); border: 1px solid var(--line); color: var(--dark); border-start-start-radius: 4px; }
.mai-msg--user .mai-msg__bubble{ background: var(--primary); color: #fff; border-start-end-radius: 4px; }
.mai-msg__bubble a{ color: var(--accent-text); font-weight: 700; text-decoration: underline; }
.mai-msg--user .mai-msg__bubble a{ color: #cfe4ff; }
.mai-msg__bubble ul{ margin: 6px 0 0; padding-inline-start: 18px; }
.mai-msg__bubble li{ margin-bottom: 3px; }

.mai-msg__copy{
  margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--gray-light); background: none; border: none;
  display:flex; align-items:center; gap: 4px; padding: 0;
}
.mai-msg__copy:hover{ color: var(--accent-text); }

.mai-typing{ display:flex; gap: 4px; padding: 13px 15px; }
.mai-typing span{ width: 6px; height: 6px; border-radius: 50%; background: var(--gray-light); animation: maiTyping 1.2s infinite; }
.mai-typing span:nth-child(2){ animation-delay: .15s; }
.mai-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes maiTyping{ 0%, 60%, 100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-4px); opacity:1; } }

/* ---------- Quick actions ---------- */
.mai__quick{ display:flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 12px; flex-shrink:0; }
.mai__quick-btn{
  padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white);
  font-size: 12px; font-weight: 600; color: var(--primary); white-space: nowrap; transition: all .2s;
}
.mai__quick-btn:hover{ border-color: var(--accent); background: rgba(30,136,229,0.06); }

/* ---------- Composer ---------- */
.mai__composer{
  display:flex; align-items:flex-end; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(15,39,68,0.08); flex-shrink:0;
}
.mai__composer textarea{
  flex: 1; resize: none; max-height: 100px; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 10px 14px; font-size: 13.5px; font-family: inherit; background: var(--bg); line-height: 1.5;
}
.mai__composer textarea:focus{ outline: none; border-color: var(--accent); background: var(--white); }
.mai__send{
  width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--secondary-text); color: #fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .2s, transform .2s;
}
.mai__send:hover{ background: #9A4E0F; transform: scale(1.05); }
html[dir="rtl"] .mai__send svg{ transform: scaleX(-1); }

.mai__disclaimer{ font-size: 10.5px; color: var(--gray-light); text-align: center; padding: 0 16px 12px; margin: 0; flex-shrink:0; }

/* ---------- Rich response cards inside chat bubbles ---------- */
.mai-msg__timestamp{ font-size: 10px; color: var(--gray-light); margin-top: 4px; display:block; }
.mai-msg--user .mai-msg__timestamp{ text-align: end; }

.mai-card{
  display:block; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--white); transition: border-color .2s, transform .2s;
}
.mai-card:hover{ border-color: var(--accent); transform: translateY(-1px); }
.mai-card__tag{ font-size: 10px; font-weight: 700; color: var(--accent-text); text-transform: uppercase; letter-spacing: .03em; }
.mai-card__title{ display:block; font-size: 13px; font-weight: 700; color: var(--primary); margin: 3px 0; }
.mai-card__meta{ font-size: 11.5px; color: var(--gray); }

.mai-table{ width:100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; }
.mai-table th, .mai-table td{ padding: 7px 9px; border: 1px solid var(--line); text-align: start; }
.mai-table th{ background: var(--bg); font-weight: 700; color: var(--primary); }

.mai-actions{ display:flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mai-actions a, .mai-actions button{
  font-size: 11.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--primary);
  color: var(--primary); background: none; transition: background .2s, color .2s;
}
.mai-actions a:hover, .mai-actions button:hover{ background: var(--primary); color: #fff; }
.mai-actions .mai-actions__primary{ background: var(--secondary-text); border-color: var(--secondary-text); color: #fff; }
.mai-actions .mai-actions__primary:hover{ background: #9A4E0F; }

.mai-followups{ display:flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.mai-followups button{
  font-size: 11.5px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--line); background: var(--bg);
  color: var(--gray); transition: all .2s;
}
.mai-followups button:hover{ border-color: var(--accent); color: var(--accent-text); background: rgba(30,136,229,0.06); }

@media (max-width: 640px){ .mai__body{ padding: 16px; } }