/* The person card's tab bar (js/card.js) and its Posts and Messaging windows (js/card-pop.js), as in RecruiterBee
   (Max 2026-10-14: "i want 4 tabs jsut identical to what we have on recuiter bee"). Colours are the app's tokens, so light
   and dark both follow. */

/* ── the tab bar: under the contact, it stays at the top of the card once scrolled to (room on the right for the X) ── */
#dm-side .dms-tabs{position:sticky;top:0;z-index:1;display:flex;align-items:stretch;gap:22px;margin-top:18px;padding:0 64px 0 24px;
  background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#dm-side .dms-tabs::-webkit-scrollbar{display:none}
#dm-side .dms-tab{flex:none;display:inline-flex;align-items:center;gap:6px;height:48px;border:0;border-bottom:2px solid transparent;background:transparent;
  padding:2px 2px 0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink3);white-space:nowrap;cursor:pointer;transition:color .12s,border-color .12s}
#dm-side .dms-tab:hover{color:var(--ink2)}
#dm-side .dms-tab.on{color:var(--brand-d);border-bottom-color:var(--brand)}
#dm-side .dms-tab svg.co-i{width:14px;height:14px}
#dm-side .dms-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:4px}
@media (max-width:600px){ #dm-side .dms-tabs{padding:0 56px 0 16px;gap:18px} }

/* ── the window over the card ── */
#dm-pop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;
  font-family:"Circular Std","Figtree",ui-sans-serif,system-ui,sans-serif,"Noto Sans Thai";color:var(--ink)}
#dm-pop.hide{display:none}
#dm-pop svg.cp-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#dm-pop .dmp-bg{position:absolute;inset:0;background:rgb(0 0 0 / .45)}
#dm-pop .dmp-c{position:relative;width:min(680px,100%);max-height:min(90vh,940px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--page);border:1px solid var(--line);border-radius:16px;box-shadow:var(--pop);animation:dmp-in .16s ease-out}
#dm-pop.msg .dmp-c{height:min(88vh,860px);background:var(--surface)}
@keyframes dmp-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#dm-pop .dmp-c,#dm-pop .dmp-spin{animation:none}}
#dm-pop .dmp-spin{display:inline-block;width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid var(--brand);border-top-color:transparent;animation:spin .8s linear infinite}
#dm-pop .dmp-x{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer}
#dm-pop .dmp-x:hover{background:var(--hover);color:var(--ink)}
#dm-pop .dmp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:9999px;border:1px solid var(--line2);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
#dm-pop .dmp-btn:hover:not(:disabled){background:var(--hover)}
#dm-pop .dmp-btn:disabled{opacity:.45;cursor:not-allowed}
#dm-pop .dmp-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
#dm-pop .dmp-btn.pri:hover:not(:disabled){background:var(--brand-h)}
#dm-pop .dmp-btn.pri .dmp-spin{border-color:#fff;border-top-color:transparent;width:12px;height:12px}
#dm-pop .dmp-btn svg.cp-i{width:14px;height:14px}
#dm-pop .dmp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 16px;text-align:center;font-size:13.5px;line-height:20px;color:var(--ink3)}
#dm-pop .dmp-empty .dmp-spin{margin-bottom:-4px}
#dm-pop .dmp-av{position:relative;flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--chip);color:var(--ink2);font-size:14px;font-weight:700}
#dm-pop .dmp-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#dm-pop .dmp-av.lg{width:52px;height:52px;font-size:17px}
#dm-pop .dmp-av.md{width:44px;height:44px}
#dm-pop .dmp-av.sm{width:32px;height:32px;font-size:11px}
#dm-pop .dmp-li{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9999px;border:1px solid var(--line2);background:var(--surface);
  color:var(--ink2);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
#dm-pop .dmp-li:hover{background:var(--hover);color:var(--ink)}
#dm-pop .dmp-li svg.cp-i{width:14px;height:14px}

/* Posts: the person, the tools, the feed */
#dm-pop .dmp-hd{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 14px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
#dm-pop .dmp-hm{flex:1;min-width:0}
#dm-pop h2{margin:0;font-size:16px;line-height:22px;font-weight:700;overflow-wrap:anywhere}
#dm-pop .dmp-sub{margin-top:2px;font-size:12.5px;line-height:18px;color:var(--ink2);overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
#dm-pop .dmp-acct{display:inline-flex;align-items:center;gap:5px;margin-top:7px;height:22px;padding:0 9px;border-radius:9999px;background:var(--tint);color:var(--brand-d);font-size:11.5px;font-weight:600;max-width:100%}
#dm-pop .dmp-acct span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-pop .dmp-acct svg.cp-i{width:12px;height:12px}
#dm-pop .dmp-acct.hide{display:none}
#dm-pop .dmp-hs{flex:none;display:flex;align-items:center;gap:8px}
#dm-pop .dmp-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 20px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
#dm-pop .dmp-fs{display:flex;gap:6px}
#dm-pop .dmp-f{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:9999px;border:1px solid var(--line2);background:var(--surface);
  color:var(--ink2);font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer}
#dm-pop .dmp-f:hover{background:var(--hover)}
#dm-pop .dmp-f.on{background:var(--tint);border-color:transparent;color:var(--brand-d)}
#dm-pop .dmp-f svg.cp-i{width:13px;height:13px}
#dm-pop .dmp-div{width:1px;height:20px;background:var(--line2)}
#dm-pop .dmp-srch{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9999px;border:1px solid var(--line2);background:var(--page);color:var(--ink3)}
#dm-pop .dmp-srch:focus-within{border-color:var(--brand);background:var(--surface)}
#dm-pop .dmp-srch svg.cp-i{width:14px;height:14px}
#dm-pop .dmp-srch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:13px}
#dm-pop .dmp-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 20px 18px}
#dm-pop .dmp-feed{display:flex;flex-direction:column;gap:12px}
#dm-pop .dmp-more{height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--brand-d);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#dm-pop .dmp-more:hover{background:var(--hover)}
#dm-pop .dmp-more span{color:var(--ink3);font-weight:500}
/* one post, as on LinkedIn */
#dm-pop .dmp-post{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--soft)}
#dm-pop .dmp-rep{padding:10px 14px 0;font-size:12px;font-weight:600;color:var(--ink3)}
#dm-pop .dmp-ph{display:flex;align-items:flex-start;gap:10px;padding:12px 14px 0}
#dm-pop .dmp-phm{min-width:0;flex:1;display:flex;flex-direction:column}
#dm-pop .dmp-phm b{font-size:14px;line-height:19px;font-weight:600;overflow-wrap:anywhere}
#dm-pop .dmp-phm small{font-size:12px;line-height:16px;color:var(--ink3)}
#dm-pop .dmp-phm small.hl{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-pop .dmp-pt{padding:10px 14px 0;font-size:14px;line-height:21px;white-space:pre-wrap;overflow-wrap:anywhere}
#dm-pop .dmp-pt.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
#dm-pop .dmp-pt mark{background:var(--warn-s);color:inherit;border-radius:3px}
#dm-pop .dmp-pmore{border:0;background:transparent;padding:2px 14px 0;color:var(--ink3);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#dm-pop .dmp-pmore:hover{color:var(--brand-d);text-decoration:underline}
#dm-pop .dmp-media{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;margin-top:10px;background:var(--chip)}
#dm-pop video.dmp-media{background:#000}
#dm-pop .dmp-pc{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:20px;padding:9px 14px 8px;font-size:12px;color:var(--ink3)}
#dm-pop .dmp-lk{border:0;background:transparent;padding:0;color:inherit;font:inherit;cursor:pointer}
#dm-pop .dmp-lk:hover{color:var(--brand-d);text-decoration:underline}
#dm-pop .dmp-bar{display:flex;border-top:1px solid var(--line);padding:2px 6px}
#dm-pop .dmp-pa{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border:0;border-radius:8px;background:transparent;
  color:var(--ink2);font:inherit;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
#dm-pop .dmp-pa:hover:not(:disabled){background:var(--hover);color:var(--ink)}
#dm-pop .dmp-pa:disabled{opacity:.45;cursor:default}
#dm-pop .dmp-pa.on{color:var(--brand-d)}
#dm-pop .dmp-pa svg.cp-i{width:17px;height:17px}
#dm-pop .dmp-em{font-size:16px;line-height:1}
#dm-pop .dmp-rx{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 10px}
#dm-pop .dmp-rx button{width:40px;height:34px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:9999px;background:var(--surface);font-size:17px;line-height:1;cursor:pointer;transition:transform .12s}
#dm-pop .dmp-rx button:hover{background:var(--hover);transform:scale(1.08)}
#dm-pop .dmp-cbox{display:flex;align-items:center;gap:8px;padding:4px 14px 10px}
#dm-pop .dmp-cbox textarea{flex:1;min-width:0;min-height:38px;max-height:200px;border:1px solid var(--line2);border-radius:19px;padding:8px 14px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:13.5px;line-height:20px;resize:none;outline:0}
#dm-pop .dmp-cbox textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px oklch(.656 .115 218.497 / .15)}
#dm-pop .dmp-pn{padding:0 14px 10px;font-size:12.5px;line-height:18px;color:var(--good)}
#dm-pop .dmp-pn.bad{color:var(--bad)}
#dm-pop .dmp-cms{padding:4px 14px 10px;border-top:1px solid var(--line);background:var(--page)}
#dm-pop .dmp-cl{display:flex;align-items:center;gap:8px;padding:8px 2px;font-size:12.5px;color:var(--ink3)}
#dm-pop .dmp-cm{display:flex;gap:8px;padding:8px 0}
#dm-pop .dmp-cmb{min-width:0;flex:1;display:flex;flex-direction:column;background:var(--chip);border-radius:12px;padding:8px 12px}
#dm-pop .dmp-cmb b{font-size:12.5px;line-height:17px;font-weight:600}
#dm-pop .dmp-cmb small{font-size:11px;line-height:15px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-pop .dmp-cmb p{margin:4px 0 2px;font-size:13px;line-height:19px;white-space:pre-wrap;overflow-wrap:anywhere}

/* Messaging: the bar, the person, the conversation, the reply box */
#dm-pop .dmp-top{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line)}
#dm-pop .dmp-lab{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#dm-pop .dmp-lab svg.cp-i{width:13px;height:13px}
#dm-pop .dmp-from{flex:1;min-width:0;font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-pop .dmp-as{flex:none;max-width:40%;font-size:12px;font-weight:600;color:var(--brand-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-pop .dmp-who{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
#dm-pop .dmp-wm{flex:1;min-width:0}
#dm-pop .dmp-wn{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
#dm-pop .dmp-wn b{font-size:15px;line-height:20px;font-weight:700;overflow-wrap:anywhere}
#dm-pop .dmp-wm small{display:block;font-size:12.5px;line-height:17px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-pop .dmp-chip{flex:none;font-size:10.5px;line-height:16px;font-weight:600;color:var(--ink2);background:var(--chip);border-radius:6px;padding:1px 7px;white-space:nowrap}
#dm-pop .dmp-chip.ok{color:var(--good);background:var(--good-s)}
#dm-pop .dmp-th{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px;background:var(--page);display:flex;flex-direction:column;gap:6px}
#dm-pop .dmp-day{display:flex;justify-content:center;margin:10px 0 4px}
#dm-pop .dmp-day span{font-size:11px;font-weight:600;color:var(--ink3);background:var(--chip);border-radius:9999px;padding:2px 10px}
#dm-pop .dmp-m{display:flex;flex-direction:column;align-items:flex-start;max-width:78%}
#dm-pop .dmp-m.me{align-self:flex-end;align-items:flex-end}
#dm-pop .dmp-bub{padding:9px 13px;border-radius:16px 16px 16px 4px;background:var(--surface);border:1px solid var(--line);font-size:14px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
#dm-pop .dmp-m.me .dmp-bub{border-radius:16px 16px 4px 16px;background:var(--tint);border-color:transparent}
#dm-pop .dmp-m small{margin:2px 4px 0;font-size:11px;color:var(--ink3)}
#dm-pop .dmp-file{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--ink2)}
#dm-pop .dmp-bub .dmp-file:not(:first-child){display:flex;margin-top:6px}
#dm-pop .dmp-file svg.cp-i{width:14px;height:14px}
#dm-pop .dmp-comp{padding:12px 18px 14px;border-top:1px solid var(--line);background:var(--surface)}
#dm-pop .dmp-comp textarea{display:block;width:100%;min-height:44px;max-height:200px;border:1px solid var(--line2);border-radius:12px;padding:10px 13px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:14px;line-height:20px;resize:none;outline:0}
#dm-pop .dmp-comp textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px oklch(.656 .115 218.497 / .15)}
#dm-pop .dmp-crow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
#dm-pop .dmp-chip2{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:9999px;border:1px dashed var(--line2);background:transparent;color:var(--ink2);
  font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer}
#dm-pop .dmp-chip2:hover{background:var(--hover);border-color:var(--ink3)}
#dm-pop .dmp-lim{flex:1;min-width:0;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-pop .dmp-send{min-width:96px}
#dm-pop .dmp-dup{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;line-height:18px;color:var(--warn)}
#dm-pop .dmp-dup:not(:empty){margin-top:8px}
#dm-pop .dmp-lock{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13.5px;line-height:20px;color:var(--ink2)}

@media (max-width:600px){
  #dm-pop{padding:0}
  #dm-pop .dmp-c,#dm-pop.msg .dmp-c{width:100%;height:100%;max-height:none;border:0;border-radius:0}
  #dm-pop .dmp-hd{padding:14px 12px 12px 16px}
  #dm-pop .dmp-hd .dmp-li{display:none}
  #dm-pop .dmp-tools,#dm-pop .dmp-b{padding-left:12px;padding-right:12px}
  #dm-pop .dmp-srch{flex-basis:100%}
  #dm-pop .dmp-div{display:none}
  #dm-pop .dmp-pa{font-size:12px;gap:4px}
  #dm-pop .dmp-pa svg.cp-i{width:15px;height:15px}
  #dm-pop .dmp-top{padding-left:14px}
  #dm-pop .dmp-as{display:none}
  #dm-pop .dmp-who,#dm-pop .dmp-th,#dm-pop .dmp-comp{padding-left:14px;padding-right:14px}
  #dm-pop .dmp-who .dmp-li{padding:0 10px}
  #dm-pop .dmp-m{max-width:88%}
}

/* ── candidate files in the message boxes (js/cv-attach.js): the paperclip's menu, and the picked files as chips ── */
.cva-i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cva-spin{display:inline-block;width:12px;height:12px;flex:none;border-radius:50%;border:1.5px solid var(--brand);border-top-color:transparent;animation:spin .8s linear infinite}
.cva-pk{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;height:30px;padding:0 4px 0 10px;border-radius:9999px;background:var(--tint);color:var(--brand-d);font-size:12.5px;font-weight:600}
.cva-pk a{min-width:0;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none}
.cva-pk a:hover{text-decoration:underline}
.cva-pk small{color:var(--ink3);font-weight:500}
.cva-pk button{width:22px;height:22px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.cva-pk button:hover{background:color-mix(in oklab,var(--brand) 20%,transparent)}
.cva-pk a:focus-visible,.cva-pk button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.cva-pk .cva-i{width:13px;height:13px}
.cva-menu{position:fixed;z-index:200;overflow-y:auto;overscroll-behavior:contain;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--pop,0 12px 32px rgba(0,0,0,.18))}
.cva-mi{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cva-mi:hover,.cva-mi:focus-visible{background:var(--hover);outline:none}
.cva-mi:focus-visible{box-shadow:inset 0 0 0 2px var(--brand)}
.cva-mi[aria-disabled="true"]{opacity:.45;cursor:default}
.cva-mi[aria-disabled="true"]:hover{background:transparent}
.cva-mi .cva-i{width:16px;height:16px;color:var(--ink3)}
.cva-mi.on .cva-i{color:var(--brand-d)}
.cva-mt{display:flex;flex-direction:column;min-width:0}
.cva-mt b{font-size:13.5px;font-weight:600;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cva-mt small{font-size:12px;line-height:16px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cva-mi.on .cva-mt b{color:var(--brand-d)}
.cva-mg{padding:10px 10px 4px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cva-mg:first-child{padding-top:4px}
.cva-mi + .cva-mg{margin-top:4px;border-top:1px solid var(--line)}
.cva-mn{display:flex;align-items:center;gap:8px;padding:10px;font-size:12.5px;color:var(--ink3)}
@media (prefers-reduced-motion:reduce){.cva-spin{animation:none}}

/* RecruiterBee's Find email / Find phone number, where the card has none yet */
#dm-side .dms-find{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--line2);
  background:var(--surface);color:var(--brand-d);font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer}
#dm-side .dms-find:hover:not(:disabled){background:var(--tint);border-color:transparent}
#dm-side .dms-find:disabled{opacity:.5;cursor:default}
#dm-side span.dms-find{cursor:default;color:var(--ink3);border-color:transparent;background:transparent;padding:0}
#dm-side .dms-find svg.co-i{width:13px;height:13px}
#dm-side .dms-find:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* InMail for someone not connected (the conversation window) */
#dm-pop .dmp-inmn{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:8px;font-size:12.5px;line-height:18px;color:var(--ink2);background:var(--tint);border-radius:10px;padding:8px 12px}
#dm-pop .dmp-inmn > span{flex:1 1 220px;min-width:0}
#dm-pop .dmp-inmn b{color:var(--ink)}
#dm-pop .dmp-isub{display:block;width:100%;height:38px;margin-bottom:8px;border:1px solid var(--line2);border-radius:12px;padding:0 13px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;outline:0}
#dm-pop .dmp-isub:focus{border-color:var(--brand);box-shadow:0 0 0 3px oklch(.656 .115 218.497 / .15)}
#dm-pop .dmp-comp #dmp-ita{display:block;width:100%;min-height:44px;max-height:200px;border:1px solid var(--line2);border-radius:12px;padding:10px 13px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:20px;resize:none;outline:0}
#dm-pop .dmp-comp #dmp-ita:focus{border-color:var(--brand);box-shadow:0 0 0 3px oklch(.656 .115 218.497 / .15)}
/* not connected (RecruiterBee's): the notice with Connect, over a greyed reply box */
#dm-pop .dmp-nocon{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px 10px;margin-bottom:10px;padding:10px 12px;border-radius:10px;
  background:var(--warn-s);border:1px solid color-mix(in oklab,var(--warn) 35%,transparent);color:var(--warn);font-size:12.5px;line-height:19px}
#dm-pop .dmp-nocon > svg.cp-i{width:16px;height:16px;margin-top:1px}
#dm-pop .dmp-ncx{flex:1 1 240px;min-width:0}
#dm-pop .dmp-nocon .dmp-btn{flex:none}
#dm-pop .dmp-offta{display:block;width:100%;min-height:44px;border:1px solid var(--line2);border-radius:12px;padding:10px 13px;background:var(--page);color:var(--ink3);font:inherit;font-size:14px;resize:none;opacity:.6}
#dm-pop .dmp-crow[aria-hidden="true"]{opacity:.55;pointer-events:none}
/* the tag box (js/msg-editor.js) and what goes with a message, in the card's windows */
#dm-pop .dmp-comp .dmp-edh .mte{min-height:44px;max-height:200px;overflow-y:auto}
#dm-pop .dmp-extra{display:flex;flex-wrap:wrap;gap:6px}
#dm-pop .dmp-extra:not(:empty){margin-top:8px}
#dm-pop .dmp-att.cva-on{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#dm-pop .dmp-upx{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border-radius:9999px;background:var(--tint);color:var(--brand-d);font-size:12.5px;font-weight:600}
#dm-pop .dmp-upx button{width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
#dm-pop .dmp-upx svg.cp-i{width:13px;height:13px}
#dm-pop .dmp-chip2 svg.cp-i{width:13px;height:13px;margin-right:4px}
#dm-side .dms-edh .mte{min-height:162px}
#dm-side .dms-ins{flex-wrap:wrap}
#dm-side .dms-chip.tool{border-style:solid;color:var(--brand-d)}
#dm-side .dms-chip.tool svg.co-i{width:13px;height:13px;margin-right:4px}
#dm-side .dms-extra{display:flex;flex-wrap:wrap;gap:6px}
#dm-side .dms-extra:not(:empty){margin-top:10px}
#dm-side .dms-att.cva-on{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#dm-side .dms-up{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 10px;border-radius:9999px;background:var(--tint);color:var(--brand-d);font-size:12.5px;font-weight:600}