:root{--theme-color:#1e40af;--theme-contrast:#ffffff;}
:root{--pink:var(--theme-color);--dark:#292933;--line:#e5e5ec;--bg:#f3f4f8;--muted:#858591}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#292933;font-family:"Microsoft JhengHei","PingFang TC",sans-serif}a{text-decoration:none;color:inherit}.layout{min-height:100vh;display:flex}.side{width:230px;position:fixed;inset:0 auto 0 0;background:var(--dark);color:#fff;display:flex;flex-direction:column;z-index:20}.brand{padding:22px 18px;font-size:19px;font-weight:800;border-bottom:1px solid #ffffff18}.brand span{color:var(--theme-color)}nav{padding:12px 0;flex:1}nav a{display:flex;gap:10px;align-items:center;padding:13px 20px;color:#d5d5dc}nav a.active,nav a:hover{background:#383844;color:#fff;border-left:3px solid var(--theme-color);padding-left:17px}.count{margin-left:auto;background:var(--theme-color);color:var(--theme-contrast);padding:2px 7px;border-radius:20px;font-size:12px}.logout{padding:16px}.logout button{width:100%;padding:10px;border:0;border-radius:7px;background:var(--theme-color);color:var(--theme-contrast);font-weight:700}.main{margin-left:230px;flex:1;min-width:0}.top{background:#fff;border-bottom:1px solid var(--line);padding:15px 22px;display:flex;justify-content:space-between;position:sticky;top:0;z-index:10}.top h1{font-size:18px;margin:0}.menu{display:none}.content{padding:22px}.panel{background:#fff;border-radius:11px;box-shadow:0 1px 4px #0000000c;margin-bottom:20px;overflow:hidden}.panel-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.panel-head h2{font-size:16px;margin:0}.panel-body{padding:18px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:14px;margin-bottom:20px}.stat{background:#fff;border-radius:10px;padding:18px}.stat .label{color:var(--muted);font-size:13px}.stat .num{font-weight:800;font-size:28px;margin-top:6px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}th{color:var(--muted);background:#fafafa}.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:7px;padding:9px 14px;font-weight:700;cursor:pointer}.btn-primary{background:var(--theme-color);color:var(--theme-contrast)}.btn-ghost{background:#fff;color:var(--theme-color);border:1px solid var(--theme-color)}.btn-danger{background:#fff;color:#b63030;border:1px solid #db9b9b}.btn-sm{padding:6px 10px;font-size:13px}.badge{display:inline-block;border-radius:20px;padding:3px 9px;font-size:12px;font-weight:700}.open{background:#dff5e6;color:#237342}.closed{background:#eee;color:#777}.form-row{margin-bottom:15px}.form-row label{display:block;font-weight:700;margin-bottom:6px}.form-row input,.form-row textarea,.form-row select,.filters input,.filters select{width:100%;padding:10px 11px;border:1px solid #d4d5dd;border-radius:7px;font:inherit}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-actions,.filters{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.filters input,.filters select{width:auto}.alert{padding:12px 15px;border-radius:8px;margin-bottom:16px}.success{background:#dff5e6;color:#237342}.error{background:#f9dddd;color:#9d3030}.err{color:#b63030;font-size:13px;margin-top:4px}.empty{text-align:center;color:var(--muted);padding:35px}.pagination{padding:14px}.pagination svg,.queue-pagination svg{width:1.1rem;height:1.1rem;display:inline-block;vertical-align:middle}.backdrop{display:none}.call-transfer-inbox{position:fixed;z-index:100;inset:0 0 auto;display:flex;justify-content:center;pointer-events:none;transform:translateY(calc(-100% - 30px));opacity:0;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .2s}.call-transfer-inbox.is-visible{transform:translateY(0);opacity:1}.call-transfer-card{width:min(410px,calc(100vw - 24px));margin-top:0;padding:22px 22px 20px;border:1px solid #ffffff24;border-radius:0 0 28px 28px;background:linear-gradient(155deg,#30333a,#101216 70%);color:#fff;text-align:center;box-shadow:0 22px 65px #0007;pointer-events:auto}.call-transfer-label{display:block;margin-bottom:13px;color:#bfc3cc;font-size:12px;letter-spacing:.12em}.call-transfer-card strong{display:block;font-size:21px}.call-transfer-card p{min-height:20px;margin:8px 0 19px;color:#cfd2d9;font-size:14px}.call-transfer-actions{display:flex;justify-content:center;gap:13px}.call-transfer-actions button{min-width:116px;border:0;border-radius:999px;padding:11px 18px;color:#fff;font:inherit;font-weight:800;cursor:pointer}.call-transfer-actions button:disabled{opacity:.5}.call-transfer-reject{background:#ff453a}.call-transfer-accept{background:#35c759}@media(max-width:800px){.side{transform:translateX(-100%);transition:.2s}.side.show{transform:none}.main{margin-left:0}.menu{display:block}.content{padding:14px}.form-grid{grid-template-columns:1fr}.backdrop.show{display:block;position:fixed;inset:0;background:#0006;z-index:15}}





.queue-head{align-items:flex-start}.queue-summary{color:var(--muted);font-size:13px;margin-top:5px}.queue-tools{display:flex;flex:1;flex-direction:column;align-items:flex-end;gap:10px}.conversation-filters{justify-content:flex-end}.conversation-filters .search{width:min(280px,100%)}.queue-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.conversation-list{display:grid;gap:12px;padding:16px}.conversation-card{display:grid;grid-template-columns:minmax(190px,1.05fr) minmax(145px,.8fr) minmax(230px,1.45fr) auto;gap:18px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:11px;background:#fff;transition:border-color .2s,box-shadow .2s}.conversation-card:hover{border-color:var(--theme-color);box-shadow:0 5px 18px #0000000a}.conversation-card.has-unread{border-left:4px solid var(--theme-color);padding-left:13px}.customer-block{display:flex;gap:12px;align-items:center;min-width:0}.customer-avatar{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--theme-color) 14%,#fff);color:var(--theme-color);font-weight:800;font-size:17px}.customer-copy{min-width:0;flex:1}.customer-title-line{display:flex;align-items:center;gap:8px;min-width:0}.customer-title-line .customer-name{flex:1;min-width:0}.customer-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-contact,.section-label,.latest-meta{display:block;color:var(--muted);font-size:12px}.customer-contact{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-state{display:flex;flex-direction:column;align-items:flex-start;gap:7px}.state-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.presence{font-size:12px;font-weight:700}.presence.online{color:#237342}.presence.offline{color:#858591}.assignment{font-size:13px}.conversation-latest{min-width:0}.latest-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}.latest-head .latest-meta{margin:0;white-space:nowrap}.latest-body{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.latest-body.is-empty{color:var(--muted)}.conversation-action{display:flex;align-items:center;justify-content:flex-end;gap:10px}.unread-badge{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--theme-color);color:var(--theme-contrast);font-size:12px;font-weight:800}.filter-reset{color:var(--muted);font-size:13px;padding:7px}.queue-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:11px}.queue-pagination{border-top:1px solid var(--line)}.dialog-overlay{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;padding:20px;background:#17182099}.dialog-overlay.show{display:flex}.dialog-box{width:min(620px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 24px 70px #0004;overflow:hidden}.dialog-box.dialog-sm{width:min(460px,100%)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}.dialog-head h2{margin:0;font-size:17px}.dialog-close{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:8px;background:#f1f2f5;color:#555;font-size:22px;line-height:1;cursor:pointer}.dialog-body{padding:20px;overflow:auto}.dialog-section+.dialog-section{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}.dialog-section h3{font-size:15px;margin:0 0 14px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.danger-note{padding:13px 14px;border-radius:9px;background:#fff2f2;color:#8e2e2e;line-height:1.65}.dialog-open{overflow:hidden}@media(max-width:1100px){.conversation-card{grid-template-columns:minmax(190px,1fr) minmax(160px,1fr)}.conversation-latest{grid-column:1/-1}.conversation-action{grid-column:2;grid-row:1/3;align-self:end}}@media(max-width:700px){.queue-head{display:block}.queue-tools{width:100%;align-items:stretch;margin-top:14px}.conversation-filters{display:grid;grid-template-columns:1fr 1fr}.conversation-filters .search{width:100%;grid-column:1/-1}.conversation-filters select{width:100%}.queue-actions{display:grid;grid-template-columns:1fr 1fr}.queue-actions .btn:last-child:nth-child(odd){grid-column:1/-1}.conversation-list{gap:8px;padding:8px}.conversation-card{position:relative;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:12px}.conversation-card.has-unread{padding-left:9px}.customer-block{grid-column:1/-1;grid-row:1;gap:9px}.has-unread .customer-block{padding-right:40px}.customer-avatar{width:36px;height:36px;flex-basis:36px;border-radius:10px;font-size:15px}.customer-title-line{gap:6px}.presence{white-space:nowrap}.conversation-latest{grid-column:1/-1;grid-row:2;padding:8px 10px;border-radius:8px;background:#f7f8fb}.latest-head{margin-bottom:3px}.latest-body{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.conversation-state{grid-column:1;grid-row:3;gap:4px;align-self:center}.conversation-state .state-line{display:none}.assignment{font-size:12px;color:var(--muted)}.assignment .section-label{display:inline;margin-right:5px}.conversation-action{grid-column:2;grid-row:3;justify-content:flex-end;gap:0;padding:0;border:0}.conversation-action .unread-badge{position:absolute;top:12px;right:12px}.conversation-action .btn{min-height:38px;margin:0}.filter-reset{text-align:center}.dialog-overlay{align-items:flex-end;padding:0}.dialog-box,.dialog-box.dialog-sm{width:100%;max-height:92vh;border-radius:16px 16px 0 0}.dialog-body{padding:17px}}@media(max-width:380px){.latest-body{-webkit-line-clamp:1}.conversation-action .btn{padding-inline:10px}}





.chat-ui{--chat-ink:#25262e;--chat-muted:#8a8d99;--chat-line:#eceef3;--chat-paper:#fff;--chat-self:#06c755}
.chat-ui .messages{flex:1;overflow:auto;padding:22px 20px 28px;background:radial-gradient(920px 280px at 50% -48px,color-mix(in srgb,var(--theme-color) 9%,transparent),transparent 70%),linear-gradient(180deg,#f8f7f9 0%,#eef0f5 100%);scrollbar-width:thin;scrollbar-color:#d4d7e0 transparent}
.chat-ui .messages::-webkit-scrollbar{width:10px}
.chat-ui .messages::-webkit-scrollbar-thumb{background:#d4d7e0;border-radius:99px;border:3px solid transparent;background-clip:padding-box}
.chat-ui .date{display:flex;align-items:center;gap:12px;margin:18px 0 16px;color:var(--chat-muted);font-size:12px;letter-spacing:.04em}
.chat-ui .date::before,.chat-ui .date::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#e2e4eb)}
.chat-ui .date::after{background:linear-gradient(90deg,#e2e4eb,transparent)}
.chat-ui .date span{background:#ffffffc7;backdrop-filter:blur(8px);border:1px solid #ffffffd0;padding:4px 11px;border-radius:999px;font-size:11px;color:#7a7e8a}
.chat-ui .empty{display:grid;place-items:center;align-content:center;gap:8px;min-height:42%;text-align:center;color:var(--chat-muted);padding:48px 20px}
.chat-ui .empty strong{color:#3a3d48;font-size:16px;font-weight:700}
.chat-ui .empty p{margin:0;font-size:13px;line-height:1.7}
.chat-ui .msg{display:flex;gap:10px;align-items:flex-end;margin:0 0 14px}
.chat-ui .msg.is-new{animation:chat-msg-in .38s cubic-bezier(.22,1,.36,1)}
@keyframes chat-msg-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.chat-ui[data-self="customer"] .msg.customer,.chat-ui[data-self="agent"] .msg.agent{flex-direction:row-reverse}
.chat-ui .msg-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--theme-color) 18%,transparent)}
.chat-ui .msg-avatar img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.chat-ui[data-self="customer"] .msg.customer .msg-avatar,.chat-ui[data-self="agent"] .msg.agent .msg-avatar,.chat-ui .msg.officer .msg-avatar,.chat-ui .msg.form-card .msg-avatar{display:none}
.chat-ui .msg-stack{display:flex;flex-direction:column;align-items:flex-start;max-width:min(74%,560px);min-width:0}
.chat-ui[data-self="customer"] .msg.customer .msg-stack,.chat-ui[data-self="agent"] .msg.agent .msg-stack{align-items:flex-end}
.chat-ui .bubble{position:relative;display:inline-block;max-width:100%;padding:11px 15px;border-radius:18px 18px 18px 6px;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.65;letter-spacing:.01em}
.chat-ui[data-self="customer"] .msg.customer .bubble,.chat-ui[data-self="agent"] .msg.agent .bubble{border-radius:18px 18px 6px 18px;background:linear-gradient(180deg,#2fd06c,var(--chat-self));color:#fff;box-shadow:0 10px 22px #06c75538}
.chat-ui[data-self="customer"] .msg.agent .bubble,.chat-ui[data-self="agent"] .msg.customer .bubble{background:var(--chat-paper);color:var(--chat-ink);border:1px solid #eceef4;box-shadow:0 8px 22px #1a21400a}
.chat-ui .bubble:has(> a:only-child .chat-img),.chat-ui[data-self] .msg .bubble:has(> a:only-child .chat-img){padding:3px;background:#fff;border:1px solid #eceef4;box-shadow:0 10px 24px #1a214012}
.chat-ui .bubble a{color:inherit;text-underline-offset:3px}
.chat-ui .chat-img{display:block;max-width:min(260px,70vw);max-height:300px;border-radius:14px}
.chat-ui .meta{margin-top:5px;font-size:11px;letter-spacing:.02em;color:#9aa0ad}
.chat-ui .lp,.chat-ui [data-url]{margin-top:6px}
.chat-ui .lp-card,.chat-ui .preview-card{display:block;width:min(280px,100%);overflow:hidden;background:#fff;border:1px solid #e7e9f0;border-radius:16px;color:var(--chat-ink);text-decoration:none;text-align:left;box-shadow:0 10px 28px #1a21400d}
.chat-ui .lp-card img,.chat-ui .preview-card img{width:100%;height:132px;object-fit:cover}
.chat-ui .lp-info,.chat-ui .preview-card div{padding:11px 13px 12px}
.chat-ui .lp-title,.chat-ui .preview-card strong{font-weight:700;font-size:13px;line-height:1.45}
.chat-ui .lp-desc,.chat-ui .preview-card small{display:block;margin-top:4px;font-size:12px;color:#7b7f8c;line-height:1.5}
.chat-ui .lp-site{margin-top:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9aa0ad}
.chat-ui .msg.form-card .msg-stack,.chat-ui[data-self] .msg.form-card .msg-stack{width:min(400px,92%);max-width:min(400px,92%)}
.chat-ui .msg.form-card .bubble,.chat-ui[data-self] .msg.form-card .bubble{--auth-navy:#1f3a6b;--auth-line:#cfd3dc;--auth-th:#f1f3f8;white-space:normal;width:100%;max-width:100%;box-sizing:border-box;padding:0 14px 16px;background:#fff;color:var(--chat-ink);border:1px solid #d6d9e0;border-top:4px solid var(--auth-navy);border-radius:6px;box-shadow:0 10px 28px #1a214014}
.chat-ui .app-form{display:grid;gap:10px;min-width:0;font-family:"PingFang TC","Microsoft JhengHei",sans-serif}
.chat-ui .app-form *{box-sizing:border-box}
.chat-ui .auth-head{padding:14px 4px 10px;text-align:center;border-bottom:3px double var(--auth-navy)}
.chat-ui .auth-head small{display:block;font-size:10px;letter-spacing:.25em;color:#8a8f9c}
.chat-ui .app-form h3{margin:4px 0 2px;font-size:18px;letter-spacing:.16em;color:var(--auth-navy);white-space:nowrap;text-align:center}
.chat-ui .auth-meta{font-size:11px;color:#8a8f9c;line-height:1.6}
.chat-ui .app-form .lead{margin:0;font-size:12px;line-height:1.7;color:#5b5f6b;background:#f6f7fa;border-left:3px solid var(--auth-navy);padding:8px 10px;white-space:normal}
.chat-ui .auth-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.chat-ui .auth-table th{width:92px;background:var(--auth-th);border:1px solid var(--auth-line);padding:8px;text-align:left;vertical-align:middle;color:var(--auth-navy);font-weight:700;line-height:1.4}
.chat-ui .auth-table th label{display:block;color:inherit;font:inherit;margin:0}
.chat-ui .auth-table td{border:1px solid var(--auth-line);padding:5px 8px;line-height:1.5;overflow-wrap:anywhere;color:var(--chat-ink)}
.chat-ui .auth-table td.muted{color:#8a8f9c}
.chat-ui .app-form .opt{display:block;font-weight:400;font-size:11px;color:#8a8f9c}
.chat-ui .auth-table input,.chat-ui .auth-table select,.chat-ui .auth-table textarea{width:100%;border:0;border-bottom:1px solid #9aa1b0;border-radius:0;padding:5px 2px;font:inherit;background:transparent;color:var(--chat-ink);transition:border-color .15s,background .15s}
.chat-ui .auth-table select{border:1px solid var(--auth-line);padding:5px 4px;background:#fff}
.chat-ui .auth-table textarea{resize:vertical;min-height:56px;line-height:1.55;border:1px solid var(--auth-line);padding:5px}
.chat-ui .auth-table input:focus,.chat-ui .auth-table select:focus,.chat-ui .auth-table textarea:focus{outline:none;border-color:var(--auth-navy);background:#f8f9fd}
.chat-ui .app-form [hidden]{display:none!important}
.chat-ui .auth-sign{border:1px solid var(--auth-line)}
.chat-ui .auth-sign-head{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--auth-th);padding:6px 8px;border-bottom:1px solid var(--auth-line)}
.chat-ui .auth-sign-head strong{font-size:13px;color:var(--auth-navy)}
.chat-ui .auth-sign-head button{border:1px solid var(--auth-line);background:#fff;color:#5b5f6b;font:inherit;font-size:12px;padding:3px 10px;border-radius:3px;cursor:pointer}
.chat-ui .auth-pad{position:relative;height:150px;background:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
.chat-ui .auth-pad canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
.chat-ui .auth-pad .sig-x{position:absolute;left:16px;bottom:28px;font-size:16px;color:#b8bcc7;pointer-events:none}
.chat-ui .auth-pad .sig-line{position:absolute;left:16px;right:16px;bottom:24px;border-bottom:1px dashed #b8bcc7;pointer-events:none}
.chat-ui .auth-pad .sig-hint{position:absolute;left:0;right:0;bottom:32px;text-align:center;font-size:12px;color:#b8bcc7;pointer-events:none}
.chat-ui .auth-sign-foot{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#8a8f9c;padding:5px 8px;border-top:1px solid var(--auth-line)}
.chat-ui .auth-sig-img{display:block;width:100%;height:120px;object-fit:contain;background:#fff}
.chat-ui .auth-sig-empty{margin:0;padding:18px 8px;text-align:center;font-size:12px;color:#8a8f9c}
.chat-ui .auth-note{margin:0;font-size:11px;color:#8a8f9c;line-height:1.6}
.chat-ui .auth-agree{display:flex;gap:6px;align-items:flex-start;font-size:12px;line-height:1.6;color:#5b5f6b;cursor:pointer}
.chat-ui .auth-agree input{flex:0 0 auto;width:15px;height:15px;margin:3px 0 0;accent-color:var(--auth-navy)}
.chat-ui .app-form .err{color:#b63030;font-size:12px;margin:0}
.chat-ui .app-form button[type=submit]{width:100%;border:0;border-radius:4px;padding:11px;background:var(--auth-navy);color:#fff;font:inherit;font-weight:700;letter-spacing:.2em;cursor:pointer}
.chat-ui .app-form button[type=submit]:disabled{opacity:.55;cursor:not-allowed}
.chat-ui .msg.form-card.legacy-card .bubble,.chat-ui[data-self] .msg.form-card.legacy-card .bubble{padding:18px 18px 16px;border:1px solid #eceef4;border-radius:20px;box-shadow:0 16px 36px #1a214010}
.chat-ui .legacy-card .app-form{gap:11px;font-family:inherit}
.chat-ui .legacy-card .app-form h3{margin:0;font-size:16px;letter-spacing:.04em;color:inherit}
.chat-ui .legacy-card .app-form .lead{font-size:13px;color:#737784;line-height:1.65;background:none;border:0;padding:0}
.chat-ui .dispatch-wait{display:grid;justify-items:center;gap:10px;padding:14px 6px 4px;text-align:center}
.chat-ui .dispatch-wait strong{font-size:15px;color:#25262e;letter-spacing:.02em}
.chat-ui .dispatch-spinner{position:relative;width:54px;height:54px}
.chat-ui .dispatch-spinner span{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--theme-color);animation:dispatch-spin 1.1s cubic-bezier(.5,.1,.5,.9) infinite}
.chat-ui .dispatch-spinner span:nth-child(2){inset:7px;border-top-color:color-mix(in srgb,var(--theme-color) 60%,#fff);animation-duration:1.5s;animation-direction:reverse}
.chat-ui .dispatch-spinner span:nth-child(3){inset:14px;border-top-color:color-mix(in srgb,var(--theme-color) 35%,#fff);animation-duration:.9s}
@keyframes dispatch-spin{to{transform:rotate(360deg)}}
.chat-ui .dispatch-dots i{font-style:normal;animation:dispatch-dot 1.4s infinite both}
.chat-ui .dispatch-dots i:nth-child(2){animation-delay:.2s}
.chat-ui .dispatch-dots i:nth-child(3){animation-delay:.4s}
@keyframes dispatch-dot{0%,80%,100%{opacity:.15}40%{opacity:1}}
.chat-ui .dispatch-step{margin:0;font-size:13px;color:#737784;animation:dispatch-fade 4s ease-in-out infinite}
@keyframes dispatch-fade{0%,100%{opacity:.55}50%{opacity:1}}
.chat-ui .dispatch-bar{position:relative;width:100%;height:6px;border-radius:99px;overflow:hidden;background:#eef0f5}
.chat-ui .dispatch-bar span{position:absolute;top:0;bottom:0;width:40%;border-radius:99px;background:linear-gradient(90deg,transparent,var(--theme-color),transparent);animation:dispatch-bar 1.6s ease-in-out infinite}
@keyframes dispatch-bar{0%{left:-40%}100%{left:100%}}
.chat-ui .dispatch-time{margin:0;font-size:12px;color:#9aa0ad}
.chat-ui .dispatch-time b{color:var(--theme-color);font-variant-numeric:tabular-nums}
.chat-ui .dispatch-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:#141826a6;backdrop-filter:blur(6px);animation:dispatch-in .25s ease-out}
.chat-ui .dispatch-overlay[hidden],.chat-ui .dispatch-overlay [hidden]{display:none!important}
@keyframes dispatch-in{from{opacity:0}to{opacity:1}}
.chat-ui .dispatch-panel{width:min(340px,100%);padding:28px 22px 24px;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#f7f8fc 100%);border:1px solid #eceef4;box-shadow:0 30px 80px #0a0f2040;animation:chat-msg-in .38s cubic-bezier(.22,1,.36,1)}
.chat-ui .dispatch-panel .dispatch-wait{padding:6px 0 0}
.chat-ui .dispatch-done{display:grid;justify-items:center;gap:6px;text-align:center}
.chat-ui .dispatch-done .officer-avatar{margin-bottom:8px}
.chat-ui .dispatch-done strong{font-size:17px;letter-spacing:.06em;color:#1d2130}
.chat-ui .dispatch-done p{margin:0;font-size:13px;line-height:1.65;color:#737784}
.chat-ui .dispatch-done .officer-btn{margin:10px 0 2px}
.chat-ui .dispatch-close{margin-top:4px;border:0;background:transparent;color:#8a8d99;font:inherit;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer}
.chat-ui .dispatch-close:hover{background:#f0f1f5;color:#4c4f5b}
body.dispatch-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.chat-ui .dispatch-spinner span,.chat-ui .dispatch-dots i,.chat-ui .dispatch-step,.chat-ui .dispatch-bar span{animation-duration:3s}}
.chat-ui .app-copy{width:100%;border:1px solid var(--auth-navy,#1f3a6b);background:#fff;color:var(--auth-navy,#1f3a6b);border-radius:4px;padding:9px;font:inherit;font-weight:700;cursor:pointer}
.chat-ui .app-copy:hover{background:#f1f3f8}
.chat-ui .msg.officer .bubble,.chat-ui[data-self] .msg.officer .bubble{padding:0;background:transparent;border:0;box-shadow:none;max-width:min(280px,92%)}
.chat-ui .officer-card{width:min(248px,100%);padding:28px 20px 22px;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#f7f8fc 100%);border:1px solid #eceef4;box-shadow:0 18px 40px #1a214014,inset 0 1px 0 #fff;text-align:center}
.chat-ui .officer-avatar{width:88px;height:88px;margin:0 auto 16px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 3px #fff,0 12px 26px color-mix(in srgb,var(--theme-color) 22%,transparent)}
.chat-ui .officer-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.chat-ui .officer-title{display:block;font-size:17px;letter-spacing:.08em;color:#1d2130}
.chat-ui .officer-btn{display:inline-flex;align-items:center;justify-content:center;margin:15px 0 12px;padding:8px 20px;border-radius:999px;background:linear-gradient(180deg,#ffd76a 0%,#f0b429 72%,#e4a51b 100%);color:#fff!important;text-decoration:none!important;font-size:13px;font-weight:800;letter-spacing:.04em;box-shadow:0 8px 16px #f0b4294a,inset 0 1px 0 #ffffff55}
.chat-ui button.officer-btn,.chat-ui span.officer-btn{border:0;font:inherit}
.chat-ui button.officer-btn{cursor:pointer}
.chat-ui button.officer-btn:disabled{opacity:.55;cursor:not-allowed}
.chat-ui span.officer-btn{cursor:default}
.chat-ui .officer-btn:hover{filter:brightness(1.04)}
.chat-ui .officer-hint{margin:0;color:#8d909c;font-size:12px;line-height:1.65}
.chat-ui .status{display:inline-flex;align-items:center;gap:7px;margin-top:4px;font-size:12px;color:var(--chat-muted);line-height:1.4}
.chat-ui .status::before{content:"";width:7px;height:7px;border-radius:50%;background:#c5c8d1;box-shadow:0 0 0 4px #c5c8d122}
.chat-ui .status.is-online::before{background:#2fbe5b;box-shadow:0 0 0 4px #2fbe5b28;animation:chat-pulse 2.2s ease-out infinite}
@keyframes chat-pulse{0%{box-shadow:0 0 0 0 #2fbe5b55}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chat-ui .composer{background:linear-gradient(180deg,#fff,#fafbfc);border-top:1px solid var(--chat-line);padding:10px 14px 14px}
.chat-ui .preview,.chat-ui .upload-preview{display:none;padding:4px 8px 10px}
.chat-ui .preview img,.chat-ui .upload-preview img{max-height:72px;border-radius:12px;box-shadow:0 8px 20px #1a214014}
.chat-ui .send{display:flex;align-items:flex-end;gap:6px;padding:5px;background:#f3f4f8;border:1px solid #e6e8ef;border-radius:22px;transition:border-color .15s,background .15s,box-shadow .15s}
.chat-ui .send:focus-within{background:#fff;border-color:color-mix(in srgb,var(--theme-color) 40%,#e6e8ef);box-shadow:0 0 0 4px color-mix(in srgb,var(--theme-color) 11%,transparent)}
.chat-ui .send textarea{flex:1;resize:none;border:0;background:transparent;padding:11px 8px;font:inherit;height:44px;min-height:44px;max-height:132px;color:var(--chat-ink);outline:none}
.chat-ui .send button[type=submit]{border:0;border-radius:999px;min-width:84px;height:40px;padding:0 16px;background:var(--theme-color);color:var(--theme-contrast);font:inherit;font-weight:700;cursor:pointer;box-shadow:0 8px 16px color-mix(in srgb,var(--theme-color) 28%,transparent)}
.chat-ui .send button[type=submit]:hover{filter:brightness(1.04)}
.chat-ui .attach{display:grid;place-items:center;width:40px;height:40px;min-width:40px;padding:0;border:0;border-radius:999px;background:transparent;color:#505462;cursor:pointer}
.chat-ui .attach:hover{background:#fff;color:var(--theme-color)}
.chat-ui .attach svg{width:20px;height:20px;display:block}
.chat-ui .disabled{opacity:.6;pointer-events:none}
@media(max-width:600px){.chat-ui .messages{padding:16px 14px 22px}.chat-ui .msg-stack{max-width:86%}.chat-ui .composer{padding:8px 10px max(12px,env(safe-area-inset-bottom))}}
.chat-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:stretch}
.info-row{padding:12px 0;border-bottom:1px solid var(--line)}
.info-row small{display:block;color:var(--muted);margin-bottom:5px;font-size:12px;letter-spacing:.04em}
.chat-box{height:72vh;min-height:520px;background:#fff;border:1px solid #eceef3;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 50px #1a214014}
.chat-head{position:relative;z-index:8;padding:12px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(180deg,#fff,#fbfbfc)}
.chat-identity{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.chat-avatar{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--theme-color) 14%,#fff);color:var(--theme-color);font-weight:800}
.chat-head strong{display:block;font-size:15px;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head .status{margin-top:3px}
.chat-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}
.quick{position:relative;padding:0;border:0;background:transparent}
.quick-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--theme-color) 28%,#e1e3ea);background:#fff;color:#3d4150;border-radius:999px;padding:7px 12px;min-height:34px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.quick-toggle[aria-expanded="true"]{background:var(--theme-color);color:var(--theme-contrast);border-color:var(--theme-color)}
.quick-menu{position:absolute;z-index:12;right:0;top:calc(100% + 8px);left:auto;bottom:auto;width:min(360px,calc(100vw - 48px));max-height:260px;padding:8px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 18px 40px #1a21401a;overflow:auto}
.quick-menu[hidden]{display:none}
@keyframes quick-sheet-in{from{transform:translateY(100%)}to{transform:none}}
.quick-backdrop{display:none}
.quick-menu-title{padding:6px 10px;color:var(--muted);font-size:12px;letter-spacing:.04em;font-weight:700}
.quick-option{display:block;width:100%;border:0;border-radius:10px;background:#fff;padding:9px 10px;color:#292933;font:inherit;text-align:left;line-height:1.45;cursor:pointer}
.quick-option:hover,.quick-option:focus{outline:none;background:color-mix(in srgb,var(--theme-color) 10%,#fff);color:#292933}
.typing-draft{margin:8px 14px 10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--theme-color) 22%,#e6e8ef);border-radius:14px;background:color-mix(in srgb,var(--theme-color) 6%,#fff);font-size:13px;color:#353541;white-space:pre-wrap;overflow-wrap:anywhere;max-height:110px;overflow:auto}
.typing-draft[hidden]{display:none}
.typing-draft strong{color:var(--theme-color)}
.officer-overlay{display:none;position:fixed;inset:0;z-index:90;align-items:center;justify-content:center;padding:20px;background:#17182066}
.officer-overlay.show{display:flex}
.officer-box{width:min(440px,100%);background:#fff;border-radius:18px;box-shadow:0 24px 70px #0004;overflow:hidden}
.officer-box header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.officer-box header h3{margin:0;font-size:17px}
.officer-box header button{width:34px;height:34px;border:0;border-radius:8px;background:#f1f2f5;color:#555;font-size:22px;line-height:1;cursor:pointer}
.officer-box .body{padding:20px}
.officer-box .lead{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.6}
.officer-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.session-card-toggle{display:none}
.session-card-toggle strong{display:block;font-size:14px}
.session-card-toggle small{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-card-toggle .chevron{flex:0 0 auto;color:var(--muted);font-size:16px;line-height:1;transition:transform .18s}
.session-card.is-open .session-card-toggle .chevron{transform:rotate(180deg)}
@media(max-width:900px){
    .chat-back{display:none}
    .chat-grid{grid-template-columns:1fr;gap:10px}
    .chat-box{height:calc(100dvh - 148px);min-height:360px}
    /* 手機版：快捷回覆改為底部彈出面板，加大點擊區域。 */
    .quick-toggle{padding:6px 11px;min-height:34px;font-size:12px}
    .quick-menu{position:fixed;z-index:80;left:0;right:0;top:auto;bottom:0;width:auto;max-height:min(62vh,460px);padding:0 10px max(12px,env(safe-area-inset-bottom));border:0;border-radius:20px 20px 0 0;box-shadow:0 -12px 30px #1a214026;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;animation:quick-sheet-in .22s cubic-bezier(.22,1,.36,1)}
    .quick-menu-title{position:sticky;top:0;z-index:1;margin:0 -10px 4px;padding:16px 20px 10px;background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:#3d4150;text-align:center}
    .quick-menu-title::before{content:"";display:block;width:38px;height:4px;margin:-6px auto 10px;border-radius:99px;background:#d8dbe3}
    .quick-option{min-height:48px;padding:12px 14px;font-size:15px;border-bottom:1px solid #f1f2f6;border-radius:12px}
    .quick-option:last-child{border-bottom:0}
    .quick-option:active{background:color-mix(in srgb,var(--theme-color) 14%,#fff)}
    .quick:has(.quick-menu:not([hidden])) .quick-backdrop{display:block;position:fixed;inset:0;z-index:79;background:#14182673;animation:dispatch-in .2s ease-out}
    body:has(.quick-menu:not([hidden])){overflow:hidden}
    .session-card{margin-bottom:0}
    .session-card-head{display:none}
    .session-card-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}
    .session-card:not(.is-open) .panel-body{display:none}
    .session-card.is-open .panel-body{padding:4px 14px 14px}
    .session-card .info-row{padding:8px 0}
    .session-card .info-row:first-child{display:none}
}





.voice-call-host{display:contents}.chat-box{position:relative}.chat-tools-nav{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}.chat-tools{position:relative}.chat-tools-toggle,.chat-tools-call{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--theme-color) 28%,#e1e3ea);background:#fff;color:#3d4150;border-radius:999px;padding:7px 12px;min-height:34px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.chat-tools-toggle[aria-expanded="true"],.chat-tools-call{background:var(--theme-color);color:var(--theme-contrast);border-color:var(--theme-color)}.chat-tools-call svg{width:15px;height:15px}.chat-tools-toggle:disabled,.chat-tools-call:disabled,.chat-tools-menu button:disabled{opacity:.5;cursor:not-allowed}.chat-tools-menu{position:absolute;z-index:12;right:0;top:calc(100% + 8px);width:min(228px,calc(100vw - 48px));padding:6px;border:1px solid var(--line,#eceef3);border-radius:14px;background:#fff;box-shadow:0 16px 36px #1a21401a}.chat-tools-menu[hidden]{display:none}.chat-tools-menu button{display:block;width:100%;border:0;border-radius:10px;background:#fff;padding:9px 11px;color:#292933;font:inherit;font-size:13px;text-align:left;cursor:pointer}.chat-tools-menu button:hover,.chat-tools-menu button:focus{outline:none;background:color-mix(in srgb,var(--theme-color) 10%,#fff)}.voice-call-sheet{position:fixed;z-index:80;top:0;left:50%;width:min(390px,calc(100vw - 24px));min-height:330px;padding:22px 24px 25px;border:1px solid #ffffff24;border-radius:0 0 32px 32px;background:linear-gradient(160deg,#30333a 0%,#17191e 58%,#0b0c0f 100%);color:#fff;text-align:center;box-shadow:0 24px 70px #0007;transform:translate(-50%,calc(-100% - 24px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .25s ease,visibility 0s linear .42s;overflow:hidden}.voice-call-sheet::before{content:"";position:absolute;inset:-120px -80px auto;height:240px;background:radial-gradient(circle,#ffffff25 0%,transparent 68%);pointer-events:none}.voice-call-host.is-call-visible .voice-call-sheet{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.voice-call-kicker{position:relative;display:block;color:#b9bdc8;font-size:12px;letter-spacing:.12em}.voice-call-avatar{position:relative;width:90px;height:90px;margin:23px auto 14px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--theme-color),color-mix(in srgb,var(--theme-color) 48%,#222));box-shadow:0 12px 34px color-mix(in srgb,var(--theme-color) 30%,transparent)}.voice-call-avatar svg{width:39px;height:39px}.voice-call-host.is-ringing .voice-call-avatar::before,.voice-call-host.is-ringing .voice-call-avatar::after{content:"";position:absolute;inset:-8px;border:1px solid #ffffff62;border-radius:50%;animation:voice-ring 1.8s ease-out infinite}.voice-call-host.is-ringing .voice-call-avatar::after{animation-delay:.7s}.voice-call-peer{position:relative;display:block;font-size:25px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.voice-call-status{position:relative;display:block;min-height:38px;margin-top:7px;color:#c8cbd3;font-size:14px;line-height:1.4}.voice-call-actions{position:relative;display:flex;align-items:flex-start;justify-content:center;gap:28px;margin-top:18px}.voice-call-control{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:58px;border:0;background:transparent;color:#fff;padding:0;font:inherit;font-size:12px;cursor:pointer}.voice-call-control-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#ffffff24;transition:transform .15s,filter .15s}.voice-call-control:hover .voice-call-control-icon{transform:scale(1.06);filter:brightness(1.12)}.voice-call-control:disabled{opacity:.5;cursor:not-allowed}.voice-call-control svg{width:23px;height:23px}.voice-call-control[data-call-action="accept"] .voice-call-control-icon{background:#35c759}.voice-call-control[data-call-action="reject"] .voice-call-control-icon,.voice-call-control[data-call-action="hangup"] .voice-call-control-icon{background:#ff453a}.voice-call-control[data-call-action="reject"] svg,.voice-call-control[data-call-action="hangup"] svg{transform:rotate(135deg)}.voice-call-control.is-active .voice-call-control-icon{background:#fff;color:#111}.voice-call-dismiss{position:absolute;z-index:2;top:14px;right:16px;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff1c;color:#fff;font-size:21px;line-height:1;cursor:pointer}.voice-call-host [hidden]{display:none!important}.voice-transfer-box{position:relative;margin:4px auto 2px;width:min(310px,100%)}.voice-transfer-picker{display:flex;gap:8px;align-items:center}.voice-transfer-picker select{min-width:0;flex:1;border:1px solid #ffffff35;border-radius:9px;background:#ffffff14;color:#fff;padding:9px 10px;font:inherit;font-size:13px}.voice-transfer-picker select option{color:#222}.voice-transfer-button,.voice-transfer-cancel{border:0;border-radius:9px;padding:9px 12px;background:var(--theme-color);color:var(--theme-contrast);font:inherit;font-size:13px;font-weight:800;cursor:pointer}.voice-transfer-button:disabled,.voice-transfer-cancel:disabled,.voice-transfer-picker select:disabled{opacity:.5;cursor:not-allowed}.voice-transfer-pending{display:flex;align-items:center;justify-content:center;gap:10px;color:#d5d8df;font-size:13px}.voice-transfer-cancel{background:#ffffff1d;color:#fff;border:1px solid #ffffff30}.voice-transfer-error{display:block;margin-top:8px;color:#ffb4ad;font-size:12px;line-height:1.35}.voice-transfer-box[hidden],.voice-transfer-picker[hidden],.voice-transfer-pending[hidden],.voice-transfer-error[hidden]{display:none!important}@keyframes voice-ring{0%{opacity:.75;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}@media(max-width:600px){.voice-call-sheet{width:100%;min-height:345px;border-radius:0 0 28px 28px}.voice-call-actions{gap:24px}.chat-tools-call span{display:none}.chat-tools-toggle,.chat-tools-call{padding:7px 10px}}

/* iPhone 緊湊通話卡片（靈動島展開樣式）+ 可拖動 */
.voice-call-sheet{
    /* 100vw 含垂直捲軸寬度，而 left:50% 不含，會讓視窗整體偏右約半個捲軸寬；
       改用 calc(100% - 20px)（相對視窗可視寬度）左右留白才會一致。 */
    top:12px;
    width:min(364px,calc(100% - 20px));
    min-height:0;
    padding:13px 14px;
    border-radius:26px;
    text-align:left;
    background:linear-gradient(150deg,#2c2f36 0%,#15171b 58%,#0a0b0e 100%);
    box-shadow:0 18px 44px #00000096,inset 0 1px 0 #ffffff1f;
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    touch-action:none;
}
.voice-call-sheet::before{inset:-90px -60px auto;height:170px}
.voice-call-grabber{
    position:absolute;
    z-index:3;
    top:5px;
    left:50%;
    width:26px;
    height:3.5px;
    margin-left:-13px;
    border-radius:999px;
    background:#ffffff3d;
    cursor:grab;
}
.voice-call-sheet:hover .voice-call-grabber{background:#ffffff70}
.voice-call-host.is-call-dragging .voice-call-grabber{background:#ffffff9c;cursor:grabbing}
.voice-call-dismiss{top:6px;right:8px;width:24px;height:24px;font-size:16px}

.voice-call-row{position:relative;display:flex;align-items:center;gap:12px}
.voice-call-avatar{
    width:46px;
    height:46px;
    flex:0 0 46px;
    margin:0;
}
.voice-call-avatar svg{width:21px;height:21px}
.voice-call-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.voice-call-kicker{
    font-size:11px;
    letter-spacing:.04em;
    color:#9aa0ad;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.voice-call-peer{
    margin-top:1px;
    font-size:16px;
    line-height:1.3;
    font-weight:600;
    letter-spacing:.01em;
}
.voice-call-status{
    min-height:0;
    margin-top:1px;
    font-size:12px;
    line-height:1.4;
    color:#b9bdc8;
    font-variant-numeric:tabular-nums;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.voice-call-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    gap:9px;
    width:auto;
    max-width:none;
    margin:0;
}
.voice-call-control{position:relative;min-width:0;gap:0}
/* 緊湊卡片只留圖示，文字改為輔助技術使用（同時寫進 title 供滑鼠提示） */
.voice-call-control [data-call-label]{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}
.voice-call-control-icon{
    width:38px;
    height:38px;
    background:#ffffff26;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 #ffffff26;
}
.voice-call-control svg{width:18px;height:18px}
.voice-call-control.is-active .voice-call-control-icon{background:#fff;color:#111;box-shadow:0 5px 14px #ffffff3d}

/* 錯誤或連線提示文字較長，這時允許卡片長高換行 */
.voice-call-host.is-call-notice .voice-call-row{align-items:flex-start}
.voice-call-host.is-call-notice .voice-call-status{white-space:normal;overflow:visible;text-overflow:clip}

/* 轉接區排在卡片第二列 */
.voice-call-extra:empty{display:none}
.voice-transfer-box{width:100%;margin:11px 0 0;padding-top:11px;border-top:1px solid #ffffff1f}
.voice-transfer-picker{gap:7px}
.voice-transfer-picker select{padding:7px 9px;font-size:12.5px}
.voice-transfer-button,.voice-transfer-cancel{padding:7px 11px;font-size:12.5px}
.voice-transfer-pending{justify-content:space-between;gap:8px;font-size:12.5px}
.voice-transfer-error{margin-top:7px}

/* 拖動後改用絕對座標定位 */
.voice-call-host.is-call-dragged .voice-call-sheet{
    top:var(--voice-call-top,12px);
    left:var(--voice-call-left,12px);
    transform:none;
    transition:opacity .2s ease,visibility 0s linear .2s;
}
.voice-call-host.is-call-dragged.is-call-visible .voice-call-sheet{transform:none;transition-delay:0s}
.voice-call-host.is-call-dragging .voice-call-sheet{transition:none;box-shadow:0 26px 60px #000b}

@media(max-width:600px){
    .voice-call-sheet{width:calc(100% - 16px);min-height:0;padding:12px;border-radius:24px}
    .voice-call-avatar{width:42px;height:42px;flex:0 0 42px}
    .voice-call-actions{gap:8px}
    .voice-call-control-icon{width:36px;height:36px}
    .voice-call-host.is-call-dragged .voice-call-sheet{width:min(364px,calc(100% - 16px))}
}





.bs{display:grid;gap:18px;padding-bottom:84px}
.bs-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px}
.bs-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}
.bs-card h2{margin:0 0 4px;font-size:16px}
.bs-desc{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.5}
.bs-color{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start}
.bs-color input[type=color]{width:56px;height:44px;padding:3px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.bs-color input[type=text]{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-family:ui-monospace,Consolas,monospace}
.bs-palette{display:grid;gap:8px;margin-top:16px}
.bs-palette-row{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px}
.bs-palette-name{color:var(--muted);font-size:12px}
.bs-swatches{display:flex;flex-wrap:wrap;gap:8px}
.bs-swatches button{position:relative;width:28px;height:28px;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform .12s}
.bs-swatches button:hover{transform:scale(1.12)}
.bs-swatches button:focus-visible{outline:2px solid #292933;outline-offset:2px}
.bs-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px #292933}
.bs-swatches button[aria-pressed=true]::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.6)}
.bs-small{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.bs-chat{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#f6f7fb}
.bs-chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bs-theme);color:var(--bs-contrast)}
.bs-chat-head img,.bs-msg img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff;flex:none}
.bs-chat-head strong{display:block;font-size:14px}.bs-chat-head small{opacity:.8;font-size:12px}
.bs-chat-body{display:grid;gap:12px;padding:14px}
.bs-msg{display:flex;gap:8px;align-items:flex-end}
.bs-bubble{max-width:78%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);font-size:13px;line-height:1.5}
.bs-msg.me{justify-content:flex-end}.bs-msg.me .bs-bubble{border-radius:14px 14px 4px 14px;background:var(--bs-theme);color:var(--bs-contrast)}
.bs-officer{display:grid;justify-items:center;gap:8px;width:190px;padding:14px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06);text-align:center;font-size:13px}
.bs-officer img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.bs-officer span{display:block;width:100%;padding:7px 0;border-radius:8px;background:var(--bs-theme);color:var(--bs-contrast);font-weight:700}
.bs-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.bs-asset{display:flex;flex-direction:column}
.bs-preview{display:grid;place-items:center;height:130px;margin-bottom:14px;border:1px dashed var(--line);border-radius:10px;background:repeating-conic-gradient(#f3f4f8 0 25%,#fff 0 50%) 0 0/16px 16px}
.bs-preview img{display:block;object-fit:contain}
.bs-preview.circle img{width:92px;height:92px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.bs-preview.wide img{max-width:90%;max-height:100px}
.bs-preview.icon img{width:48px;height:48px}
.bs-preview .bs-empty{color:var(--muted);font-size:13px}
.bs-status{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#eef0f5;color:var(--muted);font-size:12px;font-weight:400;vertical-align:middle}
.bs-status.on{background:color-mix(in srgb,var(--theme-color) 14%,#fff);color:var(--theme-color)}
.bs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto}
.bs-file{position:relative;display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:700;font-size:13px;cursor:pointer}
.bs-file:hover{border-color:var(--theme-color);color:var(--theme-color)}
.bs-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.bs-file:focus-within{outline:2px solid var(--theme-color);outline-offset:2px}
.bs-name{flex:1;min-width:0;overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.bs-reset{align-self:flex-start;margin-top:12px;padding:7px 14px;border:1px solid #f1c2cf;border-radius:8px;background:#fff5f8;color:#b4235a;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.bs-reset:hover{background:#ffe9f0}
.bs-reset:focus-visible{outline:2px solid #b4235a;outline-offset:2px}
.bs-default-note{margin:12px 0 0;color:var(--muted);font-size:12px}
.bs-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 -4px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.bs-bar small{margin-right:auto;color:var(--muted)}
.bs .err{margin-top:6px}
.bs .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:900px){.bs-top{grid-template-columns:1fr}}





.db-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.db-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}
.db-card h2{margin:0 0 4px;font-size:16px}
.db-desc{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.6}
.db-table{width:100%;border-collapse:collapse;font-size:14px}
.db-table th,.db-table td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left}
.db-table th{color:var(--muted);font-weight:400;font-size:12px}
.db-table td:last-child,.db-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.db-table code{color:var(--muted);font-size:12px}
.db-keep{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.db-keep span{padding:3px 10px;border-radius:999px;background:#e8f5ee;color:#1d7a4c;font-size:12px}
.db-danger{border-color:#f1c2cf;background:#fffafb}
.db-danger h2{color:#b4235a}
.db-row{margin-bottom:14px}
.db-row label{display:block;margin-bottom:6px;font-weight:700;font-size:14px}
.db-row input[type=password],.db-row input[type=text]{width:100%;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font:inherit}
.db-check{display:flex;gap:8px;align-items:flex-start;margin-bottom:16px;font-size:14px;line-height:1.5;cursor:pointer}
.db-check input{width:auto;margin-top:3px}
.db-btn{width:100%;height:44px;border:0;border-radius:8px;background:#c62a5b;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.db-btn:disabled{opacity:.45;cursor:not-allowed}
.db-card .err{margin-top:6px}
@media (max-width:900px){.db-grid{grid-template-columns:1fr}}



/* ===== 补充：复刻后台通用组件 ===== */
.badge.status-pending{background:#eee;color:#777}
.badge.status-submitted{background:#dff5e6;color:#237342}
.badge.role-admin{background:color-mix(in srgb,var(--theme-color) 14%,#fff);color:var(--theme-color)}
.badge.role-user{background:#eee;color:#777}

.meta-list{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;font-size:14px;margin:0}
.meta-list dt{color:var(--muted)}
.meta-list dd{margin:0;overflow-wrap:anywhere}
.meta-list dd input{width:100%}

.page-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.page-toolbar .form-actions{margin:0}

.form-panel{max-width:640px}
.form-panel .panel-head h2{font-size:16px}
.form-panel .panel-body{padding:22px}
.form-panel .form-row{margin-bottom:16px}
.form-panel .form-row label{display:block;font-weight:700;margin-bottom:6px}
.form-panel .form-row input,.form-panel .form-row select,.form-panel .form-row textarea{width:100%;padding:10px 11px;border:1px solid #d4d5dd;border-radius:7px;font:inherit}
.form-panel .form-actions{display:flex;gap:10px;margin-top:20px}
.form-panel .require{color:#b63030;font-weight:400}
.form-hint{display:block;margin-top:6px;color:var(--muted);font-size:12px}

.table-wrap table .link-input{min-width:260px;width:100%;padding:8px 10px;border:1px solid #d4d5dd;border-radius:7px;font:inherit;font-size:13px;background:#fafbfc}
.copy-row{display:flex;gap:8px;align-items:center}
.copy-row .link-input{flex:1}

.text-muted{color:var(--muted)}
.text-danger{color:#b63030}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}

/* Toast 提示 */
.toast-stack{position:fixed;z-index:300;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{max-width:min(560px,calc(100vw - 32px));padding:11px 18px;border-radius:10px;background:#292933;color:#fff;font-size:14px;line-height:1.5;box-shadow:0 12px 32px #0004;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:auto}
.toast.show{opacity:1;transform:none}
.toast.success{background:#237342}
.toast.error{background:#b63030}

/* Telegram 页 */
.tg-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.tg-grid .full{grid-column:1/-1}
.tg-help{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.tg-check{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:400}
.tg-check input{width:auto}
.tg-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px}
.tg-actions form{display:inline-flex}
@media (max-width:760px){.tg-grid{grid-template-columns:1fr}}

/* 登录页 */
.login-body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--theme-color);background:linear-gradient(145deg,var(--theme-color),color-mix(in srgb,var(--theme-color) 55%,#30245b));font-family:"Microsoft JhengHei","PingFang TC",sans-serif}
.login-card{width:min(390px,calc(100% - 32px));background:#fff;border-radius:16px;padding:32px;box-shadow:0 20px 60px #0003}
.login-card h1{text-align:center;margin:0 0 5px}
.login-card .sub{text-align:center;color:#888;margin-bottom:24px}
.login-card .row{margin-bottom:16px}
.login-card label{display:block;font-weight:700;margin-bottom:6px}
.login-card input[type=text],.login-card input[type=password]{width:100%;padding:12px;border:1px solid #d6d6de;border-radius:8px;font-size:16px}
.login-card input[type=text]:focus,.login-card input[type=password]:focus{outline:2px solid color-mix(in srgb,var(--theme-color) 38%,transparent);border-color:var(--theme-color)}
.login-card .remember{display:flex;gap:8px;color:#666;margin-bottom:18px}
.login-card .btn{width:100%;padding:13px;border:0;border-radius:8px;background:var(--theme-color);color:var(--theme-contrast);font-size:16px;font-weight:800;cursor:pointer}
.login-card .err{color:#b63030;font-size:13px;margin-top:5px}
.login-card .back{display:block;text-align:center;margin-top:20px;color:#888;font-size:13px}
.login-card .demo{margin-top:18px;padding:10px 12px;border:1px dashed #cfd3dc;border-radius:10px;color:#858591;font-size:12px;line-height:1.7}

/* 空状态面板 */
.panel .empty{text-align:center;color:var(--muted);padding:35px}

/* 小屏修正 */
@media (max-width:800px){
  .bs-top{grid-template-columns:1fr}
  .db-grid{grid-template-columns:1fr}
}

.dialog-body .confirm-text{margin:0;line-height:1.8;color:#3d4150}
.top-user{color:var(--muted);font-size:13px}

.tg-grid input{width:100%;padding:10px 11px;border:1px solid #d4d5dd;border-radius:7px;font:inherit;box-sizing:border-box}
.tg-grid label{touch-action:manipulation}