@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--brand:#4f56e9;--brand2:#2d6cf3;--brand-dark:#3338b7;--ink:#151827;--muted:#6f7588;--line:#e7e9f1;--soft:#f6f7fb;--surface:#fff;--success:#18a46d;--danger:#d8485f;--shadow:0 24px 70px rgba(39,45,80,.12)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Manrope,"IBM Plex Sans Arabic",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff}html[lang="ar"],html[dir="rtl"],.arabic{font-family:"IBM Plex Sans Arabic",sans-serif}button,input,textarea{font:inherit}a,button{-webkit-tap-highlight-color:transparent}.hidden{display:none!important}
/* Authentication */
.auth-page{min-height:100vh;background:#fff}.auth-layout{min-height:100vh;display:grid;grid-template-columns:minmax(430px,1.03fr) minmax(440px,.97fr)}.auth-showcase{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:42px clamp(38px,5vw,82px);background:linear-gradient(145deg,#f5f6ff 0%,#eef5ff 52%,#f8fbff 100%);border-right:1px solid #eceef5}.auth-showcase:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;left:-260px;top:-210px;background:radial-gradient(circle,rgba(79,86,233,.18),rgba(79,86,233,0) 69%)}.auth-showcase:after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;right:-220px;bottom:-240px;background:radial-gradient(circle,rgba(45,108,243,.14),rgba(45,108,243,0) 70%)}.auth-brand,.mobile-brand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;color:#20243b;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-.045em}.auth-brand img,.mobile-brand img{width:40px;height:40px}.showcase-copy{position:relative;z-index:1;max-width:620px;margin-top:34px}.auth-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--brand-dark);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.auth-kicker i{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px rgba(79,86,233,.11)}.showcase-copy h1{font-size:clamp(52px,5.4vw,82px);line-height:.98;letter-spacing:-.065em;margin:22px 0 22px;font-weight:780}.showcase-copy h1 span{color:var(--brand)}.showcase-copy p{font-size:18px;line-height:1.7;color:#697084;max-width:570px;margin:0}.showcase-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}.showcase-foot span{font-size:11px;font-weight:750;color:#586075;background:rgba(255,255,255,.72);border:1px solid rgba(219,223,236,.9);border-radius:999px;padding:8px 11px;backdrop-filter:blur(8px)}
.chat-preview{position:relative;z-index:1;width:min(510px,94%);margin:36px 0 15px auto;background:rgba(255,255,255,.9);border:1px solid rgba(222,225,237,.95);border-radius:28px;padding:19px;box-shadow:0 30px 70px rgba(54,66,122,.13);transform:rotate(-1.2deg)}.preview-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid #edf0f5}.preview-person{display:flex;align-items:center;gap:10px}.preview-person>div{display:grid;gap:1px}.preview-person b{font-size:13px}.preview-person small{font-size:10px;color:var(--muted)}.preview-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#bfe0ff,#d7d3ff);color:#34406d;font-weight:800}.preview-online{font-size:10px;font-weight:700;color:var(--success);background:#eaf9f3;border-radius:999px;padding:6px 8px}.preview-messages{display:grid;gap:10px;padding-top:17px}.preview-bubble{width:max-content;max-width:82%;padding:10px 12px;border-radius:15px;font-size:12px;line-height:1.45}.preview-bubble small{display:block;font-size:8px;color:#7e8493;margin-top:5px;text-align:right}.preview-bubble.incoming{background:#f1f2f6;border-top-left-radius:5px}.preview-bubble.outgoing{background:#e5e7ff;border-top-right-radius:5px;margin-left:auto}.identity-card{position:relative;z-index:1;display:flex;align-items:center;gap:17px;width:min(500px,94%);margin:38px 0 18px auto;background:rgba(255,255,255,.9);border:1px solid #e0e3ef;border-radius:26px;padding:20px;box-shadow:0 28px 65px rgba(54,66,122,.12);transform:rotate(1deg)}.identity-mark{width:58px;height:58px;border-radius:18px;overflow:hidden;flex:0 0 58px}.identity-mark img{width:100%}.identity-card>div:last-child{display:grid;gap:3px}.identity-card small{font-size:9px;letter-spacing:.12em;font-weight:800;color:#8a8fa0}.identity-card strong{font-size:22px;letter-spacing:-.03em}.identity-card span{font-size:11px;color:var(--muted)}
.auth-form-side{display:grid;place-items:center;padding:40px clamp(26px,5vw,72px);background:#fff}.auth-form-wrap{width:min(455px,100%)}.mobile-brand{display:none}.tiny-label{font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--brand)}.auth-heading h2{font-size:36px;letter-spacing:-.045em;margin:11px 0 8px}.auth-heading p{color:var(--muted);line-height:1.6;margin:0}.modern-form{display:grid;gap:18px;margin-top:30px}.modern-field{display:grid;gap:8px}.modern-field>span,.field-label-row span{font-size:12px;font-weight:760;color:#3d4252}.input-shell{height:54px;display:flex;align-items:center;border:1px solid #dfe2eb;border-radius:15px;background:#fff;transition:.18s;overflow:hidden}.input-shell:focus-within{border-color:#7980ef;box-shadow:0 0 0 4px rgba(79,86,233,.09)}.input-shell input{flex:1;min-width:0;height:100%;border:0;outline:0;padding:0 15px;background:transparent;color:var(--ink);font-size:14px}.input-shell input::placeholder{color:#a5a9b5}.username-shell b{font-size:16px;color:#858a9a;margin-left:15px}.username-shell input{padding-left:7px}.password-toggle{height:36px;margin-right:8px;padding:0 10px;border:0;border-radius:9px;background:#f3f4f8;color:#5d6374;font-size:11px;font-weight:760;cursor:pointer}.field-help{font-size:10.5px;color:#8a8f9d;line-height:1.45}.primary,.secondary{min-height:50px;border-radius:14px;border:0;font-weight:760;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;transition:.18s}.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 10px 24px rgba(79,86,233,.19)}.primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(79,86,233,.25)}.secondary{border:1px solid #dfe2ea;background:#fff;color:#34394a}.secondary:hover{background:#f8f9fc}.auth-submit{width:100%;justify-content:space-between;padding:0 17px;margin-top:2px}.auth-submit b{font-size:18px}.auth-divider{display:flex;align-items:center;gap:12px;margin:24px 0 14px;color:#999dac;font-size:11px}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#eceef3;flex:1}.auth-secondary{width:100%}.auth-switch{text-align:center;color:var(--muted);font-size:13px;margin:24px 0 0}.auth-switch a{color:var(--brand);font-weight:760;text-decoration:none}.auth-note{text-align:center;font-size:10.5px;color:#a0a4b0;margin:16px 0 0}.alert{display:flex;gap:10px;align-items:flex-start;border-radius:13px;padding:11px 12px;margin-top:20px;font-size:12px;line-height:1.45}.alert.error{background:#fff2f4;color:#a93549;border:1px solid #f6d8de}.alert>span{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#ffdfe5;font-weight:850;flex:0 0 19px}
/* General dialogs */
.center-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#f7f8ff,#f5f9ff)}.dialog-card{width:min(460px,100%);background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;text-align:center;box-shadow:var(--shadow)}.dialog-card.wide{width:min(570px,100%)}.dialog-logo,.handoff-logo{width:62px;height:62px;margin:0 auto 15px}.dialog-card h1{font-size:28px;letter-spacing:-.04em;margin:8px 0}.dialog-card p{color:var(--muted);line-height:1.6}.action-stack{display:grid;gap:10px;margin-top:24px}.link-btn{margin-top:12px;padding:0 18px}.link-box{padding:13px;border-radius:12px;background:var(--soft);border:1px solid var(--line);word-break:break-all;text-align:left;font-family:ui-monospace,monospace;font-size:12px;margin:18px 0}.qr-wrap{width:286px;max-width:100%;aspect-ratio:1;margin:22px auto;padding:18px;background:white;border:1px solid var(--line);border-radius:24px;display:grid;place-items:center;box-shadow:0 12px 35px rgba(18,43,82,.08)}.qr-wrap canvas{max-width:100%;height:auto!important;image-rendering:pixelated}.qr-status{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--success);font-size:12px;font-weight:750}.qr-status:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.handoff-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}
/* Chat app */
.app-page{height:100vh;overflow:hidden;background:#eef1f6}.app-shell{display:grid;grid-template-columns:72px 370px minmax(0,1fr);height:100vh;max-width:1800px;margin:auto;background:#fff;box-shadow:0 0 60px rgba(10,30,65,.08)}.rail{background:#f5f6fa;border-right:1px solid var(--line);padding:14px 9px;display:flex;flex-direction:column;align-items:center;gap:18px}.rail-avatar,.avatar{display:grid;place-items:center;border-radius:50%;font-weight:850}.rail-avatar{width:42px;height:42px;border:0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}.rail-group{display:grid;gap:10px}.rail-bottom{margin-top:auto;display:grid;gap:8px}.rail-btn,.icon-btn{border:0;background:transparent;cursor:pointer;color:#687084;display:grid;place-items:center;text-decoration:none}.rail-btn{width:44px;height:44px;border-radius:14px;font-size:20px}.rail-btn.active,.rail-btn:hover{background:#e9eaff;color:var(--brand)}.chat-list-panel{border-right:1px solid var(--line);min-width:0;background:#fff}.list-head{height:76px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}.app-brand{display:flex!important;align-items:center;gap:10px}.app-brand>img{width:33px;height:33px}.app-brand>div{display:grid}.brand-word{font-size:22px;font-weight:850;color:#252941;letter-spacing:-.04em}.list-head small{color:var(--muted);font-size:9px}.icon-btn{width:38px;height:38px;border-radius:12px;font-size:20px}.icon-btn:hover{background:var(--soft)}.search{margin:0 16px;height:44px;border-radius:13px;background:var(--soft);display:flex;align-items:center;padding:0 13px;gap:9px;color:var(--muted)}.search input{border:0;background:transparent;box-shadow:none!important;outline:0;width:100%;padding:0}.filter-pills{display:flex;gap:7px;padding:14px 16px 9px}.pill{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:750;cursor:pointer}.pill.active{background:#eeeeff;border-color:#dcdcff;color:var(--brand)}.chat-list{padding-top:5px}.chat-row{height:77px;display:flex;align-items:center;gap:12px;padding:0 16px;cursor:pointer}.chat-row:hover,.chat-row.active{background:#f7f7fc}.avatar{width:48px;height:48px;flex:0 0 48px;background:#eceef4;color:#333950}.avatar.blue{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff}.chat-meta{min-width:0;flex:1}.chat-top,.chat-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-top strong{font-size:14px}.chat-top time{font-size:11px;color:var(--muted)}.chat-bottom span{font-size:12.5px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.conversation{display:grid;grid-template-rows:76px 1fr auto;min-width:0;background:#fafbfc}.conversation-head{background:#fff;border-bottom:1px solid var(--line);padding:0 20px;display:flex;align-items:center;justify-content:space-between}.person{display:flex;align-items:center;gap:11px}.person .avatar{width:42px;height:42px;flex-basis:42px}.person div:last-child{display:grid;gap:3px}.person small{font-size:11px;color:var(--muted)}.head-actions{display:flex;gap:5px}.messages{padding:28px clamp(20px,6vw,90px);overflow:auto;background-image:radial-gradient(rgba(79,86,233,.035) 1px,transparent 1px);background-size:18px 18px}.date-chip{width:max-content;margin:0 auto 22px;background:#eceef3;color:#6b7282;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:750}.bubble{width:max-content;max-width:min(590px,78%);padding:10px 12px 7px;border-radius:15px;margin:7px 0;box-shadow:0 3px 9px rgba(24,42,70,.05)}.bubble p{margin:0 0 6px;line-height:1.48;font-size:14px}.bubble span{font-size:10px;color:#76849a;display:block;text-align:right}.incoming{background:#fff;border:1px solid #f0f1f4;border-top-left-radius:5px}.outgoing{background:#e6e7ff;margin-left:auto;border-top-right-radius:5px}.composer{background:#fff;border-top:1px solid var(--line);padding:12px 18px;display:flex;align-items:flex-end;gap:9px}.composer-input{flex:1;min-height:46px;border-radius:16px;background:var(--soft);display:flex;align-items:flex-end;padding:8px 10px}.composer textarea{resize:none;border:0;background:transparent;outline:none;flex:1;padding:5px;max-height:120px;color:var(--ink)}.composer-input button{border:0;background:none;font-size:18px;cursor:pointer}.send-btn{width:46px;height:46px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-size:18px;cursor:pointer}.empty-list{padding:42px 24px;text-align:center;color:var(--muted);display:grid;justify-items:center;gap:8px}.empty-list strong{color:var(--ink);font-size:15px}.empty-list span{font-size:13px;line-height:1.55;max-width:260px}.compact{padding:10px 15px;width:max-content;margin-top:8px}.conversation-empty{height:100%;display:grid;place-items:center;align-content:center;text-align:center;padding:30px;color:var(--muted)}.conversation-empty h1{margin:14px 0 6px;color:#272b42;letter-spacing:-.04em}.conversation-empty p{max-width:440px;line-height:1.6;margin:0}.empty-mark{width:78px;height:78px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(145deg,var(--brand),var(--brand2));color:white;font-weight:950;font-size:34px;box-shadow:0 18px 40px rgba(79,86,233,.22)}.conversation-active{display:grid;grid-template-rows:76px 1fr auto;height:100%;min-height:0}.mobile-back{display:none}.loading-chat{margin:auto;color:var(--muted);font-size:13px;padding:30px}.modal{position:fixed;inset:0;z-index:80;background:rgba(18,22,40,.4);backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px}.modal-card{width:min(520px,100%);max-height:min(650px,88vh);overflow:hidden;background:#fff;border-radius:24px;border:1px solid var(--line);box-shadow:0 28px 80px rgba(15,35,70,.22);display:grid;grid-template-rows:auto auto minmax(150px,1fr)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 22px 13px}.modal-head h2{margin:0 0 4px;font-size:22px;letter-spacing:-.03em}.modal-head p{margin:0;color:var(--muted);font-size:13px}.modal-search{margin-bottom:14px}.people-results{overflow:auto;border-top:1px solid var(--line);padding:8px}.people-hint{padding:28px 18px;text-align:center;color:var(--muted);font-size:13px}.person-result{width:100%;border:0;background:#fff;border-radius:15px;padding:11px;display:flex;align-items:center;gap:11px;cursor:pointer;text-align:left;color:var(--ink)}.person-result:hover{background:var(--soft)}.person-result:disabled{opacity:.55;cursor:wait}.person-result>div:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}.person-result strong{font-size:14px}.person-result span{font-size:12px;color:var(--muted)}.person-result b{font-size:11px;color:var(--brand);background:#eeeeff;padding:6px 9px;border-radius:999px}.toast{position:fixed;z-index:120;left:50%;bottom:24px;transform:translateX(-50%);background:#23273a;color:#fff;border-radius:999px;padding:10px 16px;font-size:13px;box-shadow:0 10px 30px rgba(8,24,51,.22)}.session-overlay{position:fixed;inset:0;background:rgba(17,20,38,.72);backdrop-filter:blur(10px);display:grid;place-items:center;padding:25px;z-index:99}.locked .app-shell{pointer-events:none;user-select:none}
@media(max-width:980px){.auth-layout{grid-template-columns:1fr}.auth-showcase{display:none}.auth-form-side{min-height:100vh}.mobile-brand{display:flex;margin-bottom:50px}.app-shell{grid-template-columns:64px 320px 1fr}.conversation{min-width:500px}}@media(max-width:700px){.auth-form-side{padding:28px 20px;align-items:start}.auth-form-wrap{padding-top:10px}.mobile-brand{margin-bottom:44px}.auth-heading h2{font-size:32px}.app-shell{display:block}.rail{position:fixed;bottom:0;left:0;right:0;height:64px;z-index:20;flex-direction:row;border-right:0;border-top:1px solid var(--line);justify-content:space-around;padding:7px 10px}.rail-avatar{display:none}.rail-group,.rail-bottom{display:flex;margin:0}.chat-list-panel{height:calc(100vh - 64px);border:0}.conversation{display:none;position:fixed;inset:0 0 64px 0;z-index:15;min-width:0;background:#fafbfc}.chat-list-panel{width:100%}body.mobile-chat-open .conversation{display:block}body.mobile-chat-open .chat-list-panel{display:none}.conversation-active{grid-template-rows:68px 1fr auto}.conversation-head{height:68px;padding:0 10px}.mobile-back{display:grid}.person{flex:1;min-width:0}.person strong,.person small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.messages{padding:18px 12px}.bubble{max-width:86%}.composer{padding:9px 10px}.composer>.icon-btn:first-child{display:none}.modal{align-items:end;padding:0}.modal-card{width:100%;max-height:82vh;border-radius:24px 24px 0 0;border-bottom:0}}