.mpai-root { --mpai-mint:#58c7ff; --mpai-text:#eff7fa; --mpai-muted:#a0b4c3; --mpai-border:rgba(173,211,223,.16); position:fixed; z-index:99990; bottom:max(22px,env(safe-area-inset-bottom)); left:24px; color:var(--mpai-text); font-family:"Cairo",system-ui,sans-serif; font-size:14px; line-height:1.8; letter-spacing:normal; }
.mpai-root *, .mpai-root *::before, .mpai-root *::after { box-sizing:border-box; }
.mpai-root [hidden] { display:none!important; }
.mpai-root button, .mpai-root textarea { font:inherit; }
.mpai-root button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mpai-root button:focus-visible, .mpai-root a:focus-visible { outline:2px solid var(--mpai-mint); outline-offset:4px; }
.mpai-root button:disabled { cursor:wait; opacity:.5; }
.mpai-launcher { display:flex; align-items:center; gap:14px; min-height:66px; padding:8px 9px 8px 22px; border:1px solid rgba(116,237,203,.36); border-radius:100px; color:var(--mpai-text); background:linear-gradient(125deg,#102c50,#05132a); box-shadow:0 12px 45px #0005,inset 0 1px 0 #ffffff12; transition:transform .2s,box-shadow .2s; }
.mpai-launcher:hover { transform:translateY(-3px); box-shadow:0 16px 45px #0006,0 0 24px #58c7ff18; }
.mpai-launcher-copy { display:grid; text-align:start; line-height:1.7; }
.mpai-launcher-copy strong { color:#f2fcf9; font-size:.88rem; font-weight:700; }
.mpai-launcher-copy small { color:#abc9e5; font-size:.68rem; }
.mpai-spark { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:linear-gradient(145deg,#a3e8ff,#249bed); color:#062548; box-shadow:0 0 22px #58c7ff30; }
.mpai-spark svg { width:28px; height:28px; }
.mpai-panel { display:flex; flex-direction:column; width:430px; height:min(740px,calc(100dvh - 114px)); max-height:calc(100dvh - 40px); min-height:340px; overflow:hidden; border:1px solid var(--mpai-border); border-radius:26px; background:radial-gradient(ellipse at 0 0,#1456b645,transparent 52%),#06162e; box-shadow:0 24px 100px #0007,inset 0 1px 0 #ffffff0c; animation:mpai-appear .22s ease; }
.mpai-root.is-open .mpai-launcher { display:none; }
.mpai-header { display:flex; align-items:center; flex-shrink:0; gap:11px; padding:21px 18px 20px; border-bottom:1px solid var(--mpai-border); background:linear-gradient(135deg,#13488430,transparent); }
.mpai-avatar { display:grid; flex:0 0 auto; place-items:center; width:43px; height:46px; border:1px solid #58c7ff35; border-radius:15px; color:var(--mpai-mint); background:linear-gradient(150deg,#58c7ff20,#58c7ff05); font-size:27px; }
.mpai-heading { flex:1; min-width:0; }
.mpai-overline { display:block; margin:0; color:var(--mpai-mint); font-family:inherit; font-size:9px; font-weight:700; letter-spacing:.09em; }
.mpai-heading h2 { margin:3px 0 2px; color:var(--mpai-text); font-size:14px; line-height:1.8; font-weight:700; }
.mpai-heading p { display:flex; align-items:center; gap:6px; margin:0; color:var(--mpai-muted); font-size:9px; }
.mpai-heading i { width:5px; height:5px; flex:0 0 auto; border-radius:50%; background:var(--mpai-mint); box-shadow:0 0 8px #58c7ff80; }
.mpai-tools { display:flex; gap:3px; align-self:flex-start; }
.mpai-tools button { display:grid; place-items:center; width:30px; min-height:34px; padding:0; border:0; border-radius:9px; color:#c6d8df; background:transparent; font-size:22px; line-height:1; }
.mpai-tools button:hover { color:var(--mpai-mint); background:#ffffff0c; }
.mpai-messages { display:flex; flex:1; flex-direction:column; gap:18px; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:22px 20px; scrollbar-width:thin; scrollbar-color:#38689b #06162e; }
.mpai-welcome { margin:auto 0; padding:18px 4px 8px; text-align:center; }
.mpai-welcome-icon { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 20px; border:1px solid #58c7ff30; border-radius:23px; color:var(--mpai-mint); background:radial-gradient(circle at top,#58c7ff25,#58c7ff05); box-shadow:0 12px 40px #58c7ff0c; font-size:43px; }
.mpai-welcome h3 { margin:12px 0 16px; color:var(--mpai-text); font-size:26px; font-weight:600; line-height:1.65; letter-spacing:normal; }
.mpai-welcome > p:not(.mpai-overline) { max-width:310px; margin:0 auto; color:var(--mpai-muted); font-size:12px; line-height:2; }
.mpai-prompts { display:grid; gap:8px; margin:24px 0 6px; }
.mpai-prompts button { display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:10px 14px; border:1px solid var(--mpai-border); border-radius:13px; color:#deeeff; background:#ffffff04; text-align:start; font-size:12px; transition:background .15s,border-color .15s; }
.mpai-prompts button span { color:var(--mpai-mint); font-size:19px; }
.mpai-prompts button:hover { background:#58c7ff0c; border-color:#58c7ff45; }
.mpai-message { max-width:94%; animation:mpai-appear .2s ease; }
.mpai-message[data-role=user] { align-self:flex-start; max-width:87%; padding:12px 16px; border:1px solid #58c7ff23; border-radius:17px 17px 5px 17px; color:#e4f5ff; background:linear-gradient(135deg,#124d82,#102e58); }
.mpai-message[data-role=assistant],.mpai-message[data-role=receipt] { align-self:flex-end; width:100%; }
.mpai-message-label { display:block; margin-bottom:7px; color:var(--mpai-mint); font-size:9px; font-weight:600; letter-spacing:.04em; }
.mpai-message p { margin:0; color:inherit; font-size:12.5px; line-height:2; white-space:pre-wrap; overflow-wrap:anywhere; }
.mpai-message[data-role=receipt] { padding:15px; border:1px solid #58c7ff40; border-radius:15px; color:var(--mpai-mint); background:#58c7ff0a; }
.mpai-projects { display:grid; gap:9px; margin-top:14px; }
.mpai-project { display:flex; align-items:center; gap:12px; min-width:0; padding:10px; border:1px solid var(--mpai-border); border-radius:14px; color:var(--mpai-text); background:#ffffff04; text-decoration:none; transition:border-color .2s,background .2s; }
.mpai-project:hover { color:var(--mpai-text); border-color:#58c7ff55; background:#58c7ff09; }
.mpai-project img, .mpai-project-icon { width:58px; height:53px; flex:0 0 auto; border-radius:9px; object-fit:cover; background:#58c7ff10; }
.mpai-project-icon { display:grid; place-items:center; color:var(--mpai-mint); font-size:24px; }
.mpai-project-copy { min-width:0; flex:1; }
.mpai-project strong { display:block; font-size:11px; line-height:1.9; overflow-wrap:anywhere; }
.mpai-project small { display:block; color:var(--mpai-muted); font-size:10px; }
.mpai-project > span:last-child { color:var(--mpai-mint); }
.mpai-status { flex-shrink:0; margin:0; padding:0 22px; color:var(--mpai-muted); font-size:11px; line-height:1.9; }
.mpai-status:not(:empty) { padding-block:9px; }
.mpai-status.is-error { color:#ffb5a9; }
.mpai-status button { margin-inline-start:9px; padding:3px 10px; border:1px solid #ffffff30; border-radius:8px; color:var(--mpai-text); background:transparent; font-size:11px; }
.mpai-composer { display:flex; align-items:flex-end; flex-shrink:0; gap:10px; margin:10px 16px 0; padding:9px 10px; border:1px solid #a5d1c530; border-radius:16px; background:#020c1566; transition:border-color .2s; }
.mpai-composer:focus-within { border-color:#58c7ff80; box-shadow:0 0 0 3px #58c7ff08; }
.mpai-composer textarea { flex:1; width:100%; min-width:0; min-height:39px; max-height:130px; margin:0; padding:8px 4px; outline:none; resize:none; border:0; color:var(--mpai-text); background:transparent; font-size:12px; line-height:1.9; text-align:start; }
.mpai-composer textarea::placeholder { color:#8babae; }
.mpai-composer button { display:grid; place-items:center; flex:0 0 auto; width:39px; height:39px; padding:0; border:0; border-radius:12px; color:#062548; background:var(--mpai-mint); box-shadow:0 3px 16px #58c7ff13; }
.mpai-composer button svg { width:23px; height:23px; }
.mpai-privacy { flex-shrink:0; margin:10px 15px 16px; color:#8da4b3; font-size:8.5px; line-height:1.9; text-align:center; }
.mpai-privacy a { color:#b7d6f3; text-decoration:underline; text-underline-offset:3px; }
.mpai-sr-only, .mpai-trap { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mpai-draft { width:100%; padding:17px; border:1px solid #58c7ff45; border-radius:18px; background:linear-gradient(145deg,#123e7888,#10264988); }
.mpai-draft h3 { margin:0 0 14px; color:var(--mpai-mint); font-size:14px; line-height:1.8; }
.mpai-draft dl { display:grid; gap:10px; margin:0 0 16px; }
.mpai-draft dl > div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 14px; font-size:11px; }
.mpai-draft dt { color:#abc5e1; }
.mpai-draft dd { margin:0; color:var(--mpai-text); overflow-wrap:anywhere; }
.mpai-draft .mpai-description { display:block; }
.mpai-description dd { margin-top:6px; line-height:1.9; white-space:pre-wrap; }
.mpai-check { display:flex; align-items:flex-start; gap:8px; margin:10px 0; color:#d6e9ff; font-size:10.5px; line-height:1.9; cursor:pointer; }
.mpai-check input { flex:0 0 auto; width:17px; height:17px; margin-top:3px; accent-color:#58c7ff; }
.mpai-confirm { width:100%; min-height:45px; margin-top:10px; padding:9px 15px; border:0; border-radius:11px; color:#062548; background:var(--mpai-mint); font-weight:700; font-size:12px; }
.mpai-draft-note { margin:10px 0 0; color:#b8cfe8; font-size:10px; line-height:1.9; }
.mpai-root.is-fullscreen { inset:20px; display:grid; place-items:center; background:#020912a6; border-radius:28px; backdrop-filter:blur(8px); }
.mpai-root.is-fullscreen .mpai-panel { width:min(780px,100%); height:100%; max-height:100%; }
.mpai-root.is-fullscreen .mpai-messages { padding-inline:clamp(20px,5vw,48px); }
.mpai-root.is-fullscreen .mpai-welcome { width:min(460px,100%); margin:auto; }
.mpai-root.is-fullscreen .mpai-message { max-width:85%; }
@keyframes mpai-appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:620px) {
    .mpai-root { left:12px; bottom:max(14px,env(safe-area-inset-bottom)); }
    .mpai-root.is-open { right:12px; }
    .mpai-root[data-request-page=true]:not(.is-open) { bottom:96px; }
    .mpai-launcher { min-height:59px; padding:6px 7px 6px 17px; gap:10px; }
    .mpai-spark { width:43px; height:43px; }
    .mpai-launcher-copy strong { font-size:12px; }
    .mpai-panel { width:100%; height:min(740px,84dvh); max-height:calc(100dvh - 28px); min-height:0; border-radius:23px; }
    .mpai-header { padding:16px 13px; gap:8px; }
    .mpai-heading h2 { font-size:12px; }
    .mpai-heading p { font-size:8px; }
    .mpai-overline { font-size:8px; }
    .mpai-avatar { width:36px; height:40px; border-radius:12px; }
    .mpai-tools button { width:30px; min-height:36px; }
    .mpai-messages { padding:18px 15px; }
    .mpai-welcome h3 { font-size:24px; }
    .mpai-composer textarea { font-size:16px; }
    .mpai-privacy { font-size:8px; }
    .mpai-root.is-fullscreen { inset:0; border-radius:0; backdrop-filter:none; }
    .mpai-root.is-fullscreen .mpai-panel { width:100%; height:var(--mpai-viewport,100dvh); border:0; border-radius:0; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
    .mpai-root.is-fullscreen .mpai-message { max-width:94%; }
}
@media(prefers-reduced-motion:reduce) { .mpai-root *, .mpai-root *::before { animation:none!important; transition:none!important; } }

/* V3: protect the composer from the legacy site-wide form rules. */
.mpai-root .mpai-composer textarea { min-height:39px; padding:8px 4px!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--mpai-text)!important; box-shadow:none!important; }
.mpai-root .mpai-composer textarea:focus { border:0!important; box-shadow:none!important; }
.mpai-root .mpai-tools button { min-width:40px; min-height:40px; }
.mpai-root .mpai-message p { font-size:14px; line-height:1.95; }
.mpai-root .mpai-privacy { font-size:10px; }
.mpai-root .mpai-check { display:flex; color:#d6e9ff!important; font-size:12px!important; }
.mpai-root .mpai-check input { width:18px!important; height:18px!important; min-height:18px!important; padding:0!important; }
@media(max-width:620px) { .mpai-root .mpai-composer textarea { font-size:16px; }.mpai-root .mpai-panel { max-width:100%; } }
