/* Kandidaten matchen — the Ranger intake and the searching state. Everything is scoped under .rm-matching,
   .ranger or .rm-match so nothing here can leak into the rest of the app. Measurements follow the
   "Matching - input" and "Matching - anwsers" frames in Figma; Ranger's own motion comes from
   assets/js/ranger-matching.js (GSAP), this file only handles his flights: to the middle while he
   searches, and on to the top of the candidate list where he stays while the results are shown. */

.rm-matching {
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    background: #f0f2f5;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    color: #212529;
}

/* ---- Close button, the only chrome on the page ---------------------------------------------------- */

.rm-close {
    position: fixed;
    top: 26px;
    right: 26px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: #000;
    font: inherit;
    font-size: 14px;
    letter-spacing: -0.02em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.rm-close:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.rm-close:active {
    transform: translateY(1px);
}

.rm-close .material-symbols-outlined {
    font-size: 17px;
}

/* ---- The conversation column ---------------------------------------------------------------------- */

.rm-chat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    width: 100%;
    max-width: 838px;
    margin: 0 auto;
    padding: 57px 0 140px;
}

/* The transcript proper: bubbles, answers and controls. Ranger's slot is deliberately not inside it, because
   the dimmed state below uses opacity and a transform, and either one on an ancestor would hide the pinned
   Ranger and make his fixed position relative to the column instead of the viewport. */
.rm-chat__thread {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    align-self: stretch;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* While Ranger flies to the middle of the screen the transcript sinks away underneath. */
.rm-chat__thread--dimmed {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
}

/* The slot Ranger sits in. It keeps its size when Ranger is pinned to the viewport for the flight, so the
   column underneath does not jump. */
.rm-chat__ranger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 159px;
    height: 76px;
}

/* ---- Ranger's bubbles ----------------------------------------------------------------------------- */

.rm-bubble {
    box-sizing: border-box;
    max-width: 100%;
    padding: 22px 24px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
    line-height: 20px;
    animation: rm-rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rm-bubble__author {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    line-height: 15px;
    color: #f49900;
}

.rm-bubble p {
    margin: 0;
}

.rm-bubble p + p {
    margin-top: 20px;
}

.rm-bubble strong {
    font-weight: 700;
}

/* The three dots before a line starts, and the caret at the end of a line still being typed. */
.rm-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
}

.rm-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    animation: rm-bounce 1.2s infinite ease-in-out;
}

.rm-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.rm-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

.rm-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--ant-primary-color, #ffba00);
    animation: rm-blink 1s step-end infinite;
}

/* ---- The recruiter's side: answers and the controls to give them ---------------------------------- */

.rm-answer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    align-self: stretch;
    animation: rm-rise 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rm-answer--stack {
    flex-direction: column;
    align-items: flex-end;
}

.rm-answer--center {
    justify-content: center;
}

.rm-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px 24px;
    border: 0;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.04);
    color: #4e4e4e;
    font: inherit;
    font-weight: 500;
    line-height: 12px;
    white-space: nowrap;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.rm-chip:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
    color: #212529;
}

.rm-chip:active:not(:disabled) {
    transform: scale(0.98);
}

.rm-chip:disabled {
    cursor: default;
}

.rm-chip--chosen,
.rm-chip--chosen:hover:not(:disabled) {
    background: #ffefc6;
    color: #212529;
}

/* An answer that has been given: the same tinted pill, sized for running text. */
.rm-chip--answer {
    padding: 10px 24px;
    line-height: 20px;
    white-space: pre-line;
    cursor: default;
}

/* The focus question offers a title and an explanation per option, stacked at a fixed width. */
.rm-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 345px;
    max-width: 100%;
}

.rm-option {
    gap: 4px;
    width: 100%;
    padding: 10px 24px;
    line-height: normal;
    text-align: left;
    color: rgba(0, 0, 0, 0.8);
}

.rm-option__title {
    font-size: 12px;
    font-weight: 700;
}

.rm-option__desc {
    font-size: 10px;
    font-weight: 500;
}

/* "Anders" for the number of candidates: a pill that holds a number field and a go button. */
.rm-chip--field {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 24px;
    cursor: default;
}

.rm-chip--field .ant-input-number {
    width: 84px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
}

.rm-chip--field .ant-input-number-focused {
    box-shadow: 0 0 0 2px var(--ant-primary-color-outline, rgba(255, 186, 0, 0.2));
}

.rm-chip__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--ant-primary-color, #ffba00);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rm-chip__go:hover:not(:disabled) {
    background: var(--ant-primary-color-hover, #f49900);
}

.rm-chip__go .material-symbols-outlined {
    font-size: 18px;
}

.rm-chip__go:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Picking licenses or languages: the vacancy question's grey pill, with the round go button beside it. */
.rm-pick {
    flex-wrap: nowrap;
}

.rm-pick .rm-select {
    flex: 0 1 345px;
}

.rm-pick .rm-chip__go {
    flex: none;
    width: 36px;
    height: 36px;
}

.rm-select .ant-select-multiple .ant-select-selector {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* The last question unfolds two text fields in a grey panel that matches the option pills. */
.rm-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    width: 467px;
    max-width: 100%;
    padding: 18px 24px;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
    animation: rm-rise 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rm-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rm-form__label {
    font-size: 12px;
    font-weight: 700;
    color: #212529;
}

.rm-form .ant-input {
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    line-height: 20px;
    color: #212529;
    resize: vertical;
}

.rm-form .ant-input:focus,
.rm-form .ant-input-focused {
    box-shadow: 0 0 0 2px var(--ant-primary-color-outline, rgba(255, 186, 0, 0.2));
}

.rm-form__actions {
    display: flex;
    justify-content: flex-end;
}

.rm-chip--primary,
.rm-chip--primary:hover:not(:disabled) {
    background: var(--ant-primary-color, #ffba00);
    color: #212529;
}

.rm-chip--primary:hover:not(:disabled) {
    background: var(--ant-primary-color-hover, #f49900);
}

/* The theme's select components, re-dressed as the same grey pill. */
.rm-select {
    /* The dropdown is rendered in here (PopupContainerSelector), so it is positioned against the pill and
       scrolls along with the chat instead of floating in <body>. */
    position: relative;
    box-sizing: border-box;
    min-width: 190px;
    max-width: 100%;
}

.rm-select--wide {
    min-width: 300px;
}

.rm-select .ant-select {
    width: 100%;
    font-family: inherit;
    font-size: 12px;
}

.rm-select .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    min-height: 36px;
    padding: 2px 44px 2px 20px;
    border: 0;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.05);
    color: #212529;
    font-weight: 500;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.rm-select .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
    background: rgba(0, 0, 0, 0.07);
}

.rm-select .ant-select-focused:not(.ant-select-disabled) .ant-select-selector {
    box-shadow: 0 0 0 2px var(--ant-primary-color-outline, rgba(255, 186, 0, 0.2)) !important;
}

.rm-select .ant-select-single .ant-select-selector .ant-select-selection-item,
.rm-select .ant-select-single .ant-select-selector .ant-select-selection-placeholder,
.rm-select .ant-select-single .ant-select-selector .ant-select-selection-search-input {
    height: 32px;
    line-height: 32px;
}

.rm-select .ant-select-single .ant-select-selector .ant-select-selection-search {
    left: 20px;
    right: 44px;
}

.rm-select .ant-select-selection-placeholder {
    color: #4e4e4e;
}

.rm-select .ant-select-multiple .ant-select-selection-item {
    border: 0;
    border-radius: 10px;
    background: #fff;
}

.rm-select .ant-select-arrow {
    right: 18px;
    color: #212529;
}

.rm-select .ant-select-arrow .anticon {
    display: none;
}

.rm-select .ant-select-arrow::after {
    content: "arrow_drop_down";
    font-family: MaterialSymbols, sans-serif;
    font-size: 20px;
    line-height: 1;
}

.rm-select .ant-select-clear {
    right: 40px;
    background: transparent;
}

/* The dropdown: a white card with the same radius and shadow as Ranger's bubbles. */
.rm-select .ant-select-dropdown {
    padding: 6px;
    border-radius: 15px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
    font-family: inherit;
    text-align: left;
}

.rm-select .ant-select-item {
    padding: 8px 14px;
    border-radius: 10px;
}

.rm-select .ant-select-item + .ant-select-item {
    margin-top: 2px;
}

.rm-select .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
    background: rgba(0, 0, 0, 0.04);
}

.rm-select .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background: #ffefc6;
    font-weight: inherit;
}

/* ---- The searching state: Ranger in the middle, his thoughts underneath --------------------------- */

.rm-status {
    position: fixed;
    top: calc(45% + 96px);
    left: 50%;
    z-index: 21;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(560px, 90vw);
    transform: translateX(-50%);
    /* Its own keyframes: rm-rise ends on `transform: none`, which would undo the centring translate. */
    animation: rm-rise-centered 0.5s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.rm-status .rm-bubble {
    animation: none;
}

/* One of Ranger's passing thoughts while he reads; swapped every few seconds with a small fade. */
.rm-thought {
    min-height: 22px;
    max-width: 360px;
    font-size: 13.5px;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: #9aa4ae;
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.rm-thought--hidden {
    opacity: 0;
    transform: translateY(4px);
}

/* What Ranger is doing and for how long, the way a terminal shows a running task. */
.rm-status__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #a3acb6;
    font-variant-numeric: tabular-nums;
}

.rm-status__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ant-primary-color, #ffba00);
    animation: rm-pulse 1.4s ease-in-out infinite;
}

.rm-status__time {
    color: #828c98;
}

/* ---- Ranger ---------------------------------------------------------------------------------------- */

.ranger {
    position: relative;
    box-sizing: border-box;
    width: 153px;
    transform: translate(0, 0) scale(1) rotate(-6.83deg);
    transition:
        left 0.95s cubic-bezier(0.65, 0, 0.35, 1),
        top 0.95s cubic-bezier(0.65, 0, 0.35, 1),
        transform 0.95s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.5s ease;
    will-change: transform;
}

.ranger__svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 6px 12px rgba(26, 31, 37, 0.1));
}

/* The ground under Ranger. The script breathes it in step with the bob; the flight makes it heavier. */
.ranger__shadow {
    position: absolute;
    right: 18%;
    bottom: -12px;
    left: 18%;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(26, 31, 37, 0.26), rgba(26, 31, 37, 0) 72%);
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.ranger--flying .ranger__shadow {
    opacity: 0.85;
}

.ranger--gone .ranger__shadow {
    opacity: 0;
}

/* The dossiers Ranger reads while searching. */
.ranger-doc {
    filter: drop-shadow(0 4px 6px rgba(26, 31, 37, 0.16));
}

/* Pinned to the viewport at its current spot — the first half of the flight. */
.ranger--pinned {
    position: fixed;
    z-index: 20;
    margin: 0;
}

/* The destination: middle of the screen, twice the size, upright. */
.ranger--flying {
    transform: translate(-50%, -50%) scale(2.1) rotate(0deg);
}

/* The second flight: to the top of the candidate list, at the size of the workspace avatar. Same transition as
   the first one; the scale comes from the script, which knows the pinned width. */
.ranger--landed {
    transform: translate(-50%, -50%) scale(var(--ranger-landed-scale, 0.6)) rotate(0deg);
}

/* Search finished and shown: Ranger leaves through the front. */
.ranger--gone {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.5) rotate(0deg);
    transition: transform 0.45s ease-in, opacity 0.45s ease-in;
}

/* Instant snap back to the top of the column when the intake restarts. */
.ranger--snap {
    transition: none !important;
}

/* ---- Keyframes ------------------------------------------------------------------------------------ */

@keyframes rm-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes rm-rise-centered {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes rm-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rm-bounce {
    0%,
    60%,
    100% {
        opacity: 0.25;
        transform: translateY(0);
    }

    30% {
        opacity: 0.9;
        transform: translateY(-3px);
    }
}

@keyframes rm-blink {
    50% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rm-bubble,
    .rm-answer,
    .rm-status,
    .rm-typing span {
        animation: none !important;
    }

    .ranger,
    .rm-chat__thread,
    .rm-thought {
        transition: none !important;
    }
}



/* ======================================================================================================
   The results workspace. The screen itself is built from Ant components (Layout/Sider/Content, Card,
   Descriptions, Tabs, Table, Tag, Flex); everything below only adjusts those components where the
   matching screen needs something the defaults do not give. Nothing here replaces a component.
   ====================================================================================================== */

/* ---- Left column: Ranger and the candidates he found --------------------------------------------- */

.rm-ws__ranger {
    flex: none;
    padding-bottom: 12px;
}

.rm-ws__ranger .ranger {
    flex: none;
    width: 87px;
    transform: none;
    transition: none;
}

/* The list starts right under him, so there is no ground for a shadow. */
.rm-ws__ranger .ranger__shadow {
    display: none;
}

.ant-typography.rm-ws__ranger-name {
    color: #f49900;
}

.ant-typography.rm-ws__ranger-quote {
    font-style: italic;
    line-height: 1.45 !important;
}

/* A scroll viewport; the negative margin lets a hovered row's tint reach into the sider's padding. */
.rm-ws__candidates {
    flex: 1 1 auto;
    min-height: 0;
    margin: 20px -12px;
    padding: 4px 12px;
    overflow-y: auto;
}

/* Thin scrollbars without the stepper buttons Windows draws by default. */
.rm-ws__candidates,
.ant-layout-sider .rm-ws__candidates {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.rm-ws__candidates::-webkit-scrollbar {
    width: 8px;
}

.rm-ws__candidates::-webkit-scrollbar-button {
    display: none;
}

.rm-ws__candidates::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
}

/* One candidate: a click target, which Ant has no component for. */
.rm-ws__candidate {
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.rm-ws__candidate:hover {
    background: rgba(0, 0, 0, 0.035);
}

.rm-ws__candidate--selected,
.rm-ws__candidate--selected:hover {
    background: var(--ant-primary-1);
}

/* Ant renders Text as an inline span, so it has to become a block that may shrink before it can clip. */
.ant-typography.rm-ws__ellipsis {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The score donut, in the list and on the match card. It carries no number, only how full and which colour. */
.rm-ws__score,
.ant-progress.rm-ws__score {
    flex: none;
    line-height: 1;
}

.rm-ws__score .ant-progress-text {
    display: none;
}

/* ---- Middle column: the match card and the three key figures under it ---------------------------- */

/* The one-line reason the candidate is on the list; the first thing to read on the screen. */
.ant-typography.rm-ws__summary {
    font-size: 16px;
    font-weight: 500;
}

/* The three cards share the row evenly, whatever their content. They back the match card up, so they
   are kept small enough not to compete with it. */
.rm-ws__stat {
    flex: 1 1 0;
    min-width: 0;
}

.rm-ws__stats .ant-card-body {
    padding: 12px 16px;
}

.ant-typography.rm-ws__value {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

/* The theme pins every Typography element to line-height 1; running text needs room to wrap. */
.ant-typography.rm-ws__wrap {
    line-height: 1.45 !important;
}

/* A description cell is an inline flex row, which would lay every paragraph and list of stored HTML out as
   its own column. One block child keeps the HTML flowing top to bottom at the cell's full width. */
.rm-ws__rich-text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rm-ws__rich-text > :first-child {
    margin-top: 0;
}

.rm-ws__rich-text > :last-child {
    margin-bottom: 0;
}

.rm-ws__icon--good {
    color: var(--ant-success-color);
}

.rm-ws__icon--warn {
    color: var(--ant-warning-color);
}

/* ---- The candidate's details with their timeline beside them, as on the candidate page ------------- */

.rm-ws__details {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* The tabs share the row with the timeline; min-width lets the cv preview shrink instead of overflowing. */
.rm-ws__details-main {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.rm-ws__timeline {
    flex: 0 0 340px;
    min-width: 0;
}

/* ---- The cv tab ---------------------------------------------------------------------------------- */

/* A link button carries the file name, so it should read as text rather than sit on its own line. The
   names are long hashes, so let them wrap instead of pushing the table into a horizontal scrollbar. */
.ant-btn.rm-ws__cv-name {
    height: auto;
    padding: 0;
    text-align: left;
    white-space: normal;
    word-break: break-all;
}

/* The table sits above the preview, so both get the full width of the card. */
.rm-ws__cv-preview {
    flex: none;
    height: 720px;
    border-radius: 4px;
    background: #f7f8fa;
    overflow: hidden;
}

/* DocumentViewer brings its own caption; the card title already says what this is. */
.rm-ws__cv-preview .document-viewer > p {
    display: none;
}

.rm-ws__cv-preview .document-viewer,
.rm-ws__cv-preview .wrapper {
    height: 100%;
}

.rm-ws__cv-preview .wrapper {
    padding: 24px;
    background: #fff;
    overflow: auto;
}

.rm-ws__cv-preview .ant-empty,
.rm-ws__cv-preview .ant-skeleton {
    padding: 24px;
}