*{box-sizing:border-box}:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#17202a;background:#f3f5f8}html,body,#root{width:100%;height:100%;margin:0}body{min-width:320px;overflow:hidden;background:#f3f5f8}button,input{font:inherit}button{cursor:pointer}.app-shell{height:100vh;display:flex;flex-direction:column}.topbar{height:68px;flex:0 0 68px;padding:0 22px;background:#fff;border-bottom:1px solid #e5e9ef;display:flex;align-items:center;justify-content:space-between}.brand-area,.topbar-right,.wa-connection,.chat-header-left{display:flex;align-items:center}.brand-area{gap:11px}.brand-logo{width:37px;height:37px;border-radius:9px;background:#111827;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800}.brand-name{font-size:14px;font-weight:800;letter-spacing:.08em}.brand-subtitle{margin-top:2px;color:#8c96a4;font-size:10px}.topbar-right{gap:15px}.wa-connection{gap:8px}.connection-dot,.tiny-green-dot,.online-mini{display:inline-block;border-radius:50%;background:#22c55e}.connection-dot{width:8px;height:8px}.disconnected .connection-dot{background:#ef4444}.wa-connection strong{display:block;font-size:11px}.wa-connection small{display:block;color:#8d97a5;font-size:9px;margin-top:1px}.top-icon{width:32px;height:32px;border:1px solid #e4e8ee;background:#fff;border-radius:8px;color:#667181;font-size:17px}.crm-layout{min-height:0;flex:1;display:grid;grid-template-columns:315px minmax(450px,1fr) 300px}.inbox-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff;border-right:1px solid #e2e7ed}.inbox-header{height:72px;padding:0 17px;display:flex;align-items:center;justify-content:space-between}.inbox-header h1{margin:0;font-size:17px;letter-spacing:-.02em}.inbox-header span{display:block;margin-top:3px;color:#929baa;font-size:10px}.inbox-status{display:flex;align-items:center;gap:5px;color:#6c7785;font-size:9px}.tiny-green-dot{width:6px;height:6px}.search-wrapper{height:38px;margin:0 13px 9px;padding:0 10px;display:flex;align-items:center;gap:7px;background:#f6f8fa;border:1px solid #e1e6ec;border-radius:8px}.search-icon{color:#98a2af;font-size:15px}.search-wrapper input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#1d2733;font-size:11px}.clear-search{border:0;background:transparent;color:#8d97a4;font-size:16px}.inbox-filter{height:37px;padding:0 13px;display:flex;gap:4px;border-bottom:1px solid #edf0f3}.inbox-filter button{border:0;background:transparent;color:#87919e;font-size:10px;padding:0 9px;border-bottom:2px solid transparent}.inbox-filter button:disabled{cursor:default;opacity:.45}.inbox-filter .filter-active{color:#111827;font-weight:700;border-bottom-color:#111827}.conversation-list{min-height:0;flex:1;overflow-y:auto}.conversation-card{width:100%;padding:12px 13px;display:flex;gap:10px;border:0;border-bottom:1px solid #f0f2f5;background:#fff;text-align:left}.conversation-card:hover{background:#f8fafb}.conversation-card.selected{background:#effaf3;box-shadow:inset 3px 0 #22a85a}.avatar{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:50%;background:#e9edf2;color:#536171;font-size:11px;font-weight:800}.conversation-info{min-width:0;flex:1}.conversation-name-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.conversation-name-row strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#26303b;font-size:12px}.conversation-name-row span{color:#a0a8b3;font-size:9px;white-space:nowrap}.conversation-preview{margin-top:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#727d8b;font-size:10px}.conversation-phone{margin-top:4px;color:#a0a8b3;font-size:9px}.list-empty{min-height:180px;padding:25px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;text-align:center;color:#98a1ad;font-size:10px}.list-empty strong{color:#687483;font-size:11px}.empty-symbol{margin-bottom:5px;font-size:26px;color:#c0c7d0}.chat-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:#f5f7f9}.chat-header{height:72px;flex:0 0 72px;padding:0 19px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e3e8ed}.chat-header-left{gap:10px}.chat-avatar{width:39px;height:39px;flex-basis:39px}.chat-header h2{margin:0;font-size:13px}.chat-phone{display:flex;align-items:center;gap:5px;margin-top:4px;color:#8b95a2;font-size:9px}.online-mini{width:5px;height:5px}.chat-actions{display:flex;gap:3px}.chat-actions button{width:32px;height:32px;border:0;border-radius:7px;background:transparent;color:#7b8694;font-size:17px}.chat-actions button:hover{background:#f2f4f6}.message-area{min-height:0;flex:1;overflow-y:auto;padding:22px 28px}.date-divider{display:flex;align-items:center;gap:10px;margin:8px 0 18px;color:#a0a8b3;font-size:9px}.date-divider:before,.date-divider:after{content:"";height:1px;flex:1;background:#e5e9ed}.date-divider span{white-space:nowrap}.message-row{display:flex;margin-bottom:8px}.message-row.inbound{justify-content:flex-start}.message-row.outbound{justify-content:flex-end}.message-bubble{max-width:min(70%,600px);padding:9px 11px 6px;border-radius:10px;border:1px solid #e1e6eb;background:#fff;box-shadow:0 1px 2px #00000006}.outbound .message-bubble{border-color:#c9ead5;background:#dcfce7}.message-body{color:#27313d;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word}.media-message{color:#7d8794;font-style:italic}.message-meta{margin-top:3px;color:#9ca5b0;font-size:8px;text-align:right}.message-status{margin-left:4px;letter-spacing:-2px}.chat-loading,.chat-empty{height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#98a1ad;font-size:10px}.chat-empty strong{color:#687483;font-size:12px}.chat-empty-icon{color:#c3cad2;font-size:28px;margin-bottom:5px}.loading-spinner{width:19px;height:19px;border:2px solid #e1e6eb;border-top-color:#667281;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:4px}@keyframes spin{to{transform:rotate(360deg)}}.composer{min-height:61px;padding:9px 13px 5px;display:flex;align-items:center;gap:7px;background:#fff;border-top:1px solid #e2e7ed}.composer input{height:39px;min-width:0;flex:1;padding:0 12px;outline:0;border:1px solid #dfe4e9;border-radius:8px;background:#f8fafb;color:#202a35;font-size:11px}.composer input:focus{border-color:#bbc4ce;background:#fff}.composer-action,.emoji-button,.send-button{width:37px;height:37px;flex:0 0 37px;border-radius:8px}.composer-action,.emoji-button{border:0;background:#f1f3f6;color:#687483}.send-button{border:0;background:#111827;color:#fff;font-size:14px}.composer-note{height:18px;padding-right:14px;color:#a1a9b4;background:#fff;text-align:right;font-size:8px}.customer-panel{min-width:0;min-height:0;overflow-y:auto;background:#fff;border-left:1px solid #e2e7ed}.customer-header{height:72px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6eaee}.customer-header strong{font-size:13px}.customer-header button{width:30px;height:30px;border:0;background:transparent;color:#7f8996;font-size:17px}.profile-card{padding:22px 18px 18px;text-align:center;border-bottom:1px solid #eef1f4}.profile-avatar{width:66px;height:66px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:#e9edf2;color:#526070;font-size:17px;font-weight:800}.profile-card h2{margin:0;font-size:15px}.profile-card>span{display:block;margin-top:4px;color:#8d97a4;font-size:10px}.crm-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:11px 13px;border-bottom:1px solid #eef1f4}.crm-actions button{height:31px;border:1px solid #e2e6eb;border-radius:7px;background:#fff;color:#697585;font-size:9px}.crm-actions button span{margin-right:4px}.customer-section{padding:15px 17px;border-bottom:1px solid #eef1f4}.section-title{margin-bottom:12px;color:#99a2ae;font-size:8px;font-weight:800;letter-spacing:.1em}.info-row{margin-bottom:11px}.info-row:last-child{margin-bottom:0}.info-row span{display:block;margin-bottom:3px;color:#9aa3af;font-size:9px}.info-row strong{display:block;color:#374151;font-size:10px;font-weight:600;word-break:break-word}.identity-item{margin-bottom:10px}.identity-item:last-child{margin-bottom:0}.identity-item>span{display:block;margin-bottom:4px;color:#9aa3af;font-size:8px}.identity-item code{display:block;padding:6px 7px;overflow-wrap:anywhere;border-radius:5px;background:#f5f7f9;color:#687483;font-size:8px}.customer-empty{padding:50px 20px;color:#9ba4b0;text-align:center;font-size:10px}.no-selection{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#99a2ad}.no-selection-logo{width:48px;height:48px;margin-bottom:13px;display:grid;place-items:center;border-radius:12px;background:#111827;color:#fff;font-size:18px;font-weight:800}.no-selection h2{margin:0;color:#596474;font-size:17px}.no-selection p{max-width:280px;margin:6px 0 0;font-size:10px;line-height:1.5}@media(max-width:1150px){.crm-layout{grid-template-columns:285px minmax(400px,1fr)}.customer-panel{display:none}}@media(max-width:760px){body{overflow:auto}.topbar{height:60px;flex-basis:60px;padding:0 13px}.brand-subtitle,.wa-connection small,.top-icon{display:none}.crm-layout{grid-template-columns:1fr}.inbox-panel{display:none}.message-area{padding:16px 12px}.message-bubble{max-width:84%}}