/* Customer-service window: burgundy palette, no gap or modern layout dependency. */
body .kefu-overlay.support-chat { background: rgba(14,2,7,.78); -webkit-backdrop-filter: none; backdrop-filter: none; }
body .support-chat .kefu-modal {
    width: 100%; max-width: 480px; height: 100%; min-height: 0;
    margin: 0 auto; padding: 0; background: #260c14;
    background: linear-gradient(155deg,#39121e 0%,#210a12 70%); color: #f7e7ed;
    overflow: hidden; box-sizing: border-box;
}
body .support-chat .kefu-header {
    -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 82px;
    padding: 16px 18px 16px 58px;
    padding-top: calc(16px + constant(safe-area-inset-top));
    padding-top: calc(16px + env(safe-area-inset-top));
    background: #4d1c2b; background: linear-gradient(120deg,#632738,#37111f);
    border-bottom: 1px solid #713144;
    -webkit-justify-content: flex-start; justify-content: flex-start;
    box-shadow: 0 3px 14px rgba(10,0,4,.15);
}
body .support-chat .kefu-back {
    left: 12px; top: 24px;
    top: calc(24px + constant(safe-area-inset-top)); top: calc(24px + env(safe-area-inset-top));
    width: 32px; height: 32px; border-radius: 10px;
    background: rgba(255,231,240,.06); border: 1px solid rgba(231,169,191,.2);
}
body .support-chat .back-icon { width: 19px; height: 19px; color: #f4d8e2; }
body .support-chat-avatar {
    width: 42px; height: 42px; -webkit-flex: 0 0 42px; flex: 0 0 42px;
    margin-right: 12px; padding: 10px; box-sizing: border-box;
    border: 1px solid #ac6178; border-radius: 14px;
    background: linear-gradient(145deg,#a9516a,#70243e); color: #ffeaf2;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
}
body .support-chat-avatar svg { display: block; width: 100%; height: 100%; }
body .support-chat .kefu-title { text-align: left; }
body .support-chat .kefu-title h3 { margin: 0 0 5px; font-size: 16px; line-height: 21px; text-align: left; color: #fff0f5; }
body .support-chat .kefu-status { font-size: 11px; color: #d1a4b4; line-height: 16px; }
body .support-chat .status-dot { width: 6px; height: 6px; margin-right: 5px; }
body .support-chat .kefu-messages {
    -webkit-flex: 1 1 0%; flex: 1 1 0%; min-height: 0;
    padding: 20px 16px; background: transparent; scrollbar-width: thin;
    scrollbar-color: #74374b transparent;
}
body .support-chat .kefu-messages::-webkit-scrollbar { width: 3px; }
body .support-chat .kefu-messages::-webkit-scrollbar-thumb { background: #74374b; border-radius: 3px; }
body .support-chat .kefu-loading { margin: 20px 0; padding: 24px 16px; color: #c89bac; font-size: 13px; line-height: 1.8; }
body .support-chat .kefu-message-item { margin-bottom: 18px; }
body .support-chat .kefu-message-content {
    max-width: 84%; padding: 11px 14px; border: 1px solid #6e3447;
    border-radius: 15px; box-sizing: border-box; font-size: 14px; line-height: 1.65;
    word-wrap: break-word; overflow-wrap: break-word;
}
body .support-chat .message-staff .kefu-message-content {
    background: #43202d; color: #f7e7ed; border-radius: 4px 15px 15px 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
body .support-chat .message-user .kefu-message-content {
    background: #86374f; background: linear-gradient(135deg,#a04a65,#76273f);
    color: #fff3f7; border-color: #b5657f; border-radius: 15px 4px 15px 15px;
}
body .support-chat .kefu-message-time { color: #a9778b; font-size: 10px; margin-top: 6px; }
body .support-chat .kefu-media-image, body .support-chat .kefu-media-video { max-width: 100%; border: 1px solid #74374b; border-radius: 12px; }
body .support-chat .kefu-input-area {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    padding: 12px 12px 16px;
    padding-bottom: calc(16px + constant(safe-area-inset-bottom));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: #38121f; border-top: 1px solid #633043;
    -webkit-align-items: flex-end; align-items: flex-end;
}
body .support-chat .kefu-input-area > * { margin-right: 8px; }
body .support-chat .kefu-input-area > *:last-child { margin-right: 0; }
body .support-chat .kefu-input-tools { -webkit-flex: 0 0 38px; flex: 0 0 38px; }
body .support-chat .kefu-tool-btn {
    width: 38px; height: 44px; padding: 9px; background: #4a1c2c;
    border: 1px solid #71364a; border-radius: 12px;
}
body .support-chat .kefu-tool-icon { width: 20px; height: 20px; color: #d9a8bc; }
body .support-chat .kefu-input {
    -webkit-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; min-height: 44px; max-height: 110px;
    padding: 11px 12px; border: 1px solid #74374b; border-radius: 12px;
    background: #240b14; color: #f7e7ed; font-size: 16px; line-height: 20px;
    box-sizing: border-box; box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
body .support-chat .kefu-input:focus { outline: none; border-color: #c77c96; }
body .support-chat .kefu-input::-webkit-input-placeholder { color: #a57789; }
body .support-chat .kefu-send-btn {
    -webkit-flex: 0 0 58px; flex: 0 0 58px; width: 58px; height: 44px; min-height: 44px;
    padding: 0; border: 1px solid #b3657d; border-radius: 12px;
    background: #8e3a54; background: linear-gradient(135deg,#a6506b,#78283f);
    color: #fff0f6; font-size: 13px; font-weight: 700;
}
body .support-chat .kefu-send-btn:disabled { opacity: .5; }
@media (min-width: 600px) {
    body .kefu-overlay.support-chat { padding: 20px; box-sizing: border-box; }
    body .support-chat .kefu-modal { height: 100%; max-height: 760px; border: 1px solid #814055; border-radius: 20px; box-shadow: 0 16px 50px rgba(0,0,0,.45); }
}

/* Compact service header, unframed back arrow and icon-only send control. */
body #kefuModal.support-chat { background: rgba(69,24,43,.8); }
body #kefuModal.support-chat .kefu-modal {
    background: #421a2a;
    background: linear-gradient(155deg,#532334,#391525);
}
body #kefuModal.support-chat .kefu-header {
    min-height: 62px;
    padding: 10px 16px 10px 50px;
    padding-top: calc(10px + constant(safe-area-inset-top));
    padding-top: calc(10px + env(safe-area-inset-top));
}
body #kefuModal.support-chat .kefu-back {
    top: 15px; left: 10px;
    top: calc(15px + constant(safe-area-inset-top));
    top: calc(15px + env(safe-area-inset-top));
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
body #kefuModal.support-chat .support-chat-avatar {
    width: 34px; height: 34px; -webkit-flex-basis: 34px; flex-basis: 34px;
    padding: 7px; margin-right: 10px; border-radius: 11px;
}
body #kefuModal.support-chat .kefu-title h3 { font-size: 15px; line-height: 18px; margin-bottom: 3px; }
body #kefuModal.support-chat .kefu-status { font-size: 10px; line-height: 14px; }
body #kefuModal.support-chat .kefu-message-content { max-width: 94%; }
body #kefuModal.support-chat .message-staff .kefu-message-content { background: #633045; border-color: #8d4a63; color: #f9eaf0; }
body #kefuModal.support-chat .message-user .kefu-message-content {
    background: #a44e6c; background: linear-gradient(135deg,#b75c7b,#8e3b5b);
    border-color: #cc829a; color: #fff0f6;
}
body #kefuModal.support-chat .kefu-input-area { background: #512237; }
body #kefuModal.support-chat .kefu-input { background: #3d192a; color: #f9eaf0; }
body #kefuModal.support-chat .kefu-send-btn {
    -webkit-flex: 0 0 44px; flex: 0 0 44px; width: 44px; padding: 10px;
    background: #a04b69; border-color: #c77894; color: #ffedf5;
}
body #kefuModal.support-chat .support-send-icon { display: block; width: 22px; height: 22px; margin: 0 auto; }
body #kefuModal.support-chat .kefu-loading { color: #e3b9ca !important; }

/* Wider, quieter message typography and a photographic support avatar. */
body #kefuModal.support-chat .kefu-messages { padding-left: 12px; padding-right: 12px; }
body #kefuModal.support-chat .kefu-message-content { max-width: 98%; font-size: 13px; line-height: 1.65; }
body #kefuModal.support-chat .support-chat-avatar {
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #81384f url('/img/support-agent.jpg') center center no-repeat;
    background-size: cover;
}
body #kefuModal.support-chat .support-chat-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; }

/* Header portrait, inline connection status, round send and staff avatars. */
body #kefuModal.support-chat .support-chat-avatar {
    width: 44px; height: 44px;
    -webkit-flex: 0 0 44px; flex: 0 0 44px;
    margin-right: 10px;
}
body #kefuModal.support-chat .kefu-title {
    display: -webkit-flex; display: flex;
    -webkit-align-items: center; align-items: center;
    -webkit-flex: 1 1 0%; flex: 1 1 0%; min-width: 0;
}
body #kefuModal.support-chat .kefu-title h3 {
    -webkit-flex: 0 0 auto; flex: 0 0 auto;
    margin: 0 10px 0 0; white-space: nowrap;
}
body #kefuModal.support-chat .kefu-status { min-width: 0; margin: 0; }
body #kefuModal.support-chat #kefuStatusText {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body #kefuModal.support-chat .kefu-send-btn { border-radius: 50%; }
body #kefuModal.support-chat .kefu-message-item.message-staff {
    position: relative; padding-left: 40px; box-sizing: border-box; min-height: 32px;
}
body #kefuModal.support-chat .kefu-message-item.message-staff::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 30px; height: 30px; border: 1px solid #b56a84; border-radius: 50%;
    background: #81384f url('/img/support-agent.jpg') center center no-repeat;
    background-size: cover; pointer-events: none;
}

/* Tighter service header with a larger, edge-aligned back arrow. */
body #kefuModal.support-chat .kefu-header {
    min-height: 54px;
    padding: 5px 12px 5px 42px;
    padding-top: calc(5px + constant(safe-area-inset-top));
    padding-top: calc(5px + env(safe-area-inset-top));
}
body #kefuModal.support-chat .kefu-back {
    left: 2px;
    top: 5px;
    top: calc(5px + constant(safe-area-inset-top));
    top: calc(5px + env(safe-area-inset-top));
    width: 38px;
    height: 44px;
}
body #kefuModal.support-chat .back-icon { width: 27px; height: 27px; }

/* Balance header and message avatar sizes. */
body #kefuModal.support-chat .support-chat-avatar {
    width: 40px;
    height: 40px;
    -webkit-flex: 0 0 40px;
    flex: 0 0 40px;
}
body #kefuModal.support-chat .kefu-message-item.message-staff { padding-left: 46px; min-height: 36px; }
body #kefuModal.support-chat .kefu-message-item.message-staff::before { width: 36px; height: 36px; }

/* Larger connection status, wider bubbles and rounded composer surface. */
body #kefuModal.support-chat .kefu-status { font-size: 12px; line-height: 18px; }
body #kefuModal.support-chat .kefu-message-content { max-width: 100%; }
body #kefuModal.support-chat .kefu-messages { padding-left: 10px; padding-right: 10px; }
body #kefuModal.support-chat .kefu-message-item.message-staff { padding-left: 43px; }
body #kefuModal.support-chat .kefu-input-area {
    margin: 0 8px 8px;
    border: 1px solid #814259;
    border-radius: 18px;
    padding: 10px;
    padding-bottom: calc(10px + constant(safe-area-inset-bottom));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* Edge-to-edge composer with rounded top corners only. */
body #kefuModal.support-chat .kefu-input-area {
    margin-left: 0;
    margin-right: 0;
    border-radius: 18px 18px 0 0;
}

/* Keep the desktop conversation inside the same 480px phone column. */
body #kefuModal.support-chat.active {display:-webkit-flex;display:flex;-webkit-align-items:stretch;align-items:stretch;-webkit-justify-content:center;justify-content:center;overflow:hidden;}
body #kefuModal.support-chat .kefu-modal {position:relative;top:auto;right:auto;bottom:auto;left:auto;-webkit-transform:none;transform:none;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-flex:0 1 480px;flex:0 1 480px;width:100%;max-width:480px;min-width:0;height:100%;max-height:100%;min-height:0;margin:0;padding:0;box-sizing:border-box;}
body #kefuModal.support-chat .kefu-header,body #kefuModal.support-chat .kefu-messages,body #kefuModal.support-chat .kefu-input-area {width:100%;min-width:0;box-sizing:border-box;}
body #kefuModal.support-chat .kefu-header,body #kefuModal.support-chat .kefu-input-area {-webkit-flex-shrink:0;flex-shrink:0;}
body #kefuModal.support-chat .kefu-messages {-webkit-flex:1 1 0%;flex:1 1 0%;min-height:0;overflow-y:auto;overflow-x:hidden;}