@import"https://fonts.googleapis.com/css2?family=Google Sans:wght@300;400;500;700&display=swap";:root{--bg-color: #f4f4f8;--sidebar-bg: #f6f6fb;--chat-bg: #ffffff;--primary-color: #272757;--primary-dark: #0F0E47;--primary-mid: #505081;--primary-light: #8686AC;--bubble-out: #efeaff;--bubble-in: #ffffff;--muted-text: #666666;--muted-border: rgba(80,80,129,.08);--header-height: 44px}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{margin:0;font-family:Google Sans;background-color:var(--bg-color);height:100vh;display:flex;justify-content:center;align-items:center}.app-container{display:flex;flex-direction:column;width:90vw;height:90vh;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0000001a;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--muted-border);background:var(--sidebar-bg);color:var(--primary-dark)}.main-area{display:flex;flex:1;min-height:0}.sidebar{width:30%;border-right:1px solid var(--muted-border);background:var(--sidebar-bg);display:flex;flex-direction:column}.sidebar-header{height:var(--header-height);padding:0 12px;background:var(--sidebar-bg);border-bottom:1px solid var(--muted-border);display:flex;align-items:center;justify-content:flex-start;gap:12px}.brand-logo{height:22px;width:auto;display:block}.sidebar-header h3{margin:0;font-size:1rem;font-weight:600}@media(max-width:600px){.brand-logo{height:20px}.sidebar-header h3{font-size:.95rem}}.add-contact-btn{background:var(--primary-color);color:#fff;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;font-weight:600}.add-contact-btn:hover{opacity:.9}.signout-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid rgba(0,0,0,.06);padding:8px 12px;border-radius:8px;cursor:pointer;color:var(--primary-dark);transition:background .12s ease,transform 80ms ease,box-shadow .12s ease;font-weight:600}.signout-btn:hover{background:#2727570a;transform:translateY(-1px)}.signout-icon{color:var(--primary-color)}.signout-btn:focus{outline:none;box-shadow:0 0 0 3px #27275714}.notify-btn{margin-right:10px;background:transparent;border:1px solid var(--muted-border);color:var(--primary-dark);padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600}.notify-btn:hover{background:#00000005}.sidebar-header h3{color:var(--primary-dark)}.contact-list{overflow-y:auto;flex:1}.contact-search{padding:8px 12px;border-bottom:1px solid var(--muted-border)}.contact-search input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--muted-border);outline:none;font-size:.95rem}.contact-search input:focus{box-shadow:0 0 0 3px #5050810f;border-color:var(--primary-mid)}.no-results{padding:14px 12px;color:var(--muted-text);text-align:center}.contact-item{display:flex;align-items:center;padding:15px;cursor:pointer;border-bottom:1px solid var(--muted-border);transition:.2s}.icon-btn{margin-left:auto;background:transparent;border:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;opacity:0;transition:opacity .14s ease,background .12s ease,transform 80ms ease}.contact-item:hover .icon-btn{opacity:1}.contact-item:focus-within .icon-btn{opacity:1}.icon-btn.save{border:1px solid var(--primary-mid);color:var(--primary-mid);background:#50508105}.icon-btn.edit{background:var(--primary-color);color:#fff}.unread-badge{margin-left:8px;background:var(--primary-color);color:#fff;font-size:.75rem;padding:4px 6px;border-radius:999px;min-width:22px;text-align:center;display:inline-block;font-weight:700}.btn-icon{width:16px;height:16px;display:inline-block}.btn-icon svg{width:100%;height:100%}.user-icon{color:var(--primary-light)}.icon-btn:hover{transform:translateY(-2px);opacity:1}.icon-btn:focus{outline:none;box-shadow:0 0 0 3px #27275714}.modal-overlay{position:fixed;inset:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:5000}.modal{background:#fff;padding:20px;border-radius:8px;width:320px;box-shadow:0 8px 30px #00000026;font-family:inherit}.modal h3{margin-top:0}.modal .phone{color:var(--muted-text);font-size:.95rem;margin-bottom:10px}.modal input{width:100%;max-width:100%;padding:10px;margin-bottom:12px;border:1px solid var(--muted-border);border-radius:6px;outline:none;font-family:inherit;box-sizing:border-box;display:block}.modal-actions button{padding:8px 12px;border-radius:6px;cursor:pointer;font-family:inherit}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.modal-actions button{padding:8px 12px;border-radius:6px;cursor:pointer}.modal-actions .primary{background:var(--primary-color);color:#fff;border:none}.modal-actions .secondary{background:transparent;border:1px solid var(--muted-border)}.contact-item:hover{background:#50508108}.contact-item.active{background:#5050810f}.contact-info{margin-left:15px;display:flex;flex-direction:column}.contact-name{font-weight:700}.contact-phone{font-size:.85rem;color:var(--muted-text)}.chat-window{flex:1;display:flex;flex-direction:column;background:#fbf9ff;position:relative;min-width:0}.chat-header{height:var(--header-height);padding:0 12px;background:var(--sidebar-bg);border-bottom:1px solid var(--muted-border);display:flex;align-items:center}.chat-header h3{margin:0;font-size:1rem;font-weight:600}.messages-area{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.message-row{display:flex}.my-msg{justify-content:flex-end}.their-msg{justify-content:flex-start}.bubble{max-width:72%;padding:10px 14px;border-radius:12px;box-shadow:0 6px 18px #2727570f;position:relative;font-size:.96rem;line-height:1.35}.my-msg .bubble{background:var(--bubble-out);color:var(--primary-dark);border-top-right-radius:4px;align-self:flex-end;border:1px solid rgba(80,80,129,.06)}.their-msg .bubble{background:var(--bubble-in);color:var(--primary-dark);border-top-left-radius:4px;align-self:flex-start}.time{display:block;font-size:.72rem;color:var(--muted-text);text-align:right;margin-top:6px}.input-area{padding:15px;background:var(--sidebar-bg);display:flex;align-items:center}.input-area input{flex:1;padding:12px;border:none;border-radius:8px;outline:none;margin-right:10px}.input-area button{background:transparent;border:none;font-size:1.2rem;color:var(--primary-color);cursor:pointer}