:root{--navy:#0D497F;--deep:#19315B;--sky:#9DC4E3;--sky50:#EEF5FB;--horizon:#1F78C8;--cream:#F8EAD1;--ink:#13233A;--ink2:#4A5B72;--line:#D8E1EC;--canvas:#F5F8FB;--accent:#7A55C2}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;background:var(--canvas);color:var(--ink);display:flex;flex-direction:column}
html[lang=en] body{font-family:"IBM Plex Sans","Segoe UI",Arial,sans-serif}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.top{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--navy);color:#fff;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700}
.proj{min-width:120px;max-width:260px;flex:0 1 220px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px;padding:7px 10px;font:inherit;font-size:14px}
.proj::placeholder{color:#cfe0f1}
.grow{flex:1}
.tb{min-height:36px;padding-inline:11px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:inherit;font-size:13px;cursor:pointer}
.tb:hover{background:rgba(255,255,255,.1)}
.tb.solid{background:#fff;color:var(--navy);font-weight:600;border-color:#fff}
.tb.icon{font-size:16px;letter-spacing:-3px}
.layout{flex:1;display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);min-height:0}
.chat{display:flex;flex-direction:column;border-inline-end:1px solid var(--line);background:#fff;min-height:0}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.intro h1{margin:6px 0 4px;font-size:22px;color:var(--navy)}
.intro p{margin:0 0 12px;color:var(--ink2);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--sky50);color:var(--deep);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;text-align:start}
.chip:hover{border-color:var(--horizon)}
.msg{padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-width:95%}
.msg.user{background:var(--navy);color:#fff;align-self:flex-end}
html[dir=rtl] .msg.user{align-self:flex-start}
.msg.ai{background:var(--sky50);color:var(--ink);align-self:flex-start;border:1px solid var(--line)}
html[dir=rtl] .msg.ai{align-self:flex-end}
.msg.err{background:#fdecec;color:#a8302c}
.composer{border-top:1px solid var(--line);padding:12px}
.composer textarea{width:100%;resize:vertical;min-height:70px;font:inherit;font-size:15px;padding:10px 12px;border:1px solid #C3D0DF;border-radius:12px}
.composer textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--sky)}
.row{display:flex;align-items:center;gap:8px;margin-top:8px}
.row .muted{flex:1}
.muted{color:var(--ink2);font-size:13px}
.btn{min-height:40px;padding-inline:16px;border-radius:10px;border:1px solid var(--navy);background:var(--navy);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.55;cursor:wait}
.btn.light{background:#fff;color:var(--navy)}
.stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.stagebar{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:#fff}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:#fff;padding:7px 12px;font:inherit;font-size:13px;color:var(--ink2);cursor:pointer}
.seg button.on{background:var(--sky50);color:var(--navy);font-weight:600}
.canvas{flex:1;position:relative;display:flex;justify-content:center;align-items:stretch;padding:14px;overflow:auto;min-height:0}
.canvas iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(13,73,127,.08)}
.canvas.mobile iframe{width:390px;max-width:100%}
.code{margin:0;width:100%;overflow:auto;background:#0A1F3A;color:#E6EDF6;border-radius:14px;padding:16px;font:13px/1.55 Consolas,"Cascadia Mono",monospace;direction:ltr;text-align:left;white-space:pre-wrap}
.empty{margin:auto;text-align:center;color:var(--ink2);max-width:360px}
.spark{font-size:42px;color:var(--accent)}
.toast{position:fixed;inset-inline:16px;bottom:16px;margin-inline:auto;max-width:520px;background:var(--deep);color:#fff;padding:12px 16px;border-radius:12px;display:none;z-index:30}
.toast.err{background:#a8302c}
dialog{border:0;border-radius:18px;padding:0;max-width:480px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,31,58,.5)}
.card{padding:20px}
.card h2{margin:0 0 12px;font-size:18px}
.list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.list button{text-align:start;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px;font:inherit;cursor:pointer}
.list button:hover{border-color:var(--horizon)}
.link{direction:ltr;background:var(--sky50);padding:10px;border-radius:10px;word-break:break-all;font-size:14px}
.apps{position:fixed;top:56px;inset-inline-end:12px;width:340px;height:440px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:20;overflow:hidden}
.apps iframe{width:100%;height:100%;border:0}
[hidden]{display:none!important}
@media (max-width:860px){.layout{grid-template-columns:1fr;grid-template-rows:auto minmax(420px,1fr)}.chat{max-height:50vh;border-inline-end:0;border-bottom:1px solid var(--line)}.top .tb{font-size:12px;padding-inline:8px}}