/* Zisan Chat - liquid glass chat launcher */
.zchat { --zc-a: #45124D; --zc-b: #8B0A9C; position: fixed; bottom: 22px; z-index: 99990; font-family: inherit; color: #1c0f20; }
.zchat-right { right: 22px; }
.zchat-left { left: 22px; }
.zchat *, .zchat *::before, .zchat *::after { box-sizing: border-box; }
.zchat [hidden] { display: none !important; }

/* floating button */
.zchat-fab { position: relative; width: 62px; height: 62px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.65); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: visible; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--zc-a) 95%, transparent), color-mix(in srgb, var(--zc-b) 92%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -8px 14px rgba(255,255,255,.12), 0 14px 30px color-mix(in srgb, var(--zc-a) 45%, transparent);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.zchat-fab::before { content: ''; position: absolute; left: 14%; right: 14%; top: 3px; height: 40%; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none; }
.zchat-fab:hover { transform: scale(1.08); }
.zchat-fab:active { transform: scale(.94); }
.zchat-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--zc-b) 60%, #fff); outline-offset: 3px; }
.zchat-fab-i { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; transition: opacity .25s, transform .35s; }
.zchat-fab-i img { width: 100%; height: 100%; object-fit: cover; }
.zchat-fab-x { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.5); transition: opacity .25s, transform .35s; }
.zchat.is-open .zchat-fab-i { opacity: 0; transform: rotate(90deg) scale(.5); }
.zchat.is-open .zchat-fab-x { opacity: 1; transform: none; }
.zchat-pulse:not(.is-open) .zchat-fab::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--zc-b) 55%, transparent); animation: zchatRing 2.6s ease-out infinite; pointer-events: none; }
@keyframes zchatRing { 0% { opacity: .9; transform: scale(.88); } 70%, 100% { opacity: 0; transform: scale(1.3); } }

/* label next to the button */
.zchat-label { position: absolute; bottom: 14px; white-space: nowrap; padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--zc-a);
  background-color: rgba(255,255,255,.55); background-image: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.3));
  -webkit-backdrop-filter: blur(16px) saturate(200%); backdrop-filter: blur(16px) saturate(200%); border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1.5px 0 #fff, 0 10px 24px color-mix(in srgb, var(--zc-a) 22%, transparent); transition: opacity .25s, transform .3s; }
.zchat-right .zchat-label { right: 76px; }
.zchat-left .zchat-label { left: 76px; }
.zchat.is-open .zchat-label, .zchat-label.is-gone { opacity: 0; transform: translateX(8px); pointer-events: none; }

/* chat window */
.zchat-pop { position: absolute; bottom: 82px; width: min(340px, calc(100vw - 32px)); padding: 16px; border-radius: 28px;
  background-color: rgba(255,255,255,.4); background-image: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.14) 50%, rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(22px) saturate(200%); backdrop-filter: blur(22px) saturate(200%); border: 1px solid rgba(255,255,255,.88);
  box-shadow: inset 0 1.5px 0 #fff, inset 0 -14px 26px rgba(255,255,255,.22), 0 26px 60px color-mix(in srgb, var(--zc-a) 32%, transparent);
  transform-origin: bottom right; animation: zchatIn .38s cubic-bezier(.3,1.35,.5,1); overflow: hidden; }
.zchat-right .zchat-pop { right: 0; }
.zchat-left .zchat-pop { left: 0; transform-origin: bottom left; }
.zchat-strong .zchat-pop { background-color: color-mix(in srgb, var(--zc-b) 14%, rgba(255,255,255,.4)); }
.zchat-pop::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--zc-b) 28%, transparent), transparent 55%), radial-gradient(circle at 0 100%, color-mix(in srgb, var(--zc-a) 18%, transparent), transparent 55%); }
.zchat-pop > * { position: relative; z-index: 1; }
@keyframes zchatIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

.zchat-x { position: absolute; top: 10px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.55); color: var(--zc-a); font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.zchat-x:hover { background: #fff; }
.zchat-head { display: flex; align-items: center; gap: 12px; margin: 0 28px 12px 0; }
.zchat-av { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--zc-a), var(--zc-b)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 14px color-mix(in srgb, var(--zc-a) 30%, transparent); }
.zchat-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.zchat-av i { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: #2fc16b; }
.zchat-av i.off { background: #a8a0ad; }
.zchat-who b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.zchat-who span { font-size: 12.5px; color: #5d4a63; }
.zchat-msg { margin-bottom: 12px; padding: 11px 14px; border-radius: 18px 18px 18px 6px; font-size: 14px; line-height: 1.5; background: rgba(255,255,255,.7); border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff; }
.zchat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.zchat-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; text-decoration: none; color: inherit; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.92); box-shadow: inset 0 1px 0 #fff, 0 6px 16px color-mix(in srgb, var(--zc-a) 10%, transparent); transition: transform .25s, box-shadow .25s, background .25s; }
.zchat-opt:hover, .zchat-opt:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.8); box-shadow: inset 0 1px 0 #fff, 0 12px 24px color-mix(in srgb, var(--zc-a) 20%, transparent); outline: 0; }
.zchat-ic { flex: none; width: 38px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--zc-a), var(--zc-b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.zchat-t-whatsapp .zchat-ic { background: #25D366; }
.zchat-t-messenger .zchat-ic { background: linear-gradient(135deg, #0A84FF, #A334FA); }
.zchat-t-telegram .zchat-ic { background: #26A5E4; }
.zchat-t-instagram .zchat-ic { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.zchat-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zchat-tx b { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.zchat-tx small { font-size: 12px; color: #5d4a63; margin-top: 1px; }
.zchat-go { font-style: normal; color: var(--zc-b); font-size: 17px; transition: transform .25s; }
.zchat-opt:hover .zchat-go { transform: translateX(4px); }

@media (max-width: 640px) {
  .zchat { bottom: 16px; }
  .zchat-right { right: 16px; } .zchat-left { left: 16px; }
  .zchat-fab { width: 58px; height: 58px; }
  .zchat-label { display: none; }
  .zchat-pop { bottom: 76px; }
  .zchat-nomobile { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .zchat-pop, .zchat-pulse .zchat-fab::after { animation: none !important; } .zchat * { transition: none !important; } }