#zn-support-app {
        --zone-bg: #1a1919;
        --zone-surface: #222121;
        --zone-border: rgba(255,255,255,.08);
        --zone-text: #f9fafb;
        --zone-text-muted: #9ca3af;
        --zone-primary: rgba(49, 49, 49, 1);
        --zone-msg-bg-light: #eab308;
        --zone-error-red: #0e3affff;
      }

      .zone-chat-row {
        display: flex;
        margin-bottom: 12px;
      }

      .zone-chat-row-start {
        justify-content: flex-start;
      }

      .zone-chat-row-end {
        justify-content: flex-end;
      }

      .zone-chat-inner {
        display: flex;
        flex-direction: column;
        max-width: 100%;
      }

      .zone-chat-inner-start {
        align-items: flex-start;
      }

      .zone-chat-inner-end {
        align-items: flex-end;
      }

      .zone-chat-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
      }

      .zone-chat-avatar {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        overflow: hidden;
        flex-shrink: 0;
      }

      .zone-chat-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .zone-chat-meta {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: .78rem;
      }

      .zone-chat-name {
        font-weight: 400;
        color: var(--zone-text);
      }

      .zone-chat-time {
        font-size: .72rem;
        color: var(--zone-text-muted);
      }

      .zone-chat-bubble {
        font-size: .86rem;
        line-height: 1.45;
        max-width: 400px;
        word-wrap: break-word;
        word-break: break-word;
      }

      .zone-chat-bubble-start {
        align-self: flex-start;
      }

      .zone-chat-bubble-end {
        margin-right: 0;
        margin-left: auto;
        text-align: right;
      }

      .zone-avatar {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .zone-avatar-lg {
        width: 50px;
        height: 50px;
      }

      .zone-avatar-with-gap {
        margin-right: 30px;
      }

      .zone-avatar-inner {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 999px;
        overflow: hidden;
        background: var(--zone-bg);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
      }

      .zone-avatar-img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        position: relative;
        z-index: 1;
      }

      .zone-avatar-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        z-index: 2;
      }

      .zone-avatar-status {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        background: #22c55e;
        border: 2px solid var(--zone-border);
        z-index: 3;
      }

      .zone-chat-header .zone-avatar-lg {
        width: 32px;
        height: 32px;
      }

      .zone-hidden {
        display: none !important;
      }

      .zone-mb-15 {
        margin-bottom: 15px;
      }

      #supportsAddForm {
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 1000;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.25s ease-out, transform 0.25s ease-out;
        display: none;
        margin: 0;
        padding: 0;
      }

      #supportsAddForm:not(.zone-hidden) {
        display: block;
        opacity: 1;
        transform: translateY(0);
      }

      #support-menu {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 360px;
        max-width: calc(100vw - 40px);
        height: 520px;
        border-radius: 18px;
        color: var(--zone-text);
        overflow: hidden;
        border: 1px solid var(--zone-border) !important;
        background: var(--zone-bg) !important;
        box-shadow:
          rgba(32, 39, 44, 0.16) 0px 18px 40px 0px,
          rgba(0, 0, 0, 0.45) 0px 0px 0px 1px !important;
        opacity: 0;
        transform: scale(0.96) translateY(6px);
        transition:
          opacity 0.22s ease,
          transform 0.22s ease,
          width 0.22s ease,
          height 0.22s ease,
          box-shadow 0.22s ease;
      }

      #support-menu.zone-active {
        opacity: 1;
        transform: scale(1) translateY(0);
      }

      #support-menu.zone-expanded {
        width: 430px;
        max-width: calc(100vw - 40px);
        height: 640px;
        box-shadow:
          rgba(32, 39, 44, 0.26) 0px 22px 60px 0px,
          rgba(0, 0, 0, 0.55) 0px 0px 0px 1px !important;
      }

      @media (max-width: 480px) {
        #support-menu.zone-expanded {
          width: calc(100vw - 40px);
        }
      }

      .ck-editor {
        border: 1px solid var(--zone-border) !important;
        background: var(--zone-bg) !important;
      }

      #support-menu .ck.ck-editor__main .ck-content {
        border-radius: 12px !important;
        border: none !important;
      }

      .ck.ck-toolbar {
        border: 1px solid var(--zone-border) !important;
        background: var(--zone-bg) !important;
      }

      .ck-reset_all :not(.ck-reset_all-excluded *),
      .ck.ck-reset_all {
        color: #ffffff;
      }

      .ck-button:hover {
        color: #000;
      }

      #support-menu .zone-card-header {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        background: var(--zone-bg);
        border-bottom: 1px solid var(--zone-border);
        position: relative;
      }

      #support-menu .zone-card-title {
        margin: 0;
        font-size: .95rem;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      #support-menu .zone-logo {
        height: 26px;
        width: auto;
        object-fit: contain;
      }

      #supportAgentsStack {
        margin-left: auto;
        margin-right: 80px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
      }

      #support-menu .zone-header-expand {
        position: absolute;
        top: 8px;
        right: 46px;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: none;
        background: rgba(255,255,255,.04);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s, transform .15s, box-shadow .15s;
      }

      #support-menu .zone-header-expand:hover {
        background: #2b2929;
        transform: scale(1.06);
        box-shadow: 0 0 0 1px #1f2937;
      }

      #support-menu .zone-header-expand svg {
        width: 16px;
        height: 16px;
        color: #e5e7eb;
      }

      #support-menu .zone-header-close {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: none;
        background: rgba(255,255,255,.04);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s, transform .15s, box-shadow .15s;
      }

      #support-menu .zone-header-close:hover {
        background: #2b2929;
        transform: scale(1.06);
        box-shadow: 0 0 0 1px #1f2937;
      }

      #support-menu .zone-header-close svg {
        width: 16px;
        height: 16px;
        color: #e5e7eb;
      }

      #support-menu .zone-card-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 14px 10px 18px;
        background: var(--zone-bg);
      }

      #support-menu .zone-card-body {
        scrollbar-width: thin;
        scrollbar-color: rgba(40, 40, 40, 0.9) rgba(15, 23, 42, 0);
      }

      #support-menu .zone-card-body::-webkit-scrollbar {
        width: 6px;
      }

      #support-menu .zone-card-body::-webkit-scrollbar-track {
        background: rgba(34, 33, 33, .9);
        border-radius: 999px;
      }

      #support-menu .zone-card-body::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.9);
        border-radius: 999px;
      }

      #support-menu .zone-msg-bubble {
        margin-bottom: 20px;
        color: #fff;
        font-size: .9rem;
        font-weight: 300;
      }

      #support-menu .zone-msg-bubble p {
        margin: 0;
      }

      .zone-msg-appear {
        animation: zoneMsgAppear .26s ease-out;
        transform-origin: bottom left;
      }

      @keyframes zoneMsgAppear {
        0% {
          opacity: 0;
          transform: translateY(10px) scale(0.98);
        }

        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      #support-menu .zone-card-footer {
        background: var(--zone-bg);
        border-top: 1px solid var(--zone-border);
        position: relative;
        padding-top: 1.5rem;
      }

      #textareaMessageSupport {
        width: 100%;
        min-height: 60px;
        border-radius: 12px;
        border: 1px solid var(--zone-border);
        background: var(--zone-bg);
        color: var(--zone-text);
        padding: 8px 10px;
        font-size: .85rem;
        resize: vertical;
      }

      #support-menu .ck.ck-editor__main .ck-content {
        background: var(--zone-bg) !important;
        color: var(--zone-text) !important;
        min-height: 40px;
        max-height: 120px;
      }

      #support-btn {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 58px;
        height: 58px;
        border-radius: 999px;
        background: var(--zone-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 9999;
        transition: transform .25s, box-shadow .25s, background-color .25s, opacity .2s;
        margin: 0;
        padding: 0;
      }

      #support-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 35px rgba(0, 0, 0, .9);
      }

      #support-btn.zone-active {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.85);
        box-shadow: none;
      }

      #support-btn #icon svg {
        width: 28px;
        height: 28px;
        color: #fff;
      }

      #support-hint {
        position: fixed;
        left: 20px;
        bottom: 90px;
        max-width: 280px;
        padding: 10px 25px;
        background: #ffffffff;
        color: #000000ff;
        border-radius: 14px;
        font-size: .88rem;
        display: none;
        z-index: 9998;
        margin: 0;
      }

      #support-hint.zone-visible {
        display: block;
      }

      #support-hint::after {
        content: "";
        position: absolute;
        left: 22px;
        top: 100%;
        border-width: 8px 8px 0 8px;
        border-style: solid;
        border-color: #ffffffff transparent transparent transparent;
      }

      #support-hint .zone-hint-close {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .25);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background .2s;
      }

      #support-hint .zone-hint-close:hover {
        background: rgba(0, 0, 0, .4);
      }

      #support-hint .zone-hint-close svg {
        width: 13px;
        height: 13px;
        color: #f9fafb;
      }

      .typing-wrap {
        padding: 2px 1.5rem 8px;
        min-height: 24px;
      }

      .typing-wrap .typing-indicator {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: .75rem;
        color: var(--zone-text-muted);
      }

      .typing-wrap .dots {
        display: inline-flex;
        gap: 2px;
        margin-right: 4px;
      }

      .typing-wrap .dot {
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: var(--zone-text-muted);
        animation: dotPulse 1.2s infinite ease-in-out;
      }

      .typing-wrap .dot:nth-child(2) {
        animation-delay: .15s;
      }

      .typing-wrap .dot:nth-child(3) {
        animation-delay: .3s;
      }

      @keyframes dotPulse {

        0%,
        60%,
        100% {
          opacity: .3;
          transform: translateY(0);
        }

        30% {
          opacity: 1;
          transform: translateY(-2px);
        }
      }

      .zone-scroll-bottom-btn {
        position: absolute;
        top: -16px;
        left: 50%;
        transform: translate(-50%, -2px);
        width: 30px;
        height: 30px;
        border-radius: 999px;
        border: none;
        background: rgba(0, 0, 0, 0.96);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .7);
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1100;
        transition: opacity .15s ease-out;
        opacity: 0;
        pointer-events: none;
      }

      .zone-scroll-bottom-btn svg {
        width: 14px;
        height: 14px;
        color: #e5e7eb;
      }

      .zone-scroll-bottom-btn.zone-visible {
        display: flex;
        opacity: 1;
        pointer-events: auto;
      }

      @keyframes scrollHintPulse {

        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.35);
        }

        50% {
          box-shadow: 0 0 0 6px rgba(148, 163, 184, 0);
        }
      }

      @keyframes scrollHintFloat {
        0% {
          transform: translate(-50%, -6px);
        }

        100% {
          transform: translate(-50%, 0);
        }
      }

      .zone-alert {
        border-radius: 10px;
        padding: 8px 10px;
        font-size: .8rem;
        margin: 6px 0;
      }

      .zone-alert-info {
        background: var(--zone-bg);
        border: 1px solid var(--zone-border);
        color: #e5e7eb;
      }

      .zone-flex {
        display: flex;
        font-size: .9rem !important;
      }

      .zone-flex-col {
        flex-direction: column;
      }

      .zone-align-center {
        align-items: center;
      }

      .zone-align-start {
        align-items: flex-start;
      }

      .zone-justify-start {
        justify-content: flex-start;
      }

      .zone-mb-8 {
        margin-bottom: 8px;
      }

      .zone-ms-8 {
        margin-left: 8px;
      }

      .zone-ms-4 {
        margin-left: 20px;
      }

      .zone-symbol-35 {
        width: 35px;
        height: 35px;
        border-radius: 999px;
        overflow: hidden;
      }

      .zone-symbol-label {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .zone-font-bold {
        font-weight: 300;
      }

      .zone-text-dark {
        color: var(--zone-text);
      }

      .zone-text-muted {
        color: var(--zone-text-muted);
      }

      .zone-fs-7 {
        font-size: .75rem;
      }

      .zone-inline-block {
        display: inline-block;
      }

      .zone-h-20 {
        height: 20px;
      }

      .zone-text-capitalize {
        text-transform: capitalize;
      }

      .zone-px-4 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }

      .zone-pb-3 {
        padding-bottom: .75rem;
      }

      .zone-pt-3 {
        padding-top: .75rem;
      }

      .zone-pb-2 {
        padding-bottom: .5rem;
      }
    
/* Local preview: stacking and short-screen containment only. */
#supportsAddForm{z-index:10020}#support-menu{max-height:calc(100dvh - 40px)}#support-menu .zone-card-footer{flex-shrink:0}#support-menu .zone-card-title{margin:0}#support-menu a{color:#abc8fa}#support-menu .zone-local-attachment{max-width:100%;max-height:220px;object-fit:contain;border-radius:8px}#support-menu .zone-local-message-text{white-space:pre-wrap;overflow-wrap:anywhere}#support-menu .zone-local-rating button{border:0;border-radius:7px;background:#29292c;color:#fff;padding:7px 10px;cursor:pointer}#support-menu .zone-local-rating{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}#textareaMessageSupport{max-height:120px}

#zn-support-app .zone-local-avatar{border-radius:50%;object-fit:cover;flex-shrink:0;}
#zn-support-app #typingBarPreSales{display:flex;align-items:center;gap:7px;min-height:28px;font-size:12px;}