:root {
  --bg: #eef3f8;
  --fg: #1a2330;
  --muted: #6b7a8d;
  --card: #ffffff;
  --accent: #3b82f6;

  /* الحافة الآمنة السفلية كرمز واحد. في Safari على الآيفون تتأرجح env() بين 0
     (والشريط السفلي ظاهر) و34px (وقد انطوى)، ومع لوحة المفاتيح تبقى 34px رغم أن
     اللوحة تغطّي شريط Home أصلاً — فيتضاعف الفراغ. نُصفّرها حينها من مكان واحد. */
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* الشريط السفلي ملتصق بحافة الشاشة على نمط iOS الأصلي: --nav-h ارتفاع صفّ
     الأزرار، والحافة الآمنة حشوٌ داخله. كل ما حوله يُشتقّ من هذه الأرقام.
     --nav-clear = المسافة التي يجب أن يتوقف عندها أي محتوى قابل للتمرير. */
  --nav-h: 60px;
  --nav-breath: 14px;
  --nav-clear: calc(var(--nav-h) + var(--nav-breath) + var(--safe-b));
  --voice-mini-h: 58px;
}
html.keyboard-open { --safe-b: 0px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
html, body { width: 100%; max-width: 100%; }
body {
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: #0b0f14;              /* داكن: يمنع ظهور فراغ أبيض حول لوحة المفاتيح */
  color: var(--fg);
  overflow: hidden;                 /* الصفحة لا تتمرّر؛ التمرير داخل الرسائل فقط */
  overscroll-behavior: none;
}
/* 16px يمنع تكبير iOS التلقائي عند التركيز */
input, textarea, button { font-size: 16px; font-family: inherit; }
/* الشاشة مثبّتة على النافذة المرئية: ترتفع/تصغر مع لوحة مفاتيح iOS بلا فراغ */
.view {
  position: fixed; left: 0; top: var(--app-top, 0px);
  width: 100%; max-width: 100%;
  height: var(--app-h, 100dvh);
  overflow: hidden;                 /* لا تمرير أفقي */
}
.hidden { display: none !important; }
.muted { color: var(--muted); }

/* ---------- الغطاء: الطقس ---------- */
#weather-view {
  --wx-text: #172235; --wx-sub: #637087; --wx-line: rgba(72,92,120,.14); --wx-card: rgba(255,255,255,.74);
  background: linear-gradient(165deg,#dcecff 0%,#f5f8fc 42%,#edf3fa 100%); color: var(--wx-text); overflow-y: auto;
}
#weather-view.wx-night { --wx-text: #edf5ff; --wx-sub: #a9bad1; --wx-line: rgba(210,225,245,.12); --wx-card: rgba(16,31,52,.66); background: linear-gradient(165deg,#0c1930,#142b48 48%,#091321); }
.wx-shell { width: min(720px, 100%); min-height: 100%; margin: 0 auto; padding: calc(1rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); }
.wx-app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.wx-header-actions { display: flex; align-items: center; gap: .5rem; }
.wx-unit { height: 40px; min-width: 48px; padding: 0 .7rem; border: 1px solid var(--wx-line); border-radius: 999px; background: var(--wx-card); color: var(--wx-text); font-weight: 700; cursor: pointer; }
.wx-eyebrow { display: block; color: var(--wx-sub); font-size: .62rem; font-weight: 700; letter-spacing: .17em; margin-bottom: .15rem; }
.brand { font-weight: 650; font-size: 1.65rem; letter-spacing: -.035em; margin: 0; }
.wx-refresh { width: 44px; height: 44px; border: 1px solid var(--wx-line); border-radius: 50%; background: var(--wx-card); color: var(--wx-text); font-size: 1.35rem; cursor: pointer; }
.wx-refresh.loading { animation: wxSpin .9s linear infinite; }
@keyframes wxSpin { to { transform: rotate(360deg); } }
.wx-search { height: 48px; display: flex; align-items: center; gap: .55rem; padding: 0 .9rem; border: 1px solid var(--wx-line); border-radius: 16px; background: var(--wx-card); box-shadow: 0 8px 28px rgba(40,70,110,.08); backdrop-filter: blur(14px); }
.wx-search > span { color: var(--wx-sub); font-size: 1.35rem; transform: rotate(-20deg); }
.wx-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--wx-text); background: transparent; font-size: 16px; }
.wx-search input::placeholder { color: var(--wx-sub); opacity: .85; }
.wx-loading { padding: 2rem .2rem; }
.wx-skeleton { height: 18px; border-radius: 999px; background: linear-gradient(90deg,rgba(130,150,175,.15),rgba(255,255,255,.55),rgba(130,150,175,.15)); background-size: 200% 100%; animation: wxShimmer 1.35s infinite; margin-bottom: 1rem; }
.wx-skeleton.wide { width: 48%; }.wx-skeleton.temp { width: 42%; height: 84px; border-radius: 22px }.wx-skeleton.row { width: 100%; height: 96px; border-radius: 20px; }
@keyframes wxShimmer { to { background-position: -200% 0; } }
.wx-hero { padding: 1.55rem .2rem 1rem; }
.wx-location-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.wx-city { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; font-size: 1.18rem; font-weight: 650; }
#wx-country { color: var(--wx-sub); font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.wx-local-note { color: var(--wx-sub); font-size: .72rem; margin-top: .25rem; }
.wx-city-clock { display: flex; align-items: baseline; gap: .45rem; margin-top: .4rem; color: var(--wx-sub); }
.wx-city-clock strong { color: var(--wx-text); font-size: .88rem; }.wx-city-clock span { font-size: .67rem; }
.wx-icon { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 8px 10px rgba(40,70,110,.15)); }
.wx-temperature { font-size: clamp(5rem,20vw,7.5rem); font-weight: 250; letter-spacing: -.075em; line-height: .95; margin: .25rem 0 .45rem; }
.wx-temperature sup { font-size: .34em; vertical-align: top; position: relative; top: .16em; letter-spacing: 0; }
.wx-condition { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .8rem; }
.wx-condition strong { font-size: 1.15rem; }.wx-condition span { color: var(--wx-sub); font-size: .82rem; }
.wx-updated { color: var(--wx-sub); font-size: .68rem; margin-top: .35rem; }
.wx-details { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; background: var(--wx-line); border: 1px solid var(--wx-line); border-radius: 20px; box-shadow: 0 12px 32px rgba(40,70,110,.08); }
.wx-details > div { min-width: 0; padding: .85rem .65rem; background: var(--wx-card); backdrop-filter: blur(14px); }
.wx-details span { display: block; color: var(--wx-sub); font-size: .65rem; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-details strong { font-size: .83rem; white-space: nowrap; }
.wx-insight { display: flex; gap: .7rem; align-items: flex-start; margin-top: .85rem; padding: .8rem .9rem; border: 1px solid rgba(59,130,246,.2); border-radius: 16px; background: linear-gradient(135deg,rgba(59,130,246,.1),rgba(65,180,210,.06)); }
.wx-insight-icon { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #3b82f6; color: #fff; font-size: .75rem; }
.wx-insight div { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }.wx-insight small { color: #3b82f6; font-size: .57rem; font-weight: 800; letter-spacing: .12em; }.wx-insight strong { font-size: .78rem; line-height: 1.45; font-weight: 600; }
.wx-section { margin-top: 1.45rem; }
.wx-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 .2rem .65rem; }
.wx-section h2 { margin: 0; font-size: .95rem; }.wx-section-head span { color: var(--wx-sub); font-size: .68rem; }
.wx-hourly { display: flex; gap: .55rem; overflow-x: auto; padding: .1rem .1rem .5rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.wx-hourly::-webkit-scrollbar { display: none; }
.wx-hour { min-width: 76px; scroll-snap-align: start; text-align: center; padding: .75rem .5rem; border: 1px solid var(--wx-line); border-radius: 18px; background: var(--wx-card); }
.wx-hour.now { border-color: rgba(59,130,246,.45); box-shadow: inset 0 0 0 1px rgba(59,130,246,.12); }
.wx-hour time { color: var(--wx-sub); font-size: .67rem; }.wx-hour i { display: block; font-style: normal; font-size: 1.45rem; margin: .35rem 0; }.wx-hour strong { display: block; font-size: .88rem; }.wx-hour small { display: block; min-height: 1em; color: #3b82f6; font-size: .62rem; margin-top: .25rem; }
.wx-highlights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.wx-highlight { min-height: 145px; padding: .9rem; border: 1px solid var(--wx-line); border-radius: 20px; background: var(--wx-card); backdrop-filter: blur(14px); overflow: hidden; }
.wx-highlight-head { display: flex; justify-content: space-between; gap: .5rem; color: var(--wx-sub); font-size: .67rem; }.wx-highlight-head b { color: var(--wx-text); font-size: .65rem; }
.wx-highlight > small { display: block; color: var(--wx-sub); font-size: .62rem; margin-top: .55rem; line-height: 1.35; }.wx-highlight > small b { color: var(--wx-text); }
.wx-big-value { display: block; font-size: 2.15rem; font-weight: 350; margin: .55rem 0 .35rem; }
.wx-aqi-row { display: flex; align-items: center; gap: .8rem; margin-top: .55rem; }.wx-aqi-row > strong { font-size: 2.15rem; font-weight: 350; }
.wx-aqi-gauge, .wx-meter { height: 6px; flex: 1; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg,#25a56a,#d2a627,#db4c4c,#8b52a1); }
.wx-aqi-gauge i { display: block; height: 100%; border-radius: inherit; }.wx-meter { width: 100%; background: linear-gradient(90deg,#5ab777,#e5bf32,#e57736,#c44161); }.wx-meter i { display: block; height: 100%; background: rgba(255,255,255,.78); border-right: 3px solid var(--wx-text); }
.wx-compass { position: relative; width: 66px; height: 66px; margin: .35rem auto 0; display: grid; place-items: center; border: 1px solid var(--wx-line); border-radius: 50%; }.wx-compass span { position: absolute; top: 3px; color: var(--wx-sub); font-size: .52rem; }.wx-compass i { display: block; color: #3b82f6; font-size: 2rem; font-style: normal; transform-origin: 50% 50%; transition: transform .35s ease; }
.wx-wind-card > small { text-align: center; }
.wx-sun-arc { position: relative; height: 54px; margin: .35rem .25rem 0; overflow: hidden; }.wx-sun-arc i { position: absolute; left: 0; right: 0; top: 14px; height: 72px; border: 1px dashed #d8a828; border-radius: 50% 50% 0 0; }.wx-sun-arc span { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); color: #e9ae23; font-size: 1.25rem; }
.wx-sun-times { display: flex; justify-content: space-between; color: var(--wx-sub); font-size: .68rem; }.wx-sun-times b { color: var(--wx-text); }
.wx-atmosphere { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--wx-line); border-radius: 18px; background: var(--wx-card); overflow: hidden; }
.wx-atmosphere > div { padding: .8rem .65rem; border-inline-start: 1px solid var(--wx-line); min-width: 0; }.wx-atmosphere > div:first-child { border-inline-start: 0; }.wx-atmosphere span { display: block; color: var(--wx-sub); font-size: .61rem; margin-bottom: .3rem; white-space: nowrap; }.wx-atmosphere strong { display: block; font-size: .8rem; white-space: nowrap; }
.wx-precip-chart { height: 150px; display: grid; grid-template-columns: repeat(12,minmax(24px,1fr)); gap: .25rem; padding: .75rem .5rem .5rem; border: 1px solid var(--wx-line); border-radius: 20px; background: var(--wx-card); overflow-x: auto; }
.wx-rain-col { min-width: 24px; display: grid; grid-template-rows: 16px 1fr 20px; align-items: end; text-align: center; }.wx-rain-col small { color: #3b82f6; font-size: .5rem; }.wx-rain-col > div { height: 82px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--wx-line); }.wx-rain-col i { width: 60%; min-height: 3px; max-height: 100%; border-radius: 4px 4px 1px 1px; background: linear-gradient(#66b7ff,#2675d8); }.wx-rain-col time { padding-top: .3rem; color: var(--wx-sub); font-size: .5rem; white-space: nowrap; }
.wx-week { border: 1px solid var(--wx-line); border-radius: 20px; padding: .9rem 1rem .35rem; background: var(--wx-card); }
.wx-day { display: grid; grid-template-columns: minmax(74px,1fr) 32px 54px 76px; align-items: center; gap: .55rem; min-height: 48px; border-top: 1px solid var(--wx-line); font-size: .82rem; }
.wx-day:first-child { border-top: 0; }.wx-day i { font-style: normal; font-size: 1.3rem; text-align: center; }.wx-day .rain { color: #3b82f6; font-size: .67rem; text-align: end; }.wx-day .temps { text-align: end; white-space: nowrap; }.wx-day .temps span { color: var(--wx-sub); margin-inline-start: .4rem; }
.wx-footer { color: var(--wx-sub); text-align: center; font-size: .62rem; padding: 1.4rem 0 .3rem; }
.wx-message { color: #9d3d38; text-align: center; font-size: .82rem; min-height: 1.2em; padding: 1rem; }
@media (max-width: 390px) { .wx-details { grid-template-columns: repeat(2,1fr); }.wx-details > div:nth-child(3) { border-top: 1px solid var(--wx-line); }.wx-day { grid-template-columns: minmax(66px,1fr) 28px 48px 68px; gap: .35rem; }.wx-atmosphere { grid-template-columns: repeat(2,1fr); }.wx-atmosphere > div:nth-child(3) { border-top: 1px solid var(--wx-line); border-inline-start: 0; }.wx-atmosphere > div:nth-child(4) { border-top: 1px solid var(--wx-line); } }
@media (max-width: 340px) { .wx-shell { padding-inline: .7rem; }.wx-highlights { gap: .5rem; }.wx-highlight { padding: .7rem; }.wx-city-clock span { display: none; } }
@media (orientation: landscape) and (max-height: 500px) { .wx-shell { width: min(860px,100%); }.wx-hero { padding-top: 1rem; }.wx-temperature { font-size: 4.7rem; }.wx-details { grid-template-columns: repeat(4,1fr); }.wx-highlights { grid-template-columns: repeat(4,minmax(150px,1fr)); overflow-x: auto; }.wx-highlight { min-height: 140px; } }

/* ---------- الدردشة: وضع داكن عصري ---------- */
#chat-view {
  --bg: #0b0f14; --fg: #e6edf3; --muted: #8b98a5; --card: #1b232e; --accent: #3b82f6;
  font-family: "SF Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(45,212,191,.07), transparent 55%),
    var(--bg);
  color: var(--fg);
  display: flex; flex-direction: column; height: var(--app-h, 100dvh);
}
.chat-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; min-height: 56px; border-bottom: 1px solid #1c2530;
  background: rgba(15,20,27,.9); backdrop-filter: blur(8px);
  position: relative; z-index: 40;
}
.head-meta { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.head-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .98rem; min-width: 0; }
.head-title #conv-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.head-title #enc-status { font-size: .8rem; flex: 0 0 auto; }
.presence-text { font-size: .74rem; color: #3fb950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2dd4bf); font-size: 1rem;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.profile-avatar-trigger { border: 0; padding: 0; cursor: pointer; font: inherit; }
.peer-profile-box { max-width: 360px; }
.peer-profile-hero { display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 0 8px; }
.peer-profile-avatar { width:88px; height:88px; font-size:30px; }
.peer-profile-hero strong { font-size:20px; }
.peer-profile-username { color:var(--muted,#738096); }
.peer-profile-bio { text-align:center; white-space:pre-wrap; overflow-wrap:anywhere; min-height:24px; color:var(--muted,#738096); }
.avatar.has-photo { overflow: hidden; background: #17202b !important; }
.avatar.has-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar.avatar-artwork img { object-fit: contain; padding: 12%; box-sizing: border-box; }
.avatar.avatar-on-light, .account-avatar.avatar-on-light { background: #f4f7fb !important; border-color: #c9d3df; }
.avatar.avatar-on-dark, .account-avatar.avatar-on-dark { background: #17202b !important; border-color: #344355; }
.avatar.is-loading, .account-avatar.is-loading { position: relative; overflow: hidden; }
.avatar.is-loading::after, .account-avatar.is-loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.16) 48%, transparent 66%);
  transform: translateX(-100%); animation: avatarShimmer 1.1s ease-in-out infinite;
}
@keyframes avatarShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .avatar.is-loading::after, .account-avatar.is-loading::after { animation: none; }
}
.avatar.sm { width: 30px; height: 30px; flex-basis: 30px; font-size: .85rem; }

#messages {
  list-style: none; margin: 0; flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: flex-end; gap: .12rem;
  padding: .7rem 0;
  padding-inline: max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-left));
}
#messages li { max-width: 80%; min-width: 0; display: block; will-change: transform; }
#messages li.group-start { margin-top: .5rem; }                   /* تباعد أكبر عند تغيّر المُرسِل */
#messages li:first-child { margin-top: 0; }
#messages li.self { align-self: flex-start; }                     /* المُرسَل: يمين (RTL) مثل تيليجرام */
#messages li:not(.self):not(.system) { align-self: flex-end; }    /* الوارد: يسار */
#messages li .b {
  position: relative; display: inline-block; max-inline-size: 100%; min-inline-size: 0; box-sizing: border-box;
  padding: .38rem .62rem .26rem; border-radius: 16px;
  background: var(--card); word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.45;
  box-shadow: 0 1px 1px rgba(0,0,0,.25); font-size: 1rem; cursor: pointer;
}
#messages li:not(.self) .b { border-bottom-left-radius: 5px; }
#messages li.self .b { background: linear-gradient(135deg, #3b82f6, #2f6ae0); color: #fff; border-bottom-right-radius: 5px; }
#messages li .b .meta { display: block; text-align: end; font-size: .75rem; color: var(--muted); opacity: .9; margin-top: 2px; line-height: 1.1; white-space: nowrap; }
#messages li.self .b .meta { color: rgba(255,255,255,.8); }
#messages li .b .meta .st.seen { color: #bfe6ff; }
#messages li .b .meta .st.voice-played { color: #73d9ff; font-weight: 700; }
#messages li .msg-text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; unicode-bidi: plaintext; }   /* يحافظ على الأسطر الجديدة */
#messages li.locked .b { background: transparent; border: 1px dashed #3a4655; color: var(--muted); font-style: italic; }
#messages li.ephemeral .b { box-shadow: inset 0 0 0 1px rgba(255,170,80,.45); }
#messages li.system { align-self: center; max-width: 100%; margin: .3rem 0; }
#messages li.system .b { background: #10240f; color: #7fd18a; border: 1px solid #21451f; white-space: pre-wrap; font-size: .82rem; text-align: center; }

#chat-input {
  flex: 1; padding: .6rem 1rem; border-radius: 20px; border: 1px solid #2a333f;
  background: #0c1116; color: var(--fg); outline: none; font-size: 16px;
  resize: none; line-height: 1.4; max-height: 120px; overflow-y: auto; font-family: inherit;
}
#chat-input:focus { border-color: var(--accent); }
.send-btn {
  width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer; font-size: 1.05rem;
  display: grid; place-items: center; transform: scaleX(-1);
}
.send-btn:hover { filter: brightness(1.1); }
#ttl-btn.active { color: #d9a441; }
#ttl-btn .badge { font-size: .6rem; }

/* قائمة المحادثات */
.me-line { font-size: .82rem; color: var(--muted); margin: .4rem 0 .8rem; }
.conv-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .5rem; border: 0; border-radius: 12px; background: transparent;
  color: var(--fg); cursor: pointer; text-align: start; font-size: .95rem;
}
.conv-item:hover { background: #212b37; }
.conv-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.conv-list li { padding: 0; }
.panel-btn.danger { background: #7f1d1d; margin-top: 1rem; width: 100%; }
.panel-btn.danger:hover { background: #991b1b; }

/* ---------- شاشتا القائمة والمحادثة ---------- */
#list-screen, #thread-screen, .settings-screen { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
#list-screen { padding-bottom: var(--nav-clear); }
.list-header {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; min-height: 56px;
  border-bottom: 1px solid #1c2530; background: rgba(15,20,27,.9); backdrop-filter: blur(8px);
}
.header-spacer { width: 42px; height: 42px; flex: 0 0 42px; }
.app-title { font-weight: 700; font-size: 1.15rem; margin-inline: auto; letter-spacing: .02em;
  background: linear-gradient(135deg,#3b82f6,#2dd4bf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.search-wrap { padding: .6rem .9rem; }
#user-search {
  width: 100%; padding: .7rem 1rem; border-radius: 999px; border: 1px solid #2a333f;
  background: #0c1116; color: var(--fg); outline: none; font-size: .95rem;
}
#user-search:focus { border-color: var(--accent); }
.section-label { padding: .3rem 1rem; font-size: .72rem; color: var(--muted); }
.empty-hint { color: var(--muted); text-align: center; padding: 3rem 1.5rem; line-height: 1.9; font-size: .9rem; }

#chat-list, #search-results { flex: 0 0 auto; overflow-y: auto; }
#chat-list { flex: 1; }
.chat-item {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .6rem .9rem;
  border: 0; background: transparent; color: var(--fg); cursor: pointer; text-align: start;
  border-bottom: 1px solid #141b23;
}
.chat-item:hover { background: #151d27; }
.chat-item .ci-main { flex: 1; min-width: 0; }
.chat-item .ci-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.chat-item .ci-name { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .ci-time { font-size: .68rem; color: var(--muted); flex: 0 0 auto; }
.chat-item .ci-bottom { min-width: 0; display: flex; align-items: center; gap: .28rem; }
.chat-item .ci-preview { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item .ci-preview.live-activity { color: #52cdbb; font-weight: 600; }
.chat-item .ci-receipt {
  flex: 0 0 auto; direction: ltr; color: #71869a; font-size: .72rem;
  font-weight: 700; letter-spacing: -.18em; padding-inline-end: .12rem;
}
.chat-item .ci-receipt.seen { color: #51b9ed; }
.chat-item .ci-badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: .68rem; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; flex: 0 0 auto; }
.avatar-wrap { position: relative; flex: 0 0 auto; }
.online-dot { position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 11px; height: 11px; border-radius: 50%; background: #3fb950; border: 2px solid #0b0f14; }
.online-dot.off { background: #55606d; }

#search-results:not(:empty) { border-bottom: 1px solid #1c2530; padding-bottom: .3rem; }
#peer-status { color: var(--muted); }
#peer-status.online { color: #3fb950; }

/* مؤشّر الكتابة */
.typing-hint { padding: .2rem 1rem; font-size: .78rem; color: #3fb950; min-height: 1.1rem; }
.typing-hint.media-activity { color: #55d4c0; }

/* الرد والاقتباس */
#messages li .b { cursor: pointer; }
#messages li .q {
  display: block; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; box-sizing: border-box;
  border: 0; border-inline-start: 2px solid var(--accent); border-radius: 0; background: transparent;
  padding: .1rem .5rem; margin: 0 0 .3rem; color: var(--muted); font: inherit; font-size: .78rem;
  text-align: start; opacity: .9; overflow: hidden; cursor: pointer; -webkit-appearance: none; appearance: none;
}
#messages li.self .q { color: rgba(255,255,255,.86); border-inline-start-color: rgba(255,255,255,.68); }
#messages li .q-text {
  display: block; min-inline-size: 0; max-inline-size: 100%; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; overflow-wrap: anywhere; unicode-bidi: plaintext;
}
#messages li.reply-target-highlight .b { animation: replyTargetPulse 1.45s ease-out; }
.reply-target-highlight { animation: replyTargetContainer 1.45s ease-out; }
#messages li[data-id] { scroll-margin-block: 42vh; }
@keyframes replyTargetPulse {
  0%, 100% { box-shadow: var(--reply-base-shadow,0 2px 7px rgba(0,0,0,.16)); }
  25%, 62% { box-shadow: 0 0 0 4px color-mix(in srgb,var(--theme-accent,#3b82f6) 55%,transparent),0 7px 24px rgba(0,0,0,.28); }
}
.message-date-separator {
  align-self: center; max-width: 100%; margin: .55rem 0 .35rem; pointer-events: none;
}
#messages li.message-date-separator time {
  display: block; padding: .27rem .68rem; border: 1px solid var(--theme-border,rgba(255,255,255,.13));
  border-radius: 999px; color: var(--theme-muted,var(--muted)); background: color-mix(in srgb,var(--theme-surface,#15202c) 88%,transparent);
  box-shadow: 0 3px 12px rgba(0,0,0,.12); font-size: .72rem; font-weight: 650; line-height: 1.2;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (prefers-reduced-motion: reduce) {
  #messages li.reply-target-highlight .b { animation: none; outline: 3px solid var(--theme-focus,#74b9ff); }
  .reply-target-highlight { animation: none; outline: 2px solid transparent; }
}
@keyframes replyTargetContainer {
  0%,100% { background: transparent; }
  30%,65% { background: color-mix(in srgb,var(--theme-accent,#3b82f6) 13%,transparent); }
}
#messages li .st { margin-inline-start: .3rem; }
#messages li .st.seen { color: #6fd0ff; }
.reply-bar {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem;
  border-top: 1px solid #1c2530; background: rgba(30,40,52,.6);
}
.reply-mark { color: var(--accent); }
.reply-preview { flex: 1; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* لوحة إجراءات سفلية */
.sheet { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); background: rgba(0,0,0,.5); display: flex; align-items: flex-end; z-index: 60; }
.sheet-box { width: 100%; background: #1b232e; border-radius: 16px 16px 0 0; padding: .5rem; }
.sheet-box .menu-item { font-size: 1rem; padding: .8rem; text-align: center; }

/* قائمة الخيارات (⋮) */
.menu {
  position: absolute; inset-inline-start: auto; inset-inline-end: .6rem;
  top: calc(100% + 6px); z-index: 100; min-width: 190px; max-width: calc(100vw - 1.2rem);
  background: #1b232e; border: 1px solid #2a333f; border-radius: 12px; padding: .3rem; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.menu-item { display: block; width: 100%; text-align: start; background: transparent; border: 0; color: var(--fg); padding: .5rem .8rem; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.menu-item:hover { background: #263040; }
.menu-item.danger { color: #ff8080; }

/* ---------- أزرار أيقونية ولوحة المسؤول ---------- */
.icon-btn {
  background: transparent; border: 0; color: var(--muted);
  font-size: 1.1rem; cursor: pointer; padding: .1rem .35rem; line-height: 1;
}
.icon-btn:hover { color: var(--fg); }
#admin-btn { font-size: 1.15rem; }
#back-btn { font-size: 1.6rem; padding: 0 .3rem; }
.icon-btn.has-unread { position: relative; }
.icon-btn.has-unread::after {
  content: ''; position: absolute; top: 2px; inset-inline-end: 2px;
  width: 8px; height: 8px; border-radius: 50%; background: #ef4444; border: 1px solid #0b0f14;
}

.panel {
  position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh);
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem;
}
.panel-box {
  width: min(460px, 96vw); max-height: calc(var(--app-h, 100dvh) - 2rem); overflow-y: auto;
  background: #161b22; color: #e6edf3; border: 1px solid #2a333f;
  border-radius: 16px; padding: 1rem 1.2rem;
}
#admin-panel .panel-box { width: min(900px, 96vw); }
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head > div { display:flex; flex-direction:column; gap:.15rem; }
.admin-refresh-label { color:var(--muted); font-size:.65rem; font-weight:400; }
.admin-overview { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.45rem; margin-top:1rem; }
.admin-stat { min-width:0; padding:.65rem .35rem; text-align:center; border:1px solid rgba(127,127,127,.16); border-radius:12px; background:rgba(127,127,127,.07); }
.admin-stat strong { display:block; color:var(--accent); font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-stat span { display:block; margin-top:.2rem; color:var(--muted); font-size:.62rem; }
.admin-stat.warn strong { color:#f0b36a; }
.panel-sec { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #222b36; }
.panel-sec:first-of-type { border-top: 0; }
.panel-sec h3 { margin: 0 0 .6rem; font-size: .95rem; font-weight: 600; }
.panel-box input {
  width: 100%; margin-bottom: .5rem; padding: .6rem .8rem;
  border: 1px solid #2a333f; border-radius: 10px; background: #0c1116; color: #e6edf3; outline: none;
}
.panel-box textarea {
  width: 100%; margin-bottom: .2rem; padding: .65rem .8rem; resize: vertical; min-height: 76px; max-height: 150px;
  border: 1px solid #2a333f; border-radius: 10px; background: #0c1116; color: #e6edf3; outline: none;
  font: inherit; font-size: 16px; line-height: 1.45;
}
.panel-box textarea:focus { border-color: var(--accent); }
.panel-box input:focus { border-color: var(--accent); }
.panel-btn {
  padding: .55rem 1rem; border: 0; border-radius: 10px;
  background: var(--accent); color: #fff; cursor: pointer;
}
.panel-btn:hover { filter: brightness(1.08); }
.ap-row { display: flex; gap: .4rem; align-items: center; }
.ap-row input { flex: 1; margin-bottom: .5rem; }
.ap-row .icon-btn { font-size: 1.2rem; }
.admin-secret-grid { display: grid; gap: .48rem; margin-bottom: .65rem; }
.admin-secret-grid input { margin: 0; }
.secret-input-wrap { position: relative; display: flex; align-items: center; }
.secret-input-wrap input { width: 100%; margin: 0; padding-inline-end: 2.8rem; }
.secret-eye {
  position: absolute; inset-inline-end: .15rem; width: 44px; height: 44px; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem;
}
.secret-eye:hover, .secret-eye:focus-visible { color: var(--fg); background: rgba(255,255,255,.07); outline: none; }
.secret-strength { min-height: 1.1rem; color: var(--muted); font-size: .72rem; }
.secret-strength.weak { color: #ff8585; }
.secret-strength.ok { color: #d9a441; }
.secret-strength.strong { color: #7fd18a; }
.panel-btn.compact { width: auto; justify-self: start; padding-inline: .9rem; font-size: .8rem; }
.credential-result { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; padding: .5rem; border: 1px solid #2d4053; border-radius: 10px; background: #101821; }
.credential-result code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #f0c36a; user-select: text; }
.ap-msg { margin-top: .5rem; font-size: .85rem; color: #7fd18a; min-height: 1em; white-space: pre-wrap; }
.ap-msg.err { color: #ff8080; }
.ap-list { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .85rem; }
.ap-list li {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .4rem .1rem; border-bottom: 1px solid #1c242e;
}
.ap-list .code { font-family: ui-monospace, monospace; color: #d9a441; cursor: pointer; }
.ap-list .muted2 { color: var(--muted); }

/* إدارة الحساب */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.account-panel { width: min(480px, 96vw); }
.account-hero { display: flex; align-items: center; gap: .8rem; padding: .8rem 0 .2rem; }
.account-avatar {
  position: relative; width: 76px; height: 76px; flex: 0 0 76px; padding: 0; overflow: hidden;
  border: 2px solid #314053; border-radius: 50%; background: linear-gradient(135deg,#3b82f6,#2dd4bf);
  color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.32); transition: border-color .18s ease, transform .18s ease;
}
.account-avatar:hover { border-color: #6e91bc; }
.account-avatar:focus-visible { outline: 3px solid rgba(56,139,253,.38); outline-offset: 3px; }
.account-avatar:active { transform: scale(.97); }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-avatar.avatar-artwork img { object-fit: contain; padding: 12%; box-sizing: border-box; }
.avatar-edit { position: absolute; z-index: 2; inset-inline-end: -2px; inset-block-end: -2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #111923; border: 2px solid #2a333f; font-size: .75rem; box-shadow: 0 2px 7px rgba(0,0,0,.4); }
.account-identity { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.account-identity strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-identity span { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
#account-meta { font-size: .72rem; opacity: .85; }
.field-label { display: block; color: var(--muted); font-size: .78rem; margin: .25rem 0 .3rem; }
.field-counter { text-align: end; color: var(--muted); font-size: .7rem; margin-bottom: .55rem; }
.text-btn { min-height: 44px; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: .78rem; padding: .55rem .45rem; cursor: pointer; }
.danger-text { color: #ff9090; }
.panel-btn.secondary { width: 100%; background: #273241; color: #e6edf3; }
.account-actions { padding-bottom: calc(.2rem + env(safe-area-inset-bottom)); }

/* شاشة الإعدادات: صفحة مستقلة هادئة بأسلوب تطبيقات المحادثة */
.settings-screen { color: #edf4fb; background: radial-gradient(circle at 50% -10%, #1d344b 0, #111a24 34%, #0c1219 100%); }
.settings-header {
  flex: 0 0 auto; min-height: 70px; display: flex; align-items: center; gap: .75rem;
  padding: calc(.7rem + env(safe-area-inset-top)) max(.9rem,env(safe-area-inset-right)) .7rem max(.9rem,env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255,255,255,.075); background: rgba(12,18,25,.82); backdrop-filter: blur(20px); z-index: 3;
}
.settings-header > div { display: flex; min-width: 0; flex-direction: column; gap: .12rem; }
.settings-header strong { font-size: 1.04rem; }
.settings-header span { color: #8394a8; font-size: .7rem; }
.settings-back { color: #dce9f7; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 1.8rem; line-height: 1; }
.settings-scroll {
  flex: 1; min-height: 0; overflow-y: auto; padding: 1rem max(.8rem,env(safe-area-inset-right)) calc(var(--nav-clear) + .6rem) max(.8rem,env(safe-area-inset-left));
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.settings-scroll > * { width: min(100%, 540px); margin-inline: auto; }
.profile-hero-card, .settings-card { border: 1px solid rgba(255,255,255,.075); background: rgba(23,33,44,.88); box-shadow: 0 16px 45px rgba(0,0,0,.18); }
.profile-hero-card { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; padding: 1.05rem; border-radius: 22px; margin-bottom: .8rem; }
.profile-hero-card .account-avatar { width: 82px; height: 82px; flex-basis: 82px; }
.profile-photo-actions { flex-basis: 100%; display: flex; gap: .35rem; padding-inline-start: 86px; }
.settings-card { padding: 1rem; border-radius: 20px; margin-bottom: .8rem; }
.settings-card-title { display: flex; align-items: center; gap: .7rem; padding-bottom: .85rem; margin-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.065); }
.settings-card-title > div { min-width: 0; }
.settings-card-title h2 { margin: 0; font-size: .94rem; }
.settings-card-title p { margin: .14rem 0 0; color: #8394a8; font-size: .69rem; line-height: 1.5; }
.settings-glyph { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,rgba(59,130,246,.23),rgba(45,212,191,.1)); font-size: 1rem; }
.settings-field { display: block; margin-bottom: .75rem; }
.settings-field > span { display: block; margin: 0 .15rem .38rem; color: #a9b7c7; font-size: .73rem; font-weight: 650; }
.settings-field input, .settings-field textarea, .security-form input {
  width: 100%; border: 1px solid #304052; border-radius: 13px; outline: 0; padding: .74rem .8rem;
  color: #edf4fb; background: #101821; transition: border-color .16s, box-shadow .16s; resize: vertical;
}
.settings-field input:focus, .settings-field textarea:focus, .security-form input:focus { border-color: #4d94ec; box-shadow: 0 0 0 3px rgba(59,130,246,.13); }
.settings-field small, .settings-note { display: block; margin: .36rem .15rem 0; color: #7f90a3; font-size: .68rem; line-height: 1.55; }
.username-input { display: flex; direction: ltr; align-items: center; border: 1px solid #304052; border-radius: 13px; background: #101821; transition: border-color .16s, box-shadow .16s; overflow: hidden; }
.username-input:focus-within { border-color: #4d94ec; box-shadow: 0 0 0 3px rgba(59,130,246,.13); }
.username-input b { padding-left: .8rem; color: #6fa8ec; }
.username-input input { border: 0; box-shadow: none !important; padding-left: .25rem; }
.settings-primary, .settings-action, .settings-danger { border: 0; border-radius: 12px; cursor: pointer; font-weight: 700; }
.settings-primary { width: 100%; min-height: 44px; padding: .68rem 1rem; color: white; background: linear-gradient(135deg,#337fe2,#3a91c8); box-shadow: 0 8px 24px rgba(39,116,205,.2); }
.settings-primary:disabled { opacity: .6; cursor: wait; }
.settings-message { min-height: 1.1rem; padding-top: .45rem; color: #79d29b; font-size: .74rem; }
.settings-message.err { color: #ff8d91; }
.security-form { display: grid; gap: .55rem; }
.security-form .secret-input-wrap input { padding-inline-end: 2.8rem; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 58px; }
.settings-row + .settings-row { border-top: 1px solid rgba(255,255,255,.06); }
.settings-row > div { min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.settings-row strong { font-size: .83rem; }
.settings-row span { color: #8394a8; font-size: .68rem; line-height: 1.4; }
.settings-action { min-width: 76px; min-height: 44px; padding: .55rem .7rem; color: #91c0fa; background: rgba(59,130,246,.13); border: 1px solid rgba(88,157,242,.2); }
.settings-danger { width: 100%; min-height: 46px; padding: .7rem; color: #ff9699; background: rgba(255,75,82,.08); border: 1px solid rgba(255,105,110,.16); }
.settings-card .field-counter { margin-top: -.55rem; }

/* شريط تبويبات سفلي — زجاج داكن، مؤشرات ناعمة ومساحات لمس مريحة */
/* البنية فقط — الهندسة (الارتفاع/الإزاحة/الحواف) تملكها قاعدة .bottom-nav
   الملتصقة أدناه وحدها، حتى لا يتنازع تعريفان على المسافات السفلية. */
.bottom-nav {
  position: absolute; z-index: 20;
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center;
}
.bottom-nav-item {
  position: relative; height: 56px; border: 0; border-radius: 16px; background: transparent; color: #7f90a4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer;
  font-size: .68rem; font-weight: 650; transition: color .18s ease, transform .18s ease, background .18s ease;
}
.bottom-nav-item:active { transform: scale(.96); }
.bottom-nav-item.active { color: #78b5ff; background: linear-gradient(180deg,rgba(59,130,246,.12),rgba(59,130,246,.035)); }
.bottom-nav-icon { width: 27px; height: 24px; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; }
.chat-bubble-icon { position: relative; width: 20px; height: 15px; border: 2px solid currentColor; border-radius: 7px; }
.chat-bubble-icon::after { content: ''; position: absolute; inset-inline-start: 2px; bottom: -5px; width: 6px; height: 6px; border-inline-start: 2px solid currentColor; transform: skewY(-38deg); }
.settings-gear-icon { display: block; font-size: 1.28rem; transition: transform .25s ease; }
.bottom-nav-item.active .settings-gear-icon { transform: rotate(24deg); }
.bottom-nav-item:focus-visible { outline: 2px solid rgba(101,169,252,.8); outline-offset: -3px; }

@media (max-width: 390px) {
  .settings-scroll { padding-inline: .55rem; }
  .settings-card, .profile-hero-card { border-radius: 17px; }
  .profile-photo-actions { padding-inline-start: 0; justify-content: center; }
}

/* ================= تحسينات الجوال ================= */

/* الحواف الآمنة (النوتش وشريط الهاتف السفلي) */
.list-header, .chat-header {
  padding-top: calc(.6rem + env(safe-area-inset-top));
  padding-inline: max(.7rem, env(safe-area-inset-right)) max(.7rem, env(safe-area-inset-left));
}
.sheet-box { padding-bottom: calc(.5rem + var(--safe-b)); }
.reply-bar { padding-inline: max(.8rem, env(safe-area-inset-left)) max(.8rem, env(safe-area-inset-right)); }
/* لوحة المفاتيح تغطي حافة Home؛ الـ safe area مُصفّرة أصلاً عبر html.keyboard-open. */

/* مساحات لمس مريحة (≥ 42px) */
.icon-btn { min-width: 42px; min-height: 42px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; }
.chat-header .icon-btn, .list-header .icon-btn { flex: 0 0 auto; }
.send-btn { width: 46px; height: 46px; flex-basis: 46px; }

/* تمرير سلس مع زخم على iOS واحتواء overscroll */
#messages, #chat-list, #search-results, .panel-box { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
#messages { padding-bottom: .5rem; }   /* تمرير فوري افتراضياً؛ السلاسة عند فتح المحادثة فقط عبر JS */
.view { touch-action: pan-y; overscroll-behavior: none; }

/* رسائل أوضح وبعرض محدود على الأجهزة الكبيرة */
#messages li { max-width: min(84%, 34rem); }
#messages li .b { font-size: 1rem; }

/* أهداف نقر أكبر في القوائم */
.chat-item { padding-block: .75rem; }
.chat-item .avatar { width: 46px; height: 46px; flex-basis: 46px; }
.sheet-box .menu-item { padding: 1rem; border-radius: 12px; }

/* ردود فعل لمسية (بدل hover على الجوال) */
.chat-item:active { background: #1a2430; }
.icon-btn:active { background: rgba(255,255,255,.08); }
.menu-item:active, .conv-item:active { background: #263040; }
.panel-btn:active, .send-btn:active { transform: scale(.96); }
.send-btn:active { transform: scaleX(-1) scale(.96); }

/* لا تحديد نص على عناصر الواجهة ولا على الفقاعات (الضغط المطوّل = قائمة إجراءات، والنسخ من القائمة) */
.chat-header, .list-header, .icon-btn, .send-btn, .chat-item, .menu, .sheet, #messages li .b {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* انتقال شاشة المحادثة (إحساس أصلي) */
@media (prefers-reduced-motion: no-preference) {
  #thread-screen:not(.hidden) { animation: screenIn .22s ease-out; }
  #messages li { animation: msgIn .18s ease-out; }
  .sheet:not(.hidden) .sheet-box { animation: sheetUp .22s ease-out; }
}
@keyframes screenIn { from { opacity: .4; transform: translateX(-6%); } to { opacity: 1; transform: none; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* لا تظهر تأثيرات hover إلا على أجهزة المؤشّر */
@media (hover: none) {
  .chat-item:hover, .icon-btn:hover, .menu-item:hover, .conv-item:hover,
  .panel-btn:hover, .send-btn:hover { background: initial; filter: none; color: inherit; }
  .icon-btn:hover { color: var(--muted); }
}

/* على الشاشات العريضة: نُوسّط التطبيق كإطار هاتف */
@media (min-width: 620px) {
  #chat-view { max-width: 460px; margin-inline: auto; border-inline: 1px solid #1c2530; }
}

/* الوضع الأفقي بارتفاع قصير: نضغط الرأس والإدخال */
@media (orientation: landscape) and (max-height: 500px) {
  .chat-header, .list-header { min-height: 44px; padding-block: .2rem; }
  .chat-header .avatar, .list-header .avatar, .chat-item .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: .85rem; }
  .icon-btn { min-height: 44px; min-width: 44px; }
  .chat-item { padding-block: .5rem; }
}

/* ---------- طبقة التصميم الفاخر للدردشة ---------- */
#chat-view {
  --chat-surface: rgba(18,27,38,.82);
  --chat-line: rgba(154,181,211,.13);
  background:
    radial-gradient(700px 420px at 100% -8%, rgba(61,137,255,.18), transparent 62%),
    radial-gradient(600px 420px at -15% 88%, rgba(37,211,181,.10), transparent 66%),
    #091019;
}
#list-screen, #thread-screen { background: transparent; }
.list-header, .chat-header {
  min-height: 68px; border-bottom: 1px solid var(--chat-line);
  background: linear-gradient(180deg,rgba(17,28,41,.96),rgba(13,21,31,.86));
  box-shadow: 0 8px 28px rgba(0,0,0,.15); backdrop-filter: blur(22px) saturate(140%);
}
.app-title { font-size: 1.2rem; letter-spacing: -.02em; font-weight: 750; }
.search-wrap { padding: .85rem max(.9rem,env(safe-area-inset-right)) .55rem max(.9rem,env(safe-area-inset-left)); }
.search-wrap input {
  height: 46px; border: 1px solid var(--chat-line); border-radius: 15px; color: var(--fg);
  background: rgba(20,32,46,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.12);
}
.section-label { color: #7f9ab6; font-size: .7rem; letter-spacing: .04em; padding-inline: 1rem; }
.chat-item { border-bottom-color: rgba(154,181,211,.09); transition: background .18s, transform .18s; }
.chat-item:hover, .chat-item:focus-visible { background: rgba(62,119,181,.13); }
.chat-item:active { transform: scale(.985); }
.chat-item .ci-name { font-size: .94rem; }
.chat-item .ci-preview { color: #8297ad; }
.chat-item .avatar { box-shadow: 0 5px 18px rgba(0,0,0,.28); }
.chat-header .head-title { font-size: 1rem; }
.chat-header .presence-text { font-size: .68rem; }
#messages { gap: .2rem; padding-top: 1rem; }
#messages li .b {
  padding: .58rem .78rem .38rem; border: 1px solid rgba(255,255,255,.055); border-radius: 18px;
  box-shadow: 0 5px 16px rgba(0,0,0,.16); line-height: 1.5;
}
#messages li:not(.self) .b { background: linear-gradient(145deg,rgba(29,43,58,.96),rgba(22,33,46,.96)); border-bottom-left-radius: 6px; }
#messages li.self .b { background: linear-gradient(135deg,#2878e6,#2860c9); border-color: rgba(130,193,255,.2); border-bottom-right-radius: 6px; box-shadow: 0 7px 20px rgba(24,92,190,.22); }
#messages li .b .meta { font-size: .64rem; margin-top: .28rem; opacity: .82; }
#chat-form { gap: .55rem; padding-top: .65rem; border-top-color: var(--chat-line); background: rgba(9,16,25,.88); backdrop-filter: blur(22px); }
#chat-input { min-height: 46px; padding: .7rem 1rem; border-color: var(--chat-line); background: rgba(22,34,48,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
#chat-input:focus { border-color: rgba(91,166,255,.72); box-shadow: 0 0 0 3px rgba(59,130,246,.13); }
.attach-btn { color: #8eb6e4; background: rgba(255,255,255,.045); }
.send-btn { background: linear-gradient(135deg,#3b8df0,#2d6bd5); box-shadow: 0 7px 18px rgba(45,107,213,.3); }
.bottom-nav { background: rgba(8,15,23,.92); border-top-color: var(--chat-line); }
.empty-hint { color: #8ba0b5; padding: 2rem 1.2rem; line-height: 1.7; }

/* الوضع النهاري للدردشة */
#chat-view[data-theme="light"] { --bg:#eef4fa; --fg:#1d2a38; --muted:#64778b; --card:#fff; --accent:#2878d9; background:radial-gradient(700px 420px at 100% -8%,rgba(62,137,255,.16),transparent 62%),linear-gradient(160deg,#eef6ff,#f8fbff 56%,#edf8f7); color:var(--fg); }
#chat-view[data-theme="light"] .list-header, #chat-view[data-theme="light"] .chat-header { background:rgba(255,255,255,.86); border-bottom-color:rgba(63,93,124,.16); box-shadow:0 8px 25px rgba(46,83,120,.08); }
#chat-view[data-theme="light"] .search-wrap input { color:#233447; background:rgba(255,255,255,.9); border-color:rgba(63,93,124,.2); box-shadow:0 7px 22px rgba(46,83,120,.08); }
#chat-view[data-theme="light"] .chat-item { color:#26384b; border-bottom-color:rgba(63,93,124,.11); }
#chat-view[data-theme="light"] .chat-item:hover, #chat-view[data-theme="light"] .chat-item:focus-visible { background:rgba(52,126,213,.09); }
#chat-view[data-theme="light"] .chat-item .ci-preview, #chat-view[data-theme="light"] .section-label { color:#6b8197; }
#chat-view[data-theme="light"] .chat-item .ci-preview.live-activity { color:#198f83; }
#chat-view[data-theme="light"] .chat-item .ci-receipt { color:#72879a; }
#chat-view[data-theme="light"] .chat-item .ci-receipt.seen { color:#168bd0; }
#chat-view[data-theme="light"] .typing-hint.media-activity { color:#198f83; }
#chat-view[data-theme="light"] #messages li:not(.self) .b { background:linear-gradient(145deg,#fff,#f2f7fc); border-color:rgba(63,93,124,.12); color:#233447; box-shadow:0 5px 16px rgba(46,83,120,.1); }
#chat-view[data-theme="light"] #messages li.self .b { background:linear-gradient(135deg,#3188e8,#276dcc); color:#fff; }
#chat-view[data-theme="light"] #chat-form { background:rgba(255,255,255,.86); border-top-color:rgba(63,93,124,.15); }
#chat-view[data-theme="light"] #chat-input { color:#233447; background:#fff; border-color:rgba(63,93,124,.2); }
#chat-view[data-theme="light"] .attach-btn { color:#2878d9; background:rgba(40,120,217,.09); }
#chat-view[data-theme="light"] .bottom-nav { background:rgba(255,255,255,.9); border-top-color:rgba(63,93,124,.14); box-shadow:0 -10px 28px rgba(46,83,120,.1); }
#chat-view[data-theme="light"] .settings-screen { background:linear-gradient(160deg,#eff7ff,#f9fcff 56%,#effaf8); color:#203246; }
#chat-view[data-theme="light"] .settings-header { background:rgba(255,255,255,.86); border-bottom-color:rgba(63,93,124,.13); }
#chat-view[data-theme="light"] .settings-card, #chat-view[data-theme="light"] .profile-hero-card { background:rgba(255,255,255,.88); border-color:rgba(63,93,124,.14); box-shadow:0 13px 35px rgba(46,83,120,.08); }
#chat-view[data-theme="light"] .settings-field input, #chat-view[data-theme="light"] .settings-field textarea, #chat-view[data-theme="light"] .security-form input { color:#213447; background:#f8fbff; border-color:#c7d6e5; }

/* شريط حالة الاتصال (Toast) */
#net-banner {
  position: fixed; top: calc(var(--app-top, 0px) + env(safe-area-inset-top) + 8px);
  left: 50%; transform: translateX(-50%); z-index: 70;
  background: #7a3b12; color: #ffd9b0; padding: .35rem .9rem; border-radius: 999px;
  font-size: .82rem; box-shadow: 0 4px 14px rgba(0,0,0,.45); white-space: nowrap;
}

/* منتقي أيقونة التطبيق (PWA) */
.field-hint { font-size: .78rem; color: var(--muted); margin: 0 0 .6rem; line-height: 1.5; }
.icon-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.icon-opt {
  padding: .4rem; border: 2px solid transparent; border-radius: 14px;
  background: rgba(127,127,127,.10); cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s, background .15s; -webkit-tap-highlight-color: transparent;
}
.icon-opt img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; display: block; }
.icon-opt:hover { background: rgba(127,127,127,.18); }
.icon-opt.selected { border-color: var(--accent); background: rgba(59,130,246,.14); }
@media (max-width: 360px) { .icon-picker { grid-template-columns: repeat(2, 1fr); } }

/* علامات حالة الرسالة (عرض تفاؤلي) */
#messages li .st.sending { opacity: .65; }
#messages li .st.failed { color: #ffb3b3; cursor: pointer; font-weight: 700; }

/* بصمة التحقق */
.verify-number {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.3rem; letter-spacing: .05em; line-height: 1.9; word-spacing: .3em;
  text-align: center; direction: ltr;
  background: rgba(127,127,127,.12); border-radius: 12px;
  padding: .9rem .6rem; margin: .5rem 0;
}
#verify-peer { text-align: center; margin-bottom: .2rem; }

/* الصور في الرسائل + زر الإرفاق */
.attach-btn { flex: 0 0 auto; font-size: 1.2rem; align-self: flex-end; }
.msg-image { display: block; }
.edited-label { margin-inline-start: .35rem; color: var(--muted); font-size: .62rem; font-style: normal; }
.msg-image img {
  max-width: min(230px, 62vw); max-height: 320px; width: auto; height: auto;
  border-radius: 12px; display: block; cursor: zoom-in; background: rgba(127,127,127,.12);
}
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) 1rem;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.lightbox-close {
  position: absolute;
  z-index: 2;
  inset-block-start: max(12px, calc(env(safe-area-inset-top) + 8px));
  inset-inline-end: max(12px, calc(env(safe-area-inset-right) + 8px));
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(20,29,40,.84);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* منتقي المرفقات */
.attachment-sheet-box { max-height: var(--app-h,100dvh); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem max(1rem,env(safe-area-inset-right)) calc(.8rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); border-radius: 24px 24px 0 0; background: linear-gradient(180deg,#202b38,#151d27); }
.attachment-sheet-head { display: flex; flex-direction: column; align-items: center; gap: .18rem; margin-bottom: .9rem; }
.attachment-sheet-head strong { font-size: .98rem; }.attachment-sheet-head small { color: #8394a8; font-size: .68rem; }
.attachment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.attachment-option { min-width: 0; min-height: 108px; padding: .65rem .25rem; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.035); color: #e7eff8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.attachment-option:active { transform: scale(.96); background: rgba(255,255,255,.075); }
.attachment-option-with-input { position: relative; overflow: hidden; }
.attachment-native-input { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.attachment-option-with-input:focus-within { outline: 2px solid #61b7ff; outline-offset: 2px; }
.attachment-option strong { font-size: .78rem; }.attachment-option small { color: #8191a4; font-size: .6rem; }
.attachment-option-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; color: #fff; font-size: 1.25rem; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.attachment-option-icon.photo { background: linear-gradient(145deg,#478dec,#44b8ca); }.attachment-option-icon.video { background: linear-gradient(145deg,#ce7d4f,#8f4a65); box-shadow: 0 8px 24px rgba(151,78,93,.28); }.attachment-option-icon.ephemeral { background: linear-gradient(145deg,#ff8a54,#e84d78); box-shadow: 0 8px 24px rgba(232,77,120,.3); }.attachment-option-icon.ephemeral-video { background: linear-gradient(145deg,#6c62ee,#d44eae); box-shadow: 0 8px 24px rgba(113,83,223,.32); }.attachment-option-icon.file { background: linear-gradient(145deg,#8b5bd7,#bd6ac0); }.attachment-option-icon.voice { background: linear-gradient(145deg,#ef626f,#d94676); }
#attach-voice { min-height: 92px; }
.sheet-cancel { width: 100%; min-height: 46px; margin-top: .7rem; border: 0; border-radius: 14px; color: #aab8c8; background: rgba(255,255,255,.045); cursor: pointer; }

/* بطاقات الصور/الملفات/الصوت المشفرة */
.attachment-card { position: relative; min-width: min(245px,68vw); min-height: 58px; display: flex; align-items: center; gap: .7rem; overflow: hidden; color: inherit; }
.attachment-card.kind-file { cursor: pointer; padding: .2rem; border-radius: 12px; }
.attachment-card.loading,.attachment-card.error { min-width: 180px; color: var(--muted); font-size: .78rem; }
.attachment-image { display: block; width: min(250px,68vw); height: auto; max-height: 340px; object-fit: contain; border-radius: 14px; cursor: zoom-in; background: rgba(7,12,18,.18); }
.attachment-image.is-loading { min-height: 150px; opacity: .45; }
.attachment-image-error { width: min(250px,68vw); min-height: 120px; display: grid; place-items: center; padding: 1rem; border: 1px dashed rgba(255,255,255,.18); border-radius: 14px; color: rgba(226,235,245,.72); text-align: center; font-size: .72rem; }
.attachment-file-icon { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 14px; color: #fff; font-weight: 800; background: linear-gradient(145deg,#7857c8,#aa65bc); }
.attachment-file-icon.audio { border-radius: 50%; background: linear-gradient(145deg,#377fdc,#31b7b3); }
.attachment-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.attachment-info strong { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.attachment-info small { color: rgba(220,232,244,.65); font-size: .65rem; }
.audio-fallback { color: #a9dcff; text-decoration: underline; font-size: .8rem; }
.attachment-card.kind-video { width: min(292px,76vw); display: block; border-radius: 16px; background: rgba(4,8,13,.32); }
.attachment-video-shell { position: relative; width: 100%; min-height: 164px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: #05080c; }
.attachment-video-shell video { display: block; width: 100%; max-height: min(420px,55vh); object-fit: contain; background: #05080c; }
.attachment-video-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; color: #d8e4ef; background: radial-gradient(circle at 50% 45%,rgba(132,80,86,.24),transparent 48%),rgba(5,8,12,.88); text-align: center; font-size: .72rem; line-height: 1.55; }
.attachment-video-state button { min-width: 48px; min-height: 48px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; }
.attachment-video-caption { min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .35rem .2rem 0; color: rgba(226,235,245,.7); font-size: .64rem; }
.attachment-video-caption > span { min-width: 0; }
.attachment-video-caption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-video-caption > span:last-child { flex: 0 0 auto; }

/* مشغّل الرسالة الصوتية: موجة، تقديم/تأخير وسرعات مثل تطبيقات الهاتف الأصلية */
.attachment-card.kind-audio { width: min(300px,78vw); min-width: min(276px,78vw); display: grid; grid-template-columns: 46px minmax(0,1fr) 44px; gap: .5rem; overflow: visible; padding: .12rem .05rem; border-radius: 15px; }
.voice-play-toggle { width: 46px; height: 46px; min-width: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); cursor: pointer; touch-action: manipulation; }
.voice-play-toggle:disabled { opacity: .7; cursor: wait; }
.voice-play-toggle.is-loading::after { content: ''; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: voiceSpinner .75s linear infinite; }
.voice-play-toggle.is-loading span { display: none; }
.voice-main { min-width: 0; display: grid; grid-template-rows: 44px 18px; align-items: center; }
.voice-waveform { --voice-progress: 0%; position: relative; height: 44px; overflow: hidden; touch-action: pan-y; }
.voice-wave-bars,.voice-wave-progress { position: absolute; inset: 7px 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
.voice-wave-bars i,.voice-wave-progress i { width: 3px; min-width: 3px; height: calc(var(--voice-height,.35) * 25px); border-radius: 999px; background: rgba(231,239,247,.42); }
.voice-wave-progress { width: var(--voice-progress); overflow: hidden; color: #78e0ce; }
.voice-wave-progress i { background: currentColor; }
.voice-seek { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; touch-action: pan-y; }
.voice-subline { display: flex; align-items: center; justify-content: space-between; gap: .45rem; color: rgba(227,236,246,.66); font-size: .61rem; font-variant-numeric: tabular-nums; direction: ltr; }
.voice-state-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: start; }
.voice-speed { width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 999px; color: #eaf2fa; background: rgba(3,9,14,.24); font-size: .66rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.voice-speed[hidden] { visibility: hidden; display: block; }
.voice-avatar { position: absolute; width: 22px; height: 22px; inset-inline-start: 34px; bottom: -4px; display: grid; place-items: center; border: 2px solid rgba(16,24,34,.9); border-radius: 50%; color: #fff; background: linear-gradient(145deg,#b36d58,#74546f); font-size: .56rem; font-weight: 800; pointer-events: none; }
.voice-avatar::after { content: '•'; position: absolute; inset-inline-end: -4px; bottom: -4px; width: 11px; height: 11px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #3cb7a1; font-size: .5rem; }
#messages li.self .voice-wave-progress { color: #b9fff2; }
#messages li:not(.self) .voice-wave-progress { color: #62cfc0; }
#messages li:not(.self) .voice-play-toggle { color: #e8f7f5; background: linear-gradient(145deg,rgba(58,174,156,.8),rgba(55,112,163,.72)); }
#messages li:not(.self) .voice-speed { background: rgba(255,255,255,.07); }
@keyframes voiceSpinner { to { transform: rotate(1turn); } }
.attachment-progress { position: absolute; inset-inline: 2px; bottom: 0; height: 3px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); }
.attachment-progress i { display: block; width: 2%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4e9bff,#4bd4bf); transition: width .15s linear; }
.attachment-upload-cancel { position: absolute; top: -5px; inset-inline-end: -5px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle,rgba(7,12,18,.82) 0 14px,transparent 15px); color: #fff; cursor: pointer; font-size: 1.1rem; }

/* الصورة المؤقتة: لا thumbnail ولا plaintext داخل فقاعة المحادثة */
.ephemeral-media-card { min-width: min(255px,72vw); }
.ephemeral-media-tile {
  width: 100%; min-height: 112px; padding: .85rem; border: 1px solid rgba(255,255,255,.13);
  border-radius: 17px; color: #f5f9ff; background:
    radial-gradient(circle at 20% 10%,rgba(255,132,101,.3),transparent 38%),
    radial-gradient(circle at 85% 85%,rgba(72,132,236,.3),transparent 44%),
    linear-gradient(145deg,#202a39,#151d29);
  display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: .8rem;
  text-align: start; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ephemeral-media-tile[aria-disabled="true"] { cursor: default; }
.ephemeral-media-orb { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#ff8b58,#e94b78); box-shadow: 0 10px 24px rgba(222,70,112,.32); font-size: 1.3rem; }
.ephemeral-media-copy { min-width: 0; display: flex; flex-direction: column; gap: .22rem; }
.ephemeral-media-copy strong { font-size: .86rem; }.ephemeral-media-copy small { color: #aebed0; font-size: .68rem; line-height: 1.5; }
.ephemeral-media-tile.claiming { opacity: .72; cursor: wait; }.ephemeral-media-tile.claiming .ephemeral-media-orb { animation: ephemeralPulse .8s ease-in-out infinite alternate; }
.ephemeral-video-card .ephemeral-media-tile {
  background:
    radial-gradient(circle at 18% 8%,rgba(115,93,242,.35),transparent 40%),
    radial-gradient(circle at 88% 88%,rgba(215,75,174,.26),transparent 46%),
    linear-gradient(145deg,#202a39,#151d29);
}
.ephemeral-video-card .ephemeral-media-orb { background: linear-gradient(145deg,#7162ed,#d64faa); box-shadow: 0 10px 24px rgba(105,75,211,.34); }
.ephemeral-video-upload-copy { gap: .34rem; }
.ephemeral-video-upload-state { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
.ephemeral-video-upload-retry { min-height: 44px; padding: .3rem .75rem; border: 1px solid rgba(116,188,255,.3); border-radius: 999px; color: #ddecff; background: rgba(58,135,215,.18); cursor: pointer; touch-action: manipulation; }
li.ephemeral-consumed { animation: ephemeralGone .65s ease forwards; pointer-events: none; }

/* شاشة إعداد الصورة المؤقتة */
.ephemeral-compose {
  position: fixed; z-index: 125; inset-inline: 0; top: var(--app-top,0px); height: var(--app-h,100dvh);
  color: #f5f8fc; background: rgba(3,7,12,.96); display: grid; place-items: center;
  padding: max(.7rem,env(safe-area-inset-top)) max(.7rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom)) max(.7rem,env(safe-area-inset-left));
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
}
.ephemeral-compose-surface { width: min(100%,440px); height: min(100%,760px); min-height: 0; display: flex; flex-direction: column; gap: .8rem; }
.ephemeral-compose-head { min-height: 48px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center; }
.ephemeral-compose-head strong { font-size: 1rem; }.ephemeral-head-spacer { width: 44px; }
.ephemeral-round-btn { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: #fff; background: rgba(255,255,255,.09); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.ephemeral-preview { position: relative; min-height: 0; flex: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: #090e15; box-shadow: 0 20px 60px rgba(0,0,0,.38); }
.ephemeral-preview img,.ephemeral-preview video { width: 100%; height: 100%; display: block; object-fit: contain; }
.ephemeral-preview.is-preparing img,.ephemeral-preview.is-preparing video { opacity: 0; }
.ephemeral-preview-badge { position: absolute; inset-inline-start: 50%; bottom: .75rem; transform: translateX(-50%); min-height: 30px; padding: .35rem .75rem; border-radius: 999px; color: #fff; background: rgba(5,10,17,.76); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; font-size: .72rem; }
.ephemeral-preview.is-preparing .ephemeral-preview-badge { opacity: 0; }
.ephemeral-preparing { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 1.2rem; text-align: center; color: #edf6ff; background: radial-gradient(circle at 50% 38%,rgba(48,126,205,.2),transparent 40%),#090e15; }
.ephemeral-preparing strong { font-size: .94rem; }.ephemeral-preparing small { max-width: 280px; color: #93a7bc; font-size: .7rem; line-height: 1.6; }
.ephemeral-preparing-spinner { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.15); border-top-color: #52ceb9; border-radius: 50%; animation: ephemeralPreparingSpin .8s linear infinite; }
.ephemeral-preparing.has-error { background: radial-gradient(circle at 50% 38%,rgba(224,73,94,.18),transparent 42%),#100b12; }
.ephemeral-preparing.has-error .ephemeral-preparing-spinner { width: 38px; height: 38px; border: 0; animation: none; display: grid; place-items: center; color: #ff8395; font-size: 1.8rem; }
.ephemeral-preparing.has-error .ephemeral-preparing-spinner::before { content: "!"; }
.ephemeral-options { padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(255,255,255,.055); }
.ephemeral-options > strong { display: block; margin-bottom: .65rem; font-size: .82rem; }
.ephemeral-options p { margin: .6rem 0 0; color: #9aacc0; font-size: .7rem; line-height: 1.55; }
.ephemeral-ttl-options { display: flex; gap: .38rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }.ephemeral-ttl-options::-webkit-scrollbar { display: none; }
.ephemeral-ttl-options button { flex: 1 0 auto; min-width: 56px; min-height: 44px; padding: .35rem .65rem; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; color: #b9c7d6; background: rgba(255,255,255,.045); cursor: pointer; touch-action: manipulation; }
.ephemeral-ttl-options button.selected { color: #fff; border-color: rgba(83,172,255,.7); background: linear-gradient(145deg,rgba(59,130,246,.85),rgba(41,179,168,.78)); box-shadow: 0 8px 22px rgba(45,128,221,.25); }
.ephemeral-send-btn { width: 100%; min-height: 50px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(135deg,#347fdf,#2aa99e); box-shadow: 0 12px 28px rgba(37,123,193,.3); font-weight: 700; cursor: pointer; touch-action: manipulation; }
.ephemeral-send-btn:disabled { opacity: .55; cursor: wait; }
.ephemeral-video-preview { min-height: 240px; }
.ephemeral-video-preview video { background: #05080d; }
.ephemeral-video-options { flex: 0 0 auto; }
.ephemeral-video-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ephemeral-video-summary strong { font-size: .82rem; }
.ephemeral-video-summary span { flex: 0 0 auto; color: #89d8c6; font-size: .68rem; font-variant-numeric: tabular-nums; }

/* العارض المحمي: منفصل عن lightbox، بلا تنزيل أو قائمة لمس مطوّل */
.ephemeral-viewer {
  --ephemeral-progress: 1;
  position: fixed; z-index: 135; inset-inline: 0; top: var(--app-top,0px); height: var(--app-h,100dvh);
  color: #f7fbff; background: #02050a; display: grid; grid-template-rows: auto minmax(0,1fr) auto;
  padding: max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.7rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
}
.ephemeral-viewer-top { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ephemeral-viewer-status { display: flex; align-items: center; gap: .55rem; color: #e9f1fa; font-size: .78rem; font-variant-numeric: tabular-nums; }
.ephemeral-viewer-ring { width: 26px; height: 26px; padding: 3px; border-radius: 50%; background: conic-gradient(#55d6c1 calc(var(--ephemeral-progress) * 1turn),rgba(255,255,255,.14) 0); -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0); mask: radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0); }
.ephemeral-viewer-stage { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.ephemeral-viewer-stage img,.ephemeral-viewer-stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ephemeral-viewer-stage img { width: 100%; height: 100%; }
.ephemeral-viewer-stage video { width: min(100%,880px); height: 100%; background: #02050a; }
.ephemeral-viewer-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #91a4b8; background: #02050a; font-size: .78rem; }
.ephemeral-viewer-note { min-height: 28px; margin: .45rem 0 0; color: #8698ab; text-align: center; font-size: .7rem; }

@media (max-height: 700px) {
  .ephemeral-video-compose .ephemeral-compose-surface { gap: .55rem; }
  .ephemeral-video-preview { min-height: 170px; }
  .ephemeral-video-options { padding: .65rem .75rem; }
  .ephemeral-video-options p { margin-top: .4rem; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .ephemeral-video-compose .ephemeral-compose-surface { gap: .35rem; }
  .ephemeral-video-compose .ephemeral-compose-head { min-height: 42px; }
  .ephemeral-video-preview { min-height: 100px; }
  .ephemeral-video-options { padding: .5rem .7rem; }
  .ephemeral-video-options p { display: none; }
  .ephemeral-video-compose .ephemeral-send-btn { min-height: 44px; }
}

@keyframes ephemeralPulse { from { transform: scale(.94); filter: brightness(.9); } to { transform: scale(1.04); filter: brightness(1.15); } }
@keyframes ephemeralGone { 0% { opacity: 1; transform: scale(1); } 70% { opacity: .2; transform: scale(.97); } 100% { opacity: 0; transform: scale(.94); } }
@keyframes ephemeralPreparingSpin { to { transform: rotate(1turn); } }

/* مسجل صوت بأسلوب تطبيقات iPhone: موجة حقيقية + إيقاف/متابعة + حذف/إرسال */
.record-panel {
  position: fixed; z-index: 85; inset-inline: 0; top: var(--app-top,0px); height: var(--app-h,100dvh);
  display: grid; align-items: end;
  padding: 1rem max(.65rem,env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) max(.65rem,env(safe-area-inset-left));
  background: linear-gradient(180deg,rgba(16,10,12,.28),rgba(3,6,10,.78));
  -webkit-backdrop-filter: blur(20px) saturate(130%); backdrop-filter: blur(20px) saturate(130%);
}
.record-card {
  width: min(100%,460px); margin-inline: auto; padding: .9rem;
  max-height: calc(var(--app-h,100dvh) - max(1.4rem,env(safe-area-inset-top)) - max(1.4rem,env(safe-area-inset-bottom)));
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  border: 1px solid rgba(255,255,255,.11); border-radius: 25px;
  background: linear-gradient(155deg,rgba(47,38,42,.97),rgba(18,22,29,.98));
  box-shadow: 0 28px 80px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.055);
}
.record-head { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-inline: .25rem; }
.record-live { display: flex; align-items: center; gap: .42rem; color: #ff8791; font-size: .69rem; font-weight: 700; }
.record-live i { width: 8px; height: 8px; border-radius: 50%; background: #f45d68; box-shadow: 0 0 0 5px rgba(244,93,104,.1); animation: recordPulse 1.1s infinite; }
.record-limit { color: #8c97a5; font-size: .59rem; }
.record-track {
  min-height: 78px; margin: .45rem 0 .65rem; display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: .65rem;
  padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
  background: rgba(3,7,11,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.record-timer { color: #f4f7fa; font-size: .94rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.record-wave-shell { position: relative; min-width: 0; height: 48px; overflow: hidden; }
.record-wave { height: 48px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.record-wave i { width: 3px; min-width: 3px; height: calc(var(--voice-height,.12) * 39px); border-radius: 99px; background: linear-gradient(180deg,#61ddc8,#55a7ed); transition: height .09s linear,opacity .18s ease; }
.record-card[data-state="paused"] .record-wave i { opacity: .62; }
.record-card[data-state="ready"] .record-wave i { background: linear-gradient(180deg,#9de7d8,#799fe5); }
.record-preview-seek { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.record-permission { width: 100%; min-height: 48px; margin: .25rem 0 .75rem; border: 1px solid rgba(92,166,255,.28); border-radius: 15px; color: #f0f6ff; background: linear-gradient(135deg,rgba(124,80,91,.9),rgba(63,110,142,.82)); font-weight: 750; cursor: pointer; }
.record-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: .65rem; }
.record-action {
  min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem;
  border: 0; border-radius: 17px; color: #fff; background: rgba(255,255,255,.055); font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.record-action span { min-height: 24px; display: grid; place-items: center; font-size: 1.25rem; line-height: 1; }
.record-action small { color: currentColor; font-size: .57rem; font-weight: 700; }
.record-action.cancel { color: #ef8a91; background: rgba(227,80,91,.08); }
.record-action.stop { color: #ff7784; border: 1px solid rgba(239,91,107,.28); background: rgba(64,26,34,.56); }
.record-card[data-state="paused"] .record-action.stop { color: #8de2d0; border-color: rgba(87,207,184,.25); background: rgba(37,105,91,.18); }
.record-action.send { color: #fff; background: linear-gradient(145deg,#27ad99,#268bd0); box-shadow: 0 9px 25px rgba(38,139,208,.3); }
.record-action:active { transform: scale(.96); }
.record-action:disabled { opacity: .48; cursor: wait; }
.record-message { min-height: 1rem; margin-top: .48rem; color: #ff9aa0; text-align: center; font-size: .65rem; line-height: 1.45; }
@keyframes recordPulse { 50% { opacity: .35; transform: scale(.78); } }
@media (prefers-reduced-motion: reduce) { .record-live i { animation: none; }.record-wave i { transition: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .record-panel { align-items: center; padding-block: max(.4rem,env(safe-area-inset-top)) max(.4rem,env(safe-area-inset-bottom)); }
  .record-card { padding: .62rem .72rem; border-radius: 20px; }
  .record-track { min-height: 54px; margin: .2rem 0 .38rem; padding-block: .25rem; }
  .record-wave-shell,.record-wave { height: 38px; }
  .record-action { min-height: 48px; flex-direction: row; gap: .35rem; }
  .record-message { margin-top: .18rem; }
}

/* مشغّل مصغّر يبقى متاحًا عند الرجوع لقائمة الدردشات */
.voice-mini-player {
  position: fixed; z-index: 48; inset-inline: max(.65rem,env(safe-area-inset-right)) max(.65rem,env(safe-area-inset-left));
  bottom: var(--nav-clear); width: min(440px,calc(100% - 1.3rem)); min-height: var(--voice-mini-h); margin-inline: auto;
  display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: .55rem; padding: .42rem .55rem;
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: #f6f8fb;
  background: linear-gradient(145deg,rgba(72,50,52,.94),rgba(25,25,31,.96));
  box-shadow: 0 17px 48px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
}
.voice-mini-toggle,.voice-mini-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; }
.voice-mini-toggle { background: linear-gradient(145deg,#38b5a0,#397cb3); }
.voice-mini-copy { position: relative; min-width: 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; gap: .12rem; overflow: hidden; }
.voice-mini-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.voice-mini-copy span { direction: ltr; color: rgba(229,236,243,.66); font-size: .57rem; font-variant-numeric: tabular-nums; text-align: start; }
.voice-mini-copy i { position: absolute; inset-inline-start: 0; bottom: 0; width: 0; height: 2px; border-radius: 99px; background: #60d8c4; transition: width .15s linear; }
.voice-mini-close { color: #c9cfd6; background: transparent; }
#chat-view.voice-mini-visible #list-screen {
  padding-bottom: calc(var(--nav-clear) + var(--voice-mini-h) + 12px);
}
#chat-view.voice-mini-visible .settings-scroll {
  padding-bottom: calc(var(--nav-clear) + var(--voice-mini-h) + .8rem);
}

/* أيقونات الواجهة SVG (تتبع لون الزر عبر currentColor) */
.icon-btn svg { width: 22px; height: 22px; display: block; }
.send-btn svg { width: 21px; height: 21px; }
#enc-status { display: inline-flex; align-items: center; color: #3fb950; }
#enc-status svg { width: 14px; height: 14px; }
.menu-item { display: flex; align-items: center; }
.sheet-box .menu-item { justify-content: center; }
.mi-ic { display: inline-flex; margin-inline-end: .55rem; }
.mi-ic svg { width: 18px; height: 18px; }
/* أيقونات الطقس SVG (تتبع حجم الخط في كل موضع) */
.wxi { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; }
.wx-icon .wxi { filter: none; }

/* ---------- لوحة إدارة الأعضاء (محسّنة للمس iOS) ---------- */
.au-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.au-user { background: rgba(127,127,127,.07); border: 1px solid rgba(127,127,127,.14); border-radius: 12px; padding: .6rem .7rem; }
.au-user.off { opacity: .58; }
.au-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.au-name { font-weight: 600; }
.au-role { font-size: .64rem; padding: .12rem .5rem; border-radius: 999px; }
.au-role.admin { background: rgba(212,164,65,.18); color: #e2b455; }
.au-role.member { background: rgba(127,127,127,.16); color: var(--muted); }
.au-flag { font-size: .64rem; padding: .12rem .5rem; border-radius: 999px; background: rgba(220,80,80,.18); color: #ff9a9a; }
.au-self { font-size: .62rem; color: var(--muted); margin-inline-start: auto; }
.au-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.au-btn {
  min-height: 34px; padding: .3rem .7rem; border-radius: 9px;
  border: 1px solid rgba(127,127,127,.22); background: rgba(127,127,127,.08);
  color: var(--fg); font-size: .78rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.au-btn:active { background: rgba(127,127,127,.22); }
.au-btn.danger { color: #ff8b8b; border-color: rgba(220,80,80,.3); }
.au-btn.confirm { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.au-audit { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.au-log { display: flex; flex-direction: column; gap: .1rem; font-size: .76rem; border-bottom: 1px solid rgba(127,127,127,.1); padding-bottom: .3rem; }
.au-log .muted2 { font-size: .64rem; }
.muted2 { color: var(--muted); }
#ap-users-msg { white-space: pre-line; }
.au-secret-editor { margin-top: .65rem; padding: .75rem; border: 1px solid #334256; border-radius: 12px; background: #101720; display: grid; gap: .5rem; }
.au-secret-editor input { width: 100%; margin: 0; }
.au-secret-warning { margin: 0; color: #f0b36a; font-size: .75rem; line-height: 1.55; }
.au-secret-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.au-btn.primary { background: #1f6feb; border-color: #388bfd; color: #fff; }


/* iOS Safari polish: stable viewport, touch targets, native media controls */
html { min-height: 100%; background: #0b1118; }
body { min-height: 100%; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; }
button, .icon-btn, .send-btn, .attach-btn, .attachment-option, .chat-item { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.icon-btn, .send-btn, .attach-btn { min-width: 44px; min-height: 44px; }
#chat-view, #thread-screen, #list-screen { min-height: 0; height: var(--app-h, 100dvh); }
#messages { overscroll-behavior-y: contain; scrollbar-width: thin; }
#chat-input { -webkit-appearance: none; appearance: none; border-radius: 18px; }
.attachment-card audio, .record-card audio { -webkit-appearance: none; appearance: none; }
@supports (-webkit-touch-callout: none) {
  input, textarea { font-size: 16px; }
  .sheet, .record-panel { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  #messages { scroll-padding-bottom: 1rem; }
}

/* ---------- Composer فاخر: مألوف على الهاتف بهوية سراب ---------- */
#chat-form {
  display: grid; gap: .32rem; align-items: stretch;
  padding: .42rem max(.55rem,env(safe-area-inset-right)) max(.5rem,var(--safe-b)) max(.55rem,env(safe-area-inset-left));
  border-top: 1px solid rgba(132,170,207,.12);
  background: linear-gradient(180deg,rgba(8,15,23,.82),rgba(8,14,21,.96));
  -webkit-backdrop-filter: blur(24px) saturate(145%); backdrop-filter: blur(24px) saturate(145%);
}
.composer-row { min-width: 0; display: flex; align-items: flex-end; gap: .48rem; }
.composer-pill {
  min-width: 0; min-height: 48px; flex: 1 1 auto; display: flex; align-items: flex-end;
  border: 1px solid rgba(143,177,211,.16); border-radius: 25px;
  color: var(--fg); background: linear-gradient(145deg,rgba(25,38,53,.97),rgba(17,29,42,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045),0 8px 24px rgba(0,0,0,.16);
  transition: border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.composer-pill:focus-within {
  border-color: rgba(84,203,193,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px rgba(60,190,183,.11),0 10px 28px rgba(0,0,0,.18);
}
#chat-input {
  min-width: 0; width: 100%; min-height: 46px; max-height: 120px; flex: 1 1 auto;
  margin: 0; padding: .72rem .28rem .68rem .8rem; border: 0; border-radius: 0;
  color: var(--fg); background: transparent; box-shadow: none; outline: 0;
  line-height: 1.42; font-size: 16px; resize: none; overflow-y: auto;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
#chat-input:focus { border: 0; box-shadow: none; }
#chat-input::placeholder { color: #8195aa; opacity: .9; }
.composer-pill .attach-btn {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px;
  margin: 2px; border: 0; color: #8eb9e4; background: transparent; box-shadow: none;
}
.composer-pill .attach-btn svg { width: 23px; height: 23px; }
.composer-pill .attach-btn:disabled { opacity: .34; cursor: default; }
#composer-action {
  width: 48px; height: 48px; min-width: 48px; min-height: 48px; flex: 0 0 48px;
  border: 1px solid rgba(108,215,208,.24); border-radius: 50%; transform: none;
  color: #f7ffff; background: linear-gradient(145deg,#249f9a,#287bd6);
  box-shadow: 0 9px 24px rgba(28,117,181,.3),inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .14s ease,filter .18s ease,background .18s ease,box-shadow .18s ease;
  will-change: transform;
}
#composer-action svg { width: 22px; height: 22px; }
#composer-action[data-mode="send"] svg { transform: scaleX(-1); }
#composer-action[data-mode="voice"] {
  color: #bff8ee; background: linear-gradient(145deg,rgba(40,161,155,.92),rgba(35,111,171,.94));
}
#composer-action:active { transform: scale(.93); }
#composer-action:focus-visible,.composer-pill .attach-btn:focus-visible,#reply-cancel:focus-visible {
  outline: 3px solid rgba(129,232,222,.82); outline-offset: 2px;
}
#composer-action:disabled { opacity: .62; cursor: wait; }
#chat-form.is-editing .composer-pill { border-color: rgba(103,197,255,.48); }

.reply-bar {
  min-height: 52px; display: flex; align-items: center; gap: .62rem;
  padding: .46rem max(.68rem,env(safe-area-inset-right)) .34rem max(.68rem,env(safe-area-inset-left));
  border-top: 1px solid rgba(132,170,207,.11); background: rgba(9,17,26,.94);
}
.reply-mark {
  width: 3px; height: 36px; flex: 0 0 3px; border-radius: 999px;
  background: linear-gradient(180deg,#55d8c3,#438fea); box-shadow: 0 0 13px rgba(69,184,209,.28);
}
.reply-copy { min-width: 0; flex: 1; display: grid; gap: .12rem; text-align: start; }
.reply-copy strong { color: #69d3c4; font-size: .72rem; line-height: 1.2; }
.reply-preview { min-width: 0; color: #99aabd; font-size: .76rem; line-height: 1.25; }
.reply-bar.is-editing .reply-mark { background: linear-gradient(180deg,#70c8ff,#557ce7); }
.reply-bar.is-editing .reply-copy strong { color: #7cc9ff; }
#reply-cancel { width: 44px; height: 44px; flex: 0 0 44px; color: #8fa1b4; background: transparent; }
#reply-cancel svg { width: 18px; height: 18px; }

.composer-upload-state {
  min-height: 20px; display: flex; align-items: center; gap: .42rem;
  padding-inline: .72rem; color: #8fa6bb; font-size: .66rem; line-height: 1.25;
}
.composer-upload-pulse {
  width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #50d0bd;
  box-shadow: 0 0 0 0 rgba(80,208,189,.38); animation: composerUploadPulse 1.3s ease-out infinite;
}
.composer-upload-state[data-state="failed"] { color: #ff9a9e; }
.composer-upload-state[data-state="failed"] .composer-upload-pulse { background: #ff737a; animation: none; box-shadow: none; }
@keyframes composerUploadPulse { 70%,100% { box-shadow: 0 0 0 7px rgba(80,208,189,0); } }

/* حشو الأسفل يتكفّل به max(.5rem,var(--safe-b)) أعلاه — الـ safe area مُصفّرة
   عند فتح اللوحة، فلا حاجة لتجاوز هنا سوى ضغط الحواف الجانبية. */
.keyboard-open #chat-form {
  padding-inline: max(.55rem,env(safe-area-inset-right)) max(.55rem,env(safe-area-inset-left));
}
@media (orientation: landscape) and (max-height:500px) {
  #chat-form { padding-block: .3rem; }
  .composer-pill,#composer-action { min-height: 44px; height: 44px; }
  #composer-action { width: 44px; min-width: 44px; flex-basis: 44px; }
  #chat-input { min-height: 42px; padding-block: .58rem; }
}
@media (hover:none) {
  #composer-action:hover { color: #f7ffff; background: linear-gradient(145deg,#249f9a,#287bd6); filter: none; }
  #composer-action[data-mode="voice"]:hover { color: #bff8ee; background: linear-gradient(145deg,rgba(40,161,155,.92),rgba(35,111,171,.94)); }
}
@media (prefers-reduced-motion:reduce) {
  .composer-upload-pulse { animation: none; }
  #composer-action,.composer-pill { transition: none; }
}

#chat-view[data-theme="light"] #chat-form {
  border-top-color: rgba(63,93,124,.13);
  background: linear-gradient(180deg,rgba(247,251,255,.84),rgba(244,249,253,.97));
}
#chat-view[data-theme="light"] .composer-pill {
  color: #213447; border-color: rgba(70,105,139,.18);
  background: rgba(255,255,255,.96); box-shadow: inset 0 1px 0 #fff,0 7px 20px rgba(52,86,118,.09);
}
#chat-view[data-theme="light"] .composer-pill:focus-within {
  border-color: rgba(37,157,150,.48); box-shadow: 0 0 0 3px rgba(37,157,150,.1),0 8px 22px rgba(52,86,118,.1);
}
#chat-view[data-theme="light"] #chat-input { color: #213447; background: transparent; border: 0; box-shadow: none; }
#chat-view[data-theme="light"] #chat-input::placeholder { color: #72869a; }
#chat-view[data-theme="light"] .composer-pill .attach-btn { color: #377ebf; background: transparent; }
#chat-view[data-theme="light"] .reply-bar {
  border-top-color: rgba(63,93,124,.12); background: rgba(247,251,255,.96);
}
#chat-view[data-theme="light"] .reply-preview { color: #63778c; }
#chat-view[data-theme="light"] #reply-cancel { color: #64788c; }
#chat-view[data-theme="light"] .composer-upload-state { color: #60798f; }
#chat-view[data-theme="light"] .composer-upload-state[data-state="failed"] { color: #bd4e55; }

/* ---------- مكالمة WebRTC صوتية آمنة ---------- */
.ttl-menu-only { display: none; }
.call-start-btn { color: #70b7ff; }
.call-start-btn:disabled { opacity: .4; cursor: not-allowed; }
.call-panel {
  position: fixed; z-index: 120; inset-inline: 0; top: var(--app-top, 0px);
  height: var(--app-h, 100dvh); display: grid; place-items: center;
  padding: calc(1rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  color: #f5f9ff; background: radial-gradient(circle at 50% 18%,rgba(55,132,224,.3),transparent 36%),linear-gradient(165deg,rgba(9,17,28,.98),rgba(4,9,16,.99));
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.call-surface { position: relative; width: min(100%,420px); min-height: min(620px,calc(var(--app-h,100dvh) - 2rem)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.call-secure-pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: .3rem .7rem; border: 1px solid rgba(100,210,174,.2); border-radius: 999px; color: #89dfc2; background: rgba(41,154,119,.1); font-size: .68rem; }
.call-avatar { width: 116px; height: 116px; margin: clamp(1.5rem,6vh,3rem) 0 1rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; font-size: 2.4rem; font-weight: 750; box-shadow: 0 20px 55px rgba(0,0,0,.38),0 0 0 10px rgba(255,255,255,.035); }
.call-peer-name { max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(1.45rem,6vw,2rem); font-weight: 700; }
.call-status { min-height: 1.5rem; margin-top: .45rem; color: #a9bbcf; font-size: .9rem; }
.call-timer { margin-top: .35rem; color: #e7f2ff; font-variant-numeric: tabular-nums; font-size: 1.05rem; letter-spacing: .08em; }
.call-remote-audio { position: absolute; width: 1px; height: 1px; opacity: .001; pointer-events: none; }
.call-audio-enable { min-height: 44px; margin-top: .9rem; padding: .55rem 1rem; border: 1px solid rgba(104,181,255,.35); border-radius: 999px; color: #eaf5ff; background: rgba(64,139,216,.2); }
.call-output-status { max-width: 330px; margin: .7rem 0 0; color: #91a7be; font-size: .68rem; line-height: 1.55; text-wrap: balance; }
.call-incoming-actions,.call-active-actions { display: flex; justify-content: space-around; align-items: flex-start; margin-top: auto; padding-top: 2rem; }
.call-incoming-actions { width: min(100%,300px); gap: 2rem; }
.call-active-actions { width: min(100%,340px); gap: .45rem; }
.call-round { min-width: 72px; min-height: 86px; padding: 0; border: 0; color: #fff; background: transparent; display: flex; flex-direction: column; align-items: center; gap: .55rem; cursor: pointer; touch-action: manipulation; }
.call-round > span { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; font-size: 1.5rem; box-shadow: 0 10px 28px rgba(0,0,0,.3); transition: transform .15s ease,filter .15s ease; }
.call-round:active > span { transform: scale(.93); }
.call-round:focus-visible { outline: 3px solid rgba(127,210,255,.72); outline-offset: 4px; border-radius: 18px; }
.call-round small { max-width: 88px; overflow: hidden; color: #cad7e5; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.call-accept > span { background: linear-gradient(145deg,#39c879,#22a862); }
.call-decline > span,.call-end > span { background: linear-gradient(145deg,#f05f69,#cf3448); }
.call-mute > span { background: rgba(255,255,255,.13); }
.call-mute.active > span { color: #18202a; background: #f4f7fb; }
.call-output > span { color: #bfe3ff; background: linear-gradient(145deg,rgba(48,112,174,.7),rgba(39,74,112,.82)); }
.call-output > span svg { width: 28px; height: 28px; }
.call-output.selected > span { color: #eafffb; background: linear-gradient(145deg,rgba(38,157,149,.88),rgba(39,103,169,.9)); }
.call-output.unsupported > span { color: #aabed2; background: rgba(255,255,255,.1); }
.call-output-sheet {
  position: absolute; z-index: 3; inset-inline: 0; bottom: 0; width: 100%;
  max-height: min(70dvh,520px); overflow: auto; overscroll-behavior: contain;
  padding: .85rem; border: 1px solid rgba(142,183,224,.22); border-radius: 24px;
  text-align: start; background: rgba(16,28,43,.97);
  box-shadow: 0 26px 70px rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.call-output-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .65rem; }
.call-output-sheet-head > div { min-width: 0; display: grid; gap: .15rem; }
.call-output-sheet-head strong { color: #f2f8ff; font-size: .95rem; }
.call-output-sheet-head small { color: #91a7be; font-size: .68rem; line-height: 1.45; }
.call-output-sheet-head .icon-btn { flex: 0 0 44px; width: 44px; height: 44px; color: #dcecff; background: rgba(255,255,255,.08); }
.call-output-devices { display: grid; gap: .45rem; }
.call-output-option,.call-output-recover {
  width: 100%; min-height: 56px; display: grid; gap: .12rem; padding: .68rem .8rem;
  border: 1px solid rgba(139,181,220,.18); border-radius: 16px; text-align: start;
  color: #edf7ff; background: rgba(255,255,255,.055); touch-action: manipulation;
}
.call-output-option[aria-checked="true"] { border-color: rgba(76,205,188,.55); background: rgba(40,151,143,.2); }
.call-output-option strong,.call-output-recover strong { font-size: .82rem; }
.call-output-option small,.call-output-recover small { color: #91a7be; font-size: .67rem; line-height: 1.4; }
.call-output-recover { margin-top: .55rem; border-color: rgba(93,167,235,.28); background: rgba(50,119,185,.14); }
.call-output-option:focus-visible,.call-output-recover:focus-visible { outline: 3px solid rgba(127,210,255,.72); outline-offset: 2px; }
.call-privacy { max-width: 310px; margin: 1.5rem 0 0; color: #71849a; font-size: .65rem; line-height: 1.6; }
body.call-open { background: #060b12; }
#chat-view[data-theme="light"] .call-start-btn { color: #2378cf; }
@media (max-width: 380px) { #ttl-btn { display: none; }.ttl-menu-only { display: flex; }.chat-header { gap: .3rem; } }
@media (orientation: landscape) and (max-height: 500px) {
  .call-surface { min-height: 100%; display: grid; grid-template-columns: 120px minmax(150px,1fr) minmax(190px,1fr); grid-template-rows: auto auto auto; column-gap: 1rem; }
  .call-secure-pill { grid-column: 2; }.call-avatar { grid-column: 1; grid-row: 1 / 4; width: 90px; height: 90px; margin: 0; }
  .call-peer-name,.call-status,.call-timer { grid-column: 2; }.call-incoming-actions,.call-active-actions { grid-column: 3; grid-row: 1 / 4; margin: 0; padding: 0; }
  .call-output-status,.call-privacy { display: none; }
  .call-output-sheet { position: fixed; inset-inline: auto max(1rem,env(safe-area-inset-right)); bottom: max(1rem,env(safe-area-inset-bottom)); width: min(390px,calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
}
@media (prefers-reduced-motion: reduce) { .call-round > span { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .ephemeral-media-tile.claiming .ephemeral-media-orb,
  li.ephemeral-consumed,
  .ephemeral-preparing-spinner { animation: none; }
}

/* ---------- الهوية البصرية 2026: زجاج دافئ مستوحى من مرجع iPhone ---------- */
#chat-view {
  --bg: #120d0e;
  --fg: #f5f0ee;
  --muted: #aa9b98;
  --card: rgba(55,39,40,.94);
  --accent: #c97b5c;
  --chat-surface: rgba(46,32,34,.82);
  --chat-line: rgba(232,205,196,.11);
  background:
    radial-gradient(740px 420px at 70% -8%,rgba(184,120,91,.34),transparent 61%),
    radial-gradient(520px 430px at -8% 68%,rgba(110,65,68,.25),transparent 66%),
    linear-gradient(160deg,#241718 0%,#110c0d 48%,#090809 100%);
}
#list-screen,#thread-screen {
  background:
    radial-gradient(460px 320px at 78% 14%,rgba(190,126,91,.12),transparent 70%),
    radial-gradient(420px 340px at 10% 76%,rgba(112,67,70,.11),transparent 72%);
}
.list-header,.chat-header {
  border-bottom-color: rgba(236,211,203,.1);
  background: linear-gradient(180deg,rgba(75,52,49,.78),rgba(42,29,31,.76));
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
}
.app-title {
  color: #fff6f2; background: none; -webkit-background-clip: initial; background-clip: initial;
  font-weight: 720; letter-spacing: -.035em;
}
.search-wrap input {
  color: #f7f0ed; border-color: rgba(236,211,203,.12);
  background: rgba(23,16,18,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.search-wrap input::placeholder { color: #a79794; }
.section-label { color: #a99490; }
.chat-item { border-bottom-color: rgba(236,211,203,.075); }
.chat-item:hover,.chat-item:focus-visible { background: rgba(177,113,87,.11); }
.chat-item:active { background: rgba(177,113,87,.14); }
.chat-item .ci-preview { color: #a89895; }
.chat-item .ci-preview.live-activity { color: #6fd4c0; }
.chat-item .ci-receipt.seen { color: #63cbb8; }
.online-dot { background: #df844c; border-color: #211617; }
#messages { padding-block: 1rem .65rem; }
#messages li .b {
  border-color: rgba(255,239,233,.065);
  box-shadow: 0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025);
}
#messages li:not(.self) .b {
  color: #f6f0ed;
  background: linear-gradient(145deg,rgba(76,51,51,.96),rgba(54,37,39,.97));
}
#messages li.self .b {
  color: #f8f3f0;
  border-color: rgba(255,255,255,.07);
  background: linear-gradient(145deg,rgba(20,16,17,.98),rgba(10,9,10,.99));
  box-shadow: 0 9px 26px rgba(0,0,0,.28);
}
#messages li.self .b .meta { color: rgba(239,230,226,.66); }
#messages li .st.seen,#messages li .b .meta .st.voice-played { color: #6ed8c2; }
#chat-form {
  border-top-color: rgba(236,211,203,.09);
  background: linear-gradient(180deg,rgba(23,16,18,.72),rgba(12,10,11,.94));
  -webkit-backdrop-filter: blur(28px) saturate(145%); backdrop-filter: blur(28px) saturate(145%);
}
.composer-pill {
  border-color: rgba(236,211,203,.12);
  background: linear-gradient(145deg,rgba(67,47,48,.92),rgba(35,27,29,.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.19);
}
.composer-pill:focus-within {
  border-color: rgba(213,139,107,.44);
  box-shadow: 0 0 0 3px rgba(197,119,88,.1),0 12px 34px rgba(0,0,0,.22);
}
#chat-input::placeholder { color: #a2918e; }
.composer-pill .attach-btn { color: #c7b5b0; }
#composer-action,#composer-action[data-mode="voice"] {
  color: #fff9f5; border-color: rgba(241,210,198,.13);
  background: linear-gradient(145deg,#8f5b51,#56414c);
  box-shadow: 0 10px 28px rgba(48,25,31,.35),inset 0 1px 0 rgba(255,255,255,.16);
}
.attachment-sheet-box {
  border: 1px solid rgba(240,214,206,.1);
  background: linear-gradient(180deg,#39282a,#1a1518);
}
.attachment-option { background: rgba(255,245,241,.035); border-color: rgba(255,235,228,.08); }
.attachment-option:active { background: rgba(255,245,241,.075); }
.attachment-option small,.attachment-sheet-head small { color: #ac9b98; }
/* الحافة الآمنة حشوٌ *داخل* الشريط لا مسافة تحته: الخلفية تصل حافة الشاشة فلا
   يبقى فراغ ميت، والأزرار تظل فوق شريط Home. على أندرويد --safe-b = 0 فيتطابق
   المظهر تماماً من دون أي قاعدة خاصة بالمنصّة. */
.bottom-nav {
  inset-inline: 0; bottom: 0;
  height: calc(var(--nav-h) + var(--safe-b));
  padding: .25rem max(.5rem,env(safe-area-inset-right)) calc(.25rem + var(--safe-b)) max(.5rem,env(safe-area-inset-left));
  border: 0; border-top: 1px solid rgba(240,217,210,.12); border-radius: 22px 22px 0 0;
  background: linear-gradient(145deg,rgba(58,41,43,.9),rgba(20,17,19,.94));
  box-shadow: 0 -14px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
}
.bottom-nav-item { height: 50px; border-radius: 19px; color: #a69592; }
.bottom-nav-item.active {
  color: #fff6f1; background: linear-gradient(145deg,rgba(139,88,76,.5),rgba(81,59,65,.42));
}
.settings-screen {
  background:
    radial-gradient(540px 340px at 80% 0,rgba(180,112,84,.2),transparent 68%),
    linear-gradient(160deg,#211617,#0d0a0b 70%);
}
.settings-header { border-bottom-color: rgba(236,211,203,.09); background: rgba(48,34,36,.86); }
.settings-card,.profile-hero-card { border-color: rgba(236,211,203,.09); background: rgba(54,40,42,.72); }

#chat-view[data-theme="light"] {
  --bg: #eee6e2; --fg: #2d2424; --muted: #786a68; --card: #fffaf7; --accent: #a65f4d;
  background:
    radial-gradient(650px 420px at 95% -8%,rgba(182,119,89,.2),transparent 65%),
    linear-gradient(155deg,#eee4df,#faf6f3 56%,#eee8e5);
}
#chat-view[data-theme="light"] .list-header,#chat-view[data-theme="light"] .chat-header {
  border-bottom-color: rgba(103,76,69,.12); background: rgba(250,243,239,.82);
}
#chat-view[data-theme="light"] .app-title { color: #382a29; }
#chat-view[data-theme="light"] #messages li:not(.self) .b {
  color: #352b2a; border-color: rgba(105,77,70,.1); background: linear-gradient(145deg,#fffaf7,#f4ebe7);
}
#chat-view[data-theme="light"] #messages li.self .b {
  color: #fffaf7; background: linear-gradient(145deg,#7d514b,#493a40);
}
#chat-view[data-theme="light"] #chat-form { border-top-color: rgba(103,76,69,.12); background: rgba(248,241,237,.88); }
#chat-view[data-theme="light"] .composer-pill {
  color: #342a29; border-color: rgba(105,77,70,.14); background: rgba(255,251,248,.95);
}
#chat-view[data-theme="light"] #chat-input { color: #342a29; }
#chat-view[data-theme="light"] .bottom-nav {
  border-color: rgba(105,77,70,.13); background: rgba(255,249,246,.9); box-shadow: 0 -12px 34px rgba(82,58,53,.12);
}
#chat-view[data-theme="light"] .bottom-nav-item { color: #796a67; }
#chat-view[data-theme="light"] .bottom-nav-item.active { color: #5e3d39; background: rgba(163,96,78,.12); }
#chat-view[data-theme="light"] .attachment-card.kind-audio { color: inherit; }
#chat-view[data-theme="light"] .voice-subline { color: rgba(75,59,56,.62); }
#chat-view[data-theme="light"] #messages li.self .voice-subline { color: rgba(255,245,240,.68); }
#chat-view[data-theme="light"] .record-panel { background: rgba(65,47,48,.34); }
#chat-view[data-theme="light"] .record-card {
  color: #332827; border-color: rgba(103,76,69,.13);
  background: linear-gradient(155deg,rgba(255,250,247,.98),rgba(239,229,225,.98));
  box-shadow: 0 24px 66px rgba(82,58,53,.2),inset 0 1px 0 #fff;
}
#chat-view[data-theme="light"] .record-track { border-color: rgba(103,76,69,.12); background: rgba(125,81,75,.055); }
#chat-view[data-theme="light"] .record-timer { color: #382b2a; }
#chat-view[data-theme="light"] .record-limit { color: #806f6c; }
#chat-view[data-theme="light"] .voice-mini-player {
  color: #382b2a; border-color: rgba(103,76,69,.14);
  background: linear-gradient(145deg,rgba(255,250,247,.97),rgba(236,225,222,.97));
  box-shadow: 0 17px 42px rgba(82,58,53,.18),inset 0 1px 0 #fff;
}
#chat-view[data-theme="light"] .voice-mini-copy span { color: rgba(75,59,56,.66); }
#chat-view[data-theme="light"] .voice-mini-close { color: #756461; }
#chat-view[data-theme="light"] .attachment-sheet-box {
  color: #342928; border-color: rgba(103,76,69,.13);
  background: linear-gradient(180deg,#fffaf7,#eee4e0);
}
#chat-view[data-theme="light"] .attachment-sheet-box .sheet-cancel {
  color: #ad4d55; background: rgba(145,69,74,.08);
}
#chat-view[data-theme="light"] .attachment-option {
  color: #392d2c; border-color: rgba(103,76,69,.12); background: rgba(125,81,75,.045);
}

/* ---------- تسجيل صوتي مدمج + صفحة معلومات المستخدم + ثيمات المحادثة ---------- */
.profile-meta-trigger {
  padding: 0; border: 0; color: inherit; background: transparent; text-align: start; cursor: pointer;
}
.profile-meta-trigger:focus-visible { outline: 2px solid var(--theme-focus,#74b9ff); outline-offset: 3px; border-radius: 9px; }
.ci-muted { margin-inline-start: auto; color: var(--theme-muted,#aa9b98); font-size: .72rem; }
.ci-muted + .ci-time { margin-inline-start: .15rem; }

/* المسجل جزء من الـcomposer ولا يعزل أو يحجب الرسائل. */
#chat-form.is-recording { padding-top: .38rem; }
#chat-form.is-recording > .composer-row,
#chat-form.is-recording > .composer-upload-state { display: none; }
.record-panel {
  position: static; z-index: auto; inset: auto; width: 100%; height: auto; display: block;
  padding: 0; color: inherit; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.record-card {
  width: 100%; max-width: none; max-height: none; margin: 0; padding: .52rem .58rem .45rem;
  overflow: visible; border: 1px solid var(--theme-border,rgba(255,255,255,.1)); border-radius: 21px;
  color: var(--theme-text,#f5f0ee); background: var(--theme-composer,rgba(45,34,37,.98));
  box-shadow: 0 10px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.045);
}
.record-head { min-height: 22px; padding-inline: .18rem; }
.record-live { color: #ff6674; font-size: .66rem; }
.record-limit { color: var(--theme-muted,#aa9b98); }
.record-track {
  min-height: 52px; margin: .2rem 0 .35rem; grid-template-columns: 52px minmax(0,1fr); gap: .45rem;
  padding: .28rem .52rem; border-color: var(--theme-border,rgba(255,255,255,.08)); border-radius: 16px;
  background: color-mix(in srgb,var(--theme-surface,#281e20) 76%,transparent);
}
.record-timer { color: var(--theme-text,#fff); font-size: .9rem; }
.record-wave-shell,.record-wave { height: 38px; }
.record-wave i { width: 3px; min-width: 3px; height: calc(var(--voice-height,.12) * 31px); background: linear-gradient(180deg,var(--theme-accent,#b97862),var(--theme-accent-2,#7660a8)); }
.record-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .42rem; }
.record-action {
  min-width: 44px; min-height: 46px; flex-direction: row; gap: .32rem; border-radius: 15px;
  color: var(--theme-text,#fff); background: color-mix(in srgb,var(--theme-surface-2,#3a2a2d) 92%,transparent);
}
.record-action span { width: 23px; min-height: 23px; font-size: 1.15rem; }
.record-action span svg { width: 21px; height: 21px; }
.record-action small { font-size: .59rem; }
.record-action.cancel { color: #ff8089; background: rgba(222,65,78,.09); }
.record-action.stop { color: #ff6d7d; background: rgba(194,54,69,.12); }
.record-action.send { color: #fff; background: linear-gradient(145deg,var(--theme-accent,#b97862),var(--theme-accent-2,#6f5270)); box-shadow: 0 7px 20px color-mix(in srgb,var(--theme-accent,#b97862) 28%,transparent); }
.record-slide-cancel {
  width: 100%; min-height: 38px; margin-top: .34rem; display: flex; align-items: center; justify-content: center; gap: .35rem;
  border: 0; border-radius: 13px; color: var(--theme-muted,#aa9b98); background: transparent; cursor: grab;
  font-size: .68rem; touch-action: none; user-select: none; -webkit-user-select: none; transition: color .15s ease,background .15s ease,transform .15s ease;
}
.record-slide-cancel span { font-size: 1.45rem; line-height: 1; animation: recordSlideHint 1.25s ease-in-out infinite; }
.record-slide-cancel.is-dragging { background: color-mix(in srgb,#ef5b67 8%,transparent); }
.record-slide-cancel.is-armed { color: #ff6875; background: rgba(222,65,78,.13); transform: scale(.985); }
.record-message { min-height: 0; margin-top: .2rem; }
.record-message:empty { display: none; }
@keyframes recordSlideHint { 50% { transform: translateX(-5px); opacity: .55; } }
@media (max-width:350px) {
  .record-action small { display: none; }
  .record-controls { gap: .3rem; }
}
@media (orientation:landscape) and (max-height:500px) {
  .record-panel { padding: 0; }
  .record-card { display: grid; grid-template-columns: minmax(170px,1fr) minmax(190px,.8fr); gap: .35rem .55rem; padding: .38rem .5rem; }
  .record-head { grid-column: 1 / 3; }
  .record-track { margin: 0; }
  .record-controls { align-self: center; }
  .record-slide-cancel { grid-column: 1 / 3; margin: 0; min-height: 32px; }
  .record-permission,.record-message { grid-column: 1 / 3; }
}

/* شاشة بروفايل الطرف الآخر مستوحاة من Telegram iOS، بتمرير مستقل وSafe Area. */
.peer-profile-screen {
  position: fixed; z-index: 74; inset-inline: 0; top: var(--app-top,0px); width: 100%; height: var(--app-h,100dvh);
  display: flex; flex-direction: column; color: var(--theme-text,#f5f0ee);
  background: var(--theme-profile-bg,linear-gradient(160deg,#24191b,#0c0a0b)); overflow: hidden;
}
.peer-profile-header {
  direction: ltr; min-height: calc(54px + env(safe-area-inset-top)); display: grid; grid-template-columns: 48px minmax(0,1fr) 48px;
  align-items: end; gap: .35rem; padding: env(safe-area-inset-top) max(.7rem,env(safe-area-inset-right)) .35rem max(.7rem,env(safe-area-inset-left));
  color: var(--theme-text,#fff); background: linear-gradient(180deg,var(--theme-header,rgba(54,40,42,.92)),color-mix(in srgb,var(--theme-header,rgba(54,40,42,.92)) 76%,transparent));
  -webkit-backdrop-filter: blur(24px) saturate(145%); backdrop-filter: blur(24px) saturate(145%);
}
.peer-profile-header > span { direction: rtl; min-height: 44px; display: grid; place-items: center; font-size: .9rem; font-weight: 750; }
.peer-profile-back,.peer-profile-header-more {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--theme-border,rgba(255,255,255,.1));
  border-radius: 50%; color: var(--theme-text,#fff); background: var(--theme-surface-glass,rgba(255,255,255,.065)); cursor: pointer;
}
.peer-profile-back svg,.peer-profile-header-more svg { width: 22px; height: 22px; }
.peer-profile-header-more { justify-self: end; }
.peer-profile-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 1.1rem max(.75rem,env(safe-area-inset-right)) calc(2rem + env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));
}
.peer-profile-identity { display: flex; flex-direction: column; align-items: center; text-align: center; padding: .35rem 0 1.05rem; }
.peer-profile-avatar {
  width: 112px; height: 112px; flex: 0 0 112px; margin-bottom: .72rem; border: 2px solid color-mix(in srgb,var(--theme-accent,#b97862) 54%,transparent);
  font-size: 2.2rem; box-shadow: 0 16px 45px rgba(0,0,0,.28),0 0 0 7px color-mix(in srgb,var(--theme-accent,#b97862) 8%,transparent);
}
.peer-profile-identity h1 { max-width: 100%; margin: 0; overflow-wrap: anywhere; font-size: 1.45rem; line-height: 1.25; letter-spacing: -.025em; }
.peer-profile-identity p { margin: .3rem 0 0; color: var(--theme-muted,#aa9b98); font-size: .78rem; }
.peer-profile-identity p.online { color: var(--theme-accent,#57b8ff); }
.peer-quick-actions { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .42rem; margin-bottom: .8rem; }
.peer-quick-actions button {
  min-width: 0; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .28rem;
  padding: .35rem .08rem; border: 1px solid var(--theme-border,rgba(255,255,255,.1)); border-radius: 18px; color: var(--theme-accent,#70b7ff);
  background: var(--theme-card,rgba(54,40,42,.82)); box-shadow: 0 8px 22px rgba(0,0,0,.12); cursor: pointer;
}
.peer-quick-actions button > span { width: 25px; height: 25px; display: grid; place-items: center; }
.peer-quick-actions svg { width: 23px; height: 23px; }
.peer-quick-actions small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: currentColor; font-size: .58rem; white-space: nowrap; }
.peer-quick-actions button[disabled] { opacity: .4; cursor: not-allowed; }
.peer-quick-actions button[aria-pressed="true"] { color: #ff737d; background: rgba(214,68,79,.1); }
.peer-details-card,.peer-shared-section {
  margin-bottom: .82rem; overflow: hidden; border: 1px solid var(--theme-border,rgba(255,255,255,.09)); border-radius: 21px;
  background: var(--theme-card,rgba(54,40,42,.78)); box-shadow: 0 13px 34px rgba(0,0,0,.14);
}
.peer-detail-row { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .85rem; border-bottom: 1px solid var(--theme-border,rgba(255,255,255,.07)); }
.peer-detail-row > div { min-width: 0; flex: 1; display: grid; gap: .18rem; }
.peer-detail-row small { color: var(--theme-muted,#aa9b98); font-size: .62rem; }
.peer-detail-row strong { color: var(--theme-accent,#70b7ff); font-size: .84rem; overflow-wrap: anywhere; text-align: start; }
.peer-detail-row button { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 0; border-radius: 14px; color: var(--theme-accent,#70b7ff); background: color-mix(in srgb,var(--theme-accent,#70b7ff) 9%,transparent); cursor: pointer; }
.peer-detail-row button svg { width: 23px; height: 23px; }
.peer-bio-row p { margin: 0; color: var(--theme-text,#fff); font-size: .8rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.peer-detail-action { width: 100%; min-height: 51px; padding: .55rem .85rem; border: 0; border-bottom: 1px solid var(--theme-border,rgba(255,255,255,.07)); color: var(--theme-accent,#70b7ff); background: transparent; text-align: start; cursor: pointer; }
.peer-detail-action:last-child { border-bottom: 0; }
.peer-detail-action.danger { color: #ff6873; }
.peer-shared-section { padding-bottom: .7rem; }
.peer-shared-title-row { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .65rem .85rem .35rem; }
.peer-shared-title-row h2 { margin: 0; font-size: .9rem; }
.peer-shared-title-row span { color: var(--theme-muted,#aa9b98); font-size: .62rem; }
.peer-shared-search { min-height: 44px; display: flex; align-items: center; gap: .45rem; margin: .2rem .7rem .55rem; padding: 0 .7rem; border: 1px solid var(--theme-border,rgba(255,255,255,.09)); border-radius: 14px; color: var(--theme-muted,#aa9b98); background: var(--theme-surface,#261c1f); }
.peer-shared-search svg { width: 19px; height: 19px; flex: 0 0 19px; }
.peer-shared-search input { min-width: 0; width: 100%; height: 42px; padding: 0; border: 0; outline: 0; color: var(--theme-text,#fff); background: transparent; font-size: 16px; }
.peer-shared-search input::placeholder { color: var(--theme-muted,#aa9b98); }
.peer-shared-tabs { display: flex; gap: .3rem; overflow-x: auto; padding: .1rem .7rem .55rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.peer-shared-tabs::-webkit-scrollbar { display: none; }
.peer-shared-tabs button { min-width: max-content; min-height: 40px; padding: .42rem .75rem; border: 0; border-radius: 999px; color: var(--theme-muted,#aa9b98); background: var(--theme-surface,#261c1f); font-size: .7rem; cursor: pointer; scroll-snap-align: start; }
.peer-shared-tabs button[aria-selected="true"] { color: var(--theme-accent-contrast,#fff); background: linear-gradient(145deg,var(--theme-accent,#b97862),var(--theme-accent-2,#6f5270)); box-shadow: 0 6px 18px color-mix(in srgb,var(--theme-accent,#b97862) 22%,transparent); }
.peer-shared-status { min-height: 34px; display: grid; place-items: center; padding: .35rem .75rem; color: var(--theme-muted,#aa9b98); font-size: .68rem; text-align: center; }
.peer-shared-status:empty { display: none; }
.peer-shared-panel { min-height: 120px; padding: 0 .7rem; }
.peer-shared-panel.media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px; padding: 0; }
.peer-media-tile { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 0; border: 0; color: #fff; background: linear-gradient(145deg,var(--theme-accent-2,#6f5270),var(--theme-surface,#21181b)); cursor: pointer; }
.peer-media-tile img,.peer-media-tile video { width: 100%; height: 100%; display: block; object-fit: cover; }
.peer-media-tile .peer-media-play { position: absolute; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.peer-media-tile .peer-media-detail { position: absolute; inset-inline: .35rem; bottom: .3rem; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: .56rem; text-shadow: 0 1px 4px #000; white-space: nowrap; }
.peer-shared-list { display: grid; gap: .42rem; }
.peer-shared-row { min-height: 60px; display: flex; align-items: center; gap: .62rem; padding: .52rem .58rem; border: 1px solid var(--theme-border,rgba(255,255,255,.07)); border-radius: 15px; color: var(--theme-text,#fff); background: var(--theme-surface,#261c1f); }
.peer-shared-row-icon { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(145deg,var(--theme-accent,#b97862),var(--theme-accent-2,#6f5270)); }
.peer-shared-row-copy { min-width: 0; flex: 1; display: grid; gap: .17rem; text-align: start; }
.peer-shared-row-copy strong,.peer-shared-row-copy p { margin: 0; overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: .76rem; white-space: nowrap; }
.peer-shared-row-copy p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.peer-shared-row-copy small { color: var(--theme-muted,#aa9b98); font-size: .58rem; }
.peer-shared-row > button,.peer-shared-row > a { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; color: var(--theme-accent,#70b7ff); background: color-mix(in srgb,var(--theme-accent,#70b7ff) 9%,transparent); text-decoration: none; cursor: pointer; }
.peer-shared-panel .attachment-card.kind-audio { width: 100%; min-width: 0; margin-bottom: .42rem; padding: .55rem; border: 1px solid var(--theme-border,rgba(255,255,255,.08)); background: var(--theme-surface,#261c1f); }
.peer-shared-empty { min-height: 130px; display: grid; place-items: center; padding: 1rem; color: var(--theme-muted,#aa9b98); text-align: center; font-size: .74rem; }
.peer-shared-load-more { width: calc(100% - 1.4rem); min-height: 46px; margin: .65rem .7rem 0; border: 0; border-radius: 14px; color: var(--theme-accent,#70b7ff); background: color-mix(in srgb,var(--theme-accent,#70b7ff) 10%,transparent); cursor: pointer; }

/* منتقي الثيم: mode مستقل عن لوحة اللون، مع معاينة حية. */
.appearance-preview { min-height: 116px; display: flex; flex-direction: column; justify-content: center; gap: .42rem; margin-bottom: .8rem; padding: .8rem; border: 1px solid var(--theme-border,rgba(255,255,255,.08)); border-radius: 18px; background: var(--theme-wallpaper,linear-gradient(145deg,#251a1c,#151013)); }
.appearance-preview span { max-width: 72%; padding: .42rem .65rem; border-radius: 14px; font-size: .7rem; }
.appearance-preview-in { align-self: flex-end; color: var(--theme-in-text,#fff); background: var(--theme-in,#4c3333); }
.appearance-preview-out { align-self: flex-start; color: var(--theme-out-text,#fff); background: var(--theme-out,#151113); }
.appearance-section-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .75rem .15rem .45rem; }
.appearance-section-label strong { font-size: .72rem; }.appearance-section-label span { color: var(--theme-muted,#8c7a77); font-size: .6rem; }
.theme-mode-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; padding: .25rem; border-radius: 15px; background: var(--theme-surface,#261c1f); }
.theme-mode-picker button { min-height: 44px; border: 0; border-radius: 12px; color: var(--theme-muted,#aa9b98); background: transparent; cursor: pointer; }
.theme-mode-picker button[aria-checked="true"] { color: var(--theme-accent-contrast,#fff); background: linear-gradient(145deg,var(--theme-accent,#b97862),var(--theme-accent-2,#6f5270)); }
.theme-palette-picker { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .35rem; }
.theme-palette-picker button { min-width: 0; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: .35rem .1rem; border: 2px solid transparent; border-radius: 15px; color: var(--theme-muted,#aa9b98); background: var(--theme-surface,#261c1f); cursor: pointer; }
.theme-palette-picker button[aria-checked="true"] { border-color: var(--theme-accent,#70b7ff); color: var(--theme-text,#fff); }
.palette-swatch { width: 32px; height: 32px; display: block; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35),0 5px 12px rgba(0,0,0,.18); }
.palette-swatch.warm { background: linear-gradient(145deg,#c27b5f,#62424d); }
.palette-swatch.telegram { background: linear-gradient(145deg,#55b8ff,#3175d6); }
.palette-swatch.whatsapp { background: linear-gradient(145deg,#38c58a,#12866d); }
.palette-swatch.violet { background: linear-gradient(145deg,#b47cff,#6550cc); }
.palette-swatch.midnight { background: linear-gradient(145deg,#7593c7,#263653); }
.theme-palette-picker span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .54rem; white-space: nowrap; }

/* Semantic theme tokens. These final overrides prevent hybrid light/dark colors. */
#chat-view {
  --theme-text:#f7f2f0; --theme-muted:#b9aaa6; --theme-border:rgba(255,255,255,.1);
  --theme-card:rgba(55,41,43,.88); --theme-surface:#251b1e; --theme-surface-2:#3b2a2e; --theme-surface-glass:rgba(255,255,255,.065);
  --theme-header:rgba(58,42,44,.91); --theme-composer:rgba(37,27,30,.97); --theme-accent-contrast:#fff;
  --theme-in:#513638; --theme-in-text:#fff8f5; --theme-out:#151113; --theme-out-text:#fff8f5;
  --theme-accent:#bb7258; --theme-accent-2:#76505d; --theme-seen:#63d6bd; --theme-focus:#8cc8ff;
  --theme-wallpaper:radial-gradient(430px 300px at 84% 8%,rgba(191,117,84,.18),transparent 70%),radial-gradient(390px 330px at 8% 84%,rgba(113,71,94,.16),transparent 72%),linear-gradient(160deg,#251719,#0c0a0b 72%);
  --theme-profile-bg:var(--theme-wallpaper); color:var(--theme-text); background:var(--theme-wallpaper); color-scheme:dark;
}
#chat-view[data-palette="telegram"] { --theme-accent:#419fe4; --theme-accent-2:#3972c8; --theme-in:#263f54; --theme-out:#245f8f; --theme-seen:#69e0d1; --theme-focus:#79caff; --theme-wallpaper:radial-gradient(circle at 18px 18px,rgba(87,176,230,.055) 2px,transparent 2.5px),radial-gradient(500px 340px at 90% 0,rgba(57,135,205,.25),transparent 68%),linear-gradient(155deg,#152735,#0b131c); background-size:36px 36px,auto,auto; }
#chat-view[data-palette="whatsapp"] { --theme-accent:#28a881; --theme-accent-2:#147763; --theme-in:#223f38; --theme-out:#176650; --theme-seen:#5de4ca; --theme-focus:#6ee0be; --theme-wallpaper:radial-gradient(circle at 12px 12px,rgba(83,178,145,.05) 2px,transparent 2.6px),radial-gradient(500px 350px at 86% 0,rgba(28,134,103,.23),transparent 68%),linear-gradient(155deg,#142923,#091511); background-size:30px 30px,auto,auto; }
#chat-view[data-palette="violet"] { --theme-accent:#9a70e8; --theme-accent-2:#6650c4; --theme-in:#433456; --theme-out:#32245e; --theme-seen:#72e0cc; --theme-focus:#c19fff; --theme-wallpaper:radial-gradient(500px 360px at 86% 0,rgba(142,91,218,.28),transparent 68%),radial-gradient(420px 320px at 0 95%,rgba(77,65,170,.22),transparent 70%),linear-gradient(155deg,#221a34,#0d0a16); }
#chat-view[data-palette="midnight"] { --theme-accent:#7392c6; --theme-accent-2:#40567e; --theme-in:#2d394d; --theme-out:#1a263a; --theme-seen:#71d5c9; --theme-focus:#9cb8e7; --theme-wallpaper:radial-gradient(560px 360px at 80% 0,rgba(86,115,163,.24),transparent 68%),linear-gradient(155deg,#182130,#070b11); }
#chat-view[data-theme="light"] {
  --theme-text:#2e2827; --theme-muted:#665b59; --theme-border:rgba(79,61,58,.14);
  --theme-card:rgba(255,252,250,.94); --theme-surface:#f3ebe8; --theme-surface-2:#e7dbd7; --theme-surface-glass:rgba(255,255,255,.75);
  --theme-header:rgba(250,245,242,.94); --theme-composer:rgba(255,252,250,.98);
  --theme-in:#fffaf7; --theme-in-text:#302827; --theme-out:#68464a; --theme-out-text:#fff;
  --theme-wallpaper:radial-gradient(430px 300px at 84% 8%,rgba(191,117,84,.14),transparent 70%),radial-gradient(390px 330px at 8% 84%,rgba(113,71,94,.1),transparent 72%),linear-gradient(160deg,#f4ece8,#fffaf7 72%);
  color-scheme:light;
}
#chat-view[data-theme="light"][data-palette="telegram"] { --theme-accent:#1678bd; --theme-accent-2:#3d8fd0; --theme-in:#fff; --theme-out:#2f87c6; --theme-out-text:#fff; --theme-wallpaper:radial-gradient(circle at 18px 18px,rgba(39,134,195,.055) 2px,transparent 2.5px),linear-gradient(155deg,#e7f4fc,#f8fcff); background-size:36px 36px,auto; }
#chat-view[data-theme="light"][data-palette="whatsapp"] { --theme-accent:#087a5d; --theme-accent-2:#21a27b; --theme-in:#fff; --theme-out:#16866a; --theme-out-text:#fff; --theme-wallpaper:radial-gradient(circle at 12px 12px,rgba(35,132,101,.052) 2px,transparent 2.5px),linear-gradient(155deg,#e9f5ef,#fbfdfb); background-size:30px 30px,auto; }
#chat-view[data-theme="light"][data-palette="violet"] { --theme-accent:#6743b9; --theme-accent-2:#8a61d5; --theme-in:#fff; --theme-out:#7351bd; --theme-out-text:#fff; --theme-wallpaper:radial-gradient(480px 330px at 85% 0,rgba(130,84,205,.14),transparent 70%),linear-gradient(155deg,#f0eafa,#fdfbff); }
#chat-view[data-theme="light"][data-palette="midnight"] { --theme-accent:#405f91; --theme-accent-2:#607eae; --theme-in:#fff; --theme-out:#4c6690; --theme-out-text:#fff; --theme-wallpaper:radial-gradient(500px 330px at 85% 0,rgba(77,102,143,.13),transparent 70%),linear-gradient(155deg,#edf1f6,#fbfcfe); }
#chat-view #list-screen,#chat-view #thread-screen,#chat-view .settings-screen { color:var(--theme-text); background:var(--theme-wallpaper); }
#chat-view .list-header,#chat-view .chat-header,#chat-view .settings-header { color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-header); }
#chat-view #messages { background:var(--theme-wallpaper); }
#chat-view #messages li:not(.self) .b { color:var(--theme-in-text); border-color:var(--theme-border); background:var(--theme-in); }
#chat-view #messages li.self .b { color:var(--theme-out-text); border-color:color-mix(in srgb,var(--theme-accent) 20%,transparent); background:var(--theme-out); }
#chat-view #messages li .st.seen,#chat-view #messages li .b .meta .st.voice-played { color:var(--theme-seen); }
#chat-view #chat-form { border-color:var(--theme-border); background:color-mix(in srgb,var(--theme-header) 92%,transparent); }
#chat-view .composer-pill { color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-composer); }
#chat-view #chat-input { color:var(--theme-text); }
#chat-view #chat-input::placeholder { color:var(--theme-muted); }
#chat-view #composer-action,#chat-view #composer-action[data-mode="voice"] { background:linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2)); }
#chat-view .settings-card,#chat-view .profile-hero-card { color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-card); }
#chat-view .bottom-nav { border-color:var(--theme-border); background:color-mix(in srgb,var(--theme-header) 95%,transparent); }
#chat-view .bottom-nav-item { color:var(--theme-muted); }
#chat-view .bottom-nav-item.active { color:var(--theme-text); background:color-mix(in srgb,var(--theme-accent) 16%,transparent); }
#chat-view .attachment-sheet-box { color:var(--theme-text); border-color:var(--theme-border); background:linear-gradient(180deg,var(--theme-surface-2),var(--theme-surface)); }
#chat-view[data-theme="light"] .record-card { color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-composer); box-shadow:0 10px 30px rgba(70,50,46,.12),inset 0 1px 0 #fff; }
#chat-view[data-theme="light"] .record-track { border-color:var(--theme-border); background:var(--theme-surface); }
#chat-view[data-theme="light"] .record-timer { color:var(--theme-text); }

@media (prefers-reduced-motion:reduce) { .record-slide-cancel span { animation:none; }.peer-profile-screen { scroll-behavior:auto; } }
@media (prefers-contrast:more) {
  #chat-view { --theme-border:currentColor; }
  .peer-quick-actions button,.peer-details-card,.peer-shared-section,.record-card { border-width:2px; }
}
@media (forced-colors:active) {
  .peer-quick-actions button,.peer-profile-back,.peer-profile-header-more,.peer-details-card,.peer-shared-section,.record-card,.theme-mode-picker button,.theme-palette-picker button { forced-color-adjust:auto; border:1px solid ButtonText; }
}
@supports (-webkit-touch-callout:none) {
  .peer-profile-scroll { padding-bottom:calc(2.2rem + env(safe-area-inset-bottom)); }
  .record-slide-cancel { -webkit-touch-callout:none; }
}

/* ربط المكوّنات الأقدم بنفس الرموز الدلالية كي يلوّن الثيم الشاشة كاملة. */
#chat-view {
  --fg:var(--theme-text); --muted:var(--theme-muted); --card:var(--theme-card); --accent:var(--theme-accent);
  --chat-surface:var(--theme-card); --chat-line:var(--theme-border);
}
#chat-view .app-title { color:var(--theme-text); }
#chat-view .search-wrap input,#chat-view #user-search {
  color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-surface-glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 9px 26px rgba(0,0,0,.1);
}
#chat-view .search-wrap input::placeholder,#chat-view #user-search::placeholder,
#chat-view .section-label,#chat-view .chat-item .ci-time,#chat-view .chat-item .ci-preview { color:var(--theme-muted); }
#chat-view .search-wrap input:focus,#chat-view #user-search:focus { border-color:var(--theme-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 13%,transparent); }
#chat-view .chat-item { color:var(--theme-text); border-bottom-color:var(--theme-border); }
#chat-view .chat-item:hover,#chat-view .chat-item:focus-visible,#chat-view .chat-item:active { background:color-mix(in srgb,var(--theme-accent) 11%,transparent); }
#chat-view .chat-item .ci-preview.live-activity,#chat-view .typing-hint.media-activity { color:var(--theme-seen); }
#chat-view .chat-item .ci-receipt.seen { color:var(--theme-accent); }
#chat-view .chat-item .ci-badge { background:var(--theme-accent); }
#chat-view .online-dot { background:var(--theme-seen); border-color:var(--theme-header); }
#chat-view .online-dot.off { background:var(--theme-muted); }
#chat-view .reply-bar { color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-header); }
#chat-view .reply-preview { color:var(--theme-muted); }
#chat-view .reply-mark,#chat-view .reply-copy strong { color:var(--theme-accent); }
#chat-view .menu,#chat-view .sheet-box,#chat-view .panel-box {
  color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-surface);
}
#chat-view .menu-item { color:var(--theme-text); }
#chat-view .menu-item:hover,#chat-view .menu-item:active { background:color-mix(in srgb,var(--theme-accent) 12%,transparent); }
#chat-view .menu-item.danger { color:#e84f5b; }
#chat-view .panel-sec,#chat-view .settings-card-title,#chat-view .settings-row + .settings-row { border-color:var(--theme-border); }
#chat-view .panel-box input,#chat-view .panel-box textarea,
#chat-view .settings-field input,#chat-view .settings-field textarea,#chat-view .security-form input {
  color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-surface);
}
#chat-view .panel-box input:focus,#chat-view .panel-box textarea:focus,
#chat-view .settings-field input:focus,#chat-view .settings-field textarea:focus,#chat-view .security-form input:focus {
  border-color:var(--theme-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 13%,transparent);
}
#chat-view .settings-header span,#chat-view .settings-card-title p,#chat-view .settings-field > span,
#chat-view .settings-field small,#chat-view .settings-note,#chat-view .settings-row span,#chat-view .account-identity span { color:var(--theme-muted); }
#chat-view .settings-glyph { color:var(--theme-accent); background:color-mix(in srgb,var(--theme-accent) 13%,transparent); }
#chat-view .settings-primary { background:linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2)); box-shadow:0 8px 24px color-mix(in srgb,var(--theme-accent) 20%,transparent); }
#chat-view .settings-action { color:var(--theme-accent); border-color:color-mix(in srgb,var(--theme-accent) 24%,transparent); background:color-mix(in srgb,var(--theme-accent) 10%,transparent); }
#chat-view .attachment-option { color:var(--theme-text); border-color:var(--theme-border); background:color-mix(in srgb,var(--theme-card) 82%,transparent); }
#chat-view .attachment-option:active { background:color-mix(in srgb,var(--theme-accent) 12%,var(--theme-card)); }
#chat-view .attachment-option small,#chat-view .attachment-sheet-head small,#chat-view .sheet-cancel { color:var(--theme-muted); }
#chat-view .sheet-cancel { background:color-mix(in srgb,var(--theme-card) 86%,transparent); }
#chat-view .voice-mini-player { color:var(--theme-text); border-color:var(--theme-border); background:var(--theme-header); }
#chat-view .voice-mini-toggle { background:linear-gradient(145deg,var(--theme-accent),var(--theme-accent-2)); }
#chat-view .voice-mini-copy span,#chat-view .voice-mini-close { color:var(--theme-muted); }
#chat-view .voice-mini-copy i { background:var(--theme-accent); }

.peer-media-video-player { cursor:default; }
.peer-media-player-retry {
  position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; padding:0; border:0;
  color:#fff; background:rgba(0,0,0,.3); font-size:1.5rem; cursor:pointer; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}

@media (max-width:430px) {
  .record-card { padding:.42rem .48rem .36rem; border-radius:18px; }
  .record-head { min-height:18px; }
  .record-limit { display:none; }
  .record-track { min-height:46px; margin:.12rem 0 .25rem; }
  .record-wave-shell,.record-wave { height:34px; }
  .record-action { min-height:42px; }
  .record-slide-cancel { min-height:31px; margin-top:.18rem; }
}

/* ================= Web/PWA hardening: Desktop + Safari + Accessibility ================= */
#chat-view {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Arabic", "Noto Sans Arabic", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
}

/* لا نرقي كل رسالة إلى GPU layer؛ الترقية تكون أثناء السحب فقط.
   paint containment يسبب في WebKit مستطيلاً خلف ظل الفقاعة، لذلك تبقى
   طبقة الرسالة شفافة وoverflow مرئياً. */
#messages li { will-change: auto; overflow: visible; background: transparent; }
#messages li.is-swiping { will-change: transform; }
#chat-view #messages li .b { box-shadow: 0 2px 7px rgba(0,0,0,.16); }
#chat-view #messages li.self .b { box-shadow: 0 2px 7px rgba(0,0,0,.18); }
#chat-view[data-theme="light"] #messages li .b,
#chat-view[data-theme="light"] #messages li.self .b {
  box-shadow: 0 1px 2px rgba(54,43,40,.13);
}
#thread-screen { position: relative; }
.new-messages-btn {
  position: absolute; z-index: 46; inset-inline-start: 50%; bottom: calc(76px + env(safe-area-inset-bottom));
  min-width: 128px; min-height: 44px; padding: .55rem .9rem; border: 1px solid var(--theme-border,rgba(255,255,255,.12));
  border-radius: 999px; color: var(--theme-accent-contrast,#fff); background: linear-gradient(145deg,var(--theme-accent,#3b82f6),var(--theme-accent-2,#2aa99e));
  box-shadow: 0 10px 28px rgba(0,0,0,.28); transform: translateX(50%); cursor: pointer;
}

/* أهداف لمس iOS لا تقل عن 44pt. */
.icon-btn,.wx-unit,.record-slide-cancel,.peer-shared-tabs button,.peer-media-play,
.voice-mini-close,.attachment-upload-cancel { min-width: 44px; min-height: 44px; }
.chat-header .avatar.profile-avatar-trigger { width: 44px; height: 44px; flex-basis: 44px; }
.record-slide-cancel { min-height: 44px; }
@media (orientation:landscape) and (max-height:500px) {
  .record-slide-cancel { min-height: 44px; }
  .chat-header .avatar.profile-avatar-trigger { width:44px; height:44px; flex-basis:44px; }
}

/* النصوص الثانوية تبقى مقروءة على iPhone SE ومع تكبير Safari. */
.peer-quick-actions small,.theme-palette-picker span,.peer-media-tile .peer-media-detail,
.peer-shared-row-copy small,.appearance-section-label span,.record-action small,
.record-limit,.voice-mini-copy span,.settings-card-title p,.settings-field small,.settings-note,
.wx-insight small,.wx-rain-col small,.wx-rain-col time,.wx-compass span { font-size: max(.68rem,11px); }
.peer-detail-row small,.peer-shared-title-row span,.peer-shared-status,
.attachment-option small,.voice-subline,.attachment-info small { font-size: max(.7rem,11px); }

button:focus-visible,a:focus-visible,.attachment-native-input:focus-visible {
  outline: 3px solid var(--theme-focus,#74b9ff); outline-offset: 2px;
}

.desktop-empty { display: none; }

/* واجهة ويب وiPad حقيقية: قائمة ثابتة ومحتوى مستقل بدل إطار هاتف ضيق. */
@media (min-width:900px) {
  #chat-view {
    --desktop-sidebar: clamp(330px,30vw,400px);
    /* الشريط هنا قاعدة العمود الجانبي — تنفّس أقل، ويُعاد حساب --nav-clear
       تلقائياً لكل ما يعتمد عليه داخل هذا الفرع. */
    --nav-breath: 12px;
    max-width: none; margin: 0; border: 0; display: grid;
    grid-template-columns: var(--desktop-sidebar) minmax(0,1fr);
    grid-template-rows: minmax(0,1fr); direction: rtl;
  }
  #chat-view > #list-screen {
    grid-column: 1; grid-row: 1; width: 100%; height: var(--app-h,100dvh);
    border-inline-end: 1px solid var(--theme-border,rgba(255,255,255,.1));
    box-shadow: -12px 0 36px rgba(0,0,0,.12); padding-bottom: var(--nav-clear);
  }
  #chat-view > #thread-screen,#chat-view > .settings-screen,#chat-view > .desktop-empty {
    grid-column: 2; grid-row: 1; width: 100%; height: var(--app-h,100dvh); min-width: 0;
  }
  #chat-view > #thread-screen { border-inline-start: 0; }
  #back-btn { display:none; }
  .desktop-empty:not(.hidden) {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem;
    padding:2rem; color:var(--theme-muted); text-align:center; background:var(--theme-wallpaper);
  }
  .desktop-empty-mark {
    width:82px; height:82px; display:grid; place-items:center; margin-bottom:.5rem; border:1px solid var(--theme-border);
    border-radius:27px; color:var(--theme-accent); background:var(--theme-card); box-shadow:0 18px 48px rgba(0,0,0,.16); font-size:2rem;
  }
  .desktop-empty h2 { margin:0; color:var(--theme-text); font-size:1.25rem; }
  .desktop-empty p { max-width:360px; margin:0; line-height:1.7; }
  .bottom-nav {
    width: var(--desktop-sidebar); inset-inline-start:0; inset-inline-end:auto;
    border-inline-end:1px solid var(--theme-border); border-radius:0;
  }
  .peer-profile-screen { width:calc(100% - var(--desktop-sidebar)); left:0; right:auto; }
  .peer-profile-scroll > * { width:min(100%,760px); margin-inline:auto; }
  #messages { padding-inline:max(2rem,6vw); }
  #messages li { max-width:min(72%,42rem); }
  #chat-form { padding-inline:max(1rem,5vw); }
  .sheet-box { width:min(620px,calc(100% - 2rem)); margin-inline:auto; border-radius:22px 22px 0 0; }
}

@media (max-width:390px) {
  .peer-quick-actions { gap:.28rem; }
  .peer-quick-actions button { border-radius:15px; }
  .theme-palette-picker { gap:.25rem; }
  .theme-palette-picker button { min-height:76px; border-radius:13px; }
}

/* نقلل كلفة طبقات الزجاج على شاشات الهاتف من دون إلغاء الهوية البصرية. */
@media (max-width:480px) {
  .peer-profile-header,.settings-header,.list-header,.chat-header {
    -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%);
  }
}

/* ================= تفاعلات الرسائل المشفّرة — Telegram-like ================= */
#messages li { position: relative; }
.message-reactions {
  display:flex; flex-wrap:wrap; align-items:center; gap:.24rem; min-inline-size:0;
  max-inline-size:100%; margin-block-start:.34rem; overflow:visible; direction:ltr;
  unicode-bidi:isolate; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.reaction-chip {
  min-inline-size:44px; min-block-size:40px; display:inline-flex; align-items:center; justify-content:center; gap:.22rem;
  padding:.2rem .5rem; border:1px solid color-mix(in srgb,var(--theme-border,rgba(255,255,255,.14)) 82%,transparent);
  border-radius:999px; color:var(--theme-text,var(--fg)); background:color-mix(in srgb,var(--theme-surface,#18222e) 88%,transparent);
  box-shadow:0 2px 8px rgba(0,0,0,.1); font:inherit; line-height:1; cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; transition:transform .14s ease,border-color .14s ease,background .14s ease;
}
.reaction-chip .reaction-glyph { font-size:1.08rem; line-height:1; }
.reaction-chip .reaction-count { min-inline-size:.62rem; color:inherit; font:700 .74rem/1 system-ui,sans-serif; direction:ltr; }
.reaction-chip.mine {
  color:var(--theme-accent,var(--accent)); border-color:color-mix(in srgb,var(--theme-accent,var(--accent)) 48%,transparent);
  background:color-mix(in srgb,var(--theme-accent,var(--accent)) 18%,var(--theme-surface,#18222e));
}
#messages li.self .reaction-chip { color:var(--theme-out-text,#fff); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); }
#messages li.self .reaction-chip.mine { color:#fff; background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.5); }
.message-reactions.is-pending .reaction-chip.mine::after {
  content:""; inline-size:6px; block-size:6px; border-radius:50%; background:currentColor; opacity:.68;
  animation:reactionPending .85s ease-in-out infinite alternate;
}
.reaction-chip:active { transform:scale(.93); }
.reaction-burst {
  position:absolute; z-index:4; inset-inline-start:50%; inset-block-end:38%; pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.22)); font-size:2.45rem; line-height:1;
  animation:reactionBurst .68s cubic-bezier(.2,.8,.25,1) both;
}
.message-actions-trigger {
  position:absolute; z-index:2; inset-block-start:50%; inset-inline-end:calc(100% + .3rem); transform:translateY(-50%);
  inline-size:40px; block-size:40px; display:grid; place-items:center; padding:0; border:1px solid var(--theme-border,rgba(255,255,255,.12));
  border-radius:50%; color:var(--theme-muted,var(--muted)); background:var(--theme-surface,var(--card)); opacity:0; pointer-events:none;
  box-shadow:0 5px 16px rgba(0,0,0,.18); cursor:pointer;
}
#messages li.self .message-actions-trigger { inset-inline-end:auto; inset-inline-start:calc(100% + .3rem); }
#messages li:hover .message-actions-trigger,#messages li:focus-within .message-actions-trigger,
.message-actions-trigger:focus-visible { opacity:1; pointer-events:auto; }

.message-actions-sheet {
  max-block-size:min(82dvh,680px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:.72rem max(.72rem,env(safe-area-inset-right)) calc(.62rem + env(safe-area-inset-bottom)) max(.72rem,env(safe-area-inset-left));
}
.reaction-picker {
  display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:.42rem; padding:.24rem .15rem .65rem;
  border-bottom:1px solid var(--theme-border,rgba(255,255,255,.1));
}
.reaction-quick-picker { display:flex; gap:.28rem; min-inline-size:0; overflow-x:auto; scrollbar-width:none; overscroll-behavior-inline:contain; }
.reaction-quick-picker::-webkit-scrollbar { display:none; }
.reaction-pick-button,.reaction-more {
  flex:0 0 46px; inline-size:46px; block-size:46px; display:grid; place-items:center; padding:0;
  border:1px solid var(--theme-border,rgba(255,255,255,.12)); border-radius:15px; color:var(--theme-text,var(--fg));
  background:color-mix(in srgb,var(--theme-card,var(--card)) 88%,transparent); font:1.42rem/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.reaction-pick-button[aria-pressed="true"] {
  border-color:color-mix(in srgb,var(--theme-accent,var(--accent)) 58%,transparent);
  background:color-mix(in srgb,var(--theme-accent,var(--accent)) 20%,var(--theme-card,var(--card)));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent,var(--accent)) 12%,transparent);
}
.reaction-more { grid-column:2; grid-row:1; font-family:inherit; font-size:1.35rem; }
.reaction-full-picker {
  grid-column:1/-1; display:grid; grid-template-columns:repeat(6,minmax(42px,1fr)); gap:.32rem;
  padding-block-start:.18rem;
}
.reaction-full-picker.hidden { display:none; }
.reaction-full-picker .reaction-pick-button { inline-size:100%; }
.reaction-picker-hint { grid-column:1/-1; margin:0; color:var(--theme-muted,var(--muted)); font-size:.7rem; text-align:center; }
.message-action-list { display:grid; gap:.12rem; padding-block-start:.42rem; }

@keyframes reactionBurst {
  0% { opacity:0; transform:translate(50%,25%) scale(.35) rotate(-12deg); }
  44% { opacity:1; transform:translate(50%,-48%) scale(1.18) rotate(5deg); }
  100% { opacity:0; transform:translate(50%,-92%) scale(.82) rotate(0); }
}
@keyframes reactionPending { to { opacity:.2; transform:scale(.62); } }
@media (prefers-reduced-motion:reduce) {
  .reaction-chip,.reaction-burst { transition:none; animation:none; }
  .message-reactions.is-pending .reaction-chip.mine::after { animation:none; }
}
@media (forced-colors:active) {
  .reaction-chip,.reaction-pick-button,.reaction-more,.message-actions-trigger { forced-color-adjust:auto; border:1px solid ButtonText; }
  .reaction-chip.mine,.reaction-pick-button[aria-pressed="true"] { outline:2px solid Highlight; }
}
@media (hover:none),(pointer:coarse) {
  .message-actions-trigger { display:none; }
}
@media (max-width:350px) {
  .reaction-full-picker { grid-template-columns:repeat(5,minmax(42px,1fr)); }
}