#page-contacts{flex-direction:row !important;align-items:stretch;gap:0}
  .seg-rail{flex:0 0 236px;width:236px;border-right:1px solid #ECECEE;background:transparent;display:flex;flex-direction:column;overflow-y:auto;padding:16px 12px}
  .seg-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .seg-rail-top{display:flex;align-items:center;justify-content:space-between;padding:0 6px 12px}
  .seg-rail-title{font:600 14px/1 'Inter',sans-serif;color:#101828;letter-spacing:-.01em}
  .seg-new{display:inline-flex;align-items:center;justify-content:center;gap:0;height:26px;width:26px;padding:0;border:1px solid #E4E7EC;border-radius:7px;background:#fff;color:#344054;font:600 12px/1 'Inter',sans-serif;cursor:pointer;transition:background .14s ease,border-color .14s ease}
  .seg-new:hover{background:#F6F8FC;border-color:#C6D6FF;color:var(--brand-blue)}
  .seg-new svg{width:14px;height:14px}
  /* The wrapper is what you hover; the button inside it is what you press,
     and the kebab rides on top at the right edge. Nesting the kebab inside
     .seg-item is not an option — it is a button. */
  .seg-row{position:relative;margin-bottom:1px;border-radius:8px;transition:background .13s ease}
  .seg-row:hover{background:#FAFAFB}
  .seg-row.active{background:#F4F5F7}
  .seg-item{position:relative;display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:8px 9px;border:0;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font-family:'Inter',sans-serif}
  /* How many contacts, at the end of the row. Soft rather than grey: the count
     belongs to the segment, and a neutral chip beside a neutral name reads as
     one more piece of the label. */
  .seg-cnt{flex:0 0 auto;min-width:22px;height:19px;padding:0 6px;display:inline-grid;
    place-items:center;border-radius:6px;background:#F2F4F7;color:#667085;
    font:600 11px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums}
  .seg-row.active .seg-cnt{background:#E7E9EE;color:#475467}

  /* The kebab sits on top of the count rather than beside it — the row has no
     room for both, and a badge that slides sideways on hover is worse than one
     that is simply covered. The ground and the shadow are what make it read as
     a layer above rather than a smudge over the number. */
  .seg-kebab{position:absolute;right:6px;top:50%;transform:translateY(-50%);
    width:24px;height:24px;display:grid;place-items:center;padding:0;
    border:1px solid #E4E7EC;border-radius:7px;background:#fff;color:#667085;cursor:pointer;
    box-shadow:0 2px 6px rgba(16,24,40,.10),0 0 0 3px #fff;
    opacity:0;transition:opacity .13s ease,background .13s ease,color .13s ease,border-color .13s ease}
  .seg-kebab svg{width:15px;height:15px;display:block}
  .seg-row:hover .seg-kebab,.seg-kebab:focus-visible,.seg-kebab[aria-expanded="true"]{opacity:1}
  .seg-kebab:hover{background:#F6F8FC;border-color:#C6D6FF;color:var(--brand-blue)}
  @media (prefers-reduced-motion:reduce){.seg-row,.seg-kebab{transition:none}}

  /* Portalled to body, so the rail's own overflow cannot clip it. */
  .seg-menu{position:fixed;z-index:2100;min-width:172px;padding:5px;
    border:1px solid #E4E7EC;border-radius:10px;background:#fff;
    box-shadow:0 12px 28px -8px rgba(16,24,40,.22);font-family:'Inter',sans-serif}
  .seg-menu-i{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
    padding:7px 9px;border:0;border-radius:7px;background:transparent;cursor:pointer;
    text-align:left;font:500 13px/1.3 'Inter',sans-serif;color:#344054}
  .seg-menu-i svg{width:15px;height:15px;flex:0 0 15px;color:#98A2B3}
  .seg-menu-i:hover{background:#F4F5F7}
  .seg-menu-i.is-danger{color:#B42318}
  .seg-menu-i.is-danger svg{color:#D92D20}
  .seg-menu-i.is-danger:hover{background:#FEF3F2}
  .seg-ic{flex:0 0 26px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:transparent;color:#98A2B3}
  .seg-ic svg{width:16px;height:16px}
  .seg-item.active .seg-ic{background:transparent;color:#667085}
  body.seg-icons-hidden .seg-ic{display:none}
  .seg-nm{flex:1 1 auto;min-width:0;font:500 13px/1.3 'Inter',sans-serif;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
  .seg-item.active .seg-nm{color:#101828;font-weight:600}
  .seg-type{flex:0 0 auto;display:inline-grid;place-items:center;width:14px;height:14px;color:#98A2B3}
  .seg-type svg{width:12px;height:12px}
  .seg-type.smart{color:#6941C6}
  .seg-head{display:flex;align-items:center;gap:12px;padding:16px 20px 12px;border-bottom:1px solid #F2F4F7}
  .seg-head-ic{flex:0 0 40px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:#EAF1FF;color:var(--brand-blue)}
  .seg-head-ic svg{width:20px;height:20px}
  .seg-head-main{flex:1 1 auto;min-width:0}
  .seg-head-t{display:flex;align-items:center;gap:9px;font:600 17px/1.2 'Inter',sans-serif;color:#101828;letter-spacing:-.015em}
  .seg-badge{font:600 10.5px/1 'Inter',sans-serif;letter-spacing:.03em;padding:4px 8px;border-radius:999px}
  .seg-badge.smart{background:#F4F3FF;color:#6941C6}
  .seg-badge.static{background:#F2F4F7;color:#475467}
  .seg-badge.system{background:#EFF8FF;color:#026AA2}
  .seg-head-s{margin-top:3px;font:400 13px/1.4 'Inter',sans-serif;color:#98A2B3}
  body.theme-dark .seg-rail{background:#1E2023;border-color:#2F333A}
  body.theme-dark .seg-rail-title,body.theme-dark .seg-item.active .seg-nm{color:#F4F4F5}
  body.theme-dark .seg-item:hover{background:#23262C}
  body.theme-dark .seg-item.active{background:#282B31}
  body.theme-dark .seg-new{background:#23262C;border-color:#353841;color:#D1D5DB}
  body.theme-dark .seg-head{border-color:#2F333A}
  body.theme-dark .seg-head-t{color:#F4F4F5}
  #page-contacts .sk-panel[data-skk="justcall"]{position:relative}
  .seg-skel{position:absolute;inset:0;background:#fff;z-index:6;display:none;flex-direction:column;overflow:hidden}
  .sk-panel.seg-loading .seg-skel{display:flex}
  .seg-skel-row{display:flex;align-items:center;gap:22px;height:56px;padding:0 16px;border-bottom:1px solid #F4F5F7}
  .seg-skel .sk-shimmer{flex:0 0 auto;background:linear-gradient(90deg,#EEF0F3 25%,#F7F8FA 50%,#EEF0F3 75%);background-size:200% 100%;animation:segSkShimmer 1.2s ease-in-out infinite;border-radius:6px}
  @keyframes segSkShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  body.theme-dark .seg-skel{background:#23262C}
  body.theme-dark .seg-skel .sk-shimmer{background:linear-gradient(90deg,#2A2D33 25%,#31353C 50%,#2A2D33 75%);background-size:200% 100%}
  .cs-overlay{position:fixed;inset:0;z-index:2000;background:rgba(16,24,40,.45);display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .18s ease}
  .cs-overlay.open{display:flex;opacity:1}
  .cs-card{width:560px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 60px -12px rgba(16,24,40,.35);overflow:hidden;transform:translateY(10px) scale(.985);transition:transform .26s cubic-bezier(.16,1,.3,1);font-family:'Inter',sans-serif}
  .cs-overlay.open .cs-card{transform:none}
  .cs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 15px;border-bottom:1px solid #F2F4F7}
  .cs-title{font:600 18px/1.2 'Inter',sans-serif;color:#101828;letter-spacing:-.02em}
  .cs-sub{margin-top:4px;font:400 13px/1.4 'Inter',sans-serif;color:#98A2B3}
  .cs-x{flex:0 0 auto;width:30px;height:30px;border:1px solid #EAECF0;border-radius:8px;background:#fff;color:#667085;cursor:pointer;display:grid;place-items:center;font-size:19px;line-height:1}
  .cs-x:hover{background:#F9FAFB;color:#101828}
  .cs-body{flex:1 1 auto;overflow-y:auto;padding:18px 22px}
  .cs-label{display:block;font:600 12px/1 'Inter',sans-serif;color:#344054;margin:16px 0 7px}
  .cs-body>.cs-label:first-child{margin-top:0}
  .cs-name{width:100%;box-sizing:border-box;height:38px;padding:0 12px;border:1px solid #E4E7EC;border-radius:9px;font:400 14px/1 'Inter',sans-serif;color:#101828;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
  .cs-name:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,76,230,.12)}
  .cs-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cs-seg button{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:11px 13px;border:1px solid #E4E7EC;border-radius:11px;background:#fff;cursor:pointer;font:600 13.5px/1.2 'Inter',sans-serif;color:#101828;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
  .cs-seg button span{font:400 11.5px/1.35 'Inter',sans-serif;color:#98A2B3}
  .cs-seg button.active{border-color:var(--brand-blue);background:#F5F8FF;box-shadow:0 0 0 1px var(--brand-blue) inset}
  .cs-matchrow{display:flex;align-items:center;gap:7px;font:500 13px/1 'Inter',sans-serif;color:#475467;margin-bottom:10px}
  .cs-matchrow select{height:30px;border:1px solid #E4E7EC;border-radius:7px;background:#fff;font:600 13px/1 'Inter',sans-serif;color:var(--brand-blue);padding:0 8px;cursor:pointer;outline:none}
  .cs-conds{display:flex;flex-direction:column;gap:8px}
  .cs-cond{display:flex;align-items:center;gap:8px}
  .cs-cond select,.cs-cond input{height:36px;border:1px solid #E4E7EC;border-radius:8px;background:#fff;font:400 13px/1 'Inter',sans-serif;color:#101828;padding:0 10px;outline:none;min-width:0}
  .cs-cond select:focus,.cs-cond input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,76,230,.1)}
  .cs-field{flex:0 0 132px}.cs-op{flex:0 0 124px}.cs-val{flex:1 1 auto}
  .cs-none{display:flex;align-items:center;color:#98A2B3;font:400 13px/1 'Inter',sans-serif;padding-left:4px}
  .cs-daywrap{flex:1 1 auto;display:flex;align-items:center;gap:6px}.cs-num{width:64px;flex:0 0 64px}.cs-suffix{font:400 12.5px/1 'Inter',sans-serif;color:#98A2B3}
  .cs-del{flex:0 0 auto;width:32px;height:32px;border:0;background:transparent;border-radius:7px;color:#98A2B3;cursor:pointer;display:grid;place-items:center}
  .cs-del:hover{background:#FEF3F2;color:#D92D20}
  .cs-add{margin-top:12px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px dashed #C6D0E0;border-radius:8px;background:#fff;color:var(--brand-blue);font:600 12.5px/1 'Inter',sans-serif;cursor:pointer;transition:background .14s ease,border-color .14s ease}
  .cs-add:hover{background:#F5F8FF;border-color:var(--brand-blue)}
  .cs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid #F2F4F7;background:#FBFCFE}
  .cs-preview{font:500 13px/1.3 'Inter',sans-serif;color:#475467}.cs-preview b{color:#101828;font-weight:700}
  .cs-actions{display:flex;gap:8px}
  .cs-cancel{height:38px;padding:0 16px;border:1px solid #E4E7EC;border-radius:9px;background:#fff;color:#344054;font:600 13px/1 'Inter',sans-serif;cursor:pointer}
  .cs-cancel:hover{background:#F9FAFB}
  .cs-create{height:38px;padding:0 18px;border:0;border-radius:9px;background:var(--brand-blue);color:#fff;font:600 13px/1 'Inter',sans-serif;cursor:pointer;transition:background .15s ease}
  .cs-create:hover{background:var(--brand-blue-strong)}
  .cs-create:disabled{background:#C9D5EC;cursor:not-allowed}
  body.cs-static .cs-rules{display:none}
  body:not(.cs-static) .cs-pick{display:none}
  /* A picker is a list you have to get through, so it gets the room: the card
     widens for a static list and narrows back for a rule-built one. */
  body.cs-static .cs-card{width:860px}
  .cs-pick .cs-label{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .cs-pick-c{font:500 11.5px/1 'Inter',sans-serif;color:#98A2B3}
  .cs-pick-f{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:9px}
  .cs-pick-q{flex:1 1 auto;min-width:0;margin-bottom:0}
  /* One button rather than two selects sitting open beside the search: the
     filters are set once and read many times, so they fold away. */
  .cs-pick-fb{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;
    border:1px solid #E4E7EC;border-radius:9px;background:#fff;color:#344054;
    font:600 12.5px/1 'Inter',sans-serif;cursor:pointer;
    transition:background .13s ease,border-color .13s ease,color .13s ease}
  .cs-pick-fb svg{width:14px;height:14px;flex:0 0 14px}
  .cs-pick-fb:hover{background:#F9FAFB}
  .cs-pick-fb.on{border-color:#B2CCFF;color:var(--brand-blue)}
  .cs-pick-fn{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;
    border-radius:5px;background:var(--brand-blue);color:#fff;font:600 10.5px/1 'Inter',sans-serif}
  .cs-pick-pop{position:absolute;right:0;top:44px;z-index:20;width:250px;padding:12px;
    border:1px solid #E4E7EC;border-radius:11px;background:#fff;
    box-shadow:0 14px 32px -10px rgba(16,24,40,.24)}
  .cs-pick-pop[hidden]{display:none}
  .cs-pick-pl{display:block;margin-bottom:10px;font:600 11px/1 'Inter',sans-serif;color:#667085;
    letter-spacing:.03em;text-transform:uppercase}
  .cs-pick-sel{width:100%;margin-top:6px;height:34px;padding:0 9px;border:1px solid #E4E7EC;
    border-radius:8px;background:#fff;font:500 12.5px/1 'Inter',sans-serif;color:#344054;
    cursor:pointer;outline:none;text-transform:none;letter-spacing:0}
  .cs-pick-sel:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,76,230,.1)}
  .cs-pick-pc{display:flex;align-items:center;gap:8px;padding:7px 0 2px;cursor:pointer;
    font:500 12.5px/1.3 'Inter',sans-serif;color:#344054}
  .cs-pick-pc input{width:15px;height:15px;flex:0 0 15px;accent-color:var(--brand-blue);cursor:pointer}
  .cs-pick-clr{margin-top:9px;width:100%;height:30px;border:1px solid #E4E7EC;border-radius:8px;
    background:#fff;color:#667085;font:600 12px/1 'Inter',sans-serif;cursor:pointer}
  .cs-pick-clr:hover{background:#F9FAFB;color:#344054}

  /* The list is a table now, so it gets a header — and the header's checkbox
     is what selects everything, which is where you would look for it. */
  .cs-pick-wrap{border:1px solid #E4E7EC;border-radius:10px;overflow:hidden}
  .cs-pick-head{display:flex;align-items:center;gap:10px;padding:8px 11px;
    background:#FAFBFC;border-bottom:1px solid #EAECF0;
    font:600 11px/1 'Inter',sans-serif;color:#667085;letter-spacing:.04em;text-transform:uppercase}
  .cs-pick-hc{flex:0 0 15px;display:grid;place-items:center}
  .cs-pick-hc input{width:15px;height:15px;accent-color:var(--brand-blue);cursor:pointer}
  .cs-pick-hn{flex:1 1 auto;min-width:0}
  .cs-pick-hs{flex:0 0 auto;padding-left:10px}
  .cs-pick-list{max-height:340px;overflow-y:auto}
  .cs-pick-row{display:flex;align-items:center;gap:10px;padding:8px 11px;cursor:pointer;
    border-bottom:1px solid #F2F4F7}
  .cs-pick-row:last-child{border-bottom:0}
  .cs-pick-row:hover{background:#FAFAFB}
  .cs-pick-row.on{background:#F5F8FF}
  .cs-pick-row input{flex:0 0 auto;width:15px;height:15px;accent-color:var(--brand-blue);cursor:pointer}
  .cs-pick-m{display:flex;flex-direction:column;gap:1px;min-width:0}
  .cs-pick-n{font:500 13px/1.3 'Inter',sans-serif;color:#101828}
  .cs-pick-s{font:400 11.5px/1.3 'Inter',sans-serif;color:#98A2B3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cs-pick-empty{padding:16px 12px;font:400 13px/1.4 'Inter',sans-serif;color:#98A2B3;text-align:center}
  /* What the contact already belongs to, on the right where it reads as
     context rather than as part of the name. */
  .cs-pick-in{margin-left:auto;display:flex;align-items:center;gap:4px;flex:0 0 auto;padding-left:10px}
  .cs-pick-seg{display:inline-flex;align-items:center;height:19px;padding:0 7px;border-radius:6px;
    background:#F2F4F7;color:#667085;font:500 11px/1 'Inter',sans-serif;white-space:nowrap;
    max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .cs-pick-seg.is-more{background:transparent;color:#98A2B3;padding:0 2px;cursor:default}
  body.theme-dark .cs-card{background:#23262C}
  body.theme-dark .cs-title{color:#F4F4F5}
  body.theme-dark .cs-head,body.theme-dark .cs-foot{border-color:#2F333A}
  body.theme-dark .cs-foot{background:#1F2023}
  body.theme-dark .cs-name,body.theme-dark .cs-cond select,body.theme-dark .cs-cond input,body.theme-dark .cs-matchrow select{background:#2A2D33;border-color:#3A3F47;color:#F4F4F5}
  body.theme-dark .cs-seg button{background:#2A2D33;border-color:#3A3F47;color:#F4F4F5}
  body.theme-dark .cs-seg button.active{background:#243056}
  body.theme-dark .cs-cancel{background:#2A2D33;border-color:#3A3F47;color:#E5E7EB}
  body.theme-dark .seg-row:hover{background:#23262C}
  body.theme-dark .seg-row.active{background:#282B31}
  body.theme-dark .seg-kebab{color:#8A9099}
  body.theme-dark .seg-kebab:hover{background:#31353C;color:#E4E4E7}
  body.theme-dark .seg-menu{background:#23262C;border-color:#3A3F47;box-shadow:0 12px 28px -8px rgba(0,0,0,.55)}
  body.theme-dark .seg-menu-i{color:#E5E7EB}
  body.theme-dark .seg-menu-i:hover{background:#2F333A}
  body.theme-dark .seg-menu-i.is-danger{color:#FDA29B}
  body.theme-dark .cs-pick-list{border-color:#3A3F47}
  body.theme-dark .cs-pick-row{border-bottom-color:#2F333A}
  body.theme-dark .cs-pick-row:hover{background:#2A2D33}
  body.theme-dark .cs-pick-row.on{background:#243056}
  body.theme-dark .cs-pick-n{color:#F4F4F5}

  /* Rail: one hairline under All Contacts. Everything below it is a segment,
     which is what the panel is already titled — a sub-heading would say it
     twice, two rows apart. */
  /* The rule lives in the margin below the row, not inside it: padding-bottom
     was part of the row's own box, so the active background grew by 9px and
     All Contacts sat in a block taller than every other row. */
  .seg-row.is-all{margin-bottom:13px}
  .seg-row.is-all::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
    height:1px;background:#ECECEE}
  body.theme-dark .seg-row.is-all::after{background:#2F333A}

  /* The count sits with the name it belongs to. Not a pill: a pill beside a
     17px title reads as a status, and this is a measurement. */
  body.theme-dark .cs-pick-sel{background:#2A2D33;border-color:#3A3F47;color:#F4F4F5}
  body.theme-dark .cs-pick-all{color:#E5E7EB}
  body.theme-dark .cs-pick-box{background:#2A2D33;border-color:#3A3F47}
  body.theme-dark .cs-pick-only{background:#2A2D33;border-color:#3A3F47;color:#B4BAC4}
  body.theme-dark .cs-pick-only.on{background:#243056;border-color:#3A5490;color:#9EC0FF}
  body.theme-dark .cs-pick-seg{background:#31353C;color:#B4BAC4}
  body.theme-dark .seg-cnt{background:#31353C;color:#B4BAC4}
  body.theme-dark .seg-row.active .seg-cnt{background:#3A3F47;color:#E4E4E7}
  body.theme-dark .seg-kebab{background:#2A2D33;border-color:#3A3F47;color:#B4BAC4;
    box-shadow:0 2px 6px rgba(0,0,0,.45),0 0 0 3px #1E2023}
  body.theme-dark .seg-kebab:hover{background:#31353C;border-color:#4A5160;color:#E4E4E7}
  body.theme-dark .cs-pick-fb{background:#2A2D33;border-color:#3A3F47;color:#E5E7EB}
  body.theme-dark .cs-pick-pop{background:#23262C;border-color:#3A3F47;
    box-shadow:0 14px 32px -10px rgba(0,0,0,.55)}
  body.theme-dark .cs-pick-pc,body.theme-dark .cs-pick-clr{color:#E5E7EB}
  body.theme-dark .cs-pick-clr{background:#2A2D33;border-color:#3A3F47}
  body.theme-dark .cs-pick-wrap{border-color:#3A3F47}
  body.theme-dark .cs-pick-head{background:#26292F;border-bottom-color:#2F333A;color:#9AA1AC}