/*
 * Conversations (Modules/Chat): the chat window (chat::inc.chat_modal, .gzchat), the conversations list
 * (chat::inc.inbox_items, .gzc-*), the conversations window of the storefront (chat::inc.inbox) and the panels' page.
 * Built on the gozar-ui.css tokens; overrides the old chat rules of main.css.
 */

/* ======================= the chat window ======================= */
.gzchat { --gzchat-wall: #F3EFF7; font-family: var(--gz-font); }
.gzchat .modal-dialog { max-width: 760px; }
.gzchat .modal-content {
    display: flex; flex-direction: column; height: min(740px, calc(100vh - 3.5rem)); overflow: hidden;
    border: 0; border-radius: var(--gz-radius-xl); background: var(--gz-surface); box-shadow: 0 24px 64px rgba(40, 25, 51, .25);
}
/* the same opening as the bottom bar's panels: a short rise and a fade */
.gzchat.fade .modal-dialog { transform: translateY(16px) scale(.98); transition: transform .28s var(--gz-ease); }
.gzchat.show .modal-dialog { transform: none; }

/* bar */
#chatModal .gzchat-head {
    position: relative; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; flex: 0 0 auto;
    min-height: 64px; padding: 8px 10px 8px 12px !important; border-bottom: 1px solid var(--gz-border);
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
}
.gzchat-back, .gzchat-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--gz-ink-2); font-size: 20px; cursor: pointer;
    transition: background var(--gz-fast);
}
.gzchat-back:hover, .gzchat-icon-btn:hover { background: var(--gz-surface-2); }
.gzchat-back { display: none; font-size: 22px; }
.gzchat .chat-receiver-profile { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
#chatModal .gzchat-avatar { position: relative; flex-shrink: 0; width: 44px; height: 44px; margin: 0 !important; }
.gzchat-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--gz-surface-3); }
.gzchat-avatar .online-badge {
    position: absolute; bottom: 1px; inset-inline-end: 1px; top: auto; left: auto; right: auto;
    width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--gz-success, #16A34A);
}
.gzchat-who { display: flex; flex-direction: column; min-width: 0; }
.gzchat-who .modal-title {
    overflow: hidden; margin: 0; color: var(--gz-ink); font-size: 15px; font-weight: 800; line-height: 1.6;
    white-space: nowrap; text-overflow: ellipsis;
}
.gzchat-status { color: var(--gz-ink-3); font-size: 12px; line-height: 1.5; white-space: nowrap; }
.gzchat-online-text { display: none; color: var(--gz-success, #16A34A); font-weight: 700; }
.gzchat:has(.chat-receiver-online:not(.d-none)) .gzchat-online-text { display: inline; }
.gzchat:has(.chat-receiver-online:not(.d-none)) .gzchat-seen-text { display: none; }
.gzchat-shop {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 1; min-width: 0; max-width: 170px; height: 32px; padding: 0 10px;
    border-radius: var(--gz-radius-pill); background: var(--gz-brand-50); color: var(--gz-brand-700) !important;
    font-size: 12px; font-weight: 700; white-space: nowrap; text-decoration: none !important;
}
.gzchat-shop span { overflow: hidden; text-overflow: ellipsis; }
.gzchat-shop.d-none { display: none !important; }
.gzchat-shop i { font-size: 15px; }
.gzchat-shop:hover { background: var(--gz-brand-100); }

/* the wall */
#chatModal .modal-body { display: flex; flex: 1 1 auto; min-height: 0; padding: 0 !important; }
.gzchat .chat-container { flex: 1; max-width: none; height: auto !important; min-height: 0; background: var(--gzchat-wall); }
.gzchat .chat-messages {
    padding: 14px 14px 10px; overscroll-behavior: contain;
    background-color: var(--gzchat-wall);
    background-image: radial-gradient(rgba(147, 57, 217, .09) 1.1px, transparent 1.2px);
    background-size: 20px 20px;
}
.gzchat .loading-screen { background: rgba(243, 239, 247, .7); }
.gzchat-notice {
    display: flex; gap: 10px; max-width: 460px; margin: 6px auto 18px; padding: 10px 14px;
    border-radius: var(--gz-radius-lg); background: rgba(255, 255, 255, .88); color: var(--gz-ink-2);
    font-size: 12px; line-height: 1.9; box-shadow: 0 1px 2px rgba(40, 25, 51, .06);
}
.gzchat-notice > i { flex-shrink: 0; margin-top: 3px; color: var(--gz-brand-500); font-size: 18px; }
.gzchat-notice ul { margin: 0; padding-inline-start: 14px; }
.gzchat-notice a { color: var(--gz-brand-600); font-weight: 700; }

/* bubbles: mine on the start side in the brand colour, theirs white on the end side; the time and ticks inside */
.gzchat .message {
    position: relative; max-width: min(78%, 440px); margin: 0 0 6px; padding: 7px 12px 5px;
    border-radius: 18px; font-size: 14px; line-height: 1.85; box-shadow: 0 1px 1.5px rgba(40, 25, 51, .08);
}
.gzchat .message.is-new { animation: gzchat-in .2s var(--gz-ease); }
.gzchat .message:active { transform: scale(.98); }
.gzchat .sender-1 { align-self: flex-start; float: none; background: var(--gz-brand-500); color: #fff; border-end-start-radius: 6px; }
.gzchat .sender-2 { align-self: flex-end; background: #fff; color: var(--gz-ink); border-end-end-radius: 6px; }
.gzchat .message-content { padding: 0; border-radius: 0; background: none !important; color: inherit !important; font-weight: 400; }
.gzchat .message-footer {
    float: none !important; justify-content: flex-end; gap: 3px; margin: 1px 0 0; font-size: 11px; line-height: 1.4; opacity: 1;
}
.gzchat .sender-1 .message-footer { color: rgba(255, 255, 255, .78); }
.gzchat .sender-2 .message-footer { color: var(--gz-ink-3); }
.gzchat .message-time { margin: 0; }
.gzchat .check-mark { width: 15px; height: 15px; }
.gzchat .message[data-message-type="image"] { padding: 4px; }
.gzchat .message[data-message-type="image"] .message-footer { padding: 2px 6px 1px; }
.gzchat .message[data-message-type="image"] .chat-message-product { width: auto; max-width: 260px; margin: 0; padding: 0; background: none; }
.gzchat .message[data-message-type="image"] .chat-message-product img { display: block; border-radius: 14px; }
.gzchat .chat-message-product {
    width: 200px; max-width: 100%; margin: 3px 0 6px; padding: 6px; border-radius: 14px; background: #fff;
    color: var(--gz-ink) !important;
}
.gzchat .chat-message-product img { border-radius: 10px; }
.gzchat .chat-message-product .title { display: block; padding: 2px 4px; font-size: 13px; line-height: 1.7; }
.gzchat .sender-2 .chat-message-product { background: var(--gz-surface-2); }
@keyframes gzchat-in { from { opacity: 0; transform: translateY(6px); } }

/* composer */
.gzchat .chat-modal-footer {
    position: relative; display: flex; flex-direction: column; align-items: stretch; flex: 0 0 auto;
    padding: 8px 10px calc(6px + var(--gz-safe-bottom, 0px)); border-top: 1px solid var(--gz-border); background: #fff;
}
.gzchat .chat-modal-footer > * { margin: 0; }
.gzchat .chat-input-container { margin: 0; padding: 0; }
.gzchat .chat-input { align-items: flex-end; gap: 8px; }
.gzchat .chat-input textarea {
    min-height: 44px; max-height: 140px; padding: 10px 16px; border: 1px solid transparent; border-radius: 22px;
    background: var(--gz-surface-2); color: var(--gz-ink); font: 400 14px/1.7 var(--gz-font); field-sizing: content;
    transition: border-color var(--gz-fast), background var(--gz-fast);
}
.gzchat .chat-input textarea:focus { border-color: var(--gz-brand-200); background: #fff; }
.gzchat #chatImageButton {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; padding: 0 !important; border-radius: 50%; background: var(--gz-surface-2); color: var(--gz-ink-2);
    cursor: pointer; transition: background var(--gz-fast), color var(--gz-fast);
}
.gzchat #chatImageButton:hover { background: var(--gz-brand-50); color: var(--gz-brand-600); }
.gzchat #chatImageButton i { font-size: 20px; }
.gzchat .chat-input .gzchat-send {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--gz-brand-500); color: #fff;
    box-shadow: 0 6px 14px rgba(147, 57, 217, .3); transition: background var(--gz-fast), transform var(--gz-fast), opacity var(--gz-fast);
}
.gzchat .chat-input .gzchat-send:hover { background: var(--gz-brand-600); }
.gzchat .chat-input .gzchat-send:active { transform: scale(.92); }
.gzchat .chat-input .gzchat-send.disabled { opacity: .4 !important; box-shadow: none; }
.gzchat-send .value { display: inline-flex; }
.gzchat-send svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.gzchat-send.loading .value, #chatImageButton.loading i { visibility: hidden; }
.gzchat .chat-modal-rule { padding: 6px 0 0; border: 0; color: var(--gz-ink-3); font-size: 11px; text-align: center; }
.gzchat .chat-modal-rule a { color: var(--gz-ink-2); text-decoration: underline; }

/* a product the chat started from, waiting to be sent with the first message */
.gzchat .chat-modal-product-item {
    position: static; display: flex; align-items: center; gap: 10px; height: auto; margin: 0 0 8px !important; padding: 6px;
    border: 1px solid var(--gz-border); border-radius: 14px; background: var(--gz-surface-2);
}
.gzchat .chat-modal-product-item img { width: 46px; height: 46px; margin: 0; border-radius: 10px; object-fit: cover; }
.gzchat #chatModalProductClose { order: 3; width: 34px; height: 34px; margin-inline-start: auto; border-radius: 50%; }
.gzchat #chatModalProductClose:hover { background: #fff; }
.gzchat #chatModalProductTitle { font-size: 13px; line-height: 1.7; }

/* phones: a full screen page */
@media (max-width: 575.98px) {
    .gzchat .modal-content { height: 100%; border-radius: 0; box-shadow: none; }
    #chatModal .gzchat-head { padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; padding-inline: 4px 8px !important; }
    .gzchat-back { display: inline-flex; }
    .gzchat-close { display: none; }
    .gzchat-shop { width: 36px; padding: 0; justify-content: center; }
    .gzchat-shop span { display: none; }
    .gzchat .message { max-width: 84%; }
}

/* ======================= conversations list ======================= */
.gzc-list { display: flex; flex-direction: column; gap: 2px; font-family: var(--gz-font); }
.gzc-item {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; overflow: hidden;
    border: 0; border-radius: var(--gz-radius-lg); background: transparent; color: var(--gz-ink); text-align: start; cursor: pointer;
    transition: background var(--gz-fast);
}
.gzc-item:hover { background: var(--gz-surface-2); }
.gzc-item:active { background: var(--gz-surface-3); }
.gzc-item.loading { pointer-events: none; }
.gzc-avatar { position: relative; flex-shrink: 0; width: 52px; height: 52px; }
.gzc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--gz-surface-3); }
.gzc-online {
    position: absolute; bottom: 1px; inset-inline-end: 1px; width: 13px; height: 13px;
    border: 2.5px solid #fff; border-radius: 50%; background: var(--gz-success, #16A34A);
}
.gzc-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.gzc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.gzc-name { overflow: hidden; font-size: 14.5px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.gzc-time { flex-shrink: 0; color: var(--gz-ink-3); font-size: 11.5px; }
.gzc-last { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--gz-ink-3); font-size: 13px; }
.gzc-last > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gzc-last > i { flex-shrink: 0; font-size: 14px; }
.gzc-tick { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: var(--gz-ink-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gzc-tick.is-seen { stroke: var(--gz-brand-500); }
.gzc-badge {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 21px; height: 21px; padding: 0 6px;
    border-radius: var(--gz-radius-pill); background: var(--gz-brand-500); color: #fff; font-size: 11px; font-weight: 800;
}
.gzc-item.is-unread .gzc-name { font-weight: 900; }
.gzc-item.is-unread .gzc-time { color: var(--gz-brand-600); font-weight: 700; }
.gzc-item.is-unread .gzc-last { color: var(--gz-ink-2); font-weight: 500; }
/* chat.js marks the row while its chat opens */
.gzc-loading { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; overflow: hidden; opacity: 0; }
.gzc-loading::after {
    content: ""; position: absolute; inset: 0; width: 40%; background: var(--gz-brand-500);
    animation: gzc-bar 1s var(--gz-ease) infinite;
}
.gzc-item.loading .gzc-loading { opacity: 1; }
@keyframes gzc-bar { from { transform: translateX(150%); } to { transform: translateX(-250%); } }

.gzc-skel { display: flex; align-items: center; gap: 12px; padding: 10px; }
.gzc-skel-avatar, .gzc-skel-lines span { background: linear-gradient(90deg, var(--gz-surface-2), var(--gz-surface-3), var(--gz-surface-2)); background-size: 200% 100%; animation: gzc-shine 1.2s linear infinite; }
.gzc-skel-avatar { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; }
.gzc-skel-lines { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.gzc-skel-lines span { height: 12px; border-radius: 6px; }
.gzc-skel-lines span:first-child { width: 45%; }
.gzc-skel-lines span:last-child { width: 75%; }
@keyframes gzc-shine { to { background-position: -200% 0; } }

.gzc-more { display: flex; justify-content: center; padding: 14px 0 18px; }
.gzc-more[hidden] { display: none; }
.gzc-spinner { width: 24px; height: 24px; border: 2.5px solid var(--gz-brand-100); border-top-color: var(--gz-brand-500); border-radius: 50%; animation: gzc-spin .8s linear infinite; }
@keyframes gzc-spin { to { transform: rotate(360deg); } }

.gzc-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; text-align: center; }
.gzc-empty-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 8px;
    border-radius: 50%; background: var(--gz-brand-50); color: var(--gz-brand-500); font-size: 30px;
}
.gzc-empty b { color: var(--gz-ink); font-size: 15px; }
.gzc-empty p { max-width: 300px; margin: 0; color: var(--gz-ink-3); font-size: 13px; line-height: 1.9; }
.gzc-retry {
    margin-top: 10px; padding: 8px 18px; border: 0; border-radius: var(--gz-radius-pill);
    background: var(--gz-brand-50); color: var(--gz-brand-700); font: 700 13px var(--gz-font); cursor: pointer;
}

/* the panels' page */
.gzc-page { padding: 14px; border: 1px solid var(--gz-border); border-radius: var(--gz-radius-xl); background: var(--gz-surface); }
.gzc-page-title { margin: 2px 6px 10px; color: var(--gz-ink); font-size: 18px; font-weight: 800; }
@media (max-width: 575.98px) { .gzc-page { padding: 12px 6px 6px; } .gzc-page-title { margin: 0 8px 8px; font-size: 17px; } }

/* ======================= the conversations window ======================= */
.gzc-dock { position: fixed; inset: 0; z-index: 1045; visibility: hidden; pointer-events: none; transition: visibility .3s; }
.gzc-dock[hidden] { display: none; }
.gzc-dock.is-open { visibility: visible; pointer-events: auto; }
.gzc-shade {
    position: absolute; inset: 0; background: var(--gz-overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .25s;
}
.gzc-dock.is-open .gzc-shade { opacity: 1; }
.gzc-panel {
    position: absolute; top: 12px; bottom: 12px; left: 12px; display: flex; flex-direction: column; width: 420px; overflow: hidden;
    border-radius: var(--gz-radius-xl); background: var(--gz-surface); box-shadow: 0 20px 60px rgba(40, 25, 51, .22);
    font-family: var(--gz-font); opacity: 0; transform: translateX(-24px);
    transition: opacity .22s, transform .28s var(--gz-ease);
}
.gzc-dock.is-open .gzc-panel { opacity: 1; transform: none; }
.gzc-head {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; height: 64px; padding: 0 18px 0 12px;
    border-bottom: 1px solid var(--gz-border);
}
.gzc-head h2 { margin: 0; color: var(--gz-ink); font-size: 17px; font-weight: 800; }
.gzc-x {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0;
    border-radius: 50%; background: var(--gz-surface-2); color: var(--gz-ink-2); font-size: 18px; cursor: pointer;
}
.gzc-x:hover { background: var(--gz-surface-3); }
.gzc-dock .gzc-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px; }
html.gzc-lock, html.gzc-lock body { overflow: hidden; }

@media (max-width: 991.98px) {
    /* a card above the bottom bar, like the side cart and the category menu */
    .gzc-panel {
        top: 8px; right: 8px; left: 8px; bottom: calc(84px + var(--gz-safe-bottom, 0px)); width: auto;
        transform: translateY(16px) scale(.98);
    }
    .gzc-head { height: 58px; padding: 0 16px 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .gzchat.fade .modal-dialog, .gzc-panel, .gzc-shade, .gzchat .message { transition: none; animation: none; }
}