/* Messaging (js/messaging.js): RecruiterBee's LinkedIn inbox, in the app's tokens so light and dark both follow. The page
   (#sec-messaging) is the list beside the conversation; the cards (#mg-cards: Send × N, Message templates) sit over it.
   At phone width the list comes first and a conversation fills the screen. */
:is(#sec-messaging,#mg-cards){font-family:"Circular Std","Figtree",ui-sans-serif,system-ui,sans-serif,"Noto Sans Thai";color:var(--ink)}
:is(#sec-messaging,#mg-cards) .mg-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(#sec-messaging,#mg-cards) .mg-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}
@media (prefers-reduced-motion:reduce){:is(#sec-messaging,#mg-cards) .mg-spin,#sec-messaging .mg-dot{animation:none}}
:is(#sec-messaging,#mg-cards) .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;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;text-decoration:none}
:is(#sec-messaging,#mg-cards) .mg-btn:hover:not(:disabled){background:var(--hover)}
:is(#sec-messaging,#mg-cards) .mg-btn:disabled{opacity:.45;cursor:not-allowed}
:is(#sec-messaging,#mg-cards) .mg-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
:is(#sec-messaging,#mg-cards) .mg-btn.pri:hover:not(:disabled){background:var(--brand-h)}
:is(#sec-messaging,#mg-cards) .mg-btn.pri .mg-spin{border-color:#fff;border-top-color:transparent;width:12px;height:12px}
:is(#sec-messaging,#mg-cards) .mg-btn.sm{height:32px;padding:0 12px;font-size:12.5px}
:is(#sec-messaging,#mg-cards) .mg-btn.xs{height:28px;padding:0 10px;font-size:12px}
:is(#sec-messaging,#mg-cards) .mg-btn.bad{color:var(--bad)}
:is(#sec-messaging,#mg-cards) .mg-btn .mg-i{width:14px;height:14px}
:is(#sec-messaging,#mg-cards) .mg-btn.tplb{color:var(--brand-d);border-color:color-mix(in oklab,var(--brand) 35%,var(--line2));background:var(--tint)}
:is(#sec-messaging,#mg-cards) .mg-ibtn{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line2);background:var(--surface);color:var(--ink2);cursor:pointer}
:is(#sec-messaging,#mg-cards) .mg-ibtn:hover{background:var(--hover);color:var(--ink)}
:is(#sec-messaging,#mg-cards) :is(button,a,input,textarea):focus-visible{outline:2px solid var(--brand);outline-offset:2px}
:is(#sec-messaging,#mg-cards) .mg-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}
:is(#sec-messaging,#mg-cards) .mg-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(#sec-messaging,#mg-cards) .mg-av.lg{width:48px;height:48px}
:is(#sec-messaging,#mg-cards) .mg-av.xs{width:22px;height:22px;font-size:9px}
:is(#sec-messaging,#mg-cards) .mg-deg{flex:none;font-size:10px;line-height:15px;font-weight:700;color:var(--brand-d);background:var(--tint);border-radius:4px;padding:0 5px}
:is(#sec-messaging,#mg-cards) .mg-chip{flex:none;font-size:10.5px;line-height:16px;font-weight:700;border-radius:6px;padding:1px 7px;white-space:nowrap;background:var(--chip);color:var(--ink2)}
:is(#sec-messaging,#mg-cards) .mg-chip.ok{background:var(--good-s);color:var(--good)}
:is(#sec-messaging,#mg-cards) .mg-chip.warn{background:var(--warn-s);color:var(--warn)}
:is(#sec-messaging,#mg-cards) .mg-chip.brand{background:var(--tint);color:var(--brand-d)}
:is(#sec-messaging,#mg-cards) .mg-chip.info{background:color-mix(in oklab,var(--brand) 18%,var(--surface));color:var(--brand-d)}
:is(#sec-messaging,#mg-cards) .mg-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:24px 16px;text-align:center;color:var(--ink3);font-size:13px;line-height:19px}
:is(#sec-messaging,#mg-cards) .mg-note.bad{color:var(--bad)}
:is(#sec-messaging,#mg-cards) .mg-lk{border:0;background:transparent;padding:0;color:var(--brand-d);font:inherit;font-weight:600;cursor:pointer}
:is(#sec-messaging,#mg-cards) .mg-lk:hover{text-decoration:underline}
:is(#sec-messaging,#mg-cards) .mg-vars{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}
:is(#sec-messaging,#mg-cards) .mg-var{height:26px;padding:0 9px;border-radius:9999px;border:1px dashed var(--line2);background:transparent;color:var(--ink2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
:is(#sec-messaging,#mg-cards) .mg-var:hover{background:var(--hover);border-color:var(--ink3)}

/* the page */
#sec-messaging .mg-hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:16px}
#sec-messaging .mg-hd h1{margin:0}
#sec-messaging .mg-top{flex:1;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 14px;min-height:32px}
#sec-messaging .mg-today{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--good);font-variant-numeric:tabular-nums}
#sec-messaging .mg-dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
#sec-messaging .mg-pane{background:var(--surface);border:1px solid var(--line);border-radius:16px}
#sec-messaging .mg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:320px;padding:32px 16px;text-align:center;color:var(--ink3);font-size:14px}
#sec-messaging .mg-empty b{color:var(--ink);font-size:16px}
#sec-messaging .mg-split{display:grid;grid-template-columns:440px minmax(0,1fr);height:min(900px,calc(100vh - 128px));min-height:540px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
#sec-messaging .mg-list{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line)}
#sec-messaging .mg-lhd{flex:none;padding:12px 14px 0;border-bottom:1px solid var(--line)}
#sec-messaging .mg-srch{display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 12px;border:1px solid var(--line2);border-radius:10px;color:var(--ink3);background:var(--surface)}
#sec-messaging .mg-srch:focus-within{border-color:var(--brand)}
#sec-messaging .mg-srch input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:14px}
#sec-messaging .mg-srch input:focus-visible{outline:0}
#sec-messaging .mg-net{flex:none;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border:0;border-radius:8px;background:var(--brand);color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
#sec-messaging .mg-net:hover{background:var(--brand-h)}
#sec-messaging .mg-net .mg-i{width:13px;height:13px}
#sec-messaging .mg-hint{margin:5px 2px 0;font-size:11.5px;color:var(--ink3)}
#sec-messaging .mg-hint b{color:var(--ink2)}
#sec-messaging .mg-loc{margin-top:10px}
#sec-messaging .mg-loch{display:flex;align-items:center;gap:6px;margin:0 2px 5px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
#sec-messaging .mg-locin{position:relative;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;color:var(--ink3)}
#sec-messaging .mg-locin:focus-within{border-color:var(--brand)}
#sec-messaging .mg-locin input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:13.5px}
#sec-messaging .mg-locin input:focus-visible{outline:0}
#sec-messaging .mg-sug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:280px;overflow-y:auto;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--pop)}
#sec-messaging .mg-sug.hide{display:none}
#sec-messaging .mg-sug button{display:flex;align-items:center;gap:8px;width:100%;min-height:34px;padding:6px 10px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
#sec-messaging .mg-sug button:hover,#sec-messaging .mg-sug button:focus-visible{background:var(--hover)}
#sec-messaging .mg-sugn{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12.5px;color:var(--ink3)}
#sec-messaging .mg-tags{display:flex;flex-wrap:wrap;gap:6px}
#sec-messaging .mg-tags:not(:empty){margin-top:7px}
#sec-messaging .mg-tag{display:inline-flex;align-items:center;gap:5px;max-width:100%;height:26px;padding:0 4px 0 9px;border-radius:9999px;background:var(--tint);color:var(--brand-d);font-size:12px;font-weight:600}
#sec-messaging .mg-tag .mg-i{width:12px;height:12px}
#sec-messaging .mg-tag button{width:20px;height:20px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
#sec-messaging .mg-tag button:hover{background:color-mix(in oklab,var(--brand) 20%,transparent)}
#sec-messaging .mg-fq{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-left:5px;border-radius:50%;border:1px solid currentColor;font-size:9px;font-weight:800;line-height:1;opacity:.5;cursor:help;text-transform:none;letter-spacing:0}
#sec-messaging .mg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#sec-messaging .mg-fchip{display:inline-flex;align-items:center;height:28px;padding:0 11px;border:1px solid var(--line2);border-radius:9999px;background:var(--surface);color:var(--ink2);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
#sec-messaging .mg-fchip b{margin-left:4px;color:var(--ink3);font-weight:700;font-variant-numeric:tabular-nums}
#sec-messaging .mg-fchip:hover{background:var(--hover)}
#sec-messaging .mg-fchip.on{background:var(--brand);border-color:var(--brand);color:#fff}
#sec-messaging .mg-fchip.on b{color:#fff;opacity:.85}
#sec-messaging .mg-fchip.on .mg-fq{opacity:.85}
#sec-messaging .mg-selrow{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:6px}
#sec-messaging .mg-selall{display:inline-flex;align-items:center;gap:10px;height:30px;padding:0 6px 0 0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#sec-messaging .mg-selall:disabled{opacity:.45;cursor:default}
#sec-messaging .mg-selhint{flex:1;min-width:0;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-messaging .mg-sendn{flex:none;min-width:104px}
#sec-messaging .mg-vh{visibility:hidden}
#sec-messaging .mg-box{width:16px;height:16px;flex:none;border-radius:4px;border:1.5px solid var(--ink3);background:var(--surface);display:grid;place-items:center}
#sec-messaging .mg-box .mg-i{display:none;width:12px;height:12px;stroke-width:3;color:var(--surface)}
#sec-messaging [aria-checked="true"] .mg-box,#sec-messaging [aria-checked="mixed"] .mg-box{background:var(--ink);border-color:var(--ink)}
#sec-messaging [aria-checked="true"] .mg-box .mg-i:first-child{display:block}
#sec-messaging [aria-checked="mixed"] .mg-box .mg-i:last-child{display:block}
#sec-messaging .mg-rows{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#sec-messaging .mg-gl{display:flex;align-items:baseline;gap:6px;padding:12px 16px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line)}
#sec-messaging .mg-gl span{font-weight:600}
/* one person: tick, then the row button */
#sec-messaging .mg-row{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--line)}
#sec-messaging .mg-row:hover{background:var(--hover)}
#sec-messaging .mg-row.sel{background:var(--tint);box-shadow:inset 3px 0 0 var(--brand)}
#sec-messaging .mg-pick{flex:none;align-self:stretch;display:grid;place-items:center;width:40px;padding-left:6px;border:0;background:transparent;cursor:pointer}
#sec-messaging .mg-rb{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;padding:12px 14px 12px 4px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
#sec-messaging .mg-rm{flex:1;min-width:0;display:flex;flex-direction:column}
#sec-messaging .mg-rt{display:flex;align-items:center;gap:6px;min-width:0}
#sec-messaging .mg-nm{min-width:0;font-size:14px;line-height:19px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-messaging .mg-tm{flex:none;margin-left:auto;padding-left:6px;font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
#sec-messaging .mg-sub{font-size:12.5px;line-height:17px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-messaging .mg-pv{margin-top:2px;font-size:12.5px;line-height:17px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-messaging .mg-pv .me{color:var(--ink3)}
#sec-messaging .mg-row.unread .mg-nm{font-weight:800}
#sec-messaging .mg-row.unread .mg-pv{color:var(--ink);font-weight:600}
#sec-messaging .mg-rs{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;align-self:center}
#sec-messaging .mg-udot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
#sec-messaging .mg-row > .mg-btn{flex:none;margin-right:12px}
#sec-messaging .mg-more{display:block;width:calc(100% - 28px);margin:12px 14px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--brand-d);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#sec-messaging .mg-more:hover{background:var(--hover)}
#sec-messaging .mg-more span{color:var(--ink3);font-weight:500}
/* the conversation */
#sec-messaging .mg-conv{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--page)}
#sec-messaging .mg-blank{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;color:var(--ink3);font-size:13.5px;text-align:center}
#sec-messaging .mg-blank b{color:var(--ink2);font-size:15px}
#sec-messaging .mg-blank > .mg-i{width:34px;height:34px;stroke-width:1.4}
#sec-messaging .mg-blank.sm{flex:none;padding:40px 16px}
#sec-messaging .mg-ch{flex:none;display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--line);min-height:73px}
#sec-messaging .mg-back{display:none;align-items:center;gap:2px;height:34px;padding:0 8px 0 2px;border:0;border-radius:8px;background:transparent;color:var(--ink2);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
#sec-messaging .mg-back:hover{background:var(--hover)}
#sec-messaging .mg-chm{flex:1;min-width:0}
#sec-messaging .mg-chn{display:flex;align-items:center;gap:7px;min-width:0}
#sec-messaging .mg-chn .mg-nm{font-size:15px;font-weight:700}
#sec-messaging .mg-chl{margin-top:1px;font-size:12.5px;line-height:17px;color:var(--ink2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
#sec-messaging .mg-chh{margin-top:1px;font-size:11.5px;color:var(--ink3)}
#sec-messaging .mg-chs{flex:none;display:flex;align-items:center;gap:8px}
#sec-messaging .mg-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px;display:flex;flex-direction:column;gap:4px}
#sec-messaging .mg-day{display:flex;justify-content:center;margin:12px 0 6px}
#sec-messaging .mg-day span{font-size:11px;font-weight:600;color:var(--ink3);background:var(--chip);border-radius:9999px;padding:2px 10px}
#sec-messaging .mg-m{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:78%}
#sec-messaging .mg-m.me{align-self:flex-end;align-items:flex-end}
#sec-messaging .mg-kl{margin:6px 2px 0;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
#sec-messaging .mg-bub{padding:9px 13px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:13.5px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
#sec-messaging .mg-m.me .mg-bub{background:var(--brand);border-color:var(--brand);color:#fff}
#sec-messaging .mg-bub.file{display:inline-flex;align-items:center;gap:7px;font-weight:600}
#sec-messaging .mg-bub.file .mg-i{width:14px;height:14px}
#sec-messaging .mg-m small{margin:0 4px 6px;font-size:11px;color:var(--ink3)}
/* the reply box */
#sec-messaging .mg-comp{flex:none;padding:10px 18px 12px;background:var(--surface);border-top:1px solid var(--line)}
#sec-messaging .mg-lock{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;min-height:40px;font-size:13.5px;color:var(--ink2)}
:is(#sec-messaging,#mg-cards) .mg-ups{display:flex;flex-wrap:wrap;gap:6px}
:is(#sec-messaging,#mg-cards) .mg-ups:not(:empty){margin-bottom:8px}
:is(#sec-messaging,#mg-cards) .mg-up{display:inline-flex;align-items:center;gap:6px;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}
:is(#sec-messaging,#mg-cards) .mg-up span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
:is(#sec-messaging,#mg-cards) .mg-up small{color:var(--ink3);font-weight:500}
:is(#sec-messaging,#mg-cards) .mg-up .mg-i{width:13px;height:13px}
:is(#sec-messaging,#mg-cards) .mg-up button{width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
:is(#sec-messaging,#mg-cards) .mg-up button:hover{background:color-mix(in oklab,var(--brand) 20%,transparent)}
#sec-messaging .mg-cva{display:contents}
#sec-messaging .mg-dup{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--warn)}
#sec-messaging .mg-dup:not(:empty){margin-bottom:8px}
#sec-messaging .mg-crow{display:flex;align-items:flex-end;gap:10px}
#sec-messaging .mg-tawrap{position:relative;flex:1;min-width:0}
#sec-messaging .mg-tawrap textarea{display:block;width:100%;height:84px;padding:10px 44px 10px 13px;border:1px solid var(--line2);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:20px;resize:none;outline:0}
#sec-messaging .mg-tawrap textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px oklch(.656 .115 218.497 / .15)}
#sec-messaging .mg-tawrap.tall textarea{height:min(360px,46vh)}
#sec-messaging .mg-tall{position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--brand-d);cursor:pointer}
#sec-messaging .mg-tall:hover{background:var(--hover)}
#sec-messaging .mg-tall .mg-i{width:14px;height:14px}
#sec-messaging .mg-cbtns{flex:none;display:flex;align-items:center;gap:8px}
#sec-messaging .mg-cbtns .mg-btn.pri{min-width:92px}
#sec-messaging .mg-lim{margin-left:auto;font-size:12px;color:var(--ink3);font-variant-numeric:tabular-nums}

/* the cards */
html.mg-carded{overflow:hidden}
#mg-cards .mg-cw{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
#mg-cards .mg-cbg{position:absolute;inset:0;background:rgb(0 0 0 / .45)}
#mg-cards .mg-card{position:relative;width:min(620px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--pop);overflow:hidden;animation:mg-in .16s ease-out}
@keyframes mg-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#mg-cards .mg-card{animation:none}}
#mg-cards .mg-cardh{flex:none;display:flex;align-items:center;gap:10px;padding:16px 16px 12px 22px;border-bottom:1px solid var(--line)}
#mg-cards .mg-cardh h2{flex:1;margin:0;font-size:17px;line-height:24px;font-weight:700}
#mg-cards .mg-x{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}
#mg-cards .mg-x:hover{background:var(--hover);color:var(--ink)}
#mg-cards .mg-cardb{flex:1;min-height:0;overflow-y:auto;padding:16px 22px 18px}
#mg-cards .mg-cardf{flex:none;display:flex;justify-content:flex-end;gap:8px;padding:12px 22px;border-top:1px solid var(--line)}
#mg-cards .mg-to{display:flex;flex-wrap:wrap;gap:6px}
#mg-cards .mg-who{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:28px;padding:0 10px 0 3px;border-radius:9999px;background:var(--chip);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mg-cards .mg-who.off{background:transparent;border:1px dashed var(--line2);color:var(--ink3)}
#mg-cards .mg-who.more{padding:0 10px;color:var(--ink3)}
#mg-cards .mg-cnote{margin-top:8px;font-size:12.5px;line-height:18px;color:var(--ink3)}
#mg-cards .mg-lbl{display:block;margin:14px 0 6px;font-size:13px;font-weight:600;color:var(--ink2)}
#mg-cards textarea,#mg-cards .mg-in{display:block;width:100%;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:20px;outline:0}
#mg-cards textarea{min-height:140px;resize:vertical}
#mg-cards .mg-in{height:40px}
#mg-cards :is(textarea,.mg-in):focus{border-color:var(--brand);box-shadow:0 0 0 3px oklch(.656 .115 218.497 / .15)}
#mg-cards .mg-ups{margin-top:10px}
#mg-cards .mg-batt.cva-on{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#mg-cards .mg-vars{margin-top:10px}
#mg-cards .mg-pv{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--page)}
#mg-cards .mg-pv small{display:block;font-size:12px;color:var(--ink3)}
#mg-cards .mg-pvt{margin-top:4px;min-height:20px;font-size:14px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
#mg-cards .mg-tp{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
#mg-cards .mg-tpm{flex:1;min-width:0}
#mg-cards .mg-tpm b{display:block;font-size:14px;font-weight:600}
#mg-cards .mg-tpm p{margin:3px 0 0;font-size:12.5px;line-height:18px;color:var(--ink2);white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
#mg-cards .mg-tpa{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#mg-cards .mg-tpa.end{justify-content:flex-end;margin-top:12px}
#mg-cards .mg-tpa .mg-ibtn{width:30px;height:30px;border-radius:8px}
#mg-cards .mg-tpa .mg-ibtn .mg-i{width:14px;height:14px}
#mg-cards .mg-ask{font-size:12.5px;color:var(--ink2)}
#mg-cards .mg-tpnew{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
#mg-cards .mg-tpe{padding:4px 0 14px;border-bottom:1px solid var(--line)}
#mg-cards .mg-tpe .mg-lbl:first-child{margin-top:8px}

@media (max-width:800px){
  #sec-messaging .mg-hd{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:12px}
  #sec-messaging .mg-top{justify-content:space-between;flex-wrap:nowrap}
  #sec-messaging .mg-today{min-width:0;font-size:12px}
  #sec-messaging .mg-comp .mg-vars{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  #sec-messaging .mg-comp .mg-vars::-webkit-scrollbar{display:none}
  #sec-messaging .mg-comp .mg-var{flex:none}
  #sec-messaging .mg-lim{flex:none;padding-left:6px}
  #sec-messaging .mg-split{display:block;height:auto;min-height:0;border-radius:14px}
  #sec-messaging .mg-list{border-right:0;height:calc(100dvh - 210px);min-height:480px}
  #sec-messaging .mg-conv{display:none}
  #sec-messaging .mg-split.conv-open .mg-conv{display:flex;position:fixed;inset:0;z-index:35}
  #sec-messaging .mg-back{display:inline-flex}
  #sec-messaging .mg-ch{padding:10px 12px;gap:10px}
  #sec-messaging .mg-chs .mg-btn{padding:0 10px}
  #sec-messaging .mg-chs .mg-chip{display:none}
  #sec-messaging .mg-msgs{padding:12px}
  #sec-messaging .mg-m{max-width:88%}
  #sec-messaging .mg-comp{padding:10px 12px 12px}
  #sec-messaging .mg-crow{flex-wrap:wrap}
  #sec-messaging .mg-tawrap{flex-basis:100%}
  #sec-messaging .mg-cbtns{flex:1;justify-content:flex-end}
  #sec-messaging .mg-cbtns .tplb{margin-right:auto}
  #sec-messaging .mg-lhd{padding:10px 12px 0}
  #sec-messaging .mg-rb{padding-right:10px}
  #mg-cards .mg-cw{padding:0}
  #mg-cards .mg-card{width:100%;height:100%;max-height:none;border:0;border-radius:0}
  #mg-cards .mg-cardh{padding-left:16px}
  #mg-cards .mg-cardb{padding:14px 16px}
  #mg-cards .mg-cardf{padding:12px 16px}
}
/* the photo and the name that open the full candidate card */
#sec-messaging .mg-avb{display:contents}
#sec-messaging .mg-avbtn{flex:none;border:0;background:transparent;padding:0;border-radius:50%;cursor:pointer;transition:box-shadow .15s}
#sec-messaging .mg-avbtn:hover{box-shadow:0 0 0 3px var(--line2)}
#sec-messaging .mg-avbtn:focus-visible,#sec-messaging .mg-nmbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#sec-messaging .mg-nmbtn{min-width:0;border:0;background:transparent;padding:0;font:inherit;font-weight:700;color:inherit;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sec-messaging .mg-nmbtn:hover{text-decoration:underline}
#sec-messaging .mg-rb .mg-av{cursor:pointer}
#sec-messaging .mg-chn .mg-nmbtn{font-size:15px}
/* InMail for someone not connected (RecruiterBee's): the credits line, a subject, the text */
#sec-messaging .mg-inm{display:grid;gap:8px}
#sec-messaging .mg-inmn{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;line-height:18px;color:var(--ink2);background:var(--tint);border-radius:10px;padding:8px 12px}
#sec-messaging .mg-inmn > span{flex:1 1 220px;min-width:0}
#sec-messaging .mg-inmn b{color:var(--ink)}
#sec-messaging .mg-inmn .mg-i{color:var(--brand-d)}
#sec-messaging .mg-isub{display:block;width:100%;height:38px;border:1px solid var(--line2);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;outline:0}
#sec-messaging .mg-isub: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 */
#sec-messaging .mg-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}
#sec-messaging .mg-nocon > .mg-i{width:16px;height:16px;flex:none;margin-top:1px}
#sec-messaging .mg-ncx{flex:1 1 240px;min-width:0}
#sec-messaging .mg-nocon .mg-btn{flex:none}
#sec-messaging .mg-off{opacity:.55;pointer-events:none}
#sec-messaging .mg-off textarea{background:var(--page)}
/* the tag box (js/msg-editor.js) in the reply box and the Send x N card; the video chip */
#sec-messaging .mg-tawrap .mte{padding-right:44px}
#mg-cards .mg-edh .mte{min-height:162px}
#sec-messaging .mg-vidslot:empty,#mg-cards .mg-bvid:empty{display:none}
#mg-cards .mg-bvid{margin-top:8px}