/* ============================================================
   Agentrix-IA — Chat agent
   ============================================================ */
.chat { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 92; }

/* Launcher */
.chat__launcher {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 20px 13px 15px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  box-shadow: 0 16px 40px -12px var(--accent-glow), 0 2px 8px oklch(0 0 0 / 0.4);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .3s;
  position: relative;
}
:root[dir="rtl"] .chat__launcher { padding: 13px 15px 13px 20px; }
.chat__launcher:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -12px var(--accent-glow), 0 4px 10px oklch(0 0 0 / 0.4); }
.chat__launcher-ic { display: grid; place-items: center; }
.chat__launcher-dot {
  position: absolute; inset-block-start: 11px; inset-inline-end: 16px;
  width: 9px; height: 9px; border-radius: 50%;
  background: oklch(0.7 0.18 145); border: 2px solid var(--accent);
  animation: chatPulse 2s var(--ease) infinite;
}
@keyframes chatPulse { 0%,100% { box-shadow: 0 0 0 0 oklch(0.7 0.18 145 / 0.6); } 70% { box-shadow: 0 0 0 7px oklch(0.7 0.18 145 / 0); } }
.chat--open .chat__launcher { opacity: 0; visibility: hidden; transform: scale(0.8); pointer-events: none; }

/* Panel */
.chat__panel {
  position: absolute; inset-block-end: 0; inset-inline-end: 0;
  width: min(384px, calc(100vw - 32px));
  height: min(580px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 22px;
  box-shadow: 0 32px 80px -20px oklch(0 0 0 / 0.7), 0 0 0 1px oklch(1 0 0 / 0.02);
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity .35s var(--ease), transform .4s var(--ease), visibility .35s;
}

/* Shared chatbox flex shell */
.chatbox { display: flex; flex-direction: column; min-height: 0; }
.chatbox--panel { height: 100%; }
:root[dir="rtl"] .chat__panel { transform-origin: bottom left; }
.chat--open .chat__panel { opacity: 1; visibility: visible; transform: none; }

/* Header */
.chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border-block-end: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
}
.chat__head-id { display: flex; align-items: center; gap: 11px; }
.chat__avatar {
  position: relative; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--line-2);
}
.chat__online {
  position: absolute; inset-block-end: -2px; inset-inline-end: -2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: oklch(0.72 0.18 145); border: 2.5px solid var(--bg-2);
}
.chat__head-txt { display: flex; flex-direction: column; gap: 1px; }
.chat__head-title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.chat__head-status { font-size: 11.5px; color: var(--muted); }
.chat__head-actions { display: flex; gap: 4px; }
.chat__icbtn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s; }
.chat__icbtn:hover { background: var(--surface-2); color: var(--text); }

/* Body */
.chat__body { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scroll-behavior: smooth; }
.chat__body::-webkit-scrollbar { width: 7px; }
.chat__body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

.chat__msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; animation: chatMsgIn .35s var(--ease) both; }
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat__msg--user { justify-content: flex-end; }
.chat__msg-av { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--line); flex-shrink: 0; }
.chat__bubble {
  padding: 11px 14px; border-radius: 15px; font-size: 14.5px; line-height: 1.5;
  max-width: 80%; word-wrap: break-word;
}
.chat__msg--bot .chat__bubble { background: var(--surface); border: 1px solid var(--line); border-end-start-radius: 4px; color: var(--text); }
.chat__msg--user .chat__bubble { background: var(--accent); color: var(--accent-ink); border-end-end-radius: 4px; font-weight: 500; }
:root[lang="ar"] .chat__bubble { line-height: 1.75; }

/* typing */
.chat__bubble--typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; }
.chat__bubble--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: chatTyping 1.2s infinite; }
.chat__bubble--typing span:nth-child(2) { animation-delay: .15s; }
.chat__bubble--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatTyping { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* suggestions */
.chat__suggs { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 4px; }
.chat__suggs-lbl { width: 100%; margin-block-end: 2px; }
.chat__sugg {
  text-align: start; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 13.5px; color: var(--text); line-height: 1.3;
  transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.chat__sugg:hover { border-color: var(--accent); background: var(--surface-2); transform: translateY(-1px); }
.chat__sugg--cta { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* embedded lead form */
.chat__lead { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 15px; }

/* input */
.chat__input { display: flex; gap: 8px; padding: 12px; border-block-start: 1px solid var(--line); background: var(--bg); }
.chat__input input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--font-body); font-size: 14.5px;
  transition: border-color .25s;
}
.chat__input input:focus { outline: none; border-color: var(--accent); }
.chat__input input::placeholder { color: var(--faint); }
.chat__send { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); transition: opacity .2s, transform .25s var(--ease); }
.chat__send:hover:not(:disabled) { transform: scale(1.06); }
.chat__send:disabled { opacity: .4; cursor: default; }
:root[dir="rtl"] .chat__send svg { transform: scaleX(-1); }

@media (max-width: 520px) {
  .chat { inset-block-end: 16px; inset-inline-end: 16px; }
  .chat__panel { height: min(74vh, 560px); }
}
@media (prefers-reduced-motion: reduce) {
  .chat__launcher-dot, .chat__bubble--typing span { animation: none; }
}

/* ============================================================
   Inline framed chat section (on the page)
   ============================================================ */
.chatsec { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 5vw, 60px); align-items: stretch; }
.chatsec__copy { align-self: center; }
.chatsec__hints { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-block-start: 30px; }
.chatsec__hints li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15.5px; }
.chatsec__hint-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); }
.chatsec__frame { display: flex; }
.chatbox--inline {
  width: 100%; height: 548px;
  border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 30px 70px -28px oklch(0 0 0 / 0.6);
}
@media (max-width: 860px) {
  .chatsec { grid-template-columns: 1fr; }
  .chatbox--inline { height: 500px; }
}