human handoffs
This commit is contained in:
parent
79188e0f59
commit
36a55930f9
35 changed files with 4039 additions and 139 deletions
|
|
@ -527,6 +527,127 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.security-toggle span { position:absolute; inset:0; border-radius:999px; background:#D9D5E0; transition:background .2s; cursor:pointer; }
|
||||
.security-toggle span::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(20,18,30,0.18); transition:transform .2s; }
|
||||
.security-toggle input:checked + span { background:#7357F6; }
|
||||
.human-handoff-page { max-width:920px; margin:0 auto; padding:8px 4px 32px; }
|
||||
.human-handoff-head { margin-bottom:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
|
||||
.human-handoff-head h1 { margin:0 0 8px; font:700 28px/1.15 "Manrope"; color:#171424; }
|
||||
.human-handoff-head p { margin:0; max-width:640px; color:#6f6b7c; font-size:13px; line-height:1.6; }
|
||||
.human-handoff-tabs { margin-top:16px; display:inline-flex; gap:6px; padding:4px; border:1px solid #ece9f2; border-radius:10px; background:#faf9fc; }
|
||||
.human-handoff-tabs button { height:32px; padding:0 14px; border:0; border-radius:8px; background:transparent; color:#6f6b7c; font-size:12px; font-weight:600; }
|
||||
.human-handoff-tabs button.active { background:#fff; color:#171424; box-shadow:0 1px 4px rgba(20,18,30,0.08); }
|
||||
.handoff-inbox-lead { margin:0 0 14px; color:#77758a; font-size:12px; }
|
||||
.handoff-inbox-list { display:grid; gap:10px; }
|
||||
.handoff-inbox-row { width:100%; padding:16px 18px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; border:1px solid #ece9f2; border-radius:12px; background:#fff; text-align:left; cursor:pointer; box-shadow:0 6px 20px rgba(20,18,30,0.03); }
|
||||
.handoff-inbox-row:hover { border-color:#ddd4ff; background:#fcfbff; }
|
||||
.handoff-inbox-row-main strong { display:block; margin-bottom:4px; font:650 14px/1.3 "DM Sans"; color:#171424; }
|
||||
.handoff-inbox-row-party { color:#6d5bd0; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
|
||||
.handoff-inbox-row-snippet { margin:8px 0 0; color:#5a5562; font-size:12px; line-height:1.45; }
|
||||
.handoff-inbox-row-meta { min-width:120px; display:grid; gap:4px; justify-items:end; color:#77758a; font-size:11px; }
|
||||
.handoff-inbox-status { height:22px; padding:0 8px; display:inline-flex; align-items:center; border-radius:999px; background:#f1eff3; color:#716d7a; font-size:10px; font-weight:600; }
|
||||
.handoff-inbox-status.status-waiting_for_human { background:#fff6e8; color:#b26a00; }
|
||||
.handoff-inbox-status.status-human_replied { background:#edf4ff; color:#2f67c5; }
|
||||
.handoff-inbox-status.status-agent_replied { background:#edf9f4; color:#11966a; }
|
||||
.handoff-back-btn { margin-bottom:14px; height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; border:0; border-radius:8px; background:transparent; color:#6d5bd0; font-size:12px; font-weight:600; }
|
||||
.handoff-back-btn:hover { background:#f6f2ff; }
|
||||
.handoff-conversation-head h2 { margin:0 0 10px; font:700 22px/1.2 "Manrope"; color:#171424; }
|
||||
.handoff-linked-external { padding:12px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid #ece9f2; border-radius:10px; background:#faf9fc; color:#5a5562; font-size:12px; }
|
||||
.handoff-linked-external strong { color:#171424; }
|
||||
.handoff-linked-external em { color:#77758a; }
|
||||
.handoff-message-list { margin-top:18px; display:grid; gap:14px; }
|
||||
.handoff-message { padding:16px 18px; border:1px solid #ece9f2; border-radius:12px; background:#fff; }
|
||||
.handoff-message header { margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
|
||||
.handoff-message header strong { font-size:10px; font-weight:700; letter-spacing:.35px; color:#6d5bd0; }
|
||||
.handoff-message-human header strong { color:#11966a; }
|
||||
.handoff-message header time { color:#9a96a5; font-size:11px; }
|
||||
.handoff-message-body { color:#292536; font-size:13px; line-height:1.6; white-space:pre-wrap; }
|
||||
.handoff-settings-intro { margin-bottom:18px; padding:18px 20px; border:1px solid #ece7ff; border-radius:14px; background:#fbf9ff; }
|
||||
.handoff-settings-intro p { margin:0 0 10px; color:#4a4652; font-size:12px; line-height:1.6; }
|
||||
.handoff-settings-intro p strong { color:#171424; }
|
||||
.handoff-settings-intro small { color:#77758a; font-size:11px; line-height:1.5; }
|
||||
.handoff-flow-diagram { margin:14px 0 10px; padding:14px; display:grid; justify-items:center; gap:4px; border:1px dashed #ddd4ff; border-radius:10px; background:#fff; color:#4a4652; font-size:12px; font-weight:600; }
|
||||
.handoff-flow-arrow { color:#9a96a5; font-weight:400; }
|
||||
.handoff-settings-toolbar { margin-bottom:14px; display:flex; justify-content:flex-end; }
|
||||
.human-handoff-empty,.human-handoff-list { margin-top:8px; }
|
||||
.human-handoff-empty { padding:40px 28px; display:grid; justify-items:center; text-align:center; border:1px solid #ece9f2; border-radius:16px; background:#fff; box-shadow:0 8px 28px rgba(20,18,30,0.04); }
|
||||
.human-handoff-empty-icon { width:52px; height:52px; margin-bottom:14px; display:grid; place-items:center; border-radius:14px; background:#f6f2ff; color:#7357f6; }
|
||||
.human-handoff-empty h2 { margin:0 0 8px; font:700 18px/1.2 "DM Sans"; }
|
||||
.human-handoff-empty p { margin:0 0 18px; max-width:420px; color:#77758a; font-size:12px; line-height:1.55; }
|
||||
.human-handoff-list { display:grid; gap:12px; }
|
||||
.human-handoff-card { padding:18px 20px; border:1px solid #ece9f2; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(20,18,30,0.035); }
|
||||
.human-handoff-card-top { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
|
||||
.human-handoff-card-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#f6f2ff; color:#7357f6; }
|
||||
.human-handoff-card-meta strong { display:block; font:650 14px/1.3 "DM Sans"; color:#171424; }
|
||||
.human-handoff-card-meta small { color:#77758a; font-size:11px; }
|
||||
.human-handoff-status { height:22px; padding:0 8px; display:inline-flex; align-items:center; border-radius:999px; background:#f1eff3; color:#716d7a; font-size:10px; font-weight:600; }
|
||||
.human-handoff-status.active { background:#edf9f4; color:#11966a; }
|
||||
.human-handoff-card-summary { margin:12px 0 8px; color:#5a5562; font-size:12px; }
|
||||
.human-handoff-card-quote { margin:0 0 14px; padding-left:12px; border-left:2px solid #ece7ff; color:#4a4652; font-size:12px; line-height:1.55; }
|
||||
.human-handoff-card-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
|
||||
.handoff-card-menu-wrap { position:relative; }
|
||||
.handoff-card-menu { position:absolute; right:0; top:calc(100% + 4px); min-width:160px; padding:6px; display:grid; gap:2px; border:1px solid #ece9f2; border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(20,18,30,0.12); z-index:5; }
|
||||
.handoff-card-menu button { width:100%; min-height:34px; padding:0 10px; border:0; border-radius:8px; background:transparent; text-align:left; font-size:12px; font-weight:600; color:#4a4652; }
|
||||
.handoff-card-menu button:hover { background:#f7f5fa; }
|
||||
.handoff-btn { height:36px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid #dfdde5; border-radius:9px; background:#fff; color:#241f2b; font-size:12px; font-weight:600; }
|
||||
.handoff-btn.primary { border-color:#6d5bd0; background:#7357f6; color:#fff; }
|
||||
.handoff-btn.subtle { color:#5a5562; background:#fafafa; }
|
||||
.handoff-btn.icon { width:36px; padding:0; }
|
||||
.handoff-btn:disabled { opacity:.55; cursor:not-allowed; }
|
||||
.handoff-drawer-backdrop { position:fixed; inset:0; z-index:60; display:flex; justify-content:flex-end; background:rgba(20,18,30,0.28); }
|
||||
.handoff-drawer,.handoff-test-modal { width:min(560px,100vw); height:100%; display:flex; flex-direction:column; background:#fff; box-shadow:-12px 0 40px rgba(20,18,30,0.12); }
|
||||
.handoff-test-modal { height:auto; max-height:min(720px,92vh); margin:auto 0; border-radius:16px 0 0 16px; }
|
||||
.handoff-drawer-head { padding:22px 22px 12px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; border-bottom:1px solid #f0eef2; }
|
||||
.handoff-drawer-head h2 { margin:0 0 6px; font:700 20px/1.2 "DM Sans"; color:#171424; }
|
||||
.handoff-drawer-head p { margin:0; color:#77758a; font-size:12px; line-height:1.5; }
|
||||
.handoff-drawer-close { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#6f6b7c; }
|
||||
.handoff-drawer-close:hover { background:#f5f4f2; }
|
||||
.handoff-drawer-body { flex:1; overflow:auto; padding:18px 22px 24px; display:grid; gap:22px; }
|
||||
.handoff-drawer-foot { padding:14px 22px 18px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid #f0eef2; background:#fcfbfd; }
|
||||
.handoff-form-section h3 { margin:0 0 8px; font:700 13px/1.3 "DM Sans"; color:#171424; text-transform:none; letter-spacing:0; }
|
||||
.handoff-field-label { display:block; margin-bottom:6px; font-size:11px; font-weight:600; color:#5a5562; }
|
||||
.handoff-helper { margin:8px 0 0; color:#77758a; font-size:11px; line-height:1.5; }
|
||||
.handoff-email-input,.handoff-text-input { width:100%; min-height:42px; padding:0 12px; display:flex; align-items:center; gap:8px; border:1px solid #e4e1e8; border-radius:10px; background:#fff; }
|
||||
.handoff-email-input input,.handoff-text-input { width:100%; border:0; outline:0; background:transparent; font-size:13px; color:#171424; }
|
||||
.handoff-owner-preview { margin-top:10px; padding:10px 12px; display:flex; align-items:center; gap:10px; border:1px solid #ece9f2; border-radius:10px; background:#faf9fc; }
|
||||
.handoff-owner-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#f6f2ff; color:#7357f6; }
|
||||
.handoff-owner-preview strong { display:block; font-size:13px; }
|
||||
.handoff-owner-preview small { color:#77758a; font-size:11px; }
|
||||
.handoff-label-toolbar { margin:10px 0; display:flex; gap:8px; }
|
||||
.handoff-label-toolbar input { flex:1; min-height:34px; padding:0 10px; border:1px solid #e4e1e8; border-radius:8px; font-size:12px; }
|
||||
.handoff-label-toolbar button { height:34px; padding:0 10px; border:1px solid #e4e1e8; border-radius:8px; background:#fff; font-size:11px; font-weight:600; color:#5a5562; }
|
||||
.handoff-label-grid { display:flex; flex-wrap:wrap; gap:8px; }
|
||||
.handoff-check-pill { height:30px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; border:1px solid #e4e1e8; border-radius:999px; background:#fff; font-size:11px; font-weight:600; color:#4a4652; cursor:pointer; }
|
||||
.handoff-check-pill input { accent-color:#7357f6; }
|
||||
.handoff-type-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
|
||||
.handoff-type-card { min-height:92px; padding:12px; display:grid; gap:4px; border:1px solid #e4e1e8; border-radius:12px; background:#fff; cursor:pointer; }
|
||||
.handoff-type-card.selected { border-color:#cfc5ff; background:#fbf9ff; box-shadow:inset 0 0 0 1px #ddd4ff; }
|
||||
.handoff-type-card input { position:absolute; opacity:0; }
|
||||
.handoff-type-card strong { font-size:12px; color:#171424; }
|
||||
.handoff-type-card span { color:#77758a; font-size:10.5px; line-height:1.45; }
|
||||
.handoff-instructions { width:100%; padding:12px; border:1px solid #e4e1e8; border-radius:12px; resize:vertical; font:400 13px/1.55 "DM Sans"; color:#292536; }
|
||||
.handoff-examples { margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
|
||||
.handoff-examples span { color:#77758a; font-size:11px; }
|
||||
.handoff-examples button { height:28px; padding:0 10px; border:1px solid #ece7ff; border-radius:999px; background:#fbf9ff; color:#6d5bd0; font-size:10.5px; font-weight:600; }
|
||||
.handoff-summary-card { padding:14px; border:1px solid #ece7ff; border-radius:12px; background:#fbf9ff; }
|
||||
.handoff-summary-title { margin-bottom:8px; display:flex; align-items:center; gap:6px; color:#6d5bd0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.35px; }
|
||||
.handoff-summary-card p { margin:0; color:#4a4652; font-size:12px; line-height:1.55; }
|
||||
.handoff-switch { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; font-weight:600; color:#171424; }
|
||||
.handoff-switch input { position:absolute; opacity:0; width:0; height:0; }
|
||||
.handoff-switch-track { position:relative; width:44px; height:24px; border-radius:999px; background:#d9d5e0; }
|
||||
.handoff-switch-track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(20,18,30,0.18); }
|
||||
.handoff-switch input:checked + .handoff-switch-track { background:#7357f6; }
|
||||
.handoff-switch input:checked + .handoff-switch-track::after { transform:translateX(20px); }
|
||||
.handoff-reply-info { margin-top:12px; padding:12px; border:1px solid #ece9f2; border-radius:10px; background:#faf9fc; }
|
||||
.handoff-reply-info strong { display:block; margin-bottom:6px; font-size:12px; }
|
||||
.handoff-reply-info p { margin:0; color:#5a5562; font-size:11px; line-height:1.5; }
|
||||
.handoff-reply-as { margin-top:12px; display:grid; gap:8px; }
|
||||
.handoff-reply-as strong { font-size:12px; color:#171424; }
|
||||
.handoff-reply-as label { display:flex; align-items:center; gap:8px; font-size:12px; color:#4a4652; }
|
||||
.handoff-test-result { margin-top:14px; padding:14px; border:1px solid #ece9f2; border-radius:12px; background:#faf9fc; }
|
||||
.handoff-test-result h3 { margin:0 0 10px; font-size:13px; }
|
||||
.handoff-test-result ul { margin:0 0 12px; padding:0; list-style:none; display:grid; gap:6px; }
|
||||
.handoff-test-result li { font-size:12px; }
|
||||
.handoff-test-result li.pass { color:#11966a; }
|
||||
.handoff-test-result li.fail { color:#c45a4a; }
|
||||
.handoff-test-result p { margin:0 0 6px; font-size:12px; line-height:1.5; color:#4a4652; }
|
||||
.security-toggle input:checked + span::after { transform:translateX(20px); }
|
||||
.security-toggle input:disabled + span { opacity:.55; cursor:not-allowed; }
|
||||
.security-timeout-select,.admin-role-select { min-width:140px; height:40px; padding:0 12px; border:1px solid #E1DFE7; border-radius:10px; background:#fff; font-size:13px; color:#4a4652; }
|
||||
|
|
@ -714,6 +835,17 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.mail-detail-reply-btn { height:36px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; border:1px solid #dfdde5; border-radius:8px; background:#fff; color:#241f2b; font-size:11.5px; font-weight:600; }
|
||||
.mail-detail-reply-btn:hover { background:#f8f7f5; border-color:#d5d2da; }
|
||||
.mail-detail-reply-btn.subtle { color:#5a5562; background:#fafafa; }
|
||||
.mail-thread-messages.is-thread { padding:0 var(--reader-x0); }
|
||||
.mail-thread-message { padding:18px 0; border-top:1px solid #f0eef2; }
|
||||
.mail-thread-message:first-child { border-top:0; }
|
||||
.mail-thread-message-collapsed { width:100%; padding:12px 0; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:center; border:0; border-top:1px solid #f0eef2; background:transparent; text-align:left; }
|
||||
.mail-thread-message-collapsed:first-child { border-top:0; }
|
||||
.mail-thread-message-collapsed:hover { background:#faf9fc; }
|
||||
.mail-thread-message-collapsed-main { min-width:0; display:grid; gap:2px; }
|
||||
.mail-thread-message-collapsed-main strong { font:600 12px/1.3 "DM Sans"; color:#171424; }
|
||||
.mail-thread-message-collapsed-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#77758a; font-size:11px; }
|
||||
.mail-thread-message-collapsed time { color:#77758a; font-size:11px; white-space:nowrap; }
|
||||
.mailbox-thread-count { min-width:18px; height:18px; padding:0 6px; display:inline-grid; place-items:center; border-radius:999px; background:#f1eff3; color:#716d7a; font-size:10px; font-weight:600; }
|
||||
.agent-panel.email-context .agent-stat-grid,
|
||||
.agent-panel.email-context .agent-context-block,
|
||||
.agent-panel.email-context .agent-quick { display:none; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue