/* =============================================
   The facility page (user/installer_facility_
   detail.html), for admins and installers: its
   controls first, then its layout. Its header
   and the record sheet share components.css's
   rules; the status colors are status.css's.
   ============================================= */

/* Bootstrap buttons in the brand green: the composer's Post Comment and
   Resolve, and the record's Save. Before the rest, so the composer's own
   rules win. */
.btn-fegreen {
    background-color: var(--in-button);
    box-shadow: none;
    border: var(--fe-dark-green-2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-fegreen:hover {
    background-color: var(--in-button-hover);
    color: white;
    transition: all 0.3s ease;
}

/* Outlined partner to .btn-fegreen, for the secondary action beside it */
.btn-fegreen-outline {
    background-color: var(--in-surface);
    color: var(--in-accent);
    box-shadow: none;
    border: 1px solid var(--in-accent);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-fegreen-outline:not(:disabled):hover {
    background-color: var(--in-button);
    color: white;
}

/* =============================================
   Facility page controls: the options menu, the
   phase progress and the composer's Move to.
   Status colors follow the badges (status.css).
   The page's layout is under "Facility page"
   below.
   ============================================= */

/* Options menu: the vertical ellipsis on the header band */
.options-menu {
    position: relative;
    flex: none;
}

.options-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--in-text-muted);
    font-size: 1.15rem;
    cursor: pointer;
}

.options-menu__toggle:hover,
.options-menu__toggle[aria-expanded="true"] {
    background-color: var(--in-wash);
    color: var(--in-text);
}

.options-menu__toggle:focus {
    outline: none;
}

.options-menu__toggle:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

.options-menu__list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 210px;
    padding: 6px 0;
    border: 1px solid var(--in-border-soft);
    border-radius: 6px;
    background-color: var(--in-surface);
    box-shadow: 0 10px 24px var(--in-shadow);
}

.options-menu__list[hidden] {
    display: none;
}

.options-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    background: none;
    color: var(--in-text);
    font-size: 0.9rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.options-menu__item[hidden] {
    display: none;
}

.options-menu__item .fa {
    width: 14px;
    text-align: center;
    color: var(--in-text-faint);
}

.options-menu__item:hover,
.options-menu__item:focus {
    outline: none;
    background-color: var(--in-hover);
}

.options-menu__item:disabled {
    background: none;
    color: var(--in-text-placeholder);
    cursor: default;
}

.options-menu__item:disabled .fa {
    color: inherit;
}

.options-menu__item--danger,
.options-menu__item--danger .fa {
    color: var(--in-danger);
}

.options-menu__item--danger:hover,
.options-menu__item--danger:focus {
    background-color: var(--in-danger-wash);
}

.options-menu__divider {
    margin: 6px 0;
    border-top: 1px solid var(--in-border-soft);
}

/* Phase progress, in the facility page's header: a bar for each phase, then
   the outcome. Gold fills the phases done and half of the current one. */
.phase-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phase-progress__step {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.phase-progress__bar {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--in-track);
}

.phase-progress__bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: inherit;
    background-color: var(--fe-primary-gold);
}

.phase-progress__step.is-done .phase-progress__bar::after {
    width: 100%;
}

.phase-progress__step.is-current .phase-progress__bar::after {
    width: 55%;
}

.phase-progress__step.is-current.is-complete .phase-progress__bar::after {
    width: 100%;
}

.phase-progress__step.is-current.is-unresponsive .phase-progress__bar::after {
    width: 100%;
    background-color: var(--in-idle);
}

.phase-progress__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    color: var(--in-text-faint);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.phase-progress__label .fa {
    font-size: 0.85rem;
}

.phase-progress__step.is-done .phase-progress__label,
.phase-progress__step.is-current .phase-progress__label {
    color: var(--in-text);
}

.phase-progress__step.is-done .phase-progress__label .fa,
.phase-progress__step.is-current .phase-progress__label .fa {
    color: var(--fe-primary-gold);
}

.phase-progress__step.is-unresponsive .phase-progress__label .fa {
    color: var(--in-idle);
}

/* The current status, beside its phase */
.phase-progress__status {
    color: var(--in-accent);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* The composer's Move to: keep the current status, or pick the move */
.composer-move {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.composer-move__label {
    margin: 0;
    color: var(--in-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.composer-move__select {
    min-width: 0;
    max-width: 100%;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-surface);
    color: var(--in-text);
    font-size: 0.82rem;
    cursor: pointer;
}

.composer-move__select:focus {
    outline: none;
    border-color: var(--in-accent);
    box-shadow: 0 0 0 3px var(--in-focus);
}

/* A move is picked */
.composer-move__select.is-set {
    border-color: var(--in-accent);
    background-color: var(--in-accent-wash);
    color: var(--in-accent);
    font-weight: 600;
}

/* Installer comment form: on Info Requested, Post Comment (outlined) beside
   Resolve (primary) */
.installer-comment-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* =============================================
   Facility page (user/installer_facility_detail
   .html), for admins and installers: a header
   on the page's white, then two columns
   -- the activity (the composer over the
   history, newest first) and the applicant
   record, a grey sheet of labelled fields.
   ============================================= */

/* --facility-gutter keeps the content within 1400px on wide screens */
.facility-page {
    --facility-gutter: max(28px, calc((100% - 1400px) / 2));
    padding-bottom: 48px;
}

/* Application header: who, where, and where the application stands. No
   band of its own; it sits on the page's background. */
.facility-hero {
    padding: 18px var(--facility-gutter) 6px;
    color: var(--in-text);
}

.facility-hero__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    margin-bottom: 4px;
}

/* The back link, title, tag and meta line are the list pages' (.page-hero,
   components.css) */
.facility-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--in-accent);
    font-size: 0.88rem;
    font-weight: 500;
}

.facility-back:hover,
.facility-back:focus {
    color: var(--in-accent-hover);
    text-decoration: none;
}

.facility-back .fa {
    transition: transform 0.15s ease;
}

.facility-back:hover .fa {
    transform: translateX(-3px);
}

.facility-hero__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.facility-hero__title {
    margin: 0;
    color: var(--in-accent);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.facility-hero__tag {
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--in-tag-bg);
    color: var(--in-tag-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.facility-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin: 8px 0 0;
    color: var(--in-text-2);
    font-size: 0.92rem;
}

.facility-hero__meta-item .fa {
    margin-right: 5px;
    color: var(--in-text-faint);
}

.facility-hero__progress {
    margin-top: 20px;
}

.facility-page > .messages {
    padding: 16px var(--facility-gutter) 0;
}

.facility-page .messages .alert {
    margin-bottom: 0;
}

.facility-page .messages .alert + .alert {
    margin-top: 8px;
}

/* The two columns */
.facility-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 18px var(--facility-gutter) 0;
}

/* ----- Activity: the composer, then the history ----- */
.activity-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.composer {
    padding: 12px 14px 14px;
    border: 1px solid var(--in-border);
    border-radius: 10px;
    background-color: var(--in-sheet-2);
}

.composer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.composer__label {
    color: var(--in-text-2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.composer__field {
    position: relative;
}

/* One line at rest; room to write, and the count, once in use */
.composer__input {
    min-height: 42px;
    padding: 10px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-surface);
    color: var(--in-text);
    font-size: 0.85rem;
    line-height: 1.45;
    resize: vertical;
}

.composer__input:focus,
.composer__input:not(:placeholder-shown) {
    min-height: 84px;
    padding-bottom: 20px;
}

.composer__input:focus {
    border-color: var(--in-accent);
    box-shadow: 0 0 0 3px var(--in-focus);
}

/* The character count shows while typing */
.composer__count {
    position: absolute;
    right: 10px;
    bottom: 4px;
    color: var(--in-text-faint);
    font-size: 0.7rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.composer__field:focus-within .composer__count {
    opacity: 1;
}

.composer__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 10px;
}

.composer .btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
}

.composer__submit {
    flex: none;
    margin-left: auto;
}

/* The Salesforce button, Attach and Memo, beside the composer's label */
.composer__options {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* Attach and the memo switch: the inputs stay focusable, and their labels
   are the controls */
.composer__file-input,
.composer__memo-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.composer__attach,
.composer__memo,
.composer__salesforce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 11px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-surface);
    color: var(--in-text-2);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.composer__attach:hover,
.composer__memo:hover,
.composer__salesforce:hover {
    border-color: var(--in-border-hover);
    background-color: var(--in-hover);
}

/* Link to Salesforce is a button, and once the registration is linked
   there is a link to its record, and the button is Salesforce Sync: both
   drawn as Attach and Memo are. The button is hidden while there is nothing
   to sync. */
.composer__salesforce,
.composer__salesforce:hover,
.composer__salesforce:focus {
    color: var(--in-text-2);
    font-family: inherit;
    line-height: inherit;
    text-decoration: none;
}

.composer__salesforce:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

.composer__salesforce:disabled {
    opacity: 0.6;
    cursor: default;
}

/* What Salesforce has for the registration, beside the button: a spinner
   while it is asked, then synced, its matches or what isn't synced found,
   none, or failed */
.composer__sync {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
    color: var(--in-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.composer__sync[hidden],
.composer__salesforce[hidden] {
    display: none;
}

.composer__sync--synced .fa {
    color: var(--in-complete);
}

.composer__sync--found .fa {
    color: var(--in-amber);
}

.composer__sync--none .fa {
    color: var(--in-idle);
}

.composer__sync--failed .fa {
    color: var(--in-danger);
}

/* Why the button, once pressed, didn't link it or couldn't compare it,
   under the head */
.composer__sync-problem {
    margin: -2px 0 8px;
    color: var(--in-danger);
    font-size: 0.8rem;
    text-align: right;
}

/* Link to Salesforce's dialog: the leads and opportunities the registration
   could be linked with, a row each, to pick one */
.salesforce-matches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.salesforce-match {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--in-border-input);
    border-radius: 8px;
    background-color: var(--in-surface);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.salesforce-match:hover {
    border-color: var(--in-border-hover);
    background-color: var(--in-hover);
}

.salesforce-match__input {
    flex: none;
    margin-top: 4px;
    accent-color: var(--in-accent);
}

.salesforce-match__body {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
}

.salesforce-match__name {
    color: var(--in-text);
    font-size: 0.9rem;
    font-weight: 700;
}

.salesforce-match__object {
    color: var(--in-text-faint);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.salesforce-match__line {
    flex: 0 0 100%;
    color: var(--in-text-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.salesforce-match__open,
.salesforce-match__open:hover,
.salesforce-match__open:focus {
    flex: none;
    padding: 2px 4px;
    color: var(--in-accent);
    font-size: 0.85rem;
}

/* The Sync window: what isn't synced between the registration and its
   record in Salesforce, its fields, its files and the record's Chatter. Its
   rows scroll between the window's head and its foot, which has Sync. */
.salesforce-sync .modal-body {
    min-height: 120px;
    max-height: calc(100vh - 290px);
    padding: 0;
    overflow-y: auto;
}

.salesforce-sync__section + .salesforce-sync__section {
    border-top: 1px solid var(--in-border);
}

/* A section's name, and how many it has to sync or that it is synced */
.salesforce-sync__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 10px;
}

.salesforce-sync__synced {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--in-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.salesforce-sync__synced .fa {
    color: var(--in-complete);
}

/* The Salesforce record a section's fields are on: the lead, or the
   opportunity, its facility, its primary contact and its account */
.salesforce-sync__group {
    margin: 0;
    padding: 5px 16px;
    border-top: 1px solid var(--in-border-soft);
    color: var(--in-text-faint);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.salesforce-sync__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Why a section's sync wasn't made, and in place of the rows why the two
   couldn't be compared */
.salesforce-sync__error {
    margin: 0;
    padding: 0 16px 10px;
}

.salesforce-sync__error--alone {
    padding-top: 14px;
}

/* What Sync is doing, beside its buttons */
.salesforce-sync__progress {
    color: var(--in-text-muted);
    font-size: 0.8rem;
}

/* A row: the portal's side on the left, Salesforce's on the right, each
   half the window, and between them the arrow that says which way it goes.
   What only one side has is beside a grey blank. */
.salesforce-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    border-top: 1px solid var(--in-border-soft);
}

/* The sides' names, which stay over their columns as the rows scroll */
.salesforce-pair--head {
    position: sticky;
    top: 0;
    z-index: 1;
    border-top: 0;
    border-bottom: 1px solid var(--in-border);
    background-color: var(--in-sheet);
}

.salesforce-pair__side {
    min-width: 0;
    padding: 8px 16px 9px;
    overflow-wrap: anywhere;
}

.salesforce-pair__side--none {
    background-color: var(--in-sheet);
}

/* The record in Salesforce, beside its side's name */
.salesforce-pair__record,
.salesforce-pair__record:hover,
.salesforce-pair__record:focus {
    color: var(--in-text-2);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.salesforce-pair__mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    border-right: 1px solid var(--in-border-soft);
    border-left: 1px solid var(--in-border-soft);
}

/* A field's name, over its value on each side */
.salesforce-pair__label {
    margin: 0;
    color: var(--in-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* A line's room even without a value */
.salesforce-pair__value {
    min-height: 1.5em;
    margin: 0;
    color: var(--in-text);
    font-size: 0.85rem;
}

/* A file's name, and a Chatter message's words */
.salesforce-pair__name {
    margin: 0;
    color: var(--in-text);
    font-size: 0.85rem;
    font-weight: 600;
}

.salesforce-pair__text {
    margin: 2px 0 0;
    color: var(--in-text);
    font-size: 0.85rem;
    white-space: pre-line;
}

.salesforce-pair__meta {
    margin: 0;
    color: var(--in-text-faint);
    font-size: 0.78rem;
}

/* Several things on the line: a file's date, size and who added it */
.salesforce-pair__meta--parts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}

/* A memo's document */
.salesforce-pair__tag {
    margin-left: 8px;
    font-size: 0.78rem;
}

/* Why a row wasn't synced, under it */
.salesforce-pair__under {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 16px 9px;
}

/* A row's box, between its sides: a checkbox whose tick is an arrow,
   pointing the way the value, the file or the message goes. Gold while it
   is to be synced, empty once pressed to leave it out. Two values that
   differ have a box each way, and neither is on until one is pressed. */
.salesforce-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--in-border-hover);
    border-radius: 5px;
    background-color: var(--in-surface);
    color: var(--in-text-placeholder);
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.salesforce-pick .fa {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.salesforce-pick:hover {
    border-color: var(--in-text-placeholder);
}

.salesforce-pick:hover .fa {
    opacity: 0.8;
}

.salesforce-pick:focus {
    outline: none;
}

.salesforce-pick:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

.salesforce-pick.is-on {
    border-color: var(--in-amber);
    background-color: var(--in-amber-wash);
    color: var(--in-amber);
}

.salesforce-pick.is-on .fa {
    opacity: 1;
}

.salesforce-pick:disabled {
    opacity: 0.6;
    cursor: default;
}

/* What can't be copied either way */
.salesforce-pick--none,
.salesforce-pick--none:hover {
    border-color: var(--in-border);
    background-color: var(--in-wash);
    cursor: default;
}

.composer__memo-input:checked + .composer__memo {
    border-color: var(--in-memo-mark);
    background-color: var(--in-memo-wash);
    color: var(--in-memo-strong);
}

.composer__file-input:focus-visible + .composer__attach,
.composer__memo-input:focus-visible + .composer__memo {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

/* Writing a memo: the composer takes the memo's dashed, hatched look, and
   a memo is text only, so no Attach and no Move to */
.composer.is-memo {
    border-style: dashed;
    border-color: var(--in-memo-border);
    background-color: var(--in-memo-bg);
    background-image: repeating-linear-gradient(-45deg, transparent 0 8px, var(--in-hatch) 8px 16px);
}

.composer.is-memo .composer__input {
    border-color: var(--in-memo-border);
}

.composer.is-memo .composer__attach,
.composer.is-memo .composer-move {
    display: none;
}

/* Info Requested, on the installer's page: the composer holds Resolve */
.composer--attention {
    border-color: var(--in-amber-border);
    background-color: var(--in-amber-wash);
    box-shadow: inset 3px 0 0 var(--fe-primary-gold);
}

/* Files dragged over the activity column land in the composer */
.composer.is-dragover {
    outline: 2px dashed var(--in-accent);
    outline-offset: -6px;
    background-color: var(--in-accent-wash);
}

/* Files waiting to be posted, under the text box */
.composer-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.composer-files[hidden] {
    display: none;
}

.composer-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--in-border);
    border-radius: 7px;
    background-color: var(--in-wash);
    font-size: 0.8rem;
    line-height: 1.3;
}

.composer-file__thumb {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 5px;
    background-color: var(--in-wash);
    color: var(--in-text-muted);
    font-size: 14px;
}

.composer-file__thumb:has(.fa-file-pdf-o) {
    background-color: var(--in-pdf-wash);
}

.composer-file__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.composer-file__name {
    min-width: 0;
    max-width: 200px;
    overflow: hidden;
    color: var(--in-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-file__size {
    flex: none;
    color: var(--in-text-muted);
}

.composer-file__remove {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--in-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.composer-file__remove:hover {
    background-color: var(--in-wash);
    color: var(--in-text);
}

.composer-file__remove:focus {
    outline: none;
}

.composer-file__remove:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 1px;
}

.composer-files__error {
    margin: 6px 0 0;
    color: var(--in-danger);
    font-size: 0.8rem;
}

/* Who will see the comment, or that a memo stays with Flett Exchange */
.composer__info {
    display: block;
    margin-top: 8px;
    color: var(--in-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

/* The history: a row per status change, comment or memo, newest first,
   all laid out alike -- when, a marker in the author's color, who and what
   they wrote, and a last column, as wide as it needs, for the status change
   they made. Rows are tinted by side: Flett Exchange white, the installer
   and the system grey. Memos are hatched. */
.thread {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--in-border);
    border-radius: 10px;
    background-color: var(--in-surface);
    list-style: none;
}

.thread__empty {
    padding: 36px 12px;
    color: var(--in-text-muted);
    text-align: center;
}

.thread__empty p {
    margin: 8px 0 0;
    font-style: italic;
}

.entry {
    display: grid;
    grid-template-columns: 100px 8px minmax(0, 1fr) auto;
    column-gap: 9px;
    align-items: start;
    padding: 10px 14px 11px;
    border-top: 1px solid var(--in-border-soft);
    background-color: var(--in-surface);
}

.thread__entry:first-child > .entry:first-child {
    border-top: 0;
}

.entry--installer,
.entry--system {
    background-color: var(--in-sheet);
}

.entry--memo {
    border-top-style: dashed;
    border-top-color: var(--in-memo-border);
    background-color: var(--in-memo-bg);
    background-image: repeating-linear-gradient(-45deg, transparent 0 7px, var(--in-hatch) 7px 14px);
}

.entry__time {
    grid-column: 1;
    color: var(--in-text-faint);
    font-size: 0.72rem;
    line-height: 1.6;
    white-space: nowrap;
}

.entry__marker {
    grid-column: 2;
    justify-self: center;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background-color: var(--in-accent);
}

.entry--installer .entry__marker {
    background-color: var(--in-amber);
}

.entry--system .entry__marker {
    background-color: var(--in-idle);
}

.entry--memo .entry__marker {
    border-radius: 1px;
    background-color: var(--in-memo-mark);
}

.entry__main {
    grid-column: 3;
    min-width: 0;
}

.entry__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.entry__author {
    color: var(--in-text);
    font-weight: 700;
}

.entry__tag {
    color: var(--in-accent);
    font-weight: 600;
}

.entry--installer .entry__tag {
    color: var(--in-amber-text);
}

.entry__memo {
    color: var(--in-memo-text);
    font-weight: 500;
}

.entry__memo .fa {
    margin-right: 2px;
}

/* The last column: the old status, an arrow and the new one on one line,
   wrapping before the arrow only when the row is too narrow */
.entry__change {
    grid-column: 4;
    min-width: 0;
}

.entry__move {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.entry__move-to {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.entry__move .status-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.entry__arrow {
    color: var(--in-text-faint);
    font-size: 0.8rem;
}

.entry__text {
    margin-top: 2px;
    color: var(--in-text-2);
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.entry__check {
    color: var(--in-complete);
}

/* A comment's files in the thread: pictures, then the rest by name */
.attachment-grid,
.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 0;
    list-style: none;
}

.attachment-list {
    flex-direction: column;
    align-items: flex-start;
}

.attachment-grid > li,
.attachment-list > li {
    max-width: 100%;
}

/* Fixed sizes, so the thread doesn't shift as pictures load */
.attachment-thumb {
    display: block;
    width: 96px;
    max-width: 100%;
    height: 68px;
    overflow: hidden;
    border: 1px solid var(--in-border);
    border-radius: 6px;
    background-color: var(--in-wash);
}

.attachment-grid > li:only-child .attachment-thumb {
    width: 136px;
    height: 96px;
}

.attachment-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.attachment-thumb:hover img {
    transform: scale(1.04);
}

/* A picture that won't load shows its name instead */
.attachment-thumb__fallback {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 6px;
    color: var(--in-text-muted);
    font-size: 0.7rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.attachment-thumb.is-broken img {
    display: none;
}

.attachment-thumb.is-broken .attachment-thumb__fallback {
    display: flex;
}

.attachment {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--in-border);
    border-radius: 7px;
    background-color: var(--in-surface);
    color: var(--in-text);
    line-height: 1.3;
}

a.attachment:hover,
a.attachment:focus {
    border-color: var(--in-border-hover);
    color: var(--in-text);
    text-decoration: none;
}

.attachment-thumb:focus,
a.attachment:focus {
    outline: none;
}

.attachment-thumb:focus-visible,
a.attachment:focus-visible {
    outline: 2px solid var(--in-accent);
    outline-offset: 2px;
}

.attachment__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background-color: var(--in-wash);
    color: var(--in-text-muted);
    font-size: 13px;
}

.attachment__icon:has(.fa-file-pdf-o) {
    background-color: var(--in-pdf-wash);
}

.attachment__body {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.attachment__name {
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment__meta {
    flex: none;
    color: var(--in-text-faint);
    font-size: 0.74rem;
}

.attachment__action {
    flex: none;
    color: var(--in-text-faint);
    font-size: 0.75rem;
}

/* Taken out of the facility's documents since it was posted */
.attachment--removed {
    border-style: dashed;
    background-color: transparent;
}

.attachment--removed .attachment__icon {
    background-color: transparent;
    opacity: 0.6;
}

.attachment--removed .attachment__name {
    color: var(--in-text-muted);
    font-weight: 500;
    text-decoration: line-through;
}

/* Address: a map thumbnail beside the address */
.record-address {
    display: flex;
    align-items: center;
    gap: 14px;
}

.record-address__map {
    position: relative;
    z-index: 0;
    flex: none;
    width: 104px;
    height: 76px;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--in-wash);
}

.record-address__map .leaflet-control-attribution {
    padding: 0 3px;
    font-size: 8px;
    line-height: 1.5;
}

.record-address__pin {
    color: var(--in-accent);
    font-size: 26px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* The address couldn't be found */
.record-address__error {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background-color: var(--in-sheet-glass);
    color: var(--in-danger);
    font-size: 0.7rem;
    line-height: 1.3;
    text-align: center;
}

.record-address__text {
    margin: 0;
    color: var(--in-text);
    font-size: 0.85rem;
    font-style: normal;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.record-address__value {
    flex: 1 1 auto;
    min-width: 0;
}

/* ----- Applicant record, edited in place (admins; facility-record.js) -----
   The pencil puts the whole record in edit mode, .is-editing: each value
   (.record-view) gives way to its field (.record-edit), drawn round the
   value's own text so the text stays where it was. */
.record:not(.is-editing) .record-edit,
.record.is-editing .record-view,
.record.is-editing .record__edit {
    display: none;
}

.record.is-editing {
    border-color: var(--in-accent-soft);
    box-shadow: 0 0 0 3px rgba(0, 97, 104, 0.06);
}

/* One pencil for the record, in its top corner: the first heading row,
   whichever section that is */
.record__edit {
    position: absolute;
    top: 16px;
    right: 12px;
    z-index: 1;
    margin-right: 0;
}

/* Rows part a little, so neighbouring fields don't touch */
.record.is-editing .record-fields__row {
    padding: 6px 0;
}

/* A field's box sits round its text: 3px of padding and border above and
   7px beside, taken back by the margins */
.record-input {
    display: block;
    width: calc(100% + 14px);
    min-width: 0;
    height: calc(1.45em + 6px);
    margin: -3px -7px;
    padding: 2px 6px;
    border: 1px solid var(--in-border-input);
    border-radius: 6px;
    background-color: var(--in-surface);
    color: var(--in-text);
    font: inherit;
    line-height: 1.45;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.record-input::placeholder {
    color: var(--in-text-placeholder);
}

.record-input:hover {
    border-color: var(--in-border-hover);
}

.record-input:focus {
    border-color: var(--in-accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--in-focus);
}

.record-input:disabled {
    border-color: var(--in-border-soft);
    background-color: var(--in-wash);
    cursor: not-allowed;
}

.record-input.is-invalid {
    border-color: var(--in-danger-border);
}

.record-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.14);
}

select.record-input {
    padding-right: 22px;
    background-image: linear-gradient(45deg, transparent 50%, var(--in-text-muted) 50%),
                      linear-gradient(135deg, #5f6d6e 50%, transparent 50%);
    background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
    background-size: 4px 4px;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

textarea.record-input {
    min-height: calc(1.45em + 6px);
    overflow: hidden;
    resize: none;
}

/* Sizes are typed, not stepped */
.record-input[type="number"] {
    -moz-appearance: textfield;
}

.record-input[type="number"]::-webkit-inner-spin-button,
.record-input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* Fields sharing a value's line: the name's two parts, a size and its unit,
   the city, state and zip code. The line's box sits round the text. */
.record-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: -3px -7px;
}

.record-inputs .record-input {
    flex: 1 1 0;
    width: auto;
    margin: 0;
}

/* A size keeps its unit and Unknown on its line, giving up width instead */
.record-inputs--size {
    flex-wrap: nowrap;
}

.record-inputs--size .record-input {
    flex: 0 1 7.5em;
    min-width: 3.5em;
}

.record-inputs__unit {
    flex: none;
    color: var(--in-text-muted);
}

.record-check {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    margin: 0 0 0 8px;
    color: var(--in-text-muted);
    font-size: 0.78rem;
    cursor: pointer;
}

.record-check__input {
    margin: 0;
    accent-color: var(--in-accent);
    cursor: pointer;
}

/* The address: street over city, state and zip code, as it reads */
.record-address__fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--in-text);
    font-size: 0.85rem;
    line-height: 1.45;
}

.record-inputs--place .record-input {
    min-width: 5.5em;
}

.record-inputs--place [name="facility_state"] {
    flex: 0 0 4.6em;
    min-width: 0;
}

.record-inputs--place [name="facility_zipcode"] {
    flex: 0 1 4.8em;
    min-width: 4.2em;
}

/* Why the server turned a field down, under it */
.record-error {
    margin: 6px 0 0;
    color: var(--in-danger);
    font-size: 0.75rem;
    line-height: 1.35;
}

/* Cancel and Save: at the foot of the record, or of the window while the
   record runs past it */
.record__savebar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid var(--in-border-soft);
    border-radius: 0 0 10px 10px;
    background-color: var(--in-sheet-glass);
    box-shadow: 0 -6px 16px var(--in-shadow-soft);
}

.record__savebar .btn {
    padding: 5px 14px;
    font-size: 0.82rem;
}

.record__save-error {
    flex: 1 1 12em;
    margin: 0;
    color: var(--in-danger);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* What a save just changed, and its memo in the history, glow a moment. A
   row's glow reaches out sideways only, so rows changed together glow as
   one block. */
@keyframes record-updated {
    from {
        background-color: var(--in-glow);
        box-shadow: -6px 0 0 var(--in-glow), 6px 0 0 var(--in-glow);
    }
    to {
        background-color: transparent;
        box-shadow: -6px 0 0 transparent, 6px 0 0 transparent;
    }
}

@keyframes entry-updated {
    from {
        box-shadow: inset 0 0 0 100vmax var(--in-glow-wash);
    }
    to {
        box-shadow: inset 0 0 0 100vmax transparent;
    }
}

.record-fields__row.is-updated,
.record-address__value.is-updated {
    animation: record-updated 2s ease-out;
}

.thread__entry.is-updated > .entry {
    animation: entry-updated 2s ease-out;
}

/* Documents: a white row per file */
.record-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.record-file {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--in-border-soft);
    border-radius: 7px;
    background-color: var(--in-surface);
}

.record-file__icon {
    flex: none;
    width: 16px;
    color: var(--in-text-muted);
    font-size: 15px;
    text-align: center;
}

.record-file__icon .fa-file-pdf-o,
.attachment__icon .fa-file-pdf-o,
.composer-file__thumb .fa-file-pdf-o {
    color: var(--in-pdf);
}

.record-file__icon .fa-file-image-o,
.attachment__icon .fa-file-image-o {
    color: var(--in-image);
}

.record-file__icon .fa-file-archive-o,
.attachment__icon .fa-file-archive-o {
    color: var(--in-archive);
}

.record-file__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--in-text);
    font-size: 0.82rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Attached to a memo, so the installer doesn't see it */
.record-file__memo {
    flex: none;
    color: var(--in-memo-text);
    font-size: 0.78rem;
}

.record-file__size {
    flex: none;
    color: var(--in-text-faint);
    font-size: 0.72rem;
    white-space: nowrap;
}

.record-file__actions {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
}

.record-file__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--in-accent);
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
}

.record-file__button:hover,
.record-file__button:focus {
    background-color: var(--in-accent-wash);
    color: var(--in-accent);
    text-decoration: none;
}

/* Preview, on a file the browser can't show */
.record-file__button:disabled {
    background: none;
    color: var(--in-text-placeholder);
    cursor: default;
}

.record-empty {
    padding: 12px 14px;
    border: 1px dashed var(--in-border-input);
    border-radius: 7px;
    background-color: var(--in-surface);
    color: var(--in-text-muted);
    font-size: 0.82rem;
}

.record-empty a {
    font-weight: 600;
}

/* Ask AI (admins): a prompt under a file, then a chat panel under the list
   -- or beside it, when the record is wide */
.ask-ai-btn,
.ask-ai-btn:hover,
.ask-ai-btn:focus {
    color: var(--in-ai);
}

.ask-ai-btn:hover,
.ask-ai-btn:focus {
    background-color: var(--in-ai-wash);
}

/* With a mouse, a file's Ask AI shows when the row is pointed at or
   focused, leaving its name room the rest of the time */
@media (hover: hover) {
    .record-file:not(:hover):not(:focus-within) .ask-ai-btn {
        display: none;
    }
}

/* Under the file's row, as wide as the record allows (100cqw is the
   record's width, less its padding) */
.ask-ai-prompt-box {
    display: none;
    position: absolute;
    top: 100%;
    right: -7px;
    z-index: 20;
    width: min(320px, calc(100cqw - 36px));
    margin-top: 6px;
}

.ask-ai-prompt-box.open {
    display: block;
    border: 1px solid var(--in-ai-border);
    border-radius: 6px;
    background: var(--in-surface);
    box-shadow: 0 4px 16px var(--in-shadow);
}

.ask-ai-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
}

/* Under the prompt: the suggested prompts, then the model picker */
.ask-ai-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 6px 8px;
    border-top: 1px solid var(--in-border-soft);
}

.ask-ai-suggestion {
    padding: 3px 10px;
    border: 1px solid var(--in-ai-border);
    border-radius: 999px;
    background: var(--in-ai-wash);
    color: var(--in-ai);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.ask-ai-suggestion:hover,
.ask-ai-suggestion:focus {
    border-color: var(--in-ai);
}

.ask-ai-model {
    max-width: 100%;
    height: 26px;
    padding: 0 4px;
    border: 1px solid var(--in-border-input);
    border-radius: 5px;
    background-color: var(--in-surface);
    color: var(--in-text-2);
    font-size: 0.75rem;
}

.ask-ai-tools .ask-ai-model {
    margin-left: auto;
}

/* The chat panel's picker, as its title */
.chat-panel-model {
    border-color: transparent;
    color: var(--in-ai);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.chat-panel-model:hover,
.chat-panel-model:focus {
    border-color: var(--in-ai-border);
}

.ask-ai-input {
    flex: 1;
    min-height: 32px;
    max-height: 80px;
    padding: 4px 0;
    border: none !important;
    background: transparent;
    box-shadow: none !important;
    font-size: 0.85rem;
    resize: none;
}

.ask-ai-input:focus {
    outline: none;
    box-shadow: none !important;
}

.ask-ai-send {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: #7c5cbf;
    color: #fff;
}

.ask-ai-send:hover {
    background: #5a3d9e;
    color: #fff;
}

#docsRow {
    display: flex;
    flex-wrap: wrap;
}

.docs-col-full,
.docs-col-left {
    width: 100%;
    transition: width 0.35s ease;
}

.docs-chat-panel {
    width: 100%;
    margin-top: 12px;
    border-top: 1px solid var(--in-border-soft);
    transition: width 0.35s ease;
}

.chat-panel-inner {
    display: flex;
    flex-direction: column;
    height: 500px;
    max-height: 70vh;
}

.chat-panel-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--in-border-soft);
}

.chat-panel-title {
    color: var(--in-ai);
    font-size: 0.85rem;
    font-weight: 600;
}

.chat-panel-close {
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--in-text-faint);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.chat-panel-close:hover {
    color: var(--in-text);
}

.chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

.chat-block {
    margin-bottom: 20px;
}

.chat-block + .chat-block {
    padding-top: 16px;
    border-top: 1px solid var(--in-border-soft);
}

.chat-user-msg {
    margin-bottom: 10px;
}

.chat-file-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    color: var(--in-text-faint);
    font-size: 0.72rem;
}

.chat-file-label i {
    font-size: 0.7rem;
}

.chat-prompt-text {
    display: inline-block;
    max-width: 90%;
    padding: 6px 12px;
    border-radius: 12px 12px 12px 2px;
    background: var(--in-ai-wash);
    color: var(--in-text-2);
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat-model-label {
    margin-left: 2px;
}

.chat-ai-msg {
    padding-left: 4px;
    color: var(--in-text-2);
    font-size: 0.85rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* An answer's Markdown, drawn (renderMarkdown in the page's script) */
.chat-ai-msg p {
    margin: 0 0 8px;
}

.chat-ai-msg .chat-md-heading {
    margin-top: 4px;
    color: var(--in-text);
    font-weight: 700;
}

.chat-ai-msg hr {
    margin: 10px 0;
    border: 0;
    border-top: 1px solid var(--in-border-soft);
}

.chat-ai-msg code {
    padding: 0 3px;
    border-radius: 3px;
    background: var(--in-sheet);
    color: var(--in-text);
    font-size: 0.8rem;
}

.chat-md-item {
    display: flex;
    gap: 6px;
    margin-bottom: 2px;
}

.chat-md-item--1 {
    padding-left: 16px;
}

.chat-md-item--2 {
    padding-left: 32px;
}

.chat-md-item--3 {
    padding-left: 48px;
}

.chat-md-marker {
    flex-shrink: 0;
    min-width: 0.9em;
    color: var(--in-ai);
}

.chat-md-table {
    overflow-x: auto;
    margin: 4px 0 10px;
    white-space: normal;
}

.chat-md-table table {
    border-collapse: collapse;
    font-size: 0.8rem;
    line-height: 1.4;
}

.chat-md-table th,
.chat-md-table td {
    padding: 5px 8px;
    border: 1px solid var(--in-border-soft);
    vertical-align: top;
    text-align: left;
}

.chat-md-table th {
    background: var(--in-sheet);
    color: var(--in-text);
    font-weight: 600;
}

.chat-ai-spinner {
    padding: 8px 0;
    color: var(--in-ai);
    font-size: 0.8rem;
}

.chat-ai-error {
    padding: 8px 10px;
    border-radius: 4px;
    background: var(--in-danger-wash);
    color: var(--in-danger);
    font-size: 0.82rem;
}

/* Streaming cursor blink */
.chat-ai-msg.streaming::after {
    content: '▍';
    color: var(--in-ai);
    animation: blink-cursor 0.8s steps(2) infinite;
}

@keyframes blink-cursor {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.chat-reply-bar {
    flex-shrink: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--in-border-soft);
    background: var(--in-sheet);
}

.chat-reply-context {
    overflow: hidden;
    margin-bottom: 6px;
    color: var(--in-text-faint);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-reply-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-reply-input {
    flex: 1;
    min-height: 34px;
    max-height: 80px;
    padding: 6px 10px;
    border: 1px solid var(--in-ai-border) !important;
    border-radius: 6px;
    font-size: 0.85rem;
    resize: none;
}

.chat-reply-input:focus {
    border-color: var(--in-ai) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(124, 92, 191, 0.15) !important;
}

/* A wide record (the page stacked, below 1100px): the chat beside the
   files. The two short sections go side by side (components.css). */
@container (min-width: 720px) {
    .docs-col-left,
    .docs-chat-panel {
        width: 50%;
    }

    .docs-chat-panel {
        margin-top: 0;
        border-top: 0;
        border-left: 1px solid var(--in-border-soft);
    }
}

/* Attachment viewer: an image or PDF from the thread or Facility Documents,
   over the page. Unlike the portal's other modals (.modal, base.css) it takes
   the whole window, over the sidebar and the phone top bar. */
.modal.attachment-viewer {
    top: 0 !important;
    z-index: 1160;
}

.attachment-viewer .modal-dialog {
    width: auto;
    max-width: 1100px;
    margin: 20px auto;
    padding: 0 16px;
}

.attachment-viewer .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background-color: #111c1d;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.attachment-viewer__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 18px;
    background-color: #16302f;
    color: #fff;
}

.attachment-viewer__title {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.attachment-viewer__name {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-viewer__meta {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
}

.attachment-viewer__button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.attachment-viewer__button:hover,
.attachment-viewer__button:focus {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
}

.attachment-viewer__button:focus {
    outline: none;
}

.attachment-viewer__button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.attachment-viewer__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}

.attachment-viewer__media--image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
}

.attachment-viewer__media--pdf {
    display: block;
    width: 100%;
    height: calc(100vh - 120px);
    border: 0;
    background-color: #fff;
}

@media (max-width: 575.98px) {
    .attachment-viewer .modal-dialog {
        margin: 8px auto;
        padding: 0 8px;
    }

    .attachment-viewer__button-label {
        display: none;
    }

    .attachment-viewer__media--image {
        max-height: calc(100vh - 90px);
    }

    .attachment-viewer__media--pdf {
        height: calc(100vh - 90px);
    }
}

/* Wide screens: the activity beside the record */
@media (min-width: 1100px) {
    .facility-workspace {
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: 22px;
    }
}

/* Phones: each history row stacks -- the time over what happened, the
   status change under it */
@media (max-width: 767.98px) {
    .facility-page {
        --facility-gutter: 14px;
    }

    .facility-hero__title {
        font-size: 1.7rem;
    }

    .phase-progress {
        gap: 6px;
    }

    .phase-progress__label {
        font-size: 0.62rem;
        letter-spacing: 0.03em;
    }

    .phase-progress__label .fa {
        display: none;
    }

    .composer-move {
        flex: 1 1 100%;
    }

    .composer-move__select {
        flex: 1 1 auto;
    }

    .entry {
        grid-template-columns: 10px minmax(0, 1fr);
        column-gap: 8px;
        padding: 9px 12px 10px;
    }

    .entry__time {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.7rem;
    }

    .entry__marker {
        grid-column: 1;
        grid-row: 2;
    }

    .entry__main {
        grid-column: 2;
        grid-row: 2;
    }

    .entry__change {
        grid-column: 2;
        grid-row: 3;
        margin-top: 6px;
    }

    .entry--nested .entry__time {
        display: none;
    }

    .attachment__name {
        max-width: 160px;
    }

    .chat-panel-inner {
        height: 400px;
    }
}

/* The address map's tiles, dimmed and inverted to a dark map */
:where(html[data-theme="dark"]) .record-address__map .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
}

/* The record's Website Agreement, for admins: where the agreement the
   welcome email links to stands (installer/js/facility-signature.js).
   Signed is the Complete green; one that wasn't opened or couldn't be
   checked is faint. */
.agreement-state--signed {
    color: var(--in-complete-text);
    font-weight: 600;
}

.agreement-state--not_opened,
.agreement-state--unknown {
    color: var(--in-text-faint);
}