@import "https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap";:root{color:#e8e9e7;font-synthesis:none;--bg:#0d0f10;--panel:#131617;--panel-raised:#191d1e;--border:#282d2e;--muted:#8e9696;--lime:#d8ff54;--lime-deep:#a9cf27;--danger:#ff7b72;background:#0d0f10;font-family:Tajawal,system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 15% 10%, #d8ff5412, transparent 26rem), var(--bg);min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.eyebrow{color:var(--lime);letter-spacing:.13em;margin:0 0 .55rem;font-size:.72rem;font-weight:800}.muted{color:var(--muted)}.error-banner,.setup-hint{color:#ffc5c1;background:#ff7b7212;border:1px solid #ff7b7259;border-radius:12px;padding:.8rem 1rem;font-size:.86rem}.setup-hint{color:#dfeaa8;background:#d8ff540f;border-color:#d8ff5440;line-height:1.7}.login-page{grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);min-height:100vh;display:grid}.login-brand{flex-direction:column;justify-content:center;padding:clamp(3rem,8vw,8rem);display:flex;position:relative;overflow:hidden}.login-brand:after{content:"S";inset-inline-start:-4rem;color:#0000;-webkit-text-stroke:1px #d8ff5417;pointer-events:none;font-size:40rem;font-weight:800;line-height:1;position:absolute;bottom:-15rem}.brand-symbol,.sidebar-logo,.mobile-logo span{color:#111;background:var(--lime);border-radius:12px;place-items:center;width:3.2rem;height:3.2rem;margin-bottom:3.4rem;font-size:1.65rem;font-weight:800;display:grid;transform:rotate(-4deg)}.login-brand h1{letter-spacing:-.07em;max-width:750px;margin:0;font-size:clamp(3.8rem,7.8vw,8.6rem);line-height:.9}.brand-copy{color:#afb4b2;max-width:570px;font-size:1.12rem;line-height:1.8}.channel-row{gap:.7rem;margin-top:2rem;display:flex}.channel-row span{border:1px solid var(--border);color:#aeb5b3;border-radius:999px;padding:.55rem .85rem;font-size:.78rem}.login-panel{border-inline-start:1px solid var(--border);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#131617c7;place-items:center;padding:2rem;display:grid}.login-card{gap:1.15rem;width:min(100%,420px);display:grid}.login-card h2{margin:0;font-size:2.35rem}.login-card>p{margin:0}.login-card label,.settings-block label{color:#bdc3c1;gap:.55rem;font-size:.88rem;font-weight:600;display:grid}.login-card input,.search-box,.settings-block select,.composer textarea,.notes-block textarea{border:1px solid var(--border);color:#f2f3f1;background:#0e1112;border-radius:12px;outline:none;width:100%;transition:border-color .16s,box-shadow .16s}.login-card input{height:3.45rem;padding:0 1rem}.login-card input:focus,.settings-block select:focus,.composer textarea:focus,.notes-block textarea:focus{border-color:var(--lime-deep);box-shadow:0 0 0 3px #d8ff5414}.primary-button{color:#0e100d;background:var(--lime);border:0;border-radius:12px;height:3.5rem;margin-top:.35rem;font-weight:800}.mobile-logo{display:none}.app-loading{min-height:100vh;color:var(--lime);letter-spacing:.1em;place-items:center;font-weight:800;display:grid}.crm-shell{grid-template-columns:72px minmax(290px,350px) minmax(450px,1fr) minmax(260px,320px);height:100vh;display:grid;overflow:hidden}.app-sidebar{border-inline-end:1px solid var(--border);background:#0a0c0d;flex-direction:column;align-items:center;gap:1rem;padding:1rem 0;display:flex}.sidebar-logo{border-radius:9px;width:2.35rem;height:2.35rem;margin:0 0 1.6rem;font-size:1.1rem}.app-sidebar nav{gap:.7rem;display:grid}.nav-button{color:#8e9794;background:0 0;border:0;border-radius:10px;place-items:center;width:2.7rem;height:2.7rem;font-size:1.2rem;display:grid}.nav-button.active{color:#10120f;background:var(--lime)}.nav-button.logout{margin-top:auto}.inbox-panel,.chat-panel,.customer-panel{background:var(--panel);min-height:0}.inbox-panel{border-inline-end:1px solid var(--border);flex-direction:column;display:flex}.inbox-header{justify-content:space-between;align-items:center;padding:1.45rem 1.3rem 1rem;display:flex}.inbox-header h1{margin:0;font-size:1.7rem}.total-count{color:#10120f;background:var(--lime);border-radius:9px;place-items:center;min-width:2.15rem;height:2.15rem;padding:0 .5rem;font-weight:800;display:grid}.search-box{align-items:center;gap:.5rem;width:auto;margin:0 1.1rem 1rem;padding:0 .8rem;display:flex}.search-box input{color:#e8e9e7;background:0 0;border:0;outline:0;width:100%;height:2.75rem}.inbox-panel>.error-banner{margin:0 1.1rem .8rem}.sync-row{gap:.4rem;margin:0 1.1rem .8rem;display:grid}.sync-button{min-height:2.45rem;color:var(--lime);background:#d8ff540f;border:1px solid #d8ff5447;border-radius:10px;font-size:.78rem;font-weight:700}.sync-row small{color:var(--muted);font-size:.68rem;line-height:1.4}.conversation-list{min-height:0;overflow-y:auto}.conversation-item{width:100%;color:inherit;text-align:start;background:0 0;border:0;border-bottom:1px solid #202425;gap:.8rem;padding:1rem 1.1rem;display:flex}.conversation-item:hover,.conversation-item.active{background:#1b1f20}.conversation-item.active{box-shadow:inset -3px 0 0 var(--lime)}.platform-avatar,.customer-avatar{color:#fff;border-radius:50%;flex:none;place-items:center;width:2.65rem;height:2.65rem;font-size:.68rem;font-weight:800;display:grid}.platform-avatar.instagram,.customer-avatar.instagram{background:linear-gradient(140deg,#8536d7,#f13e75,#ffb148)}.platform-avatar.facebook,.customer-avatar.facebook{background:#1877f2}.platform-avatar.whatsapp,.customer-avatar.whatsapp{background:#1aa765}.conversation-copy{flex:1;min-width:0}.conversation-line{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.conversation-line strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.conversation-line time{color:#747d7a;flex:none;font-size:.68rem}.last-message{color:#8f9895;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;display:block;overflow:hidden}.last-message small{color:#bcc3c0;margin-inline-end:.35rem;font-size:.62rem}.unread-badge{color:#10120f;background:var(--lime);border-radius:999px;flex:none;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;font-size:.67rem;display:grid}.loading-copy,.list-empty{color:var(--muted);text-align:center;padding:2rem}.list-empty span{color:#4e5653;font-size:2.5rem;display:block}.empty-conversation{color:#6f7775;text-align:center;background:#101314;place-content:center;justify-items:center;display:grid}.empty-conversation h2{color:#aeb5b3;margin-bottom:0}.empty-icon{border:1px solid #303536;border-radius:50%;place-items:center;width:5rem;height:5rem;font-size:2rem;display:grid}.chat-panel{background:radial-gradient(circle,#d8ff5406,#0000 30rem),#101314;flex-direction:column;display:flex}.chat-header{border-bottom:1px solid var(--border);background:#131617eb;align-items:center;gap:.75rem;min-height:76px;padding:0 1.25rem;display:flex}.chat-header h2,.chat-header p{margin:0}.chat-header h2{font-size:1rem}.chat-header p{color:var(--muted);font-size:.72rem}.status-chip{color:#aeb5b3;border:1px solid #383e3e;border-radius:999px;margin-inline-start:auto;padding:.38rem .65rem;font-size:.7rem}.status-chip.new,.status-chip.needs_human{color:var(--lime);border-color:#d8ff5466}.back-button{color:#d5d8d6;background:0 0;border:0;font-size:2rem;display:none}.messages{flex-direction:column;flex:1;gap:.65rem;min-height:0;padding:1.5rem;display:flex;overflow-y:auto}.message{background:#1b1f20;border:1px solid #2b3031;border-radius:16px 16px 4px;max-width:min(76%,620px);padding:.75rem .9rem .45rem}.message.inbound{border-radius:16px 16px 16px 4px;align-self:flex-start}.message.outbound{color:#171a13;background:#cceb60;border-color:#d8ff5433;align-self:flex-end}.message p{white-space:pre-wrap;margin:0;line-height:1.55}.message time{color:#7d8583;text-align:end;margin-top:.25rem;font-size:.62rem;display:block}.message.outbound time{color:#596042}.composer{border-top:1px solid var(--border);background:#141718;align-items:flex-end;gap:.7rem;padding:.9rem 1.1rem;display:flex}.composer textarea,.notes-block textarea{resize:none;padding:.8rem}.send-button{color:#10120f;background:var(--lime);border:0;border-radius:12px;flex:none;place-items:center;width:2.8rem;height:2.8rem;font-size:1.3rem;font-weight:800;display:grid}.customer-panel{border-inline-start:1px solid var(--border);padding:1.35rem;overflow-y:auto}.customer-card{border-bottom:1px solid var(--border);text-align:center;justify-items:center;padding:1rem 0 1.4rem;display:grid}.customer-avatar{width:4rem;height:4rem;font-size:1.35rem}.customer-card h2{margin:.8rem 0 .2rem;font-size:1.15rem}.customer-card p{color:var(--muted);margin:0;font-size:.78rem}.settings-block,.notes-block{border-bottom:1px solid var(--border);gap:1.1rem;padding:1.3rem 0;display:grid}.settings-block select{height:2.8rem;padding:0 .7rem}.toggle-row{justify-content:space-between;align-items:center;display:flex!important}.toggle-row span{gap:.2rem;display:grid}.toggle-row small{color:var(--muted);font-weight:400}.toggle-row input{appearance:none;background:#303536;border-radius:999px;width:2.7rem;height:1.45rem;position:relative}.toggle-row input:after{content:"";background:#fff;border-radius:50%;width:1.05rem;height:1.05rem;transition:transform .16s;position:absolute;top:3px;right:3px}.toggle-row input:checked{background:var(--lime-deep)}.toggle-row input:checked:after{transform:translate(-1.25rem)}.notes-block h3{margin:0;font-size:.95rem}.notes-block form{gap:.55rem;display:grid}.notes-block button{color:#0e100d;background:var(--lime);border:0;border-radius:9px;height:2.4rem;font-size:.8rem;font-weight:800}.notes-list{gap:.6rem;display:grid}.notes-list article{background:#101314;border:1px solid #292e2f;border-radius:10px;padding:.75rem}.notes-list p{margin:0 0 .35rem;font-size:.82rem;line-height:1.5}.notes-list small{color:#737b79;font-size:.65rem}@media (max-width:1180px){.crm-shell{grid-template-columns:64px minmax(280px,320px) minmax(420px,1fr)}.customer-panel{display:none}}@media (max-width:820px){.login-page{grid-template-columns:1fr}.login-brand{display:none}.login-panel{border:0}.mobile-logo{align-items:center;gap:.65rem;margin-bottom:2rem;font-weight:800;display:flex}.mobile-logo span{border-radius:9px;width:2.4rem;height:2.4rem;margin:0;font-size:1.1rem}.crm-shell{height:100dvh;display:block}.app-sidebar{display:none}.inbox-panel,.chat-panel{height:100dvh}.crm-shell.has-selection .inbox-panel,.crm-shell:not(.has-selection) .chat-panel,.crm-shell:not(.has-selection) .empty-conversation{display:none}.back-button{display:block}.message{max-width:88%}}