/* modal */
.overlay{position:fixed;inset:0;background:rgba(10,12,25,.55);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:20px;animation:fade .15s}
.modal{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);width:min(640px,100%);max-height:90vh;overflow:auto;animation:pop .18s}
.modal.wide{width:min(980px,100%)}
.modal:focus,.modal:focus-visible{outline:none}
.modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.modal-head h3{font-size:17px}
.modal-body{padding:22px}
.modal-foot{display:flex;gap:8px;justify-content:flex-start;padding:14px 22px;border-top:1px solid var(--border);background:var(--surface-2)}
/* أزرار أسفل النافذة تلتف في سطور على الجوال بدل أن تخرج يمين النافذة وتحتاج سحبًا (مثل «تسجيل الخروج») */
.modal-foot{flex-wrap:wrap}
@media (max-width:560px){.overlay{padding:12px}.modal-body{padding:16px}.modal-head,.modal-foot{padding-inline:16px}.modal-foot .btn{flex:1 1 auto;justify-content:center;white-space:normal;text-align:center}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.96) translateY(8px);opacity:0}}

/* toast */
.toasts{position:fixed;bottom:22px;left:22px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--text);color:var(--bg);padding:12px 18px;border-radius:12px;box-shadow:var(--shadow-lg);font-weight:500;animation:pop .2s;display:flex;gap:8px;align-items:center;max-width:380px}

/* command palette */
.palette{width:min(680px,100%);background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;align-self:start;margin-top:10vh}
.palette input{width:100%;border:0;outline:0;padding:20px 22px;font-size:17px;background:transparent;border-bottom:1px solid var(--border)}
.palette .res{max-height:55vh;overflow:auto;padding:8px}
.palette .it{padding:10px 14px;border-radius:10px;display:flex;gap:10px;align-items:center;cursor:pointer}
.palette .it.sel,.palette .it:hover{background:var(--primary-soft)}
.ai-answer{padding:16px 18px;margin:8px;border-radius:14px;background:linear-gradient(135deg,var(--primary-soft),var(--pink-soft))}

/* chat */
.chat{display:flex;flex-direction:column;gap:12px;height:56vh;overflow:auto;padding:6px}
.msg{max-width:78%;padding:12px 16px;border-radius:16px;white-space:pre-wrap}
.msg.me{align-self:flex-start;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-end;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:4px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:6px 14px;cursor:pointer;font-size:13px}
.chip:hover{border-color:var(--primary);color:var(--primary)}

/* heatmap */
.heat{display:grid;gap:4px}
.heat .cell{aspect-ratio:1;border-radius:5px;min-width:12px}

/* pickup screen */
.pickup-screen{position:fixed;inset:0;z-index:150;background:radial-gradient(circle at 20% 0%,#312e81,#0b0d18 70%);color:#fff;display:flex;flex-direction:column;padding:30px}
.pickup-screen .now{flex:1;display:grid;place-items:center;text-align:center}
.pickup-screen .big{font-size:clamp(40px,7vw,96px);font-weight:800;line-height:1.2}
.pickup-screen .queue{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.pickup-screen .queue div{background:rgba(255,255,255,.08);padding:12px 20px;border-radius:14px;font-size:20px}
.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.04);text-shadow:0 0 40px rgba(167,139,250,.8)}}

/* id card */
.idcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.idcard{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface);break-inside:avoid}
.idcard .top{background:var(--grad);color:#fff;padding:10px 14px;display:flex;justify-content:space-between;font-size:13px}
.idcard .body{padding:12px 14px;display:flex;gap:12px;align-items:center}
.idcard svg{background:#fff;border-radius:6px}

/* empty */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .e-ic{font-size:44px;margin-bottom:8px}