*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#111b21;color:#e9edef;height:100dvh;height:100vh;overflow:hidden;position:fixed;width:100%}#root{height:100%}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(180deg,#00a884,#00a884 30%,#111b21 30%)}.login-card{background:#202c33;border-radius:8px;padding:3rem 2.5rem;width:100%;max-width:400px;box-shadow:0 4px 20px #0000004d}.login-card h1{text-align:center;margin-bottom:2rem;color:#00a884;font-size:1.5rem}.login-card .form-group{margin-bottom:1.25rem}.login-card label{display:block;margin-bottom:.4rem;color:#8696a0;font-size:.85rem}.login-card input{width:100%;padding:.7rem 1rem;border:1px solid #3b4a54;border-radius:6px;background:#2a3942;color:#e9edef;font-size:1rem;outline:none;transition:border-color .2s}.login-card input:focus{border-color:#00a884}.login-card button[type=submit]{width:100%;padding:.75rem;background:#00a884;color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;margin-top:.5rem;transition:background .2s}.login-card button[type=submit]:hover{background:#02906f}.login-card button[type=submit]:disabled{background:#3b4a54;cursor:not-allowed}.login-error{color:#ef4444;text-align:center;margin-bottom:1rem;font-size:.875rem}.app-layout{display:flex;height:100%;max-width:1600px;margin:0 auto;background:#111b21}.app-nav{display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;background:#202c33;border-right:1px solid #222d35;width:56px;min-width:56px}.app-nav-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;background:none;color:#8696a0;cursor:pointer;transition:background .2s,color .2s}.app-nav-btn:hover{background:#2a3942;color:#e9edef}.app-nav-btn.active{color:#00a884}.app-main-content{flex:1;display:flex;min-width:0;min-height:0;overflow:hidden;height:100%}.inbox-panel{width:400px;min-width:340px;border-right:1px solid #222d35;display:flex;flex-direction:column;background:#111b21;height:100%;min-height:0;overflow:hidden}.inbox-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:#202c33}.inbox-header h1{font-size:1.25rem;font-weight:500;color:#e9edef}.inbox-header .btn-new{background:none;border:none;color:#00a884;font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;border-radius:50%;transition:background .2s}.inbox-header .btn-new:hover{background:#2a3942}.conversation-list{list-style:none;overflow-y:auto;flex:1}.conversation-item{display:flex;align-items:center;padding:.75rem 1.25rem;cursor:pointer;border-bottom:1px solid #222d35;transition:background .15s}.conversation-item:hover{background:#2a3942}.conversation-item .avatar{width:48px;height:48px;border-radius:50%;background:#00a884;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff;margin-right:.85rem;flex-shrink:0}.conversation-item .conv-details{flex:1;min-width:0}.conversation-item .conv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.2rem}.conversation-item .conv-name{font-size:1rem;color:#e9edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item .conv-name.unread{font-weight:600}.conversation-item .conv-time{font-size:.75rem;color:#8696a0;white-space:nowrap;margin-left:.5rem}.conversation-item .conv-time.unread{color:#00a884}.conversation-item .conv-preview{font-size:.85rem;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-item .conv-phone-secondary{font-size:.75rem;color:#8696a0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.1rem}.unread-badge{width:20px;height:20px;border-radius:50%;background:#00a884;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#111b21;font-weight:600;margin-left:.5rem}.empty-inbox{text-align:center;color:#8696a0;margin-top:4rem;font-size:.9rem}.chat-page{flex:1;display:flex;flex-direction:column;background:#0b141a;height:100%;min-height:0;overflow:hidden}.chat-header{display:flex;align-items:center;padding:.6rem 1rem;background:#202c33;border-bottom:1px solid #222d35;flex-shrink:0}.chat-header .back-btn{background:none;border:none;color:#00a884;font-size:1.25rem;cursor:pointer;margin-right:.75rem;padding:.3rem}.chat-header .chat-avatar{width:40px;height:40px;border-radius:50%;background:#00a884;display:flex;align-items:center;justify-content:center;color:#fff;margin-right:.75rem}.chat-header h2{font-size:1rem;font-weight:500;color:#e9edef;margin:0}.chat-header-info{display:flex;flex-direction:column;flex:1;min-width:0}.chat-header-info .phone-subtitle{font-size:.8rem;color:#8696a0;margin-top:.1rem}.chat-header-actions{margin-left:auto}.contact-action-btn{background:none;border:1px solid #00a884;color:#00a884;padding:.35rem .75rem;border-radius:4px;cursor:pointer;font-size:.8rem;white-space:nowrap;transition:background .2s}.contact-action-btn:hover{background:#00a8841a}.message-list{flex:1;overflow-y:auto;min-height:0;padding:1rem 4rem;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' patternUnits='userSpaceOnUse' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23172129' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='%230b141a' width='100' height='100'/%3E%3Crect fill='url(%23a)' width='100' height='100'/%3E%3C/svg%3E")}.message-bubble{max-width:65%;padding:.5rem .7rem;border-radius:8px;margin-bottom:.3rem;position:relative;word-wrap:break-word;clear:both}.message-bubble.inbound{background:#202c33;float:left;border-top-left-radius:0}.message-bubble.outbound{background:#005c4b;float:right;border-top-right-radius:0}.message-bubble .message-text{font-size:.9rem;line-height:1.4;color:#e9edef;margin:0}.message-bubble .message-time{display:block;text-align:right;font-size:.68rem;color:#ffffff80;margin-top:.2rem}.message-bubble .message-image{max-width:100%;border-radius:6px;display:block}.message-bubble .document-link{color:#53bdeb;text-decoration:none;font-size:.9rem}.message-bubble .document-link:hover{text-decoration:underline}.reply-composer{background:#202c33;padding:.6rem 1rem;border-top:1px solid #222d35;flex-shrink:0}.reply-composer .toast-error,.reply-composer .attach-error{color:#ef4444;font-size:.8rem;margin-bottom:.4rem}.reply-composer .attachment-preview{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.4rem .6rem;background:#2a3942;border-radius:6px}.reply-composer .attachment-preview .attach-thumb{width:40px;height:40px;object-fit:cover;border-radius:4px}.reply-composer .attachment-preview .attach-filename{font-size:.85rem;color:#8696a0}.reply-composer .attachment-preview button{background:none;border:none;color:#ef4444;cursor:pointer;font-size:1rem;margin-left:auto}.reply-composer .composer-row{display:flex;align-items:center;gap:.5rem}.reply-composer .file-input{display:none}.reply-composer .attach-btn{background:none;border:none;color:#8696a0;font-size:1.4rem;cursor:pointer;padding:.3rem;border-radius:50%;transition:background .2s}.reply-composer .attach-btn:hover{background:#2a3942}.reply-composer textarea{flex:1;padding:.6rem 1rem;border:none;border-radius:20px;background:#2a3942;color:#e9edef;font-size:.9rem;resize:none;outline:none;max-height:100px;min-height:40px;line-height:1.4}.reply-composer textarea::placeholder{color:#8696a0}.reply-composer .send-btn{background:none;border:none;color:#00a884;font-size:1.5rem;cursor:pointer;padding:.3rem;border-radius:50%;transition:background .2s}.reply-composer .send-btn:hover{background:#2a3942}.reply-composer .send-btn:disabled{color:#3b4a54;cursor:not-allowed}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#202c33;border-radius:8px;padding:2rem;width:90%;max-width:450px;max-height:80vh;overflow-y:auto}.modal-content h2{color:#e9edef;margin-bottom:1.5rem;font-size:1.2rem}.modal-content .form-group{margin-bottom:1rem}.modal-content label{display:block;color:#8696a0;font-size:.85rem;margin-bottom:.3rem}.modal-content input,.modal-content select{width:100%;padding:.6rem .8rem;border:1px solid #3b4a54;border-radius:6px;background:#2a3942;color:#e9edef;font-size:.9rem;outline:none}.modal-content input:focus,.modal-content select:focus{border-color:#00a884}.modal-content .error-text{color:#ef4444;font-size:.8rem;margin-top:.25rem;display:block}.modal-content .warning-banner{background:#3b2e1a;color:#f59e0b;padding:.6rem .8rem;border-radius:6px;font-size:.85rem;margin-bottom:1rem}.modal-content .error-notification{color:#ef4444;font-size:.85rem;margin:.75rem 0}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}.modal-actions button{padding:.6rem 1.2rem;border-radius:6px;border:none;font-size:.9rem;cursor:pointer}.modal-actions button[type=button]{background:#2a3942;color:#8696a0}.modal-actions button[type=submit]{background:#00a884;color:#fff}.modal-actions button[type=submit]:disabled{background:#3b4a54;cursor:not-allowed}.loading{display:flex;justify-content:center;align-items:center;height:100vh;color:#8696a0}.error-banner{background:#3b1a1a;color:#ef4444;padding:.5rem 1rem;text-align:center;font-size:.85rem}.warning-indicator{background:#3b2e1a;color:#f59e0b;padding:.4rem 1rem;text-align:center;font-size:.8rem}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#374045;border-radius:3px}@media (max-width: 768px){.app-layout{flex-direction:column;height:100dvh;height:100vh}.app-nav{position:fixed;bottom:0;left:0;right:0;flex-direction:row;width:100%;min-width:unset;height:52px;min-height:52px;padding:.4rem 0;gap:2rem;justify-content:center;border-right:none;border-top:1px solid #222d35;flex-shrink:0;z-index:100;background:#202c33}.app-main-content{flex:1;width:100%;min-height:0;height:calc(100dvh - 52px);height:calc(100vh - 52px);overflow:hidden;padding-bottom:0}.inbox-panel{width:100%!important;max-width:100%!important;min-width:0;border-right:none;height:100%}.conversation-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}.chat-page{width:100%;height:100%;position:relative}.chat-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:.5rem .6rem;gap:.4rem}.chat-header .back-btn{margin-right:.4rem;flex-shrink:0}.chat-header .chat-avatar{width:36px;height:36px;margin-right:.5rem;flex-shrink:0}.chat-header-info{flex:1;min-width:0}.chat-header-info h2{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header-info .phone-subtitle{font-size:.7rem}.chat-header-actions{flex-shrink:0}.contact-action-btn{padding:.25rem .5rem;font-size:.7rem}.message-list{position:fixed;top:52px;left:0;right:0;bottom:110px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.75rem 1rem}.reply-composer{position:fixed;bottom:52px;left:0;right:0;z-index:50;margin-bottom:0}.message-bubble{max-width:85%}.inbox-header{padding:.75rem 1rem;flex-shrink:0}.inbox-header h1{font-size:1.1rem}.contact-search-bar{padding:.5rem 1rem!important}}@media (max-width: 480px){.chat-header{padding:.4rem .5rem}.chat-header .chat-avatar{width:32px;height:32px;font-size:.8rem}.chat-header-info h2{font-size:.85rem}.contact-action-btn{padding:.2rem .4rem;font-size:.65rem}.message-list{padding:.5rem}.message-bubble{max-width:90%}.reply-composer{padding:.5rem .6rem}.reply-composer textarea{font-size:.85rem;min-height:36px}}