/* "Bizi Arayın" (Karel web'den arama): yalnız appsettings KarelWeb:Anahtar + Dugme dolu tenantta yüklenir.
   Düğme sohbet botu düğmesinin (ai-chat.css) hemen üstünde, aynı tarafta durur; bot kapalıysa botun yerinde.
   Konum sınıfları: ctc-left/ctc-right (botun tarafı) + ctc-on-btn / ctc-on-mascot / ctc-on-none (altında ne var).
   Yükseklikler ai-chat.css'teki bot konumlarından türetildi (bot yüksekliği + 12px boşluk); orası değişirse burası da. */

.ctc-dock { position: fixed; z-index: 1040; left: 20px; bottom: var(--ctc-b, 20px); }
.ctc-dock.ctc-right { left: auto; right: 20px; }

/* Masaüstü: bot düğmesi 56px (sol 20 / sağ 92 tabanlı), maskot 94px */
.ctc-dock.ctc-left.ctc-on-none { --ctc-b: 20px; }
.ctc-dock.ctc-right.ctc-on-none { --ctc-b: 92px; }
.ctc-dock.ctc-left.ctc-on-btn { --ctc-b: 88px; }
.ctc-dock.ctc-right.ctc-on-btn { --ctc-b: 160px; }
.ctc-dock.ctc-left.ctc-on-mascot { --ctc-b: 126px; }
.ctc-dock.ctc-right.ctc-on-mascot { --ctc-b: 198px; }

.ctc-open { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--ctc-bg, var(--primaryColor)); color: var(--ctc-fg, var(--on-primary, #fff)); font-weight: 700; font-size: 16px; box-shadow: var(--sh-rest, 0 6px 18px rgba(0, 0, 0, .22)); cursor: pointer; }
.ctc-open i { font-size: 20px; }
.ctc-open:focus-visible { outline: 3px solid #1f2329; outline-offset: 2px; }

/* Sohbet paneli açıkken düğme onun altında kalmasın */
body:has(#aicPanel:not([hidden])) .ctc-dock { display: none; }

.ctc-panel { position: fixed; left: 20px; bottom: 20px; z-index: 1043; display: flex; flex-direction: column; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); background: #fff; color: #1f2329; border-radius: var(--r-16, 16px); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); overflow: hidden; }
.ctc-panel.ctc-right { left: auto; right: 20px; }
.ctc-panel[hidden] { display: none; }
.ctc-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--ctc-bg, var(--primaryColor)); color: var(--ctc-fg, var(--on-primary, #fff)); }
.ctc-close { width: 32px; height: 32px; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.ctc-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ctc-body { padding: 14px; overflow-y: auto; }
.ctc-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: #3a4049; }
.ctc-label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #1f2329; }
.ctc-input { display: block; width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #c9cdd4; border-radius: var(--r-10, 10px); background: #fff; color: #1f2329; font-size: 16px; }
.ctc-input:focus { outline: 2px solid var(--primaryColor); outline-offset: 1px; border-color: transparent; }
.ctc-input[aria-invalid="true"] { border-color: #b42318; }
.ctc-err { min-height: 18px; margin: 2px 0 6px; font-size: 12px; color: #b42318; }
.ctc-consent { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: #1f2329; cursor: pointer; }
.ctc-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primaryColor); }
.ctc-kvkk { margin: 0 0 12px; font-size: 11px; line-height: 1.4; color: #5b626c; }

/* Honeypot: görünmez ama display:none değil (bazı botlar onu atlar) */
.ctc-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ctc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-10, 10px); font-size: 15px; font-weight: 700; cursor: pointer; }
.ctc-btn[hidden] { display: none; }
.ctc-btn:disabled { opacity: .55; cursor: default; }
.ctc-btn:focus-visible { outline: 3px solid #1f2329; outline-offset: 2px; }
.ctc-primary { background: var(--ctc-bg, var(--primaryColor)); color: var(--ctc-fg, var(--on-primary, #fff)); }
.ctc-danger { background: #b42318; color: #fff; }
.ctc-ghost { background: #eef0f3; color: #1f2329; }
.ctc-call { display: flex; flex-direction: column; gap: 8px; }
.ctc-call[hidden], .ctc-form[hidden] { display: none; }
.ctc-status { margin: 10px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #1f2329; }
.ctc-status:empty { display: none; }
.ctc-alt { margin: 10px 0 0; font-size: 13px; color: #3a4049; }
.ctc-alt a { font-weight: 700; color: #1f2329; text-decoration: underline; }

@media (max-width: 991.98px) {
    /* Mobil: yuvarlak 56px ikon düğmesi (bot düğmesiyle aynı dil), yazı ekran okuyucuya kalır */
    .ctc-dock { left: 16px; }
    .ctc-dock.ctc-right { left: auto; right: 16px; }
    .ctc-open { width: 56px; min-height: 56px; padding: 0; justify-content: center; }
    .ctc-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ctc-open i { font-size: 22px; }

    /* Bot mobil konumları: düğme sol 84 / sağ 140, maskot sol 80 / sağ 136 (79px) */
    .ctc-dock.ctc-left.ctc-on-none { --ctc-b: 84px; }
    .ctc-dock.ctc-right.ctc-on-none { --ctc-b: 140px; }
    .ctc-dock.ctc-left.ctc-on-btn { --ctc-b: 152px; }
    .ctc-dock.ctc-right.ctc-on-btn { --ctc-b: 208px; }
    .ctc-dock.ctc-left.ctc-on-mascot { --ctc-b: 171px; }
    .ctc-dock.ctc-right.ctc-on-mascot { --ctc-b: 227px; }

    /* Sosyal medya şeridi solda (custom.css .floating-social-left): bot tarafı yer değiştiriyor */
    body:has(.floating-social-left) .ctc-dock.ctc-left.ctc-on-none { --ctc-b: 140px; }
    body:has(.floating-social-left) .ctc-dock.ctc-right.ctc-on-none { --ctc-b: 84px; }
    body:has(.floating-social-left) .ctc-dock.ctc-left.ctc-on-btn { --ctc-b: 208px; }
    body:has(.floating-social-left) .ctc-dock.ctc-right.ctc-on-btn { --ctc-b: 152px; }
    body:has(.floating-social-left) .ctc-dock.ctc-left.ctc-on-mascot { --ctc-b: 227px; }
    body:has(.floating-social-left) .ctc-dock.ctc-right.ctc-on-mascot { --ctc-b: 171px; }

    /* Botun davet balonu (oturumda bir kez) görünürken üstüne binmesin */
    body:has(.aic-teaser:not([hidden])) .ctc-dock { transform: translateY(-80px); }

    .ctc-panel, .ctc-panel.ctc-right { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; max-height: calc(100vh - 32px); }
}