/* ==========================================================================
   "Nə düşünürsən?" — CV sahibinin qısa fikri
   İstifadə edən: cv-detail.php + assets/js/cv-thought.js
   ========================================================================== */

/* --------------------------------------------------------------------------
   Yumru açma düyməsi — səhifənin sağ HAŞİYƏSİNDƏ (kartların çölündə)

   ÜFÜQİ hesablama. Saytın konteyneri 1180px-dir və mərkəzdədir, deməli
   ekranın sağında `M = (100vw - 1180px) / 2` enində boş haşiyə qalır.
   Düyməni həmin haşiyənin ORTASINA qoyuruq: `(M - 56px) / 2`. Belədə düymə
   nə kartların üstünə düşür, nə də monitorun uzaq küncünə qaçır — ekran
   böyüdükcə kartlarla birlikdə sürüşür.

   Haşiyə düyməni yerləşdirməyə çatmayan dar ekranlarda (və mobildə) ifadə
   sıfıra/mənfiyə düşür və `max()` 16px-lik ehtiyat dəyəri seçir — yəni klassik
   üzən düymə kimi aşağı-sağ küncdə dayanır.

   ŞAQULİ hesablama: canlı söhbət düyməsi (.lc-launcher) 58px hündürlükdə,
   aşağıdan 20px-dədir. 90px ona toxunmadan tam üstündə dayanmağa çatır.
   `z-index:240` — söhbət düyməsi/pəncərəsi (250) yenə də üstdə qalsın.

   Mətn etiketi yoxdur, ona görə `title` və `aria-label` cv-detail.php-də
   mütləq verilir — əks halda ekran oxuyucusu düymənin nə etdiyini deməz.
   -------------------------------------------------------------------------- */
.cvt-fab {
  position: fixed;
  right: max(16px, calc(((100vw - 1180px) / 2 - 56px) / 2), env(safe-area-inset-right));
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 240;
}

/* PWA banneri və ya "müraciət et" zolağı görünəndə sayt `.lc-launcher`-i
   yuxarı qaldırır (bax style.css). Düymə də onunla birlikdə qalxmalıdır, əks
   halda ikisi üst-üstə düşür. Ölçülər söhbət düyməsinin öz dəyərləri + 58px
   hündürlük + 12px aralıq kimi hesablanıb. */
@media (max-width: 860px) {
  body.pwa-banner-active .cvt-fab,
  body.has-mobile-apply-bar .cvt-fab,
  body:has(.pwa-banner-visible) .cvt-fab,
  body:has(.mobile-apply-bar) .cvt-fab {
    bottom: calc(154px + env(safe-area-inset-bottom));
  }
  body.has-mobile-apply-bar.pwa-banner-active .cvt-fab,
  body:has(.mobile-apply-bar):has(.pwa-banner-visible) .cvt-fab {
    bottom: calc(220px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .cvt-fab { right: max(14px, env(safe-area-inset-right)); }
}

.cvt-round-btn {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* `--cvt-*` dəyişənləri `.cv-themed` elementinə inline yazılır (cv-detail.php).
     Tema seçilməyibsə var() ehtiyat dəyəri saytın öz rənginə düşür. */
  border: 1.5px solid var(--cvt-button-tint-soft, var(--color-border-strong, #f2c9cf));
  background: var(--color-surface, #fff);
  color: var(--cvt-button, var(--color-primary-dark, #d81f3d));
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(216, 31, 61, .38), 0 2px 6px rgba(36, 20, 23, .08);
  transition: transform .15s ease, box-shadow .18s ease,
              border-color .15s ease, background .15s ease;
}
.cvt-round-btn:hover {
  background: var(--cvt-button-tint, var(--color-primary-tint, #fff1f3));
  border-color: var(--cvt-button, var(--color-primary, #f43f5e));
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(216, 31, 61, .5), 0 2px 6px rgba(36, 20, 23, .1);
}
.cvt-round-btn:active { transform: scale(.94); }
.cvt-round-btn:focus-visible {
  outline: 2px solid var(--cvt-button, var(--color-primary, #f43f5e));
  outline-offset: 3px;
}
.cvt-round-emoji { font-size: 24px; line-height: 1; }

/* Mobildə bir az kiçildilir — 50px hələ də barmaq üçün rahat hədəfdir.
   DİQQƏT: bu blok baza qaydasından SONRA gəlməlidir, əks halda eyni
   spesifiklikdə olduğu üçün yuxarıdakı 56px onu üstələyər. */
@media (max-width: 640px) {
  .cvt-round-btn { width: 50px; height: 50px; }
  .cvt-round-emoji { font-size: 21px; }
}

/* Diqqət çəkən yumşaq halqa. `::after` fonun ARXASINDA deyil, üstündədir,
   ona görə `pointer-events:none` verilir — əks halda kliki udardı. */
.cvt-round-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  animation: cvtRoundPulse 2.6s ease-out infinite;
}
@keyframes cvtRoundPulse {
  0%   { box-shadow: 0 0 0 0 rgba(244, 63, 94, .35); }
  70%  { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cvt-round-btn::after { animation: none; }
}

/* ==========================================================================
   PAYLAŞILMIŞ FİKİR KARTI — CV-yə baxan HƏR KƏS görür
   ========================================================================== */
.detail-card.cvt-card {
  position: relative;
  overflow: hidden;
  /* `.detail-card` ağ fon verir; burada yumşaq çəhrayı keçidlə əvəzlənir.
     `!important` YOXDUR — CV sahibi öz temasını seçibsə tema qalib gəlsin. */
  background:
    radial-gradient(120% 140% at 100% 0%, var(--cvt-button-tint-pale, rgba(244, 63, 94, .09)), transparent 55%),
    linear-gradient(158deg, var(--cvt-button-tint, var(--color-primary-tint, #fff1f3)) 0%, #fff 58%);
  border-color: var(--cvt-button-tint-soft, var(--color-border-strong, #f2c9cf));
  box-shadow: 0 10px 30px -18px rgba(180, 20, 50, .45);
}

/* Sol kənardakı rəngli zolaq — saytdakı `.rank-card` və
   `.job-description-panel` ilə eyni dildə. */
.detail-card.cvt-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  /* Tema varsa düz tema rəngi, yoxdursa saytın qırmızı keçidi. var()-un
     ehtiyat dəyəri gradient ola bilər — ona görə iki ayrı qayda lazım deyil. */
  background: var(--cvt-button, linear-gradient(180deg, #f43f5e, #b1152f));
}

/* Sağ yuxarıdakı iri dırnaq işarəsi. `z-index:0` + mətnə `z-index:1` verilir
   ki, uzun mətn işarənin ÜSTÜNDƏ oxunsun, altında itməsin. */
.cvt-card-quote {
  position: absolute;
  top: -34px;
  right: 16px;
  z-index: 0;
  font-family: var(--font-display, inherit);
  font-weight: 800;
  font-size: 138px;
  line-height: 1;
  color: var(--cvt-button-tint-soft, var(--color-primary-light, #fecdd6));
  opacity: .5;
  pointer-events: none;
  user-select: none;
}

/* Aşağı-sol küncdəki yumşaq işıq ləkəsi */
.cvt-card-glow {
  position: absolute;
  left: -60px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cvt-button-tint, rgba(244, 63, 94, .16)), transparent 68%);
  pointer-events: none;
}

.detail-card.cvt-card > h2,
.detail-card.cvt-card > .cvt-text,
.detail-card.cvt-card > .cvt-meta { position: relative; z-index: 1; }

.detail-card.cvt-card > h2 {
  font-size: 17px;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}
/* Başlıqdakı 💭 nişanı — ağ fon + rəngli halqa, yüngül kölgə */
.detail-card.cvt-card .cv-section-icon {
  /* QEYD: temalı CV-də cv-theme-apply.css `background`-ı `!important` ilə
     əvəz edir — ona görə burada yalnız halqa rəngi dəyişəndən asılı yazılır. */
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--cvt-button-tint-soft, var(--color-primary-light, #fecdd6));
}

.cvt-text {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -.005em;
  color: var(--color-ink, #241417);
  /* İstifadəçi mətni boşluqlarla yazıla bilər; sətir sonları qorunur,
     uzun sözlər isə kartdan daşmasın deyə qırılır. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Tarix sətri — kiçik həb. Mətn JS tərəfindən boşaldıla bilər, o halda
   `:empty` qaydası bütün həbi gizlədir (boş çərçivə qalmasın). */
.cvt-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 5px 13px 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--color-border, #f1e4e6);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-faint, #9a8286);
}
.cvt-meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--cvt-button, var(--color-primary, #f43f5e));
}
.cvt-meta:empty { display: none; }

@media (max-width: 560px) {
  .cvt-text { font-size: 15.5px; line-height: 1.65; }
  .cvt-card-quote { font-size: 104px; top: -26px; right: 10px; }
  .detail-card.cvt-card > h2 { font-size: 16px; }
}

/* Çap: bəzək elementləri mürəkkəb yeyir, mətn isə CV-nin məzmunudur. */
@media print {
  .detail-card.cvt-card { background: none !important; box-shadow: none !important; }
  .detail-card.cvt-card::before,
  .cvt-card-quote,
  .cvt-card-glow { display: none !important; }
}

/* ==========================================================================
   POPUP — "Nə düşünürsən?" pəncərəsi
   ========================================================================== */
.cvt-overlay {
  position: fixed;
  inset: 0;
  /* Arxa fon TOXUNULMUR — səhifə öz rəngində qalır, qaralma və blur yoxdur.
     Saytdakı digər pəncərələr (.vip-modal-overlay, .pbn-overlay,
     .cv-lightbox-overlay) da eyni cür şəffafdır. Örtük yalnız kliki tutmaq
     üçün lazımdır: boşluğa basanda pəncərə bağlanır. */
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 1200;
  /* Fon üzərində barmaqla sürüşdürəndə arxadakı səhifə tərpənməsin */
  overscroll-behavior: contain;
  animation: cvtOverlayIn .22s ease both;
}
.cvt-overlay[hidden] { display: none; }

.cvt-modal {
  position: relative;
  width: 100%;
  max-width: 400px;
  /* İki fon qatı: (1) yuxarıdakı 3px-lik aksent zolağı, (2) əsas keçid.
     Zolaq ayrıca element deyil, fon qatıdır — modal sürüşəndə yuxarıda qalır. */
  background:
    linear-gradient(90deg, var(--color-primary, #f43f5e), var(--color-primary-darker, #b1152f))
      no-repeat 22px 0 / calc(100% - 44px) 3px,
    linear-gradient(180deg, var(--color-primary-tint, #fff1f3) 0%, var(--color-surface, #fff) 118px);
  border: 1px solid var(--color-border-strong, #f2c9cf);
  border-radius: 24px;
  /* İki qatlı kölgə: yaxın kontur + uzaq yumşaq düşmə */
  /* Fon qaralmadığına görə pəncərə yalnız kölgə və konturu ilə seçilir —
     ona görə kölgə bir qədər dərindir. */
  box-shadow: 0 1px 3px rgba(36, 20, 23, .08),
              0 10px 24px -8px rgba(36, 20, 23, .18),
              0 36px 80px -20px rgba(90, 12, 30, .5);
  padding: 22px 22px 18px;
  /* Klaviatura açılanda kiçik ekranda modal ekrandan daşmasın */
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: cvtModalIn .34s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes cvtOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cvtModalIn {
  from { opacity: 0; transform: translateY(16px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cvt-overlay, .cvt-modal { animation: none; }
}

/* --- Başlıq sətri --- */
.cvt-modal-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.cvt-modal-badge {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--color-primary-light, #fecdd6),
              0 6px 16px -6px rgba(216, 31, 61, .45);
}
.cvt-modal-head-text { min-width: 0; }
.cvt-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-family: var(--font-display, inherit);
  color: var(--color-ink, #241417);
}
.cvt-modal-head-text small {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--color-ink-faint, #9a8286);
}
.cvt-modal-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong, #f2c9cf);
  background: rgba(255, 255, 255, .8);
  color: var(--color-ink-soft, #5c464a);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease,
              border-color .15s ease, transform .15s ease;
}
.cvt-modal-close:hover {
  background: var(--color-primary, #f43f5e);
  border-color: var(--color-primary, #f43f5e);
  color: #fff;
  transform: rotate(90deg);
}
.cvt-modal-close svg { display: block; }

/* --- İzah sətri --- */
.cvt-modal-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--color-border, #f1e4e6);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-ink-soft, #5c464a);
}
.cvt-modal-hint-ic {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: .75;
}

/* --- Mətn sahəsi --- */
.cvt-field { position: relative; }
.cvt-textarea {
  width: 100%;
  min-height: 112px;
  /* Sayğac aşağı-sağ küncdə DAXİLDƏ dayanır, ona görə ölçü dəyişməsi bağlanıb
     və aşağıdan əlavə boşluq buraxılıb (əks halda mətn sayğacın altına girərdi). */
  resize: none;
  padding: 13px 10px 32px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--color-border, #f1e4e6);
  /* 16px-dən kiçik olsa iOS Safari fokusda səhifəni zoom edir */
  font-size: 16px;
  line-height: 1.6;
  font-family: inherit;
  color: var(--color-ink, #241417);
  background: var(--color-surface-alt, #fdf2f4);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cvt-textarea::placeholder { color: var(--color-ink-faint, #9a8286); }
.cvt-textarea:focus {
  outline: none;
  border-color: var(--color-primary, #f43f5e);
  background: #fff;
  box-shadow: 0 0 0 4px var(--color-primary-tint, #fff1f3);
}

/* Sürüşdürmə zolağı — brauzerin boz standart zolağı əvəzinə saytın öz üslubu.
   Eyni resept `.vip-modal`, `.pbn-sheet` və `.chat-messages`-də də işlənir.

   `border: 3px solid transparent` + `background-clip: content-box` hiyləsi:
   zolağın özü 10px enindədir (barmaq/kursor üçün rahat), amma görünən hissə
   4px-lik nazik xəttdir və kənarlardan aralı dayanır.

   Firefox `::-webkit-*` qaydalarını tanımır, ona görə `scrollbar-width` /
   `scrollbar-color` ayrıca verilir. */
.cvt-textarea,
.cvt-modal {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-light, #fecdd6) transparent;
}
.cvt-textarea::-webkit-scrollbar,
.cvt-modal::-webkit-scrollbar { width: 10px; }
.cvt-textarea::-webkit-scrollbar-track,
.cvt-modal::-webkit-scrollbar-track { background: transparent; }
.cvt-textarea::-webkit-scrollbar-thumb,
.cvt-modal::-webkit-scrollbar-thumb {
  background: var(--color-primary-light, #fecdd6);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.cvt-textarea::-webkit-scrollbar-thumb:hover,
.cvt-modal::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #f43f5e);
  background-clip: content-box;
}

.cvt-counter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-faint, #9a8286);
  pointer-events: none;
}
.cvt-counter.is-full {
  color: #fff;
  background: var(--color-primary, #f43f5e);
}

/* --- Düymələr --- */
.cvt-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.cvt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-weight: 800;
  font-size: 14.5px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease,
              background .15s ease, color .15s ease, border-color .15s ease;
}
.cvt-btn:active { transform: scale(.98); }
.cvt-btn:focus-visible {
  outline: 2px solid var(--color-primary, #f43f5e);
  outline-offset: 2px;
}
/* JS yadda saxlayarkən düymələri söndürür — `.btn` sinfi artıq işlənmədiyi
   üçün söndürülmüş görkəm burada ayrıca təyin olunur. */
.cvt-btn[disabled] { opacity: .55; pointer-events: none; }

.cvt-btn-primary {
  flex: 1;
  color: #fff;
  background: linear-gradient(135deg,
              var(--color-primary, #f43f5e),
              var(--color-primary-dark, #d81f3d));
  box-shadow: 0 12px 26px -10px rgba(216, 31, 61, .75);
}
.cvt-btn-primary:hover {
  box-shadow: 0 16px 30px -10px rgba(216, 31, 61, .8);
  filter: brightness(1.04);
}

.cvt-delete-btn {
  flex: 0 0 auto;
  background: #fff;
  color: var(--color-ink-soft, #5c464a);
  border-color: var(--color-border-strong, #f2c9cf);
}
.cvt-delete-btn:hover {
  background: var(--color-danger-bg, #fef2f2);
  border-color: var(--color-danger, #dc2626);
  color: var(--color-danger, #dc2626);
}

/* --- Status sətri --- */
.cvt-status {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  min-height: 18px;
  color: var(--color-ink-faint, #9a8286);
}
.cvt-status.is-error { color: var(--color-danger, #dc2626); }
.cvt-status.is-ok { color: var(--color-success, #16a34a); }

@media (max-width: 560px) {
  .cvt-overlay { padding: 14px; }
  .cvt-modal {
    /* `max-width` QƏSDƏN ləğv edilmir — telefonda da pəncərə kənardan kənara
       uzanmasın, eyni yığcam en saxlanılsın. */
    border-radius: 18px;
    padding: 18px 16px 16px;
    /* Aksent zolağı daxili boşluqla eyni cizgidə dursun */
    background-position: 16px 0, 0 0;
    background-size: calc(100% - 32px) 3px, auto;
  }
  .cvt-modal-badge { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
  .cvt-modal-head h3 { font-size: 16px; }
  .cvt-textarea { min-height: 100px; }
  .cvt-modal-actions { gap: 8px; }
  .cvt-btn { padding: 0 16px; min-height: 44px; font-size: 14px; }
}

/* Çap: paylaşılmış fikir KARTI çap olunur (CV-nin məzmunudur), amma popup
   qabığı çap edilməməlidir. Popup bağlı olanda [hidden] onsuz da gizlədir,
   yalnız açıqkən "CV-ni çap et" basılsa problem olardı. */
@media print {
  #cvThoughtRoot,
  .cvt-fab { display: none !important; }
}