:root{
  --ink:#1a1c22; --mono:'Space Mono', ui-monospace, monospace;
  --disp:'Space Grotesk', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--mono);color:var(--ink);background:#8f949c;overflow:hidden;-webkit-font-smoothing:antialiased}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1}
.fx{position:fixed;inset:0;pointer-events:none;z-index:3}
.fx.vig{background:radial-gradient(120% 90% at 50% 38%,transparent 52%,rgba(60,64,72,.4))}
/* bottom scrim keeps the chat/text readable and off the face */
.fx.scrim{background:linear-gradient(to top,rgba(120,124,132,.96) 0%,rgba(120,124,132,.82) 14%,rgba(130,134,142,.35) 26%,transparent 40%);z-index:4}

.hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hud .px{pointer-events:auto}

.logo{position:absolute;top:24px;left:30px;font-family:var(--disp);font-weight:700;
  font-size:26px;letter-spacing:1px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.2);
  pointer-events:auto;cursor:pointer}
.topnav{position:absolute;top:30px;right:30px;display:flex;gap:22px;font-size:12px;
  letter-spacing:1.5px;color:#fff;text-transform:uppercase}
.topnav a{color:#fff;opacity:.8;cursor:pointer;transition:opacity .2s}
.topnav a:hover{opacity:1}
.status{position:absolute;bottom:24px;left:30px;font-size:11px;letter-spacing:1.5px;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.25);display:flex;align-items:center;gap:8px}
.status .sdot{width:7px;height:7px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 8px #7CFFB2;animation:bl 2s infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.4}}

/* center stage — input sits mid-screen, chat log scrolls BELOW it */
.stage{position:absolute;left:50%;top:72%;transform:translateX(-50%);
  width:min(640px,92vw);text-align:center;color:#fff;z-index:11;transition:left .4s cubic-bezier(.22,1,.36,1),width .4s,top .4s}
/* when a panel is open: chat shrinks and moves into the left space, below the face (never under the panel) */
@media(min-width:820px){
  body.panel-open .stage{left:calc((100vw - 560px)/2);width:min(440px,calc(100vw - 620px));top:64%}
  body.panel-open .jlog.on{max-height:20vh}
}
.jm-hint{font-size:14px;line-height:1.75;letter-spacing:.5px;opacity:.95;
  text-shadow:0 2px 14px rgba(0,0,0,.4);margin-bottom:18px;transition:opacity .4s,transform .4s}
.jm-hint b{font-weight:700}
.jm-hint.hide{opacity:0;transform:translateY(-6px);height:0;margin:0;pointer-events:none}

/* chat log BELOW the input box, grows downward, scrollable */
.jlog{max-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;text-align:left;
  transition:max-height .4s,margin .4s}
.jlog.on{max-height:24vh;margin-top:12px}
.jlog .m{font-size:13.5px;line-height:1.6;padding:9px 13px;border-radius:12px;max-width:88%;white-space:pre-wrap}
.jlog .me{align-self:flex-end;background:rgba(255,255,255,.92);color:#1a1c22;border-radius:12px 12px 2px 12px}
.jlog .ai{align-self:flex-start;background:rgba(20,22,28,.5);color:#fff;border:1px solid rgba(255,255,255,.25);
  border-radius:12px 12px 12px 2px;backdrop-filter:blur(6px)}

.jform{display:flex;gap:8px;align-items:center;background:rgba(20,22,28,.42);border:1px solid rgba(255,255,255,.4);
  border-radius:30px;padding:6px 6px 6px 18px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.18)}
.jform input{flex:1;background:none;border:0;outline:0;color:#fff;font:400 15px var(--mono);caret-color:#fff}
.jform input::placeholder{color:rgba(255,255,255,.55)}
.jform button{width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#1a1c22;font-size:18px;
  cursor:pointer;flex:none;transition:transform .15s}
.jform button:hover{transform:scale(1.07)}

/* ===== reveal panel ===== */
.panel{position:fixed;top:0;right:0;z-index:30;width:min(560px,100vw);height:100%;
  background:rgba(14,16,20,.78);backdrop-filter:blur(18px);border-left:1px solid rgba(255,255,255,.12);
  color:#e8eaee;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.panel.on{transform:translateX(0)}
.panel[hidden]{display:flex}
.panel-top{display:flex;align-items:center;justify-content:space-between;padding:26px 30px 18px}
.panel-logo{font-family:var(--disp);font-weight:700;font-size:18px;color:#fff;cursor:pointer;opacity:.8}
.panel-logo:hover{opacity:1}
.panel-ttl{font-size:12px;letter-spacing:3px;color:#9fb4ff}
.panel-x{font-size:16px;color:#fff;cursor:pointer;width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;transition:all .2s}
.panel-x:hover{background:#fff;color:#0c0e12}
.panel-body{flex:1;overflow-y:auto;padding:10px 30px 40px}
.panel-note{color:#b9bdc6;font-size:14px;line-height:1.8;margin-bottom:22px}

/* project cards */
.pcard{border-top:1px solid rgba(255,255,255,.14);padding:22px 0}
.pc-tag{font-size:11px;letter-spacing:2px;color:#8b9099;margin-bottom:8px}
.pc-ttl{font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:-.5px;color:#fff;cursor:pointer}
.pc-ttl:hover{color:#9fb4ff}
.pc-tech{color:#9fb4ff;font-size:12px;letter-spacing:1px;margin:6px 0 12px}
.pc-desc{color:#b9bdc6;font-size:13.5px;line-height:1.8}
.pc-actions{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.pc-btn{font-size:12px;letter-spacing:1px;color:#fff;text-decoration:none;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px;text-transform:uppercase}
.pc-btn:hover{color:#9fb4ff;border-color:#9fb4ff}

/* code vault */
.vault{display:flex;flex-direction:column}
.vrow{display:flex;align-items:center;gap:14px;padding:16px 4px;border-top:1px solid rgba(255,255,255,.12);
  cursor:pointer;transition:padding-left .25s,background .2s;color:#fff}
.vrow:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.vrow:hover{padding-left:12px;background:rgba(255,255,255,.05)}
.vrow .vn{font-size:11px;opacity:.5;width:26px}
.vrow .vt{font-size:16px;font-weight:700;flex:1}
.vrow .vl{font-size:11px;letter-spacing:1px;opacity:.7}
.vrow .va{opacity:0;transition:opacity .2s}
.vrow:hover .va{opacity:1}

/* contact */
.social{display:flex;flex-direction:column;gap:10px}
.social a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:16px 20px;transition:all .2s}
.social a:hover{background:rgba(255,255,255,.12);transform:translateX(4px)}
.social .sn{font-family:var(--disp);font-weight:700;font-size:16px;color:#fff}
.social .sh{font-size:12px;color:#9fb4ff;letter-spacing:.5px}

/* project detail overlay */
.detail{position:fixed;inset:0;z-index:40;background:#0c0e12;color:#e8eaee;overflow-y:auto;animation:dIn .4s ease}
.detail[hidden]{display:none}
@keyframes dIn{from{opacity:0}to{opacity:1}}
.detail-logo{position:absolute;top:26px;left:30px;font-family:var(--disp);font-weight:700;font-size:24px;color:#fff}
.detail-close{position:absolute;top:30px;right:30px;font-size:13px;letter-spacing:2px;color:#fff;
  cursor:pointer;border:1px solid rgba(255,255,255,.3);padding:8px 16px}
.detail-close:hover{background:#fff;color:#0c0e12}
.detail-wrap{max-width:760px;margin:0 auto;padding:120px 24px 90px}
.detail-head{color:#8b9099;letter-spacing:3px;font-size:12px;margin-bottom:18px}
.detail-wrap h2{font-family:var(--disp);font-weight:700;font-size:clamp(30px,5vw,56px);letter-spacing:-1px;margin-bottom:8px}
.dtech{color:#9fb4ff;font-size:12px;letter-spacing:1px;margin-bottom:26px}
.detail-wrap p{color:#b9bdc6;font-size:15px;line-height:1.9;max-width:620px}
.detail-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:40px 0}
.detail-shots img{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.1);display:block}
.detail-visit{margin-top:30px;color:#8b9099;letter-spacing:2px;font-size:12px}
.detail-visit a{display:inline-block;margin-top:10px;color:#fff;font-size:15px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px}

/* admin panel */
.adm-form{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.adm-form input,.adm-form textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:10px;padding:11px 14px;color:#fff;font:400 13.5px var(--mono);outline:none}
.adm-form input:focus,.adm-form textarea:focus{border-color:#9fb4ff}
.adm-form textarea{resize:vertical;line-height:1.5;white-space:pre}
.adm-form .enter{align-self:flex-start;margin-top:2px;background:#fff;color:#1a1c22;border:0;
  border-radius:24px;padding:11px 24px;font:400 12px var(--mono);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:transform .15s}
.adm-form .enter:hover{transform:translateY(-1px)}
.adm-msg{font-size:12px;color:#9fb4ff}
.adm-h{font-family:var(--disp);font-size:13px;letter-spacing:2px;color:#8b9099;text-transform:uppercase;margin:24px 0 12px}
.adm-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.1);color:#e8eaee;font-size:13.5px}
.adm-row em{color:#9fb4ff;font-style:normal;font-size:11px;margin-left:8px}
.adm-acts{display:flex;gap:12px;align-items:center;flex:none}
.adm-a{cursor:pointer;font-size:11px;letter-spacing:.5px;color:#9fb4ff;opacity:.85;text-decoration:none}
.adm-a:hover{opacity:1;text-decoration:underline}
.adm-del{cursor:pointer;opacity:.6;color:#e8eaee}.adm-del:hover{opacity:1;color:#ff8f8f;text-decoration:none}
.adm-utbl{font-size:12.5px}
.adm-uh,.adm-ur{display:grid;grid-template-columns:1.2fr 2fr .7fr;gap:8px;padding:9px 0;border-top:1px solid rgba(255,255,255,.1)}
.adm-uh{color:#8b9099;letter-spacing:1px;font-size:11px}
.adm-ur{color:#e8eaee}.adm-ur span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* VS Code-style code viewer */
.codeview{position:fixed;inset:0;z-index:60;background:#0d1117;color:#e6edf3;display:flex;flex-direction:column;animation:dIn .3s ease}
.codeview[hidden]{display:none}
.cv-bar{display:flex;align-items:center;gap:16px;padding:12px 18px;background:#161b22;border-bottom:1px solid #222a35;flex:none}
.cv-dots{display:flex;gap:7px}.cv-dots i{width:12px;height:12px;border-radius:50%;background:#333b47}
.cv-dots i:nth-child(1){background:#ff5f56}.cv-dots i:nth-child(2){background:#ffbd2e}.cv-dots i:nth-child(3){background:#27c93f}
.cv-file{flex:1;font:400 13px var(--mono);color:#c9d1d9;display:flex;align-items:center;gap:10px;overflow:hidden}
.cv-file b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-lang{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#7d8794;border:1px solid #2a323d;border-radius:20px;padding:2px 9px;flex:none}
.cv-actions{display:flex;gap:8px;flex:none}
.cv-actions button{font:400 12px var(--mono);letter-spacing:1px;color:#c9d1d9;background:#21262d;border:1px solid #30363d;
  border-radius:8px;padding:7px 14px;cursor:pointer;transition:background .15s}
.cv-actions button:hover{background:#30363d}
.cv-body{flex:1;overflow:auto;display:flex;align-items:flex-start}
.cv-gutter{flex:none;padding:18px 0;text-align:right;color:#4a5568;font:400 13px/1.6 var(--mono);user-select:none;
  border-right:1px solid #1b2230;background:#0d1117;position:sticky;left:0}
.cv-gutter div{padding:0 16px 0 20px}
.cv-pre{margin:0;padding:18px 20px;overflow:visible}
.cv-pre code{font:400 13px/1.6 var(--mono);background:none!important;padding:0;white-space:pre}
@media(max-width:760px), (max-width:1024px) and (pointer:coarse){
  .codeview{max-width:100vw;overflow:hidden}
  .cv-bar{flex-wrap:wrap;gap:10px;padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top))}
  .cv-dots{display:none}
  .cv-file{flex:1 1 100%;min-width:0;gap:8px}
  .cv-file b{min-width:0;flex:1}
  .cv-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cv-actions button{min-width:0;padding:9px 5px;letter-spacing:0;font-size:12px}
  .cv-body{min-height:0;min-width:0;width:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .cv-gutter{display:none}
  .cv-pre{flex:1;min-width:0;max-width:100%;padding:16px 14px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .cv-pre code{display:block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;tab-size:2;font-size:12px;line-height:1.75;overflow:visible}
}

#loader{position:fixed;inset:0;z-index:50;background:#8f949c;display:flex;align-items:center;
  justify-content:center;transition:opacity .8s ease}
#loader.gone{opacity:0;pointer-events:none}
#loader .bar{font-family:var(--mono);letter-spacing:2px;color:#fff;font-size:14px}

@media(max-width:760px){
  .logo{font-size:19px;top:16px;left:18px}
  .topnav{gap:12px;top:20px;right:18px;font-size:10.5px;letter-spacing:1px}
  .status{font-size:9.5px;bottom:16px;left:18px}
  /* chat anchored near the bottom; input at the very bottom, messages stack above it */
  .stage{width:92vw;top:auto;bottom:6%}
  .jchat{display:flex;flex-direction:column-reverse}
  .jm-hint{font-size:12.5px;margin-bottom:12px}
  .jform{padding:6px 6px 6px 16px}
  .jform input{font-size:16px}            /* 16px prevents iOS zoom-on-focus */
  .jform button{width:44px;height:44px}   /* comfortable touch target */
  .jlog{max-height:0}
  .jlog.on{max-height:34vh;margin-top:0;margin-bottom:10px}
  .jlog .m{font-size:13px;max-width:86%}
  /* panel is full-screen on mobile */
  .panel{width:100vw;border-left:0}
  .panel-top{padding:20px 20px 14px}
  .panel-body{padding:8px 20px 40px}
  .pc-ttl{font-size:22px}
  .pc-desc{font-size:13px}
  .social a{padding:14px 16px}
  .social .sn{font-size:15px}.social .sh{font-size:11px}
  /* project detail */
  .detail-wrap{padding:96px 18px 70px}
  .detail-close{top:20px;right:18px}.detail-logo{top:18px;left:18px;font-size:20px}
  .detail-shots{grid-template-columns:repeat(2,1fr);gap:10px}
}

.chat-choices{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.chat-choices button,.voice-controls button{font:inherit;font-size:12px;color:white;background:rgba(20,22,28,.55);border:1px solid rgba(255,255,255,.35);border-radius:18px;padding:7px 12px;cursor:pointer}
.voice-controls{display:flex;gap:10px;align-items:center;margin-top:8px;color:white;font-size:11px;min-height:28px}
.voice-controls button[hidden]{display:none}
.jform input{min-width:0}
.jlog .m[dir="rtl"]{text-align:right;font-family:'Vazirmatn',system-ui,sans-serif}
@font-face{font-family:Vazirmatn;src:url('/fonts/vazirmatn-400.woff2') format('woff2');font-weight:400;font-display:swap}
html[lang="fa"] .stage{font-family:'Vazirmatn',system-ui,sans-serif}
html[lang="fa"] .jform input{font-family:'Vazirmatn',system-ui,sans-serif}
/* Navigation remains reachable while a panel is open. */
.hud{z-index:40}
.panel-top{padding-top:76px}
@media(max-width:760px){body.panel-open .stage{display:none}}
@media(min-width:761px){.stage{top:68%}.jlog.on{max-height:calc(26vh - 96px)}}
.voice-controls button{white-space:nowrap;flex:none}
.voice-controls #voiceStatus{flex:1;text-align:start}
@media(max-width:760px){.jlog.on{max-height:22vh}}

#loader[hidden]{display:none}

/* A quiet illuminated hardware-style voice switch above Jamora's signature. */
.voice-dock{position:absolute;left:30px;bottom:52px;display:flex;gap:8px;align-items:center}
.voice-toggle{display:flex;align-items:center;gap:10px;height:40px;padding:0 13px;border:1px solid rgba(255,255,255,.38);border-radius:12px;background:linear-gradient(145deg,rgba(43,47,54,.88),rgba(20,24,30,.94));box-shadow:0 5px 16px #0002,inset 0 1px 0 #ffffff18;color:#eef5f3;cursor:pointer;transition:transform .2s,border-color .2s}
.voice-toggle:hover{transform:translateY(-1px);border-color:#b0dacc}.voice-toggle:focus-visible,.voice-replay:focus-visible{outline:2px solid #b7ffe0;outline-offset:4px}
.voice-toggle svg{width:18px;height:18px}.voice-label{font:10px var(--mono);letter-spacing:1.8px}
.voice-led{width:6px;height:6px;border-radius:50%;background:#9ae5bf;box-shadow:0 0 7px #9ae5bf80}
.voice-switch{width:24px;height:14px;border-radius:9px;background:#35584b;position:relative}.voice-switch:after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;top:2px;left:12px;background:#c7f7df;transition:left .2s,background .2s}
.voice-toggle[aria-pressed="false"] .voice-led{background:#8b969c;box-shadow:none}.voice-toggle[aria-pressed="false"] .voice-switch{background:#464d54}.voice-toggle[aria-pressed="false"] .voice-switch:after{left:2px;background:#bac1c7}.voice-toggle[aria-pressed="false"] .voice-waves{opacity:.2}
.voice-toggle[data-state="playing"] .voice-led{animation:voicePulse 1.2s ease-in-out infinite}
@keyframes voicePulse{50%{box-shadow:0 0 12px #9ae5bf;opacity:.65}}
.voice-replay{border:1px solid #ffffff50;border-radius:50%;width:34px;height:34px;background:#252b31;color:#fff;font-size:20px;cursor:pointer}.voice-replay[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chat-choices{display:none}.m.waiting{animation:voicePulse 1s infinite;letter-spacing:4px}
@media(max-width:760px){.voice-dock{left:18px;bottom:42px}.voice-toggle{height:36px;padding:0 10px;gap:8px}.stage{bottom:12%}.jlog.on{max-height:20vh}}
@media(prefers-reduced-motion:reduce){.voice-toggle,.voice-switch:after{transition:none}.voice-toggle[data-state="playing"] .voice-led,.m.waiting{animation:none}}

.file-card{width:100%;max-width:640px;margin:auto;padding:40px 24px;text-align:center;overflow-wrap:anywhere}.file-icon{font-size:52px;color:#a8f0d0;margin-bottom:20px}.file-card h1{font:700 25px/1.4 var(--disp);margin-bottom:18px}.file-card p{font:13px/1.7 var(--mono);color:#aeb9c8;margin:8px 0}.file-download{display:inline-block;background:#a8f0d0;color:#10251c;text-decoration:none;padding:16px 28px;border-radius:12px;margin-top:24px;font-weight:700}.adm-form input[type=file]{max-width:100%;white-space:normal}.cv-actions [hidden]{display:none}

@media(max-width:760px){.cv-actions:has(#cvCopy[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}}