/* Collaborative editing — presence roster, field locks, remote-update flashes.
   Namespaced: every class carries the collab- prefix.
   No resets, no bare element selectors, no Bootstrap overrides. */

/* The roster lives in .rfp-card-title-row, which has a teal background, so everything in
   here is light-on-dark. The per-field badges further down sit on the white card body and
   are coloured for that instead. */
.collab-roster {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding-left: 12px;
    transition: opacity .2s ease
}

/* Socket down or given up. Keep the last known roster on screen but visibly stale rather
   than blanking it, so the form does not appear to lose people on a brief network blip. */
.collab-roster.collab-offline {
    opacity: .4
}

.collab-roster-list {
    display: inline-flex;
    align-items: center
}

.collab-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    cursor: default;
    /* Overlapping circles, earlier ones on top, so the row reads as a stack. */
    position: relative
}

.collab-avatar:first-child {
    margin-left: 0
}

.collab-avatar--me {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55)
}

.collab-roster-summary {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .82);
    white-space: nowrap
}

/* Only worth drawing attention to when somebody else is actually in the form. */
.collab-roster--shared .collab-roster-summary {
    color: #FFFFFF;
    font-weight: 600
}

/* ---------------------------------------------------------------------------
   A field held by somebody else
   --------------------------------------------------------------------------- */

/*.collab-locked {
    background-color: #F4F3F1 !important;
    border-style: dashed !important;
    border-color: #C9C6C2 !important;
    cursor: not-allowed !important
}*/

/* TinyMCE puts its own chrome around the textarea, so target the editor shell too. */
/*.collab-locked + .tox .tox-edit-area,
.collab-locked + .tox .tox-editor-header {
    background-color: #F4F3F1
}*/

/* Held by someone else AND this user could otherwise have typed in it. A read-only
   viewer gets the badge only - their field is already inert and already grey, so
   restyling it just reads as a fault. */
.collab-locked-visual {
    background-color: #f4f3f1 !important;
    border-style: dashed !important;
    border-color: #c9c6c2 !important;
    cursor: not-allowed !important;
}

    .collab-locked-visual + .tox .tox-edit-area,
    .collab-locked-visual + .tox .tox-editor-header {
        background-color: #f4f3f1;
    }

/* bootstrap-select renders its own button, so the lock has to be applied to that wrapper.
   pointer-events rather than disabled, so the select still posts its value. */
.collab-locked-picker {
    pointer-events: none;
    opacity: .7
}

.collab-locked-picker > .dropdown-toggle {
    background-color: #F4F3F1 !important;
    border-style: dashed !important;
    border-color: #C9C6C2 !important
}

.collab-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: #6B6863
}

.collab-lock-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Pulses so it reads as "live", not as a static validation message. */
    animation: collab-pulse 1.8s ease-in-out infinite
}

@keyframes collab-pulse {
    0%, 100% { opacity: 1 }
    50% { opacity: .35 }
}

/* ---------------------------------------------------------------------------
   A field just changed underneath you
   --------------------------------------------------------------------------- */

.collab-just-updated {
    animation: collab-highlight 2.5s ease-out
}

@keyframes collab-highlight {
    0% { background-color: #FFF6D8 }
    100% { background-color: transparent }
}

.collab-updated-flash {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-style: italic;
    color: #6B6863
}

@media (prefers-reduced-motion: reduce) {
    .collab-lock-dot,
    .collab-just-updated {
        animation: none
    }

    .collab-roster {
        transition: none
    }
}


/* Both feedback elements must not reflow the form. Absolute with auto offsets paints them
   at their static position - where they would have been - but out of flow, so nothing
   below moves. No offsets to maintain against the varying insertion points. */
.collab-lock-badge,
.collab-updated-flash {
    position: absolute;
    z-index: 5;
    width: max-content;
    /* .rfp-card is overflow:hidden, so a long name must not run past the card edge. */
    max-width: 100%;
    margin-top: 2px;
    white-space: nowrap;
    /* Informational only - never intercept a click on whatever it now sits over. */
    pointer-events: none;
    /* Out of flow means it overlaps what follows, so it needs its own ground. */
    background-color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);*/
}

/* position:absolute blockifies inline-flex, so restate the layout. */
.collab-lock-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b6863;
}

.collab-updated-flash {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: #6b6863;
    overflow: hidden;
    text-overflow: ellipsis;
    /* The flash can land while the lock badge is up - the person holding a field is the
       one whose save arrives. Both resolve to the same static position, so nudge this
       clear rather than letting the two print over each other. */
    /*transform: translateY(17px);*/
}

/* TinyMCE fields. The textarea is display:none, so the .collab-locked-visual rule above
   paints nothing - the treatment has to reach the editor chrome that replaced it. The
   container is the textarea's immediate next sibling, so "+ .tox" is reliable. */

/* The visible typing surface is the iframe ELEMENT, which carries its own opaque white
   background over .tox-edit-area - colour the edit area alone and the grey just sits
   behind the iframe. The iframe's internal body is transparent, so this is sufficient
   and nothing needs to be injected into the editor document. The .tox-edit-area half
   stays as a fallback in case a future skin makes the iframe transparent. */
.collab-locked-visual + .tox .tox-edit-area,
.collab-locked-visual + .tox .tox-edit-area__iframe {
    background-color: #f4f3f1 !important;
}

/* The skin's own header and statusbar rules land at the same specificity later in the
   cascade, so these have to be !important to win. */
.collab-locked-visual + .tox .tox-editor-header,
.collab-locked-visual + .tox .tox-statusbar {
    background-color: #f4f3f1 !important;
}

/* Match the dashed treatment the plain inputs get, so a held rich-text field reads the
   same as a held text field. */
.collab-locked-visual + .tox.tox-tinymce {
    border-style: dashed !important;
    border-color: #c9c6c2 !important;
}

/* Permanently non-editable picker. Distinct from a collaborative lock - no dashed border,
   because nobody is editing it; it just isn't yours. Match this to whatever your
   .form-control[readonly] fields look like so the two read as the same state. */
.collab-readonly-picker {
    pointer-events: none;
}

    .collab-readonly-picker > .dropdown-toggle {
        background-color: #f4f3f1 !important;
        border-color: #d6d3cf !important;
        cursor: not-allowed !important;
    }

/* One badge for the set, in flow at the top of it - an absolute badge there would sit
   over the first question's label. */
.collab-lock-badge.collab-lock-badge--set {
    position: static;
    margin: 0 0 8px;
}

/* Whole set held by someone else. Subtle - the per-field dashed treatment already
   carries the message; this just ties the fields together as one locked unit. */
.set-header.collab-locked-set {
    outline: 1px dashed #c9c6c2;
    outline-offset: 4px;
    border-radius: 5px;
}