/* MQ Chat — Asisten Mutqinin (statis, tanpa API) */
:root{--mq-a:#059669;--mq-a2:#10b981;--mq-bg:#ffffff;--mq-ink:#123026;--mq-soft:#f1f7f2;--mq-line:#dcece3;--mq-msg:#eef7f1;--mq-usr:linear-gradient(135deg,#10b981,#047857);--mq-accent:#047857}
.mq-fab{position:fixed;right:18px;bottom:18px;z-index:99999;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(4,120,87,.55);color:#fff;background:var(--mq-usr);transition:transform .15s ease}
.mq-fab:hover{transform:scale(1.06)}
.mq-fab svg{width:26px;height:26px;fill:#fff}
.mq-fab .mq-ico-x{display:none}
.mq-fab.mq-open .mq-ico-chat{display:none}
.mq-fab.mq-open .mq-ico-x{display:block}
.mq-panel{position:fixed;right:18px;bottom:84px;z-index:99999;width:min(372px,calc(100vw - 24px));max-height:min(600px,calc(100dvh - 110px));display:flex;flex-direction:column;background:var(--mq-bg);border:1px solid var(--mq-line);border-radius:18px;box-shadow:0 24px 70px -22px rgba(18,48,38,.35);overflow:hidden;font:400 14px/1.5 Roboto,"Segoe UI",Arial,sans-serif;color:var(--mq-ink);opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease}
.mq-panel.mq-open{opacity:1;visibility:visible;transform:none}
.mq-head{padding:14px 16px;background:var(--mq-usr);color:#fff;display:flex;gap:10px;align-items:center}
.mq-ava{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font-weight:900;font-size:16px}
.mq-head b{display:block;font-size:14.5px;line-height:1.2}
.mq-head small{display:block;font-size:11.5px;opacity:.85;font-weight:400}
.mq-body{flex:1;overflow-y:auto;padding:14px;background:#fbfdfc;scrollbar-width:thin}
.mq-msg{margin:0 0 10px;max-width:88%}
.mq-msg.mq-in{align-self:flex-start}
.mq-msg.mq-out{align-self:flex-end;margin-left:auto}
.mq-msg p{margin:0;padding:9px 12px;border-radius:14px;font-size:13.5px;background:var(--mq-msg);border:1px solid #e3efe8;color:var(--mq-ink)}
.mq-in p{border-bottom-left-radius:4px}
.mq-out p{background:var(--mq-usr);color:#fff;border:0;border-bottom-right-radius:4px}
.mq-msg a{color:var(--mq-accent);font-weight:700;text-decoration:none}
.mq-out a{color:#eafff3}
.mq-msg small{display:block;margin:2px 2px 0;font-size:10.5px;opacity:.6}
.mq-menu{display:flex;flex-wrap:wrap;gap:6px;padding:2px 14px 12px;background:#fbfdfc}
.mq-chip{border:1.5px solid var(--mq-a2);background:#fff;color:var(--mq-accent);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;transition:.12s}
.mq-chip:hover{background:var(--mq-soft)}
.mq-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--mq-line);background:#fff}
.mq-input input{flex:1;border:1.5px solid var(--mq-line);border-radius:999px;padding:9px 13px;font-size:13.5px;outline:none;color:var(--mq-ink);background:#fff}
.mq-input input:focus{border-color:var(--mq-a2)}
.mq-input button{border:0;border-radius:50%;width:38px;height:38px;cursor:pointer;color:#fff;background:var(--mq-usr);display:grid;place-items:center}
.mq-input button svg{width:17px;height:17px;fill:#fff}
.mq-foot{padding:7px;text-align:center;font-size:10.5px;background:#f3f7f4;color:#6f8a7d;border-top:1px solid var(--mq-line)}
.mq-hint{font-size:11.5px;color:#5f7a6b;background:#fff8e6;border:1px solid #f3e3b5;border-radius:10px;padding:8px 10px;margin:0 0 10px}
@media (max-width:420px){.mq-fab{right:12px;bottom:12px;width:54px;height:54px}.mq-panel{right:10px;bottom:74px}}