/* Perapian presisi lintas halaman (HP & PC). Dimuat paling akhir. */

/* 1) Kepala profil "Tentang kamu": avatar sejajar tengah dengan judul + peran */
.profile-head { align-items: center !important; flex-wrap: nowrap; }
.profile-head > .avatar { flex: none; }
.profile-head h2 { margin: 0 !important; line-height: 1.25; }
.profile-head small { display: block; margin-top: 3px; }

/* 2) Tautan undangan: satu baris rapi (terpotong dengan …), tombol Salin di kanan */
.ref-link-row { display: flex !important; align-items: center; gap: 8px; flex-wrap: nowrap !important; padding: 6px 6px 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ref-link-row code { flex: 1 1 auto; min-width: 0; display: block; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; word-break: normal !important; overflow-wrap: normal !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 13px; }
.ref-link-row .btn { flex: none; }

/* 3) Menu akun di HP: lembar bawah gaya iOS — bisa digulir, pegangan di atas, baris lega */
@media (max-width: 900px) {
  .menu.profile-menu-sheet {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    max-height: min(82dvh, calc(var(--suvi-visible-h, 100dvh) - 40px)) !important;
    overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
    padding: 0 10px max(14px, env(safe-area-inset-bottom)) !important; border-radius: 22px 22px 0 0 !important;
    background: var(--surface) !important; border: 0 !important; box-shadow: 0 -10px 40px rgb(0 0 0 / .18) !important;
  }
  .menu.profile-menu-sheet::before {
    content: ''; position: sticky; top: 0; z-index: 1; display: block; height: 22px; margin: 0 -10px 2px;
    background: linear-gradient(var(--surface) 70%, transparent);
    -webkit-mask: none;
  }
  .menu.profile-menu-sheet::after {
    content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--line);
  }
  .menu.profile-menu-sheet button { min-height: 50px !important; padding: 12px 14px !important; font-size: 15.5px !important; border-radius: 12px !important; }
  .menu.profile-menu-sheet button:active { background: var(--surface-2) !important; }
  .menu.profile-menu-sheet .menu-note { padding: 6px 14px !important; font-size: 13px !important; color: var(--ink-3); }
  .menu.profile-menu-sheet .menu-sep { margin: 8px 14px !important; }
  .profile-menu-scrim { position: fixed; inset: 0; }
}

/* 4) Baris pengaturan berisi pilihan/isian: di HP kontrol turun ke bawah selebar penuh (tidak menjorok ke kanan) */
@media (max-width: 760px) {
  .app .preferences-page .preference-row:has(.preference-control :is(select, .select, input[type=text], input[type=time], input[type=number], textarea, .focus-inline-controls)) {
    flex-direction: column !important; align-items: stretch !important; gap: 10px !important;
  }
  .app .preferences-page .preference-row:has(.preference-control :is(select, .select, input[type=text], input[type=time], input[type=number], textarea, .focus-inline-controls)) > div:first-child { flex: none !important; }
  .app .preferences-page .preference-row .preference-control:has(:is(select, .select, input[type=text], input[type=time], input[type=number], textarea, .focus-inline-controls)) {
    width: 100% !important; max-width: none !important; margin: 0 !important; justify-content: flex-start !important;
  }
  .app .preferences-page .focus-inline-controls { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; width: 100%; }
  .app .preferences-page .focus-inline-controls label { min-width: 0 !important; }
  .app .preferences-page .focus-inline-controls .select, .app .preferences-page .preference-control .select { width: 100% !important; max-width: none !important; min-width: 0 !important; }
}

/* 5) Pengaman umum: teks panjang tidak keluar kartu, media tidak melebihi layar */
.app :is(.experience-card, .cx-row, .ch-card, .ch-row, .settings-body, .section) { overflow-wrap: anywhere; }
.app :is(.settings-body, .experience-page, .page-inner) img, .app :is(.settings-body, .experience-page, .page-inner) video { max-width: 100%; height: auto; }
.app .settings-body pre, .app .experience-page pre { max-width: 100%; overflow-x: auto; }
@media (max-width: 760px) {
  .app .api-key-row { flex-wrap: wrap; }
  .app .api-key-row code { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .app .ref-link-row { flex-wrap: nowrap !important; }
  .app .ref-link-row code { overflow-wrap: normal !important; }
}