/* LeadsDesk reference components — use tokens only */
*{box-sizing:border-box}
body{margin:0;font-family:var(--ld-font);font-size:var(--fs-md);line-height:var(--lh-md);color:var(--ld-text);background:var(--ld-bg);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
.i{width:var(--icon-md);height:var(--icon-md);stroke-width:var(--icon-stroke);flex:none;vertical-align:-3px}
.i.sm{width:var(--icon-sm);height:var(--icon-sm)} .i.lg{width:var(--icon-lg);height:var(--icon-lg)}
:focus-visible{outline:none;box-shadow:var(--ld-focus-ring);border-radius:var(--r-sm)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--control-h);padding:0 var(--sp-4);border-radius:var(--r-md);border:1px solid transparent;font:600 var(--fs-md)/1 var(--ld-font);cursor:pointer;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--ld-accent);color:var(--ld-on-accent)} .btn-primary:hover{background:var(--ld-accent-hover)}
.btn-secondary{background:var(--ld-surface);color:var(--ld-text);border-color:var(--ld-border-strong)} .btn-secondary:hover{background:var(--ld-hover)}
.btn-ghost{background:transparent;color:var(--ld-text-2)} .btn-ghost:hover{background:var(--ld-hover);color:var(--ld-text)}
.btn-danger{background:var(--ld-danger);color:#fff} [data-theme=dark] .btn-danger{color:#2a0905} .btn-danger:hover{background:var(--ld-danger-hover)}
.btn-danger-quiet{background:transparent;color:var(--ld-danger);padding:0 var(--sp-2)} .btn-danger-quiet:hover{background:var(--ld-danger-soft)}
.btn-sm{height:28px;padding:0 var(--sp-3);font-size:var(--fs-sm)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.icon-btn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--ld-muted);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.icon-btn:hover{background:var(--ld-hover);color:var(--ld-text)} .icon-btn.danger:hover{background:var(--ld-danger-soft);color:var(--ld-danger)}
/* inputs */
.input,.select{height:var(--control-h);width:100%;padding:0 var(--sp-3);border:1px solid var(--ld-border-strong);border-radius:var(--r-md);background:var(--ld-surface);color:var(--ld-text);font:inherit}
.input::placeholder{color:var(--ld-muted)} .input:focus,.select:focus{outline:none;border-color:var(--ld-focus);box-shadow:var(--ld-focus-ring)}
textarea.input{height:auto;min-height:88px;padding:var(--sp-3);resize:vertical}
.label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ld-text-2);margin-bottom:var(--sp-1)}
.help{font-size:var(--fs-xs);color:var(--ld-muted);margin-top:var(--sp-1)} .input.err{border-color:var(--ld-danger)}
/* cards */
.card{background:var(--ld-surface);border:1px solid var(--ld-border);border-radius:var(--r-lg);box-shadow:var(--ld-shadow-1)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--ld-divider);font-weight:600}
.card-b{padding:var(--sp-4)}
/* tabs / subnav */
.tabs{display:flex;gap:var(--sp-1);border-bottom:1px solid var(--ld-border);background:var(--ld-surface);padding:0 var(--sp-3)}
.tab{display:inline-flex;align-items:center;gap:6px;height:var(--subnav-h);padding:0 var(--sp-3);color:var(--ld-muted);font-weight:600;font-size:var(--fs-md);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.tab:hover{color:var(--ld-text)} .tab.on{color:var(--ld-text);border-color:var(--ld-accent)}
.tab .count{font-size:var(--fs-xs);color:var(--ld-muted);font-weight:500}
.seg{display:inline-flex;padding:3px;background:var(--ld-surface-sunken);border:1px solid var(--ld-border);border-radius:var(--r-md)}
.seg button{border:0;background:transparent;color:var(--ld-muted);font:600 var(--fs-sm)/1 var(--ld-font);padding:7px 12px;border-radius:var(--r-sm);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.seg button.on{background:var(--ld-raised);color:var(--ld-text);box-shadow:var(--ld-shadow-1)}
/* badges & chips */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:600;background:var(--ld-surface-sunken);color:var(--ld-text-2);border:1px solid var(--ld-border)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 10px;border-radius:var(--r-pill);background:var(--ld-accent-soft);color:var(--ld-accent-text);font-size:var(--fs-xs);font-weight:600}
.chip button{border:0;background:none;color:inherit;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;cursor:pointer} .chip button:hover{background:var(--ld-hover)}
.count-pill{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--ld-danger);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
/* stage pill */
.stage{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:600;color:var(--ld-text)}
.stage:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
/* avatars */
.av{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:var(--ld-accent-soft);color:var(--ld-accent-text);flex:none}
.av.lg{width:48px;height:48px;font-size:16px} .av.sm{width:24px;height:24px;font-size:10px}
.av.team{background:var(--ev-stage-soft);color:var(--ev-stage)} .av.bot{background:var(--ev-bot-soft);color:var(--ev-bot)}
/* tables */
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md)}
.table th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--ld-muted);font-weight:600;padding:0 var(--sp-3);height:36px;border-bottom:1px solid var(--ld-border);background:var(--ld-surface);position:sticky;top:0}
.table td{padding:0 var(--sp-3);height:var(--row-h);border-bottom:1px solid var(--ld-divider);color:var(--ld-text)}
.table tr:hover td{background:var(--ld-hover)} .table tr.sel td{background:var(--ld-selected)}
.table .sub{color:var(--ld-muted);font-size:var(--fs-sm)}
/* menu / tooltip / modal / toast */
.menu{background:var(--ld-raised);border:1px solid var(--ld-border);border-radius:var(--r-lg);box-shadow:var(--ld-shadow-2);padding:var(--sp-1);min-width:200px}
.menu a{display:flex;align-items:center;gap:var(--sp-2);padding:7px 10px;border-radius:var(--r-sm);color:var(--ld-text);font-size:var(--fs-md);cursor:pointer;text-decoration:none}
.menu a .i{color:var(--ld-muted)} .menu a:hover{background:var(--ld-hover)} .menu hr{border:0;border-top:1px solid var(--ld-divider);margin:var(--sp-1) 0}
.menu a.danger,.menu a.danger .i{color:var(--ld-danger)} .menu a.danger:hover{background:var(--ld-danger-soft)}
.menu kbd{margin-left:auto;font:500 11px var(--ld-mono);color:var(--ld-muted)}
.tooltip{display:inline-block;background:var(--ld-text);color:var(--ld-surface);font-size:var(--fs-xs);font-weight:500;padding:5px 8px;border-radius:var(--r-sm);box-shadow:var(--ld-shadow-2)}
.modal{background:var(--ld-raised);border-radius:var(--r-xl);box-shadow:var(--ld-shadow-3);border:1px solid var(--ld-border);width:100%;max-width:440px}
.modal-h{padding:var(--sp-5) var(--sp-6) 0;font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:650}
.modal-b{padding:var(--sp-2) var(--sp-6) var(--sp-5);color:var(--ld-text-2)}
.modal-f{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--ld-divider);background:var(--ld-surface-sunken);border-radius:0 0 var(--r-xl) var(--r-xl)}
.toast{display:flex;align-items:center;gap:var(--sp-3);background:var(--ld-raised);border:1px solid var(--ld-border);border-left:3px solid var(--tc,var(--ld-success));border-radius:var(--r-md);box-shadow:var(--ld-shadow-2);padding:var(--sp-3) var(--sp-4);max-width:380px}
.toast .i{color:var(--tc,var(--ld-success))} .toast a{color:var(--ld-accent-text);font-weight:600;margin-left:auto;text-decoration:none}
.empty{text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--ld-muted)}
.empty .ring{width:48px;height:48px;border-radius:50%;background:var(--ld-surface-sunken);border:1px solid var(--ld-border);display:inline-grid;place-items:center;margin-bottom:var(--sp-3);color:var(--ld-muted)}
.empty b{display:block;color:var(--ld-text);font-weight:600;margin-bottom:2px}
.empty a{color:var(--ld-accent-text);font-weight:600;text-decoration:none}
/* ===== Conversation timeline ===== */
.tl{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4)}
.tl-day{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-xs);font-weight:600;color:var(--ld-muted);text-transform:uppercase;letter-spacing:.05em}
.tl-day:before,.tl-day:after{content:"";flex:1;border-top:1px solid var(--ld-divider)}
.msg{display:flex;gap:var(--sp-2);max-width:78%;align-items:flex-end}
.msg.in{align-self:flex-start} .msg.out{align-self:flex-end;flex-direction:row-reverse}
.msg .stack{display:flex;flex-direction:column;gap:3px;min-width:0}
.msg.out .stack{align-items:flex-end}
.meta{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--ld-muted);padding:0 4px}
.meta b{color:var(--ld-text-2);font-weight:600} .meta .ch{display:inline-flex;align-items:center;gap:3px;color:var(--c)}
.bubble{position:relative;padding:9px 13px;border-radius:16px;font-size:var(--fs-md);line-height:20px;color:var(--ld-text);word-wrap:break-word}
.msg.in .bubble{background:var(--ev-inbound-bubble);border-bottom-left-radius:6px}
.msg.out .bubble{background:var(--ev-outbound-bubble);border-bottom-right-radius:6px}
.msg.grouped .bubble{border-radius:16px} .msg.grouped .av{visibility:hidden}
.msg.bot .bubble{background:var(--ev-bot-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ev-bot) 35%,transparent)}
.hover-tools{display:flex;gap:2px;opacity:0;transition:opacity var(--dur-1)} .msg:hover .hover-tools,.ecard:hover .hover-tools{opacity:1}
.status{font-size:11px;color:var(--ld-muted);display:inline-flex;gap:3px;align-items:center}
/* email card */
.ecard{align-self:stretch;background:var(--ld-surface);border:1px solid var(--ld-border);border-left:3px solid var(--ev-email);border-radius:var(--r-lg);margin:var(--sp-2) 0;box-shadow:var(--ld-shadow-1)}
.ecard.out{margin-left:12%} .ecard.in{margin-right:12%}
.ecard-h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4) 0}
.ecard-h .who{flex:1;min-width:0} .ecard-h .who b{font-weight:600} .ecard-h .who div{font-size:var(--fs-xs);color:var(--ld-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecard .subj{padding:var(--sp-2) var(--sp-4) 0;font-weight:650}
.ecard .body{padding:var(--sp-1) var(--sp-4) var(--sp-3);color:var(--ld-text-2);line-height:21px}
.quote-toggle{display:inline-flex;align-items:center;gap:4px;margin-top:var(--sp-2);height:22px;padding:0 8px;border-radius:var(--r-pill);border:1px solid var(--ld-border);background:var(--ld-surface-sunken);color:var(--ld-muted);font:600 11px/1 var(--ld-font);cursor:pointer}
.quoted{margin-top:var(--sp-2);padding-left:var(--sp-3);border-left:2px solid var(--ld-border-strong);color:var(--ld-muted);font-size:var(--fs-sm)}
.ecard .foot{display:flex;gap:var(--sp-1);padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--ld-divider)}
.thread-collapsed{display:flex;align-items:center;gap:var(--sp-2);margin:0 var(--sp-4);padding:6px var(--sp-3);border:1px dashed var(--ld-border-strong);border-radius:var(--r-md);color:var(--ld-text-2);font-size:var(--fs-sm);font-weight:600;background:var(--ld-surface-sunken);cursor:pointer}
.thread-collapsed .avs{display:flex} .thread-collapsed .avs .av{margin-left:-6px;box-shadow:0 0 0 2px var(--ld-surface-sunken)}
/* event row (non-message) */
.ev{display:flex;align-items:center;gap:var(--sp-2);align-self:center;font-size:var(--fs-sm);color:var(--ld-text-2);padding:5px 12px 5px 6px;border-radius:var(--r-pill);background:var(--ld-surface-sunken);border:1px solid var(--ld-divider);margin:var(--sp-1) 0}
.ev .ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--s);color:var(--c)} .ev .ico .i{width:13px;height:13px}
.ev time{color:var(--ld-muted);font-size:var(--fs-xs)}
.evcard{align-self:stretch;display:flex;gap:var(--sp-3);background:var(--s);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);margin:var(--sp-1) 8%}
.evcard .ico{width:28px;height:28px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--ld-surface);color:var(--c);flex:none}
.evcard .t{font-weight:600} .evcard .d{color:var(--ld-text-2)} .evcard time{margin-left:auto;font-size:var(--fs-xs);color:var(--ld-muted);white-space:nowrap}