/* المكتب — Premier virtual office. One stylesheet, no framework. Day and night are the same DOM with different custom properties, so "night" costs one class on and zero re-renders. */ :root{ /* Premier identity, taken from the parent brand material */ --ink:#231F20; --deep:#9C1B31; --red:#F92734; /* office surfaces (DESIGN SPEC §1) */ --floor:#F7F4EF; --floor2:#F1ECE4; --wall:#EFEAE2; --wall2:#E4DDD2; --walnut:#8B6B4A; --walnut-d:#6F5238; --walnut-l:#A98460; /* paper-white surfaces (boards, cards, frames, the clock face). Variables so the office does not keep daylight boards after the lights go out. */ --board:#FBF7F1; --board2:#EFE9DF; --cover:#CFC8BE; --ok:#2E9E6B; --bad:#D64545; --warn:#E8A13C; --text:#231F20; --muted:#6C6560; --line:#DED6CA; --panel:rgba(255,255,255,.86); --panel-solid:#fff; --shadow:0 10px 30px rgba(35,31,32,.13); --lamp:transparent; --sky1:#CFE3F0; --sky2:#EAF2F8; --r:14px; --agent-maestro:#2C3E66; --agent-ahmad:#1F8A8A; --agent-laila:#6B4FA1; --agent-sara:#E4674C; --agent-karim:#2E7D5B; --agent-nour:#D9A02B; --agent-maged:#9A948C; --agent-owner:#231F20; } body.night{ --floor:#1B2338; --floor2:#161D30; --wall:#141B2E; --wall2:#101728; --walnut:#4A3A2C; --walnut-d:#3A2D22; --walnut-l:#5C4938; --text:#EDE7DD; --muted:#9AA3B8; --line:#2A344D; --board:#222B40; --board2:#1C2537; --cover:#2A3247; --panel:rgba(18,24,40,.86); --panel-solid:#121828; --shadow:0 10px 34px rgba(0,0,0,.5); --sky1:#1D2947; --sky2:#131B2F; } body.amber{ --wall:#F3E6CE; --wall2:#E9D9BB; } body.blackout{ --wall:#2A2622; --wall2:#211E1B; --floor:#2E2A26; --floor2:#282420; --text:#E8E2D8; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--floor); color:var(--text); font-family:Cairo,"Segoe UI","Noto Kufi Arabic",system-ui,sans-serif; overflow:hidden; -webkit-font-smoothing:antialiased; transition:background .8s ease,color .8s ease; } button{font-family:inherit;cursor:pointer} [hidden]{display:none !important} /* ── login ─────────────────────────────────────────────────────────── */ /* The first impression. An isometric floor grid behind the card so the login already belongs to the office instead of being a generic password box. */ .gate{position:fixed;inset:0;display:grid;place-items:center;z-index:50; background: repeating-linear-gradient(60deg,rgba(35,31,32,.045) 0 1px,transparent 1px 46px), repeating-linear-gradient(-60deg,rgba(35,31,32,.045) 0 1px,transparent 1px 46px), radial-gradient(1200px 700px at 70% 8%,#fff,#EFEAE2 62%,#E0D8CB)} .gate:before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(680px 420px at 50% 52%,rgba(255,255,255,.92),transparent 70%)} .gate-card{position:relative} .gate-card{width:min(92vw,380px);background:#fff;border-radius:22px;padding:34px 28px 26px; box-shadow:0 30px 70px rgba(35,31,32,.18);text-align:center;border:1px solid #EFE8DE} .gate-mark{display:grid;place-items:center;margin-bottom:10px} .gate h1{margin:.1em 0 .2em;font-size:30px;font-weight:800;letter-spacing:-.5px} .gate-sub{margin:0 0 20px;color:var(--muted);font-size:13.5px;line-height:1.7} .gate input{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px; font-size:16px;font-family:inherit;text-align:center;letter-spacing:2px;background:#FCFAF7} .gate input:focus{outline:none;border-color:var(--red);background:#fff} .gate button{width:100%;margin-top:12px;padding:14px;border:0;border-radius:12px; background:var(--ink);color:#fff;font-size:16px;font-weight:700;transition:transform .12s,background .2s} .gate button:hover{background:var(--deep)} .gate button:active{transform:scale(.985)} .gate-err{margin-top:12px;color:var(--bad);font-size:13.5px;min-height:19px} /* ── chrome ────────────────────────────────────────────────────────── */ #app{height:100%;display:flex;flex-direction:column} #topbar{ display:flex;align-items:center;gap:14px;padding:10px 18px;z-index:20; background:var(--panel);backdrop-filter:blur(14px); border-bottom:1px solid var(--line);flex:0 0 auto; } .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px} .spacer{flex:1} .pill{display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px; background:rgba(46,158,107,.12);color:var(--ok);font-size:12.5px;font-weight:600} .pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor; box-shadow:0 0 0 0 currentColor;animation:beat 2.4s infinite} .pill.down{background:rgba(214,69,69,.12);color:var(--bad)} .pill.down .dot{animation:none} @keyframes beat{0%{box-shadow:0 0 0 0 rgba(46,158,107,.55)}70%{box-shadow:0 0 0 9px rgba(46,158,107,0)}100%{box-shadow:0 0 0 0 rgba(46,158,107,0)}} .clock{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--muted)} .ticker{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)} .ticker b{color:var(--text);font-size:14px;font-variant-numeric:tabular-nums} .ticker .bar{display:block;width:70px;height:6px;border-radius:3px;background:var(--line);overflow:hidden} .ticker .bar u{display:block;height:100%;width:0;background:var(--ok);transition:width .6s ease,background .4s} .tools{display:flex;gap:6px} .tool{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:10px;border:1px solid var(--line); background:transparent;color:var(--text);font-size:12.5px;font-weight:600;transition:.16s} .tool svg{fill:currentColor} .tool:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .tool.on{background:var(--red);color:#fff;border-color:var(--red)} .tool.ghost span{display:none} @media(max-width:900px){.tool span{display:none}.ticker,.clock{display:none}} /* ── stage ─────────────────────────────────────────────────────────── */ #stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden} #office{width:100%;height:100%;display:block} #office .desk-hit{cursor:pointer} #office .desk-hit:hover .deskglow{opacity:.5} .freeze{position:absolute;inset:0;display:grid;place-items:center;z-index:15; background:rgba(20,27,46,.55);backdrop-filter:grayscale(1) blur(1.5px);color:#fff} .freeze p{margin-top:14px;font-weight:700;letter-spacing:.4px} .freeze-clock{width:54px;height:54px;border-radius:50%;border:3px solid rgba(255,255,255,.35); margin:0 auto;position:relative} .freeze-clock i{position:absolute;inset-inline-start:50%;top:8px;width:2.5px;height:20px;background:#fff; transform-origin:50% 100%;animation:spin 1.4s linear infinite;border-radius:2px} @keyframes spin{to{transform:rotate(360deg)}} .daybadge{position:absolute;top:16px;inset-inline-start:50%;transform:translateX(50%); background:var(--deep);color:#fff;padding:8px 18px;border-radius:999px;font-weight:700;font-size:13.5px; box-shadow:var(--shadow);z-index:12;animation:drop .6s cubic-bezier(.2,1.4,.4,1)} @keyframes drop{from{transform:translate(50%,-40px);opacity:0}} /* ── feed ──────────────────────────────────────────────────────────── */ .feed{position:absolute;inset-inline-start:16px;bottom:16px;width:min(30vw,340px);max-height:34vh; background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;z-index:14; transition:max-height .3s ease} .feed.min{max-height:44px;overflow:hidden} .feed-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px; border-bottom:1px solid var(--line);font-weight:700;font-size:13px} .feed-toggle{border:0;background:transparent;font-size:16px;color:var(--muted);line-height:1;padding:0 4px} #feed-list{margin:0;padding:6px 0;list-style:none;overflow-y:auto;flex:1;scrollbar-width:thin} #feed-list li{display:flex;gap:9px;align-items:flex-start;padding:7px 14px;font-size:13px;line-height:1.6; border-inline-start:3px solid transparent;animation:slidein .32s ease} @keyframes slidein{from{opacity:0;transform:translateX(14px)}} #feed-list li .t{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums; padding-top:2px;flex:0 0 auto;opacity:.8} #feed-list li .who{font-weight:700} #feed-list li.k-good{border-inline-start-color:var(--ok)} #feed-list li.k-bad{border-inline-start-color:var(--bad)} #feed-list li.k-warn{border-inline-start-color:var(--warn)} #feed-list li.k-info{border-inline-start-color:var(--line)} #feed-list li.gapline{justify-content:center;color:var(--muted);font-size:11.5px; border-block:1px dashed var(--line);margin:4px 0} .feed-foot{padding:8px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:11px} @media(max-width:760px){.feed{width:calc(100vw - 32px)}} /* ── rooms ─────────────────────────────────────────────────────────── */ .room{position:absolute;inset:0;z-index:30;background:var(--floor); display:flex;flex-direction:column;animation:roomin .34s cubic-bezier(.2,.9,.3,1)} @keyframes roomin{from{opacity:0;transform:scale(1.04)}} .room-head{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line); background:var(--panel);backdrop-filter:blur(10px)} .room-head h2{margin:0;font-size:20px;font-weight:800} .room-back{border:1px solid var(--line);background:transparent;color:var(--text); padding:8px 14px;border-radius:10px;font-weight:700;font-size:13px} .room-back:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .room-who{margin-inline-start:auto;font-size:13px;color:var(--muted);font-weight:600; display:flex;align-items:center;gap:10px} .room-who svg{display:block;border-radius:50%;background:var(--floor2);border:1px solid var(--line)} .room-who b{color:var(--text);font-size:14.5px} .room-body{flex:1;overflow:auto;padding:20px 24px 48px} .room-inner{max-width:1180px;margin:0 auto;width:100%} .room-head .inner{max-width:1180px;margin:0 auto;width:100%;display:flex;align-items:center;gap:14px} .cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .card{background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--r);padding:14px; box-shadow:0 2px 10px rgba(35,31,32,.05)} .card h4{margin:0 0 8px;font-size:14.5px} .card .meta{color:var(--muted);font-size:12px;display:flex;gap:10px;flex-wrap:wrap} .card .body{margin-top:9px;font-size:13.5px;line-height:1.85;white-space:pre-wrap; max-height:180px;overflow:auto} .kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .kpi{background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;padding:11px 16px;min-width:120px} .kpi b{display:block;font-size:24px;font-variant-numeric:tabular-nums;line-height:1.25} .kpi span{color:var(--muted);font-size:12px} .tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700; background:var(--line);color:var(--text)} .tag.ok{background:rgba(46,158,107,.16);color:var(--ok)} .tag.bad{background:rgba(214,69,69,.16);color:var(--bad)} .tag.warn{background:rgba(232,161,60,.18);color:#9a6a12} .tag.ghost{background:transparent;border:1px dashed var(--line);color:var(--muted)} .empty{padding:40px;text-align:center;color:var(--muted);font-size:14px;line-height:2} .btnrow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .btn{border:0;border-radius:10px;padding:9px 15px;font-weight:700;font-size:13px;color:#fff;background:var(--ink)} .btn.good{background:var(--ok)} .btn.bad{background:var(--bad)} .btn.soft{background:var(--muted)} .btn:disabled{opacity:.5} .sect{margin:22px 0 10px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:9px} .sect:before{content:"";width:5px;height:17px;border-radius:3px;background:var(--red)} .tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-solid)} table{width:100%;border-collapse:collapse;font-size:13px} th,td{padding:9px 12px;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap} th{background:var(--floor2);font-weight:700;font-size:12px;color:var(--muted);position:sticky;top:0} tr:last-child td{border-bottom:0} .switch{display:flex;align-items:center;justify-content:space-between;gap:14px; background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:9px} .switch .lbl b{display:block;font-size:14px} .switch .lbl span{color:var(--muted);font-size:12px} .lever{width:58px;height:31px;border-radius:999px;background:var(--line);position:relative; border:0;transition:background .22s;flex:0 0 auto} .lever:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:25px;height:25px;border-radius:50%; background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .22s} .lever.on{background:var(--ok)} .lever.on:after{transform:translateX(-27px)} body[dir] .lever.on:after{transform:translateX(-27px)} .lever.danger.on{background:var(--bad)} .thread{display:flex;flex-direction:column;gap:9px;max-width:760px} .msg{max-width:78%;padding:10px 14px;border-radius:15px;font-size:13.5px;line-height:1.8;white-space:pre-wrap} .msg.in{align-self:flex-start;background:var(--panel-solid);border:1px solid var(--line);border-start-start-radius:5px} .msg.out{align-self:flex-end;background:var(--agent-ahmad);color:#fff;border-start-end-radius:5px} .msg .when{display:block;font-size:10.5px;opacity:.62;margin-top:5px} .chart{width:100%;height:190px;display:block} .chart .ln{fill:none;stroke:var(--agent-nour);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round} .chart .ar{fill:var(--agent-nour);opacity:.13} .chart .gr{stroke:var(--line);stroke-width:1} .chart text{font-size:10px;fill:var(--muted)} /* ── replay bar ────────────────────────────────────────────────────── */ .replaybar{position:absolute;bottom:16px;inset-inline-end:16px;z-index:16;display:flex;align-items:center;gap:12px; background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow);padding:11px 14px;font-size:12.5px} .replaybar label{display:flex;align-items:center;gap:7px;font-weight:600} .replaybar input[type=date]{border:1px solid var(--line);border-radius:9px;padding:6px 9px;font-family:inherit; background:var(--panel-solid);color:var(--text)} .rp-speeds{display:flex;gap:4px} .rp-speeds button{border:1px solid var(--line);background:transparent;color:var(--text); border-radius:8px;padding:5px 9px;font-size:11.5px;font-weight:700} .rp-speeds button.on{background:var(--ink);color:#fff;border-color:var(--ink)} .rp-play{border:0;background:var(--red);color:#fff;border-radius:9px;padding:7px 16px;font-weight:700} .rp-track{width:170px;height:6px;border-radius:3px;background:var(--line);overflow:hidden} .rp-track i{display:block;height:100%;width:0;background:var(--red)} .rp-time{font-variant-numeric:tabular-nums;font-weight:700} .rp-count{color:var(--muted)} .rp-x{border:0;background:transparent;font-size:19px;color:var(--muted);line-height:1;padding:0 2px} #footbar{position:absolute;bottom:6px;inset-inline-end:18px;z-index:11;pointer-events:none} #foot-badge{font-size:11px;color:var(--muted);opacity:.85;letter-spacing:.3px} /* ── scene animation primitives ────────────────────────────────────── */ .flyer{offset-rotate:0deg;animation:fly var(--dur,1000ms) cubic-bezier(.35,.05,.25,1) forwards} @keyframes fly{from{offset-distance:0%;opacity:0} 8%{opacity:1} 92%{opacity:1} to{offset-distance:100%;opacity:0}} .puff{animation:puff .9s ease-out forwards} @keyframes puff{from{opacity:.95;transform:translateY(0) scale(.6)} to{opacity:0;transform:translateY(-46px) scale(1.5)}} .pop{animation:pop 1.1s cubic-bezier(.2,1.5,.4,1) forwards;transform-origin:center} @keyframes pop{0%{opacity:0;transform:scale(.3) translateY(8px)} 22%{opacity:1;transform:scale(1.12) translateY(-6px)} 70%{opacity:1;transform:scale(1) translateY(-10px)} to{opacity:0;transform:scale(.95) translateY(-26px)}} .stamp{animation:stamp .7s cubic-bezier(.3,1.6,.4,1) forwards;transform-origin:center} @keyframes stamp{0%{opacity:0;transform:scale(2.6) rotate(-16deg)} 40%{opacity:1;transform:scale(1) rotate(-8deg)} 70%{transform:scale(1.06) rotate(-8deg)} to{opacity:0;transform:scale(1) rotate(-8deg)}} .shake{animation:shake .5s ease} @keyframes shake{10%,90%{transform:translateX(-1.5px)}20%,80%{transform:translateX(3px)} 30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}} .breathe{animation:breathe 4.2s ease-in-out infinite} @keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}} .typing .arm-r{animation:tap .22s ease-in-out infinite alternate;transform-origin:top center} @keyframes tap{to{transform:rotate(9deg)}} .screenglow{opacity:0;transition:opacity .4s} .working .screenglow{opacity:1;animation:flick 3.5s ease-in-out infinite} @keyframes flick{0%,100%{opacity:.85}50%{opacity:1}} .zzz{animation:zzz 3.4s ease-in-out infinite} @keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.6)} 30%{opacity:.9} 100%{opacity:0;transform:translate(14px,-34px) scale(1.25)}} .thread-red{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900); animation:draw 1s ease forwards} @keyframes draw{to{stroke-dashoffset:0}} .thread-cut{animation:cut .6s ease forwards} @keyframes cut{to{opacity:0;stroke-dashoffset:var(--len,900)}} .ring{animation:ring .55s ease-in-out 3;transform-origin:center} @keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}75%{transform:rotate(13deg)}} .inkin{animation:inkin .8s ease forwards} @keyframes inkin{from{opacity:.15}to{opacity:1}} .lamp-off{opacity:0;transition:opacity 1s} body.night .lamp-off{opacity:1} .cat{animation:catwalk 26s linear infinite} @keyframes catwalk{0%{opacity:0;transform:translateX(0)}4%{opacity:1} 46%{opacity:1}50%{opacity:0;transform:translateX(-520px)}100%{opacity:0;transform:translateX(-520px)}} @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } /* ── additions: thinking, blinking, and the small polish passes ─────── */ .thought{animation:thought 2.4s ease forwards} @keyframes thought{0%{opacity:0;transform:translateY(8px) scale(.86)} 12%{opacity:1;transform:translateY(0) scale(1)} 82%{opacity:1}to{opacity:0;transform:translateY(-8px) scale(.96)}} .tdot{animation:tdot 1.1s ease-in-out infinite} @keyframes tdot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2.5px)}} /* A blink is life, never work (LAW 2). Rare and short so it reads as human. */ .person .eye{animation:blink 6.5s infinite} .desk-laila .person .eye{animation-delay:1.7s} .desk-sara .person .eye{animation-delay:3.1s} .desk-karim .person .eye{animation-delay:4.4s} .desk-nour .person .eye{animation-delay:2.3s} .desk-owner .person .eye{animation-delay:5.2s} @keyframes blink{0%,95.5%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}} .person .eye{transform-box:fill-box;transform-origin:center} .asleep .person .eye{animation:none;transform:scaleY(.12)} .asleep .person .mouth{opacity:.35} .asleep .breathe{animation-duration:6.5s} .pop-in{animation:popin .5s cubic-bezier(.2,1.5,.4,1)} @keyframes popin{from{opacity:0;transform:scale(.6)}} .desk{transition:filter .35s} .desk-hit{cursor:pointer} .desk:hover .desklabel rect{stroke:var(--red)} .desk.blocked .person{filter:grayscale(.45)} .desk.working .minichart{animation:redraw 1.6s ease} @keyframes redraw{from{stroke-dasharray:60;stroke-dashoffset:60}to{stroke-dasharray:60;stroke-dashoffset:0}} /* Night shift: Ahmad keeps his lamp and his thermos, nobody else does. */ body.night .desk-ahmad .nightonly{opacity:1;transition:opacity 1s} body.night .desk-ahmad .deskglow{opacity:.42} body.night .plant{opacity:.6} body.night #cat{opacity:.5} /* Cinema mode: chrome recedes, the office fills the frame. */ body.cinema #feed{max-height:26vh;width:min(46vw,560px);inset-inline-start:50%; transform:translateX(50%);bottom:22px;background:rgba(12,16,26,.72);color:#F3EEE6; border-color:rgba(255,255,255,.12)} body.cinema #feed .feed-head,body.cinema #feed .feed-foot{display:none} body.cinema #feed-list li{font-size:15px;padding:9px 18px} body.cinema #topbar{opacity:.25;transition:opacity .4s} body.cinema #topbar:hover{opacity:1} @media(max-width:760px){ .feed{width:calc(100vw - 32px);max-height:30vh} .replaybar{inset-inline-end:8px;bottom:auto;top:70px;flex-wrap:wrap;max-width:calc(100vw - 16px)} }