/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

body, html {
    overflow-x: clip;
}

[data-builder-mode] .custom-animation-on-scroll.slide-up,
.custom-animation-on-scroll.slide-up.active {
   opacity: 1;
   transform: translate(0);
}

[data-builder-mode] .custom-animation-on-scroll.slide-up,
.custom-animation-on-scroll.slide-down.active {
   opacity: 1;
   transform: translate(0);
}

[data-builder-mode] .custom-animation-on-scroll.slide-from-left,
.custom-animation-on-scroll.slide-from-left.active {
   opacity: 1;
   transform: translate(0);
}

[data-builder-mode] .custom-animation-on-scroll.slide-from-right,
.custom-animation-on-scroll.slide-from-right.active {
   opacity: 1;
   transform: translate(0);
}

/* Delay classes for staggered animations */
.custom-animation-on-scroll.delay-s.active {
  transition-delay: 0.6s;
}

.custom-animation-on-scroll.delay-m.active {
  transition-delay: 1.2s;
}

.custom-animation-on-scroll.delay-l.active {
  transition-delay: 1.8s;
}

/* ======================================================
   AYRES PUNCHARD SECURE MESSAGING UI
   Uses existing ACSS variables.
   ====================================================== */


:root {
    --ap-message-space-s: var(--space-s);
    --ap-message-space-xs: var(--space-xs);
}

/* ---------- Shared layout ---------- */

.ap-advisor-messages_style,
.ap-advisor-conversation-list-shell,
.ap-advisor-conversation-list,
.ap-advisor-conversation,
.ap-advisor-message-feed_style,
#ap-message-feed,
.ap-message-conversation {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ap-advisor-conversation,
.ap-message-conversation {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ap-advisor-conversation {
    gap: 1rem;
}

.ap-message-conversation {
    padding: var(--ap-message-space-s);
    border-radius: var(--radius-l);
    background: var(--white);
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral) 50%, transparent);
}


/* ---------- Conversation information panel ---------- */

.ap-message-team-panel {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ap-message-space-xs);
    width: 100%;
    margin-bottom: var(--ap-message-space-xs);
    padding: var(--ap-message-space-s);
    border: 0.1em solid var(--accent-medium);
    border-radius: var(--radius-l);
    background: color-mix(in oklch, var(--accent-medium) 10%, var(--white));
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral) 50%, transparent);
    box-sizing: border-box;
    overflow: visible;
}

.ap-message-team-panel_header {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--ap-message-space-xs);
    width: 100%;
    min-width: 0;
    padding-bottom: var(--ap-message-space-xs);
    border-bottom: 0.1em solid color-mix(in oklch, var(--accent-medium) 42%, transparent);
    box-sizing: border-box;
}

/*
 * Odd participant-group counts (1, 3 or 5): the conversation title uses
 * the left 50% of the first desktop row and the first participant group
 * occupies the right 50%. The remaining groups then finish in complete
 * two-column rows. Even counts keep the title full width.
 */
.ap-message-team-panel--odd .ap-message-team-panel_header {
    grid-column: 1;
}

.ap-message-team-panel_heading {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.ap-message-team-panel_eyebrow {
    font-size: 0.76em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--secondary-dark);
    opacity: 0.8;
}

.ap-message-team-panel_title {
    display: block;
    min-width: 0;
    font-size: 1.22em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--secondary-ultra-dark);
    overflow-wrap: anywhere;
}


.ap-message-team-panel_grid {
    display: contents;
}

.ap-message-team-group {
    --ap-team-accent: var(--accent-medium);
    --ap-team-tint: color-mix(in oklch, var(--accent-medium) 8%, var(--white));

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 0;
    padding: var(--ap-message-space-xs);
    border: 0.1em solid color-mix(in oklch, var(--ap-team-accent) 30%, transparent);
    border-inline-start: 0.28rem solid var(--ap-team-accent);
    border-radius: var(--radius-l);
    background: var(--ap-team-tint);
    line-height: 1.35;
    box-sizing: border-box;
}

.ap-message-team-group--advisor {
    --ap-team-accent: var(--primary);
    --ap-team-tint: color-mix(in oklch, var(--primary) 8%, var(--white));
}

.ap-message-team-group--client-care {
    --ap-team-accent: var(--secondary-dark);
    --ap-team-tint: color-mix(in oklch, var(--secondary-dark) 7%, var(--white));
}

.ap-message-team-group--trustees {
    --ap-team-accent: var(--info);
    --ap-team-tint: color-mix(in oklch, var(--info) 8%, var(--white));
}

.ap-message-team-group--household {
    --ap-team-accent: var(--secondary);
    --ap-team-tint: color-mix(in oklch, var(--secondary-light) 34%, var(--white));
}

.ap-message-team-group--lpa {
    --ap-team-accent: var(--warning-dark);
    --ap-team-tint: color-mix(in oklch, var(--warning-light) 42%, var(--white));
}

.ap-message-team-label {
    display: block;
    width: 100%;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.015em;
    color: var(--secondary-ultra-dark);
}

.ap-message-team-names {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
    width: 100%;
}

.ap-message-team-separator {
    display: none;
}

.ap-message-team-person,
.ap-message-team-static-person {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.ap-message-team-person_name,
.ap-message-team-static-person {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.3rem 0.52rem 0.3rem 0.34rem;
    border: 0.1em solid color-mix(in oklch, var(--ap-team-accent) 28%, transparent);
    border-radius: var(--radius-l);
    background: color-mix(in oklch, var(--white) 74%, transparent);
    color: var(--secondary-ultra-dark);
    font: inherit;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    box-sizing: border-box;
    transition:
        background-color 0.6s ease,
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        color 0.6s ease,
        opacity 0.6s ease,
        transform 0.6s ease;
}

button.ap-message-team-person_name {
    appearance: none;
    -webkit-appearance: none;
    cursor: help;
}

.ap-message-team-person_name:hover,
.ap-message-team-person_name:focus-visible {
    border-color: var(--ap-team-accent);
    background: color-mix(in oklch, var(--ap-team-accent) 12%, var(--white));
    color: var(--secondary-ultra-dark);
    outline: none;
    transform: translateY(-1px);
}

.ap-message-team-chip_avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 100%;
    overflow: hidden;
}

.ap-message-team-chip_avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 100%;
    object-fit: cover;
}

.ap-message-team-chip_name {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ap-message-team-popup {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: stretch;
    gap: 0.65rem;
    width: max-content;
    min-width: min(17rem, calc(100vw - 1rem));
    max-width: min(22rem, calc(100vw - 1rem));
    padding: 0.65rem;
    box-sizing: border-box;
    border: 0.1em solid color-mix(in oklch, var(--white) 28%, transparent);
    border-radius: var(--radius-l);
    color: var(--white);
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral-ultra-dark) 35%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    --ap-team-popup-shift-x: 0px;
    transform: translate(var(--ap-team-popup-shift-x), -4px);
    transition:
        opacity 0.6s ease,
        visibility 0.6s ease,
        transform 0.6s ease,
        background-color 0.6s ease;
}

.ap-message-team-popup--advisor {
    background: color-mix(in oklch, var(--primary) 50%, transparent);
}

.ap-message-team-popup--client-care {
    background: color-mix(in oklch, var(--secondary-dark) 50%, transparent);
}

.ap-message-team-person:hover .ap-message-team-popup,
.ap-message-team-person:focus-within .ap-message-team-popup,
.ap-message-team-person.is-open .ap-message-team-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(var(--ap-team-popup-shift-x), 0);
}

.ap-message-team-popup_avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    align-self: center;
}

.ap-message-team-popup_avatar-image {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    border: 0.1em solid color-mix(in oklch, var(--white) 45%, transparent);
    border-radius: 100%;
    object-fit: cover;
    box-sizing: border-box;
}

.ap-message-team-popup_details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.22rem;
    min-width: 0;
    max-width: 100%;
    color: var(--white);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.ap-message-team-popup_details--single {
    justify-content: center;
}

.ap-message-team-popup_qualifications {
    display: block;
    color: inherit;
    font-size: 0.82em;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ap-message-team-popup_bio {
    display: block;
    color: inherit;
    font-size: 0.82em;
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ---------- Message-history loading ---------- */

.ap-message-history-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.25rem;
    margin-bottom: var(--ap-message-space-xs);
    text-align: center;
    box-sizing: border-box;
}

.ap-message-history-control .ap-message-load-previous {
    transition:
        background-color 0.6s ease,
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        color 0.6s ease,
        opacity 0.6s ease,
        transform 0.6s ease;
}

.ap-message-history-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--secondary-dark);
    font-size: 0.85em;
    font-style: italic;
    line-height: 1.3;
    opacity: 0.85;
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.ap-message-history-loading[hidden] {
    display: none;
}

.ap-message-history-loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.ap-message-history-loading-dots span {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    animation: ap-secure-history-loading 1.2s ease-in-out infinite;
}

.ap-message-history-loading-dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.ap-message-history-loading-dots span:nth-child(3) {
    animation-delay: 0.32s;
}

.ap-message-history-complete {
    color: var(--secondary-dark);
    font-size: 0.8em;
    font-style: italic;
    line-height: 1.3;
    opacity: 0.68;
}

.ap-message-list {
    display: flex;
    flex-direction: column;
    gap: var(--ap-message-space-xs);
    width: 100%;
}

@keyframes ap-secure-history-loading {
    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-0.18rem);
    }
}

/* ---------- Message rows / bubbles ---------- */

.ap-message {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ap-message--own {
    justify-content: flex-end;
}

.ap-message--other {
    justify-content: flex-start;
}

.ap-message_bubble {
    width: fit-content;
    min-width: 33%;
    max-width: 66%;
    padding: var(--ap-message-space-xs);
    border: 0.1em solid var(--accent-medium);
    border-radius: var(--radius-l);
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral) 50%, transparent);
    overflow-wrap: anywhere;
    word-break: normal;
    box-sizing: border-box;
    transition:
        background-color 0.6s ease,
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        color 0.6s ease,
        opacity 0.6s ease,
        transform 0.6s ease;
}

/* Active message colours. */

/* Client view: own client messages. */
.ap-message-conversation[data-viewer-type="client"]
.ap-message--active.ap-message--sender-client.ap-message--own .ap-message_bubble {
    background: var(--secondary);
    color: var(--white);
}

/* Client view: linked household client. */
.ap-message-conversation[data-viewer-type="client"]
.ap-message--active.ap-message--sender-client.ap-message--other .ap-message_bubble {
    background: var(--secondary-light);
    color: var(--secondary-dark);
}

/* Client view: adviser / administrator. */
.ap-message-conversation[data-viewer-type="client"]
.ap-message--active.ap-message--sender-advisor .ap-message_bubble,
.ap-message-conversation[data-viewer-type="client"]
.ap-message--active.ap-message--sender-administrator .ap-message_bubble {
    background: var(--primary);
    color: var(--white);
}

/* Client view: admin-support. */
.ap-message-conversation[data-viewer-type="client"]
.ap-message--active.ap-message--sender-admin-support .ap-message_bubble {
    background: var(--secondary-dark);
    color: var(--white);
}

/* Staff view: the current adviser/admin-support/admin user's own replies. */
.ap-message-conversation[data-viewer-type="staff"]
.ap-message--active.ap-message--own .ap-message_bubble {
    background: var(--secondary);
    color: var(--white);
}

/* Staff view: primary / only client. */
.ap-message-conversation[data-viewer-type="staff"]
.ap-message--active.ap-message--sender-client.ap-message--client-primary .ap-message_bubble {
    background: var(--secondary-light);
    color: var(--secondary-ultra-dark);
}

/* Staff view: second linked household client. */
.ap-message-conversation[data-viewer-type="staff"]
.ap-message--active.ap-message--sender-client.ap-message--client-secondary .ap-message_bubble {
    background: var(--secondary-ultra-light);
    color: var(--secondary-ultra-dark);
}

/* Staff view: adviser / administrator messages not sent by the current viewer. */
.ap-message-conversation[data-viewer-type="staff"]
.ap-message--active.ap-message--sender-advisor.ap-message--other .ap-message_bubble,
.ap-message-conversation[data-viewer-type="staff"]
.ap-message--active.ap-message--sender-administrator.ap-message--other .ap-message_bubble {
    background: var(--primary);
    color: var(--white);
}

/* Staff view: another admin-support user's message. */
.ap-message-conversation[data-viewer-type="staff"]
.ap-message--active.ap-message--sender-admin-support.ap-message--other .ap-message_bubble {
    background: var(--secondary-dark);
    color: var(--white);
}

/* Historic pre-link messages override sender colours. */
.ap-message--unlinked.ap-message--own .ap-message_bubble {
    background: var(--neutral-dark);
    color: var(--white);
}

.ap-message--unlinked.ap-message--other .ap-message_bubble {
    background: var(--neutral-ultra-dark);
    color: var(--white);
}

.ap-message_sender,
.ap-message_content,
.ap-message_meta,
.ap-message_time {
    color: inherit;
}

.ap-message_sender-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.ap-message_sender {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9em;
    font-weight: 700;
    line-height: 1.2;
}

.ap-message_tags {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-left: auto;
}

.ap-message_tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15em 0.55em;
    border-radius: var(--radius-l);
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.ap-message_tag--advisor {
    background: var(--accent-medium);
    color: var(--primary-ultra-dark);
}

.ap-message_tag--admin-support {
    background: var(--accent-light);
    color: var(--primary-ultra-dark);
}

.ap-message_tag--client,
.ap-message_tag--household {
    background: var(--secondary);
    color: var(--white);
}

.ap-message_tag--history {
    background: color-mix(in oklch, var(--white) 18%, transparent);
    color: var(--white);
}

.ap-message_content {
    font: inherit;
    font-style: italic;
    line-height: 1.45;
}

/*
 * Keep date/time visually absent until the message is interacted with.
 * Hover reveals it on pointer devices; focus also reveals it for keyboard
 * users and lets a tap reveal it on touch devices.
 */
.ap-message_meta {
    display: flex;
    justify-content: flex-end;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.2rem);
    transition:
        max-height 0.6s ease,
        margin-top 0.6s ease,
        opacity 0.6s ease,
        transform 0.6s ease;
}

.ap-message_bubble:hover .ap-message_meta,
.ap-message_bubble:focus .ap-message_meta,
.ap-message_bubble:focus-within .ap-message_meta {
    max-height: 2rem;
    margin-top: 0.35rem;
    opacity: 0.82;
    transform: translateY(0);
}

.ap-message_time {
    font-size: 0.75em;
    font-style: italic;
    line-height: 1.2;
}

.ap-message-feed_empty,
.ap-advisor-conversation-list_empty {
    width: 100%;
    padding: var(--ap-message-space-s);
    border: 0.1em solid var(--accent-medium);
    border-radius: var(--radius-l);
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral) 50%, transparent);
    box-sizing: border-box;
}

.ap-message-feed_empty p,
.ap-advisor-conversation-list_empty p {
    margin: 0;
}

/* Genuine new-message entrance only. */
.ap-message--new .ap-message_bubble {
    animation: ap-secure-message-in 0.6s ease both;
}

.ap-message--history-loaded .ap-message_bubble {
    animation: ap-secure-history-message-in 0.6s ease both;
}

@keyframes ap-secure-message-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ap-secure-history-message-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Staff conversation inbox ---------- */

.ap-advisor-conversation-list {
    display: flex;
    flex-direction: column;
    gap: var(--ap-message-space-xs);
}

.ap-advisor-conversation_card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: var(--ap-message-space-s);
    border: 0.25em solid transparent;
    border-radius: var(--radius-l);
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral) 50%, transparent);
    text-decoration: none;
    box-sizing: border-box;
    transition:
        background-color 0.6s ease,
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        color 0.6s ease,
        opacity 0.6s ease,
        transform 0.6s ease;
}

.ap-advisor-conversation_card--unread {
    background: var(--success-light);
    color: var(--success-ultra-dark);
}

.ap-advisor-conversation_card--read {
    background: var(--secondary-light);
    color: var(--secondary-dark);
}

.ap-advisor-conversation_card,
.ap-advisor-conversation_card * {
    color: inherit;
}

.ap-advisor-conversation_card:hover,
.ap-advisor-conversation_card:focus-visible {
    border-color: var(--accent-dark);
    transform: translateY(-1px);
}

.ap-advisor-conversation_card:focus-visible {
    outline: none;
}

.ap-advisor-conversation_card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
    align-items: start;
}

.ap-advisor-conversation_name {
    min-width: 0;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.25;
}

.ap-advisor-conversation_activity {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    white-space: nowrap;
}

.ap-advisor-conversation_time {
    font-size: 0.78em;
    font-style: italic;
    line-height: 1.2;
    opacity: 0.82;
}

.ap-advisor-conversation_unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    min-height: 1.8em;
    padding: 0.2em 0.55em;
    border-radius: var(--radius-l);
    background: var(--success);
    color: var(--white) !important;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
}

.ap-advisor-conversation_latest {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0.1em solid color-mix(in oklch, currentColor 14%, transparent);
    border-radius: var(--radius-l);
    background: color-mix(in oklch, var(--white) 28%, transparent);
}

.ap-advisor-conversation_preview-label {
    width: 100%;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0.84;
}

.ap-advisor-conversation_preview {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.9em;
    line-height: 1.45;
    opacity: 0.92;
}

.ap-advisor-conversation_preview-sender {
    font-weight: 700;
}

.ap-advisor-conversation_staff {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    align-self: flex-end;
    gap: 0.2rem;
    width: fit-content;
    min-width: 20%;
    max-width: 100%;
    margin-left: auto;
    text-align: left;
    font-size: 0.8em;
    line-height: 1.35;
    opacity: 0.84;
}

.ap-advisor-conversation_staff > span {
    display: block;
    width: 100%;
}

/* ---------- Open staff conversation ---------- */

.ap-advisor-conversation_header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
}


/* ---------- Compose areas ---------- */

.ap-advisor-message-compose,
#brxe-ycepoh {
    width: 100%;
    padding: var(--ap-message-space-s);
    border: 0.1em solid var(--accent-medium);
    border-radius: var(--radius-l);
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral) 50%, transparent);
    box-sizing: border-box;
}

.ap-advisor-message-compose,
#brxe-ycepoh {
    background: var(--accent-light);
}

.ap-advisor-message-form {
    display: grid;
    gap: 0.6rem;
    width: 100%;
}

.ap-advisor-message-form_field,
.ap-advisor-message-form_actions {
    width: 100%;
}

.ap-advisor-message-form_actions {
    display: flex;
    justify-content: flex-end;
}

.ap-advisor-message-input,
#brxe-ycepoh textarea {
    width: 100%;
    min-height: 7rem;
    padding: var(--ap-message-space-xs);
    border: 0.1em solid var(--accent-medium);
    border-radius: var(--radius-l);
    background: var(--accent-ultra-light);
    font: inherit;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
    transition:
        background-color 0.6s ease,
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        color 0.6s ease,
        opacity 0.6s ease,
        transform 0.6s ease;
}

.ap-advisor-message-input {
    color: var(--secondary-ultra-dark);
}

#brxe-ycepoh textarea {
    color: var(--secondary-ultra-dark);
}

.ap-advisor-message-input::placeholder {
    color: var(--secondary-dark-trans-50);
    opacity: 1;
}

.ap-advisor-message-input:focus,
#brxe-ycepoh textarea:focus {
    border-color: var(--accent-dark);
    outline: none;
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral) 50%, transparent);
}

.ap-advisor-message-submit,
#brxe-ycepoh button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65em;
    width: 100%;
    padding: 0.7em 1em;
    border: 0.1em solid var(--success);
    border-radius: var(--radius-l);
    background: var(--success);
    color: var(--white);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 1.5px 1.5px 6px 1.5px color-mix(in oklch, var(--neutral) 50%, transparent);
    transition:
        background-color 0.6s ease,
        border-color 0.6s ease,
        box-shadow 0.6s ease,
        color 0.6s ease,
        opacity 0.6s ease,
        transform 0.6s ease;
}

.ap-advisor-message-submit *,
#brxe-ycepoh button[type="submit"] * {
    color: inherit;
}

.ap-advisor-message-submit:hover,
.ap-advisor-message-submit:focus-visible,
#brxe-ycepoh button[type="submit"]:hover,
#brxe-ycepoh button[type="submit"]:focus-visible {
    background: var(--success-light);
    border-color: var(--success);
    color: var(--success);
    transform: translateY(-1px);
    outline: none;
}

.ap-message-submit_icon {
    flex: 0 0 auto;
    color: currentColor;
}

.ap-advisor-message-submit:disabled,
#brxe-ycepoh button[type="submit"]:disabled {
    cursor: wait;
    opacity: 0.55;
    transform: none;
}

.ap-advisor-message-status {
    min-height: 1.2em;
    border-radius: var(--radius-l);
    font-size: 0.85em;
    font-style: italic;
    line-height: 1.3;
}

.ap-advisor-message-status:empty {
    min-height: 0;
}

.ap-advisor-message-status[data-status="success"] {
    color: var(--success-ultra-dark);
}

.ap-advisor-message-status,
#brxe-ycepoh .message.success {
    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        max-height 0.6s ease;
}

.ap-message-status--dismissing {
    opacity: 0 !important;
    transform: translateY(-0.2rem);
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    :root {
        --ap-message-space-s: var(--space-xs);
        --ap-message-space-xs: calc(var(--space-xs) / 2);
    }

    /* All text within the actual conversation feed is 20% smaller. */
    .ap-message-conversation,
    .ap-message-feed_empty {
        font-size: 0.8em;
    }

    .ap-message_bubble {
        max-width: 80%;
    }

    .ap-message-team-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-message-team-panel_header,
    .ap-message-team-panel--odd .ap-message-team-panel_header {
        grid-column: 1;
    }

    .ap-message-team-person_name {
        cursor: pointer;
    }

    .ap-message-team-popup {
        min-width: min(15rem, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
    }

    .ap-advisor-conversation_card-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-advisor-conversation_activity {
        width: 100%;
        justify-content: space-between;
    }

    .ap-advisor-conversation_header {
        align-items: flex-start;
        flex-direction: column;
    }

    .ap-advisor-message-form_actions,
    #brxe-ycepoh .submit-button-wrapper {
        justify-content: stretch;
    }

}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .ap-advisor-conversation_card,
    .ap-message_bubble,
    .ap-message_meta,
    .ap-message-team-person_name,
    .ap-message-team-popup,
    .ap-advisor-message-input,
    .ap-advisor-message-submit,
    #brxe-ycepoh textarea,
    #brxe-ycepoh button[type="submit"] {
        transition: none;
    }

    .ap-message--new .ap-message_bubble,
    .ap-message--history-loaded .ap-message_bubble,
    .ap-message-history-loading-dots span {
        animation: none;
    }
}


/* ======================================================
   V12 — LPA + TRUST EXTENSIONS
   ====================================================== */

/* ---------- Trust profile popup ---------- */

.ap-message-team-popup--trustee {
    background: color-mix(in oklch, var(--info) 50%, transparent);
}

/* ---------- LPA / Trustee message colours ---------- */

.ap-message-conversation
.ap-message--active.ap-message--sender-lpa .ap-message_bubble {
    background: var(--warning-light);
    color: var(--warning-ultra-dark);
}

.ap-message-conversation
.ap-message--active.ap-message--sender-trustee .ap-message_bubble {
    background: var(--info);
    color: var(--white);
}

.ap-message_tag--lpa {
    background: var(--warning-dark);
    color: var(--white);
}

.ap-message_tag--trustee {
    background: var(--info-dark);
    color: var(--white);
}

/* Ensure LPA / Trustee text and hover-revealed metadata inherit
   the intended bubble colour. */
.ap-message--sender-lpa .ap-message_sender,
.ap-message--sender-lpa .ap-message_content,
.ap-message--sender-lpa .ap-message_meta,
.ap-message--sender-lpa .ap-message_time {
    color: var(--warning-ultra-dark);
}

.ap-message--sender-trustee .ap-message_sender,
.ap-message--sender-trustee .ap-message_content,
.ap-message--sender-trustee .ap-message_meta,
.ap-message--sender-trustee .ap-message_time {
    color: var(--white);
}

/* Own-message tags are intentionally omitted in PHP, but the sender
   colour still identifies the capacity in which the message was sent. */

/* ---------- Unified PHP-rendered compose form ---------- */

.ap-secure-message-compose,
.ap-secure-message-form,
.ap-secure-message-input,
.ap-secure-message-submit {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ap-secure-message-compose {
    background: var(--accent-light);
}

.ap-secure-message-input {
    background: var(--accent-ultra-light);
    color: var(--secondary-ultra-dark);
}

.ap-secure-message-input::placeholder {
    color: var(--secondary-dark-trans-50);
    opacity: 1;
}

/* ---------- Portal / staff shared inbox ---------- */

.ap-secure-conversation-list-shell,
.ap-secure-conversation-list,
.ap-secure-conversation_card,
.ap-secure-open-conversation,
.ap-secure-message-feed_style {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ap-secure-conversation_participants {
    min-width: 20%;
    margin-left: auto;
    text-align: left;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .ap-message-team-panel_grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ap-message-team-group {
        min-width: 0;
    }

    .ap-message-team-person_name,
    .ap-message-team-static-person {
        font-size: 0.88em;
    }

    .ap-message-team-chip_avatar {
        width: 1.6rem;
        height: 1.6rem;
    }

    .ap-secure-conversation_participants {
        width: fit-content;
        min-width: 0;
        max-width: 100%;
    }
}