/* Force resize handle above message input, not in composer row */
.chat-composer,
.support-chat-composer,
.message-form,
.chat-form,
#chatForm {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    align-items: stretch !important;
}

.chat-input-row,
.support-chat-input-row,
.composer-row,
.message-input-row,
.chat-send-row,
.chat-controls,
.support-composer-row,
#chatForm .chat-panel-final-row,
#chatForm .chat-force-input-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
}

.chat-resize-handle,
.support-resize-handle,
.message-resize-handle,
#chatResizeHandle,
[data-chat-resize-handle] {
    display: block !important;
    width: 100% !important;
    height: 9px !important;
    min-height: 9px !important;
    max-height: 9px !important;
    flex: 0 0 8px !important;
    cursor: ns-resize !important;
    border-radius: 999px !important;
    background: #d9d9d9 !important;
    margin: 0 0 2px 0 !important;
    order: -10 !important;
    align-self: stretch !important;
}

.chat-resize-handle::before,
.support-resize-handle::before,
.message-resize-handle::before,
#chatResizeHandle::before,
[data-chat-resize-handle]::before {
    content: '' !important;
    display: block !important;
}

textarea,
#messageInput,
.chat-message-input,
.support-message-input,
.message-input {
    resize: none !important;
    overflow-y: hidden !important;
    min-height: 42px !important;
    line-height: 1.35 !important;
    align-self: flex-end !important;
}

.chat-input-row button,
.support-chat-input-row button,
.composer-row button,
.message-input-row button,
.chat-send-row button,
.chat-controls button,
#chatForm button,
#chatForm label {
    align-self: flex-end !important;
}


/* Scoped final override for the current support chat layout. */
.support-chat-composer #chatForm.support-composer-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    align-items: stretch !important;
}

.support-chat-composer #chatForm .support-composer-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
}

.support-chat-composer #chatForm .support-message-input {
    flex: 1 1 auto !important;
    align-self: center !important;
    width: auto !important;
    min-width: 120px !important;
}

.support-chat-composer #chatForm .support-composer-button,
.support-chat-composer #chatForm .support-emoji-holder,
.support-chat-composer #chatForm label,
.support-chat-composer #chatForm button {
    align-self: center !important;
}

.support-message-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
}

.support-message-actions .support-message-action,
.support-message-actions .support-reply-btn,
.support-message-actions .support-delete-btn,
.support-message-actions .force-reply-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

@media (max-width: 520px) {
    .support-chat-composer #chatForm .support-composer-row {
        gap: 6px !important;
    }
}


/* Resizable textarea must win over older force styles that set height:42px. */
.support-chat-composer #messageInput,
.support-chat-composer textarea.support-message-input,
.force-chat-panel-align textarea.force-chat-message-input,
textarea.force-chat-message-input {
    height: var(--support-message-input-height, 42px) !important;
    min-height: var(--support-message-input-height, 42px) !important;
    max-height: 280px !important;
    resize: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.support-chat-composer .support-resize-handle,
.support-chat-composer .chat-resize-handle,
#composerResizeHandle,
#chatResizeHandle {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    flex: 0 0 10px !important;
    margin: 0 0 8px 0 !important;
    border-radius: 999px !important;
    background: #d8d8d8 !important;
    cursor: ns-resize !important;
    touch-action: none !important;
    order: -5 !important;
    user-select: none !important;
}

.support-chat-composer .support-resize-handle:hover,
.support-chat-resizing-input .support-resize-handle,
.support-chat-page.is-resizing-message-input .support-resize-handle {
    background: #bcbcbc !important;
}

/* Final chat page scroll/handle tune: page itself does not scroll; only messages do. */
html:has(.support-chat-page),
body:has(.support-chat-page) {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

body:has(.support-chat-page) .app-shell {
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    overflow: hidden !important;
}

body:has(.support-chat-page) .content {
    height: 100vh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

body:has(.support-chat-page) .support-chat-page {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

body:has(.support-chat-page) .support-chat-card {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body:has(.support-chat-page) .support-chat-messages,
body:has(.support-chat-page) #messages {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Smaller draggable divider above the message input. */
.support-chat-composer .support-resize-handle,
.support-chat-composer .chat-resize-handle,
#composerResizeHandle,
#chatResizeHandle,
[data-chat-resize-handle] {
    height: 4px !important;
    min-height: 4px !important;
    max-height: 4px !important;
    flex-basis: 4px !important;
    margin: 0 0 6px 0 !important;
}

/* Chat width tune: the chat must not stretch across the whole page, and must stay left-aligned. */
body:has(.support-chat-page) .support-chat-page {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

body:has(.support-chat-page) .support-chat-card {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 1040px) {
    body:has(.support-chat-page) .support-chat-page {
        width: 100% !important;
        max-width: 100% !important;
    }
}