/* شات مطافي بهوية «هناكل إيه؟» — ملف مستقل عن بناء Tailwind عشان ما يحتاجش npm.
   بياخد متغيرات الموقع الدلالية (--surface-raised/--ink/--line/--brand/--hot) فبيتبع
   الوضع الغامق لوحده، والخطوط من --font-sans/--font-display. */
.chat{position:fixed;inset-inline-end:16px;bottom:16px;z-index:66;font-family:var(--font-sans)}
.chat [hidden]{display:none!important}   /* اللوحة بتتقفل بخاصية hidden والكلاس بيحط flex */

.chat-fab{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 18px 0 8px;border:0;border-radius:999px;
  background:var(--brand);color:var(--brand-ink);cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:14.5px;
  box-shadow:0 16px 36px -12px rgba(23,21,18,.45);transition:transform .3s ease,box-shadow .3s}
[dir="rtl"] .chat-fab{padding:0 8px 0 18px}
.chat-fab:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 22px 42px -14px rgba(23,21,18,.5)}
.chat-fab-ic{width:40px;height:40px;border-radius:50%;background:var(--surface-raised);display:grid;place-items:center;overflow:hidden}
.chat-fab-ic img{width:30px;height:30px;object-fit:contain}
.chat-fab-dot{position:absolute;top:4px;inset-inline-start:4px;width:10px;height:10px;border-radius:50%;background:var(--hot);
  border:2px solid var(--brand);animation:hk-pulse 2.4s infinite}
@keyframes hk-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}

.chat.open .chat-fab{display:none}
.chat-panel{display:flex;flex-direction:column;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 100px));
  background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(23,21,18,.5);animation:hk-in .28s ease}
@keyframes hk-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--brand);color:var(--brand-ink)}
.chat-avatar{width:34px;height:34px;border-radius:50%;background:var(--surface-raised);display:grid;place-items:center;overflow:hidden;flex:none}
.chat-avatar img{width:26px;height:26px;object-fit:contain}
.chat-title{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chat-title b{font-family:var(--font-display);font-size:14.5px}
.chat-title small{font-weight:500;opacity:.75}
.chat-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;opacity:.8}
.chat-status i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.chat-status.on i{background:#1d9d55}
.chat-status.on{opacity:1}
.chat-x{margin-inline-start:auto;border:0;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px}
.chat-x:hover{background:rgba(0,0,0,.08)}

.chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.chat-msg{display:flex;max-width:88%}
.chat-bot{align-self:flex-start}
.chat-me{align-self:flex-end}
.chat-b{padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.55;word-break:break-word}
.chat-bot .chat-b{background:var(--surface-raised);border:1px solid var(--line);border-start-start-radius:4px}
.chat-me .chat-b{background:var(--brand);color:var(--brand-ink);border-start-end-radius:4px}
.chat-b a{color:var(--hot);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.chat-me .chat-b a{color:inherit}
.chat-msg.pop{animation:hk-in .22s ease}
.chat-typing .chat-b{display:inline-flex;gap:4px;padding:11px 14px}
.chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:hk-ty 1.1s infinite}
.chat-typing i:nth-child(2){animation-delay:.18s}
.chat-typing i:nth-child(3){animation-delay:.36s}
@keyframes hk-ty{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}

.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px;background:var(--surface)}
.chat-chips button{border:1px solid var(--line);background:var(--surface-raised);color:var(--ink-2);border-radius:999px;
  padding:6px 12px;font-size:12px;cursor:pointer;font-family:inherit;transition:border-color .2s,color .2s}
.chat-chips button:hover{border-color:var(--brand);color:var(--ink)}

.chat-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface-raised)}
.chat-form textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;
  padding:9px 12px;font:inherit;font-size:13.5px;max-height:120px;outline:none}
.chat-form textarea:focus{border-color:var(--brand)}
.chat-form button{width:40px;height:40px;flex:none;border:0;border-radius:12px;background:var(--hot);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:transform .2s}
.chat-form button:hover{transform:scale(1.06)}
.chat-form svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .chat-form svg{transform:scaleX(-1)}
.chat-foot{margin:0;padding:0 14px 10px;font-size:10.5px;color:var(--muted);background:var(--surface-raised);text-align:center}

@media(max-width:560px){.chat{inset-inline-end:12px;bottom:12px}.chat-panel{height:min(600px,calc(100vh - 76px))}}
@media(prefers-reduced-motion:reduce){.chat-fab-dot,.chat-msg.pop,.chat-panel{animation:none}}