/**
 * Messages Page — Layout & Component Styles
 * assets/css/pages/inzc-messaging.css
 *
 * Chat interface using Influenzic design tokens.
 *
 * Sections:
 *   1. Layout Container
 *   2. Messages Sidebar
 *   3. Sidebar Header (avatar + search)
 *   4. Chats Label & Conversation List
 *   5. Conversation Items
 *   6. Messages Main Panel
 *   7. Thread Header (incl. typing indicator)
 *   8. Message Search Bar
 *   9. Messages Body
 *  10. Message Bubbles (sent / received / system / image)
 *  11. Message Composer (floating card)
 *  12. Quick Replies Panel
 *  13. Empty & Zero States
 *  14. Mobile Responsive
 *  15. Dark Mode
 */


/* =============================================================================
   1. LAYOUT CONTAINER
   ============================================================================= */

.inzc-messages-container {
    display: flex;
    flex-direction: row;
    height: calc(100vh - var(--inzc-header-height, 65px) - var(--inzc-spacing-8));
    /* 100dvh tracks the visible viewport on mobile browsers with dynamic toolbars;
       ignored by browsers that don't support it so 100vh acts as the fallback. */
    /* stylelint-disable-next-line unit-no-unknown */
    height: calc(100dvh - var(--inzc-header-height, 65px) - var(--inzc-spacing-8));
    min-height: 0;
    border-radius: var(--inzc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--inzc-border-light);
    background-color: var(--inzc-bg-primary);
    box-shadow: var(--inzc-card-shadow);
}


/* =============================================================================
   2. MESSAGES SIDEBAR
   ============================================================================= */

.inzc-messages-sidebar {
    display: flex;
    flex-direction: column;
    width: 360px;
    min-width: 300px;
    max-width: 420px;
    flex-shrink: 0;
    border-right: 1px solid var(--inzc-border-light);
    background-color: var(--inzc-bg-primary);
    overflow: hidden;
}


/* =============================================================================
   3. SIDEBAR HEADER (avatar + search + compose)
   ============================================================================= */

.inzc-chat-sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-4);
    flex-shrink: 0;
}

.inzc-chat-sidebar-header .inzc-conversation-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.inzc-chat-sidebar-header .inzc-conversation-avatar img {
    width: 40px;
    height: 40px;
}

.inzc-chat-search-wrapper {
    flex: 1;
    min-width: 0;
}

.inzc-chat-search-input {
    width: 100%;
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    font-size: var(--inzc-font-size-sm);
    font-family: inherit;
    color: var(--inzc-text-primary);
    background-color: var(--inzc-bg-secondary);
    border: 1px solid transparent;
    border-radius: var(--inzc-radius-md);
    outline: none;
    transition: var(--inzc-transition-colors);
    box-sizing: border-box;
}

.inzc-chat-search-input::placeholder {
    color: var(--inzc-text-muted);
}

.inzc-chat-search-input:focus {
    border-color: var(--inzc-primary);
    background-color: var(--inzc-bg-primary);
    box-shadow: 0 0 0 2px var(--inzc-primary-lighter);
}




/* =============================================================================
   4. CHATS LABEL & CONVERSATION LIST
   ============================================================================= */

.inzc-chats-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--inzc-spacing-2) var(--inzc-spacing-4) var(--inzc-spacing-1);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}



/* Scrollable list */
.inzc-conversation-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: var(--inzc-spacing-1);
}

.inzc-conversation-list::-webkit-scrollbar {
    width: 4px;
}

.inzc-conversation-list::-webkit-scrollbar-thumb {
    background-color: var(--inzc-border-light);
    border-radius: var(--inzc-radius-full);
}


/* =============================================================================
   5. CONVERSATION ITEMS
   ============================================================================= */

.inzc-conversation-item {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: 0.528rem 0.75rem;
    margin: var(--inzc-spacing-3);
    background-color: var(--inzc-bg-tertiary);
    border-radius: var(--inzc-radius-md);
    cursor: pointer;
    transition: background-color 0.15s ease,
        box-shadow 0.15s ease,
        color 0.15s ease;
    position: relative;
}

.inzc-conversation-item:hover {
    background-color: var(--inzc-bg-secondary);
    box-shadow: var(--inzc-shadow-sm);
}

/* Active: solid primary bg with white text */
.inzc-conversation-item.inzc-active {
    background-color: var(--inzc-primary);
    box-shadow: 0 2px 4px 0 rgba(99, 102, 241, 0.4);
    color: var(--inzc-white, #fff);
}

.inzc-conversation-item.inzc-active:hover {
    background-color: var(--inzc-primary-hover);
}

.inzc-conversation-item.inzc-active .inzc-conversation-name,
.inzc-conversation-item.inzc-active .inzc-conversation-time,
.inzc-conversation-item.inzc-active .inzc-conversation-preview {
    color: #fff;
}

.inzc-conversation-item.inzc-active .inzc-conversation-preview {
    opacity: 0.78;
}

.inzc-conversation-item.inzc-active .inzc-online-dot {
    border-color: var(--inzc-primary);
}

.inzc-conversation-item.inzc-active .inzc-conversation-badge .inzc-badge {
    background-color: #fff;
    color: var(--inzc-primary);
}

/* Avatar */
.inzc-conversation-avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.inzc-conversation-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.inzc-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--inzc-bg-primary);
    background-color: var(--inzc-success);
}

/* Content */
.inzc-conversation-content {
    flex: 1;
    min-width: 0;
}

.inzc-conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inzc-spacing-2);
    margin-bottom: 1px;
}

.inzc-conversation-name-row {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    min-width: 0;
    flex: 1;
}

.inzc-conversation-name-row .inzc-creator-level-badge {
    margin-left: 0;
}

.inzc-conversation-name {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.inzc-conversation-time {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}

.inzc-conversation-preview {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unread state — badge alone signals unread, no text style changes */

/* Unread badge */
.inzc-conversation-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.inzc-conversation-badge .inzc-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--inzc-spacing-1);
    border-radius: var(--inzc-radius-full);
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    font-weight: var(--inzc-font-weight-semibold);
}


/* =============================================================================
   6. MESSAGES MAIN PANEL
   ============================================================================= */

.inzc-messages-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: #f3f2f5;
}


/* =============================================================================
   7. THREAD HEADER (incl. typing indicator)
   ============================================================================= */

.inzc-messages-header {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: 1.015rem 1.5rem;
    background-color: var(--inzc-bg-primary);
    border-bottom: 1px solid var(--inzc-border-light);
    flex-shrink: 0;
    min-height: 68px;
}

.inzc-messages-header-back {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--inzc-spacing-1);
    color: var(--inzc-text-secondary);
    border-radius: var(--inzc-radius-md);
    transition: var(--inzc-transition-colors);
    flex-shrink: 0;
}

.inzc-messages-header-back:hover {
    background-color: var(--inzc-bg-secondary);
    color: var(--inzc-text-primary);
}

.inzc-messages-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.inzc-messages-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inzc-messages-header-name {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    line-height: 1.3;
}

.inzc-messages-header-handle-row {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    line-height: 1.2;
}

.inzc-messages-header-handle-row .inzc-creator-level-badge {
    margin-left: 0;
}

.inzc-messages-header-username {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary, #6b7280);
    line-height: 1.2;
}

.inzc-messages-header-meta {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    line-height: 1.2;
    margin-top: 1px;
}

.inzc-messages-header-meta .inzc-rating {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-warning);
    font-weight: var(--inzc-font-weight-semibold);
}

.inzc-messages-header-meta .inzc-qs-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
}

/* Typing indicator — shown below name when contact is typing */
.inzc-typing-indicator {
    display: none;
    align-items: center;
    gap: 3px;
    height: 16px;
}

.inzc-typing-indicator.inzc-typing-active {
    display: flex;
}

.inzc-typing-indicator span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--inzc-text-muted);
    animation: inzc-typing-bounce 1.2s infinite ease-in-out;
}

.inzc-typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.inzc-typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes inzc-typing-bounce {

    0%,
    80%,
    100% {
        transform: scale(0.7);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.inzc-messages-header-actions {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-1);
    flex-shrink: 0;
}

.inzc-messages-header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--inzc-radius-md);
    color: var(--inzc-text-secondary);
    transition: var(--inzc-transition-colors);
    text-decoration: none;
}

.inzc-messages-header-icon-btn:hover {
    background-color: var(--inzc-bg-secondary);
    color: var(--inzc-text-primary);
}


/* =============================================================================
   8. MESSAGE SEARCH BAR
   ============================================================================= */

/* When the HTML `hidden` attribute is present, `display:flex` would normally
   override it. These rules restore the expected hide behaviour. */
.inzc-message-search-bar[hidden],
.inzc-quick-replies[hidden] {
    display: none !important;
}

.inzc-message-search-bar {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-2) var(--inzc-spacing-4);
    background-color: var(--inzc-bg-primary);
    border-bottom: 1px solid var(--inzc-border-light);
    flex-shrink: 0;
}

.inzc-message-search-bar svg {
    flex-shrink: 0;
    color: var(--inzc-text-muted);
}

.inzc-message-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    font-size: var(--inzc-font-size-sm);
    font-family: inherit;
    color: var(--inzc-text-primary);
    background: transparent;
}

.inzc-message-search-input::placeholder {
    color: var(--inzc-text-muted);
}

.inzc-message-search-count {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.inzc-message-search-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    border-radius: var(--inzc-radius-md);
    color: var(--inzc-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--inzc-transition-colors);
}

.inzc-message-search-close:hover {
    background-color: var(--inzc-bg-secondary);
    color: var(--inzc-text-primary);
}

/* Highlight matched search text */
.inzc-search-highlight {
    background-color: yellow;
    border-radius: 2px;
    color: var(--inzc-success);
    font-weight: var(--inzc-font-weight-semibold);
}


/* =============================================================================
   8b. NON-BINDING GENERAL THREAD BANNER
   ============================================================================= */

.inzc-general-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    background-color: #fffbeb;
    border-bottom: 1px solid #fde68a;
    flex-shrink: 0;
}

.inzc-general-banner-body {
    flex: 1;
    font-size: var(--inzc-font-size-sm);
    color: #92400e;
    line-height: 1.5;
}

.inzc-general-banner-body strong {
    font-weight: var(--inzc-font-weight-semibold);
    margin-right: 0.25em;
}

.inzc-general-banner-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: #92400e;
    padding: 0 var(--inzc-spacing-1);
    opacity: 0.7;
    transition: opacity 0.15s;
}

.inzc-general-banner-close:hover {
    opacity: 1;
}

.inzc-general-banner-chip {
    padding: var(--inzc-spacing-1) var(--inzc-spacing-4);
    border-bottom: 1px solid var(--inzc-border-light);
    flex-shrink: 0;
}

.inzc-general-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--inzc-spacing-1);
    background-color: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--inzc-radius-full);
    cursor: pointer;
    font-size: var(--inzc-font-size-xs);
    color: #92400e;
    padding: 0.2rem 0.65rem;
    transition: background-color 0.15s;
}

.inzc-general-chip-btn:hover {
    background-color: #fde68a;
}

/* =============================================================================
   9. MESSAGES BODY
   ============================================================================= */

.inzc-messages-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-4);
    background-color: var(--inzc-chat-body-bg, var(--inzc-bg-secondary));
}

.inzc-messages-body::-webkit-scrollbar {
    width: 4px;
}

.inzc-messages-body::-webkit-scrollbar-thumb {
    background-color: var(--inzc-border-light);
    border-radius: var(--inzc-radius-full);
}

/* Empty body state — "No messages yet. Say hello!" */
.inzc-messages-no-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    color: var(--inzc-text-muted);
    font-size: var(--inzc-font-size-sm);
}

/* Date divider */
.inzc-message-date-divider {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    margin: var(--inzc-spacing-2) 0;
}

.inzc-message-date-divider::before,
.inzc-message-date-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--inzc-border-light);
}

.inzc-message-date-label {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-muted);
    white-space: nowrap;
    padding: 2px var(--inzc-spacing-2);
}


/* =============================================================================
   10. MESSAGE BUBBLES
   ============================================================================= */

.inzc-message-item {
    display: flex;
    align-items: flex-end;
    gap: var(--inzc-spacing-2);
    max-width: 75%;
}

/* Sent — right-aligned, primary bg, top-right corner zeroed */
.inzc-message-sent {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.inzc-message-sent .inzc-message-content {
    align-items: flex-end;
}

.inzc-message-sent .inzc-message-text {
    background-color: var(--inzc-chat-sent-bg, var(--inzc-primary));
    color: var(--inzc-chat-sent-text, #fff);
    border-radius: var(--inzc-chat-radius, var(--inzc-radius-md)) 0 var(--inzc-chat-radius, var(--inzc-radius-md)) var(--inzc-chat-radius, var(--inzc-radius-md));
    box-shadow: var(--inzc-shadow-xs);
}

/* Footer row: time + read receipt tick */
.inzc-message-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.inzc-message-sent .inzc-message-footer .inzc-message-time {
    text-align: right;
    padding: 0;
}

.inzc-message-receipt {
    display: flex;
    align-items: center;
    color: var(--inzc-text-tertiary, #94a3b8);
    flex-shrink: 0;
}

.inzc-receipt-read {
    color: var(--inzc-success);
}

/* Received — left-aligned, white bg, top-left corner zeroed */
.inzc-message-received {
    align-self: flex-start;
}

.inzc-message-received .inzc-message-text {
    background-color: var(--inzc-chat-recv-bg, var(--inzc-bg-primary));
    color: var(--inzc-chat-recv-text, var(--inzc-text-primary));
    border-radius: 0 var(--inzc-chat-radius, var(--inzc-radius-md)) var(--inzc-chat-radius, var(--inzc-radius-md)) var(--inzc-chat-radius, var(--inzc-radius-md));
    box-shadow: var(--inzc-shadow-xs);
}

/* Message avatar */
.inzc-message-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Content wrapper */
.inzc-message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inzc-message-text {
    padding: 0.543rem 1rem;
    font-size: var(--inzc-chat-font-size, var(--inzc-font-size-base));
    line-height: 1.6;
    word-break: break-word;
}

.inzc-message-time {
    font-size: var(--inzc-chat-time-size, var(--inzc-font-size-xs));
    color: var(--inzc-text-muted);
    padding: 0 var(--inzc-spacing-1);
}

/* Image bubble */
.inzc-message-image-bubble {
    background-color: var(--inzc-bg-primary);
    border-radius: 0 var(--inzc-radius-md) var(--inzc-radius-md) var(--inzc-radius-md);
    overflow: hidden;
    box-shadow: var(--inzc-shadow-xs);
    max-width: 260px;
}

.inzc-message-image {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.inzc-message-image:hover {
    opacity: 0.9;
}

.inzc-message-image-caption {
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary);
    border-top: 1px solid var(--inzc-border-light);
}

/* System message */
.inzc-message-system {
    align-self: center;
    max-width: 90%;
    width: 100%;
}

.inzc-message-system-content {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    background-color: var(--inzc-bg-primary);
    border-left: 3px solid var(--inzc-chat-system-border, var(--inzc-success));
    border-radius: var(--inzc-radius-md);
    box-shadow: var(--inzc-shadow-xs);
}

.inzc-message-system-content.inzc-system-warning {
    border-left-color: var(--inzc-warning);
}

.inzc-message-system-content.inzc-system-danger {
    border-left-color: var(--inzc-danger);
}

.inzc-message-system-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--inzc-font-size-sm);
    background-color: var(--inzc-success-lighter);
    color: var(--inzc-success);
}

.inzc-message-system-content.inzc-system-warning .inzc-message-system-icon {
    background-color: var(--inzc-warning-lighter);
    color: var(--inzc-warning);
}

.inzc-message-system-text {
    flex: 1;
    min-width: 0;
}

.inzc-message-system-text strong {
    display: block;
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin-bottom: 2px;
}

.inzc-message-system-text p {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.inzc-message-system .inzc-message-time {
    flex-shrink: 0;
    font-size: var(--inzc-font-size-xs);
    padding: 0;
}


/* =============================================================================
   11. MESSAGE COMPOSER
   ============================================================================= */

.inzc-message-composer {
    margin: 0 1.5rem 1.5rem;
    background-color: var(--inzc-bg-primary);
    border-radius: var(--inzc-radius-md);
    box-shadow: var(--inzc-shadow-xs);
    padding: 0.5rem;
    flex-shrink: 0;
}

.inzc-message-composer-form {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
}

.inzc-composer-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: var(--inzc-radius-md);
    color: var(--inzc-text-secondary);
    cursor: pointer;
    transition: var(--inzc-transition-colors);
}

.inzc-composer-icon-btn:hover {
    background-color: var(--inzc-bg-secondary);
    color: var(--inzc-text-primary);
}

.inzc-composer-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Settings gear — accent on hover, same resting colour as other composer icon buttons */
#composerSettingsBtn:hover {
    color: var(--inzc-primary);
}

.inzc-composer-input {
    width: 100%;
    padding: var(--inzc-spacing-2) 2.5rem var(--inzc-spacing-2) var(--inzc-spacing-3);
    font-size: var(--inzc-font-size-base);
    font-family: inherit;
    color: var(--inzc-text-primary);
    background: var(--inzc-gray-100);
    border: none;
    outline: none;
    resize: none;
    line-height: 1.5;
    box-sizing: border-box;
}

.inzc-composer-input::placeholder {
    color: var(--inzc-text-secondary);
}

.inzc-composer-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.inzc-composer-actions {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    flex-shrink: 0;
}

/* Shown only when the 2000-character cap is reached */
.inzc-char-limit-warning {
    display: block;
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-danger);
    background: var(--inzc-danger-light, #fef2f2);
    border: 1px solid var(--inzc-danger);
    border-radius: var(--inzc-radius-sm);
    padding: var(--inzc-spacing-1) var(--inzc-spacing-2);
    margin-top: var(--inzc-spacing-1);
    pointer-events: none;
    line-height: 1.4;
}

.inzc-composer-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-color: var(--inzc-primary);
    color: #fff;
    border: none;
    border-radius: var(--inzc-radius-md);
    cursor: pointer;
    transition: var(--inzc-transition-colors);
}

.inzc-composer-send-btn:hover {
    background-color: var(--inzc-primary-hover);
}

.inzc-composer-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* Hidden file input (triggered by label) */
.inzc-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* =============================================================================
   12. QUICK REPLIES PANEL
   ============================================================================= */

.inzc-quick-replies {
    border-bottom: 1px solid var(--inzc-border-light);
    background-color: var(--inzc-bg-primary);
    border-radius: var(--inzc-radius-md) var(--inzc-radius-md) 0 0;
    overflow: hidden;
}

.inzc-quick-replies-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--inzc-border-light);
}

.inzc-quick-replies-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    border-radius: var(--inzc-radius-sm);
    color: var(--inzc-text-secondary);
    cursor: pointer;
    transition: var(--inzc-transition-colors);
}

.inzc-quick-replies-close:hover {
    background-color: var(--inzc-bg-secondary);
    color: var(--inzc-text-primary);
}

.inzc-quick-replies-list {
    list-style: none;
    margin: 0;
    padding: var(--inzc-spacing-1) 0;
    max-height: 200px;
    overflow-y: auto;
}

.inzc-quick-reply-item {
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.12s ease;
}

.inzc-quick-reply-item:hover,
.inzc-quick-reply-item:focus {
    background-color: var(--inzc-primary-lighter);
    color: var(--inzc-primary);
    outline: none;
}

/* Custom items: flex row so delete icon sits on the right */
.inzc-quick-reply-item.inzc-quick-reply-custom {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
}

.inzc-quick-reply-item.inzc-quick-reply-custom span,
.inzc-quick-reply-item.inzc-quick-reply-custom {
    flex: 1;
    min-width: 0;
}

.inzc-quick-reply-delete {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    border-radius: var(--inzc-radius-sm);
    color: var(--inzc-text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
    padding: 0;
}

.inzc-quick-reply-item:hover .inzc-quick-reply-delete {
    opacity: 1;
}

.inzc-quick-reply-delete:hover {
    color: var(--inzc-danger);
}

/* Add custom reply form — bottom strip of the panel */
.inzc-quick-replies-add {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    border-top: 1px solid var(--inzc-border-light);
}

.inzc-quick-reply-custom-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-md);
    padding: var(--inzc-spacing-1) var(--inzc-spacing-2);
    font-size: var(--inzc-font-size-sm);
    font-family: inherit;
    color: var(--inzc-text-primary);
    background-color: var(--inzc-bg-secondary);
    outline: none;
    transition: border-color var(--inzc-transition-fast) ease;
}

.inzc-quick-reply-custom-input::placeholder {
    color: var(--inzc-text-tertiary);
}

.inzc-quick-reply-custom-input:focus {
    border-color: var(--inzc-primary);
    background-color: var(--inzc-bg-primary);
}

.inzc-quick-replies-add-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: var(--inzc-primary);
    color: #fff;
    border: none;
    border-radius: var(--inzc-radius-md);
    cursor: pointer;
    transition: background-color var(--inzc-transition-fast) ease;
}

.inzc-quick-replies-add-btn:hover {
    background-color: var(--inzc-primary-hover);
}

/* =============================================================================
   Emoji button positioning inside the composer textarea wrapper
   ============================================================================= */

/* The wrapper already gets position:relative from .inzc-input-relative,
   but we also define it here so the class works on messages.php without
   loading inzc-project-details.css. */
.inzc-messages-thread .inzc-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

/* Tighten the emoji button position for the compact composer */
.inzc-message-composer .inzc-emoji-btn {
    top: 8px;
    right: 8px;
}

/* Composer settings panel — same structural pattern as quick replies */
.inzc-composer-settings-panel[hidden] {
    display: none !important;
}

.inzc-composer-settings-panel {
    border-bottom: 1px solid var(--inzc-border-light);
    background-color: var(--inzc-bg-primary);
    border-radius: var(--inzc-radius-md) var(--inzc-radius-md) 0 0;
    overflow: hidden;
}

.inzc-composer-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--inzc-border-light);
}

.inzc-composer-settings-body {
    padding: var(--inzc-spacing-2) 0;
}

.inzc-composer-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inzc-spacing-4);
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
}

.inzc-composer-setting-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.inzc-composer-setting-label {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-primary);
}

.inzc-composer-setting-hint {
    font-size: var(--inzc-font-size-xs);
    color: var(--inzc-text-secondary);
}

.inzc-messages-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-8);
    text-align: center;
    background-color: #f3f2f5;
}

.inzc-messages-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--inzc-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inzc-text-muted);
    box-shadow: var(--inzc-shadow-xs);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-messages-empty h3 {
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: 0;
}

.inzc-messages-empty p {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    margin: 0;
    max-width: 320px;
    line-height: 1.6;
}

/* Zero state inside sidebar */
.inzc-conversation-zero-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-8) var(--inzc-spacing-4);
    text-align: center;
}

.inzc-conversation-zero-state p {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Thread view hidden by default */
.inzc-messages-thread {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.inzc-messages-thread.inzc-active {
    display: flex;
}


/* =============================================================================
   14. MOBILE RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    .inzc-messages-container {
        height: calc(100vh - var(--inzc-header-height, 65px) - var(--inzc-spacing-4));
        /* stylelint-disable-next-line unit-no-unknown */
        height: calc(100dvh - var(--inzc-header-height, 65px) - var(--inzc-spacing-4));
        flex-direction: column;
        border-radius: var(--inzc-radius-md);
    }

    .inzc-messages-sidebar {
        width: 100%;
        min-width: unset;
        max-width: unset;
        border-right: none;
        border-bottom: 1px solid var(--inzc-border-light);
        flex: 1;
        overflow-y: auto;
        /* allow sidebar to scroll if conversation list is taller than panel */
    }

    .inzc-messages-main {
        display: none;
    }

    .inzc-messages-container.inzc-thread-open .inzc-messages-sidebar {
        display: none;
    }

    .inzc-messages-container.inzc-thread-open .inzc-messages-main {
        display: flex;
        flex: 1;
        min-height: 0;
        /* prevent flex child from overflowing */
    }

    .inzc-messages-container.inzc-thread-open .inzc-messages-header-back {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inzc-message-item {
        max-width: 88%;
    }

    .inzc-messages-body {
        padding: var(--inzc-spacing-4);
    }

    .inzc-message-composer {
        margin: 0 var(--inzc-spacing-4) var(--inzc-spacing-4);
    }

    /* Reduce the quick-replies list height on tablet/mobile */
    .inzc-quick-replies-list {
        max-height: 160px;
    }
}

@media (max-width: 480px) {
    .inzc-message-item {
        max-width: 95%;
    }

    /* Compact thread header — reduce padding and gap, tighten min-height */
    .inzc-messages-header {
        padding: var(--inzc-spacing-3);
        gap: var(--inzc-spacing-2);
        min-height: 56px;
    }

    /* Slightly smaller contact avatar in header */
    .inzc-messages-header-avatar {
        width: 34px;
        height: 34px;
    }

    /* Tighter header action buttons */
    .inzc-messages-header-icon-btn {
        width: 30px;
        height: 30px;
    }

    .inzc-message-composer {
        margin: 0 var(--inzc-spacing-3) var(--inzc-spacing-3);
    }

    /* Tighten composer icon row so all controls fit on very small screens */
    .inzc-message-composer-form {
        gap: var(--inzc-spacing-1);
    }

    .inzc-composer-icon-btn {
        width: 30px;
        height: 30px;
    }

    .inzc-composer-send-btn {
        width: 32px;
        height: 32px;
    }

    /* Keep image bubbles from going edge-to-edge */
    .inzc-message-image-bubble,
    .inzc-message-image {
        max-width: 200px;
    }
}


/* =============================================================================
   15. DARK MODE
   ============================================================================= */
[data-inzc-theme="dark"] .inzc-chat-sidebar-header {
    background: var(--inzc-bg-light);
}



[data-inzc-theme="dark"] .inzc-messages-container {
    background-color: var(--inzc-bg-primary);
    border-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-messages-sidebar {
    background-color: var(--inzc-bg-secondary);
    border-right-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-conversation-item {
    background-color: var(--inzc-bg-light);
}

[data-inzc-theme="dark"].inzc-conversation-item:hover {
    box-shadow: var(--inzc-shadow-xs);
}

[data-inzc-theme="dark"] .inzc-conversation-item.inzc-active {
    background-color: var(--inzc-primary);
}

[data-inzc-theme="dark"] .inzc-conversation-item.inzc-active .inzc-online-dot {
    border-color: var(--inzc-primary);
}

[data-inzc-theme="dark"] .inzc-messages-main,
[data-inzc-theme="dark"] .inzc-messages-body,
[data-inzc-theme="dark"] .inzc-messages-empty {
    background-color: var(--inzc-bg-light);
}

[data-inzc-theme="dark"] .inzc-messages-header {
    background-color: var(--inzc-bg-secondary);
    border-bottom-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-message-composer {
    background-color: var(--inzc-bg-accent);
    box-shadow: none;
}

[data-inzc-theme="dark"] .inzc-message-received .inzc-message-text {
    background-color: var(--inzc-bg-secondary);
    color: var(--inzc-text-primary);
}

[data-inzc-theme="dark"] .inzc-message-image-caption {
    background-color: var(--inzc-bg-secondary);
}

[data-inzc-theme="dark"] .inzc-message-system-content {
    background-color: var(--inzc-bg-primary);
}

[data-inzc-theme="dark"] .inzc-composer-input {
    color: var(--inzc-text-primary);
}

[data-inzc-theme="dark"] .inzc-message-search-bar {
    background-color: var(--inzc-bg-primary);
    border-bottom-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-message-search-input {
    color: var(--inzc-text-primary);
}

[data-inzc-theme="dark"] .inzc-quick-replies {
    background-color: var(--inzc-bg-primary);
    border-bottom-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-message-image-bubble {
    background-color: var(--inzc-bg-primary);
}

[data-inzc-theme="dark"] .inzc-composer-settings-panel {
    background-color: var(--inzc-bg-primary);
    border-bottom-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-composer-settings-header {
    border-bottom-color: var(--inzc-border-extra-dark);
}

[data-inzc-theme="dark"] .inzc-char-limit-warning {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--inzc-danger);
}

[data-inzc-theme="dark"] .inzc-general-banner {
    background-color: rgba(120, 53, 15, 0.15);
    border-bottom-color: rgba(120, 53, 15, 0.3);
}

[data-inzc-theme="dark"] .inzc-general-banner-body,
[data-inzc-theme="dark"] .inzc-general-banner-close {
    color: #fcd34d;
}

[data-inzc-theme="dark"] .inzc-general-banner-chip {
    border-bottom-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-general-chip-btn {
    background-color: rgba(120, 53, 15, 0.25);
    border-color: rgba(120, 53, 15, 0.4);
    color: #fcd34d;
}

[data-inzc-theme="dark"] .inzc-general-chip-btn:hover {
    background-color: rgba(120, 53, 15, 0.4);
}