:root{--bg:#eef1f7;--bg-tint:#e8ecf6;--panel:#fff;--panel-soft:#f5f7fb;--panel-softer:#fafbfd;--border:#dfe3ec;--border-strong:#ccd2de;--text:#0b1220;--text-soft:#2a3547;--muted:#56627a;--brand:#0ea371;--brand-strong:#06875c;--brand-deep:#056b4a;--brand-soft:#e3f6ee;--brand-soft-2:#d4f1e4;--accent:#6366f1;--bubble-in:#fff;--bubble-out:#d6f5e3;--bubble-out-2:#c7f0d8;--danger:#e02d3c;--danger-soft:#fde7e9;--warn:#d97706;--shadow-sm:0 1px 2px #0f172a1a;--shadow-md:0 6px 20px #0f172a1a;--shadow-lg:0 24px 60px #0f172a29;--radius:14px;--radius-sm:10px;--radius-lg:20px;--ring:0 0 0 3px #0ea3712e}*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{color:var(--text);background:radial-gradient(1200px 600px at 0% -10%, #0ea3711a, transparent 60%), radial-gradient(1100px 600px at 100% 0%, #6366f11a, transparent 55%), linear-gradient(180deg, var(--bg-tint), var(--bg));-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s,transform .12s}input,textarea{transition:border-color .16s,box-shadow .16s,background-color .16s}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background-color:#71809a59;background-clip:padding-box;border:3px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background-color:#71809a8c}.app-shell{background:var(--panel);border-radius:var(--radius-lg);width:min(1520px,100vw - 40px);height:calc(100dvh - 40px);box-shadow:var(--shadow-lg);border:1px solid #ffffffb3;grid-template-columns:minmax(330px,400px) minmax(0,1fr) 330px;margin:20px auto;display:grid;position:relative;overflow:hidden}.chat-list-panel,.detail-panel{background:var(--panel);min-width:0;min-height:0}.chat-list-panel{border-right:1px solid var(--border);background:linear-gradient(180deg, var(--panel-softer), var(--panel));grid-template-rows:auto auto minmax(0,1fr);display:grid}.detail-panel{border-left:1px solid var(--border);background:linear-gradient(180deg, var(--panel-softer), var(--panel));overflow-y:auto}.panel-header,.conversation-header{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#ffffffb8;align-items:center;gap:12px;min-height:72px;padding:14px 18px;display:flex}.panel-header{justify-content:space-between}.user-header{align-items:center;gap:12px;min-width:0;display:flex}.panel-header h1,.conversation-title h2,.customer-card h3{letter-spacing:-.01em;margin:0;font-size:18px;font-weight:750;line-height:1.25}.eyebrow,.conversation-title span,.customer-card p,.message-time,.chat-preview,.chat-time,dt{color:var(--muted);font-size:12px}.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--brand-strong);margin:0 0 2px;font-weight:700}.icon-button,.back-button{width:38px;height:38px;color:var(--muted);background:0 0;border:0;border-radius:11px;place-items:center;display:inline-grid}.icon-button:hover,.back-button:hover,.small-button:hover{background:var(--panel-soft);color:var(--text)}.icon-button:active{transform:scale(.94)}.back-button{font-size:30px;display:none}.avatar,.large-avatar{color:#fff;box-shadow:inset 0 0 0 2px #ffffff59, var(--shadow-sm);background:linear-gradient(135deg,#5b8def,#6366f1);border-radius:50%;flex:none;place-items:center;font-weight:700;display:inline-grid}.avatar{width:46px;height:46px;font-size:14px}.large-avatar{width:92px;height:92px;margin:0 auto 14px;font-size:26px}.brand-avatar{background:linear-gradient(135deg, var(--brand), var(--brand-deep))}.main-tabs{border-radius:var(--radius);background:var(--panel-soft);box-shadow:inset 0 0 0 1px var(--border);grid-template-columns:1fr 1fr;gap:6px;margin:14px 14px 0;padding:5px;display:grid}.main-tab{height:38px;color:var(--muted);background:0 0;border:0;border-radius:10px;font-size:13px;font-weight:700}.main-tab:hover{color:var(--text)}.main-tab.active{color:var(--brand-deep);background:var(--panel);box-shadow:var(--shadow-sm)}.sidebar-view{min-height:0;display:none}.sidebar-view.active{grid-template-rows:auto auto minmax(0,1fr);display:grid}#ordersView.active{grid-template-rows:auto minmax(0,1fr)}.search-box{border-radius:var(--radius);background:var(--panel-soft);height:44px;box-shadow:inset 0 0 0 1px var(--border);color:var(--muted);align-items:center;gap:10px;margin:14px 14px 10px;padding:0 14px;display:flex}.search-box:focus-within{background:var(--panel);box-shadow:inset 0 0 0 1px var(--brand), var(--ring);color:var(--brand-strong)}.search-icon{fill:currentColor;flex:none;width:20px;height:20px}.header-search-button svg{fill:currentColor;width:24px;height:24px}.search-box input{width:100%;min-width:0;color:var(--text);background:0 0;border:0;outline:0}.search-box input::placeholder{color:var(--muted)}.tabs{gap:8px;padding:0 14px 12px;display:flex;overflow-x:auto}.tab,.small-button{background:var(--panel-soft);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border);border:0;border-radius:999px;font-size:13px;font-weight:650}.tab{white-space:nowrap;padding:8px 16px}.tab:hover{color:var(--text)}.tab.active{color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-strong));box-shadow:0 4px 12px #0ea3714d}.chat-list{min-height:0;padding:6px 10px 14px;overflow-y:auto}.order-list{min-height:0;padding:4px 14px 14px;overflow-y:auto}.order-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow-sm);gap:10px;padding:14px;transition:box-shadow .16s,transform .12s,border-color .16s;display:grid;position:relative}.order-item:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}.order-item.completed{opacity:.62;border-color:var(--border);background:var(--panel-soft);box-shadow:none}.order-item+.order-item{margin-top:10px}.order-customer{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:750;overflow:hidden}.order-mainline{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.order-customer-wrap{gap:4px;min-width:0;display:grid}.order-check{border:1px solid var(--border-strong);width:36px;height:30px;color:var(--muted);background:var(--panel);border-radius:9px;place-items:center;display:inline-grid}.order-check:hover{color:#fff;background:var(--brand-strong);border-color:var(--brand-strong)}.order-check.checked{color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-strong));border-color:var(--brand-strong);box-shadow:0 4px 10px #0ea3714d}.order-check svg{fill:currentColor;width:18px;height:18px}.order-qty{grid-template-columns:1fr 1fr;gap:8px;display:grid}.order-qty span{border-radius:var(--radius-sm);min-height:42px;color:var(--brand-deep);background:var(--brand-soft);text-align:center;justify-content:center;align-items:center;gap:6px;display:flex}.order-item.completed .order-qty span{color:var(--brand-deep);background:var(--brand-soft)}.order-qty strong{font-size:20px;line-height:1}.order-qty em{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-style:normal;font-weight:800}.order-note{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.35;overflow:hidden}.chat-item{border-radius:var(--radius);text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;width:100%;margin-bottom:2px;padding:11px 12px;transition:background-color .14s;display:grid}.chat-item:hover{background:var(--panel-soft)}.chat-item.active{background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-soft-2)}.chat-main{min-width:0}.chat-topline{justify-content:space-between;align-items:center;gap:8px;display:flex}.chat-name,.chat-preview{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-name{letter-spacing:-.01em;font-weight:680}.chat-item.active .chat-name{color:var(--brand-deep)}.chat-preview{margin-top:3px}.chat-time{flex:none}.chat-side{align-content:start;justify-items:end;gap:8px;display:grid}.unread-badge{color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-strong));text-align:center;border-radius:999px;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:700;line-height:20px;box-shadow:0 2px 6px #0ea37166}.pill,.tag{border-radius:999px;align-items:center;width:fit-content;font-size:12px;font-weight:650;display:inline-flex}.contact-check{width:36px;height:30px;color:var(--muted);background:var(--panel-soft);box-shadow:inset 0 0 0 1px var(--border);border:1px solid #0000;border-radius:9px;place-items:center;display:inline-grid}.contact-check:hover{color:var(--brand-strong);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-soft-2)}.chat-item.active .contact-check{background:var(--panel);box-shadow:inset 0 0 0 1px var(--border-strong), var(--shadow-sm)}.contact-check.checked{color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-strong));box-shadow:0 3px 8px #0ea3714d}.chat-item.active .contact-check.checked{background:linear-gradient(135deg, var(--brand), var(--brand-strong))}.contact-check svg{fill:currentColor;width:18px;height:18px}.conversation-panel{background:radial-gradient(circle at 18px 18px,#0f172a09 1.4px,#0000 1.4px) 0 0/30px 30px,linear-gradient(#f4f6fb,#eef1f8) 0 0/100% 100%;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;display:grid}.conversation-title{flex:1;min-width:0}.conversation-title h2,.conversation-title span{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.header-actions{gap:8px;display:flex}.small-button{height:38px;padding:0 14px}.message-area{flex-direction:column;gap:8px;padding:24px 8%;display:flex;overflow-y:auto}.date-chip{color:var(--text-soft);box-shadow:var(--shadow-sm);background:#ffffffeb;border-radius:999px;align-self:center;margin:4px 0 8px;padding:6px 14px;font-size:12px;font-weight:600}.message-row{align-items:flex-end;gap:8px;display:flex}.message-row.in{align-self:flex-start}.message-row.out{justify-content:flex-end;align-self:flex-end}.message{max-width:min(560px,82%);box-shadow:var(--shadow-sm);border-radius:16px;padding:9px 13px 7px}.message.in{background:var(--bubble-in);border:1px solid var(--border);border-bottom-left-radius:6px;align-self:flex-start}.message.out{background:linear-gradient(135deg, var(--bubble-out), var(--bubble-out-2));border:1px solid #06875c2e;border-bottom-right-radius:6px}.message p{margin:0;font-size:14px;line-height:1.45}.message-time{text-align:right;margin-top:4px;display:block}.message-signature{color:var(--brand-deep);margin-top:6px;font-size:12px;font-weight:700;display:block}.composer{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border);background:#ffffffb8;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:72px;padding:12px 16px;display:grid}.plus-button{background:var(--panel-soft);box-shadow:inset 0 0 0 1px var(--border);border-radius:50%;font-size:26px;line-height:1}.plus-button:hover{color:var(--brand-strong);background:var(--brand-soft)}.quick-overlay{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0f172a52;place-items:center;padding:18px;display:grid;position:absolute;inset:0}.quick-overlay[hidden]{display:none}.quick-popup{border:1px solid var(--border);border-radius:var(--radius);width:270px;box-shadow:var(--shadow-lg);background:#fff;padding:10px;animation:.16s popIn}@keyframes popIn{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.quick-popup-wide{width:370px;padding:16px}.quick-menu-item,.reply-option{text-align:left;background:0 0;border:0;width:100%}.quick-menu-item{border-radius:var(--radius-sm);grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;padding:12px 10px;display:grid}.quick-menu-item svg{width:40px;height:40px;fill:var(--brand-strong);background:var(--brand-soft);box-sizing:border-box;border-radius:11px;padding:9px}.reply-option{border-radius:var(--radius-sm);gap:4px;padding:12px;display:grid}.reply-option+.reply-option{margin-top:4px}.quick-menu-item:hover,.reply-option:hover{background:var(--panel-soft)}.quick-menu-item strong,.popup-title strong,.reply-option strong{font-size:14px;font-weight:700}.reply-option span{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.popup-title{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;margin:-2px 0 12px;padding:0 2px 12px;display:flex}.popup-close{width:30px;height:30px;color:var(--muted);background:var(--panel-soft);border:0;border-radius:9px;place-items:center;display:inline-grid}.popup-close:hover{color:var(--danger);background:var(--danger-soft)}.quick-input-grid{grid-template-columns:1fr 1fr;gap:12px;padding:0 0 14px;display:grid}.quick-input-grid label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;gap:6px;font-size:12px;font-weight:700;display:grid}.quick-input-grid input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--panel-soft);outline:0;width:100%;height:50px;padding:0 14px;font-size:16px;font-weight:700}.quick-input-grid input:focus{border-color:var(--brand);box-shadow:var(--ring);background:#fff}.popup-contact-meta{border-radius:var(--radius-sm);background:var(--brand-soft);gap:4px;margin-bottom:12px;padding:12px 14px;display:grid}.popup-contact-meta span,.popup-contact-field span{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:700}.popup-contact-meta span{color:var(--brand-strong)}.popup-contact-meta strong{font-size:15px}.popup-contact-field{gap:6px;display:grid}.popup-contact-field input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--panel-soft);outline:0;width:100%;height:46px;padding:0 14px}.popup-contact-field input:focus{border-color:var(--brand);box-shadow:var(--ring);background:#fff}.popup-contact-actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}.apply-quick-input{border-radius:var(--radius-sm);color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-strong));border:0;width:100%;height:48px;margin:0;font-weight:700;box-shadow:0 8px 18px #0ea3714d}.apply-quick-input:hover{filter:brightness(1.05)}.apply-quick-input:active{transform:translateY(1px)}.composer textarea{border:1px solid var(--border);resize:none;width:100%;min-width:0;height:46px;box-shadow:var(--shadow-sm);background:#fff;border-radius:999px;outline:0;padding:12px 16px;line-height:1.45;overflow:hidden}.composer textarea:focus{border-color:var(--brand);box-shadow:var(--ring)}.send-button{color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-strong));border:0;border-radius:50%;place-items:center;width:46px;height:46px;padding:0;display:inline-grid;box-shadow:0 8px 18px #0ea37159}.send-button:hover{filter:brightness(1.06)}.send-button:active{transform:scale(.94)}.send-button svg{fill:currentColor;width:22px;height:22px}.customer-card{text-align:center;border-bottom:1px solid var(--border);background:radial-gradient(140px 90px at 50% -10%, var(--brand-soft), transparent 70%);padding:28px 20px 24px}.customer-card p{margin:4px 0 12px}.contact-editor{gap:10px;display:grid}.contact-editor input{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--panel-soft);outline:0;width:100%;height:44px;padding:0 14px}.contact-editor input:focus{border-color:var(--brand);box-shadow:var(--ring);background:#fff}.contact-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.small-button.primary{color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand-strong));box-shadow:0 4px 12px #0ea37147}.small-button.primary:hover{filter:brightness(1.05);color:#fff}.small-button.danger{color:var(--danger);background:var(--danger-soft);box-shadow:none}.small-button.danger:hover{color:#fff;background:var(--danger)}.pill{color:var(--brand-deep);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-soft-2);padding:7px 14px}.detail-section{border-bottom:1px solid var(--border);padding:18px 20px}.detail-section h4{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 14px;font-size:13px;font-weight:700}dl{gap:12px;margin:0;display:grid}dl div{justify-content:space-between;align-items:center;gap:16px;display:flex}dd{text-align:right;margin:0;font-size:13px;font-weight:680}.tag-list{flex-wrap:wrap;gap:8px;display:flex}.tag{color:var(--text-soft);background:var(--panel-soft);box-shadow:inset 0 0 0 1px var(--border);padding:6px 12px}.detail-section textarea{resize:vertical;border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:100%;min-height:116px;color:var(--text);background:var(--panel-soft);outline:0;padding:12px 14px;line-height:1.5}.detail-section textarea:focus{border-color:var(--brand);box-shadow:var(--ring);background:#fff}.empty-state{color:var(--muted);text-align:center;padding:40px 24px;font-size:13px}@media (width<=1180px){.app-shell{grid-template-columns:360px minmax(0,1fr)}.detail-panel{display:none}}@media (width<=760px){body{background:var(--panel)}.app-shell{width:100vw;height:100dvh;box-shadow:none;border:0;border-radius:0;margin:0;display:block}.chat-list-panel,.conversation-panel{width:100%;height:100%}.conversation-panel,.app-shell.chat-open .chat-list-panel{display:none}.app-shell.chat-open .conversation-panel{display:grid}.back-button{display:inline-grid}.message-area{padding:18px 12px}.message{max-width:88%}.quick-popup{width:min(320px,100vw - 36px)}.header-actions .small-button:not(.contact-manage-button){display:none}}