/* ============================================================================
   HotelTRS chat

   Three <style> blocks (MessageBubble, MessageHeader, SystemMessageBadge) plus
   the colour decisions that were being made in C# and emitted as inline style
   strings.

   #003665 appeared fourteen times across this folder - a navy from before the
   rebrand, and by the end the only place in the application still using it. It
   was inline in most of those, which is why no stylesheet-based check ever saw
   it and why the header hover rule needed an !important to paint over it.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   BUBBLES
   ---------------------------------------------------------------------------- */

/* Distinct from the surface so an incoming message reads as an object on the
   page rather than as page background. */
.trs-chat-bubble-received {
    background-color: var(--trs-surface-sunken);
    color: var(--trs-text);
}

/* ----------------------------------------------------------------------------
   REPLY PREVIEW

   A message that quotes another shows a preview strip. Which colours it takes
   depends on two booleans - whose bubble this is, and whether the quoted
   message was yours - so there are four cases. They used to be four ternary
   chains building inline style strings in the markup:

       replyBorder, replyBg, replyNameColor, replyNameClass,
       replyTextClass, replyTextColor, borderStyle

   ...seven variables, each with its own nested conditional. The component now
   picks one class name and the four cases live here, where they can be read
   side by side.
   ---------------------------------------------------------------------------- */

.trs-chat-reply {
    font-size: 0.8em;
    cursor: pointer;
    border-left: 4px solid;
}

.trs-chat-reply-name,
.trs-chat-reply-text {
    font-size: 0.7em;
}

.trs-chat-reply-text {
    max-width: 15em;
}

/* 1. Your bubble, quoting yourself. Sits on the primary fill, so it needs a
      full border to separate it from a background of the same colour. */
.trs-chat-reply-own-self {
    border: 1px solid var(--trs-on-primary);
    border-left: 4px solid var(--trs-on-primary);
    background-color: var(--trs-fill-hover);
}

.trs-chat-reply-own-self .trs-chat-reply-name,
.trs-chat-reply-own-self .trs-chat-reply-text {
    color: var(--trs-on-primary);
}

/* 2. Your bubble, quoting someone else. Light strip on the primary fill. */
.trs-chat-reply-own-other {
    border-left-color: var(--trs-on-primary);
    background-color: var(--trs-surface);
}

.trs-chat-reply-own-other .trs-chat-reply-name,
.trs-chat-reply-own-other .trs-chat-reply-text {
    color: var(--trs-text-primary);
}

/* 3. Their bubble, quoting you. Tinted so you can see you were addressed. */
.trs-chat-reply-their-me {
    border-left-color: var(--trs-fill);
    background-color: var(--trs-success-bg);
}

.trs-chat-reply-their-me .trs-chat-reply-name,
.trs-chat-reply-their-me .trs-chat-reply-text {
    color: var(--trs-text-primary);
}

/* 4. Their bubble, quoting someone else. The quietest of the four - it is
      context, not a message to you. */
.trs-chat-reply-their-other {
    border-left-color: var(--trs-border-strong);
    background-color: var(--trs-surface);
}

.trs-chat-reply-their-other .trs-chat-reply-name,
.trs-chat-reply-their-other .trs-chat-reply-text {
    color: var(--trs-text-secondary);
}

/* ----------------------------------------------------------------------------
   HOVER ACTIONS

   The action bar sits beside the bubble and appears on hover. It is
   deliberately outside the bubble: inside, it covered message text.
   ---------------------------------------------------------------------------- */

.message-bubble-container .message-actions-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.15em;
    align-items: center;
    background: var(--trs-surface);
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-sm);
    padding: 0.15em 0.35em;
    box-shadow: var(--trs-elevation-2);
    opacity: 0;
    transition: opacity var(--trs-motion-fast) var(--trs-ease);
    z-index: 10;
}

.message-actions-bar.actions-right {
    left: calc(100% + 0.3em);
}

.message-actions-bar.actions-left {
    right: calc(100% + 0.3em);
}

.message-bubble-container:hover .message-actions-bar {
    opacity: 1;
}

/* Hover is not the only way to reach these: keyboard users tab into them, and
   an action bar at opacity 0 is an invisible focus target. */
.message-bubble-container .message-actions-bar:focus-within {
    opacity: 1;
}

.message-action-btn {
    border: none;
    background: none;
    padding: 0.25em 0.45em;
    line-height: 1;
    color: var(--trs-text-primary);
    cursor: pointer;
    border-radius: 0.3em;
    display: flex;
    align-items: center;
}

.message-action-btn:hover {
    background-color: var(--trs-success-bg);
    color: var(--trs-fill-hover);
}

/* ----------------------------------------------------------------------------
   CHEVRON MENU
   ---------------------------------------------------------------------------- */

.message-chevron-container {
    position: absolute;
    top: 0.15em;
    right: 0.25em;
    opacity: 0.4;
    transition: opacity var(--trs-motion-fast) var(--trs-ease);
    z-index: 11;
}

.message-bubble-container:hover .message-chevron-container,
.message-chevron-container:focus-within,
.message-bubble-container .message-chevron-container.chevron-menu-open {
    opacity: 1;
}

/* While its menu is open it has to clear the chevrons of messages below. */
.message-chevron-container.chevron-menu-open {
    z-index: 100;
}

.message-chevron-btn {
    border: none;
    background: rgba(0, 0, 0, 0.12);
    padding: 0.25em 0.4em;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    min-height: 1.5em;
}

.message-chevron-btn:hover {
    background: rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .message-bubble-container .message-actions-bar,
    .message-chevron-container {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   PRESENCE AND SYSTEM MESSAGES
   ---------------------------------------------------------------------------- */

.presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.presence-dot.online {
    background-color: var(--trs-success);
}

.system-message-badge {
    font-size: var(--trs-text-xs);
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    user-select: none;
}

.badge-member-addition {
    background-color: var(--trs-success-bg);
    color: var(--trs-success);
    border: 1px solid var(--trs-success);
}

.badge-member-removal {
    background-color: var(--trs-danger-bg);
    color: var(--trs-danger);
    border: 1px solid var(--trs-danger);
}

/* ----------------------------------------------------------------------------
   AVATAR

   The sender thumbnail's background-image is genuinely per-message, so it stays
   inline; its box does not.
   ---------------------------------------------------------------------------- */

.trs-chat-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.7rem;
    background-size: cover;
    background-position: center;
}

.trs-chat-avatar-spacer {
    width: 32px;
    min-width: 32px;
}

/* ----------------------------------------------------------------------------
   BUBBLE METADATA
   ---------------------------------------------------------------------------- */

.trs-chat-bubble {
    max-width: 65%;
    position: relative;
}

/* Room for the chevron button in the top-right corner. */
.trs-chat-bubble-live {
    padding-right: 2.5em;
}

.trs-chat-deleted {
    font-size: 0.9em;
}

.trs-chat-timestamp {
    font-size: 0.7rem;
}

.trs-chat-seen {
    font-size: 0.65rem;
}

.trs-chat-seen-link {
    cursor: pointer;
    text-decoration: underline;
}

.trs-chat-icon-sm {
    font-size: 0.75rem;
}

.trs-chat-icon-xs {
    font-size: 0.6rem;
}

/* ----------------------------------------------------------------------------
   COMPOSER

   The reply bar above the input, and the upload spinner strip.
   ---------------------------------------------------------------------------- */

.trs-chat-reply-bar {
    background-color: var(--trs-success-bg);
    border-left: 3px solid var(--trs-fill);
}

.trs-chat-reply-bar-icon {
    font-size: var(--trs-text-sm);
    color: var(--trs-text-primary);
}

.trs-chat-upload-bar {
    background-color: var(--trs-success-bg);
}

.trs-chat-file-icon {
    font-size: var(--trs-text-lg);
    color: var(--trs-text-secondary);
}

.trs-chat-label-sm {
    font-size: var(--trs-text-xs);
}

/* ----------------------------------------------------------------------------
   DATE DIVIDER
   ---------------------------------------------------------------------------- */

.trs-chat-divider-line {
    border-bottom: 1px solid var(--trs-border);
}

.trs-chat-divider-label {
    white-space: nowrap;
    font-size: var(--trs-text-xs);
}

/* ----------------------------------------------------------------------------
   REACTIONS

   On your own bubble the reaction chips sit on the primary fill, so they invert
   to a light pill with dark text. That inversion has to beat Blazorise's
   .btn-light, which is (0,1,0) from a <style> inside <body> - later in document
   order, so it wins any tie. Two classes make this (0,2,0).
   ---------------------------------------------------------------------------- */

.trs-chat-reaction {
    font-size: var(--trs-text-xs);
    padding: 1px 6px;
    line-height: 1.4;
}

.trs-chat-reaction.trs-chat-reaction-own {
    background-color: var(--trs-on-primary);
    border-color: var(--trs-on-primary);
    color: var(--trs-fill-hover);
}

/* ----------------------------------------------------------------------------
   OVERFLOW MENU TRIGGER
   ---------------------------------------------------------------------------- */

.trs-chat-menu-icon {
    color: var(--trs-text-primary);
}

/* ----------------------------------------------------------------------------
   CONVERSATION LIST AVATAR

   A direct conversation gets a presence ring. It was two hex literals built
   into an inline style string in the code-behind.
   ---------------------------------------------------------------------------- */

.trs-chat-conv-avatar {
    width: 40px;
    height: 40px;
    font-size: var(--trs-text-md);
    background-size: cover;
    background-position: center;
}

.trs-chat-presence-online {
    border: 0.25em solid var(--trs-success);
}

.trs-chat-presence-offline {
    border: 0.25em solid var(--trs-danger);
}

/* Neutral strip behind a queued attachment - not a status, just a container. */
.trs-chat-attachment-bar {
    background-color: var(--trs-surface-sunken);
}

/* ----------------------------------------------------------------------------
   GROUP MEMBERS

   ManageGroupMembersModal. Its .member-presence-dot.online / .offline pair is
   the same idea as .presence-dot above under a different name; kept separate
   because the two render at different sizes in different places and merging
   them would mean touching markup in both for no gain.
   ---------------------------------------------------------------------------- */

.member-list-holder {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-sm);
    background: var(--trs-surface);
    box-shadow: var(--trs-elevation-1);
}

.member-row {
    border-bottom: 1px solid var(--trs-border);
    transition: background-color var(--trs-motion-fast) var(--trs-ease);
}

.member-row:last-child {
    border-bottom: none;
}

.member-row:hover {
    background-color: var(--trs-surface-sunken);
}

.member-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--trs-fill);
    color: var(--trs-on-primary);
    font-size: 0.7rem;
    font-weight: var(--trs-weight-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.member-presence-dot.online {
    background-color: var(--trs-success);
}

.member-presence-dot.offline {
    background-color: var(--trs-danger);
}

@media (prefers-reduced-motion: reduce) {
    .member-row {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   SEEN BY
   ---------------------------------------------------------------------------- */

.seen-by-list {
    max-height: 400px;
    overflow-y: auto;
}

.seen-by-row {
    border-bottom: 1px solid var(--trs-border);
}

.seen-by-row:last-child {
    border-bottom: none;
}