/* V23 storage + profile preview polish: garis preview ikut warna aksen */
#pageProfilePhoto .profile-photo-preview{
  box-sizing:border-box !important;
  border:3px solid rgb(var(--accent-rgb)) !important;
  outline:1px solid rgba(255,255,255,.18) !important;
  outline-offset:3px !important;
  box-shadow:
    0 0 0 8px rgba(var(--accent-rgb), .10),
    0 0 22px rgba(var(--accent-rgb), .32),
    0 24px 70px rgba(var(--accent-rgb), .24) !important;
}
#pageStorage .settings-help b#storageQuotaText{
  color:rgb(var(--accent-rgb));
  font-weight:1000;
}
#pageStorage .storage-panel{
  border-color:rgba(var(--accent-rgb),.24) !important;
}
#pageStorage .storage-bar{
  border-color:rgba(var(--accent-rgb),.22) !important;
}
#pageStorage .storage-bar i{
  background:linear-gradient(90deg, rgba(255,255,255,.8), rgb(var(--accent-rgb)), var(--accent-2, rgb(var(--accent-rgb)))) !important;
}
#pageStorage .danger-wide{
  margin-top:10px !important;
}

/* V22 hotfix: Cloudinary unsigned upload + storage bar visibility */
html, body, .app, .settings-view{
  max-width: 100% !important;
  overflow-x: hidden !important;
}
#pageProfilePhoto,
#pageProfilePhoto .profile-photo-page-card,
#pageProfilePhoto #profilePhotoStatus,
#pageProfilePhoto #profilePhotoPageDesc{
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}
#pageProfilePhoto .profile-photo-page-card{
  width: min(620px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}
#pageProfilePhoto .profile-photo-actions,
#pageProfilePhoto .profile-photo-actions .primary-wide,
#pageProfilePhoto #profilePhotoStatus{
  max-width: 100% !important;
}
#pageProfilePhoto .profile-photo-preview{
  border: 3px solid rgb(var(--accent-rgb)) !important;
  outline: 1px solid rgba(255,255,255,.24) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 7px rgba(var(--accent-rgb), .10),
    0 0 28px rgba(var(--accent-rgb), .34),
    0 22px 60px rgba(0,0,0,.28) !important;
}
#pageStorage .storage-bar{
  height: 12px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(var(--accent-rgb),.42) !important;
  padding: 1px !important;
  overflow: hidden !important;
}
#pageStorage .storage-bar #storageBarFill,
#pageStorage .storage-bar i#storageBarFill{
  display: block !important;
  height: 100% !important;
  opacity: 1;
  background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgba(255,255,255,.92), rgb(var(--accent-rgb))) !important;
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.55) !important;
  border-radius: 999px !important;
  transition: width .25s ease, min-width .25s ease, opacity .25s ease !important;
}
#pageStorage .storage-panel{
  border-color: rgba(var(--accent-rgb),.36) !important;
}


/* V22 storage rank + bar finalfix: Immortal quota dibaca dari currentRankState/rankHasUnlimited dan bar balik gaya lama */
#pageStorage .storage-bar{
  height: 10px !important;
  padding: 0 !important;
  margin: 12px 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(var(--accent-rgb), .18) !important;
  overflow: hidden !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35) !important;
}
#pageStorage .storage-bar #storageBarFill,
#pageStorage .storage-bar i#storageBarFill{
  display:block !important;
  height:100% !important;
  min-height:100% !important;
  border-radius:999px !important;
  background: linear-gradient(90deg, rgb(var(--accent-rgb)), rgba(var(--accent-rgb), .72)) !important;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .55) !important;
  opacity: 1 !important;
  transition: width .25s ease, min-width .25s ease, opacity .25s ease !important;
}
#pageStorage .storage-number{
  letter-spacing:-.03em;
}


/* V22 storage visible bar polish: bar kecil tetap kelihatan, style balik clean seperti preview lama */
#pageStorage .storage-panel{
  border:1px solid rgba(var(--accent-rgb),.24) !important;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.075), rgba(255,255,255,.018)), rgba(7,18,24,.78) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.18) !important;
}
#pageStorage .storage-bar{
  position:relative !important;
  display:block !important;
  height:8px !important;
  width:100% !important;
  margin:14px 0 16px !important;
  padding:0 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.075) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.48) !important;
}
#pageStorage .storage-bar #storageBarFill,
#pageStorage .storage-bar i#storageBarFill{
  display:block !important;
  height:100% !important;
  width:0;
  min-width:0;
  border-radius:999px !important;
  background:linear-gradient(90deg, rgba(255,255,255,.70) 0%, rgb(var(--accent-rgb)) 34%, rgb(var(--accent-rgb)) 100%) !important;
  box-shadow:0 0 14px rgba(var(--accent-rgb),.68), 0 0 3px rgba(255,255,255,.35) inset !important;
  opacity:1 !important;
  transform:translateZ(0) !important;
  transition:width .25s ease, min-width .25s ease !important;
}
#pageStorage .storage-bar #storageBarFill[style*="opacity: 0"],
#pageStorage .storage-bar i#storageBarFill[style*="opacity: 0"]{
  min-width:0 !important;
  box-shadow:none !important;
}
#pageStorage .storage-number{
  margin-bottom:2px !important;
}


/* V22 STORAGE BAR SERIUS FIX: fill tetap muncul walau 0.1KB/1GB.
   Pakai dua lapis: background-size di track + elemen fill absolut, jadi tidak bisa kelihatan kosong. */
#pageStorage .storage-panel .storage-bar{
  --storage-fill-width: 0%;
  --storage-fill-min: 0px;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 10px !important;
  margin: 14px 0 18px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.78), var(--accent, var(--lime)), var(--accent-2, var(--lime2))) left center / max(var(--storage-fill-width), var(--storage-fill-min)) 100% no-repeat,
    rgba(255,255,255,.085) !important;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.58),
    0 0 0 1px rgba(var(--accent-rgb, 47,149,255),.08) !important;
}
#pageStorage .storage-panel .storage-bar::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), transparent 60%);
  opacity:.75;
}
#pageStorage .storage-panel .storage-bar #storageBarFill,
#pageStorage .storage-panel .storage-bar i#storageBarFill{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  display:block !important;
  height:100% !important;
  width:var(--storage-fill-width) !important;
  min-width:var(--storage-fill-min) !important;
  max-width:100% !important;
  border-radius:999px !important;
  opacity:1 !important;
  background:linear-gradient(90deg, rgba(255,255,255,.82), var(--accent, var(--lime)), var(--accent-2, var(--lime2))) !important;
  box-shadow:0 0 14px rgba(var(--accent-rgb, 47,149,255),.58), inset 0 0 2px rgba(255,255,255,.35) !important;
  transform:none !important;
  transition:width .25s ease, min-width .25s ease !important;
}
#pageStorage .storage-panel .storage-bar.is-empty{
  --storage-fill-width:0% !important;
  --storage-fill-min:0px !important;
}
#pageStorage .storage-panel .storage-bar.is-empty #storageBarFill{
  opacity:0 !important;
  min-width:0 !important;
}

/* V24: sidebar profile identity hotfix */
.sidebar .side-profile-card{
  align-items:center !important;
  text-align:left !important;
}
.sidebar .side-profile-text{
  align-items:flex-start !important;
  text-align:left !important;
  min-width:0 !important;
}
#sideProfileName,
#sideProfileStatus{
  width:100% !important;
  text-align:left !important;
}
#sideProfileName.immortal-name,
.sidebar #sideProfileName.immortal-name,
.side-profile-text #sideProfileName.immortal-name{
  display:inline-flex !important;
  width:auto !important;
  max-width:100% !important;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:left !important;
  gap:7px !important;
}
#sideProfileName.immortal-name > span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:left !important;
}
.sidebar .side-profile-card .side-avatar{
  flex:0 0 auto !important;
}
body.datzon-account-loading #sidebarBtn,
body.datzon-account-loading .composer-card,
body.datzon-account-loading .hero-suggestions{
  opacity:.96;
}

/* V25: sidebar nama akun + halaman Gambar & File */
.sidebar .side-profile-card{
  align-items:center !important;
  text-align:left !important;
}
.sidebar .side-profile-text{
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:left !important;
  min-width:0 !important;
}
.sidebar #sideProfileName{
  width:auto !important;
  max-width:100% !important;
  text-align:left !important;
  justify-content:flex-start !important;
}
.sidebar #sideProfileStatus{
  width:100% !important;
  text-align:left !important;
}
.sidebar #sideProfileName.immortal-name{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
}
.sidebar #sideProfileName.immortal-name > span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  text-align:left !important;
}
.media-library-page{
  position:fixed;
  inset:0;
  z-index:310;
  display:none;
  background:
    radial-gradient(circle at 16% 8%, rgba(var(--lime-rgb),.18), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(56,167,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(3,12,16,.98), rgba(2,6,8,.99));
  color:var(--text);
  padding:calc(env(safe-area-inset-top,0px) + 14px) 14px calc(env(safe-area-inset-bottom,0px) + 14px);
}
.media-library-page.show{display:block;animation:mediaPageIn .16s ease both;}
.media-library-shell{
  width:min(980px,100%);
  height:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.media-library-head{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:10px;
  align-items:center;
  padding:2px 2px 4px;
}
.media-back{
  width:46px;
  height:46px;
  border-radius:18px;
  border:1px solid rgba(var(--lime-rgb),.20);
  background:rgba(255,255,255,.065);
  color:var(--text);
  font-size:34px;
  line-height:1;
  display:grid;
  place-items:center;
}
.media-library-head h2{
  margin:0;
  font-size:28px;
  letter-spacing:-.04em;
  font-weight:1000;
}
.media-library-head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.25;
}
.media-search-box{
  height:52px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-radius:22px;
  border:1px solid rgba(var(--lime-rgb),.18);
  background:linear-gradient(180deg, rgba(var(--lime-rgb),.10), rgba(255,255,255,.035));
  color:var(--lime);
}
.media-search-box input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:900;
}
.media-search-box input::placeholder{color:rgba(246,255,233,.48);}
.media-tabs{
  display:flex;
  gap:9px;
  overflow:auto;
  scrollbar-width:none;
  padding:1px 0 2px;
}
.media-tabs::-webkit-scrollbar{display:none;}
.media-tabs button{
  flex:0 0 auto;
  height:38px;
  border-radius:999px;
  padding:0 16px;
  border:1px solid rgba(var(--lime-rgb),.16);
  background:rgba(255,255,255,.055);
  color:var(--muted);
  font-weight:950;
}
.media-tabs button.active{
  color:#071006;
  background:linear-gradient(135deg, rgba(255,255,255,.86), var(--lime), var(--lime2));
  border-color:rgba(var(--lime-rgb),.34);
}
.media-library-grid{
  flex:1;
  min-height:0;
  overflow:auto;
  scrollbar-width:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  grid-auto-rows:minmax(172px,auto);
  gap:12px;
  padding:2px 2px 80px;
}
.media-library-grid::-webkit-scrollbar{display:none;}
.media-asset-card{
  border:1px solid rgba(var(--lime-rgb),.16);
  border-radius:26px;
  overflow:hidden;
  padding:0;
  text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  color:var(--text);
  box-shadow:0 18px 44px rgba(0,0,0,.24);
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:transform .14s ease, border-color .14s ease, background .14s ease;
}
.media-asset-card:active{transform:scale(.975);}
.media-asset-card:hover{border-color:rgba(var(--lime-rgb),.32);}
.media-thumb{
  flex:1;
  min-height:118px;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 30%, rgba(var(--lime-rgb),.16), rgba(255,255,255,.035));
  color:var(--lime);
  overflow:hidden;
}
.media-asset-card.is-image .media-thumb{min-height:136px;}
.media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.media-file-icon svg{width:42px;height:42px;}
.media-info{
  display:block;
  padding:11px 12px 12px;
  min-width:0;
}
.media-info b{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:14px;
  font-weight:1000;
  letter-spacing:-.01em;
}
.media-info small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.media-library-empty{
  margin:auto;
  max-width:360px;
  text-align:center;
  color:var(--muted);
  font-weight:900;
  line-height:1.45;
  padding:30px 18px;
  border-radius:26px;
  border:1px dashed rgba(var(--lime-rgb),.22);
  background:rgba(255,255,255,.04);
}
.viewer.file-fullscreen{
  padding:0;
  background:rgba(0,0,0,.92);
  z-index:10095!important;
}
.viewer.file-fullscreen .viewer-box{
  width:100vw;
  height:100dvh;
  max-height:none;
  border:0;
  border-radius:0;
  background:#050505;
}
.viewer.file-fullscreen .viewer-head{
  height:58px;
  background:rgba(0,0,0,.78);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.viewer.file-fullscreen .viewer-body{
  flex:1;
  min-height:0;
  padding:0;
  background:#050505;
}
.viewer-file-frame{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}
.media-open-panel{
  width:min(520px,calc(100vw - 34px));
  margin:auto;
}
@keyframes mediaPageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:430px){
  .media-library-page{padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(env(safe-area-inset-bottom,0px) + 12px);}
  .media-library-head h2{font-size:25px;}
  .media-library-head p{font-size:12px;}
  .media-library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;grid-auto-rows:minmax(164px,auto);}
  .media-asset-card{border-radius:23px;}
  .media-thumb{min-height:112px;}
  .media-asset-card.is-image .media-thumb{min-height:124px;}
}

/* V26: chat-only media popup + sidebar identity hard lock */
#customActionModal .custom-modal-card:has(.chat-files-note){
  position:relative;
  max-height:min(78vh,720px);
  overflow:hidden;
}
#customActionModal .custom-modal-card:has(.chat-files-note) .custom-modal-body{
  max-height:calc(78vh - 118px);
  overflow:auto;
  padding-right:2px;
}
.chat-files-close-x{
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.07);
  color:var(--text);
  font-size:26px;
  line-height:1;
  font-weight:950;
  z-index:2;
}
.chat-files-note{
  padding-right:38px;
  line-height:1.45;
}
.chat-files-grid-modal{
  margin-top:12px;
}
.sidebar .side-profile-text,
.sidebar .side-profile-text b,
.sidebar .side-profile-text span{
  text-align:left !important;
}
.sidebar #sideProfileName.immortal-name{
  width:100% !important;
  max-width:100% !important;
}
.sidebar #sideProfileName.immortal-name > span{
  flex:0 1 auto;
  min-width:0;
  max-width:calc(100% - 34px);
}

/* V27: tombol keluar akun hanya muncul saat akun Firebase/login aktif */
#profileLogoutBtn{display:none !important;}
body.is-logged-in #profileLogoutBtn{display:flex !important;}
body:not(.is-logged-in) #profileLogoutBtn{display:none !important;}


/* V33 custom API key page */
.api-key-link-grid{grid-template-columns:1fr;gap:10px;margin:14px 0;}
@media (min-width:560px){.api-key-link-grid{grid-template-columns:repeat(3,1fr);}}
.own-key-delete{font-size:28px;line-height:1;color:var(--danger,#ff5c8a);padding-inline:10px;}
.api-key-help-actions{margin-top:14px;}

/* V37 provider menu section toggles */
.provider-row-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--lime);
  flex-shrink:0;
  min-width:28px;
}
.provider-toggle-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  border-radius:999px;
  color:var(--lime);
  background:rgba(var(--lime-rgb),.12);
  border:1px solid rgba(var(--lime-rgb),.24);
  box-shadow:0 0 14px rgba(var(--lime-rgb),.10);
  cursor:pointer;
  overflow:hidden;
}
.provider-toggle-arrow svg{
  width:16px;
  height:16px;
  display:block;
  transform:rotate(0deg);
  transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.provider-toggle-arrow.open svg{transform:rotate(90deg);}
.menu-row.provider-section-toggle .provider-toggle-arrow,
.menu-row.provider-row .provider-toggle-arrow{opacity:.98;}
.menu-row.provider-section-toggle.active .grow,
.menu-row.provider-row.active .grow{color:var(--lime);}
.menu-row.provider-section-toggle small,
.menu-row.provider-row small{max-width:230px;}
#modelMenu .menu-check{display:none !important;}
#modelMenu .provider-row-right svg + svg{display:none;}

/* V41 admin profile + safe reset controls */
.admin-only-row[hidden]{display:none !important;}
.profile-avatar-big.admin-avatar,
.side-avatar.admin-avatar{
  position:relative;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.92), rgba(255,255,255,0) 20%),
    linear-gradient(135deg, #eaf7ff 0%, var(--lime) 42%, #7657ff 100%) !important;
  color:#06131f !important;
  box-shadow:
    0 0 0 2px rgba(var(--lime-rgb),.38),
    0 0 22px rgba(var(--lime-rgb),.48),
    0 0 58px rgba(118,87,255,.28),
    0 20px 50px rgba(0,0,0,.32) !important;
  animation: adminAvatarPulse 2.4s ease-in-out infinite;
}
.profile-avatar-big.admin-avatar::before,
.side-avatar.admin-avatar::before{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:inherit;
  border:1px solid rgba(var(--lime-rgb),.48);
  box-shadow:0 0 20px rgba(var(--lime-rgb),.38), inset 0 0 18px rgba(118,87,255,.20);
  pointer-events:none;
  animation: adminRingPulse 2.4s ease-in-out infinite;
}
.side-avatar.admin-avatar::before{inset:-6px}
.profile-avatar-big.admin-avatar::after,
.side-avatar.admin-avatar::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:inherit;
  background:conic-gradient(from 0deg, transparent 0 10%, rgba(var(--lime-rgb),.45) 16%, transparent 28% 55%, rgba(118,87,255,.36) 66%, transparent 78% 100%);
  filter:blur(10px);
  opacity:.62;
  pointer-events:none;
  animation: adminAuraSpin 6.5s linear infinite;
}
.side-avatar.admin-avatar::after{inset:-10px;filter:blur(7px)}
.profile-avatar-big.admin-avatar img,
.side-avatar.admin-avatar img{position:relative;z-index:1}
.profile-avatar-big.admin-avatar .profile-edit{z-index:4 !important;}
.profile-name.admin-name,
#sideProfileName.admin-name,
.side-profile-name.admin-name{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  color:var(--lime) !important;
  text-shadow:
    0 0 8px rgba(var(--lime-rgb),.82),
    0 0 20px rgba(var(--lime-rgb),.46),
    0 0 34px rgba(118,87,255,.28) !important;
  filter:drop-shadow(0 0 8px rgba(var(--lime-rgb),.35));
}
.profile-name.admin-name > span,
#sideProfileName.admin-name > span,
.side-profile-name.admin-name > span{
  background:linear-gradient(90deg,#ffffff 0%, var(--lime) 30%, #80cfff 55%, #b69cff 78%, #ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  animation: adminTextShift 3s ease-in-out infinite;
}
.admin-badge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:20px;
  color:var(--lime) !important;
  filter:drop-shadow(0 0 8px rgba(var(--lime-rgb),.9)) drop-shadow(0 0 14px rgba(118,87,255,.45));
  animation: adminBadgePulse 2.1s ease-in-out infinite;
}
.side-profile-text .admin-badge{flex:0 0 auto;transform:translateY(1px) scale(.92)}
@keyframes adminAvatarPulse{0%,100%{transform:scale(1);filter:saturate(1.04) brightness(1)}50%{transform:scale(1.032);filter:saturate(1.22) brightness(1.08)}}
@keyframes adminRingPulse{0%,100%{transform:scale(.96);opacity:.56}50%{transform:scale(1.08);opacity:1}}
@keyframes adminAuraSpin{to{transform:rotate(360deg)}}
@keyframes adminTextShift{0%,100%{filter:brightness(1);background-position:0 50%}50%{filter:brightness(1.24);background-position:100% 50%}}
@keyframes adminBadgePulse{0%,100%{transform:translateY(-1px) scale(1)}50%{transform:translateY(-2px) scale(1.08)}}
#clearRankImmortalBtn[hidden]{display:none !important;}
#clearAllLocalDataBtn{margin-top:14px;}


/* V43 admin panel row visible and premium only for role admin. */
body.has-admin-role #adminPanelRow{display:flex !important;}
#adminPanelRow[hidden]{display:none !important;}
#adminPanelRow:not([hidden]){background:linear-gradient(135deg,rgba(173,124,255,.16),rgba(var(--lime-rgb),.07));}
#adminPanelRow:not([hidden]) .settings-row-text b{color:#d7c5ff;text-shadow:0 0 16px rgba(173,124,255,.55);}

/* V44 admin badge visual fix: verified gear badge + tighter name layout */
.profile-name.admin-name,
#sideProfileName.admin-name,
.side-profile-name.admin-name{
  gap:6px !important;
}
.admin-badge{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  display:inline-grid !important;
  place-items:center !important;
  color:var(--lime) !important;
  filter:
    drop-shadow(0 0 7px rgba(var(--lime-rgb),.92))
    drop-shadow(0 0 17px rgba(var(--lime-rgb),.45)) !important;
  transform-origin:center;
  vertical-align:middle;
}
.admin-badge svg{
  width:24px !important;
  height:24px !important;
  display:block !important;
  overflow:visible;
}
.admin-badge .admin-badge-shell{
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.26));
}
.admin-badge .admin-badge-check{
  filter:drop-shadow(0 0 2px rgba(0,0,0,.35));
}
.side-profile-text .admin-badge{
  width:21px !important;
  height:21px !important;
  min-width:21px !important;
  transform:translateY(1px) scale(.94) !important;
}
.side-profile-text .admin-badge svg{
  width:21px !important;
  height:21px !important;
}
.sidebar #sideProfileName,
.sidebar #sideProfileName.admin-name,
.sidebar #sideProfileName.immortal-name{
  font-size:15.8px !important;
  line-height:1.08 !important;
  gap:5px !important;
  max-width:100% !important;
}
.sidebar #sideProfileName > span,
.sidebar #sideProfileName.admin-name > span,
.sidebar #sideProfileName.immortal-name > span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.sidebar #sideProfileName.admin-name:not(.immortal-name) > span{
  max-width:calc(100% - 28px) !important;
}
.sidebar #sideProfileName.admin-name.immortal-name > span{
  max-width:calc(100% - 54px) !important;
}
.profile-name.admin-name .admin-badge{
  margin-left:2px !important;
  margin-right:2px !important;
}
.profile-name.admin-name.immortal-name .admin-badge{
  margin-right:1px !important;
}
.profile-name.admin-name.immortal-name .immortal-crown,
#sideProfileName.admin-name.immortal-name .immortal-crown{
  margin-left:2px !important;
}
@keyframes adminBadgePulse{
  0%,100%{transform:translateY(-1px) scale(1);filter:brightness(1)}
  50%{transform:translateY(-2px) scale(1.08);filter:brightness(1.18)}
}

/* V45 admin badge: real gear teeth + centered check, no extra backup/rules file needed */
.admin-badge.admin-gear-badge{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  display:inline-grid !important;
  place-items:center !important;
  color:var(--lime) !important;
  margin-left:1px !important;
  margin-right:1px !important;
  transform-origin:center center !important;
  filter:
    drop-shadow(0 0 7px rgba(var(--lime-rgb),.95))
    drop-shadow(0 0 18px rgba(var(--lime-rgb),.48)) !important;
}
.admin-badge.admin-gear-badge svg{
  width:28px !important;
  height:28px !important;
  display:block !important;
  overflow:visible !important;
}
.admin-gear-badge .admin-gear-tooth,
.admin-gear-badge .admin-gear-body{
  fill:currentColor !important;
}
.admin-gear-badge .admin-gear-tooth{
  opacity:.98;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));
}
.admin-gear-badge .admin-gear-body{
  stroke:rgba(255,255,255,.30);
  stroke-width:2.2;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));
}
.admin-gear-badge .admin-gear-inner{
  fill:rgba(0,0,0,.18);
  stroke:rgba(255,255,255,.20);
  stroke-width:1.7;
}
.admin-gear-badge .admin-gear-shine{
  fill:none;
  stroke:rgba(255,255,255,.48);
  stroke-width:3.1;
  stroke-linecap:round;
}
.admin-gear-badge .admin-gear-check{
  fill:none;
  stroke:rgba(255,255,255,.98);
  stroke-width:7.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.34));
}
.side-profile-text .admin-badge.admin-gear-badge{
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  transform:translateY(1px) scale(.98) !important;
}
.side-profile-text .admin-badge.admin-gear-badge svg{
  width:25px !important;
  height:25px !important;
}
.profile-name.admin-name.immortal-name .admin-badge.admin-gear-badge,
#sideProfileName.admin-name.immortal-name .admin-badge.admin-gear-badge{
  margin-right:0 !important;
}
@keyframes adminBadgePulse{
  0%,100%{transform:translateY(-1px) scale(1) rotate(0deg);filter:brightness(1)}
  50%{transform:translateY(-2px) scale(1.08) rotate(4deg);filter:brightness(1.2)}
}

/* V46: rename modal save button feedback + sidebar name bigger */
.name-modal-save,
.name-modal-close{
  cursor:pointer !important;
  touch-action:manipulation !important;
  transition:transform .12s ease, filter .12s ease, opacity .12s ease, box-shadow .12s ease !important;
  position:relative !important;
  z-index:2 !important;
}
.name-modal-save:active,
.name-modal-save.is-pressed,
.name-modal-close:active{
  transform:scale(.94) translateY(1px) !important;
  filter:brightness(1.12) saturate(1.12) !important;
}
.name-modal-save.is-saving{
  opacity:.86 !important;
  pointer-events:none !important;
  box-shadow:0 0 0 4px rgba(var(--lime-rgb),.12), 0 12px 28px rgba(var(--lime-rgb),.22) !important;
}
.sidebar .side-profile-text b,
.sidebar #sideProfileName,
.sidebar #sideProfileName.admin-name,
.sidebar #sideProfileName.immortal-name{
  font-size:18px !important;
  line-height:1.1 !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
}
.sidebar .side-profile-text{
  gap:2px !important;
}
.sidebar #sideProfileName.admin-name > span,
.sidebar #sideProfileName.immortal-name > span{
  max-width:calc(100% - 64px) !important;
}
.sidebar .side-profile-text .admin-badge.admin-gear-badge,
.sidebar .side-profile-text .immortal-crown{
  transform:translateY(1px) scale(1) !important;
}
@media(max-width:390px){
  .sidebar .side-profile-text b,
  .sidebar #sideProfileName,
  .sidebar #sideProfileName.admin-name,
  .sidebar #sideProfileName.immortal-name{
    font-size:17px !important;
  }
}


/* DATZON hero mode switch buttons: chat <-> image, because apparently users should not need a treasure map to find features. */
.hero-switch-btn{
  width:min(760px,100%);
  margin:16px auto 0;
  min-height:58px;
  padding:14px 18px;
  border:1px solid rgba(var(--lime-rgb),.26);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(var(--lime-rgb),.18),rgba(173,124,255,.22)),rgba(255,255,255,.035);
  color:rgba(248,255,239,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font:inherit;
  font-size:15px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:0 18px 50px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.hero-switch-btn:active{transform:scale(.975)}
.hero-switch-btn:hover{border-color:rgba(var(--lime-rgb),.42);background:linear-gradient(135deg,rgba(var(--lime-rgb),.24),rgba(173,124,255,.28)),rgba(255,255,255,.045)}
.hero-switch-icon{display:inline-flex;color:var(--lime);line-height:0}
body.image-page .hero-switch-btn{margin-top:16px;}
@media (max-width:760px){
  .hero-switch-btn{min-height:54px;margin-top:14px;border-radius:18px;font-size:14px;padding:12px 14px;}
  body.home-mode .hero-switch-btn{margin-top:12px;}
}

/* V70: Display save + No Bubble Chat yang beneran no bubble, bukan pura-pura seperti rapat OSIS. */
.display-save-btn{
  position:relative;
}
.display-save-btn.is-saving svg{
  opacity:.55;
  transform:scale(.92);
}
.display-save-btn.saved{
  color:var(--lime) !important;
  border-color:rgba(var(--lime-rgb),.55) !important;
}
.display-preview-code{
  justify-self:start;
  max-width:92%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(var(--lime-rgb),.16);
  background:rgba(0,0,0,.18);
  color:var(--muted);
  font-size:calc(var(--chat-bubble-font-size,15.5px) - 1px);
  line-height:var(--chat-bubble-line-height,1.55);
}
.display-preview-card.layout-plain .display-preview-ai{
  width:100%;
  max-width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.display-preview-card.layout-plain .display-preview-code{
  max-width:100%;
}
body.ai-no-bubble .msg.ai:not([data-image-url]){
  gap:0;
}
body.ai-no-bubble .msg.ai:not([data-image-url]) > .avatar.ai{
  display:none !important;
}
body.ai-no-bubble .msg.ai:not([data-image-url]) .ai-stack:not(.image-ai-stack){
  max-width:min(780px,calc(100vw - 30px));
  width:min(780px,100%);
}
body.ai-no-bubble .msg.ai:not([data-image-url]) .ai-stack:not(.image-ai-stack) > .bubble:not(.typing-bubble):not(.system-ui-bubble):not(.image-bubble){
  max-width:100% !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--text) !important;
  white-space:normal !important;
}
body.ai-no-bubble .msg.ai:not([data-image-url]) .ai-stack:not(.image-ai-stack) > .bubble:not(.typing-bubble):not(.system-ui-bubble):not(.image-bubble)::before,
body.ai-no-bubble .msg.ai:not([data-image-url]) .ai-stack:not(.image-ai-stack) > .bubble:not(.typing-bubble):not(.system-ui-bubble):not(.image-bubble)::after{
  display:none !important;
}
body.ai-no-bubble .msg.ai:not([data-image-url]) .ai-stack:not(.image-ai-stack) .answer-tools{
  margin-top:12px;
}
body.ai-no-bubble .msg.ai:not([data-image-url]) .ai-stack:not(.image-ai-stack) .code-card{
  max-width:100%;
}
@media(max-width:430px){
  body.ai-no-bubble .msg.ai:not([data-image-url]) .ai-stack:not(.image-ai-stack){
    max-width:calc(100vw - 28px);
  }
}


/* V68: tombol play gabungan wajib benar-benar hilang saat tidak valid. CSS .tool-btn sebelumnya terlalu percaya diri mengalahkan atribut hidden, karena tentu saja CSS juga bisa keras kepala. */
.tool-btn[hidden],
.combined-tool-btn[hidden],
.ai-tools .combined-tool-btn[hidden]{display:none !important;visibility:hidden !important;pointer-events:none !important;}