/* * Rehan Bot — theme tokens. * * Default light hai (workspace jaisi saaf shakl); dark abhi bhi maujood hai * `` se. Har rang yahin token hai — component CSS me * hardcoded hex nahi, warna doosri theme hamesha kahin na kahin toot-ti hai. */ :root{ --bg:#ffffff; --bg2:#f6f6f4; --bg3:#eeeeeb; --bg4:#e5e5e1; --line:#e4e4e0; --line2:#d3d3cd; --txt:#1a1a18; --muted:#6b6b66; --dim:#93938c; --acc:#1a1a18; --acc2:#3d3d3a; /* primary = kaala, screenshot jaisa */ --tint:#f0efff; /* selected row ka halka rang */ --ok:#16a06a; --warn:#c2820a; --err:#d64550; --info:#2b7fd4; --bub:#1a1a18; --bub-txt:#ffffff; /* user ka message */ --card:#f6f6f4; /* bot ka message */ --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05); --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace; } [data-theme=dark]{ --bg:#08090d; --bg2:#0e1016; --bg3:#151824; --bg4:#1b1f2e; --line:#232838; --line2:#2e3548; --txt:#e9ebf3; --muted:#8b92a9; --dim:#5f6780; --acc:#6d5efc; --acc2:#a855f7; --tint:rgba(109,94,252,.16); --ok:#22c98d; --warn:#f5a524; --err:#f45b69; --info:#3b9eff; --bub:#6d5efc; --bub-txt:#fff; --card:#0e1016; --shadow:0 1px 2px rgba(0,0,0,.4); } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden} button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit} ::-webkit-scrollbar{width:7px;height:7px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--dim)} .hidden{display:none!important} a{color:#9a8cff} #app{display:grid;grid-template-columns:252px 1fr 340px;height:100vh;overflow:hidden} @media(max-width:1200px){#app{grid-template-columns:220px 1fr}.feed{display:none}} @media(max-width:820px){#app{grid-template-columns:1fr}.side{display:none}} /* ============================ sidebar ============================ */ .side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden} .brand{display:flex;gap:10px;align-items:center;padding:16px 14px 12px} .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;font-size:17px;flex:none} .brand b{display:block;font-size:14px;letter-spacing:-.2px} .brand span{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px} .newgoal{margin:0 12px 12px;padding:10px;border-radius:11px;border:none;cursor:pointer;font-weight:600; background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;display:flex;gap:7px;align-items:center;justify-content:center} .newgoal:hover{filter:brightness(1.12)} .nav{padding:0 8px;display:flex;flex-direction:column;gap:2px} .nav button{background:none;border:none;text-align:left;padding:8px 11px;border-radius:9px;cursor:pointer; color:var(--muted);display:flex;gap:9px;align-items:center;font-size:13px;font-weight:500} .nav button:hover{background:var(--bg3);color:var(--txt)} .nav button.on{background:rgba(109,94,252,.16);color:var(--txt)} .nav .badge{margin-left:auto;background:var(--acc);color:#fff;border-radius:20px;padding:0 6px;font-size:10px;font-weight:700} .nav .badge.warn{background:var(--warn);color:#2a1c00} .side h4{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;margin:16px 14px 7px;font-weight:600} /* ------------------ chat history list (ChatGPT jaisi) ------------------ */ .convs{max-height:38vh;overflow-y:auto;padding:0 8px 6px;display:flex;flex-direction:column;gap:2px} .conv{padding:7px 10px;border-radius:9px;cursor:pointer;display:flex;gap:8px;align-items:center; border:1px solid transparent;position:relative} .conv:hover{background:var(--bg3)} .conv.on{background:rgba(109,94,252,.16);border-color:rgba(109,94,252,.35)} .conv .ce{font-size:13px;flex:none} .conv .cb{min-width:0;flex:1} .conv .ct{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .conv .cm{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .conv .cx{opacity:0;background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;padding:0 2px;flex:none} .conv:hover .cx{opacity:1} .conv .cx:hover{color:var(--err)} .workforce{flex:1;overflow-y:auto;padding:0 8px 10px;display:flex;flex-direction:column;gap:3px;min-height:80px} .emp{padding:8px 10px;border-radius:9px;cursor:pointer;display:flex;gap:9px;align-items:center;border:1px solid transparent} .emp:hover{background:var(--bg3)} .emp .av{width:26px;height:26px;border-radius:8px;background:var(--bg4);display:grid;place-items:center;font-size:13px;flex:none} .emp .nm{font-size:12.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .emp .rl{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .emp .body{min-width:0;flex:1} .dot{width:7px;height:7px;border-radius:50%;flex:none} .dot.working{background:var(--info);box-shadow:0 0 0 3px rgba(59,158,255,.18);animation:pulse 1.4s infinite} .dot.idle{background:var(--dim)} .dot.completed{background:var(--ok)} .dot.failed{background:var(--err)} .dot.needs_approval{background:var(--warn)} .dot.paused,.dot.waiting{background:var(--muted)} @keyframes pulse{50%{opacity:.35}} .side-foot{border-top:1px solid var(--line);padding:9px 12px;display:flex;gap:6px;align-items:center;font-size:11px;color:var(--dim)} .side-foot a{color:var(--dim);text-decoration:none} .side-foot a:hover{color:var(--txt)} /* ============================== main ============================= */ .main{display:flex;flex-direction:column;overflow:hidden;min-width:0} .top{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);min-height:58px} .top h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .top .sub{font-size:11.5px;color:var(--dim)} .top .spacer{flex:1} .view{flex:1;overflow-y:auto;min-height:0} .pad{padding:22px 24px;max-width:900px;margin:0 auto} .btn{background:var(--bg3);border:1px solid var(--line);border-radius:9px;padding:7px 13px;cursor:pointer; font-size:12.5px;font-weight:550;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;transition:.14s} .btn:hover{border-color:var(--line2);background:var(--bg4)} .btn.primary{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:#fff} .btn.primary:hover{filter:brightness(1.12)} .btn.ghost{background:transparent} .btn.sm{padding:4px 9px;font-size:11.5px} .btn.danger:hover{border-color:var(--err);color:var(--err)} .btn:disabled{opacity:.45;cursor:not-allowed} .input{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;width:100%;outline:none} .input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(109,94,252,.13)} label.f{display:block;font-size:11.5px;color:var(--muted);margin:0 0 5px;font-weight:550} .field{margin-bottom:13px} /* --------------------------- coordinator -------------------------- */ .hero{text-align:center;padding:56px 24px 30px;max-width:680px;margin:0 auto} .hero .big{width:64px;height:64px;margin:0 auto 16px;border-radius:19px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:grid;place-items:center;font-size:31px} .hero h1{font-size:27px;margin:0 0 8px;letter-spacing:-.6px} .hero p{color:var(--muted);margin:0 0 26px;font-size:14.5px} .examples{display:grid;gap:8px;text-align:left} .ex{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;font-size:13px;color:var(--muted);transition:.14s} .ex:hover{border-color:var(--acc);color:var(--txt);transform:translateY(-1px)} .chat{padding:20px 24px;display:flex;flex-direction:column;gap:16px;max-width:860px;margin:0 auto;width:100%} .msg{display:flex;gap:11px} .msg .av{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex:none} .msg.you .av{background:var(--bg4)} .msg.bot .av{background:linear-gradient(135deg,var(--acc),var(--acc2))} .msg .body{min-width:0;flex:1;padding-top:3px} .typing{display:inline-block;width:7px;height:15px;background:var(--acc);vertical-align:text-bottom;animation:blink 1s steps(2) infinite} @keyframes blink{50%{opacity:0}} .composer{border-top:1px solid var(--line);padding:14px 24px 16px;background:var(--bg)} .cbox{max-width:860px;margin:0 auto;background:var(--bg2);border:1px solid var(--line);border-radius:14px; padding:10px 10px 10px 14px;display:flex;gap:9px;align-items:flex-end} .cbox:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(109,94,252,.11)} .cbox textarea{background:none;border:none;outline:none;resize:none;flex:1;max-height:180px;padding:5px 0} .send{width:34px;height:34px;border-radius:10px;border:none;cursor:pointer;flex:none;font-size:16px; background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff} .send:disabled{opacity:.4;cursor:not-allowed} .chint{max-width:860px;margin:7px auto 0;font-size:11px;color:var(--dim);display:flex;gap:10px} /* ------------------------- mode selector ------------------------- */ .modes{max-width:860px;margin:0 auto 9px;display:flex;gap:6px;flex-wrap:wrap} .mode{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:5px 12px; font-size:12px;cursor:pointer;color:var(--muted);transition:.14s;white-space:nowrap} .mode:hover{border-color:var(--line2);color:var(--txt)} .mode.on{background:rgba(109,94,252,.18);border-color:var(--acc);color:var(--txt);font-weight:550} /* --------------------- thoughts / steps / sources ---------------- */ .thoughts{border:1px solid var(--line);border-radius:11px;margin:0 0 11px;overflow:hidden;background:var(--bg2)} .thoughts summary{cursor:pointer;padding:8px 12px;font-size:12px;color:var(--muted);user-select:none;list-style:none} .thoughts summary::-webkit-details-marker{display:none} .thoughts summary:hover{color:var(--txt)} .thoughts .inner{padding:0 12px 11px;font-size:12px;color:var(--muted);white-space:pre-wrap; max-height:280px;overflow-y:auto;font-family:var(--mono);line-height:1.6;border-top:1px solid var(--line);padding-top:10px} .steps{display:flex;flex-direction:column;gap:3px;margin:0 0 11px} .step{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:baseline;padding:3px 10px; border-left:2px solid var(--line);background:var(--bg2);border-radius:0 7px 7px 0} .step.active{border-left-color:var(--acc);color:var(--txt)} .step .k{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;min-width:58px} .sources{margin-top:14px;border-top:1px solid var(--line);padding-top:11px} .sources h5{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin:0 0 8px;font-weight:600} .src{display:flex;gap:9px;align-items:baseline;padding:5px 0;font-size:12.5px} .src .n{color:var(--acc);font-weight:700;font-size:11px;min-width:20px} .src a{color:var(--txt);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .src a:hover{color:#9a8cff;text-decoration:underline} .src .host{color:var(--dim);font-size:11px;margin-left:auto;white-space:nowrap} /* ---------------------- inline artifact preview ------------------- */ .artifact{border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:12px 0;background:var(--bg2)} .artifact .ah{display:flex;gap:9px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)} .artifact .ah .ic{font-size:15px} .artifact .ah .t{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .artifact .ah .m{font-size:11px;color:var(--dim);white-space:nowrap} .artifact .ah .sp{flex:1} .artifact .frame{position:relative;background:#fff;height:420px;resize:vertical;overflow:hidden} .artifact iframe{width:100%;height:100%;border:0;display:block;background:#fff} .artifact .bar{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--line);align-items:center} .artifact .dev{display:flex;gap:4px;margin-left:auto} .artifact .dev button{background:var(--bg3);border:1px solid var(--line);border-radius:7px; padding:3px 9px;font-size:11px;cursor:pointer;color:var(--muted)} .artifact .dev button.on{border-color:var(--acc);color:var(--txt)} .artifact .frame.mobile iframe{width:390px;margin:0 auto;box-shadow:0 0 0 1px var(--line)} .artifact .frame.tablet iframe{width:768px;margin:0 auto;box-shadow:0 0 0 1px var(--line)} /* -------------------------- employee chat ------------------------ */ .emp-tabs{display:flex;gap:3px;padding:0 24px;border-bottom:1px solid var(--line);margin-bottom:0} .emp-tabs button{background:none;border:none;padding:9px 14px;cursor:pointer;color:var(--muted); border-bottom:2px solid transparent;font-size:13px;font-weight:550} .emp-tabs button:hover{color:var(--txt)} .emp-tabs button.on{color:var(--txt);border-bottom-color:var(--acc)} .chat-badge{background:var(--bg3);border-radius:20px;padding:0 6px;font-size:10px;margin-left:5px} .followups{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px} .fu{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:6px 13px; font-size:12px;cursor:pointer;color:var(--muted);transition:.14s} .fu:hover{border-color:var(--acc);color:var(--txt)} /* ------------------------- project / tasks ------------------------ */ .card{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:12px} .card h3{margin:0 0 4px;font-size:14.5px} .card .meta{font-size:11.5px;color:var(--dim)} .tree{font-family:var(--mono);font-size:12.5px;line-height:2} .tree .row{display:flex;gap:9px;align-items:center;padding:3px 8px;border-radius:7px;cursor:pointer} .tree .row:hover{background:var(--bg3)} .tree .pipe{color:var(--dim)} .tree .nm{color:var(--txt)} .tree .st{margin-left:auto;font-size:11px;padding:1px 8px;border-radius:20px;border:1px solid var(--line)} .st.done{color:var(--ok);border-color:rgba(34,201,141,.35)} .st.running{color:var(--info);border-color:rgba(59,158,255,.35)} .st.pending{color:var(--muted)} .st.failed{color:var(--err);border-color:rgba(244,91,105,.35)} .st.waiting_approval{color:var(--warn);border-color:rgba(245,165,36,.4)} .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;margin-bottom:16px} .stat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px} .stat .v{font-size:22px;font-weight:700;letter-spacing:-.5px} .stat .l{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin-top:2px} /* ------------------------- connections --------------------------- */ .cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px} .cat{background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--muted)} .cat:hover,.cat.on{border-color:var(--acc);color:var(--txt)} .conns{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px} .conn{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:9px} .conn .hd{display:flex;gap:10px;align-items:center} .conn .ic{width:34px;height:34px;border-radius:10px;background:var(--bg4);display:grid;place-items:center;font-size:17px;flex:none} .conn .nm{font-weight:600;font-size:13.5px} .conn .ct{font-size:11px;color:var(--dim)} .conn .status{font-size:11px;padding:1px 8px;border-radius:20px;border:1px solid var(--line);color:var(--muted);width:fit-content} .conn .status.connected{color:var(--ok);border-color:rgba(34,201,141,.35)} .conn .status.error{color:var(--err);border-color:rgba(244,91,105,.35)} /* ---------------------------- feed ------------------------------ */ .feed{background:var(--bg2);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden} .feed .fh{padding:14px 16px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px} .feed .fh b{font-size:12.5px} .live{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 1.6s infinite} .events{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:2px} .ev{padding:6px 9px;border-radius:8px;font-size:12px;display:flex;gap:8px;align-items:flex-start;border-left:2px solid transparent} .ev:hover{background:var(--bg3)} .ev .who{color:var(--muted);font-weight:600;font-size:11px;white-space:nowrap} .ev .tx{color:var(--txt);min-width:0;word-break:break-word} .ev .tm{margin-left:auto;color:var(--dim);font-size:10px;white-space:nowrap} .ev.tool{border-left-color:var(--info)} .ev.done{border-left-color:var(--ok)} .ev.fail{border-left-color:var(--err)} .ev.hire{border-left-color:var(--acc2)} .ev.approve{border-left-color:var(--warn);background:rgba(245,165,36,.07)} .ev .ic{font-size:12px} .approvals{border-top:1px solid var(--line);padding:11px 12px;max-height:44%;overflow-y:auto} .ap{background:rgba(245,165,36,.08);border:1px solid rgba(245,165,36,.32);border-radius:11px;padding:11px;margin-bottom:8px} .ap .t{font-size:12px;font-weight:600;color:var(--warn);margin-bottom:3px} .ap .d{font-size:11.5px;color:var(--muted);word-break:break-word;margin-bottom:9px} .ap .btns{display:flex;gap:6px} /* ---------------------------- markdown --------------------------- */ .md{font-size:14px;line-height:1.72;word-wrap:break-word} .md h1{font-size:20px;margin:18px 0 9px} .md h2{font-size:17px;margin:20px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)} .md h3{font-size:14.5px;margin:15px 0 6px;color:#c9cfe6} .md p{margin:8px 0} .md ul,.md ol{margin:8px 0;padding-left:21px} .md li{margin:3px 0} .md strong{color:#fff;font-weight:650} .md code{background:var(--bg3);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:12px;color:#c9b9ff} .md pre{background:#05060a;border:1px solid var(--line);border-radius:10px;padding:13px;overflow-x:auto;margin:11px 0} .md pre code{background:none;padding:0;color:#c8d0e8} .md table{border-collapse:collapse;width:100%;margin:11px 0;font-size:12.5px;display:block;overflow-x:auto} .md th,.md td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top} .md th{background:var(--bg3)} .md blockquote{border-left:3px solid var(--acc);padding-left:12px;margin:11px 0;color:var(--muted)} /* ----------------------------- modal ----------------------------- */ .mbg{position:fixed;inset:0;background:rgba(3,4,8,.78);backdrop-filter:blur(5px);display:grid;place-items:center;z-index:60;padding:20px} .modal{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:24px;width:100%;max-width:520px;max-height:86vh;overflow-y:auto} .modal h3{margin:0 0 3px;font-size:17px} .modal .sub{color:var(--muted);font-size:12.5px;margin-bottom:16px} .mact{display:flex;gap:8px;justify-content:flex-end;margin-top:18px} .toasts{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:99} .toast{background:var(--bg3);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:10px; padding:10px 15px;font-size:12.5px;max-width:360px;box-shadow:0 10px 30px rgba(0,0,0,.5)} .toast.err{border-left-color:var(--err)} .toast.ok{border-left-color:var(--ok)} .toast.warn{border-left-color:var(--warn)} .empty{text-align:center;color:var(--dim);padding:52px 20px;font-size:13px} .artifact .deploy-log{padding:8px 12px;border-top:1px solid var(--line);font-size:12px; color:var(--muted);word-break:break-all} .artifact .deploy-log a{color:var(--ok)} .artifact.live .live-url{padding:12px;font-size:13.5px;word-break:break-all} .artifact.live .live-url a{color:var(--ok);font-weight:600} .thr-div{font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--dim);padding:12px 14px 5px} .gmembers{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .gmembers .chip{display:inline-flex;align-items:center;gap:5px;cursor:pointer} .gmembers .chip:hover{border-color:var(--acc)} .artifact.img .imgwrap{background:var(--bg3);text-align:center} .artifact.img img{max-width:100%;max-height:460px;display:block;margin:0 auto} /* Agent ne chat me sawal poochha — choices ke chip (click = jawab) */ .askchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .askchip{background:var(--acc);color:#fff;border:0;border-radius:16px;padding:7px 15px; font-size:13px;font-weight:600;cursor:pointer} .askchip:hover{opacity:.9} /* ================================================================== WORKSPACE SHELL — sidebar threads, chat bubbles, right panel. Layout: [threads 340] [chat 1fr] [panel 400] ================================================================== */ #app{grid-template-columns:340px 1fr 400px} @media(max-width:1360px){#app{grid-template-columns:300px 1fr 330px}} @media(max-width:1150px){#app{grid-template-columns:290px 1fr}.right{display:none}} @media(max-width:820px){#app{grid-template-columns:1fr}.side{display:none}} .side{background:var(--bg2);border-right:1px solid var(--line)} /* ------------------------------ sidebar top ----------------------------- */ .side-top{display:flex;align-items:center;gap:9px;padding:14px 14px 8px} .side-top .mark{width:26px;height:26px;border-radius:8px;background:var(--txt);color:var(--bg); display:grid;place-items:center;font-size:13px;flex:none} .side-top b{font-size:14.5px;letter-spacing:-.2px} .iconbtn{width:32px;height:32px;border-radius:9px;border:none;background:none;cursor:pointer; color:var(--muted);display:grid;place-items:center;font-size:17px;flex:none;transition:.13s} .iconbtn:hover{background:var(--bg3);color:var(--txt)} .iconbtn.on{background:var(--bg4);color:var(--txt)} .search{margin:2px 12px 10px;position:relative} .search input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:11px; padding:9px 11px 9px 32px;outline:none;font-size:13px} .search input:focus{border-color:var(--line2)} .search .mg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:13px;pointer-events:none} /* ------------------------- thread list (agents) ------------------------- */ .threads{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 8px 8px;display:flex;flex-direction:column;gap:1px;min-height:0} .thread{display:flex;gap:11px;align-items:flex-start;padding:10px;border-radius:12px;cursor:pointer;position:relative} .thread:hover{background:var(--bg3)} .thread.on{background:var(--bg4)} .thread .tb{min-width:0;flex:1;display:block;overflow:hidden} .thread .trow{display:flex;align-items:baseline;gap:8px} .thread .tname{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0} .thread .ttime{font-size:11px;color:var(--dim);flex:none} .thread .tprev{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .thread.unread .tname{font-weight:700} .thread.unread .tprev{color:var(--txt);font-weight:500} .thread .tx{position:absolute;right:6px;top:8px;opacity:0;background:var(--bg);border:1px solid var(--line); border-radius:7px;color:var(--dim);cursor:pointer;font-size:11px;width:20px;height:20px;line-height:1;padding:0} .thread:hover .tx{opacity:1} .thread .tx:hover{color:var(--err);border-color:var(--err)} .pill-n{background:var(--info);color:#fff;border-radius:20px;min-width:18px;height:18px;padding:0 5px; font-size:10.5px;font-weight:700;display:grid;place-items:center;flex:none} /* Har agent ka apna rang — id se banta hai, is liye hamesha wahi rehta hai */ .blob{width:34px;height:34px;flex:none;display:grid;place-items:center;font-size:15px;color:#fff; border-radius:44% 56% 52% 48%/50% 46% 54% 50%;box-shadow:inset 0 -6px 12px rgba(0,0,0,.13)} .blob.sm{width:26px;height:26px;font-size:12px} .blob.lg{width:44px;height:44px;font-size:19px} .side-foot2{border-top:1px solid var(--line);padding:6px 8px 8px;display:flex;flex-direction:column;gap:1px} .srow{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:11px;cursor:pointer;font-size:13px;font-weight:500} .srow:hover{background:var(--bg3)} .srow .ic{width:22px;text-align:center;font-size:15px;flex:none} .srow .me{width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;display:grid; place-items:center;font-size:10.5px;font-weight:700;flex:none} .srow small{color:var(--dim);margin-left:auto;font-size:11px} /* --------------------------- views drawer --------------------------- */ .drawer{padding:0 8px 8px;display:flex;flex-direction:column;gap:1px;border-bottom:1px solid var(--line);margin-bottom:8px} /* ------------------------------- chat -------------------------------- */ .main{background:var(--bg);position:relative} .top{padding:12px 18px;min-height:56px} .top .who{display:flex;align-items:center;gap:10px;min-width:0} .top h2{font-size:14.5px;font-weight:650} .chat{gap:20px;padding:22px 24px 8px;max-width:820px} .msg{display:block} .msg .body{padding:0} .msg.you{display:flex;justify-content:flex-end} .msg.you .body{background:var(--bub);color:var(--bub-txt);border-radius:18px;padding:11px 16px; max-width:min(560px,84%);font-size:14px;flex:none} .msg.you .body a{color:#cfe3ff} .msg.bot .body{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 17px;font-size:14.2px} /* doosre agent ka message — screenshot ka "Message from CEO" */ .msg.agent .body{background:var(--bg);border:1px solid var(--line2);border-left:3px solid var(--info); border-radius:12px;padding:12px 15px;font-size:13.8px} .msg .from{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted); font-weight:600;margin-bottom:7px} /* "Messaged -> P2PI Sales" wala divider */ .handoff{display:flex;align-items:center;gap:8px;justify-content:center;color:var(--dim);font-size:12px;margin:2px 0} .handoff b{color:var(--muted);font-weight:600} .fab{position:absolute;left:50%;transform:translateX(-50%);bottom:128px;width:34px;height:34px;border-radius:50%; background:var(--bg);border:1px solid var(--line2);box-shadow:var(--shadow);cursor:pointer; display:grid;place-items:center;font-size:15px;color:var(--muted);z-index:5;transition:.15s} .fab:hover{color:var(--txt);transform:translateX(-50%) translateY(-1px)} /* ----------------------------- composer ------------------------------ */ .composer{border-top:none;padding:8px 24px 18px} .cbox{border-radius:26px;border:1px solid var(--line2);background:var(--bg);box-shadow:var(--shadow); display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 8px;max-width:820px} .cbox:focus-within{border-color:var(--dim)} .cbox textarea{background:none;border:none;outline:none;resize:none;flex:1;padding:9px 4px; max-height:180px;font-size:14.5px;line-height:1.5} .cbox .round{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--bg2); cursor:pointer;display:grid;place-items:center;font-size:16px;color:var(--muted);flex:none;transition:.13s} .cbox .round:hover{background:var(--bg3);color:var(--txt)} .cbox .round.dark{background:var(--acc);color:#fff;border-color:var(--acc)} .cbox .round.dark:hover{filter:brightness(1.25)} .cbox .round.rec{background:var(--err);border-color:var(--err);color:#fff;animation:pulse 1.2s infinite} .modes{max-width:820px;margin:0 auto 8px} .chint{max-width:820px} /* --------------------------- right panel ----------------------------- */ .right{background:var(--bg2);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden} .right-top{display:flex;align-items:center;gap:2px;padding:10px 10px 6px} .right-top .sp{flex:1} .right-body{flex:1;overflow-y:auto;padding:6px 16px 18px;display:flex;flex-direction:column;gap:18px} .screencard{display:flex;flex-direction:column;gap:8px;align-items:center} .screencard .frame{width:100%;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--bg); box-shadow:var(--shadow);aspect-ratio:16/10;display:grid;place-items:center} .screencard .frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block} .screencard .cap{font-size:12.5px;color:var(--muted);text-align:center} .screencard .cap b{color:var(--txt);font-weight:600} .screencard .empty{color:var(--dim);font-size:12px;text-align:center;padding:0 18px;line-height:1.5} .rt-head{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;font-weight:650} .rt-blurb{font-size:13px;color:var(--muted);text-align:center;line-height:1.55;padding:0 6px} .rt-mid{display:flex;flex-direction:column;gap:12px;align-items:center;padding:10px 0} .btn.pill{border-radius:22px;padding:9px 20px;font-size:13px;font-weight:600;background:var(--bg);border:1px solid var(--line2)} .btn.pill:hover{background:var(--bg3)} .routine{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:flex;gap:10px;align-items:flex-start} .routine .rb{flex:1;min-width:0} .routine .rn{font-size:13px;font-weight:600;letter-spacing:-.1px} .routine .rs{font-size:11.5px;color:var(--muted);margin-top:2px} .routine .rl{font-size:11px;color:var(--dim);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .routine .acts{display:flex;gap:3px;flex:none} .routine .acts button{background:none;border:none;cursor:pointer;color:var(--dim);font-size:13px;padding:2px 4px;border-radius:6px} .routine .acts button:hover{background:var(--bg3);color:var(--txt)} .routine.off{opacity:.55} /* --------------------------- marketplace ----------------------------- */ .mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:11px;margin-top:6px} .mkcard{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--bg);display:flex; flex-direction:column;gap:8px;transition:.14s} .mkcard:hover{border-color:var(--line2);box-shadow:var(--shadow)} .mkcard .h{display:flex;gap:10px;align-items:center} .mkcard .nm{font-size:13.5px;font-weight:650} .mkcard .tg{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:650} .mkcard .bl{font-size:12.3px;color:var(--muted);line-height:1.5;flex:1} .mkcard .done{font-size:12px;color:var(--ok);font-weight:600;text-align:center;padding:7px} /* --------------------- Virtual Computer (per agent) ------------------- */ .vc-bar{display:flex;gap:6px;align-items:center;width:100%} .vc-bar input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg); border-radius:9px;padding:7px 10px;outline:none;font-size:12.5px} .vc-bar input:focus{border-color:var(--line2)} .vc-acts{display:flex;gap:6px;flex-wrap:wrap;width:100%} .vc-note{font-size:11.5px;color:var(--dim);line-height:1.5} .screencard .chip{font-size:10.5px;padding:1px 7px;border-radius:20px;background:var(--bg3);color:var(--muted)} .screencard .chip.ok{background:rgba(34,201,141,.15);color:var(--ok)} .btn.danger.ghost:hover{border-color:var(--err);color:var(--err)} /* ------------------- Poori machine — app ke andar -------------------- */ /* * VM pehle alag window me khulti thi; do apps ka gumaan hota tha. Ab wahi * page isi window ke upar ek parde me aata hai. */ .vm-host { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; background: #0b0b0f; } .vm-host.open { display: flex; } .vm-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #121218; border-bottom: 1px solid #22222c; color: #e8e8ee; font-size: 13px; } .vm-name { font-weight: 600; } .vm-hint { color: #8a8a96; font-size: 12px; margin-right: auto; } .vm-body { flex: 1; position: relative; } .vm-body webview { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---- Desktop (Webtop): boot ke dauran sirf Rehan Bot ka logo ---- */ .vm-boot { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #0e0f14; color: #e8e8ee; text-align: center; padding: 24px; } .vm-boot .logo { width: 88px; height: 88px; animation: vmPulse 2.4s ease-in-out infinite; } .vm-boot .msg { font-size: 15px; color: #c9c9d4; min-height: 1.4em; } .vm-boot .sub { font-size: 12px; color: #8a8a96; max-width: 420px; } .vm-boot .bar { width: 220px; height: 3px; border-radius: 3px; background: #23242d; overflow: hidden; } .vm-boot .bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6d5dfc, #22c1c3); animation: vmSlide 1.3s ease-in-out infinite; } .vm-boot.err .bar { display: none; } .vm-boot.err .msg { color: #ff8a8a; } @keyframes vmPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } } @keyframes vmSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } /* Webview tab tak chhupa jab tak desktop tayyar na ho — boot ki screen nazar na aaye */ .vm-body webview.vm-wait { visibility: hidden; } /* Pehli dafa: server ka SSH */ .vm-setup { display: grid; gap: 8px; width: min(340px, 100%); text-align: left; } .vm-setup label { font-size: 12px; color: #8a8a96; } .vm-setup input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #2c2d38; background: #16171f; color: #e8e8ee; font: inherit; } .vm-setup .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } /* ---- Right panel: agent ka live desktop + Virtual Computer card ---- */ .desk{width:100%;display:flex;flex-direction:column;gap:9px} .desk-head{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);user-select:none;cursor:default} .desk-head b{color:var(--txt);font-weight:600} .desk-head .sp,.vmrow .sp{flex:1} .desk-dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none} .desk-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(34,201,141,.18)} .desk-dot.boot{background:#e9b949;animation:vmPulse 1.6s ease-in-out infinite} .desk-dot.err{background:#ff6b6b} .desk-screen{position:relative;width:100%;aspect-ratio:16/10;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#0e0f14} .desk-screen webview{position:absolute;inset:0;width:100%;height:100%} .desk-screen webview.vm-wait{visibility:hidden} .desk-screen .vm-boot{padding:10px;gap:8px} .desk-screen:not(.expanded) .vm-boot .logo{width:40px;height:40px} .desk-screen:not(.expanded) .vm-boot .msg{font-size:12px} .desk-screen:not(.expanded) .vm-boot .sub{font-size:10.5px} .desk-screen:not(.expanded) .vm-boot .bar{width:110px} /* Parda: sirf jab screen jur chuki ho; chalate waqt ya badi screen par nahi */ .desk-shield{position:absolute;inset:0;z-index:3;cursor:pointer;display:none;align-items:flex-end;justify-content:center;padding:8px} .desk-screen.has-wv .desk-shield{display:flex} .desk-screen.live .desk-shield,.desk-screen.expanded .desk-shield{display:none} .desk-shield span{opacity:0;transition:opacity .15s;font-size:11px;background:rgba(0,0,0,.7);color:#fff;padding:3px 9px;border-radius:20px} .desk-shield:hover span{opacity:1} .desk-screen.live{outline:2px solid var(--ok);outline-offset:-2px} /* Badi screen: wahi element, poori window par (webview dobara load nahi hota) */ .desk-xbar{display:none} .desk-screen.expanded{position:fixed;inset:0;z-index:250;border:0;border-radius:0;aspect-ratio:auto;outline:0} .desk-screen.expanded .desk-xbar{display:flex;position:absolute;top:0;left:0;right:0;height:44px;align-items:center;gap:10px; padding:0 12px;background:#121218;border-bottom:1px solid #22222c;color:#e8e8ee;font-size:13px;z-index:4} .desk-screen.expanded .desk-xbar .vm-hint{margin-right:auto} .desk-screen.expanded webview{top:44px;height:auto;bottom:0} .desk-screen.expanded .vm-boot{top:44px} .vmcard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;background:var(--bg)} .vmcard-h{font-size:10.5px;letter-spacing:.07em;color:var(--dim);font-weight:650} .vmrow{display:flex;align-items:center;gap:7px;font-size:13px} .vmcard .chip{font-size:10.5px;padding:1px 8px;border-radius:20px;background:var(--bg3);color:var(--muted)} .vmcard .chip.ok{background:rgba(34,201,141,.15);color:var(--ok)} .vmspec{font-size:11.5px;color:var(--muted);line-height:1.45} .vmacts{display:flex;gap:6px} .vmacts .btn{flex:1} .vmacts .btn:disabled{opacity:.45;cursor:default} .vmwipe{align-self:flex-start;font-size:11px;padding-left:0} /* ================= Seedha layout (Agenth jaisa) ================= */ /* ⋯ menu — kam istemaal hone wali cheezein */ .menu{margin:0 10px 10px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg); box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px} .menu-h{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;padding:8px 10px 3px;font-weight:600} .menu .srow{padding:7px 10px;font-size:13px} .menu-foot{font-size:11px;color:var(--dim);padding:8px 10px 4px;border-top:1px solid var(--line);margin-top:4px} /* Sidebar ke neeche Virtual Computer card */ .vmslot{padding:10px 10px 12px;border-top:1px solid var(--line)} .vmslot:empty{display:none} /* Jawab ka tareeqa — ek chhota chunav */ .chint{align-items:center} .modepick{position:relative} .modebtn{background:none;border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:11.5px;color:var(--muted);cursor:pointer} .modebtn:hover{color:var(--txt);border-color:var(--line2)} .modepick .modes{position:absolute;bottom:calc(100% + 6px);left:0;z-index:40;margin:0;display:flex;flex-direction:column; gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--shadow);min-width:270px;max-width:none} .modepick .mode{border:none;border-radius:8px;text-align:left;padding:7px 10px;background:none;font-size:12.5px;color:var(--txt)} .modepick .mode:hover{background:var(--bg3)} .modepick .mode small{display:block;color:var(--dim);font-size:11px;font-weight:400} .modepick .mode.on{background:var(--tint)} .modes-foot{font-size:10.5px;color:var(--dim);padding:6px 10px 2px;border-top:1px solid var(--line);margin-top:3px} /* Chat header: status, screen, ⋯ */ #topActions{display:flex;align-items:center;gap:8px} .top .sub a{color:var(--info);text-decoration:none} .top .sub a:hover{text-decoration:underline} .st-chip{font-size:11px;padding:2px 9px;border-radius:20px;background:var(--bg3);color:var(--muted);white-space:nowrap} .st-chip.on{background:rgba(34,201,141,.15);color:var(--ok)} .hmenu{position:relative} .hmenu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:var(--bg);border:1px solid var(--line); border-radius:12px;padding:6px;box-shadow:var(--shadow);min-width:230px;display:flex;flex-direction:column} .hmenu-list button{background:none;border:none;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--txt)} .hmenu-list button:hover{background:var(--bg3)} .hmenu-list button.danger{color:var(--err)} .vc-line{max-width:860px;margin:10px auto 0;padding:0 24px;font-size:12px;color:var(--ok);width:100%} /* Right panel: sirf screen; activity/routines ke apne pane */ .right .right-body{padding-top:14px} .pane-h{display:flex;align-items:center;gap:8px;font-size:13px} .pane-h .sp{flex:1} /* Agent ke qadam — seedhi halki lines */ .steps{gap:2px} .step{border-left:none;padding:1px 0;font-size:12.5px;color:var(--muted);background:none} .step.active{color:var(--txt)} .step.fail{color:var(--err)} /* Agent ki chat: likhne ki jagah hamesha neeche (khali chat me bhi), Agenth jaisa */ .view:has(> #empBody){display:flex;flex-direction:column} #empBody{flex:1;display:flex;flex-direction:column;min-height:0} #empBody > #empChat{flex:1} /* Right panel ke upar faltu line nahi; ijazat card screen se thora alag */ #rightScreen .approvals{border-top:none;margin-top:0;padding-top:0} #rightScreen .approvals:not(.hidden){margin-bottom:6px} /* ⋯ menu list ke upar tairta hai — neeche chats ko dhakka nahi deta */ .side{position:relative} .side .menu{position:absolute;top:52px;left:10px;right:10px;z-index:60;margin:0;max-height:calc(100% - 64px);overflow-y:auto} /* ---- Agents list: CEO, kaam kar raha, purani chats ---- */ .ceo-badge{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:20px;background:rgba(233,185,73,.18);color:#b07d00;margin-left:4px;vertical-align:1px} .twork{color:var(--ok)} .st-chip.ceo{background:rgba(233,185,73,.18);color:#b07d00} .hist{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow-y:auto;margin-top:8px} .hrow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;position:relative} .hrow:hover{background:var(--bg3)} .hrow .hb{min-width:0;flex:1} .hrow .ht{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hrow .hp{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hrow .ttime{font-size:11px;color:var(--dim);flex:none} .hrow .tx{background:none;border:1px solid var(--line);border-radius:7px;cursor:pointer;opacity:.5;padding:1px 7px} .hrow:hover .tx{opacity:1} .hrow .tx:hover{color:var(--err);border-color:var(--err)}