/* ============================================================
   ChinPost Live Chat — Tier-1 UI (2026.2)
   Mobile-first sheet · iOS/Android keyboard safe · no zoom hacks
   Scoped under #chinpost-chatbox
   ============================================================ */
#chinpost-chatbox{
    --cp-navy:#0b1220;
    --cp-navy-2:#152238;
    --cp-accent:#D4AF37;
    --cp-accent-2:#f0d78c;
    --cp-cyan:#22d3ee;
    --cp-bg:#ffffff;
    --cp-surface:#f4f7fb;
    --cp-line:#e5eaf1;
    --cp-text:#0f172a;
    --cp-muted:#64748b;
    --cp-ai:#eef2f7;
    --cp-user:var(--cp-accent);
    --cp-radius:22px;
    --cp-shadow:0 24px 64px -16px rgba(11,18,32,.45);
    --cp-ease:cubic-bezier(.22,1,.36,1);
    --cp-safe-b:env(safe-area-inset-bottom,0px);
    --cp-safe-t:env(safe-area-inset-top,0px);
    --cp-safe-l:env(safe-area-inset-left,0px);
    --cp-safe-r:env(safe-area-inset-right,0px);
    --cp-vvh:100vh; /* JS may override with visualViewport height */
    --cp-fab:60px;
    --cp-gap:16px;

    position:fixed;
    bottom:calc(var(--cp-gap) + var(--cp-safe-b));
    z-index:2147483000;
    font-family:'Vazirmatn','IRANSans',system-ui,-apple-system,Tahoma,sans-serif;
    direction:rtl;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    touch-action:manipulation;
}
#chinpost-chatbox[data-position="left"]{ left:calc(var(--cp-gap) + var(--cp-safe-l)); }
#chinpost-chatbox[data-position="right"]{ right:calc(var(--cp-gap) + var(--cp-safe-r)); }
#chinpost-chatbox *,#chinpost-chatbox *::before,#chinpost-chatbox *::after{ box-sizing:border-box; }

/* ---------- Scrim (mobile sheet) ---------- */
#chinpost-chatbox .cp-scrim{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.48);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    opacity:0;
    transition:opacity .28s var(--cp-ease);
    z-index:-1;
    touch-action:none;
}
#chinpost-chatbox.is-open .cp-scrim{ opacity:1; }

/* ---------- Launcher ---------- */
#chinpost-chatbox .cp-toggle{
    position:relative;
    width:var(--cp-fab);
    height:var(--cp-fab);
    min-width:44px;
    min-height:44px;
    border:none;
    cursor:pointer;
    border-radius:50%;
    color:#fff;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,var(--cp-navy) 0%,var(--cp-navy-2) 100%);
    box-shadow:0 12px 32px -8px rgba(11,18,32,.55), inset 0 1px 0 rgba(255,255,255,.08);
    transition:transform .25s var(--cp-ease), box-shadow .25s var(--cp-ease);
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
#chinpost-chatbox .cp-toggle::after{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    background:conic-gradient(from 180deg,var(--cp-accent),var(--cp-cyan),var(--cp-accent));
    z-index:-1;
    opacity:0;
    transition:opacity .3s ease;
}
#chinpost-chatbox .cp-toggle:hover{ transform:translateY(-2px) scale(1.04); }
#chinpost-chatbox .cp-toggle:hover::after{ opacity:.9; }
#chinpost-chatbox .cp-toggle:focus-visible{ outline:3px solid var(--cp-cyan); outline-offset:3px; }
#chinpost-chatbox .cp-toggle:active{ transform:scale(.97); }
#chinpost-chatbox .cp-ico{
    position:absolute;
    display:grid;
    place-items:center;
    transition:opacity .2s,transform .3s var(--cp-ease);
}
#chinpost-chatbox .cp-ico svg{ width:26px; height:26px; }
#chinpost-chatbox .cp-ico-close{ opacity:0; transform:rotate(-45deg) scale(.6); }
#chinpost-chatbox.is-open .cp-ico-open{ opacity:0; transform:rotate(45deg) scale(.6); }
#chinpost-chatbox.is-open .cp-ico-close{ opacity:1; transform:none; }
#chinpost-chatbox .cp-badge{
    position:absolute;
    top:-2px;
    inset-inline-end:-2px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:700;
    border-radius:11px;
    display:grid;
    place-items:center;
    border:2px solid #fff;
}
#chinpost-chatbox .cp-badge[hidden]{ display:none !important; }

/* When open: hide FAB on full-sheet mobile (header close is enough) */
@media (max-width:767.98px){
    #chinpost-chatbox.is-open .cp-toggle{
        opacity:0;
        pointer-events:none;
        transform:scale(.6);
    }
    #chinpost-chatbox.is-open .cp-scrim{ display:block; }
}

@keyframes cp-attention{
    0%,82%,100%{ transform:translateY(0) scale(1); }
    86%{ transform:translateY(-7px) scale(1.04); }
    90%{ transform:translateY(0) scale(1); }
    94%{ transform:translateY(-4px) scale(1.02); }
    98%{ transform:translateY(0) scale(1); }
}
@keyframes cp-ring-pulse{
    0%,80%,100%{ opacity:0; transform:scale(1); }
    88%{ opacity:.85; transform:scale(1.12); }
}
#chinpost-chatbox:not(.is-open):not(.cp-engaged) .cp-toggle{
    animation:cp-attention 7s var(--cp-ease) infinite;
}
#chinpost-chatbox:not(.is-open):not(.cp-engaged) .cp-toggle::after{
    animation:cp-ring-pulse 7s ease-in-out infinite;
}

/* ---------- Invite bubble ---------- */
#chinpost-chatbox .cp-invite{
    position:absolute;
    bottom:calc(var(--cp-fab) + 12px);
    max-width:min(260px, calc(100vw - 88px));
    background:#fff;
    color:var(--cp-text);
    padding:12px 36px 12px 14px;
    border-radius:16px;
    box-shadow:var(--cp-shadow);
    border:1px solid var(--cp-line);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    opacity:0;
    transform:translateY(10px) scale(.92);
    pointer-events:none;
    transition:opacity .35s var(--cp-ease), transform .35s var(--cp-ease);
    z-index:1;
}
#chinpost-chatbox[data-position="left"] .cp-invite{ left:0; border-bottom-left-radius:4px; }
#chinpost-chatbox[data-position="right"] .cp-invite{ right:0; border-bottom-right-radius:4px; }
#chinpost-chatbox .cp-invite.is-shown{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#chinpost-chatbox .cp-invite[hidden]{ display:none !important; }
#chinpost-chatbox .cp-invite-text{ display:block; line-height:1.55; }
#chinpost-chatbox .cp-invite-x{
    position:absolute;
    top:6px;
    inset-inline-start:6px;
    width:28px;
    height:28px;
    border:none;
    background:transparent;
    color:var(--cp-muted);
    font-size:18px;
    line-height:1;
    cursor:pointer;
    border-radius:50%;
    display:grid;
    place-items:center;
    -webkit-tap-highlight-color:transparent;
}
#chinpost-chatbox .cp-invite-x:hover{ background:var(--cp-surface); color:var(--cp-text); }

/* ---------- Window (desktop / tablet card) ---------- */
#chinpost-chatbox .cp-window{
    position:absolute;
    bottom:calc(var(--cp-fab) + 14px);
    width:min(400px, calc(100vw - 32px));
    height:min(620px, calc(var(--cp-vvh) - 100px));
    max-height:calc(var(--cp-vvh) - 96px);
    background:var(--cp-bg);
    border:1px solid var(--cp-line);
    border-radius:var(--cp-radius);
    box-shadow:var(--cp-shadow);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    opacity:0;
    transform:translateY(14px) scale(.96);
    pointer-events:none;
    transition:opacity .28s var(--cp-ease), transform .28s var(--cp-ease);
    /* Isolate layout from page reflow */
    contain:layout style;
}
#chinpost-chatbox[data-position="left"]  .cp-window{ left:0; right:auto; transform-origin:bottom left; }
#chinpost-chatbox[data-position="right"] .cp-window{ left:auto; right:0; transform-origin:bottom right; }
#chinpost-chatbox .cp-window[hidden]{ display:flex !important; visibility:visible; }
#chinpost-chatbox:not(.is-open) .cp-window{
    opacity:0;
    pointer-events:none;
    visibility:hidden;
}
#chinpost-chatbox.is-open .cp-window{
    opacity:1;
    transform:none;
    pointer-events:auto;
    visibility:visible;
}

/* ---------- Header ---------- */
#chinpost-chatbox .cp-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    padding-top:max(12px, var(--cp-safe-t));
    background:linear-gradient(135deg,var(--cp-navy),var(--cp-navy-2));
    color:#fff;
    flex:0 0 auto;
    min-height:56px;
}
#chinpost-chatbox .cp-id{ display:flex; align-items:center; gap:11px; min-width:0; }
#chinpost-chatbox .cp-avatar{ position:relative; width:40px; height:40px; flex-shrink:0; }
#chinpost-chatbox .cp-avatar img{
    width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); object-fit:cover;
}
#chinpost-chatbox .cp-online{
    position:absolute; bottom:1px; inset-inline-end:1px;
    width:11px; height:11px; border-radius:50%;
    background:#22c55e; border:2px solid var(--cp-navy);
}
#chinpost-chatbox .cp-id-txt{ display:flex; flex-direction:column; min-width:0; }
#chinpost-chatbox .cp-id-txt strong{
    font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#chinpost-chatbox .cp-status{ font-size:11px; color:#9fb3d1; }
#chinpost-chatbox .cp-header-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
#chinpost-chatbox .cp-min,
#chinpost-chatbox .cp-close-sheet{
    background:rgba(255,255,255,.12);
    border:none;
    color:#fff;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    border-radius:12px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:background .2s;
    -webkit-tap-highlight-color:transparent;
}
#chinpost-chatbox .cp-min:hover,
#chinpost-chatbox .cp-close-sheet:hover{ background:rgba(255,255,255,.22); }
#chinpost-chatbox .cp-close-sheet{ display:none; }

/* ---------- Registration ---------- */
#chinpost-chatbox .cp-reg{
    padding:22px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
    flex:1;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
#chinpost-chatbox .cp-reg[hidden]{ display:none !important; }
#chinpost-chatbox .cp-reg-hero{ text-align:center; }
#chinpost-chatbox .cp-plane{ font-size:32px; line-height:1; }
#chinpost-chatbox .cp-reg-hero h3{ margin:8px 0 4px; font-size:17px; color:var(--cp-navy); font-weight:800; }
#chinpost-chatbox .cp-reg-hero p{ margin:0; font-size:13px; color:var(--cp-muted); }
#chinpost-chatbox .cp-reg-form{ display:flex; flex-direction:column; gap:10px; }
/* 16px+ inputs = no iOS auto-zoom */
#chinpost-chatbox .cp-field input{
    width:100%;
    padding:14px 14px;
    border:1px solid var(--cp-line);
    border-radius:14px;
    font-size:16px;
    font-family:inherit;
    background:var(--cp-surface);
    color:var(--cp-text);
    transition:border-color .2s, box-shadow .2s;
    -webkit-appearance:none;
    appearance:none;
}
#chinpost-chatbox .cp-field input:focus{
    outline:none;
    border-color:var(--cp-accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--cp-accent) 22%,transparent);
}
#chinpost-chatbox .cp-start{
    margin-top:4px;
    padding:15px;
    min-height:48px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    font-family:inherit;
    font-weight:800;
    font-size:15px;
    color:var(--cp-navy);
    background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent-2));
    transition:filter .2s, transform .1s;
    -webkit-tap-highlight-color:transparent;
}
#chinpost-chatbox .cp-start:hover{ filter:brightness(1.05); }
#chinpost-chatbox .cp-start:active{ transform:translateY(1px); }
#chinpost-chatbox .cp-start:disabled{ opacity:.6; cursor:default; }
#chinpost-chatbox .cp-privacy{ text-align:center; font-size:11px; color:var(--cp-muted); margin:2px 0 0; }

/* ---------- Conversation ---------- */
#chinpost-chatbox .cp-body{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
}
#chinpost-chatbox .cp-body[hidden]{ display:none !important; }
#chinpost-chatbox .cp-mode{
    display:flex;
    gap:6px;
    padding:10px 12px;
    border-bottom:1px solid var(--cp-line);
    flex:0 0 auto;
    background:var(--cp-bg);
}
#chinpost-chatbox .cp-mode-btn{
    flex:1;
    padding:10px 8px;
    min-height:42px;
    border:1px solid var(--cp-line);
    background:var(--cp-bg);
    border-radius:12px;
    font-family:inherit;
    font-size:12.5px;
    font-weight:700;
    color:var(--cp-muted);
    cursor:pointer;
    transition:.2s;
    -webkit-tap-highlight-color:transparent;
}
#chinpost-chatbox .cp-mode-btn.is-active{
    background:var(--cp-navy);
    color:#fff;
    border-color:var(--cp-navy);
}

#chinpost-chatbox .cp-messages{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--cp-surface);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scroll-behavior:smooth;
}
#chinpost-chatbox .cp-messages::-webkit-scrollbar{ width:6px; }
#chinpost-chatbox .cp-messages::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:4px; }

#chinpost-chatbox .cp-msg{
    max-width:86%;
    padding:11px 13px;
    border-radius:16px;
    font-size:15px;
    word-wrap:break-word;
    overflow-wrap:anywhere;
    position:relative;
    animation:cp-in .32s var(--cp-ease) both;
}
@keyframes cp-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
#chinpost-chatbox .cp-msg.ai,
#chinpost-chatbox .cp-msg.admin{
    align-self:flex-start;
    background:var(--cp-ai);
    color:var(--cp-text);
    border-bottom-right-radius:5px;
}
#chinpost-chatbox .cp-msg.admin{ background:#e0f2fe; }
#chinpost-chatbox .cp-msg.user{
    align-self:flex-end;
    background:var(--cp-user);
    color:var(--cp-navy);
    border-bottom-left-radius:5px;
    font-weight:600;
}
#chinpost-chatbox .cp-time{ display:block; font-size:10px; opacity:.55; margin-top:4px; }

#chinpost-chatbox .cp-typing{ display:flex; gap:4px; padding:6px 18px 0; flex:0 0 auto; }
#chinpost-chatbox .cp-typing[hidden]{ display:none !important; }
#chinpost-chatbox .cp-typing span{
    width:7px; height:7px; border-radius:50%; background:var(--cp-muted);
    animation:cp-bounce 1.2s infinite;
}
#chinpost-chatbox .cp-typing span:nth-child(2){ animation-delay:.18s; }
#chinpost-chatbox .cp-typing span:nth-child(3){ animation-delay:.36s; }
@keyframes cp-bounce{
    0%,60%,100%{ transform:translateY(0); opacity:.4; }
    30%{ transform:translateY(-5px); opacity:1; }
}

#chinpost-chatbox .cp-quick{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding:8px 12px 4px;
    flex:0 0 auto;
    background:var(--cp-bg);
}
#chinpost-chatbox .cp-qr{
    padding:10px 12px;
    min-height:40px;
    border:1px solid var(--cp-line);
    background:var(--cp-bg);
    border-radius:999px;
    font-family:inherit;
    font-size:12.5px;
    font-weight:600;
    color:var(--cp-navy);
    cursor:pointer;
    transition:.2s;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
}
#chinpost-chatbox .cp-qr:hover{ background:var(--cp-navy); color:#fff; border-color:var(--cp-navy); }

#chinpost-chatbox .cp-input{
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:10px 12px;
    padding-bottom:max(10px, calc(8px + var(--cp-safe-b)));
    border-top:1px solid var(--cp-line);
    background:var(--cp-bg);
    flex:0 0 auto;
}
#chinpost-chatbox .cp-input textarea{
    flex:1;
    resize:none;
    max-height:120px;
    min-height:44px;
    padding:12px 14px;
    border:1px solid var(--cp-line);
    border-radius:14px;
    font-family:inherit;
    /* Critical: 16px prevents iOS Safari focus-zoom */
    font-size:16px;
    background:var(--cp-surface);
    color:var(--cp-text);
    line-height:1.5;
    -webkit-appearance:none;
    appearance:none;
}
#chinpost-chatbox .cp-input textarea:focus{
    outline:none;
    border-color:var(--cp-accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--cp-accent) 20%,transparent);
}
#chinpost-chatbox .cp-attach,
#chinpost-chatbox .cp-send{
    flex:0 0 auto;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:.2s;
    -webkit-tap-highlight-color:transparent;
}
#chinpost-chatbox .cp-attach{ background:var(--cp-surface); color:var(--cp-muted); }
#chinpost-chatbox .cp-attach:hover{ background:var(--cp-line); }
#chinpost-chatbox .cp-send{
    background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent-2));
    color:var(--cp-navy);
}
#chinpost-chatbox .cp-send:hover{ filter:brightness(1.06); }

#chinpost-chatbox .cp-footer{
    text-align:center;
    padding:6px 8px;
    padding-bottom:max(6px, var(--cp-safe-b));
    font-size:10px;
    color:var(--cp-muted);
    background:var(--cp-bg);
    border-top:1px solid var(--cp-line);
    flex:0 0 auto;
}
#chinpost-chatbox .cp-footer strong{ color:var(--cp-navy); }

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme:dark){
    #chinpost-chatbox{
        --cp-bg:#0f172a;
        --cp-surface:#131f38;
        --cp-line:#24324d;
        --cp-text:#e7edf6;
        --cp-muted:#93a4bd;
        --cp-ai:#1c2942;
    }
    #chinpost-chatbox .cp-msg.admin{ background:#0c4a6e; color:#e0f2fe; }
    #chinpost-chatbox .cp-reg-hero h3{ color:#fff; }
    #chinpost-chatbox .cp-invite{ background:#0f172a; color:var(--cp-text); border-color:var(--cp-line); }
}

/* ============================================================
   MOBILE / NARROW: true full-viewport sheet
   Uses visualViewport height via --cp-vvh (set in JS)
   ============================================================ */
@media (max-width:767.98px){
    #chinpost-chatbox{
        bottom:calc(14px + var(--cp-safe-b));
        --cp-gap:14px;
    }
    #chinpost-chatbox[data-position="left"]{ left:calc(14px + var(--cp-safe-l)); }
    #chinpost-chatbox[data-position="right"]{ right:calc(14px + var(--cp-safe-r)); }

    #chinpost-chatbox .cp-window{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        top:auto !important;
        bottom:0 !important;
        width:100% !important;
        max-width:100% !important;
        height:var(--cp-vvh, 100dvh) !important;
        max-height:var(--cp-vvh, 100dvh) !important;
        border-radius:0 !important;
        border:none !important;
        transform:translate3d(0, 110%, 0) !important;
        transform-origin:bottom center !important;
        transition:transform .34s var(--cp-ease), opacity .2s ease !important;
        opacity:1;
        /* Keep above page content always */
        z-index:2;
    }
    #chinpost-chatbox.is-open .cp-window{
        transform:translate3d(0, 0, 0) !important;
        pointer-events:auto;
        visibility:visible;
    }
    #chinpost-chatbox:not(.is-open) .cp-window{
        transform:translate3d(0, 110%, 0) !important;
        pointer-events:none;
        visibility:hidden;
    }

    /* Sheet grab handle look */
    #chinpost-chatbox .cp-header{
        position:relative;
        padding-top:max(14px, calc(10px + var(--cp-safe-t)));
        border-radius:0;
    }
    #chinpost-chatbox .cp-header::before{
        content:"";
        position:absolute;
        top:max(6px, calc(4px + var(--cp-safe-t) * 0));
        left:50%;
        transform:translateX(-50%);
        width:40px;
        height:4px;
        border-radius:4px;
        background:rgba(255,255,255,.28);
    }
    #chinpost-chatbox .cp-close-sheet{ display:grid; }
    #chinpost-chatbox .cp-min{ display:none; }

    #chinpost-chatbox .cp-invite{
        max-width:min(240px, calc(100vw - 96px));
        font-size:13.5px;
    }

    /* Keyboard mode: shrink sheet to visual viewport (class toggled by JS) */
    #chinpost-chatbox.is-kb-open .cp-window{
        height:var(--cp-vvh) !important;
        max-height:var(--cp-vvh) !important;
    }
    #chinpost-chatbox.is-kb-open .cp-quick{ display:none; }
    #chinpost-chatbox.is-kb-open .cp-mode{ display:none; }
    #chinpost-chatbox.is-kb-open .cp-footer{ display:none; }
}

/* Desktop-large: slightly taller */
@media (min-width:768px){
    #chinpost-chatbox .cp-scrim{ display:none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    #chinpost-chatbox .cp-toggle,
    #chinpost-chatbox .cp-toggle::after,
    #chinpost-chatbox .cp-invite,
    #chinpost-chatbox .cp-window,
    #chinpost-chatbox .cp-msg,
    #chinpost-chatbox .cp-typing span{
        animation:none !important;
        transition:none !important;
    }
}

/* Body scroll lock (class on html/body from JS) */
html.cp-chat-lock,
html.cp-chat-lock body{
    overflow:hidden !important;
    overscroll-behavior:none;
    touch-action:none;
}
/* iOS: preserve scroll position via fixed body */
html.cp-chat-lock body.cp-chat-lock-ios{
    position:fixed;
    width:100%;
    left:0;
    right:0;
}

/* ============================================================
   Cargo: forms, tracking, timeline, success
   ============================================================ */
#chinpost-chatbox .cp-msg.cp-rich{ max-width:94%; background:transparent; padding:0; animation:none; }
#chinpost-chatbox .cp-form{
    background:var(--cp-bg);
    border:1px solid var(--cp-line);
    border-radius:14px;
    padding:13px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
#chinpost-chatbox .cp-form input,
#chinpost-chatbox .cp-form select,
#chinpost-chatbox .cp-form textarea{
    width:100%;
    padding:12px 12px;
    border:1px solid var(--cp-line);
    border-radius:12px;
    font-family:inherit;
    font-size:16px; /* no iOS zoom */
    background:var(--cp-surface);
    color:var(--cp-text);
    resize:none;
    -webkit-appearance:none;
    appearance:none;
}
#chinpost-chatbox .cp-form input:focus,
#chinpost-chatbox .cp-form select:focus,
#chinpost-chatbox .cp-form textarea:focus{
    outline:none;
    border-color:var(--cp-accent);
}
#chinpost-chatbox .cp-form .cp-row{ display:flex; gap:8px; }
#chinpost-chatbox .cp-form .cp-row > *{ flex:1; min-width:0; }
#chinpost-chatbox .cp-f-submit{
    margin-top:2px;
    padding:12px;
    min-height:46px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-family:inherit;
    font-weight:800;
    font-size:14px;
    color:var(--cp-navy);
    background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent-2));
}
#chinpost-chatbox .cp-f-submit:disabled{ opacity:.6; cursor:default; }
#chinpost-chatbox .cp-f-msg:not(:empty){ font-size:12px; color:#ef4444; padding-top:2px; }

#chinpost-chatbox .cp-track{
    background:linear-gradient(160deg,var(--cp-navy),var(--cp-navy-2));
    color:#fff;
    border-radius:16px;
    padding:16px;
}
#chinpost-chatbox .cp-track-head{
    display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px;
}
#chinpost-chatbox .cp-track-code{
    font-family:ui-monospace,Menlo,monospace; font-size:13px; font-weight:700;
    letter-spacing:.5px; color:var(--cp-accent);
}
#chinpost-chatbox .cp-track-badge{
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600;
}
#chinpost-chatbox .cp-track-meta{ font-size:11px; color:#9fb3d1; margin-top:12px; }
#chinpost-chatbox .cp-steps{ display:flex; justify-content:space-between; position:relative; }
#chinpost-chatbox .cp-steps::before{
    content:""; position:absolute; top:7px; left:6%; right:6%; height:2px; background:rgba(255,255,255,.12);
}
#chinpost-chatbox .cp-step{
    position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:5px; flex:1;
}
#chinpost-chatbox .cp-step i{
    width:15px; height:15px; border-radius:50%; background:#2a3a5c; border:2px solid #2a3a5c; display:block;
}
#chinpost-chatbox .cp-step small{ font-size:8.5px; color:#7e92b3; white-space:nowrap; }
#chinpost-chatbox .cp-step.done i{ background:var(--cp-accent); border-color:var(--cp-accent); }
#chinpost-chatbox .cp-step.done small{ color:#cdd9ec; }
#chinpost-chatbox .cp-step.now i{
    box-shadow:0 0 0 4px color-mix(in srgb,var(--cp-accent) 30%,transparent);
}
#chinpost-chatbox .cp-tl{
    margin-top:14px; border-top:1px solid rgba(255,255,255,.1); padding-top:12px;
    display:flex; flex-direction:column; gap:11px;
}
#chinpost-chatbox .cp-tl-item{ display:flex; gap:9px; }
#chinpost-chatbox .cp-tl-dot{
    flex:0 0 auto; width:8px; height:8px; margin-top:5px; border-radius:50%; background:var(--cp-cyan);
}
#chinpost-chatbox .cp-tl-b{ display:flex; flex-direction:column; gap:1px; }
#chinpost-chatbox .cp-tl-b strong{ font-size:12.5px; }
#chinpost-chatbox .cp-tl-b span{ font-size:11px; color:#b9c7dd; }
#chinpost-chatbox .cp-tl-b small{ font-size:10px; color:#7e92b3; margin-top:1px; }

#chinpost-chatbox .cp-success{
    background:var(--cp-bg); border:1px solid var(--cp-line); border-radius:16px; padding:18px; text-align:center;
}
#chinpost-chatbox .cp-success-ic{ font-size:30px; }
#chinpost-chatbox .cp-success strong{ display:block; margin:6px 0; color:var(--cp-navy); font-size:14px; }
#chinpost-chatbox .cp-code-box{
    background:var(--cp-surface); border:1px dashed var(--cp-accent); border-radius:10px;
    padding:9px; margin:8px 0; font-size:13px;
}
#chinpost-chatbox .cp-code-box b{
    font-family:ui-monospace,Menlo,monospace; letter-spacing:.5px; color:var(--cp-navy);
}
#chinpost-chatbox .cp-success p{ font-size:12px; color:var(--cp-muted); margin:4px 0 0; }

@media (prefers-color-scheme:dark){
    #chinpost-chatbox .cp-success strong,
    #chinpost-chatbox .cp-code-box b{ color:#fff; }
}

/* Avoid clash with cookie banner / BTT on small screens when closed */
@media (max-width:767.98px){
    #chinpost-chatbox:not(.is-open){
        bottom:calc(18px + var(--cp-safe-b) + 0px);
    }
    /* When cookie banner may be present, lift slightly if body has class (optional) */
    body:has(.cpf-cookie-banner.active) #chinpost-chatbox:not(.is-open){
        bottom:calc(88px + var(--cp-safe-b));
    }
}
/* CHATBOX CLOSE FIX 2 (2026-10-21): keep the whole header above the step views
   and give the sheet X a full 44px+ touch target with an explicit cursor. */
#chinpost-chatbox .cp-header{ position:relative; z-index:20; }
#chinpost-chatbox .cp-close-sheet{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (max-width:767.98px){
    #chinpost-chatbox .cp-close-sheet{ min-width:44px; min-height:44px; }
}
/* CHATBOX CLOSE FIX 2026-09-30: iOS tap recognition for mobile X button */ #chinpost-chatbox .cp-header-actions{position:relative;z-index:10} #chinpost-chatbox .cp-close-sheet{touch-action:manipulation;pointer-events:auto;position:relative;z-index:11} #chinpost-chatbox .cp-min{touch-action:manipulation}

/* 2026-10-21: inline registration errors + WhatsApp CTA bubble */
.cp-reg-error{color:#fca5a5;font-size:12.5px;line-height:1.8;margin-top:10px}
.cp-wa-cta{display:inline-block;background:#25D366;color:#052e16 !important;font-weight:800;font-size:13px;padding:9px 16px;border-radius:999px;text-decoration:none !important}
.cp-wa-cta:hover{background:#4be07f}