@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{--green:#128c7e;--green-dark:#075e54;--green-soft:#e8f7f3;--lime:#d9fdd3;--ink:#15232d;--muted:#667781;--line:#e7ecef;--panel:#f7f9fa;--white:#fff;--shadow:0 20px 60px rgba(13,49,45,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Hind Siliguri","Inter",sans-serif;color:var(--ink)}button,input,textarea{font:inherit}button{cursor:pointer}svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:700 25px/1 "Inter",sans-serif;letter-spacing:-1px}.brand small,.mobile-brand small{font-size:.55em;color:#38d39f;letter-spacing:0}.brand-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--green);box-shadow:0 7px 22px rgba(0,0,0,.13)}.brand-mark svg{width:25px;height:25px;stroke-width:1.7}.brand-mark svg path:first-child{fill:currentColor;stroke:currentColor}.brand-mark svg path+path{stroke:#fff;fill:none}.brand-light{color:#fff}.brand-light .brand-mark{color:#25d366}

/* Authentication */
.auth-page{min-height:100vh;background:#f4f8f7}.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,44%) 1fr}.auth-brand{position:relative;overflow:hidden;padding:42px clamp(36px,5vw,80px);display:flex;flex-direction:column;color:#fff;background:radial-gradient(circle at 12% 12%,rgba(75,221,177,.27),transparent 25%),radial-gradient(circle at 92% 72%,rgba(27,182,145,.34),transparent 28%),linear-gradient(145deg,#075e54 0%,#0b796b 52%,#096156 100%)}.auth-brand:before,.auth-brand:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%}.auth-brand:before{width:520px;height:520px;right:-350px;top:-250px}.auth-brand:after{width:360px;height:360px;left:-260px;bottom:-120px}.brand-copy{position:relative;z-index:1;margin:auto 0 20px;max-width:560px}.eyebrow{display:inline-block;margin-bottom:24px;padding:8px 15px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);font-size:13px;letter-spacing:1.4px}.brand-copy h1{font-size:clamp(42px,4.5vw,68px);line-height:1.1;letter-spacing:-2.4px;margin:0 0 24px}.brand-copy h1 em{font-style:normal;color:#78edbf}.brand-copy p{max-width:510px;color:rgba(255,255,255,.76);font-size:18px;line-height:1.75;margin:0}.auth-art{height:175px;position:relative;z-index:1;margin:5px 0 20px}.float-bubble{position:absolute;padding:14px 18px;border-radius:17px;background:#fff;color:#263c39;box-shadow:0 18px 36px rgba(0,36,32,.22);font-size:15px}.float-bubble span{display:block;text-align:right;color:#26a8e2;font:600 11px Inter;margin-top:2px}.bubble-a{left:5%;top:10px;border-bottom-left-radius:4px;transform:rotate(-2deg)}.bubble-b{left:38%;top:78px;border-bottom-right-radius:4px;transform:rotate(2deg)}.float-avatar{position:absolute;right:9%;top:24px;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#65e3b7,#20ae88);border:6px solid rgba(255,255,255,.16);font:700 30px Inter}.brand-foot{position:relative;z-index:1;margin:0;color:rgba(255,255,255,.45);font:12px Inter}
.auth-panel{display:grid;place-items:center;padding:48px 24px;background:radial-gradient(circle at 85% 10%,#e1f5ee,transparent 28%),#f8faf9}.auth-card{width:min(100%,455px);padding:40px 42px;background:#fff;border:1px solid rgba(16,96,83,.08);border-radius:26px;box-shadow:var(--shadow)}.mobile-brand{display:none}.auth-heading h2{font-size:32px;line-height:1.2;margin:0 0 7px}.auth-heading p{margin:0;color:var(--muted);font-size:16px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;margin:28px 0 25px;padding:5px;background:#f0f4f3;border-radius:13px}.auth-tab{border:0;background:transparent;color:#667781;padding:10px;border-radius:9px;font-weight:600;transition:.2s}.auth-tab.active{background:#fff;color:var(--green-dark);box-shadow:0 4px 14px rgba(10,68,59,.09)}.field{margin-bottom:18px}.field label{display:block;font-weight:600;font-size:14px;margin:0 0 7px}.input-wrap{height:52px;display:flex;align-items:center;gap:11px;padding:0 15px;border:1px solid #dce5e3;border-radius:12px;background:#fbfcfc;transition:.2s}.input-wrap:focus-within{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(18,140,126,.09)}.input-wrap>svg{width:20px;color:#7c8c93}.input-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-family:Inter,"Hind Siliguri",sans-serif;font-size:14px}.input-wrap input::placeholder{color:#a0adb2}.at-icon{font:600 20px Inter;color:#7c8c93}.password-toggle{display:grid;place-items:center;padding:5px;border:0;background:none;color:#84949a}.password-toggle svg{width:20px;height:20px}.field-hint{display:block;color:#87959b;margin-top:6px;font-size:11px}.primary-button{width:100%;height:52px;margin-top:6px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#159b8b,#087166);color:#fff;font-weight:600;box-shadow:0 10px 25px rgba(18,140,126,.25);transition:.2s}.primary-button:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(18,140,126,.31)}.primary-button:disabled{opacity:.65;transform:none}.primary-button svg{width:19px}.switch-copy{text-align:center;color:var(--muted);font-size:14px;margin:21px 0}.switch-copy button{border:0;background:none;color:var(--green);font-weight:600;padding:0}.privacy-note{border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;gap:8px;color:#89969b;font-size:11.5px;line-height:1.35}.privacy-note svg{width:18px;min-width:18px;color:var(--green)}.form-message{display:none;margin:-9px 0 16px;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.4}.form-message.error{display:block;color:#a62a37;background:#fff0f1}.form-message.success{display:block;color:#08765c;background:#ebfaf5}

/* Main chat */
.chat-page{height:100vh;overflow:hidden;background:linear-gradient(#087b6d 0 115px,#e8edeb 115px 100%)}.chat-shell{width:min(1500px,calc(100% - 44px));height:calc(100vh - 38px);margin:19px auto;display:grid;grid-template-columns:390px minmax(0,1fr);overflow:hidden;background:#fff;border-radius:9px;box-shadow:0 10px 40px rgba(0,35,31,.2)}.sidebar{display:flex;min-width:0;flex-direction:column;border-right:1px solid #dfe5e7;background:#fff}.sidebar-head,.conversation-head{height:68px;min-height:68px;display:flex;align-items:center}.sidebar-head{justify-content:space-between;padding:0 18px 0 21px;background:#f4f7f6;border-bottom:1px solid #e8edeb}.brand.compact{gap:9px;font-size:18px;letter-spacing:-.7px}.brand.compact .brand-mark{width:34px;height:34px;border-radius:10px;color:#fff;background:var(--green);box-shadow:none}.brand.compact .brand-mark svg{width:21px}.my-avatar,.avatar{width:42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;font:600 15px Inter;background:#748d92}.user-menu-wrap{position:relative}.user-menu{position:absolute;z-index:20;right:0;top:51px;width:218px;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(30,50,48,.18)}.menu-profile{padding:15px 17px;border-bottom:1px solid var(--line)}.menu-profile strong,.menu-profile span{display:block}.menu-profile strong{font-size:15px}.menu-profile span{color:var(--muted);font:12px Inter;margin-top:3px}.user-menu button{width:100%;display:flex;gap:10px;align-items:center;padding:12px 17px;border:0;background:#fff;color:#c33f4d;text-align:left}.user-menu button:hover{background:#fff5f6}.user-menu svg{width:18px}
.search-area{padding:13px 14px 9px}.search-box{height:44px;display:flex;align-items:center;gap:10px;padding:0 13px;border-radius:11px;background:#f2f5f4;border:1px solid transparent}.search-box:focus-within{background:#fff;border-color:#c5ded9;box-shadow:0 0 0 3px #edf8f5}.search-box>svg{width:19px;color:#6b7c82}.search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:13px}.search-box button{border:0;background:none;color:#73848a;font-size:22px;line-height:1;padding:0}.search-loader{width:16px;height:16px;border:2px solid #cbd8d5;border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite}.list-label{display:flex;justify-content:space-between;align-items:center;padding:13px 19px 8px;color:#617279;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.7px}.list-label span+span{padding:1px 7px;border-radius:20px;color:var(--green);background:var(--green-soft)}.contact-list{min-height:0;flex:1;overflow-y:auto}.contact{width:100%;border:0;background:#fff;display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 17px;text-align:left;transition:.15s}.contact:hover{background:#f6f9f8}.contact.active{background:#eaf6f3}.avatar{position:relative;width:50px;height:50px;font-size:17px}.avatar .online-dot,.contact .online-dot{position:absolute;right:1px;bottom:2px;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:#26bc76}.contact-copy{min-width:0}.contact-top,.contact-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.contact-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600}.contact-time{color:#849198;font:10.5px Inter;white-space:nowrap}.contact-bottom{margin-top:3px}.contact-preview{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#728188;font-size:12px}.unread{min-width:20px;height:20px;padding:0 5px;border-radius:12px;display:grid;place-items:center;background:#21bf73;color:#fff;font:600 10px Inter}.empty-list{text-align:center;padding:62px 30px;color:#87949a}.empty-list svg{width:48px;height:48px;padding:11px;border-radius:15px;background:#eef8f5;color:var(--green)}.empty-list strong{display:block;color:#4d5d63;margin:12px 0 6px}.empty-list p{margin:0;font-size:13px;line-height:1.55}.search-user .contact-preview{font-family:Inter,sans-serif}.start-chip{padding:5px 9px;border-radius:8px;background:#e6f7f2;color:var(--green);font-size:11px;font-weight:600}
.conversation{position:relative;min-width:0;background:#f2f6f5}.welcome-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;border-bottom:6px solid var(--green)}.welcome-illustration{position:relative;width:190px;height:170px;margin-bottom:10px}.welcome-phone{position:absolute;left:58px;top:20px;width:80px;height:128px;border-radius:24px;display:grid;place-items:center;background:#dff3ed;color:var(--green);transform:rotate(5deg)}.welcome-phone svg{width:50px;height:70px;stroke-width:1.3}.orbit{position:absolute;padding:9px 13px;border-radius:12px;background:#fff;color:var(--green);box-shadow:0 9px 24px rgba(30,88,77,.12);font:600 13px Inter}.orbit-one{left:15px;top:37px}.orbit-two{right:0;bottom:30px;color:#21a6d9}.welcome-state h2{font-size:28px;margin:4px 0 8px}.welcome-state p{color:var(--muted);line-height:1.6;margin:0}.secure-line{display:flex;align-items:center;gap:6px;margin-top:30px;color:#93a19f;font-size:11px}.secure-line svg{width:14px}.active-chat{height:100%;display:flex;flex-direction:column}.conversation-head{padding:0 20px;background:#f5f7f6;border-bottom:1px solid #e1e7e6;gap:12px}.conversation-head .avatar{width:43px;height:43px;min-width:43px}.peer-meta{min-width:0}.peer-meta strong,.peer-meta span{display:block}.peer-meta strong{font-size:15px}.peer-meta span{font-size:11px;color:#7b898e}.back-button{display:none;width:35px;color:#53666a;background:none}.messages{position:relative;flex:1;overflow-y:auto;padding:26px clamp(22px,5vw,75px);background-color:#efeae2;background-image:radial-gradient(rgba(72,100,94,.06) 1px,transparent 1px);background-size:18px 18px}.message-row{display:flex;margin:3px 0}.message-row.mine{justify-content:flex-end}.bubble{position:relative;max-width:min(72%,650px);padding:8px 59px 7px 11px;border-radius:8px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.08);font-size:14px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere}.message-row.mine .bubble{background:var(--lime)}.bubble-time{position:absolute;right:8px;bottom:6px;color:#74827f;font:9px Inter;white-space:nowrap}.bubble-time .ticks{color:#2aa5d7;margin-left:2px}.day-divider{text-align:center;margin:14px 0}.day-divider span{display:inline-block;padding:5px 10px;border-radius:7px;background:#fff;color:#67757a;box-shadow:0 1px 2px rgba(0,0,0,.08);font-size:10px}.conversation-empty{height:100%;display:grid;place-items:center;color:#6d7b80;text-align:center;font-size:13px}.composer{min-height:65px;padding:10px 17px;display:flex;align-items:flex-end;gap:11px;background:#f3f6f5;border-top:1px solid #e0e6e4}.composer textarea{min-height:44px;max-height:130px;flex:1;resize:none;border:1px solid #e0e6e4;border-radius:13px;outline:0;padding:11px 14px;background:#fff;line-height:1.4;font-size:14px}.composer textarea:focus{border-color:#b7d9d1}.composer button{width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(18,140,126,.25)}.composer button:disabled{background:#afbfbc;box-shadow:none}.composer button svg{width:20px}.toast{position:fixed;z-index:99;left:50%;bottom:25px;transform:translate(-50%,20px);padding:10px 16px;border-radius:10px;background:#1e3130;color:#fff;opacity:0;pointer-events:none;transition:.25s;font-size:13px;box-shadow:0 8px 25px rgba(0,0,0,.2)}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){.auth-shell{grid-template-columns:1fr}.auth-brand{display:none}.auth-panel{min-height:100vh;padding:24px}.mobile-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:30px;font:700 22px Inter;letter-spacing:-.8px}.mobile-brand .brand-mark{width:35px;height:35px;border-radius:10px;color:#fff;background:var(--green);box-shadow:none}.auth-card{padding:32px}.chat-page{background:#fff}.chat-shell{width:100%;height:100vh;margin:0;border-radius:0;grid-template-columns:340px minmax(0,1fr);box-shadow:none}}
@media (max-width:680px){.chat-shell{display:block}.sidebar,.conversation{width:100%;height:100%}.conversation{display:none}.chat-shell.chat-open .sidebar{display:none}.chat-shell.chat-open .conversation{display:block}.back-button{display:grid}.messages{padding:20px 12px}.bubble{max-width:87%}.sidebar-head{height:64px}.search-area{padding-top:10px}.auth-card{box-shadow:0 12px 40px rgba(13,49,45,.1)}.welcome-state p br{display:none}}
@media (max-width:420px){.auth-panel{padding:15px}.auth-card{padding:27px 22px;border-radius:20px}.auth-heading h2{font-size:28px}.privacy-note{font-size:10.5px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}