*{box-sizing:border-box}:root{font-family:Segoe UI,Trebuchet MS,sans-serif;line-height:1.45;color:#132b3b}html,body,#root{margin:0;min-height:100%}.login-shell{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,rgba(245,199,107,.35),transparent 40%),radial-gradient(circle at 80% 80%,rgba(83,153,237,.28),transparent 35%),linear-gradient(135deg,#f4efe6,#dbeef5 50%,#f2e6db);padding:2rem}.login-card{width:min(420px,92vw);background:#ffffffd6;border:1px solid rgba(18,43,63,.15);border-radius:1.2rem;box-shadow:0 20px 60px #112a442e;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fade-up .5s ease;display:flex;flex-direction:column;min-height:520px}.login-card h1{margin:0;font-size:2rem}.login-card p{color:#32526b}.login-form{margin-top:1rem;display:grid;gap:1rem}.login-built-by{margin-top:auto;text-align:right;font-size:.8rem;letter-spacing:.08em;color:#4e6f87}.login-built-by a{color:#0f766e;font-weight:800;text-decoration:none}.login-built-by a:hover{text-decoration:underline}.login-form label{display:grid;gap:.45rem;color:#12253a;font-weight:600}.login-form input,.send-box input{border:1px solid #87a7bf;border-radius:.8rem;padding:.75rem .9rem;font-size:1rem;outline:none}.login-form input:focus,.send-box input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}button{border:none;border-radius:.8rem;padding:.7rem 1rem;background:#0f766e;color:#f8fffe;font-weight:700;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}button:hover{transform:translateY(-1px);box-shadow:0 12px 22px #0f766e47}.chat-shell{min-height:100vh;display:grid;grid-template-columns:330px 1fr;background:#d2e4e9}.contacts-panel{border-right:1px solid rgba(18,43,63,.15);background:linear-gradient(180deg,#e8f4f8,#d9eaef);display:flex;flex-direction:column}.contacts-header,.chat-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid rgba(18,43,63,.15)}.contacts-header small,.chat-header small{display:block;color:#446078;font-size:.84rem}.contacts-list{overflow-y:auto;padding:.55rem;display:grid;gap:.45rem}.register-user-box{border-bottom:1px solid rgba(18,43,63,.15);padding:.8rem;display:grid;gap:.45rem}.register-user-box input{border:1px solid #87a7bf;border-radius:.6rem;padding:.5rem .65rem;font-size:.88rem}.register-user-box small{color:#31556f}.contact-item{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:.75rem;width:100%;text-align:left;background:#f8fcfd;color:#11324a;border:1px solid transparent;border-radius:.9rem;padding:.6rem}.contact-item time{font-size:.75rem;color:#5b7689}.contact-item.active{border-color:#0f766e;background:#def4ef}.contact-main{min-width:0}.contact-main strong,.contact-main small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-main small{color:#567086}.avatar{width:42px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#0f766e,#2563eb)}.chat-panel{display:flex;flex-direction:column;background:radial-gradient(circle at 20% 5%,rgba(255,255,255,.6),transparent 35%),linear-gradient(180deg,#e5eef5,#d2e4eb)}.messages-area{flex:1;overflow-y:auto;padding:1.2rem;display:grid;gap:.6rem}.message-bubble{max-width:min(70ch,70%);border-radius:1rem;padding:.65rem .9rem;display:grid;gap:.4rem;box-shadow:0 8px 20px #122b3f1f}.message-bubble p{margin:0}.message-bubble footer{display:flex;gap:.5rem;justify-content:flex-end;color:#4a677f}.message-bubble.mine{justify-self:end;background:#c6f4df}.message-bubble.theirs{justify-self:start;background:#f9fdff}.send-box{border-top:1px solid rgba(18,43,63,.15);display:grid;grid-template-columns:1fr auto;gap:.75rem;padding:1rem;background:#e7f2f8}.empty-state,.empty-chat,.error-text{margin:0;color:#3d5f77}.empty-chat{margin:auto;font-size:1.15rem}.panel-error{padding:0 1rem 1rem;color:#9f1d1d}.error-text{color:#9f1d1d}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 900px){.chat-shell{grid-template-columns:1fr}.contacts-panel{max-height:45vh}.chat-panel{min-height:55vh}.message-bubble{max-width:84%}}