/* ═══════════════════════════════════════════════════════════
   MESSAGING REDESIGN — final override (wins over all rules)
   ═══════════════════════════════════════════════════════════ */

/* Layout */
body.messages-page .chat-layout {
    display: grid !important;
    grid-template-columns: 300px minmax(0,1fr) !important;
    gap: 12px !important;
    min-height: calc(100vh - 190px) !important;
    max-height: calc(100vh - 190px) !important;
    align-items: stretch !important;
}

body.messages-page .chat-sidebar {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100% !important;
}

body.messages-page .chat-sidebar-head {
    padding: 16px 16px 0 !important;
    flex-shrink: 0 !important;
}

body.messages-page .contacts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-top: 10px !important;
    padding: 0 8px 12px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(120,160,196,.3) transparent !important;
}

body.messages-page .contacts-list::-webkit-scrollbar { width: 4px !important; }
body.messages-page .contacts-list::-webkit-scrollbar-thumb {
    background: rgba(120,160,196,.3) !important;
    border-radius: 999px !important;
}

/* Contact rows */
body.messages-page .contact-item {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: background 140ms ease, border-color 140ms ease !important;
    box-shadow: none !important;
}

body.messages-page .contact-item:hover {
    background: rgba(203,225,244,.35) !important;
    border-color: rgba(168,205,234,.4) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.messages-page .contact-item.active {
    background: linear-gradient(135deg, rgba(255,237,228,.9), rgba(255,218,202,.7)) !important;
    border-color: rgba(255,185,155,.55) !important;
}

/* Chat main */
body.messages-page .chat-main {
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) auto !important;
    overflow: hidden !important;
    height: 100% !important;
}

/* Header */
body.messages-page .chat-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(196,218,237,.5) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

/* Messages list */
body.messages-page .messages-list,
body.messages-page .messages-list.messages-list-live {
    overflow-y: auto !important;
    padding: 16px 16px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-height: 0 !important;
    scroll-behavior: smooth !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(120,160,196,.3) transparent !important;
}

body.messages-page .messages-list::-webkit-scrollbar { width: 4px !important; }
body.messages-page .messages-list::-webkit-scrollbar-thumb {
    background: rgba(120,160,196,.3) !important;
    border-radius: 999px !important;
}

/* Bubbles */
body.messages-page .bubble {
    max-width: min(520px, 80%) !important;
    padding: 9px 14px !important;
    border-radius: 20px !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    word-break: break-word !important;
    animation: bubbleIn 180ms ease both !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

body.messages-page .bubble + .bubble.mine,
body.messages-page .bubble.mine + .bubble:not(.mine) {
    margin-top: 8px !important;
}

body.messages-page .bubble.theirs {
    align-self: flex-start !important;
    border-bottom-left-radius: 5px !important;
    background: rgba(230,241,252,.9) !important;
    color: #1a344f !important;
}

body.messages-page .bubble.mine {
    align-self: flex-end !important;
    border-bottom-right-radius: 5px !important;
    background: linear-gradient(135deg, #ff7f50, #ff5520) !important;
    color: #fff !important;
    margin-left: auto !important;
}

body.messages-page .bubble.is-bot-message {
    background: linear-gradient(135deg, rgba(214,236,255,.95), rgba(198,228,252,.88)) !important;
    border-bottom-left-radius: 5px !important;
    color: #1a344f !important;
}

body.messages-page .bubble p,
body.messages-page .bubble.mine p,
body.messages-page .bubble.theirs p {
    margin: 0 !important;
    font-size: 0.93rem !important;
    line-height: 1.45 !important;
}

body.messages-page .bubble-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 8px !important;
    font-size: 0.75rem !important;
    opacity: .75 !important;
    color: #4e6e88 !important;
}

body.messages-page .bubble-head strong,
body.messages-page .bubble-head strong.bubble-sender-name {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

body.messages-page .bubble-head small {
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
}

body.messages-page .bubble.mine .bubble-sender-name { display: none !important; }
body.messages-page .bubble.mine .bubble-head { color: rgba(255,255,255,.7) !important; opacity: 1 !important; }
body.messages-page .bubble.mine .bubble-head small { color: rgba(255,255,255,.6) !important; }

/* Composer */
body.messages-page .chat-form,
body.messages-page .chat-form.chat-form-live {
    border-top: 1px solid rgba(196,218,237,.45) !important;
    padding: 10px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: transparent !important;
    border-radius: 0 !important;
    position: static !important;
    z-index: auto !important;
}

body.messages-page #message-text {
    resize: none !important;
    border: 1px solid rgba(180,210,234,.7) !important;
    border-radius: 22px !important;
    padding: 10px 16px !important;
    font-size: 0.93rem !important;
    line-height: 1.4 !important;
    background: rgba(240,248,255,.7) !important;
    min-height: 42px !important;
    max-height: 120px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #1a344f !important;
    transition: border-color 160ms ease, background 160ms ease !important;
}

body.messages-page #message-text:focus {
    outline: none !important;
    border-color: #5fa8d3 !important;
    background: rgba(247,252,255,.95) !important;
}

body.messages-page #message-text::placeholder {
    color: rgba(80,120,160,.5) !important;
}

body.messages-page .chat-composer-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
}

body.messages-page .chat-composer-row .icon-btn,
body.messages-page .chat-form .icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(180,210,234,.5) !important;
    background: rgba(240,248,255,.8) !important;
    color: #3d6b8e !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 140ms ease, transform 120ms ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

body.messages-page .chat-composer-row .icon-btn svg,
body.messages-page .chat-form .icon-btn svg {
    width: 18px !important;
    height: 18px !important;
}

body.messages-page .chat-composer-row .icon-btn:hover {
    background: rgba(210,232,248,.9) !important;
    transform: scale(1.06) !important;
}

body.messages-page .chat-composer-row .icon-send,
body.messages-page .chat-form .icon-send {
    background: linear-gradient(135deg, #ff7f50, #ff5520) !important;
    border-color: transparent !important;
    color: #fff !important;
    width: 40px !important;
    height: 40px !important;
}

body.messages-page .chat-composer-row .icon-send:hover {
    background: linear-gradient(135deg, #ff6835, #f03a10) !important;
    transform: scale(1.08) !important;
}

/* Dark mode */
body.theme-dark.messages-page .chat-header {
    border-color: rgba(100,140,180,.3) !important;
}

body.theme-dark.messages-page .bubble.theirs {
    background: rgba(28,52,72,.88) !important;
    color: #e9f4ff !important;
    border: none !important;
}

body.theme-dark.messages-page .bubble.mine {
    background: linear-gradient(135deg, #c85c32, #a83f18) !important;
    color: #fff !important;
    border: none !important;
}

body.theme-dark.messages-page .bubble.is-bot-message {
    background: rgba(18,44,68,.92) !important;
    color: #daeeff !important;
    border: none !important;
}

body.theme-dark.messages-page .bubble-head { color: #c8ddf1 !important; }

body.theme-dark.messages-page .contact-item:hover {
    background: rgba(28,55,78,.55) !important;
    border-color: rgba(90,140,180,.3) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.theme-dark.messages-page .contact-item.active {
    background: linear-gradient(135deg, rgba(120,55,30,.6), rgba(100,42,20,.5)) !important;
    border-color: rgba(200,120,80,.4) !important;
}

body.theme-dark.messages-page #message-text {
    background: rgba(16,34,52,.7) !important;
    border-color: rgba(100,145,183,.4) !important;
    color: #e2f0fc !important;
}

body.theme-dark.messages-page #message-text:focus {
    border-color: #5a9fca !important;
    background: rgba(20,42,62,.9) !important;
}

body.theme-dark.messages-page #message-text::placeholder {
    color: rgba(160,195,225,.5) !important;
}

body.theme-dark.messages-page .chat-composer-row .icon-btn,
body.theme-dark.messages-page .chat-form .icon-btn {
    background: rgba(22,46,67,.8) !important;
    border-color: rgba(100,145,183,.35) !important;
    color: #b8d5ee !important;
}

body.theme-dark.messages-page .chat-composer-row .icon-btn:hover {
    background: rgba(32,60,85,.9) !important;
}

body.theme-dark.messages-page .chat-form {
    border-color: rgba(100,140,180,.3) !important;
}

/* Mobile */
@media (max-width: 700px) {
    body.messages-page .chat-layout {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
        max-height: none !important;
    }
    body.messages-page .chat-sidebar,
    body.messages-page .chat-main {
        height: auto !important;
    }
    body.messages-page .chat-layout.has-active-chat .chat-sidebar {
        display: none !important;
    }
    body.messages-page .chat-layout:not(.has-active-chat) .chat-main {
        display: none !important;
    }
    body.messages-page .chat-layout.has-active-chat .chat-main {
        display: grid !important;
        min-height: 100svh !important;
    }
}