/* ==========================================================
   CHATX WIDGET - v2.0
   Stiller: pill | side-tab | floating-icon | mobile-bar
   ========================================================== */

:root {
    --chatx-color: #25D366;
    --chatx-color-dark: color-mix(in srgb, var(--chatx-color) 80%, black);
    --chatx-shadow: 0 4px 20px rgba(0,0,0,.18);
    --chatx-radius: 50px;
    --chatx-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------
   ORTAK: Konteyner
---------------------------------------------------------- */
.chatx-container {
    position: fixed;
    bottom: 30px;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: chatx-fadeInUp 0.5s ease-out both;
}

@keyframes chatx-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pozisyon */
.chatx-position-right { right: 28px; align-items: flex-end; }
.chatx-position-left  { left: 28px;  align-items: flex-start; }

/* ----------------------------------------------------------
   STİL 1: PILL (Yuvarlak buton - varsayılan)
---------------------------------------------------------- */
.chatx-style-pill .chatx-icon {
    height: 54px;
    padding: 0 22px;
    background: var(--chatx-color);
    color: #fff;
    border-radius: var(--chatx-radius);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--chatx-color) 50%, transparent);
    transition: var(--chatx-transition);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 2px solid rgba(255,255,255,.25);
    min-width: 164px;
    white-space: nowrap;
}

.chatx-style-pill .chatx-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--chatx-color) 60%, transparent);
    background: var(--chatx-color-dark);
}

.chatx-style-pill .chatx-icon:active { transform: scale(0.97); }

.chatx-style-pill .chatx-icon.active {
    background: color-mix(in srgb, var(--chatx-color) 75%, black);
}

/* Pulse halkası */
.chatx-style-pill .chatx-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: var(--chatx-radius);
    border: 2px solid var(--chatx-color);
    animation: chatx-pulse 2s infinite;
    pointer-events: none;
}

@keyframes chatx-pulse {
    0%   { opacity: .8; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.12); }
}

/* Wiggle animasyonu - SVG için */
.chatx-style-pill .chatx-icon > svg {
    animation: chatx-wiggle 3s infinite;
    flex-shrink: 0;
}

@keyframes chatx-wiggle {
    0%,100%          { transform: rotate(0deg); }
    10%,30%,50%,70%,90% { transform: rotate(-12deg); }
    20%,40%,60%,80%  { transform: rotate(12deg); }
}

.chatx-btn-text {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Logo img (pill & floating) */
.chatx-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------
   STİL 2: FLOATING ICON (Sadece ikon)
---------------------------------------------------------- */
.chatx-style-floating-icon .chatx-floating-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--chatx-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--chatx-color) 50%, transparent);
    transition: var(--chatx-transition);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    border: 3px solid rgba(255,255,255,.3);
}

.chatx-style-floating-icon .chatx-floating-icon:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--chatx-color) 55%, transparent);
}

.chatx-style-floating-icon .chatx-floating-icon.active {
    background: color-mix(in srgb, var(--chatx-color) 75%, black);
}

.chatx-style-floating-icon .chatx-floating-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--chatx-color);
    animation: chatx-pulse 2s infinite;
    pointer-events: none;
}

.chatx-style-floating-icon .chatx-floating-icon .chatx-logo-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* ----------------------------------------------------------
   STİL 3: SIDE TAB (Dikey kenar sekmesi)
---------------------------------------------------------- */
.chatx-container.chatx-style-side-tab {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    animation: none !important;
    opacity: 1 !important;
}

.chatx-container.chatx-position-right.chatx-style-side-tab {
    right: 0 !important;
    left: auto !important;
    align-items: flex-end;
}

.chatx-container.chatx-position-left.chatx-style-side-tab {
    left: 0 !important;
    right: auto !important;
    align-items: flex-start;
}

.chatx-side-tab {
    background: var(--chatx-color);
    color: #fff;
    cursor: pointer;
    writing-mode: initial;
    display: flex;
    align-items: center;
    box-shadow: var(--chatx-shadow);
    transition: var(--chatx-transition);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

/* Sağ pozisyon: sol kenarı yuvarlak */
.chatx-position-right .chatx-side-tab {
    border-radius: 10px 0 0 10px;
    padding: 14px 12px 14px 14px;
    flex-direction: row-reverse; /* ikon solda, metin sağda (solda görünür) */
}

/* Sol pozisyon: sağ kenarı yuvarlak */
.chatx-position-left .chatx-side-tab {
    border-radius: 0 10px 10px 0;
    padding: 14px 14px 14px 12px;
    flex-direction: row;
}

.chatx-side-tab:hover {
    transform: translateX(0) scale(1.03);
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
}

.chatx-position-right .chatx-side-tab:hover { transform: translateX(-4px); }
.chatx-position-left  .chatx-side-tab:hover { transform: translateX(4px); }

.chatx-side-tab.active {
    background: color-mix(in srgb, var(--chatx-color) 75%, black);
}

.chatx-side-tab-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.chatx-side-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatx-side-tab-icon svg,
.chatx-side-tab-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.chatx-side-tab-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
}

/* Side tab menü pozisyonu */
.chatx-style-side-tab .chatx-menu {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    opacity: 0;
    pointer-events: none;
    transition: var(--chatx-transition);
}

.chatx-position-right.chatx-style-side-tab .chatx-menu {
    right: 60px;
    left: auto;
}

.chatx-position-left.chatx-style-side-tab .chatx-menu {
    left: 60px;
    right: auto;
}

.chatx-style-side-tab .chatx-menu.open {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(-50%) translateX(0) !important;
    pointer-events: all;
}

/* ----------------------------------------------------------
   AÇILIR MENÜ (tüm stiller)
---------------------------------------------------------- */
.chatx-menu {
    list-style: none;
    padding: 6px 0;
    margin: 0;
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 290px;
    background: #fff;
    box-shadow: 0 6px 30px rgba(0,0,0,.14);
    border-radius: 14px;
    overflow: hidden;
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 99998;
}

.chatx-position-left .chatx-menu {
    left: 0;
    right: auto;
}

.chatx-menu.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.chatx-link {
    text-decoration: none;
    color: #222;
    display: flex;
    align-items: center;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 500;
    transition: background .18s, transform .18s;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
}

.chatx-menu li:last-child .chatx-link { border-bottom: none; }

.chatx-link:hover {
    background: #f5f5f5;
    color: color-mix(in srgb, var(--chatx-color) 80%, black);
    transform: translateX(4px);
}

.chatx-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
}

.chatx-phone   .chatx-icon-small { background: #e8f5e9; color: #388e3c; }
.chatx-whatsapp .chatx-icon-small { background: #e8f5e9; color: #25D366; }
.chatx-instagram .chatx-icon-small { background: #fce4ec; }

.chatx-text { line-height: 1.3; }

.chatx-text small {
    display: block;
    color: #999;
    font-size: 11px;
    margin-top: 2px;
}

/* Menü başlığı - şube adı gruplaması için */
.chatx-menu-header {
    padding: 8px 18px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* ----------------------------------------------------------
   MOBİL ALT BAR
---------------------------------------------------------- */
.chatx-mobile-bar {
    display: none; /* Sadece mobilde göster */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99998;
    background: #fff;
    box-shadow: 0 -2px 16px rgba(0,0,0,.12);
    border-top: 1px solid #eee;
    height: 62px;
}

.chatx-mobile-bar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 8px 0;
    transition: background .18s;
    position: relative;
}

.chatx-mobile-bar-btn::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: #eee;
}

.chatx-mobile-bar-btn:last-child::after { display: none; }

.chatx-mobile-bar-btn:active { background: #f5f5f5; }

.chatx-mobile-phone {
    color: #333;
    border-right: 1px solid #eee;
}

.chatx-mobile-whatsapp {
    color: #25D366;
}

.chatx-mobile-bar-btn svg {
    width: 22px;
    height: 22px;
}

/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Mobil alt bar görünür yap */
    .chatx-mobile-bar {
        display: flex;
    }

    /* Mobil bar açıkken ana widget'ı gizle (side-tab hariç) */
    .chatx-mobile-bar ~ .chatx-container:not(.chatx-style-side-tab),
    body:has(.chatx-mobile-bar) .chatx-container:not(.chatx-style-side-tab) {
        display: none !important;
    }

    .chatx-position-right { right: 14px; }
    .chatx-position-left  { left: 14px; }

    .chatx-style-pill .chatx-icon {
        height: 48px;
        padding: 0 16px;
        min-width: auto;
    }

    .chatx-btn-text { font-size: 13px; }

    .chatx-menu {
        width: 260px;
    }

    /* Side-tab mobilde de ortada kalır */
    .chatx-container.chatx-style-side-tab {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }
}

@media (max-width: 480px) {
    .chatx-style-pill .chatx-icon {
        min-width: unset;
    }
}

/* Masaüstünde mobil bar gizli, container normal */
@media (min-width: 769px) {
    .chatx-mobile-bar { display: none !important; }
    .chatx-container  { bottom: 30px; }
    /* side-tab masaüstünde de ortada */
    .chatx-container.chatx-style-side-tab {
        bottom: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}