/* Reachly UI system — the CONTACT PROFILE as a side panel (plan step 1, pass
   2). The profile is shared by Contacts and the Inbox and its content is drawn
   by the app's own renderers (journey, payments, agents, website journey), so
   this restyles those same class names with the system's tokens rather than
   forking five renderers. Same tabs, same data; side-panel shape, premium
   finish, line icons. The old sheet sets several of these with !important. */
.contact-detail-modal{
  --rl-line:#e6e8ef;--rl-hair:rgba(16,24,40,.08);--rl-ink:#0f1218;--rl-ink2:#475067;--rl-ink3:#8a92a6;--rl-ink4:#b3b9c7;--rl-surface2:#f4f5f8;--rl-surface3:#eceef3;
  --rl-acc:#f15b41;--rl-acc2:#e04a30;--rl-danger:#e11d48;--rl-ok:#0e9f6e;
  background:rgba(15,18,24,.42)!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:0!important;align-items:stretch!important;justify-content:flex-end!important}
.contact-detail-modal .contact-detail-panel.cp2{position:fixed;right:12px;top:12px;bottom:12px;left:auto;width:min(700px,calc(100vw - 24px))!important;max-width:none!important;height:auto!important;max-height:none!important;margin:0!important;display:flex;flex-direction:column;
  background:#fff!important;border:0!important;border-radius:20px!important;box-shadow:0 32px 64px -16px rgba(16,24,40,.28),0 8px 20px -8px rgba(16,24,40,.12),0 0 0 1px rgba(16,24,40,.05)!important;overflow:hidden;transform:none!important;animation:rl-profile-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes rl-profile-in{from{opacity:0;transform:translateX(40px)}}
.cp2{color:var(--rl-ink);font-family:"Plus Jakarta Sans",system-ui,sans-serif}

/* header */
.cp2 .cp2-hd{gap:14px;padding:20px 20px 0;border-bottom:0;align-items:flex-start}
.cp2 .cp2-av{width:52px;height:52px;font-size:17px;font-weight:800;color:var(--rl-acc2)!important;background:#fff1ed!important;box-shadow:inset 0 0 0 1px rgba(241,91,65,.22)}
.cp2 .cp2-nm{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--rl-ink)}
.cp2 .cp2-sub{font-size:13px;color:var(--rl-ink3);margin-top:2px;gap:6px}
.cp2 .cp2-chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(16,24,40,.06)}
.cp2 .cp2-chip svg{flex:none}
.cp2 .cp2-acts .btn{width:32px;height:32px;min-height:32px!important;padding:0!important;border:0!important;border-radius:8px!important;background:none!important;box-shadow:none!important;color:var(--rl-ink3)!important;font-size:0!important;display:grid;place-items:center}
.cp2 .cp2-acts .btn:hover{background:var(--rl-surface3)!important;color:var(--rl-ink)!important}
.cp2 .cp2-acts .btn svg{display:block}
.cp2 .rl-pf-actions{flex:none;display:flex;gap:8px;padding:14px 20px 0}
.cp2 .rl-pf-actions .rl-btn{flex:1}
.cp2 .rl-pf-actions .rl-btn.is-sq{flex:none}

/* numbers */
.cp2 .cp2-stats{margin:16px 20px 0;border:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--rl-line)}
.cp2 .cp2-stat{padding:11px 14px;border-right:1px solid var(--rl-line);min-width:0}
.cp2 .cp2-stat .n{font-size:15px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp2 .cp2-stat .l{font-family:inherit;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--rl-ink3);margin-top:1px}

/* the AI zone */
.cp2 .cp2-ai{margin:16px 20px 0;padding:14px 16px;gap:12px;border:0;border-radius:16px;color:#e2e5ee;background:radial-gradient(110% 160% at 0% 0%,rgba(241,91,65,.36),transparent 58%),linear-gradient(150deg,#262b3b,#141722);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 16px 32px -16px rgba(21,24,35,.75)}
.cp2 .cp2-ai .ic{width:32px;height:32px;border-radius:9px;border:0;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#ff8a70}
.cp2 .cp2-ai .t{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff9a83}
.cp2 .cp2-ai .d{font-size:13.5px;color:#fff;font-weight:500;margin-top:3px;line-height:1.45}

/* tabs and body */
.cp2 .cp2-tabs{gap:4px;padding:14px 20px 0;border-bottom:1px solid var(--rl-line);overflow-x:auto;scrollbar-width:none}
.cp2 .cp2-tab{font-size:13px;font-weight:600;color:var(--rl-ink3);padding:9px 12px;white-space:nowrap}
.cp2 .cp2-tab:hover{color:var(--rl-ink)}
.cp2 .cp2-tab.active{color:var(--rl-ink)}
.cp2 .cp2-tab.active::after{left:0;right:0;background:var(--rl-acc)}
.cp2 .cp2-scroll{padding:18px 20px 22px}
.cp2 .cp2-sech{font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--rl-ink3);margin:0 0 8px}
.cp2 .cp2-row{padding:8px 0;font-size:13px;border-top:1px solid #f0f1f5}
.cp2 .cp2-row .k{color:var(--rl-ink3)}
.cp2 .cp2-row .v{font-weight:600;color:var(--rl-ink)}
.cp2 .cp2-row .cp2-v.clip{font-family:inherit;font-size:12.5px}
.cp2 .cp2-tl::before{left:5px;width:1.5px;background:var(--rl-line)}
.cp2 .cp2-tli{padding:7px 0;font-size:13px;font-weight:600}
.cp2 .cp2-tli::before{top:12px;border:2px solid #fff;box-shadow:0 0 0 1px var(--rl-line)}
.cp2 .cp2-tli .d{font-size:12.5px;color:var(--rl-ink2)}
.cp2 .cp2-tli .tt{font-size:11.5px;color:var(--rl-ink3)}
.cp2 .helper-text{font-size:12.5px;color:var(--rl-ink3)}
.cp2 .empty-state{color:var(--rl-ink3);font-size:13px}
.cp2 .empty-state .icon{width:40px;height:40px;margin:0 auto 10px;border-radius:12px;display:grid;place-items:center;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair);color:var(--rl-ink3);font-size:0}
.cp2 .cp2-scroll .btn{min-height:32px!important;height:32px;padding:0 11px!important;border-radius:8px!important;font-size:12.5px!important;font-weight:600;display:inline-flex;align-items:center;gap:6px;background:#fff!important;border:1px solid var(--rl-line)!important;color:var(--rl-ink)!important;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.cp2 .cp2-scroll .btn:hover{background:#fafbfc!important;border-color:#d5d9e3!important}
/* :not([data-tagin]) — the tag field's own input is a TOKEN inside a shell
   that already draws the border and the focus ring. Without this exclusion
   the generic field rule out-specified it and the tag box came out as a coral
   ring inside a coral ring (owner: "Tags UI also not good"). */
.cp2 .cp2-scroll input[type="text"]:not([data-tagin]),.cp2 .cp2-scroll select{min-height:40px!important;height:40px;border-radius:10px!important;border:1px solid var(--rl-line)!important;font-size:13.5px!important;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.cp2 .cp2-scroll input[type="text"]:not([data-tagin]):focus,.cp2 .cp2-scroll select:focus{border-color:var(--rl-acc)!important;box-shadow:0 0 0 4px rgba(241,91,65,.2)!important}
.cp2 .cpa-ic{font-size:0;display:grid;place-items:center;color:var(--rl-ink2)}

/* the tag editor replaces "type them all again, comma separated" */
.cp2 #contactDetailTagInput,.cp2 #contactDetailTagInput+.btn{display:none!important}
.cp2 .rl-pf-tags{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-height:42px;padding:7px 8px;overflow-x:auto;border:1px solid var(--rl-line);border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.cp2 .rl-pf-tags:focus-within{border-color:var(--rl-acc);box-shadow:0 0 0 4px rgba(241,91,65,.2)}
/* Each tag keeps its own width and clips; the title carries the whole thing. */
.cp2 .rl-pf-tags .rl-tag{flex:none;max-width:220px}
.cp2 .rl-pf-tags input{flex:1 0 128px;min-width:128px;height:26px!important;min-height:0!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;outline:0!important;background:none!important;font-size:13.5px!important;width:auto!important}

@media (max-width:760px){
  .contact-detail-modal .contact-detail-panel.cp2{inset:0;width:auto!important;border-radius:0!important}
  .cp2 .cp2-stats{grid-template-columns:1fr 1fr}
  .cp2 .cp2-stat:nth-child(2){border-right:0}
  .cp2 .cp2-stat:nth-child(-n+2){border-bottom:1px solid var(--rl-line)}
  .cp2 .cp2-cols{grid-template-columns:1fr}
  .cp2 .rl-pf-actions .rl-btn span{display:none}
}
@media (prefers-reduced-motion:reduce){.contact-detail-modal .contact-detail-panel.cp2{animation:none}}