:root{--bg: #f3efe6;--paper: #fffcf7;--ink: #17241e;--muted: #5d6b64;--line: #e4ddd0;--sidebar: #0f71b9;--sidebar-2: #0c5d98;--leaf: #0e7a49;--leaf-dark: #0b5e38;--mint: #e7f5ec;--shadow: 0 1px 2px rgba(23, 36, 30, .04), 0 12px 32px rgba(23, 36, 30, .05);color:var(--ink);background:var(--bg);font-family:IBM Plex Sans TC,PingFang TC,Microsoft JhengHei,sans-serif;font-size:16px;line-height:1.5}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{min-width:1100px}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}h1,h2,p{margin:0}h1{font-size:32px;font-weight:600;letter-spacing:-.03em}h2{font-size:18px;font-weight:600}.app{display:flex;height:100vh;min-height:0;background:var(--bg)}.workspace{flex:1;min-width:0;min-height:0}.sidebar{width:248px;flex:none;background:var(--sidebar);color:#fff;display:flex;flex-direction:column;padding:22px 12px 14px;font-family:Open Sans,Noto Sans TC,Microsoft JhengHei,sans-serif}.brand{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 8px 22px}.brand-logo{display:block;width:196px;height:auto}.brand-name{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;width:100%;color:#fffffff0;font-size:15px;font-weight:600;letter-spacing:.01em}.brand-chat{width:22px;height:22px;fill:#fff;flex:none}.nav{display:flex;flex-direction:column;gap:2px}.nav-btn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:#ffffffe0;border-radius:8px;padding:8px 10px;text-align:left}.nav-btn span{flex:1}.nav-btn b{background:#fff;color:#0f71b9;border-radius:99px;min-width:18px;text-align:center;font-size:13px;padding:0 5px}.nav-btn.active,.nav-btn:hover{background:var(--sidebar-2);color:#fff}.side-foot{margin-top:auto;padding:12px 8px 0}.side-foot p{color:#ffffffb8;font-size:14px;margin-top:12px}.side-user{display:flex;gap:8px;align-items:center}.side-user strong,.side-user em{display:block;font-style:normal}.side-user em{color:#ffffffbf;font-size:14px}.dot{width:7px;height:7px;border-radius:99px;display:inline-block;margin-right:4px;background:#8eaa9c}.dot-online{background:#3ddc84}.dot-away{background:#e7c56a}.dot-offline{background:#6d7f76}.avatar{width:36px;height:36px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:600;flex:none}.avatar.sm{width:32px;height:32px;font-size:15px}.avatar.lg{width:56px;height:56px;font-size:22px}.page{height:100%;overflow:auto;padding:28px 32px 48px}.page-head{margin-bottom:22px}.kicker{color:var(--leaf);font-size:14px;font-weight:600;letter-spacing:.08em}.page-sub{color:var(--muted);margin-top:6px;max-width:680px}.metric-strip{display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin-bottom:18px}.metric-strip>div{padding:16px 18px;border-right:1px solid var(--line)}.metric-strip>div:last-child{border-right:0}.metric-strip span,.metric-note em{display:block;color:var(--muted);font-size:14px;font-style:normal}.metric-strip strong{display:block;font-size:34px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.metric-note strong{color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;margin-bottom:16px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px 18px}.panel-h,.panel-h h2{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-h{margin-bottom:12px;color:var(--muted);font-size:14px}.panel-h h2{color:var(--ink);margin:0}.bars{display:flex;flex-direction:column;gap:10px}.bar-row{display:grid;grid-template-columns:42px 88px 1fr 24px;gap:8px;align-items:center}.bar{height:8px;background:#efeae0;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;border-radius:99px}.fill-whatsapp{background:#1f8f55}.fill-instagram{background:#b14b78}.fill-messenger{background:#3b7ddd}.fill-web{background:#c47b12}.queue,.plain-list,.broadcast-list,.orders,.hint-list,.channel-list{list-style:none;margin:0;padding:0}.queue button{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;text-align:left;border:0;background:transparent;padding:8px 4px;border-bottom:1px solid var(--line)}.queue strong,.queue em{display:block;font-style:normal}.queue em{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}.plain-list li,.broadcast-list li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.plain-list em,.broadcast-list em{color:var(--muted);font-style:normal;font-size:14px}.mark{display:inline-grid;place-items:center;min-width:32px;height:22px;padding:0 6px;border-radius:99px;font-size:12px;font-weight:600;letter-spacing:.02em}.mark-whatsapp{background:#e5f6ea;color:#0e7a49}.mark-instagram{background:#fbe8f0;color:#9d3d68}.mark-messenger{background:#e7f0ff;color:#245bb5}.mark-web{background:#f8efdc;color:#8a5a12}.status{font-style:normal;font-size:14px;color:var(--muted)}.status-open{color:#0e7a49}.status-pending{color:#9a6410}.status-resolved{color:#6d7b74}.pill{font-weight:600;font-size:13px;border-radius:99px;padding:2px 8px;background:#efeae0;color:#5d6b64;white-space:nowrap}.pill-approved{background:var(--mint);color:var(--leaf-dark)}.pill-pending{background:#fbf3e4;color:#8a5a12}.pill-rejected{background:#fdecea;color:#9f2d2d}.inbox{height:100%;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr) 280px;background:var(--paper)}.conv-col,.profile{min-height:0;display:flex;flex-direction:column}.conv-col{border-right:1px solid var(--line);background:#fbf8f2}.profile{border-left:1px solid var(--line);overflow:auto;padding:18px 16px 28px;background:var(--paper)}.conv-head{padding:16px 14px 8px}.conv-head h1{font-size:24px;margin-bottom:10px}.conv-scroll{overflow:auto}.search,.field input,.field textarea,.field select,.composer-tools select{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.chip,.label-chip,.btn,.text-btn{border:1px solid var(--line);background:#fff;border-radius:99px;padding:4px 10px}.chip.on,.label-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.conv-item{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 14px}.conv-item.active{background:#e8f5ee}.conv-top,.conv-meta,.preview{display:flex}.conv-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.conv-top{justify-content:space-between;gap:8px}.conv-top em,.preview,.conv-meta{color:var(--muted);font-style:normal;font-size:14px}.preview{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-meta{gap:6px;align-items:center;flex-wrap:wrap}.mini-tag{font-style:normal;background:#efeae0;border-radius:99px;padding:0 6px}.unread{align-self:center;background:var(--leaf);color:#fff;border-radius:99px;min-width:18px;text-align:center;font-size:13px}.thread{min-width:0;min-height:0;display:flex;flex-direction:column;background:#f7f3eb}.thread[data-channel=whatsapp]{background:#efeae2}.thread-head{display:flex;gap:10px;align-items:center;padding:14px 16px;background:var(--paper);border-bottom:1px solid var(--line)}.thread-head p,.profile-id p{color:var(--muted);font-size:14px}.thread-empty,.empty{margin:auto;color:var(--muted);text-align:center;padding:24px}.transcript{flex:1;overflow:auto;padding:18px 18px 8px;display:flex;flex-direction:column;gap:8px}.bubble{display:flex;flex-direction:column;align-items:flex-start;width:max-content;max-width:min(440px,84%);padding:8px 10px 6px;border-radius:12px}.bubble p{white-space:pre-wrap;max-width:100%}.bubble time,.who{color:var(--muted);font-size:13px}.bubble.customer{background:#fff;align-self:flex-start;border:1px solid rgba(23,36,30,.05)}.bubble.agent{background:#d9f3e3;align-self:flex-end;align-items:flex-end}.bubble.agent p{align-self:stretch}.bubble.sys{align-self:center;background:transparent;color:var(--muted);font-size:14px;text-align:center;max-width:100%}.banner{background:#fbf3e4;color:#6d5016;border-radius:10px;padding:8px 10px;font-size:14px}.composer-wrap{position:relative;background:var(--paper);border-top:1px solid var(--line);padding:10px 12px 12px}.composer-tools{display:flex;gap:8px;margin-bottom:8px}.composer-tools select{max-width:220px}.composer{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.composer textarea{border:1px solid var(--line);border-radius:12px;padding:10px;resize:vertical;min-height:72px}.quick-pop{position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px}.quick-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:8px 10px}.quick-pop button:hover{background:var(--mint)}.profile-id{margin-bottom:16px}.profile-id h2{margin:8px 0 2px}.mono{font-variant-numeric:tabular-nums}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:15px}.field>span,.field small,.muted,.form small{color:var(--muted)}.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.seg button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 4px}.seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.label-row{display:flex;flex-wrap:wrap;gap:6px}.orders li{padding:8px 0;border-bottom:1px solid var(--line)}.orders strong,.orders span,.orders em{display:block;font-style:normal}.orders em{color:var(--muted);font-size:14px}.btn{border-radius:10px;padding:8px 12px}.btn.primary{background:var(--leaf);color:#fff;border-color:var(--leaf)}.btn.primary:disabled{opacity:.45;cursor:default}.btn.ghost{background:#fff}.text-btn{border:0;background:transparent;color:var(--leaf);padding:0}.contacts-layout,.template-layout{display:grid;grid-template-columns:1.4fr 320px;gap:16px;align-items:start}.table-wrap{overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:16px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-weight:500;font-size:14px}tr.selected{background:#e8f5ee}tbody tr{cursor:pointer}.person{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;width:100%;text-align:left}.contact-card h2{margin:8px 0 2px}.contact-card dl{margin:14px 0}.contact-card dl div{margin-bottom:8px}.contact-card dt{color:var(--muted);font-size:14px}.contact-card dd{margin:0}.form h2,.template-preview h2,.panel>h2{margin-bottom:12px}.edition-note{margin-top:8px}.edition-note a{color:var(--leaf)}.demo-reset{margin-top:14px}.preview-box{background:#f7f3eb;border-radius:12px;padding:10px 12px;margin-bottom:12px}.preview-box b{display:block;font-size:14px;margin-bottom:4px}.form-error{color:#9f2d2d;font-size:15px}.hours{display:grid;grid-template-columns:1fr 1fr;gap:10px}.check{display:flex;gap:8px;align-items:center;margin:8px 0 12px}.broadcast-list li{grid-template-columns:1.3fr auto auto auto}.broadcast-stats{display:flex;gap:10px;color:var(--muted);font-size:14px}.template-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}.template-list button{width:100%;text-align:left;border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:12px}.template-list button.on{border-color:var(--leaf);background:var(--mint)}.template-list strong,.template-list em{display:block;font-style:normal}.template-list em{color:var(--muted);font-size:14px;margin:2px 0 8px}.phone{margin:12px 0;background:#d9f3e3;border-radius:14px 14px 4px;padding:12px;max-width:360px}.phone mark{background:#fff4cc;border-radius:4px;padding:0 3px}.hint-list{padding-left:18px;color:var(--muted)}.hint-list li{margin:6px 0}.flow-grid,.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.flow-card ol{margin:8px 0 0;padding-left:18px}.flow-card li{margin:6px 0}.flow-card.off{opacity:.62}.trigger{color:var(--leaf-dark);font-size:15px}.agent-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.presence-line{display:flex;align-items:center}.load{color:var(--muted)}.channel-list li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.channel-list strong,.channel-list em{display:block;font-style:normal}.channel-list em{color:var(--muted);font-size:14px}.toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#fff;border-radius:12px;padding:12px 14px;max-width:320px;box-shadow:var(--shadow)}:focus-visible{outline:2px solid var(--leaf);outline-offset:2px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#d9d1c3;border-radius:99px}