:root{
  --app-h:100dvh;
  --app-top:0px;

  --blue:#3390ec;
  --blue-dark:#2b7fcc;

  --bg:#e6ebee;
  --panel:#fff;

  --border:#e5e7e9;

  --out:#d9fdd3;
  --in:#fff;

  --text:#202428;
  --muted:#83919b;

  --danger:#e5484d;
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Tahoma,
    sans-serif;

  background:#fff;
  color:var(--text);
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}

.hidden{
  display:none !important;
}


/* ======================
   LOGIN
====================== */

#authScreen{
  width:100%;
  min-height:100dvh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    linear-gradient(
      180deg,
      #fff,
      #f5edf2
    );
}

.authCard{
  width:100%;
  max-width:390px;

  background:#fff;

  padding:25px 18px;

  border-radius:25px;

  box-shadow:
    0 12px 40px
    rgba(0,0,0,.07);
}

.logo{
  text-align:center;
  font-size:48px;
}

.authTitle{
  text-align:center;
  margin:7px 0 20px;
}

.tabs{
  display:flex;

  background:#f4eef1;

  padding:4px;

  border-radius:14px;

  margin-bottom:13px;
}

.tabs button{
  flex:1;

  height:42px;

  border:0;

  border-radius:11px;

  background:transparent;
}

.tabs button.active{
  background:#fff;

  box-shadow:
    0 1px 5px
    rgba(0,0,0,.08);

  color:var(--blue);

  font-weight:700;
}

.authInput{
  width:100%;
  height:50px;

  border:1px solid #ddd;

  border-radius:14px;

  margin-bottom:10px;

  padding:0 14px;

  outline:none;

  background:#fafafa;

  font-size:16px;
}

.authInput:focus{
  border-color:var(--blue);
}

.primary{
  width:100%;
  height:50px;

  border:0;

  border-radius:14px;

  background:var(--blue);

  color:#fff;

  font-weight:700;
}

#error{
  min-height:25px;

  padding-top:8px;

  text-align:center;

  color:var(--danger);

  font-size:13px;
}


/* ======================
   APP
====================== */

#appScreen{
  position:fixed;

  top:var(--app-top);
  left:0;

  width:100%;
  height:var(--app-h);

  background:#fff;

  overflow:hidden;
}

.desktopTop{
  height:56px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 14px;

  background:#fff;

  border-bottom:1px solid var(--border);
}

.logoutButton{
  border:0;

  border-radius:11px;

  padding:8px 12px;

  background:#f2f3f4;

  color:var(--blue);
}

.appBody{
  position:relative;

  width:100%;
  height:calc(100% - 56px);

  display:flex;

  overflow:hidden;
}


/* ======================
   USERS
====================== */

.usersPane{
  width:320px;

  flex:none;

  background:#fff;

  border-left:1px solid var(--border);

  overflow:auto;
}

.usersHeader{
  height:58px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 16px;

  position:sticky;
  top:0;

  z-index:5;

  background:rgba(255,255,255,.96);

  backdrop-filter:blur(15px);

  border-bottom:1px solid var(--border);

  font-size:20px;
  font-weight:700;
}

.userRow{
  min-height:72px;

  display:flex;
  align-items:center;

  gap:11px;

  padding:9px 12px;

  border-bottom:1px solid #f1f2f3;
}

.userRow.active{
  background:#eaf3fb;
}

.avatar{
  width:50px;
  height:50px;

  flex:none;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      135deg,
      #64b5f6,
      #338aca
    );

  color:#fff;

  font-size:20px;
  font-weight:700;
}

.userInfo{
  min-width:0;
  flex:1;
}

.userTopLine{
  display:flex;
  justify-content:space-between;
  gap:5px;
}

.userName{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;

  font-size:16px;
  font-weight:650;
}

.onlineDot{
  width:8px;
  height:8px;

  display:inline-block;

  border-radius:50%;

  background:#35b66f;

  margin-right:5px;
}

.userPreview{
  margin-top:4px;

  color:var(--muted);

  font-size:13px;
}


.settingsButton{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:none;

  border:0;
  border-radius:50%;

  background:transparent;

  font-size:21px;
}

.settingsButton:active{
  background:#eef1f3;
}


.settingsProfile{
  padding:18px 15px;

  text-align:center;

  border-bottom:1px solid var(--border);
}

.settingsAvatar{
  width:68px;
  height:68px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 9px;

  border-radius:50%;

  background:var(--blue);

  color:#fff;

  font-size:27px;
  font-weight:700;
}

.settingsNickname{
  font-size:19px;
  font-weight:700;
}

.settingsRole{
  margin-top:4px;

  color:var(--muted);

  font-size:13px;
}

.settingsSectionTitle{
  padding:
    12px
    17px
    6px;

  color:var(--muted);

  font-size:12px;
  font-weight:600;
}

.settingsMessage{
  min-height:24px;

  padding:6px 15px;

  text-align:center;

  font-size:13px;
}

.settingsMessage.success{
  color:#218c4b;
}

.settingsMessage.error{
  color:var(--danger);
}


/* ======================
   CHAT
====================== */

.chatPane{
  flex:1;

  min-width:0;
  min-height:0;

  display:flex;
  flex-direction:column;

  background:var(--bg);
}

.noChat{
  flex:1;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#6e7c86;
}

.chatBox{
  flex:1;

  min-height:0;

  display:flex;
  flex-direction:column;
}

.chatHeader{
  height:58px;

  flex:none;

  position:relative;

  display:flex;
  align-items:center;

  background:rgba(255,255,255,.97);

  backdrop-filter:blur(18px);

  border-bottom:1px solid var(--border);

  z-index:20;

  padding:0 10px;
}

.backButton{
  display:none;

  width:42px;
  height:42px;

  border:0;

  background:transparent;

  color:var(--blue);

  font-size:31px;
}

.chatAvatar{
  width:40px;
  height:40px;

  flex:none;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--blue);

  color:#fff;

  font-weight:700;
}

.chatIdentity{
  min-width:0;

  flex:1;

  padding:0 9px;
}

.chatName{
  font-weight:700;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.chatStatus{
  color:var(--muted);
  font-size:12px;
}

.headerActions{
  display:flex;
  align-items:center;
  gap:2px;
}

.iconButton{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;

  border-radius:50%;

  background:transparent;

  color:#56636b;

  font-size:20px;
}

.iconButton:active{
  background:#eef1f3;
}

#countdown{
  min-width:30px;

  text-align:center;

  font-size:11px;

  color:var(--blue);
}


/* ======================
   MESSAGES
====================== */

.messages{
  flex:1;

  scroll-behavior:auto;
  overflow-anchor:none;

  min-height:0;

  overflow-y:auto;

  -webkit-overflow-scrolling:touch;

  overscroll-behavior:contain;

  padding:10px 8px 12px;

  background:
    radial-gradient(
      circle at 25px 25px,
      rgba(255,255,255,.24) 2px,
      transparent 3px
    ),
    var(--bg);

  background-size:50px 50px;
}

.message{
  width:fit-content;

  min-width:76px;
  max-width:min(82%, 520px);

  margin:3px 0;

  padding:7px 9px 5px;

  border-radius:15px;

  box-shadow:
    0 1px 1px
    rgba(0,0,0,.08);
}

.message.mine{
  margin-right:auto;

  background:var(--out);

  border-bottom-left-radius:5px;
}

.message.theirs{
  margin-left:auto;

  background:var(--in);

  border-bottom-right-radius:5px;
}

.messageBody{
  white-space:pre-wrap;

  word-break:break-word;

  font-size:15.8px;

  line-height:1.38;
}

.messageBody.locked{
  min-width:130px;

  height:24px;

  overflow:hidden;

  color:transparent;

  position:relative;

  user-select:none;
}

.messageBody.locked::after{
  content:"••••••••••••••";

  position:absolute;

  inset:0;

  color:#7b878c;

  filter:blur(4px);

  letter-spacing:2px;
}

.meta{
  display:flex;

  justify-content:flex-end;
  align-items:center;

  flex-wrap:wrap;

  gap:4px;

  margin-top:3px;

  color:#77858e;

  font-size:10px;
}

.deleteMsg{
  width:22px;
  height:22px;

  border:0;

  background:transparent;

  padding:0;

  font-size:12px;
}

.ownerDeleted{
  color:#b26446;
}


/* ======================
   MESSAGE REACTIONS
====================== */

.message{
  position:relative;
}

.reactionsRow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:3px;

  margin-top:4px;
}

.reactionChip{
  min-width:29px;
  height:23px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:2px;

  border:1px solid
    rgba(0,0,0,.07);

  border-radius:12px;

  padding:0 6px;

  background:
    rgba(255,255,255,.72);

  font-size:15px;
}

.reactionChip.mineReaction{
  border-color:
    rgba(51,144,236,.45);

  background:#e7f3ff;
}

.reactionPicker{
  position:fixed;

  z-index:500;

  display:flex;
  align-items:center;

  gap:3px;

  padding:5px;

  border-radius:24px;

  background:#fff;

  box-shadow:
    0 5px 25px
    rgba(0,0,0,.22);

  direction:ltr;

  transform:
    translateX(-50%);

  touch-action:none;
}

.reactionPicker button{
  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;

  border-radius:50%;

  background:transparent;

  padding:0;

  font-size:24px;

  transition:
    transform .1s ease,
    background .1s ease;
}

.reactionPicker button:active{
  transform:scale(1.25);

  background:#f1f3f4;
}

body.reactionSelecting{
  user-select:none;
  -webkit-user-select:none;
}



/* ==========================
   REPLY
========================== */

.replyPreview{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  background:#fff;
  border-top:1px solid var(--border);
  border-right:3px solid var(--blue);
  font-size:13px;
}

.replyPreview.hidden{
  display:none;
}

.replyPreviewText{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#57656e;
}

.replyPreviewClose{
  width:30px;
  height:30px;
  flex:none;
  border:0;
  border-radius:50%;
  background:transparent;
  font-size:20px;
  color:#66757e;
}

.replyQuote{
  margin-bottom:5px;
  padding:5px 8px;
  border-right:3px solid var(--blue);
  border-radius:7px;
  background:rgba(51,144,236,.08);
  font-size:12px;
  color:#52616a;
  overflow:hidden;
}

.replyQuoteAuthor{
  color:var(--blue);
  font-weight:700;
  margin-bottom:2px;
}

.replyQuoteText{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.message.replySwipe{
  transition:transform .12s ease;
}


/* ==========================
   REPLY BUTTON
========================== */

.replyButton{
  border:0;
  background:transparent;

  padding:1px 3px;
  margin:0;

  color:var(--blue);

  font-size:11px;
  font-weight:650;

  line-height:18px;
}

.replyButton:active{
  opacity:.5;
}


.imageSendButton{
  width:42px;height:42px;flex:none;border:0;border-radius:50%;
  background:transparent;font-size:21px;display:flex;align-items:center;justify-content:center;
}
.imageSendButton.uploading{opacity:.5;pointer-events:none}
.chatImage{
  display:block;max-width:min(68vw,360px);max-height:420px;width:auto;height:auto;
  border-radius:11px;object-fit:contain;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;-webkit-user-drag:none;
}
.imageLockedPlaceholder{
  width:190px;height:145px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:#e3e7e9;color:#77838a;font-size:13px;
}
body.privacyBlurImages .chatImage{filter:blur(30px)}

/* ======================
   COMPOSER
====================== */

.composerArea{
  flex:none;

  display:flex;
  align-items:flex-end;

  gap:6px;

  padding:
    6px
    7px
    calc(6px + env(safe-area-inset-bottom));

  background:#f4f5f6;

  border-top:1px solid #d9dddf;

  z-index:30;
}

.emojiButton{
  width:42px;
  height:42px;

  flex:none;

  border:0;
  border-radius:50%;

  background:transparent;

  font-size:23px;
}

.messageInput{
  min-width:0;

  flex:1;

  height:44px;

  border:1px solid #d6dadd;

  border-radius:22px;

  padding:0 15px;

  outline:none;

  background:#fff;

  font-size:16px;
}

.messageInput:focus{
  border-color:#c4cdd4;
}

.sendButton{
  width:44px;
  height:44px;

  flex:none;

  border:0;
  border-radius:50%;

  background:var(--blue);

  color:#fff;

  font-size:20px;
}

.emojiPanel{
  flex:none;

  padding:7px 10px 9px;

  display:flex;

  flex-wrap:wrap;

  gap:7px;

  background:#fff;

  border-top:1px solid var(--border);
}

.emojiItem{
  border:0;

  background:transparent;

  font-size:26px;

  padding:3px;
}


/* ======================
   LOCK OVERLAY
====================== */

.lockCover{
  position:absolute;

  inset:58px 0 0;

  z-index:15;

  pointer-events:none;

  display:flex;
  align-items:center;
  justify-content:center;
}

.lockBadge{
  pointer-events:auto;

  padding:10px 16px;

  border-radius:20px;

  background:rgba(255,255,255,.92);

  box-shadow:
    0 4px 20px
    rgba(0,0,0,.12);

  color:#50616b;

  font-size:13px;
}


/* ======================
   MODALS / MENUS
====================== */

.backdrop{
  position:fixed;

  inset:0;

  z-index:100;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:18px;

  background:
    rgba(15,22,28,.46);
}

.modal{
  width:100%;
  max-width:370px;

  background:#fff;

  border-radius:22px;

  padding:20px;

  box-shadow:
    0 20px 60px
    rgba(0,0,0,.22);
}

.modalTitle{
  text-align:center;
  font-weight:700;
  font-size:18px;
}

.modalText{
  margin:7px 0 14px;

  text-align:center;

  color:var(--muted);

  font-size:13px;
}

.modalInput{
  width:100%;
  height:48px;

  border:1px solid #ddd;

  border-radius:13px;

  outline:none;

  padding:0 13px;

  font-size:16px;
}

.modalError{
  min-height:25px;

  padding-top:6px;

  text-align:center;

  color:var(--danger);

  font-size:12px;
}

.modalActions{
  display:flex;
  gap:7px;
}

.modalActions button{
  flex:1;

  height:44px;

  border:0;

  border-radius:12px;
}

.cancelButton{
  background:#eef0f2;
}

.okButton{
  color:#fff;
  background:var(--blue);
}

.menuSheet{
  width:100%;
  max-width:390px;

  overflow:hidden;

  border-radius:20px;

  background:#fff;
}

.menuTitle{
  padding:15px;

  text-align:center;

  color:#687680;

  font-size:13px;

  border-bottom:1px solid var(--border);
}

.menuAction{
  width:100%;
  min-height:51px;

  display:block;

  border:0;
  border-bottom:1px solid #f0f1f2;

  background:#fff;

  text-align:right;

  padding:0 18px;

  font-size:16px;
}

.menuAction.danger{
  color:var(--danger);
}


/* ======================
   CALL
====================== */

.callOverlay{
  position:fixed;

  inset:0;

  z-index:200;

  display:flex;
  flex-direction:column;

  background:#111;

  color:#fff;
}

.remoteVideo{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  background:#111;
}

.localVideo{
  position:absolute;

  top:
    calc(
      18px +
      env(safe-area-inset-top)
    );

  right:15px;

  width:105px;
  height:145px;

  object-fit:cover;

  border-radius:14px;

  background:#222;

  z-index:205;
}

.callInfo{
  position:relative;

  z-index:206;

  text-align:center;

  padding:
    calc(55px + env(safe-area-inset-top))
    20px
    20px;
}

.callName{
  font-size:25px;
  font-weight:700;
}

.callState{
  margin-top:7px;
  color:#d3d8dc;
}

.callControls{
  position:absolute;

  left:0;
  right:0;
  bottom:
    calc(
      35px +
      env(safe-area-inset-bottom)
    );

  z-index:210;

  display:flex;
  justify-content:center;

  gap:18px;
}

.callControl{
  width:62px;
  height:62px;

  border:0;

  border-radius:50%;

  font-size:24px;
}

.endCall{
  background:#e83b3f;
  color:#fff;
}


/* ======================
   MOBILE
====================== */

@media(max-width:700px){

  .desktopTop{
    display:none;
  }

  .appBody{
    height:100%;
  }

  .usersPane{
    position:absolute;

    inset:0;

    width:100%;

    border:0;

    z-index:5;
  }

  .chatPane{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:10;

    transform:translateX(-100%);

    transition:
      transform .2s ease;
  }

  .chatPane.mobileOpen{
    transform:translateX(0);
  }

  .backButton{
    display:flex;

    align-items:center;
    justify-content:center;
  }

  .chatHeader{
    padding:
      env(safe-area-inset-top)
      4px
      0;

    height:
      calc(
        58px +
        env(safe-area-inset-top)
      );
  }

  .lockCover{
    inset:
      calc(
        58px +
        env(safe-area-inset-top)
      )
      0
      0;
  }

  .messages{
    padding-left:7px;
    padding-right:7px;
  }

  .message{
    max-width:86%;
  }

  .backdrop{
    align-items:flex-end;
    padding:0;
  }

  .menuSheet,
  .modal{
    max-width:none;

    border-radius:
      22px
      22px
      0
      0;

    padding-bottom:
      calc(
        18px +
        env(safe-area-inset-bottom)
      );
  }

}


/*
  عندما يظهر الكيبورد:
  نحذف safe-area السفلي حتى يلتصق
  شريط الكتابة مباشرة فوق لوحة المفاتيح.
*/
body.keyboardOpen
.composerArea{
  padding-bottom:6px;
}


/* الرسالة المحلية أثناء إرسالها */
.pendingMessage{
  opacity:.88;
}

.pendingStatus{
  opacity:.65;
  font-size:11px;
}
\n
/* ==========================
   USER SEARCH
========================== */

.userSearchWrap{
  position:relative;

  display:flex;
  align-items:center;

  margin:10px 10px 8px;

  height:42px;

  background:#f1f3f5;

  border-radius:12px;

  border:1px solid transparent;
}

.userSearchWrap:focus-within{
  background:#fff;

  border-color:#cbd5dc;
}

.userSearchIcon{
  flex:none;

  width:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:15px;

  opacity:.55;
}

.userSearchInput{
  flex:1;

  min-width:0;

  height:100%;

  border:0;
  outline:0;

  background:transparent;

  font-size:15px;

  direction:rtl;

  padding:0 4px;

  color:#1c2730;
}

.userSearchInput::placeholder{
  color:#7c8a93;
}

.clearUserSearch{
  flex:none;

  width:36px;
  height:36px;

  margin-left:3px;

  border:0;

  background:transparent;

  font-size:24px;

  color:#77858e;

  line-height:1;
}

.userSearchEmpty{
  padding:20px 12px;

  text-align:center;

  color:#89959d;

  font-size:14px;
}
\n

/* ===== إصلاح لمس خانة البحث على iPhone ===== */

.userSearchWrap{
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
}

.userSearchInput{
  position:relative !important;
  z-index:21 !important;

  pointer-events:auto !important;
  touch-action:manipulation;

  -webkit-user-select:text !important;
  user-select:text !important;

  font-size:16px !important;
}

.userSearchIcon{
  pointer-events:none !important;
}

.clearUserSearch{
  position:relative;
  z-index:22;
  pointer-events:auto !important;
}

@media(max-width:700px){

  /*
    عندما تكون المحادثة خارج الشاشة
    لا نسمح لها باعتراض لمس قائمة المستخدمين.
  */
  .chatPane:not(.mobileOpen){
    pointer-events:none !important;
  }

  .chatPane.mobileOpen{
    pointer-events:auto !important;
  }

  .usersPane{
    pointer-events:auto !important;
  }
}



/* ===== روابط الرسائل ===== */

.messageBody{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.messageLinkWrap{
  display:inline-flex;
  align-items:center;
  gap:5px;

  max-width:100%;

  vertical-align:middle;
}

.messageLink{
  color:#0877c9;

  text-decoration:underline;
  text-decoration-thickness:1px;

  overflow-wrap:anywhere;
  word-break:break-word;

  cursor:pointer;
}

.message.mine .messageLink{
  color:#0666a8;
}

.copyMessageLink{
  flex:none;

  border:0;

  border-radius:7px;

  padding:3px 6px;

  font-size:11px;
  font-weight:600;

  background:rgba(0,0,0,.08);

  color:inherit;

  cursor:pointer;

  -webkit-tap-highlight-color:transparent;
}

.copyMessageLink:active{
  transform:scale(.96);
}


/* AZYAA VOICE HOLD */

.voiceRecordButton {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 0;
  border-radius: 50%;
  font-size: 21px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.voiceRecordButton.recording {
  transform: scale(1.1);
}

.voiceRecordState {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12px;
}

.voiceRecordState.hidden {
  display: none !important;
}

.voiceRecordDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: voicePulse 1s infinite;
}

@keyframes voicePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}


/* AZYAA FRIENDS */
.friendsSectionTitle{padding:14px 16px 8px;font-size:13px;font-weight:700;opacity:.65}
.friendActionButton{border:0;border-radius:10px;padding:8px 11px;margin-inline-start:8px;font:inherit;font-size:13px;cursor:pointer}
.friendActionButton.secondary{opacity:.72}
.friendRequestActions{display:flex;gap:6px;margin-inline-start:6px}
.friendActionButton:disabled{opacity:.45;pointer-events:none}


/* AZYAA FINAL TABS */
#appScreen {
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

.azyaaBottomNav {
  position: fixed;
  z-index: 1200;
  right: 0;
  left: 0;
  bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(127,127,127,.18);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.azyaaBottomNav button {
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
  opacity: .62;
}

.azyaaBottomNav button.active {
  opacity: 1;
  font-weight: 700;
}

.azyaaBottomNav span { font-size: 21px; line-height: 1; }
.azyaaBottomNav small { font-size: 11px; }
.azyaaMainHidden { display: none !important; }

.azyaaTabPanel {
  position: fixed;
  z-index: 900;
  inset: 0 0 calc(64px + env(safe-area-inset-bottom)) 0;
  overflow-y: auto;
  background: var(--bg, #fff);
  padding-top: env(safe-area-inset-top);
}

.azyaaTabHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 18px 16px 14px;
  font-size: 22px;
  font-weight: 800;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(127,127,127,.14);
}

.azyaaPanelList,
.azyaaSettingsCards,
.azyaaVideoGrid { padding: 12px; }

.azyaaCallRow {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 13px 10px;
  border-bottom: 1px solid rgba(127,127,127,.12);
}

.azyaaCallIcon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(127,127,127,.10);
}

.azyaaCallInfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.azyaaCallInfo span,
.azyaaCallTime { font-size: 12px; opacity: .65; }

.azyaaSettingsCards { display: grid; gap: 10px; }

.azyaaSettingsCard {
  width: 100%;
  text-align: right;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  background: rgba(127,127,127,.09);
  font: inherit;
  font-weight: 700;
}

.azyaaSettingsCard.danger { color: #b42318; }

.azyaaEntertainmentForm {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.azyaaEntertainmentForm input,
.azyaaEntertainmentForm select,
.azyaaEntertainmentForm button {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 12px;
  font: inherit;
}

.azyaaEntertainmentForm input {
  border: 1px solid rgba(127,127,127,.24);
  background: transparent;
}

.azyaaEntertainmentForm button { border: 0; font-weight: 700; }
.azyaaVideoGrid { display: grid; gap: 16px; }

.azyaaVideoCard {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(127,127,127,.08);
}

.azyaaVideoCard iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

.azyaaVideoCard.isLandscape iframe {
  aspect-ratio: 16 / 9;
}

.azyaaVideoCard.isPortrait {
  width: min(100%, 430px);
  margin-inline: auto;
}

.azyaaVideoCard.isPortrait iframe {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-height: 78dvh;
}

.azyaaVideoFooter {
  padding: 11px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.azyaaVideoFooter button {
  border: 0;
  border-radius: 9px;
  padding: 7px 10px;
  font: inherit;
}

.azyaaEmpty {
  padding: 26px 14px;
  text-align: center;
  opacity: .58;
}


.azyaaBottomNav.azyaaNavHiddenInChat {
  display:none !important;
}


/* AZYYA_MODAL_LAYER_FIX */
.backdrop {
  z-index: 5000 !important;
  pointer-events: auto !important;
}

.backdrop .modal,
.backdrop .menuSheet {
  position: relative;
  z-index: 5001;
  pointer-events: auto !important;
}

.callOverlay {
  z-index: 6000 !important;
}

.localVideo {
  z-index: 6005 !important;
}

.callInfo {
  z-index: 6006 !important;
}

.callControls {
  z-index: 6010 !important;
}

.reactionPicker {
  z-index: 6100 !important;
}

.azyaaSettingsCard {
  position: relative;
  z-index: 2;
  pointer-events: auto !important;
  touch-action: manipulation;
}

.azyaaSettingsCards {
  position: relative;
  z-index: 1;
  pointer-events: auto !important;
}

/* AZYAA SETTINGS TAB DIRECT ACTIONS V3 */
#azyaaSettingsPanel .azyaaSettingsCard {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-user-select: none;
  user-select: none;
}

#accountInfoBackdrop,
#changePasswordBackdrop,
#appSettingsBackdrop {
  pointer-events: auto !important;
}

#accountInfoBackdrop:not(.hidden),
#changePasswordBackdrop:not(.hidden),
#appSettingsBackdrop:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
}

/* AZYAA SAFARI SETTINGS DEBUG V1 */
#azyaaSafariDebugBox {
  position: fixed !important;
  left: 8px !important;
  right: 8px !important;
  top: 8px !important;
  z-index: 2147483647 !important;
  max-height: 38vh !important;
  overflow: auto !important;
  padding: 10px !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.90) !important;
  color: #fff !important;
  direction: ltr !important;
  text-align: left !important;
  font: 11px/1.35 monospace !important;
  pointer-events: auto !important;
  box-shadow: 0 4px 22px rgba(0,0,0,.45) !important;
}

#azyaaSafariDebugTitle {
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

#azyaaSafariDebugText {
  white-space: pre-wrap !important;
  margin: 0 !important;
  color: #fff !important;
}

#azyaaSafariDebugClear {
  margin-top: 7px !important;
  padding: 5px 10px !important;
}


/* AZYAA CHAT FULLSCREEN NO NAV GAP */
@media (max-width: 900px) {

  body.azyaaChatFullscreen .azyaaBottomNav,
  body.azyaaChatFullscreen #azyaaBottomNav,
  .azyaaBottomNav.azyaaNavHiddenInChat {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /*
    مهم:
    لا نغيّر ارتفاع chatPane إطلاقاً.
    القواعد الأصلية للتطبيق مسؤولة عن الدردشة والكيبورد.
  */
  body.azyaaChatFullscreen,
  body.azyaaChatFullscreen .appBody {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /*
    نضمن أن عناصر الدردشة الداخلية تبقى ضمن Flex الطبيعي،
    حتى تبقى composerArea ظاهرة دائماً.
  */
  body.azyaaChatFullscreen .chatPane.mobileOpen {
    min-height: 0 !important;
  }

  body.azyaaChatFullscreen .chatBox {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.azyaaChatFullscreen .messages {
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  body.azyaaChatFullscreen .composerArea {
    flex: 0 0 auto !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 30 !important;
  }

  body.azyaaChatFullscreen .messageInput {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* AZYAA APP SCREEN GAP FIX */
@media (max-width: 900px) {
  /*
    #appScreen عنده افتراضياً:
    padding-bottom: calc(70px + env(safe-area-inset-bottom))
    وهذا يبقى حتى بعد إخفاء شريط التبويبات، فيظهر كفراغ أبيض.
    داخل الدردشة فقط نلغي هذا الحجز.
  */
  body.azyaaChatFullscreen #appScreen {
    padding-bottom: 0 !important;
  }
}

/* AZYAA CHAT TAP/VISIBILITY V2 */
.userRow {
  position: relative;
  pointer-events: auto !important;
  touch-action: manipulation;
}

@media (max-width: 900px) {
  #chatPane.mobileOpen {
    display: flex !important;
    pointer-events: auto !important;
    z-index: 30 !important;
  }

  #chatPane.mobileOpen.azyaaMainHidden {
    display: flex !important;
  }
}
/* END AZYAA CHAT TAP/VISIBILITY V2 */

/* AZYAA HIDDEN OVERLAY TAP SAFETY V3 */
.hidden,
.backdrop.hidden,
.callOverlay.hidden,
.azyaaTabPanel.hidden {
  pointer-events: none !important;
}

#usersPane:not(.azyaaMainHidden) .userRow {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}
/* END AZYAA HIDDEN OVERLAY TAP SAFETY V3 */


/* AZYAA UNREAD BADGE RED V1 */
.azyaaUnreadBadge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-inline-start: 8px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.userRow .azyaaUnreadBadge {
  margin-inline-start: auto;
}


/* AZYAA ENTERTAINMENT TIKTOK-STYLE SHORTS V1 */
.azyaaEntertainmentTabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
  background: var(--panel, rgba(255,255,255,.96));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.azyaaEntertainmentTabs button {
  border: 0;
  border-radius: 999px;
  padding: 9px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  background: rgba(127,127,127,.10);
}

.azyaaEntertainmentTabs button.active {
  background: rgba(127,127,127,.24);
}

.azyaaEntertainmentForm select {
  border: 1px solid rgba(127,127,127,.24);
  background: transparent;
}

.azyaaShortFeed {
  height: min(78dvh, 760px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #000;
}

.azyaaShortFeed::-webkit-scrollbar { display: none; }

.azyaaShortFeed .azyaaShortCard {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: min(78dvh, 760px);
  margin: 0 auto;
  border-radius: 0;
  background: #000;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
}

.azyaaShortFeed .azyaaShortCard iframe {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 9 / 16;
  border: 0;
  background: #000;
}

.azyaaShortFeed .azyaaVideoFooter {
  flex: 0 0 auto;
  color: #fff;
  background: #000;
  padding: 8px 10px 10px;
}

.azyaaVideoOwnerControls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 600px) {
  .azyaaShortFeed,
  .azyaaShortFeed .azyaaShortCard {
    height: calc(100dvh - 150px);
    min-height: 500px;
  }
}

/* AZYAA ENTERTAINMENT COMPACT UI V2 */
#azyaaEntertainmentPanel {
  padding-top: 0 !important;
}

.azyaaEntertainmentTabs {
  gap: 3px;
  padding: 2px 4px;
  min-height: 28px;
}

.azyaaEntertainmentTabs button {
  padding: 3px 4px;
  min-height: 24px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.1;
}

.azyaaShortFeed {
  height: calc(100dvh - 96px);
}

.azyaaShortFeed .azyaaShortCard {
  height: calc(100dvh - 96px);
  max-width: 100%;
}

.azyaaShortFeed .azyaaVideoFooter {
  padding: 4px 8px 5px;
  min-height: 28px;
  font-size: 12px;
}

@media (max-width: 600px) {
  .azyaaShortFeed,
  .azyaaShortFeed .azyaaShortCard {
    height: calc(100dvh - 96px);
    min-height: 0;
  }
}


/* AZYAA SENT MESSAGE: POP UP FROM COMPOSER V1 */
@keyframes azyaaMessageRiseFromBottom {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message.mine.pendingMessage {
  transform-origin: bottom right;
  animation: azyaaMessageRiseFromBottom 180ms cubic-bezier(.2,.8,.2,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .message.mine.pendingMessage {
    animation: none;
  }
}


/* AZYAA CHAT: ANCHOR SHORT CONVERSATIONS TO BOTTOM V1 */
.messages {
  display: flex;
  flex-direction: column;
}

.messages > :first-child {
  margin-top: auto;
}


/* AZYAA CALL HISTORY COLORS V1 */
.azyaaCallRow--missed {
  color: #d93025;
  background: rgba(217,48,37,.06);
}

.azyaaCallRow--incoming {
  color: #1b8f3a;
  background: rgba(27,143,58,.06);
}

.azyaaCallRow--outgoing {
  color: #2f6fd6;
  background: rgba(47,111,214,.06);
}

.azyaaCallRow--missed .azyaaCallTime,
.azyaaCallRow--incoming .azyaaCallTime,
.azyaaCallRow--outgoing .azyaaCallTime {
  color: inherit;
}


/* AZYAA MODERN CHAT LIST + APP PALETTE V1 */
:root {
  --azyaa-accent: #6d5dfc;
  --azyaa-accent-2: #8b7cff;
  --azyaa-soft: rgba(109,93,252,.10);
  --azyaa-line: rgba(109,93,252,.13);
}

.usersPane {
  background: linear-gradient(180deg, rgba(109,93,252,.055), transparent 190px), var(--panel);
}

.usersHeader {
  border-bottom: 1px solid var(--azyaa-line);
}

.userSearchWrap {
  background: rgba(127,127,127,.075);
  border: 1px solid var(--azyaa-line);
  border-radius: 16px;
}

.friendsSectionTitle {
  color: var(--azyaa-accent);
  font-weight: 800;
  letter-spacing: .1px;
}

.friendsSectionToggle {
  width: calc(100% - 16px);
  margin: 8px;
  padding: 10px 12px;
  border: 1px solid var(--azyaa-line);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--azyaa-soft), rgba(127,127,127,.035));
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: inherit;
  color: var(--azyaa-accent);
  cursor: pointer;
}

.friendsSectionChevron {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--azyaa-soft);
  font-size: 15px;
}

.azyaaFriendsExpandable {
  animation: azyaaFriendsReveal 160ms ease-out both;
}

@keyframes azyaaFriendsReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.userRow {
  border-bottom-color: rgba(127,127,127,.08);
  transition: background .15s ease, transform .15s ease;
}

.userRow:active {
  background: var(--azyaa-soft);
  transform: scale(.992);
}

.azyaaBottomNav {
  border-top: 1px solid var(--azyaa-line);
  box-shadow: 0 -8px 30px rgba(0,0,0,.055);
}

.azyaaBottomNav button.active {
  color: var(--azyaa-accent) !important;
}

.primary,
.friendActionButton {
  background: linear-gradient(135deg, var(--azyaa-accent), var(--azyaa-accent-2));
}

.guestLoginButton{width:100%;min-height:46px;margin-top:10px;border:1px solid rgba(109,93,252,.18);border-radius:14px;background:rgba(109,93,252,.07);color:#6d5dfc;font-weight:800}
body.azyaaGuestMode .azyaaBottomNav{grid-template-columns:1fr}
body.azyaaGuestMode .azyaaBottomNav button[data-tab="entertainment"]{opacity:1;color:#6d5dfc;font-weight:800}
/* AZYAA GUEST RETURN TO LOGIN V1 */
body.azyaaGuestMode .azyaaBottomNav{grid-template-columns:1fr 1fr}
body.azyaaGuestMode .azyaaGuestBackToLogin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:transparent;font:inherit;color:inherit;min-height:48px}
body.azyaaGuestMode .azyaaGuestBackToLogin small{font-size:11px;font-weight:800}

/* AZYAA VOICE RECORDING COMPOSER V2 */
.composerArea.voiceRecordingActive{
  align-items:center;
}
/* مهم للآيفون: لا نستخدم display:none على حقل الكتابة أثناء التسجيل.
   Safari يغلق الكيبورد فور اختفاء العنصر الذي يحمل الـ focus. */
.composerArea.voiceRecordingActive .messageInput{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-width:1px !important;
  max-width:1px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  caret-color:transparent !important;
  overflow:hidden !important;
}
.composerArea.voiceRecordingActive .imageSendButton,
.composerArea.voiceRecordingActive .sendButton{
  display:none !important;
}
.composerArea.voiceRecordingActive .voiceRecordState{
  display:flex !important;
  flex:1;
  height:44px;
  min-width:0;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 14px;
  border:1px solid #d6dadd;
  border-radius:22px;
  background:#fff;
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  box-sizing:border-box;
}
.composerArea.voiceRecordingActive .voiceRecordButton{
  transform:scale(1.06);
}
.composerArea.voiceRecordingActive .voiceRecordDot{
  width:10px;
  height:10px;
}
#voiceRecordTimer{
  min-width:44px;
  text-align:center;
  direction:ltr;
  font-variant-numeric:tabular-nums;
}


/* AZYYA VOICE ONCE + SWIPE CANCEL V1 */
.voiceOnceOption{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#fff;border:1px solid #d6dadd;cursor:pointer;user-select:none;-webkit-user-select:none}
.voiceOnceOption input{position:absolute;opacity:0;pointer-events:none}
.voiceOnceOption span{font-size:18px;opacity:.55}
.voiceOnceOption:has(input:checked){border-color:var(--blue);background:rgba(55,125,255,.10)}
.voiceOnceOption:has(input:checked) span{opacity:1;font-weight:800}
.composerArea.voiceRecordingActive .voiceOnceOption{display:flex}
.composerArea.voiceCancelArmed .voiceRecordState{border-color:#d93025;transform:translateY(-2px)}
.composerArea.voiceCancelArmed .voiceRecordState::after{content:"اسحب أكثر للإلغاء";font-size:11px;color:#d93025}
.audioOncePlay{border:0;border-radius:18px;padding:9px 13px;font:inherit;font-size:13px;font-weight:800;cursor:pointer;background:rgba(55,125,255,.10);color:inherit}
.audioOncePlay:disabled{opacity:.65}
.audioOnceUsed{font-size:13px;opacity:.65;padding:7px 2px}


/* AZYAA MODERN VOICE MESSAGE V1 */
.modernVoiceCard{display:flex;align-items:center;gap:10px;min-width:230px;max-width:290px;padding:8px 10px;border-radius:18px;background:rgba(255,255,255,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modernVoiceIcon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(55,125,255,.12);font-size:18px}
.modernVoiceMain{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.modernVoiceLabel{font-size:11px;font-weight:800;opacity:.68;padding-inline:3px}
.modernVoiceCard .chatAudio{display:block;width:100%;height:34px;min-width:0;max-width:100%;margin:0}
.modernVoiceCard .audioLoading{font-size:11px;opacity:.62;padding:4px 3px}
.audioOncePlay{width:100%;min-width:230px;max-width:290px;min-height:56px;display:flex;align-items:center;gap:11px;text-align:right;border:0;border-radius:18px;padding:8px 11px;font:inherit;cursor:pointer;background:rgba(255,255,255,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:inherit}
.audioOncePlay>span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.audioOncePlay b{font-size:13px;font-weight:850}
.audioOncePlay small{font-size:10px;opacity:.65}
.audioOnceIcon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:flex!important;align-items:center;justify-content:center;background:rgba(55,125,255,.14);font-size:14px}
.audioOnceUsed{min-width:180px;border-radius:16px;padding:10px 13px;background:rgba(255,255,255,.30);font-size:12px;font-weight:750;opacity:.72}
.message.mine .modernVoiceCard,.message.mine .audioOncePlay,.message.mine .audioOnceUsed{background:rgba(255,255,255,.24)}
@media(max-width:380px){.modernVoiceCard,.audioOncePlay{min-width:205px;max-width:245px}}


/* AZYAA INTERACTIVE VOICE WAVEFORM V1 */
.modernVoiceCard{min-width:255px;max-width:315px;padding:9px 11px}
.voiceWaveRow{display:flex;align-items:center;gap:8px;width:100%;direction:ltr}
.voiceAudioEngine{display:none!important}
.voicePlayButton{width:34px;height:34px;flex:0 0 34px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(55,125,255,.14);color:inherit;font-size:13px;font-weight:900;padding:0;cursor:pointer}
.voiceWaveform{display:block;flex:1;min-width:0;width:155px;height:38px;touch-action:none;cursor:pointer}
.voiceDuration{min-width:32px;text-align:center;font-size:11px;font-weight:850;font-variant-numeric:tabular-nums;color:#e53935}
#voiceRecordTimer{color:#e53935!important;font-weight:900}
@media(max-width:380px){.modernVoiceCard{min-width:225px;max-width:270px}.voiceWaveform{width:125px}}


/* AZYAA STABLE PENDING MESSAGE V1 */
.pendingMessage{opacity:1!important}
.message.mine.pendingMessage{animation:azyaaMessageRiseFromBottom 180ms cubic-bezier(.2,.8,.2,1) both}
.pendingControl{pointer-events:none}
.pendingControl:disabled{opacity:1}
.pendingStatus{opacity:1;font-size:inherit}


/* AZYAA DOUBLE-TAP: prevent browser zoom; app handles double tap as reaction. */
html,body,#app,.messages,.message,.messageBody,.chatImage,.modernVoiceCard,.audioOncePlay{touch-action:manipulation;}


/* AZYAA ENTERTAINMENT SHARE V1 */
.azyaaVideoFooter{flex-wrap:wrap}
.azyaaVideoShareButton{border:0;border-radius:10px;padding:7px 10px;font:inherit;font-size:12px;font-weight:800;cursor:pointer;background:rgba(55,125,255,.10);color:inherit}
.azyaaShareBackdrop{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.42);display:flex;align-items:flex-end;justify-content:center;padding:14px}
.azyaaSharePanel{width:min(480px,100%);max-height:72%;overflow:auto;background:var(--panel,#fff);color:inherit;border-radius:20px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.24)}
.azyaaShareTitle{font-weight:900;font-size:16px;margin-bottom:12px;text-align:center}
.azyaaShareFriends{display:flex;flex-direction:column;gap:7px}
.azyaaShareFriend,.azyaaShareCancel{width:100%;min-height:44px;border:0;border-radius:12px;padding:10px 12px;font:inherit;font-weight:800;cursor:pointer;background:rgba(55,125,255,.09);color:inherit}
.azyaaShareCancel{margin-top:10px;background:rgba(120,120,120,.10)}
.entertainmentShareMessage{width:min(290px,100%);display:flex;align-items:center;gap:10px;border:0;border-radius:16px;padding:10px 12px;text-align:right;font:inherit;color:inherit;background:rgba(55,125,255,.10);cursor:pointer}
.entertainmentShareIcon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(55,125,255,.16)}
.entertainmentShareInfo{min-width:0;display:flex;flex-direction:column;gap:2px}.entertainmentShareInfo b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.entertainmentShareInfo small{font-size:10px;opacity:.68}


/* AZYAA SHARED ENTERTAINMENT RETURN V1 */
.azyaaSharedReturnBar{
  position:sticky;
  top:0;
  z-index:20;
  padding:8px 10px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(127,127,127,.14);
}
.azyaaSharedReturnButton{
  border:0;
  border-radius:12px;
  padding:10px 14px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  background:rgba(55,125,255,.10);
  color:inherit;
  touch-action:manipulation;
}


/* AZYAA IPHONE KEYBOARD LAYOUT FIX V1
   عند ظهور كيبورد iOS:
   - appScreen نفسه يطابق visualViewport بواسطة --app-h/--app-top.
   - لا نضيف safe-area علوي مرة ثانية داخل chatHeader.
   - لا نترك padding سفلي محجوزاً من شريط التبويبات المخفي.
*/
@media (max-width: 900px) {
  body.keyboardOpen.azyaaChatFullscreen #appScreen {
    padding-bottom: 0 !important;
  }

  body.keyboardOpen.azyaaChatFullscreen .chatPane.mobileOpen {
    height: 100% !important;
    min-height: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  body.keyboardOpen.azyaaChatFullscreen .chatHeader {
    height: 58px !important;
    min-height: 58px !important;
    padding-top: 0 !important;
    flex: 0 0 58px !important;
  }

  body.keyboardOpen.azyaaChatFullscreen .chatBox {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.keyboardOpen.azyaaChatFullscreen .composerArea {
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }
}


/* AZYAA IPHONE KEYBOARD LAYOUT FIX V2 - لا يعتمد على azyaaChatFullscreen */
@media (max-width: 900px) {
  body.keyboardOpen #appScreen {
    padding-bottom: 0 !important;
  }
  body.keyboardOpen #chatPane.mobileOpen {
    height: 100% !important;
    min-height: 0 !important;
    inset: 0 !important;
  }
  body.keyboardOpen #chatPane.mobileOpen .chatBox {
    height: 100% !important;
    min-height: 0 !important;
  }
  body.keyboardOpen #chatPane.mobileOpen .chatHeader {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 4px !important;
    flex: 0 0 58px !important;
  }
  body.keyboardOpen #chatPane.mobileOpen .messages {
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
  body.keyboardOpen #chatPane.mobileOpen .composerArea {
    flex: 0 0 auto !important;
    padding-bottom: 6px !important;
    margin: 0 !important;
  }
}


/* AZYAA ANDROID CHAT HEADER FIX V1
   يمنع اسم المستخدم/آخر ظهور من الالتفاف عمودياً أو الصعود خارج الهيدر. */
@media (max-width: 900px) {
  #chatPane.mobileOpen .chatHeader {
    overflow: hidden !important;
  }

  #chatPane.mobileOpen .backButton,
  #chatPane.mobileOpen .chatAvatar,
  #chatPane.mobileOpen .headerActions {
    flex-shrink: 0 !important;
  }

  #chatPane.mobileOpen .chatIdentity {
    min-width: 0 !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #chatPane.mobileOpen .chatName,
  #chatPane.mobileOpen .chatStatus {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #chatPane.mobileOpen .chatName {
    line-height: 20px !important;
    flex: 0 0 20px !important;
  }

  #chatPane.mobileOpen .chatStatus {
    line-height: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }
}


/* AZYAA ANDROID HEADER SMALL TEXT V2
   على Android فقط نصغر الاسم والحالة حتى يظهر النص كاملاً بدون نقاط الحذف. */
@media (max-width: 900px) {
  html.azyaaAndroid #chatPane.mobileOpen .chatIdentity {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  html.azyaaAndroid #chatPane.mobileOpen .chatName {
    font-size: 13px !important;
    line-height: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    text-overflow: clip !important;
  }

  html.azyaaAndroid #chatPane.mobileOpen .chatStatus {
    font-size: 9px !important;
    line-height: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    text-overflow: clip !important;
  }
}


/* AZYAA CALL ICONS + VIDEO CAMERA TOGGLE V1 */
.azyaaCallHeaderButton svg{width:25px;height:25px;display:block;pointer-events:none}
.azyaaCallHeaderButton{color:#111!important}
#cameraToggleButton{background:rgba(255,255,255,.92);color:#111;display:flex;align-items:center;justify-content:center}
#cameraToggleButton.hidden{display:none!important}
.localVideo.azyaaCameraOff{opacity:.18;filter:grayscale(1)}


/* AZYYA CHAT BACKGROUND PICKER V1 */
.messages{
  background-image:url('/chat-backgrounds/bg1.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:local;
}
.azyaaBgPickerBackdrop{position:fixed;inset:0;z-index:12000;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.azyaaBgPickerSheet{width:min(520px,100%);max-height:82vh;overflow:auto;background:#fff;border-radius:22px;padding:16px;color:#202428;box-shadow:0 16px 45px rgba(0,0,0,.25)}
.azyaaBgPickerTitle{font-size:18px;font-weight:900;text-align:center;margin-bottom:12px}
.azyaaBgPickerGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.azyaaBgChoice{border:2px solid transparent;border-radius:15px;padding:5px;background:#f3f4f5;overflow:hidden;font:inherit;color:inherit}
.azyaaBgChoice.active{border-color:var(--blue)}
.azyaaBgChoice img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:11px}
.azyaaBgChoice span{display:block;padding:7px 3px 3px;font-size:12px;font-weight:800;text-align:center}
.azyaaBgPickerClose{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:12px;background:#eef1f3;font:inherit;font-weight:800}


/* AZYAA WHOLE APP THEMES V1 */
:root[data-azyaa-theme="modern"]{--blue:#3390ec;--blue-dark:#2b7fcc;--bg:#e8eef3;--panel:#fff;--border:#dfe7ed;--out:#d9fdd3;--in:#fff;--text:#202428;--muted:#7c8b96;--azyaa-surface:#f5f8fa;--azyaa-nav:#fff;}
:root[data-azyaa-theme="mystic"]{--blue:#9b7cff;--blue-dark:#7659df;--bg:#121118;--panel:#1d1a24;--border:#35303e;--out:#3b3151;--in:#292530;--text:#f4efff;--muted:#aaa0b8;--azyaa-surface:#24202c;--azyaa-nav:#19171f;}
:root[data-azyaa-theme="pink"]{--blue:#e76b9b;--blue-dark:#c94d7e;--bg:#f8e8ef;--panel:#fff8fb;--border:#f0cfdd;--out:#f8cddd;--in:#fff;--text:#38272f;--muted:#9d7687;--azyaa-surface:#fff0f6;--azyaa-nav:#fff8fb;}
:root[data-azyaa-theme="auto-day"]{--blue:#668da8;--blue-dark:#4e738d;--bg:#eceae4;--panel:#fffdf8;--border:#dedbd2;--out:#e0ead9;--in:#fffdf8;--text:#292b2d;--muted:#7c807f;--azyaa-surface:#f5f3ed;--azyaa-nav:#fffdf8;}
:root[data-azyaa-theme="auto-night"]{--blue:#7399b5;--blue-dark:#587f9b;--bg:#111318;--panel:#1b1e24;--border:#30343c;--out:#263c36;--in:#252930;--text:#eef1f4;--muted:#9aa3ad;--azyaa-surface:#20242b;--azyaa-nav:#181b20;}
:root[data-azyaa-theme="emerald"]{--blue:#168c73;--blue-dark:#0e705b;--bg:#e8f3ef;--panel:#fbfffd;--border:#cfe4dc;--out:#ccebdd;--in:#fff;--text:#20312c;--muted:#758d85;--azyaa-surface:#eff8f4;--azyaa-nav:#fbfffd;}
:root[data-azyaa-theme="ocean"]{--blue:#247ba0;--blue-dark:#195f7d;--bg:#e6f0f5;--panel:#fbfdff;--border:#d1e0e8;--out:#cfe7ee;--in:#fff;--text:#20313a;--muted:#718893;--azyaa-surface:#eef6f9;--azyaa-nav:#fbfdff;}
:root[data-azyaa-theme="lavender"]{--blue:#8b72c7;--blue-dark:#7257b0;--bg:#eeeaf6;--panel:#fdfbff;--border:#ddd4ee;--out:#e2d8f3;--in:#fff;--text:#2f2a39;--muted:#887f98;--azyaa-surface:#f5f1fb;--azyaa-nav:#fdfbff;}
:root[data-azyaa-theme="peach"]{--blue:#df8565;--blue-dark:#c56c4d;--bg:#f7ece6;--panel:#fffaf7;--border:#edd8cd;--out:#f5d8ca;--in:#fff;--text:#3a2d28;--muted:#9a8176;--azyaa-surface:#fff2ec;--azyaa-nav:#fffaf7;}
:root[data-azyaa-theme="sand"]{--blue:#9a7b58;--blue-dark:#7f6346;--bg:#eee9e0;--panel:#fffdf9;--border:#ded4c5;--out:#e7ddc8;--in:#fff;--text:#342f28;--muted:#8b8174;--azyaa-surface:#f5f0e8;--azyaa-nav:#fffdf9;}
:root[data-azyaa-theme="slate"]{--blue:#607080;--blue-dark:#4c5966;--bg:#e8ecef;--panel:#fbfcfd;--border:#d5dce1;--out:#d8e1e5;--in:#fff;--text:#273038;--muted:#78838c;--azyaa-surface:#f0f3f5;--azyaa-nav:#fbfcfd;}
:root[data-azyaa-theme="ruby"]{--blue:#b64c63;--blue-dark:#97394f;--bg:#f5e8ec;--panel:#fff9fb;--border:#ead0d7;--out:#f0cad4;--in:#fff;--text:#3b2930;--muted:#987986;--azyaa-surface:#faeef2;--azyaa-nav:#fff9fb;}
:root[data-azyaa-theme="mint"]{--blue:#42a98d;--blue-dark:#318870;--bg:#e8f6f1;--panel:#fbfffd;--border:#cfe8df;--out:#cff0e3;--in:#fff;--text:#26352f;--muted:#789087;--azyaa-surface:#effaf6;--azyaa-nav:#fbfffd;}
:root[data-azyaa-theme="sky"]{--blue:#4b9fd5;--blue-dark:#357ead;--bg:#eaf4fa;--panel:#fbfdff;--border:#d1e3ee;--out:#d4ebf7;--in:#fff;--text:#26343e;--muted:#768b98;--azyaa-surface:#f0f8fc;--azyaa-nav:#fbfdff;}
:root[data-azyaa-theme="gold"]{--blue:#b58a35;--blue-dark:#947029;--bg:#f3eee2;--panel:#fffdf8;--border:#e6dbc3;--out:#efe0bb;--in:#fff;--text:#393126;--muted:#92826b;--azyaa-surface:#faf4e7;--azyaa-nav:#fffdf8;}

:root[data-azyaa-theme] body,
:root[data-azyaa-theme] .appScreen,
:root[data-azyaa-theme] .usersPane,
:root[data-azyaa-theme] .chatPane,
:root[data-azyaa-theme] .azyaaTabPanel{background:var(--bg)!important;color:var(--text)!important;}
:root[data-azyaa-theme] .usersHeader,
:root[data-azyaa-theme] .chatHeader,
:root[data-azyaa-theme] .composerArea,
:root[data-azyaa-theme] .azyaaTabHeader,
:root[data-azyaa-theme] .azyaaBottomNav,
:root[data-azyaa-theme] .azyaaSettingsCard,
:root[data-azyaa-theme] .menuSheet,
:root[data-azyaa-theme] .modal{background:var(--panel)!important;color:var(--text)!important;border-color:var(--border)!important;}
:root[data-azyaa-theme] .message.mine{background:var(--out)!important;color:var(--text)!important;}
:root[data-azyaa-theme] .message:not(.mine){background:var(--in)!important;color:var(--text)!important;}
:root[data-azyaa-theme] .messageInput,
:root[data-azyaa-theme] .userSearchInput,
:root[data-azyaa-theme] .modalInput{background:var(--azyaa-surface)!important;color:var(--text)!important;border-color:var(--border)!important;}
:root[data-azyaa-theme] .azyaaBottomNav{background:var(--azyaa-nav)!important;}
:root[data-azyaa-theme] .userRow,
:root[data-azyaa-theme] .azyaaCallRow{border-color:var(--border)!important;color:var(--text)!important;}
:root[data-azyaa-theme="mystic"] .messages,
:root[data-azyaa-theme="auto-night"] .messages{background-color:var(--bg);background-blend-mode:multiply;}
.azyaaThemeBackdrop{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px;}
.azyaaThemeSheet{width:min(520px,100%);max-height:82dvh;overflow:auto;background:var(--panel,#fff);color:var(--text,#222);border-radius:24px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.azyaaThemeTitle{font-size:20px;font-weight:900;text-align:center;margin-bottom:4px;}.azyaaThemeHint{text-align:center;color:var(--muted);font-size:13px;margin-bottom:14px;}
.azyaaThemeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.azyaaThemeChoice{border:2px solid var(--border);background:var(--azyaa-surface,#f7f7f7);color:var(--text);border-radius:18px;padding:12px;text-align:right;display:flex;flex-direction:column;gap:5px;}.azyaaThemeChoice.selected{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 18%,transparent);}.azyaaThemeChoice strong{font-size:15px}.azyaaThemeChoice small{color:var(--muted);font-size:11px}.azyaaThemeSwatches{display:flex;gap:5px;direction:ltr}.azyaaThemeSwatches i{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}.azyaaThemeClose{width:100%;height:46px;margin-top:14px;border:0;border-radius:14px;background:var(--blue);color:#fff;font-weight:800;}
@media(max-width:420px){.azyaaThemeGrid{grid-template-columns:1fr 1fr}.azyaaThemeSheet{padding:14px}.azyaaThemeChoice{padding:10px}}


/* AZYAA SEARCH POLISH V2 */
.userSearchWrap{
  height:48px !important;
  margin:11px 12px 9px !important;
  border-radius:16px !important;
  background:color-mix(in srgb,var(--panel,#fff) 82%,var(--bg,#eef1f3)) !important;
  border:1px solid color-mix(in srgb,var(--border,#dfe5e9) 82%,transparent) !important;
  box-shadow:0 5px 18px rgba(27,45,58,.06), inset 0 1px 0 rgba(255,255,255,.6);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
  overflow:hidden;
}
.userSearchWrap:focus-within{
  background:var(--panel,#fff) !important;
  border-color:color-mix(in srgb,var(--blue) 65%,var(--border)) !important;
  box-shadow:0 7px 22px color-mix(in srgb,var(--blue) 13%,transparent),0 0 0 3px color-mix(in srgb,var(--blue) 10%,transparent);
  transform:translateY(-1px);
}
.userSearchIcon{
  width:43px !important;
  font-size:0 !important;
  opacity:1 !important;
  color:var(--muted) !important;
}
.userSearchIcon::before{
  content:"";
  width:18px;height:18px;display:block;
  border:2px solid currentColor;border-radius:50%;
  box-sizing:border-box;
}
.userSearchIcon::after{
  content:"";position:absolute;width:7px;height:2px;background:currentColor;border-radius:2px;
  transform:translate(7px,7px) rotate(45deg);
}
.userSearchInput{
  font-size:16px !important;
  font-weight:600 !important;
  letter-spacing:.05px;
  color:var(--text,#202428) !important;
  background:transparent !important;
  padding:0 6px 0 2px !important;
  caret-color:var(--blue) !important;
}
.userSearchInput::placeholder{
  color:color-mix(in srgb,var(--muted,#83919b) 88%,transparent) !important;
  font-weight:500 !important;
  opacity:1;
}
.clearUserSearch{
  width:38px !important;height:38px !important;margin:0 3px !important;
  border-radius:50% !important;font-size:22px !important;
  color:var(--muted) !important;
  transition:background .15s ease,transform .15s ease;
}
.clearUserSearch:active{background:color-mix(in srgb,var(--blue) 10%,transparent) !important;transform:scale(.92)}


/* AZYAA SLIM ELEGANT SEARCH V3 */
.userSearchWrap{
  height:34px !important;
  margin:7px 12px 7px !important;
  border-radius:17px !important;
  background:color-mix(in srgb,var(--panel,#fff) 88%,var(--bg,#eef1f3)) !important;
  border:1px solid color-mix(in srgb,var(--border,#dfe5e9) 72%,transparent) !important;
  box-shadow:0 2px 8px rgba(27,45,58,.045) !important;
  transform:none !important;
}
.userSearchWrap:focus-within{
  border-color:color-mix(in srgb,var(--blue) 55%,var(--border)) !important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 8%,transparent) !important;
  transform:none !important;
}
.userSearchIcon{width:34px !important;}
.userSearchIcon::before{width:14px !important;height:14px !important;border-width:1.6px !important;}
.userSearchIcon::after{width:5px !important;height:1.6px !important;transform:translate(5.5px,5.5px) rotate(45deg) !important;}
.userSearchInput{
  height:32px !important;
  min-height:32px !important;
  padding:0 3px !important;
  font-size:16px !important;
  font-weight:500 !important;
}
.userSearchInput::placeholder{color:transparent !important;opacity:0 !important;}
.clearUserSearch{width:30px !important;height:30px !important;margin:0 2px !important;font-size:19px !important;}


/* AZYAA PROFILE AVATAR V1 */
.avatar,.chatAvatar,.settingsAvatar,.azyaaProfileAvatarButton{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;}
.avatar.hasProfilePhoto,.chatAvatar.hasProfilePhoto,.settingsAvatar.hasProfilePhoto,.azyaaProfileAvatarButton.hasProfilePhoto{color:transparent!important;}
.azyaaProfileBackdrop{position:fixed;inset:0;z-index:10100;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px;}
.azyaaProfileSheet{width:min(480px,100%);background:var(--panel,#fff);color:var(--text,#222);border-radius:24px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.azyaaProfileTitle{font-size:20px;font-weight:900;}.azyaaProfileHint{font-size:13px;color:var(--muted,#777);text-align:center;}
.azyaaProfileAvatarButton{width:112px;height:112px;border-radius:50%;border:3px solid color-mix(in srgb,var(--blue) 58%,var(--border));background:var(--azyaa-surface,#f2f3f5);color:var(--text);font-size:38px;font-weight:900;display:grid;place-items:center;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.10);position:relative;}
.azyaaProfileAvatarButton::after{content:'＋';position:absolute;left:5px;bottom:5px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font-size:20px;font-weight:500;border:2px solid var(--panel,#fff);}
.azyaaProfileStatus{min-height:22px;font-size:13px;color:var(--muted);text-align:center;}.azyaaProfileClose{width:100%;height:46px;border:0;border-radius:14px;background:var(--blue);color:white;font-weight:800;margin-top:2px;}


/* AZYAA PROFILE PHOTO VIEWER V1 */
.azyaaAvatarViewable{cursor:pointer;}
.azyaaAvatarViewer{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:manipulation;}
.azyaaAvatarViewerImage{display:block;max-width:min(92vw,720px);max-height:88vh;width:auto;height:auto;object-fit:contain;border-radius:14px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}


/* AZYAA STORIES V1 */
.azyaaStoriesList{padding:14px 12px 100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px;overflow:auto;height:100%}.azyaaStoryAdd,.azyaaStoryPerson{border:0;background:transparent;font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}.azyaaStoryAdd b,.azyaaStoryRing{width:68px;height:68px;border-radius:50%;display:grid;place-items:center}.azyaaStoryAdd b{font-size:34px;background:var(--blue);color:#fff}.azyaaStoryRing{padding:3px;background:linear-gradient(135deg,#e6b34a,#d86a8d,#6b8ee8)}.azyaaStoryRing span{width:62px;height:62px;border:3px solid var(--panel,#fff);border-radius:50%;background-size:cover;background-position:center;display:grid;place-items:center;font-weight:900;background-color:#ddd}.azyaaStoryPerson strong,.azyaaStoryAdd span{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.azyaaStoryPerson small{font-size:10px;opacity:.6}.azyaaStoryBackdrop{position:fixed;inset:0;z-index:20000;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}.azyaaStorySheet{width:min(520px,100%);background:var(--panel,#fff);padding:18px;border-radius:24px 24px 0 0;display:grid;gap:11px}.azyaaStorySheet h3{margin:0;text-align:center}.azyaaStorySheet textarea,.azyaaStorySheet input[type=url]{width:100%;box-sizing:border-box;border:1px solid var(--border,#ddd);border-radius:14px;padding:12px;font:inherit;background:var(--panel,#fff);color:inherit}.azyaaStorySheet textarea{min-height:110px;resize:none}.azyaaStoryFile{padding:12px;border:1px dashed var(--blue);border-radius:14px;text-align:center;font-weight:800}.azyaaStoryFileName{font-size:12px;opacity:.7;overflow:hidden;text-overflow:ellipsis}.azyaaStoryPublish,.azyaaStoryCancel{border:0;border-radius:14px;padding:12px;font:inherit;font-weight:900}.azyaaStoryPublish{background:var(--blue);color:#fff}.azyaaStoryCancel{background:var(--bg,#eee);color:inherit}.azyaaStoryViewer{position:fixed;inset:0;z-index:22000;background:#050505;color:#fff;display:flex;align-items:center;justify-content:center}.azyaaStoryTop{position:absolute;top:0;left:0;right:0;z-index:3;padding:calc(12px + env(safe-area-inset-top)) 14px 12px;display:flex;align-items:center;gap:10px;background:linear-gradient(#000b,transparent)}.azyaaStoryTop strong{flex:1}.azyaaStoryTop button{border:0;background:transparent;color:#fff;font-size:34px}.azyaaStoryStage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.azyaaStoryMedia{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;background:#000}.azyaaStoryEmbed{border:0}.azyaaStoryTextView{padding:36px;font-size:27px;font-weight:800;line-height:1.7;text-align:center;white-space:pre-wrap;overflow:auto;max-height:75vh}.azyaaStoryCaption{position:absolute;bottom:75px;left:20px;right:20px;background:#0009;border-radius:14px;padding:10px;text-align:center;white-space:pre-wrap}.azyaaStoryLink{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);background:#fff;color:#111;padding:10px 18px;border-radius:22px;text-decoration:none;font-weight:900;white-space:nowrap}.azyaaStoryPrev,.azyaaStoryNext{position:absolute;top:50%;transform:translateY(-50%);border:0;background:#0005;color:#fff;font-size:42px;width:46px;height:72px}.azyaaStoryPrev{left:0}.azyaaStoryNext{right:0}.azyaaStoryDelete{position:absolute;top:calc(62px + env(safe-area-inset-top));right:12px;z-index:4;border:0;border-radius:18px;padding:8px 12px;background:#b4232d;color:#fff}.azyaaStoryEmpty{text-align:center;padding:30px;opacity:.65}@media(max-width:430px){.azyaaBottomNav button small{font-size:9px}.azyaaBottomNav button span{font-size:19px}.azyaaStoriesList{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* AZYAA STORIES INSIDE CHATS V2 */
.azyaaStoriesInline{flex:0 0 auto;width:100%;border-bottom:1px solid color-mix(in srgb,var(--border,#ddd) 70%,transparent);background:var(--panel,#fff);overflow:hidden}
.azyaaStoriesInline .azyaaStoriesList{height:auto!important;min-height:96px;padding:9px 10px 8px!important;display:flex!important;grid-template-columns:none!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.azyaaStoriesInline .azyaaStoriesList::-webkit-scrollbar{display:none}
.azyaaStoriesInline .azyaaStoryAdd,.azyaaStoriesInline .azyaaStoryPerson{flex:0 0 72px;width:72px}
.azyaaStoriesInline .azyaaStoryAdd b,.azyaaStoriesInline .azyaaStoryRing{width:58px;height:58px}
.azyaaStoriesInline .azyaaStoryRing span{width:52px;height:52px}
.azyaaStoriesInline .azyaaStoryAdd b{font-size:29px}
.azyaaStoriesInline .azyaaStoryPerson strong,.azyaaStoriesInline .azyaaStoryAdd span{font-size:11px;width:72px}
.azyaaStoriesInline .azyaaStoryPerson small{font-size:9px}
.azyaaStoriesInline .azyaaStoryEmpty{padding:18px;min-width:100%}

/* AZYAA CHAT AVATAR STORY RING V1 */
#chatAvatar.azyaaAvatarHasStory{box-shadow:0 0 0 3px var(--panel,#fff),0 0 0 6px #d86a8d;cursor:pointer;}

/* AZYAA STORY VIEWERS V1 */
.azyaaStoryViews{position:absolute;left:14px;bottom:22px;z-index:5;border:0;border-radius:18px;padding:9px 14px;background:#ffffffee;color:#111;font:inherit;font-weight:900;box-shadow:0 4px 18px #0005}.azyaaStoryViewersBackdrop{z-index:23000}.azyaaStoryViewersSheet{width:min(520px,100%);max-height:70vh;background:var(--panel,#fff);color:inherit;border-radius:24px 24px 0 0;overflow:hidden;display:flex;flex-direction:column}.azyaaStoryViewersHead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border,#ddd)}.azyaaStoryViewersHead strong{flex:1;font-size:17px}.azyaaStoryViewersHead button{border:0;background:transparent;color:inherit;font-size:30px}.azyaaStoryViewersBody{overflow:auto;padding:6px 12px 18px}.azyaaStoryViewerRow{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid color-mix(in srgb,var(--border,#ddd) 70%,transparent)}.azyaaStoryViewerAvatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#ddd center/cover no-repeat;display:grid;place-items:center;font-weight:900}.azyaaStoryViewerRow div{display:flex;flex-direction:column;gap:3px;min-width:0}.azyaaStoryViewerRow strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.azyaaStoryViewerRow small{opacity:.6}.azyaaStoryNoViewers{text-align:center;padding:28px 12px;opacity:.65}

/* AZYAA STORY SEEN STATE + ANDROID HEADER GAP V1 */
.azyaaStoryPerson.azyaaStorySeen .azyaaStoryRing{background:transparent!important;padding:0!important;}
.azyaaStoryPerson.azyaaStorySeen .azyaaStoryRing span{border-color:transparent!important;}
@media (max-width:900px){html.azyaaAndroid #chatPane.mobileOpen .chatIdentity{padding-left:10px!important;padding-right:10px!important;}}

/* AZYAA CHAT GLASS BARS V1 */
:root[data-azyaa-theme] #chatPane .chatHeader,
:root[data-azyaa-theme] #chatPane .composerArea{
  background:color-mix(in srgb,var(--panel,#fff) 48%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(155%)!important;
  backdrop-filter:blur(22px) saturate(155%)!important;
  border-color:color-mix(in srgb,var(--border,#ddd) 58%,transparent)!important;
  box-shadow:0 0 24px rgba(0,0,0,.05);
}
:root[data-azyaa-theme] #chatPane .chatHeader{
  border-bottom-width:1px!important;
}
:root[data-azyaa-theme] #chatPane .composerArea{
  border-top-width:1px!important;
}
@supports not (background:color-mix(in srgb,white 50%,transparent)){
  :root[data-azyaa-theme] #chatPane .chatHeader,
  :root[data-azyaa-theme] #chatPane .composerArea{background:rgba(255,255,255,.52)!important;}
}

/* AZYAA LIQUID GLASS ALL APP BARS V2 */
:root[data-azyaa-theme] .usersHeader,
:root[data-azyaa-theme] #chatPane .chatHeader,
:root[data-azyaa-theme] #chatPane .composerArea,
:root[data-azyaa-theme] .azyaaTabHeader,
:root[data-azyaa-theme] .azyaaBottomNav,
:root[data-azyaa-theme] .azyaaStoriesInline{
  background:color-mix(in srgb,var(--panel,#fff) 22%,transparent)!important;
  -webkit-backdrop-filter:blur(28px) saturate(185%) contrast(105%)!important;
  backdrop-filter:blur(28px) saturate(185%) contrast(105%)!important;
  border-color:color-mix(in srgb,var(--border,#ddd) 38%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 5px 24px rgba(0,0,0,.045)!important;
}
:root[data-azyaa-theme] .usersHeader::after,
:root[data-azyaa-theme] #chatPane .chatHeader::after,
:root[data-azyaa-theme] #chatPane .composerArea::after,
:root[data-azyaa-theme] .azyaaTabHeader::after,
:root[data-azyaa-theme] .azyaaBottomNav::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 45%,rgba(255,255,255,.11));
  opacity:.72;
}
:root[data-azyaa-theme] .usersHeader,
:root[data-azyaa-theme] #chatPane .chatHeader,
:root[data-azyaa-theme] #chatPane .composerArea,
:root[data-azyaa-theme] .azyaaTabHeader,
:root[data-azyaa-theme] .azyaaBottomNav{position:relative;isolation:isolate;}
:root[data-azyaa-theme] .usersHeader>* ,
:root[data-azyaa-theme] #chatPane .chatHeader>* ,
:root[data-azyaa-theme] #chatPane .composerArea>* ,
:root[data-azyaa-theme] .azyaaTabHeader>* ,
:root[data-azyaa-theme] .azyaaBottomNav>*{position:relative;z-index:1;}
@supports not (background:color-mix(in srgb,white 20%,transparent)){
  :root[data-azyaa-theme] .usersHeader,
  :root[data-azyaa-theme] #chatPane .chatHeader,
  :root[data-azyaa-theme] #chatPane .composerArea,
  :root[data-azyaa-theme] .azyaaTabHeader,
  :root[data-azyaa-theme] .azyaaBottomNav,
  :root[data-azyaa-theme] .azyaaStoriesInline{background:rgba(255,255,255,.24)!important;}
}

/* AZYAA CHAT TRUE LIQUID GLASS OVER WALLPAPER V3 */
:root[data-azyaa-theme] #chatPane .chatBox{
  background-color:var(--bg)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
:root[data-azyaa-theme] #chatPane .messages{
  background:transparent!important;
}
:root[data-azyaa-theme] #chatPane .chatHeader,
:root[data-azyaa-theme] #chatPane .composerArea{
  background:rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(18px) saturate(175%)!important;
  backdrop-filter:blur(18px) saturate(175%)!important;
  border-color:rgba(255,255,255,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 1px 10px rgba(0,0,0,.045)!important;
}
:root[data-azyaa-theme] #chatPane .chatHeader::after,
:root[data-azyaa-theme] #chatPane .composerArea::after{
  background:linear-gradient(110deg,rgba(255,255,255,.12),rgba(255,255,255,.025) 48%,rgba(255,255,255,.09))!important;
  opacity:.55!important;
}

/* AZYAA GLASS HEADER FOREGROUND CLARITY V4 */
:root[data-azyaa-theme] #chatPane .chatHeader .chatName{
  color:var(--text,#111)!important;
  font-weight:800!important;
  text-shadow:0 1px 2px rgba(255,255,255,.72),0 0 8px rgba(255,255,255,.48)!important;
}
:root[data-azyaa-theme] #chatPane .chatHeader .chatStatus{
  color:color-mix(in srgb,var(--text,#111) 68%,transparent)!important;
  text-shadow:0 1px 2px rgba(255,255,255,.7),0 0 7px rgba(255,255,255,.42)!important;
}
:root[data-azyaa-theme] #chatPane .chatHeader .iconButton,
:root[data-azyaa-theme] #chatPane .chatHeader .azyaaCallHeaderButton,
:root[data-azyaa-theme] #chatPane .chatHeader .backButton{
  color:var(--text,#111)!important;
  opacity:1!important;
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.85)) drop-shadow(0 0 4px rgba(255,255,255,.45))!important;
}
:root[data-azyaa-theme] #chatPane .chatHeader .iconButton svg,
:root[data-azyaa-theme] #chatPane .chatHeader .azyaaCallHeaderButton svg{
  stroke:currentColor!important;
  opacity:1!important;
}

/* AZYAA 10 CHAT BUBBLE STYLES V1 */
.azyaaBubblePickerBackdrop{position:fixed;inset:0;z-index:10020;background:rgba(0,0,0,.38);display:flex;align-items:flex-end;justify-content:center;padding:12px}.azyaaBubblePickerSheet{width:min(560px,100%);max-height:82vh;overflow:auto;background:var(--panel,#fff);border-radius:24px;padding:16px;box-shadow:0 18px 60px rgba(0,0,0,.22)}.azyaaBubblePickerTitle{text-align:center;font-weight:800;font-size:17px;margin:2px 0 14px}.azyaaBubblePickerGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.azyaaBubbleChoice{border:2px solid transparent;background:var(--azyaa-surface,#f5f5f5);border-radius:17px;padding:10px;color:var(--text,#222)}.azyaaBubbleChoice.active{border-color:var(--blue,#b58a35)}.azyaaBubbleChoice strong{display:block;margin-top:7px;font-size:13px}.azyaaBubblePreview{display:flex;flex-direction:column;gap:5px}.azyaaBubblePreview span{padding:7px 9px;border-radius:13px;font-size:11px;color:#2b2b2b;box-shadow:0 1px 3px rgba(0,0,0,.08)}.azyaaBubblePreview span:first-child{align-self:flex-start}.azyaaBubblePreview span:last-child{align-self:flex-end}
:root[data-azyaa-bubble-style="classic"] .message.mine{background:#efe0bb!important;border-radius:15px 15px 4px 15px!important}:root[data-azyaa-bubble-style="classic"] .message:not(.mine){background:#fff!important;border-radius:15px 15px 15px 4px!important}
:root[data-azyaa-bubble-style="ocean"] .message.mine{background:#bfe5f7!important;border-radius:20px 20px 5px 20px!important}:root[data-azyaa-bubble-style="ocean"] .message:not(.mine){background:#eef9ff!important;border-radius:20px 20px 20px 5px!important}
:root[data-azyaa-bubble-style="mint"] .message.mine{background:#bfead9!important;border-radius:18px 18px 18px 6px!important}:root[data-azyaa-bubble-style="mint"] .message:not(.mine){background:#f0fbf6!important;border-radius:18px 18px 6px 18px!important}
:root[data-azyaa-bubble-style="violet"] .message.mine{background:#d9c8f4!important;border-radius:24px 24px 8px 24px!important}:root[data-azyaa-bubble-style="violet"] .message:not(.mine){background:#f6f0ff!important;border-radius:24px 24px 24px 8px!important}
:root[data-azyaa-bubble-style="sunset"] .message.mine{background:#f5c9a9!important;border-radius:12px 22px 5px 22px!important}:root[data-azyaa-bubble-style="sunset"] .message:not(.mine){background:#fff3e9!important;border-radius:22px 12px 22px 5px!important}
:root[data-azyaa-bubble-style="night"] .message.mine{background:#56627a!important;color:#fff!important;border-radius:18px 18px 3px 18px!important}:root[data-azyaa-bubble-style="night"] .message:not(.mine){background:#303744!important;color:#fff!important;border-radius:18px 18px 18px 3px!important}
:root[data-azyaa-bubble-style="pearl"] .message.mine{background:rgba(217,224,231,.88)!important;border:1px solid rgba(255,255,255,.7)!important;border-radius:19px!important;box-shadow:0 4px 14px rgba(70,80,90,.12)!important}:root[data-azyaa-bubble-style="pearl"] .message:not(.mine){background:rgba(248,250,252,.9)!important;border:1px solid rgba(255,255,255,.8)!important;border-radius:19px!important}
:root[data-azyaa-bubble-style="emerald"] .message.mine{background:#9edfc6!important;border-radius:22px 22px 7px 22px!important}:root[data-azyaa-bubble-style="emerald"] .message:not(.mine){background:#eafff6!important;border-radius:22px 22px 22px 7px!important}
:root[data-azyaa-bubble-style="romance"] .message.mine{background:linear-gradient(135deg,#f7b7ca,#ffd9e4)!important;border-radius:22px 22px 5px 22px!important;box-shadow:0 3px 12px rgba(217,86,128,.16)!important}:root[data-azyaa-bubble-style="romance"] .message:not(.mine){background:linear-gradient(135deg,#fff0f5,#ffe4ed)!important;border-radius:22px 22px 22px 5px!important}
:root[data-azyaa-bubble-style="love"] .message.mine{background:linear-gradient(135deg,#ef8fae,#f8b4c9)!important;border-radius:26px 26px 8px 26px!important;box-shadow:0 4px 14px rgba(210,62,108,.2)!important}:root[data-azyaa-bubble-style="love"] .message:not(.mine){background:linear-gradient(135deg,#ffdce8,#fff0f5)!important;border-radius:26px 26px 26px 8px!important}

/* AZYAA ADVANCED CHAT BUBBLE STYLES V2 */
.azyaaBubblePreview span{background:var(--preview-bg)!important}
.azyaaBubbleChoice[data-bubble-style="pinstripe"] .azyaaBubblePreview span{background:repeating-linear-gradient(135deg,var(--preview-bg) 0 8px,rgba(255,255,255,.42) 8px 10px)!important;border:1px solid rgba(70,100,130,.12)}
.azyaaBubbleChoice[data-bubble-style="zigzag"] .azyaaBubblePreview span{clip-path:polygon(4% 0,96% 0,100% 18%,96% 35%,100% 52%,96% 69%,100% 86%,96% 100%,4% 100%,0 84%,4% 66%,0 48%,4% 30%,0 14%);border-radius:4px!important}
.azyaaBubbleChoice[data-bubble-style="depth3d"] .azyaaBubblePreview span{box-shadow:inset 0 2px 2px rgba(255,255,255,.75),inset 0 -3px 4px rgba(40,90,150,.18),0 5px 0 rgba(66,108,163,.2),0 8px 12px rgba(20,50,90,.12)!important}
.azyaaBubbleChoice[data-bubble-style="glass3d"] .azyaaBubblePreview span{background:linear-gradient(145deg,rgba(255,255,255,.82),var(--preview-bg))!important;border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,0 5px 14px rgba(90,100,160,.18)!important}
.azyaaBubbleChoice[data-bubble-style="executive"] .azyaaBubblePreview span{background:linear-gradient(135deg,var(--preview-bg),#fff8e8)!important;border:1px solid #b89143;border-left-width:4px;box-shadow:0 3px 8px rgba(65,50,25,.14)!important}
.azyaaBubbleChoice[data-bubble-style="carbon"] .azyaaBubblePreview span{background:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25% 50%,rgba(255,255,255,.035) 50% 75%,transparent 75%),var(--preview-bg)!important;background-size:8px 8px!important;color:#fff!important;border:1px solid rgba(255,255,255,.1)}

:root[data-azyaa-bubble-style="pinstripe"] .message.mine{background:repeating-linear-gradient(135deg,#d7e7f4 0 13px,#c8dceb 13px 15px)!important;border:1px solid #b8cfdf!important;border-radius:18px 18px 5px 18px!important;box-shadow:0 2px 6px rgba(45,82,110,.1)!important}
:root[data-azyaa-bubble-style="pinstripe"] .message:not(.mine){background:repeating-linear-gradient(135deg,#f6fbff 0 13px,#eaf4fa 13px 15px)!important;border:1px solid #d5e4ed!important;border-radius:18px 18px 18px 5px!important}

:root[data-azyaa-bubble-style="zigzag"] .message{border-radius:4px!important;padding-left:14px!important;padding-right:14px!important;clip-path:polygon(3% 0,97% 0,100% 9%,97% 18%,100% 27%,97% 36%,100% 45%,97% 54%,100% 63%,97% 72%,100% 81%,97% 90%,100% 100%,3% 100%,0 91%,3% 82%,0 73%,3% 64%,0 55%,3% 46%,0 37%,3% 28%,0 19%,3% 10%,0 0)}
:root[data-azyaa-bubble-style="zigzag"] .message.mine{background:linear-gradient(135deg,#f4cf8f,#e9b95f)!important}
:root[data-azyaa-bubble-style="zigzag"] .message:not(.mine){background:linear-gradient(135deg,#fff2d8,#f6dfae)!important}

:root[data-azyaa-bubble-style="depth3d"] .message.mine{background:linear-gradient(180deg,#b7d7ff,#8fbbf4)!important;border:1px solid #79a9e5!important;border-radius:20px 20px 6px 20px!important;box-shadow:inset 0 2px 1px rgba(255,255,255,.75),inset 0 -4px 5px rgba(45,91,150,.2),0 5px 0 #6f9ed8,0 9px 15px rgba(32,65,110,.18)!important;margin-bottom:8px!important}
:root[data-azyaa-bubble-style="depth3d"] .message:not(.mine){background:linear-gradient(180deg,#fff,#e5effc)!important;border:1px solid #cad9eb!important;border-radius:20px 20px 20px 6px!important;box-shadow:inset 0 2px 1px #fff,inset 0 -4px 5px rgba(70,90,120,.1),0 5px 0 #c7d5e5,0 9px 15px rgba(40,60,90,.12)!important;margin-bottom:8px!important}

:root[data-azyaa-bubble-style="glass3d"] .message.mine{background:linear-gradient(145deg,rgba(230,236,255,.82),rgba(180,197,255,.68))!important;-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);border:1px solid rgba(255,255,255,.78)!important;border-radius:23px 23px 7px 23px!important;box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(83,95,160,.22)!important}
:root[data-azyaa-bubble-style="glass3d"] .message:not(.mine){background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(233,238,255,.65))!important;-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);border:1px solid rgba(255,255,255,.82)!important;border-radius:23px 23px 23px 7px!important;box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(70,80,130,.15)!important}

:root[data-azyaa-bubble-style="executive"] .message.mine{background:linear-gradient(135deg,#dfc98f,#c7a95f)!important;border:1px solid #9f7c31!important;border-left:4px solid #765819!important;border-radius:12px 18px 5px 18px!important;box-shadow:0 4px 12px rgba(69,52,20,.18)!important}
:root[data-azyaa-bubble-style="executive"] .message:not(.mine){background:linear-gradient(135deg,#faf7ef,#e9dfc9)!important;border:1px solid #c9b98f!important;border-right:4px solid #967b3f!important;border-radius:18px 12px 18px 5px!important;box-shadow:0 4px 12px rgba(69,52,20,.11)!important}

:root[data-azyaa-bubble-style="carbon"] .message.mine,:root[data-azyaa-bubble-style="carbon"] .message:not(.mine){color:#f7f7f7!important;border:1px solid rgba(255,255,255,.11)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 14px rgba(0,0,0,.25)!important}
:root[data-azyaa-bubble-style="carbon"] .message.mine{background:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25% 50%,rgba(255,255,255,.035) 50% 75%,transparent 75%),#39414d!important;background-size:12px 12px!important;border-radius:16px 16px 4px 16px!important}
:root[data-azyaa-bubble-style="carbon"] .message:not(.mine){background:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25% 50%,rgba(255,255,255,.025) 50% 75%,transparent 75%),#252b33!important;background-size:12px 12px!important;border-radius:16px 16px 16px 4px!important}

/* AZYAA VOICE MESSAGE COMPACT HEIGHT V2 */
.modernVoiceCard{
  min-width:255px!important;
  max-width:315px!important;
  padding:5px 10px!important;
  gap:7px!important;
  border-radius:16px!important;
}
.modernVoiceMain{gap:1px!important}
.voiceWaveRow{gap:6px!important}
.voicePlayButton{
  width:30px!important;
  height:30px!important;
  flex:0 0 30px!important;
}
.voiceWaveform{
  height:26px!important;
}
.voiceDuration{
  font-size:10px!important;
  min-width:30px!important;
}
.modernVoiceLabel{
  font-size:10px!important;
  line-height:1.05!important;
}
/* Keep reactions from increasing voice-message height */
.message:has(.modernVoiceCard) > .reactionsRow{
  position:absolute!important;
  right:6px!important;
  bottom:-10px!important;
  margin-top:0!important;
  z-index:3!important;
}
.message.mine:has(.modernVoiceCard) > .reactionsRow{
  right:auto!important;
  left:6px!important;
}

/* AZYAA CHAT MESSAGES ABSOLUTELY STABLE V1 */
.message,
.message *{
  transition:none!important;
}
.message.mine.pendingMessage{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
}

/* AZYAA MESSAGE DELIVERY CHECKS V1 */
.deliveryStatus{
  display:inline-flex!important;
  align-items:center!important;
  min-width:14px;
  direction:ltr!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-3px!important;
  color:#8a8f98!important;
  user-select:none;
  -webkit-user-select:none;
}
.deliveryStatus.sent,
.deliveryStatus.delivered{color:#8a8f98!important}
.deliveryStatus.read{color:#1689ff!important}

/* AZYAA CHAT RIGHT/LEFT ALIGNMENT + PROFESSIONAL ICONS V1 */
.message.mine{
  margin-left:auto!important;
  margin-right:0!important;
  text-align:right;
}
.message.theirs{
  margin-right:auto!important;
  margin-left:0!important;
  text-align:right;
}

/* أدوات الكتابة: الإرسال والحقل جهة اليمين، وأدوات الوسائط جهة اليسار. */
.composerArea{
  direction:ltr!important;
  align-items:flex-end;
}
.messageInput{
  direction:rtl!important;
  text-align:right!important;
}
.sendButton{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 44px!important;
}
.sendButton svg{
  width:21px;
  height:21px;
  display:block;
}

/* نفس لغة رسم أزرار الاتصال العلوية: SVG خطي نظيف. */
.iconButton svg,
.azyaaComposerIconButton svg{
  width:21px;
  height:21px;
  display:block;
  pointer-events:none;
}
.azyaaHeaderDeleteButton{
  color:#56636b!important;
}
.azyaaComposerIconButton{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  flex:0 0 40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#56636b!important;
  box-shadow:none!important;
}
.azyaaComposerIconButton:active,
.azyaaHeaderDeleteButton:active{
  background:rgba(86,99,107,.10)!important;
}
.voiceOnceOption .azyaaOnceIcon{
  width:21px!important;
  height:21px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:.65!important;
}
.voiceOnceOption:has(input:checked){
  background:rgba(51,144,236,.10)!important;
  color:var(--blue)!important;
}
.voiceOnceOption:has(input:checked) .azyaaOnceIcon{
  opacity:1!important;
}

/* AZYAA REPLY TOUCH RESPONSIVENESS V1 */
.replyButton{
  min-width:38px!important;
  min-height:30px!important;
  padding:4px 8px!important;
  border-radius:15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.replyButton:active{
  background:rgba(51,144,236,.10)!important;
  opacity:1!important;
}

/* AZYAA MESSAGE EDIT BUTTON V1 */
.editMessageButton{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  padding:0!important;
  margin:0 1px!important;
  border:0!important;
  border-radius:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  color:var(--blue)!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
.editMessageButton svg{
  width:15px!important;
  height:15px!important;
  display:block!important;
  pointer-events:none!important;
}
.editMessageButton:active{
  background:rgba(51,144,236,.10)!important;
}

/* AZYAA TELEGRAM-LIKE HEARTBEAT V1 */
.messageBody.azyaaHeartbeatHeart{
  display:inline-block!important;
  font-size:46px!important;
  line-height:1!important;
  padding:3px 2px!important;
  transform-origin:50% 55%!important;
  animation:azyaaHeartBeat 1.05s ease-in-out infinite!important;
  will-change:transform,filter!important;
  text-shadow:0 2px 8px rgba(210,35,70,.18)!important;
}
@keyframes azyaaHeartBeat{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(220,35,65,0));}
  12%{transform:scale(1.16);filter:drop-shadow(0 2px 5px rgba(220,35,65,.22));}
  22%{transform:scale(.98);}
  34%{transform:scale(1.11);filter:drop-shadow(0 2px 4px rgba(220,35,65,.16));}
  48%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(220,35,65,0));}
}

/* AZYAA HEART MESSAGE WITHOUT BUBBLE + QUICK HEART V2 */
.message:has(> .messageBody.azyaaHeartbeatHeart){
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  padding:2px 4px!important;
  min-width:0!important;
}
.message:has(> .messageBody.azyaaHeartbeatHeart) > .meta{
  margin-top:1px!important;
  padding:0!important;
  background:transparent!important;
}
.message:has(> .messageBody.azyaaHeartbeatHeart) > .meta .replyButton,
.message:has(> .messageBody.azyaaHeartbeatHeart) > .meta .editMessageButton,
.message:has(> .messageBody.azyaaHeartbeatHeart) > .meta .deleteMsg{
  display:none!important;
}
.quickHeartButton{
  color:#e33455!important;
}
.quickHeartButton svg{
  width:22px!important;
  height:22px!important;
  display:block!important;
}
.quickHeartButton:active{
  transform:scale(.88)!important;
  background:rgba(227,52,85,.10)!important;
}
.composerArea.voiceRecordingActive .quickHeartButton{
  display:none!important;
}

/* AZYAA HEART ABSOLUTELY NAKED V3 — must override every bubble theme */
:root[data-azyaa-theme] .message:has(> .messageBody.azyaaHeartbeatHeart),
:root[data-azyaa-bubble-style] .message:has(> .messageBody.azyaaHeartbeatHeart),
.message.mine:has(> .messageBody.azyaaHeartbeatHeart),
.message:not(.mine):has(> .messageBody.azyaaHeartbeatHeart){
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:none!important;
  border-width:0!important;
  border-color:transparent!important;
  outline:none!important;
  box-shadow:none!important;
  -webkit-box-shadow:none!important;
  filter:none!important;
  clip-path:none!important;
  border-radius:0!important;
  padding:0!important;
}
.message:has(> .messageBody.azyaaHeartbeatHeart)::before,
.message:has(> .messageBody.azyaaHeartbeatHeart)::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.message:has(> .messageBody.azyaaHeartbeatHeart) > .messageBody.azyaaHeartbeatHeart{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}

/* AZYAA LEFT QUICK EMOJI RAIL + NAKED ANIMATED EMOJI V4 */
#chatPane .chatBox{position:relative!important;}
.quickEmojiRail{
  position:absolute!important;
  left:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:18!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:5px!important;
  padding:3px 1px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:auto!important;
}
.quickEmojiRail button{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:24px!important;
  line-height:36px!important;
  text-align:center!important;
  opacity:.68!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
.quickEmojiRail button.quickEmojiTapped{animation:azyaaQuickEmojiTap .32s ease-out!important;}
@keyframes azyaaQuickEmojiTap{0%{transform:scale(1)}45%{transform:scale(1.34) rotate(-5deg)}100%{transform:scale(1)}}
.message:has(> .messageBody.azyaaAnimatedQuickEmoji){
  background:none!important;background-color:transparent!important;background-image:none!important;
  border:0!important;outline:0!important;box-shadow:none!important;filter:none!important;
  clip-path:none!important;border-radius:0!important;padding:0!important;
}
.message:has(> .messageBody.azyaaAnimatedQuickEmoji)::before,
.message:has(> .messageBody.azyaaAnimatedQuickEmoji)::after{content:none!important;display:none!important;}
.message > .messageBody.azyaaAnimatedQuickEmoji{
  display:inline-block!important;font-size:46px!important;line-height:1!important;
  background:none!important;border:0!important;outline:0!important;box-shadow:none!important;
  padding:0!important;margin:0!important;transform-origin:center!important;
  animation:azyaaEmojiAlive 1.15s ease-in-out infinite!important;
}
.message > .messageBody.azyaaAnimatedQuickEmoji.azyaaHeartbeatHeart{animation:azyaaHeartBeat 1.05s ease-in-out infinite!important;}
@keyframes azyaaEmojiAlive{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.09) rotate(-4deg)}50%{transform:scale(.98) rotate(3deg)}75%{transform:scale(1.06) rotate(-2deg)}}

/* AZYAA QUICK EMOJI DROPDOWN RAIL V5 */
.quickEmojiRail{
  display:none!important;
  position:absolute!important;
  left:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:40!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:6px!important;
  padding:2px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.quickEmojiRail.isOpen{display:flex!important;}
.quickEmojiToggle{
  position:relative!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:inherit!important;
}
.quickEmojiToggleFace{font-size:20px!important;line-height:1!important;display:block!important;}
.quickEmojiToggleChevron{
  position:absolute!important;
  right:1px!important;
  bottom:0!important;
  font-size:9px!important;
  line-height:1!important;
  opacity:.55!important;
  transform:rotate(0deg)!important;
  transition:transform .16s ease!important;
}
.quickEmojiToggle.isOpen .quickEmojiToggleChevron{transform:rotate(180deg)!important;}
.quickEmojiRail button{
  opacity:.72!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.message:has(> .messageBody.azyaaAnimatedQuickEmoji),
:root[data-azyaa-theme] .message:has(> .messageBody.azyaaAnimatedQuickEmoji),
:root[data-azyaa-bubble-style] .message:has(> .messageBody.azyaaAnimatedQuickEmoji){
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  clip-path:none!important;
  border-radius:0!important;
  padding:0!important;
}
.message:has(> .messageBody.azyaaAnimatedQuickEmoji) > .meta{display:none!important;}
.message:has(> .messageBody.azyaaAnimatedQuickEmoji)::before,
.message:has(> .messageBody.azyaaAnimatedQuickEmoji)::after{content:none!important;display:none!important;}

/* AZYAA MERGED VOICE/SEND BUTTON V1 */
.voiceSendButton{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-touch-callout:none!important;
}
.voiceSendButton .voiceSendIcon{
  width:22px!important;
  height:22px!important;
  display:block!important;
}
.voiceSendButton .sendIcon{display:none!important;}
.voiceSendButton[data-mode="send"] .voiceIcon{display:none!important;}
.voiceSendButton[data-mode="send"] .sendIcon{display:block!important;}
.voiceSendButton[data-mode="voice"] .voiceIcon{display:block!important;}
.voiceSendButton[data-mode="voice"] .sendIcon{display:none!important;}
.voiceSendButton.recording{transform:scale(1.06)!important;}
.composerArea.voiceRecordingActive .sendButton.voiceSendButton{
  display:flex!important;
  transform:scale(1.06)!important;
}

/* PRIVATE CHAT LANGUAGE CONTROL V1 */
.privateChatLanguageControl{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin:8px 0;
  border-radius:14px;
  border:1px solid rgba(127,127,127,.14);
  background:rgba(127,127,127,.055);
}
.privateChatLanguageControl label{
  font-weight:700;
  font-size:14px;
}
.privateChatLanguageControl select{
  min-width:150px;
  border:1px solid rgba(127,127,127,.18);
  border-radius:10px;
  padding:8px 10px;
  background:var(--bg,#fff);
  color:inherit;
  font:inherit;
}
html[dir="ltr"] .privateChatLanguageControl{
  direction:ltr;
}
html[dir="ltr"] .messageInput,
html[dir="ltr"] .authInput,
html[dir="ltr"] .modalInput,
html[dir="ltr"] .userSearchInput{
  direction:ltr;
  text-align:left;
}