/* Match Assistant - the skip-reason chat (application/views/developer/match-assistant/modal.php).
   Everything is scoped under #ma-root and prefixed ma- so it never touches the site's own classes. */
#ma-root{--ma-red:#F04438;--ma-card:#fff;--ma-ink:#14213D;--ma-mute:#667085;--ma-line:#E4E7EC;--ma-blue:#1664E8;--ma-blue-soft:#EAF1FE;--ma-purple:#6D3AF0;--ma-purple-soft:#F1ECFF;--ma-bubble:#F2F4F7;--ma-scrim:rgba(16,24,40,.55);--ma-green:#12B76A;
  font-family:'Lexend',system-ui,sans-serif;font-size:14px;color:var(--ma-ink)}
#ma-root *,#ma-root *:before,#ma-root *:after{box-sizing:border-box}
#ma-root[hidden]{display:none}
/* the one rule outside #ma-root : match-assistant.js puts ma-open on <html> while the modal is up, so the page behind does not scroll */
html.ma-open,html.ma-open body{overflow:hidden}
#ma-root button{font-family:inherit}
.ma-scrim{position:fixed;inset:0;z-index:1060;background:var(--ma-scrim);display:flex;align-items:center;justify-content:center;padding:16px}
.ma-modal{width:100%;max-width:440px;height:min(680px,100%);background:var(--ma-card);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(16,24,40,.35)}
.ma-hd{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--ma-line)}
.ma-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--ma-blue),var(--ma-purple));display:grid;place-items:center;color:#fff;flex:none;position:relative}
.ma-av i{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--ma-green);border:2px solid var(--ma-card)}
.ma-hd b{display:block;font-weight:600;font-size:15px}.ma-hd small{color:var(--ma-mute);font-size:12px}
.ma-x{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--ma-line);background:none;color:var(--ma-mute);cursor:pointer;font-size:18px;line-height:1;padding:0}
.ma-ctx{margin:14px 18px 0;padding:10px 12px;border-radius:12px;background:var(--ma-purple-soft);display:flex;gap:10px;align-items:center;font-size:12px}
.ma-ctx b{font-weight:500}.ma-ctx span{color:var(--ma-mute)}
.ma-lg{width:30px;height:30px;border-radius:8px;background:var(--ma-card);border:1px solid var(--ma-line);display:grid;place-items:center;font-size:9px;font-weight:600;flex:none;overflow:hidden}
.ma-lg img{width:100%;height:100%;object-fit:contain}
.ma-chat{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.ma-m{max-width:84%;padding:11px 14px;border-radius:18px;line-height:1.5;animation:ma-in .25s ease;word-wrap:break-word}
.ma-m.ma-b{background:var(--ma-bubble);border-bottom-left-radius:6px;align-self:flex-start}
.ma-m.ma-u{background:var(--ma-blue);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.ma-m.ma-soft{background:var(--ma-blue-soft)}
.ma-step{align-self:flex-start;font-size:11px;font-weight:500;color:var(--ma-purple);margin-bottom:-6px}
@keyframes ma-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ma-chips{display:flex;flex-wrap:wrap;gap:8px;animation:ma-in .3s ease}
.ma-chip{font-size:13px;padding:8px 14px;border-radius:99px;border:1.5px solid var(--ma-blue);background:var(--ma-card);color:var(--ma-blue);cursor:pointer;font-weight:500;text-align:left}
.ma-chip:hover{background:var(--ma-blue-soft)}
.ma-chip-ic{margin-right:6px;font-size:14px;line-height:1}
.ma-chips.ma-wait,.ma-multi.ma-wait{opacity:.5;pointer-events:none}
/* multi select : a card of check-box chips and a full-width Continue */
.ma-multi{background:var(--ma-card);border:1px solid var(--ma-line);border-radius:18px;padding:14px;box-shadow:0 4px 14px rgba(16,24,40,.06);animation:ma-in .3s ease}
.ma-multi-hd{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ma-mute);margin-bottom:10px}
.ma-multi .ma-chips{animation:none}
.ma-multi .ma-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px}
.ma-multi .ma-chip .ma-chip-ic{margin-right:0}
.ma-box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ma-blue);background:var(--ma-card);flex:none;position:relative}
.ma-chip.ma-on .ma-box{border-color:#fff}
.ma-chip.ma-on .ma-box:after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--ma-blue);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ma-continue{display:block;width:100%;margin-top:14px;padding:12px;border:0;border-radius:99px;background:var(--ma-blue);color:#fff;font-size:14px;font-weight:500;cursor:pointer}
.ma-continue:disabled{opacity:.45;cursor:default}
/* the talent's voice bubble : a round play / pause button, then the label */
.ma-m.ma-voice{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px}
.ma-play{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.22);cursor:pointer;flex:none;position:relative;padding:0}
.ma-play:hover{background:rgba(255,255,255,.32)}
.ma-play:before{content:'';position:absolute;left:11px;top:9px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.ma-play.ma-on:before{left:10px;top:10px;width:3px;height:10px;border:0;background:#fff;box-shadow:6px 0 0 #fff}
.ma-chip.ma-on,.ma-chip.ma-primary{background:var(--ma-blue);color:#fff}
.ma-chip:disabled{opacity:.4;cursor:default}
.ma-typing{display:flex;gap:4px;padding:14px}.ma-typing i{width:7px;height:7px;border-radius:50%;background:var(--ma-mute);animation:ma-bl 1s infinite}.ma-typing i:nth-child(2){animation-delay:.15s}.ma-typing i:nth-child(3){animation-delay:.3s}
@keyframes ma-bl{50%{opacity:.25}}
.ma-ft{padding:12px 18px 14px;border-top:1px solid var(--ma-line)}
.ma-bar{display:flex;align-items:center;gap:8px;background:var(--ma-bubble);border-radius:99px;padding:6px 6px 6px 16px}
.ma-bar input{flex:1;border:0;background:none;font:inherit;color:var(--ma-ink);outline:none;min-width:0;box-shadow:none;height:auto;padding:0}
.ma-bar.ma-lock{opacity:.5;pointer-events:none}
.ma-bar.ma-off{display:none}
.ma-bar.ma-err{box-shadow:inset 0 0 0 1.5px var(--ma-red)}
.ma-err-msg{margin:6px 16px 0;color:var(--ma-red);font-size:12px}
.ma-ic{width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;flex:none;background:var(--ma-card);color:var(--ma-blue);padding:0}
.ma-ic.ma-s{background:var(--ma-blue);color:#fff}
.ma-ic[hidden]{display:none}
.ma-rec{display:none;align-items:center;gap:10px}.ma-rec.ma-on{display:flex}
.ma-wave{flex:1;display:flex;align-items:center;gap:3px;height:38px;background:var(--ma-purple-soft);border-radius:99px;padding:0 14px}
.ma-wave .ma-t{font-size:13px;font-weight:500;margin:0 8px}
.ma-bars{display:flex;gap:3px;align-items:center;flex:1;justify-content:flex-end}
.ma-bars i{width:3px;border-radius:2px;background:var(--ma-purple);animation:ma-w .9s ease-in-out infinite}
@keyframes ma-w{50%{height:4px}}
.ma-dot{width:8px;height:8px;border-radius:50%;background:var(--ma-red);animation:ma-bl 1s infinite}
.ma-links{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.ma-skip,.ma-human{padding:0;background:none;border:0;color:var(--ma-mute);font-size:12px;cursor:pointer;text-decoration:underline}
.ma-human{color:var(--ma-blue)}
.ma-done{align-self:center;color:var(--ma-green);font-weight:500;font-size:13px}
.ma-saved{align-self:flex-end;font-size:12px;font-weight:500;color:var(--ma-green);margin-top:-6px}
/* job count card */
.ma-count{align-self:flex-start;width:90%;background:var(--ma-card);border:1.5px solid var(--ma-blue);border-radius:18px;padding:16px;box-shadow:0 6px 18px rgba(22,100,232,.14);animation:ma-in .25s ease}
.ma-count ul{margin:0 0 12px;padding-left:18px;font-size:13px;line-height:1.5}
.ma-count small{display:block;font-size:12px;color:var(--ma-mute);font-weight:500}
.ma-count .ma-num{display:flex;align-items:baseline;gap:8px;margin:6px 0 4px}
.ma-count .ma-num b{font-size:48px;line-height:1;font-weight:600;color:var(--ma-blue);font-variant-numeric:tabular-nums}
.ma-count .ma-num span{font-size:16px;font-weight:500;color:var(--ma-mute)}
.ma-count .ma-hint{margin:0 0 14px;font-size:12px;color:var(--ma-mute);line-height:1.5}
/* while the count is on its way : three bouncing dots in place of the number */
.ma-count .ma-num b.ma-counting{display:inline-flex;align-items:center;gap:6px;height:48px}
.ma-count .ma-num b.ma-counting i{width:10px;height:10px;border-radius:50%;background:var(--ma-blue);animation:ma-dot 1.2s ease-in-out infinite}
.ma-count .ma-num b.ma-counting i:nth-child(2){animation-delay:.15s}
.ma-count .ma-num b.ma-counting i:nth-child(3){animation-delay:.3s}
@keyframes ma-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.ma-count .ma-num b.ma-counting i{animation:ma-bl 1.2s infinite}}
.ma-count.ma-low{border-color:var(--ma-red);box-shadow:0 6px 18px rgba(240,68,56,.14)}
.ma-count.ma-low .ma-num b,.ma-count.ma-low .ma-hint{color:var(--ma-red)}
.ma-ca{display:flex;gap:8px}
.ma-ca button{flex:1;font-size:13px;font-weight:500;padding:10px;border-radius:99px;cursor:pointer}
.ma-ca .ma-undo{background:var(--ma-card);border:1.5px solid var(--ma-line);color:var(--ma-ink)}
.ma-ca .ma-save{background:var(--ma-blue);border:1.5px solid var(--ma-blue);color:#fff}
.ma-ca button:disabled{opacity:.5;cursor:default}
@media(max-width:520px){.ma-scrim{padding:0;align-items:flex-end}.ma-modal{max-width:none;height:88%;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}}