/* ============================================================
   chat-settings-extra.css — Melkie nastrojki chata
   Lyogkie polnoekrannye overlay-ekrany v duhe contact-info.css.
   Palitra cherez --aya-* peremennye s hex-folbekom.
   Tyomnaya tema — cherez body.dark-theme override.

   Tochki vhoda (JS):
     AYA.chatSettings.openTranscribeLang(chatId, chat)
     AYA.chatSettings.openSaveToPhotos(chatId, chat)
     AYA.chatSettings.openAdvancedProtection(chatId, chat)
     AYA.chatSettings.openEncryptionInfo(chatId, chat)
     AYA.chatSettings.editChat(chatId, chat)
   ============================================================ */

.aya-cse-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--aya-grey-bg, #eef0f2);
  color: var(--text, #1a1d21);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity .22s ease;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.aya-cse-overlay.aya-cse-show { opacity: 1; }

body.dark-theme .aya-cse-overlay {
  background: #0d1117;
  color: var(--text, #e6edf3);
}

/* ---------- Shapka (sticky) ---------- */
.aya-cse-header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px 8px;
  background: var(--panel, #fff);
  border-bottom: 1px solid var(--border, #e6e8eb);
}
body.dark-theme .aya-cse-header {
  background: var(--panel, #1c2128);
  border-bottom-color: var(--border, #30363d);
}
.aya-cse-back {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--text, #1a1d21);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
body.dark-theme .aya-cse-back { color: var(--text, #e6edf3); }
.aya-cse-back:active { background: var(--aya-grey-bg, #eef0f2); }
body.dark-theme .aya-cse-back:active { background: rgba(255, 255, 255, .08); }
.aya-cse-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--text, #1a1d21);
}
body.dark-theme .aya-cse-title { color: var(--text, #e6edf3); }
/* Pravyj slot v shapke (knopka "Sohranit'" i t.p.) */
.aya-cse-action {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--aya-teal, #1a6b82);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 8px;
  cursor: pointer;
  border-radius: 8px;
}
.aya-cse-action:active { opacity: .6; }
.aya-cse-action[disabled] { opacity: .4; cursor: default; }
/* Zaglushka shiriny dlya centrovki zagolovka, kogda pravoy knopki net */
.aya-cse-spacer { flex: 0 0 auto; width: 38px; height: 38px; }

/* ---------- Skroll-kontejner ---------- */
.aya-cse-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 40px) 16px;
}

/* ---------- Kartochka (gruppa strok) ---------- */
.aya-cse-card {
  background: var(--panel, #fff);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
body.dark-theme .aya-cse-card {
  background: var(--panel, #1c2128);
  box-shadow: none;
}

.aya-cse-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--aya-grey, #8a9499);
  padding: 4px 14px 8px;
}

.aya-cse-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--aya-grey2, #52606a);
  padding: 4px 14px 14px;
}
body.dark-theme .aya-cse-hint { color: var(--aya-grey, #8a9499); }

/* ---------- Stroka spiska ---------- */
.aya-cse-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 14px 14px;
  cursor: pointer;
  color: inherit;
  font-size: 16px;
  position: relative;
}
.aya-cse-row + .aya-cse-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 0;
  height: 1px;
  background: var(--border, #e6e8eb);
}
body.dark-theme .aya-cse-row + .aya-cse-row::before { background: var(--border, #30363d); }
.aya-cse-row:active { background: var(--aya-grey-bg, #eef0f2); }
body.dark-theme .aya-cse-row:active { background: rgba(255, 255, 255, .04); }

.aya-cse-row-ic {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aya-teal, #1a6b82);
}
.aya-cse-row-label {
  flex: 1 1 auto;
  font-size: 16px;
  color: var(--text, #1a1d21);
}
body.dark-theme .aya-cse-row-label { color: var(--text, #e6edf3); }
.aya-cse-row-sub {
  display: block;
  font-size: 13px;
  color: var(--aya-grey, #8a9499);
  margin-top: 2px;
}

/* Galochka u vybrannogo punkta */
.aya-cse-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aya-teal, #1a6b82);
  opacity: 0;
}
.aya-cse-row.aya-cse-selected .aya-cse-check { opacity: 1; }
.aya-cse-row.aya-cse-selected .aya-cse-row-label { font-weight: 600; }

/* ---------- Tumbler ---------- */
.aya-cse-toggle {
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  border-radius: 9999px;
  background: var(--aya-grey, #8a9499);
  position: relative;
  transition: background .2s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}
.aya-cse-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.aya-cse-toggle.aya-cse-on { background: var(--aya-teal, #1a6b82); }
.aya-cse-toggle.aya-cse-on::after { transform: translateX(18px); }

/* ---------- Pole vvoda (pereimenovanie) ---------- */
.aya-cse-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border, #e6e8eb);
  border-radius: 12px;
  background: var(--panel, #fff);
  color: var(--text, #1a1d21);
  font-size: 17px;
  padding: 14px 14px;
  outline: none;
  -webkit-appearance: none;
}
.aya-cse-input:focus { border-color: var(--aya-teal, #1a6b82); }
body.dark-theme .aya-cse-input {
  background: var(--panel, #1c2128);
  color: var(--text, #e6edf3);
  border-color: var(--border, #30363d);
}

/* ---------- Informacionnyj blok (shifrovanie) ---------- */
.aya-cse-hero {
  text-align: center;
  padding: 24px 16px 8px;
}
.aya-cse-hero-ic {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--aya-teal, #1a6b82), var(--aya-petrol, #005f6d));
  color: #fff;
}
.aya-cse-hero-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text, #1a1d21);
}
body.dark-theme .aya-cse-hero-title { color: var(--text, #e6edf3); }

.aya-cse-info-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--aya-grey2, #52606a);
  padding: 8px 4px;
}
body.dark-theme .aya-cse-info-text { color: var(--aya-grey, #8a9499); }
.aya-cse-info-text p { margin: 0 0 14px; }
.aya-cse-info-text strong { color: var(--text, #1a1d21); font-weight: 600; }
body.dark-theme .aya-cse-info-text strong { color: var(--text, #e6edf3); }

.aya-cse-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--aya-grey-bg, #eef0f2);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--aya-grey2, #52606a);
}
body.dark-theme .aya-cse-note {
  background: rgba(255, 255, 255, .04);
  color: var(--aya-grey, #8a9499);
}
.aya-cse-note .aya-cse-row-ic { color: var(--aya-grey, #8a9499); margin-top: 1px; }