/* Nav bar Chat link — override jive.css a:link color #3778c7 */
li#jive-nav-link-chat a,
li#jive-nav-link-chat a:link,
li#jive-nav-link-chat a:visited,
li#jive-nav-link-chat a:active,
li#jive-nav-link-chat .nav-link,
li#jive-nav-link-chat .j-navLabel {
    color: #fff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

li#jive-nav-link-chat a:hover,
li#jive-nav-link-chat a:hover .nav-link,
li#jive-nav-link-chat a:hover .j-navLabel {
    color: #fff !important;
    opacity: 0.85 !important;
}

li#jive-nav-link-chat .jive-icon-glyph {
    color: #fff !important;
}

/* Navbar unread badge — LinkedIn-style overlay counter */
li#jive-nav-link-chat {
    position: relative !important;
}

/* The badge is absolutely positioned, so it needs its host to be the containing
   block. chat-nav-badge.js tags whatever element it hangs the badge on with this
   class — the stock Jive <li>, our injected link, or the Mega Menu item's
   a.mm-main-action. Without it the badge falls back to whichever ancestor the
   host theme happens to have positioned, which put it in the wrong place on
   Mega Menu navbars. */
.chat-nav-badge-host {
    position: relative !important;
}

.chat-nav-unread-badge {
    position: absolute;
    top: 2px;
    right: -4px;
    background: #cc1016;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
}

.chat-layout {
    display: flex;
    height: calc(100vh - 120px);
    border: 1px solid #ddd;
    background: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.chat-sidebar {
    width: 320px;
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
}

.chat-sidebar-header {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    display: flex;
    gap: 8px;
}

.chat-sidebar-header input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#chat-conversation-list {
    flex: 1;
    overflow-y: auto;
}

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Flex items default to min-width:auto which equals their content's intrinsic
       size. An unbroken long word in a message bubble would then refuse to shrink
       and force this column to grow past the viewport — overriding to 0 lets
       overflow-x:hidden on #chat-messages actually clip. */
    min-width: 0;
}

#chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}

#chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    min-width: 0;
    /* Make the scroll container the offset parent of its own rows. The jump maths
       no longer depends on this (it uses rect deltas), but anything that reaches
       for offsetTop/.position() on a message should resolve against the container
       it scrolls in, not whichever ancestor happens to be positioned. */
    position: relative;
}

#chat-compose {
    padding: 12px;
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#chat-compose textarea {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    min-height: 40px;
}

.chat-security-banner {
    background: #fff3cd;
    color: #856404;
    padding: 8px 16px;
    border-bottom: 1px solid #ffc107;
    font-size: 13px;
    text-align: center;
}

/* Conversation list items */
.chat-conv-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-conv-item:hover {
    background: #f5f5f5;
}

.chat-conv-item.active {
    background: #e6eef7;
}

.chat-conv-name {
    font-weight: 600;
    font-size: 14px;
}

.chat-conv-preview {
    color: #666;
    font-size: 12px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.chat-conv-time {
    color: #999;
    font-size: 11px;
}

.chat-unread-badge {
    background: #3778c7;
    color: #fff;
    border-radius: 10px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: bold;
}

/* Message bubbles */
.chat-msg {
    margin-bottom: 12px;
    max-width: 70%;
}

.chat-msg.sent {
    margin-left: auto;
}

.chat-msg-sender {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
}

.chat-msg-body {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    /* `anywhere` is more aggressive than `break-word`: it allows the browser to
       break a single long token (URLs, randomly typed strings, base64 blobs) at
       any character to fit the container, rather than only as a last resort. */
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Newlines survive the round trip to the server but rendered as one line,
       so a multi-line message was indistinguishable from a single-line one.
       pre-wrap keeps them while still wrapping long lines. */
    white-space: pre-wrap;
}

.chat-msg.received .chat-msg-body {
    background: #f0f0f0;
}

.chat-msg.sent .chat-msg-body {
    /* #3778c7 gave white text only 4.49:1, just under the WCAG 2.2 AA
       threshold of 4.5:1. This shade is visually all but identical and
       measures 5.19:1. */
    background: #2f6eb8;
    color: #fff;
}

.chat-msg-time {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}

.chat-msg.sent .chat-msg-time {
    text-align: right;
}

/* Read receipt ticks */
.chat-msg-tick {
    font-size: 12px;
    margin-left: 4px;
}

/* Tick colours are status information, so they have to meet WCAG 2.2 AA (4.5:1)
   against the #fff transcript. The old values did not: #999 measured 2.85:1 and
   the WhatsApp-style #53bdeb only 2.13:1. These are the nearest shades that pass
   while keeping the grey/grey/blue progression legible. The tick also carries a
   title and is paired with distinct glyph counts, so status is never conveyed by
   colour alone (1.4.1). */
.chat-tick-sent {
    color: #6e6e6e; /* 5.10:1 */
}

.chat-tick-delivered {
    color: #6e6e6e; /* 5.10:1 — same grey as sent; the second tick is the signal */
}

.chat-tick-read {
    color: #0f7aa8; /* 4.81:1, still clearly blue against the greys */
}

.chat-typing-indicator {
    color: #666;
    font-style: italic;
    font-size: 12px;
    padding: 4px 16px;
}

/* Empty state */
.chat-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 14px;
}

/* Error message */
.chat-msg-error {
    color: #d32f2f;
    font-size: 12px;
    padding: 4px 16px;
    text-align: center;
}

/* Edited label */
.chat-msg-edited {
    font-size: 10px;
    color: #999;
    font-style: italic;
}

/* Header */
.chat-header-name {
    font-size: 16px;
    font-weight: 600;
}

.chat-header-subtitle {
    font-size: 12px;
    color: #666;
    font-weight: normal;
}

/* New Chat Modal */
.chat-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-modal {
    background: #fff;
    border-radius: 8px;
    width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.chat-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.chat-modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.chat-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
}

.chat-modal-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
}

.chat-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: #666;
}

.chat-tab.active {
    color: #3778c7;
    border-bottom-color: #3778c7;
}

.chat-modal-body {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
}

.chat-modal-body input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.chat-user-results,
.chat-user-results-group {
    max-height: 200px;
    overflow-y: auto;
}

.chat-user-result {
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-user-result:hover {
    background: #f5f5f5;
}

.chat-user-result.selected {
    background: #e6eef7;
}

.chat-user-name {
    font-weight: 500;
    font-size: 14px;
}

.chat-user-username {
    color: #999;
    font-size: 12px;
}

.chat-selected-users {
    margin-bottom: 8px;
}

.chat-selected-users-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
}

.chat-selected-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.chat-selected-user-row:last-child {
    border-bottom: none;
}

.chat-selected-user-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #333;
}

.chat-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #999;
    padding: 0 6px;
}

.chat-chip-remove:hover {
    color: #d33;
}

.chat-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

.chat-create-btn {
    min-width: 100px;
}

/* ==================== Attachments ==================== */

.chat-compose-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-attach-btn {
    font-size: 22px;
    cursor: pointer;
    padding: 6px 8px;
    user-select: none;
    color: #555;
}
.chat-attach-btn:hover { color: #222; }

.chat-emoji-btn {
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    background: none;
    border: none;
    user-select: none;
    color: #555;
}
.chat-emoji-btn:hover { color: #222; }

/* #chat-compose is the positioning context for the floating panel. */
#chat-compose { position: relative; }

.chat-emoji-panel {
    position: absolute;
    left: 12px;
    bottom: 60px;
    z-index: 50;
    width: 300px;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 8px;
}
.chat-emoji-cat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin: 6px 2px 4px;
}
.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.chat-emoji-item {
    font-size: 20px;
    line-height: 1;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 4px 0;
    cursor: pointer;
}
.chat-emoji-item:hover,
.chat-emoji-item:focus { background: #eef2f7; outline: none; }

.chat-attach-preview {
    display: none;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}
.chat-attach-chip {
    display: inline-block;
    background: #e8eef5;
    border-radius: 12px;
    padding: 2px 10px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
}
.chat-attach-chip-size { color: #777; margin-left: 4px; }
.chat-attach-chip-remove { cursor: pointer; margin-left: 6px; color: #c44; font-weight: bold; }

.chat-msg-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.chat-attach-image-link { display: block; cursor: pointer; }
.chat-attach-error { color: #c44; font-size: 12px; font-style: italic; }
.chat-attach-image {
    max-width: 260px;
    max-height: 260px;
    border-radius: 6px;
    display: block;
}
.chat-attach-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.06);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    max-width: 320px;
}
.chat-msg.sent .chat-attach-file { background: rgba(255,255,255,0.2); }
.chat-attach-file-icon { font-size: 20px; }
.chat-attach-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-file-size { color: #777; font-size: 11px; }
.chat-msg.sent .chat-attach-file-size { color: rgba(255,255,255,0.7); }


/* ------------------------------------------------------------------
   Links inside messages, conversation-type indicators, and the shared
   accessibility helpers. Contrast figures below are measured against the
   surface each element actually sits on (WCAG 2.2 AA needs 4.5:1 for text,
   3:1 for a focus indicator).
   ------------------------------------------------------------------ */

/* jive.css styles `a:link` / `a:visited` (specificity 0,0,1,1), which beats a
   bare class selector, so these must match the pseudo-classes too — otherwise
   the theme's link blue wins and the contrast we measured never applies. The
   same trap is handled at the top of this file for the nav link. */
.chat-msg-link,
.chat-msg-link:link,
.chat-msg-link:visited,
.chat-msg-link:active {
    /* 7.02:1 on the #f0f0f0 received bubble. Underlined as well as coloured so
       the link is not identified by colour alone (WCAG 1.4.1). */
    color: #0b4f9e;
    text-decoration: underline;
}

.chat-msg.sent .chat-msg-link,
.chat-msg.sent .chat-msg-link:link,
.chat-msg.sent .chat-msg-link:visited,
.chat-msg.sent .chat-msg-link:active {
    /* On the blue sent bubble the body text is already white; the underline is
       what distinguishes the link. 5.19:1. */
    color: #fff;
    text-decoration: underline;
}

.chat-msg-link:hover,
.chat-msg-link:focus {
    text-decoration-thickness: 2px;
}

/* Visible keyboard focus. currentColor adapts to whichever bubble the link is
   in, so it stays above 3:1 on both. */
.chat-msg-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Conversation rows are keyboard-operable, so they need a focus indicator. */
.chat-conv-item:focus-visible {
    outline: 2px solid #0b4f9e;
    outline-offset: -2px;
}

.chat-conv-type {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    color: #5a5a5a;           /* 6.2:1 on white — decorative, but kept legible */
    vertical-align: -2px;
}

.chat-conv-item.active .chat-conv-type {
    color: inherit;
}

/* Available to assistive tech, removed from the visual layout. */
.chat-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
   "Chat is in limited release" page, shown to signed-in users who are
   not in the trial cohort. Built to WCAG 2.2 AA — see the measured
   contrast notes against each colour.
   ------------------------------------------------------------------ */

.chat-no-access {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

.chat-no-access-panel {
    max-width: 560px;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 32px;
    text-align: center;
}

.chat-no-access-heading {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.3;
    color: #222;                 /* 15.9:1 on white */
}

.chat-no-access-message {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    color: #444;                 /* 9.7:1 on white */
}

.chat-no-access-actions {
    margin: 0;
}

.chat-no-access-cta,
.chat-no-access-cta:link,
.chat-no-access-cta:visited,
.chat-no-access-cta:active {
    display: inline-block;
    background: #2f6eb8;         /* white label on this measures 5.19:1 */
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    /* Comfortably clears the 24x24 minimum target size (WCAG 2.5.8). */
    padding: 12px 24px;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: 4px;
}

.chat-no-access-cta:hover,
.chat-no-access-cta:focus {
    background: #275e9e;
    color: #fff;
    text-decoration: underline;
}

/* Focus must be visible and is measured against the page, not the button. */
.chat-no-access-cta:focus-visible {
    outline: 3px solid #0b4f9e;  /* 8.0:1 on white */
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Build B — people picker with avatars, and group membership management.
   Contrast figures are measured against the surface each element sits
   on; WCAG 2.2 AA needs 4.5:1 for text and 3:1 for focus indicators.
   Buttons styled as <a> would need :link/:visited here too — see the
   note at the top of this file — but these are all real <button>s.
   ------------------------------------------------------------------ */

.chat-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
    background: #e9e9e9;     /* placeholder while the image loads */
}

.chat-user-avatar-sm {
    width: 24px;
    height: 24px;
}

/* Picker rows: avatar, then name over @username. */
.chat-user-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    min-height: 44px;        /* comfortably over the 24x24 minimum (2.5.8) */
    box-sizing: border-box;
}

.chat-user-result:hover {
    background: #f5f5f5;
}

.chat-user-result:focus-visible {
    outline: 2px solid #0b4f9e;   /* 8.0:1 on white */
    outline-offset: -2px;
}

.chat-user-result.selected {
    background: #e6eef7;
}

.chat-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;            /* lets long emails ellipsis rather than overflow */
    flex: 1 1 auto;
}

.chat-user-name {
    font-size: 14px;
    color: #222;             /* 15.9:1 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-user-username {
    font-size: 12px;
    color: #5a5a5a;          /* 6.9:1 on white, 6.3:1 on the hover grey */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selection is shown by a tick as well as the background colour, so it is
   not conveyed by colour alone (WCAG 1.4.1). */
.chat-user-check {
    color: #0b4f9e;
    font-weight: bold;
    opacity: 0;
    flex: 0 0 auto;
}

.chat-user-result.selected .chat-user-check {
    opacity: 1;
}

.chat-selected-user-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- group membership panel ---- */

#chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chat-header-main {
    min-width: 0;
}

.chat-members-btn {
    flex: 0 0 auto;
    background: none;
    border: 1px solid #0b4f9e;
    color: #0b4f9e;          /* 8.0:1 on white */
    border-radius: 4px;
    padding: 6px 12px;
    min-height: 32px;
    font-size: 13px;
    cursor: pointer;
}

.chat-members-btn:hover {
    background: #eef3fa;
}

.chat-members-btn:focus-visible {
    outline: 2px solid #0b4f9e;
    outline-offset: 2px;
}

.chat-members-panel {
    border-bottom: 1px solid #d0d0d0;
    padding: 12px 16px;
    background: #fafafa;
}

.chat-members-label {
    display: block;
    font-size: 12px;
    color: #5a5a5a;
    margin-bottom: 4px;
}

.chat-member-search {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    min-height: 34px;
}

.chat-member-search:focus-visible {
    outline: 2px solid #0b4f9e;
    outline-offset: 1px;
}

.chat-member-results:not(:empty) {
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    margin-top: 4px;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
}

.chat-member-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    min-height: 40px;
    box-sizing: border-box;
}

.chat-member-result:hover {
    background: #f5f5f5;
}

.chat-member-result:focus-visible {
    outline: 2px solid #0b4f9e;
    outline-offset: -2px;
}

.chat-member-noresults {
    padding: 8px 10px;
    font-size: 13px;
    color: #5a5a5a;
}

.chat-members-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.chat-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

/* Search results now stack name over username, so the text column owns the
   flex growth and the name no longer does. */
.chat-member-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.chat-member-secondary {
    font-size: 11px;
    color: #5a5a5a;          /* 6.9:1 on white, 6.3:1 on the hover grey */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-member-name {
    flex: 1 1 auto;
    font-size: 13px;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-member-you {
    color: #5a5a5a;
    font-size: 12px;
}

.chat-member-remove {
    flex: 0 0 auto;
    background: none;
    border: 1px solid #a4262c;
    color: #a4262c;          /* 7.3:1 on white */
    border-radius: 4px;
    padding: 4px 10px;
    min-height: 28px;
    font-size: 12px;
    cursor: pointer;
}

.chat-member-remove:hover:not(:disabled) {
    background: #fdf3f4;
}

.chat-member-remove:focus-visible {
    outline: 2px solid #a4262c;
    outline-offset: 2px;
}

.chat-member-remove:disabled {
    opacity: 0.6;
    cursor: default;
}

.chat-members-status {
    margin-top: 8px;
    font-size: 12px;
    color: #5a5a5a;
    min-height: 16px;        /* reserve the line so the panel doesn't jump */
}

.chat-members-status-error {
    color: #a4262c;
}


/* The attachment chip's remove control is a real <button> for keyboard access,
   so strip the default button chrome and give it a visible focus ring. */
.chat-attach-chip-remove {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: #5a5a5a;          /* 6.9:1 on white */
    font-size: 14px;
    line-height: 1;
}

.chat-attach-chip-remove:focus-visible,
.chat-attach-btn:focus-visible {
    outline: 2px solid #0b4f9e;
    outline-offset: 2px;
    border-radius: 2px;
}

/* The paperclip is a <label> acting as a button. */
.chat-attach-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;        /* clears the 24x24 minimum target (2.5.8) */
}

/* ==================== Per-message interactions ====================
   Reply, react and pin, plus @mentions. All colours below were checked
   against WCAG 2.2 AA (4.5:1 for text, 3:1 for UI boundaries and focus)
   rather than picked by eye — the ratio is noted next to each. */

/* A message is the positioning context for its own actions and reaction
   palette, and needs room on the right so the buttons never sit on the text. */
.chat-msg {
    position: relative;
}

/* --- Per-message action buttons --- */
.chat-msg-actions {
    position: absolute;
    top: 2px;
    right: 4px;
    display: flex;
    gap: 4px;
    /* Hidden from POINTERS until hover, but never from the keyboard: the
       buttons stay in the tab order and :focus-within brings them back into
       view. A hover-only control is a 2.1.1 failure, which is exactly how the
       attachment button failed review earlier in this build. */
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.chat-msg:hover .chat-msg-actions,
.chat-msg:focus-within .chat-msg-actions {
    opacity: 1;
}

.chat-msg-action {
    background: #fff;
    border: 1px solid #c4c4c4; /* 2.95:1 vs #fff — boundary, paired with text */
    border-radius: 3px;
    color: #4a4a4a;            /* 8.86:1 */
    font-size: 11px;
    line-height: 1;
    /* 2.5.8 target size: 24x24 minimum. */
    min-height: 24px;
    min-width: 24px;
    padding: 4px 8px;
    cursor: pointer;
}

.chat-msg-action:hover {
    background: #f0f0f0;
    border-color: #8c8c8c;
}

/* Visible focus indicator (2.4.11/2.4.13). Also forces the group visible, so
   tabbing to an action does not leave the user pressing something invisible. */
.chat-msg-action:focus,
.chat-msg-action:focus-visible {
    outline: 2px solid #05225A; /* 15.19:1 */
    outline-offset: 1px;
    opacity: 1;
}

/* --- Quoted reply context --- */
.chat-msg-quote {
    display: block;
    width: 100%;
    text-align: left;
    background: #f4f7fa;
    border: 0;
    border-left: 3px solid #0f7aa8; /* 4.81:1 */
    border-radius: 3px;
    padding: 4px 8px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 12px;
}

.chat-msg-quote:hover {
    background: #e8eef4;
}

.chat-msg-quote:focus,
.chat-msg-quote:focus-visible {
    outline: 2px solid #05225A;
    outline-offset: 1px;
}

.chat-msg-quote-name {
    display: block;
    font-weight: bold;
    color: #0b4f8a; /* 7.25:1 on #f4f7fa */
}

.chat-msg-quote-body {
    display: block;
    color: #4a4a4a; /* 8.86:1 */
}

/* Brief highlight when jumping to a quoted original. */
.chat-msg-flash {
    animation: chatMsgFlash 1.2s ease-out;
}

@keyframes chatMsgFlash {
    0%   { background: #fdf3d0; }
    100% { background: transparent; }
}

/* Respect a reduced-motion preference (2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .chat-msg-flash { animation: none; background: #fdf3d0; }
    .chat-msg-actions { transition: none; }
}

/* --- Reply bar above the composer --- */
.chat-reply-bar {
    border-top: 1px solid #ddd;
    background: #f4f7fa;
    padding: 6px 10px;
}

.chat-reply-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.chat-reply-bar-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #0b4f8a; /* 7.25:1 */
}

.chat-reply-bar-body {
    display: block;
    font-size: 12px;
    color: #4a4a4a; /* 8.86:1 */
}

.chat-reply-cancel {
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 18px;
    line-height: 1;
    color: #4a4a4a;
    cursor: pointer;
    min-width: 24px;
    min-height: 24px;
}

.chat-reply-cancel:hover {
    background: #e2e8ee;
    border-color: #8c8c8c;
}

.chat-reply-cancel:focus,
.chat-reply-cancel:focus-visible {
    outline: 2px solid #05225A;
    outline-offset: 1px;
}

/* --- Reaction chips --- */
.chat-msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chat-reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0f0f0;
    border: 1px solid #c4c4c4;
    border-radius: 12px;
    padding: 2px 8px;
    /* 24px min target (2.5.8). */
    min-height: 24px;
    font-size: 12px;
    color: #333;   /* 11.09:1 on #f0f0f0 */
    cursor: pointer;
}

/* The current user's own reaction. Not colour alone — aria-pressed carries the
   state, and the border weight changes too. */
.chat-reaction-mine {
    background: #dcecfb;
    border-color: #0f4c81;
    color: #0f4c81; /* 7.35:1 on #dcecfb */
    font-weight: bold;
}

.chat-reaction-chip:hover {
    border-color: #05225A;
}

.chat-reaction-chip:focus,
.chat-reaction-chip:focus-visible {
    outline: 2px solid #05225A;
    outline-offset: 1px;
}

/* --- Reaction palette --- */
#chat-reaction-picker {
    position: absolute;
    top: 26px;
    right: 4px;
    z-index: 20;
    display: flex;
    gap: 2px;
    background: #fff;
    border: 1px solid #8c8c8c;
    border-radius: 16px;
    padding: 4px 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.chat-reaction-option {
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    /* Comfortably over the 24px minimum — these are emoji targets. */
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
}

.chat-reaction-option:hover {
    background: #eef3f8;
}

.chat-reaction-option:focus,
.chat-reaction-option:focus-visible {
    outline: 2px solid #05225A;
    outline-offset: 1px;
}

/* --- Pinning --- */
.chat-pinned-bar {
    border-bottom: 1px solid #e6dcc0;
    background: #fdf6e3;
    padding: 6px 12px;
    max-height: 96px;
    overflow-y: auto;
}

.chat-pinned-title {
    font-size: 11px;
    font-weight: bold;
    color: #5e4200; /* 8.63:1 on #fdf6e3 */
    margin-bottom: 2px;
}

/* Row wraps the jump target and its unpin control side by side. */
.chat-pinned-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-pinned-unpin {
    flex: 0 0 auto;
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #5e4200; /* 8.63:1 on the pinned-bar tint */
    font-size: 16px;
    line-height: 1;
    /* 2.5.8 minimum target size. */
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
}

.chat-pinned-unpin:hover {
    background: #f5ecd2;
    border-color: #a08b52;
}

.chat-pinned-unpin:focus,
.chat-pinned-unpin:focus-visible {
    outline: 2px solid #05225A;
    outline-offset: 1px;
}

.chat-pinned-item {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 3px 4px;
    min-height: 24px;
    font-size: 12px;
    cursor: pointer;
}

.chat-pinned-item:hover {
    background: #f5ecd2;
    border-color: #a08b52;
}

.chat-pinned-item:focus,
.chat-pinned-item:focus-visible {
    outline: 2px solid #05225A;
    outline-offset: 1px;
}

.chat-pinned-name {
    font-weight: bold;
    color: #5e4200;
    margin-right: 6px;
}

.chat-pinned-body {
    color: #333; /* 11.71:1 on #fdf6e3 */
}

/* The pinned marker on the message itself is a word, not just a colour. */
.chat-msg-pinned-flag {
    font-size: 10px;
    font-weight: bold;
    color: #5e4200;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chat-msg-is-pinned .chat-msg-body {
    border-left: 3px solid #a08b52;
    padding-left: 6px;
}

/* --- @mentions --- */
.chat-mention {
    background: #e3f0fb;
    color: #0b4f8a; /* 7.25:1 */
    border-radius: 3px;
    padding: 0 3px;
    font-weight: bold;
}

/* A mention of the reader is stronger, and the row is marked too. */
.chat-mention-me {
    background: #cfe4f7;
    color: #093b68;
}

.chat-msg-mentions-me {
    /* Not colour alone: the mention pill inside the body carries it as well. */
    border-left: 3px solid #0f7aa8;
    padding-left: 6px;
}

/* --- Mention autocomplete --- */
#chat-mention-menu {
    position: absolute;
    bottom: 100%;
    left: 8px;
    z-index: 30;
    min-width: 220px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #8c8c8c;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#chat-compose {
    position: relative;
}

.chat-mention-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid #eee;
    padding: 6px 10px;
    min-height: 32px;
    cursor: pointer;
}

.chat-mention-item:last-child {
    border-bottom: 0;
}

.chat-mention-item:hover,
.chat-mention-active {
    background: #e3f0fb;
}

.chat-mention-item:focus,
.chat-mention-item:focus-visible {
    outline: 2px solid #05225A;
    outline-offset: -2px;
}

.chat-mention-name {
    font-size: 13px;
    color: #333;
}

.chat-mention-username {
    font-size: 11px;
    color: #5a5a5a; /* 6.90:1 */
}