*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary:#25d366;--color-primary-dark:#128c7e;--color-primary-text:#fff;--color-bg:#f0f2f5;--color-surface:#fff;--color-sidebar-bg:#fff;--color-thread-bg:#efeae2;--color-bubble-mine:#dcf8c6;--color-bubble-theirs:#fff;--color-text:#111b21;--color-text-muted:#667781;--color-time:#667781;--color-border:#e9edef;--radius-bubble:8px;--radius-lg:12px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-base:15px}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font);font-size:var(--font-size-base);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;overscroll-behavior:none}.chat-layout{height:100dvh;display:flex;overflow:hidden}.chat-sidebar{border-right:1px solid var(--color-border);background:var(--color-sidebar-bg);flex-direction:column;flex-shrink:0;width:100%;display:flex;overflow:hidden}.chat-main{background:var(--color-thread-bg);flex-direction:column;flex:1;display:flex;overflow:hidden}@media (width<=767px){.mobile-hidden{display:none!important}}@media (width>=768px){.chat-sidebar{width:360px}.mobile-hidden{display:flex!important}.back-btn{display:none!important}}.sidebar{flex-direction:column;height:100%;display:flex;overflow:hidden}.sidebar-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;justify-content:space-between;align-items:center;height:60px;padding:10px 16px;display:flex}.sidebar-title{color:var(--color-text);text-align:center;flex:1;font-size:20px;font-weight:600}.back-to-site{color:var(--color-primary-dark);white-space:nowrap;border-radius:8px;align-items:center;gap:4px;padding:6px 8px;font-size:13px;font-weight:500;text-decoration:none;transition:background .15s;display:flex}.back-to-site:hover{background:#128c7e14}.sidebar-loading{flex-direction:column;gap:8px;padding:12px;display:flex}.skeleton-row{border-radius:var(--radius-lg);background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;height:68px;animation:1.2s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.sidebar-empty{text-align:center;color:var(--color-text-muted);padding:32px 24px;line-height:1.6}.hint{color:var(--color-text-muted);margin-top:6px;font-size:13px}.conversation-list{flex:1;list-style:none;overflow-y:auto}.conversation-row{cursor:pointer;border-bottom:1px solid var(--color-border);outline:none;align-items:center;gap:12px;padding:12px 16px;transition:background .1s;display:flex}.conversation-row:hover,.conversation-row:focus-visible{background:#f5f6f6}.conversation-row.selected{background:#f0f2f5}.conversation-info{flex:1;min-width:0}.conversation-top{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.conversation-name{color:var(--color-text);white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.conversation-time{color:var(--color-text-muted);white-space:nowrap;flex-shrink:0;font-size:12px}.conversation-bottom{justify-content:space-between;align-items:center;gap:6px;margin-top:2px;display:flex}.conversation-preview{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:13px;overflow:hidden}.conversation-row.unread .conversation-name{color:var(--color-text);font-weight:700}.conversation-row.unread .conversation-preview{color:var(--color-text);font-weight:500}.unread-dot{background:var(--color-primary);border-radius:50%;flex-shrink:0;width:10px;height:10px}.conversation-row-wrap{border-bottom:1px solid var(--color-border);list-style:none}.conversation-row-wrap .conversation-row{border-bottom:none}.conv-delete-btn{width:32px;height:32px;color:var(--color-text-muted);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:opacity .15s,background .15s,color .15s;display:flex}.conv-delete-btn:hover,.conv-delete-btn:active{color:#dc3535;background:#dc35351a}.conversation-row:hover .conv-delete-btn,.conversation-row:focus-within .conv-delete-btn{opacity:1}@media (hover:none){.conv-delete-btn{opacity:1}}.conversation-row-wrap.confirming .conv-delete-btn{opacity:1;color:#dc3535}.conv-delete-confirm{color:#7f1d1d;background:#fff5f5;border-top:1px solid #fecaca;justify-content:space-between;align-items:center;gap:8px;padding:8px 16px;font-size:13px;display:flex}.conv-delete-actions{flex-shrink:0;gap:8px;display:flex}.conv-delete-cancel{border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;background:#fff;border-radius:20px;padding:5px 12px;font-size:13px}.conv-delete-confirm-btn{color:#fff;cursor:pointer;background:#dc3535;border:none;border-radius:20px;padding:5px 12px;font-size:13px;font-weight:500}.conv-delete-confirm-btn:hover,.conv-delete-confirm-btn:active{background:#b82020}.avatar{border-radius:50%;flex-shrink:0;overflow:hidden}.avatar-img{object-fit:cover;width:100%;height:100%;display:block}.avatar-initial{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-weight:700;display:flex}.thread-layout{flex-direction:column;height:100%;display:flex;overflow:hidden}.thread-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);flex-shrink:0;align-items:center;gap:12px;height:60px;padding:10px 16px;display:flex}.back-btn{cursor:pointer;color:var(--color-primary-dark);background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:background .15s;display:flex}.back-btn:hover{background:var(--color-border)}.thread-header-info{flex-direction:column;min-width:0;display:flex}.thread-header-name{color:var(--color-text);white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:600;overflow:hidden}.thread-header-status{color:var(--color-text-muted);font-size:12px}.messages-container{scrollbar-width:thin;scrollbar-color:#0003 transparent;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1;padding:8px 0;overflow-y:auto}.messages-loading,.messages-empty{height:100%;color:var(--color-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;display:flex}.message-list{flex-direction:column;padding:0 4px;display:flex}.date-separator{justify-content:center;margin:12px 0;display:flex}.date-separator span{color:var(--color-text-muted);background:#e1f5feeb;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:500;box-shadow:0 1px 2px #00000014}.message-row{align-items:flex-end;gap:4px;margin:2px 8px;display:flex}.message-row.mine{justify-content:flex-end}.message-row.theirs{justify-content:flex-start}.message-avatar-space{flex-shrink:0;width:28px;margin-bottom:2px}.bubble-wrapper{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.message-row.theirs .bubble-wrapper{align-items:flex-start}.bubble-selected{opacity:.85;outline-offset:1px;outline:2px solid #0000001f}.delete-action-bar{justify-content:flex-end;display:flex}.message-row.theirs .delete-action-bar{justify-content:flex-start}.delete-action-btn{color:#fff;cursor:pointer;background:#dc3535;border:none;border-radius:20px;align-items:center;gap:5px;padding:5px 12px;font-size:13px;font-weight:500;transition:background .15s;display:inline-flex}.delete-action-btn:hover,.delete-action-btn:active{background:#b82020}.bubble{border-radius:var(--radius-bubble);word-break:break-word;max-width:min(85%,420px);padding:6px 10px 4px;position:relative;box-shadow:0 1px 1px #00000014}@media (width>=768px){.bubble{max-width:min(72%,420px)}}.bubble-mine{background:var(--color-bubble-mine);border-bottom-right-radius:2px}.bubble-theirs{background:var(--color-bubble-theirs);border-bottom-left-radius:2px}.bubble-sending{opacity:.7}.bubble-text{white-space:pre-wrap;margin-bottom:4px;font-size:14.5px;line-height:1.5}.bubble-time{color:var(--color-time);text-align:right;-webkit-user-select:none;user-select:none;margin-top:2px;font-size:11px;display:block}.message-input-bar{padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--color-border);flex-shrink:0;align-items:flex-end;gap:8px;display:flex}.message-input{resize:none;border:1px solid var(--color-border);font-family:var(--font);background:var(--color-bg);color:var(--color-text);-webkit-overflow-scrolling:touch;border-radius:20px;outline:none;flex:1;max-height:120px;padding:10px 16px;font-size:16px;line-height:1.4;transition:border-color .2s;overflow-y:auto}@media (width>=768px){.message-input{font-size:15px}}.message-input:focus{border-color:var(--color-primary)}.message-input::placeholder{color:var(--color-text-muted)}.send-btn{background:var(--color-primary);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:background .15s,transform .1s;display:flex}.send-btn:hover:not(:disabled){background:var(--color-primary-dark)}.send-btn:active:not(:disabled){transform:scale(.93)}.send-btn:disabled{cursor:not-allowed;background:#c4c4c4}.fullscreen-center{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;height:100dvh;padding:24px;display:flex}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--color-text-muted);font-size:14px}.error-icon{font-size:40px}.error-title{color:var(--color-text);font-size:20px;font-weight:600}.error-message{color:var(--color-text-muted);max-width:360px;line-height:1.6}.error-link{color:var(--color-primary-dark);border:2px solid var(--color-primary);border-radius:8px;margin-top:8px;padding:10px 20px;font-weight:500;text-decoration:none;transition:background .15s}.error-link:hover{background:#25d36614}.welcome-screen{text-align:center;height:100%;color:var(--color-text-muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex}.welcome-icon{font-size:56px;line-height:1}.welcome-screen h2{color:var(--color-text);font-size:22px;font-weight:600}.welcome-screen p{max-width:320px;font-size:14px;line-height:1.6}