/* ================================================================
   دردشتي — واجهة عربية مستوحاة من واتساب أندرويد
   ================================================================ */

*,*::before,*::after{ box-sizing: border-box; }

:root{
  --g900:#075E54;
  --g700:#128C7E;
  --g500:#25D366;
  --g50:#DCF8C6;

  --headbg:#075E54;
  --headfg:#FFFFFF;

  --chat-bg:#ECE5DD;
  --surface:#FFFFFF;
  --surface-2:#F0F2F5;
  --surface-3:#F7F8FA;

  --text:#111B21;
  --text-2:#667781;
  --line:#E4E7EA;

  --out:#DCF8C6;
  --in:#FFFFFF;
  --bubble-fg:#111B21;
  --meta-fg:#6B7C85;

  --note-bg:#FFF3D0;
  --note-fg:#5C4A16;
  --date-bg:#FFFFFF;
  --date-fg:#54656F;

  --danger:#D93B3B;
  --shadow-1:0 1px 1.5px rgba(0,0,0,.10);
  --shadow-2:0 10px 34px rgba(0,0,0,.20);

  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M60 8 112 60 60 112 8 60Z'/%3E%3Ccircle cx='60' cy='60' r='23'/%3E%3Cpath d='M8 60h104M60 8v104'/%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='120' cy='0' r='16'/%3E%3Ccircle cx='0' cy='120' r='16'/%3E%3Ccircle cx='120' cy='120' r='16'/%3E%3C/g%3E%3C/svg%3E");
}

[data-theme="dark"]{
  --headbg:#1F2C34;
  --headfg:#E9EDEF;

  --chat-bg:#0B141A;
  --surface:#111B21;
  --surface-2:#1F2C34;
  --surface-3:#182229;

  --text:#E9EDEF;
  --text-2:#8696A0;
  --line:#22303A;

  --out:#005C4B;
  --in:#202C33;
  --bubble-fg:#E9EDEF;
  --meta-fg:#8FAAB6;

  --note-bg:#182229;
  --note-fg:#FFD279;
  --date-bg:#182229;
  --date-fg:#8696A0;

  --danger:#F27C7C;
  --shadow-1:0 1px 1.5px rgba(0,0,0,.45);
  --shadow-2:0 10px 34px rgba(0,0,0,.55);

  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M60 8 112 60 60 112 8 60Z'/%3E%3Ccircle cx='60' cy='60' r='23'/%3E%3Cpath d='M8 60h104M60 8v104'/%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='120' cy='0' r='16'/%3E%3Ccircle cx='0' cy='120' r='16'/%3E%3Ccircle cx='120' cy='120' r='16'/%3E%3C/g%3E%3C/svg%3E");
}

[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size:16px;
  line-height:1.5;
  background:var(--surface);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

button{ font-family:inherit; cursor:pointer; }
input,textarea{ font-family:inherit; }
h1,h2,h3{ font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic',system-ui,sans-serif; }

/* ---------------- أزرار الأيقونات ---------------- */
.iconbtn{
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:transparent;color:var(--text-2);
  transition:background .15s ease, transform .1s ease;
}
.iconbtn:active{ transform:scale(.92); }
.iconbtn.on-green{ color:var(--headfg); }
.iconbtn.on-green:active{ background:rgba(255,255,255,.14); }
.iconbtn.grey{ color:var(--text-2); }
.iconbtn.grey:active{ background:var(--surface-2); }
.iconbtn:focus-visible{ outline:2px solid var(--g500); outline-offset:2px; }

/* ---------------- الصورة الرمزية ---------------- */
.avatar{
  width:50px;height:50px;flex:0 0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--c,#128C7E);
  color:#fff;
  font-weight:600;font-size:18px;
  letter-spacing:0;
  box-shadow:inset 0 -14px 22px rgba(0,0,0,.10);
  overflow:hidden;
}
.avatar-sm{ width:38px;height:38px;font-size:14px; }

/* ================================================================
   بوابة الهواتف
   ================================================================ */
.gate{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:28px 22px;
  background:linear-gradient(165deg,#0A4B44 0%, #075E54 52%, #0B6B60 100%);
  color:#fff;text-align:center;
}
.gate-inner{ max-width:360px; }
.gate-logo{
  position:relative;
  width:92px;height:92px;border-radius:28px;
  background:var(--g500);color:#fff;
  display:grid;place-items:center;
  margin:0 auto 22px;
  box-shadow:0 14px 36px rgba(0,0,0,.28);
}
.gate-ban{
  position:absolute;inset-inline-end:-6px;bottom:-6px;
  width:30px;height:30px;border-radius:50%;
  background:#fff;color:#B3261E;
  display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.gate h1{
  font-size:22px;margin:0 0 10px;line-height:1.5;color:#fff;
}
.gate p{
  margin:0 0 22px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.88);
}
.gate-note{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:9px 16px;
  font-size:13px;color:#fff;
}

/* ================================================================
   شاشة الدخول
   ================================================================ */
.auth{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:var(--headbg);
  background-image:var(--pattern);
  background-size:130px 130px;
  color:#fff;
  overflow-y:auto;
}
.auth-hero{
  padding:52px 24px 28px;
  text-align:center;
  flex:0 0 auto;
}
.auth-logo{
  width:86px;height:86px;border-radius:26px;
  background:var(--g500);color:#fff;
  display:grid;place-items:center;
  margin:0 auto 18px;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.auth-hero h1{
  margin:0 0 8px;font-size:30px;letter-spacing:0;color:#fff;
}
.auth-hero p{
  margin:0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.85);
}
.auth-card{
  flex:1 0 auto;
  background:var(--surface);
  color:var(--text);
  border-radius:26px 26px 0 0;
  padding:26px 20px 34px;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
.auth-note{
  display:flex;gap:8px;align-items:flex-start;
  margin:18px 2px 0;
  font-size:12px;line-height:1.7;
  color:var(--text-2);
}
.auth-note svg{ flex:0 0 auto; margin-top:3px; }

/* ---------------- الحقول ---------------- */
.field{ display:block; margin-bottom:16px; }
.field > span{
  display:block;font-size:13px;font-weight:500;
  color:var(--text-2);margin-bottom:7px;
}
.field input,.field textarea{
  width:100%;
  border:1px solid var(--line);
  background:var(--surface-3);
  color:var(--text);
  border-radius:12px;
  padding:13px 14px;
  font-size:16px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-2); opacity:.8; }
.field input:focus,.field textarea:focus{
  border-color:var(--g700);
  box-shadow:0 0 0 3px rgba(18,140,126,.16);
}
.field textarea{ min-height:96px; resize:vertical; line-height:1.6; }

.field-error{
  margin:0 0 14px;
  color:var(--danger);
  font-size:13px;
  line-height:1.6;
}

.btn-primary{
  width:100%;height:50px;
  border:0;border-radius:14px;
  background:var(--g500);
  color:#04291F;
  font-size:16px;font-weight:700;
  transition:transform .1s ease, filter .15s ease;
}
.btn-primary:active{ transform:scale(.985); filter:brightness(.95); }
.btn-primary:focus-visible{ outline:3px solid rgba(18,140,126,.5); outline-offset:2px; }

.btn-ghost{
  height:46px;padding:0 22px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--g700);
  font-size:15px;font-weight:600;
}
.btn-ghost:active{ background:var(--surface-2); }

/* ================================================================
   هيكل التطبيق
   ================================================================ */
.app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:var(--surface);
  color:var(--text);
}

/* ---------------- الشريط العلوي ---------------- */
.topbar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  background:var(--headbg);
  color:var(--headfg);
  padding:12px 10px 12px 8px;
  box-shadow:0 1px 4px rgba(0,0,0,.14);
  z-index:3;
}
.topbar-title{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:8px;
}
.topbar-title h1{
  margin:0;font-size:20px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--headfg);
}
.topbar-sub{
  font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.16);
  color:var(--headfg);
  flex:0 0 auto;
}
.topbar-actions{ display:flex;align-items:center;gap:2px;flex:0 0 auto; }

/* ---------------- البحث ---------------- */
.searchwrap{
  flex:0 0 auto;
  background:var(--headbg);
  padding:0 12px 12px;
}
.searchfield{
  display:flex;align-items:center;gap:8px;
  height:44px;
  background:var(--surface);
  border-radius:22px;
  padding:0 12px;
  box-shadow:var(--shadow-1);
}
.search-ico{ display:flex;color:var(--text-2);flex:0 0 auto; }
.searchfield input{
  flex:1;min-width:0;
  border:0;outline:none;background:transparent;
  color:var(--text);
  font-size:15px;
}
.searchfield input::placeholder{ color:var(--text-2); }
.searchfield .clear{
  border:0;background:transparent;color:var(--text-2);
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
}
.searchfield .clear:active{ background:var(--surface-2); }

/* ---------------- الحاويات ---------------- */
.views{ flex:1;min-height:0;position:relative;overflow:hidden; }
.view{
  position:absolute;inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);
  color:var(--text);
  padding-bottom:96px;
}

/* ---------------- صف المحادثة ---------------- */
.chat-row{
  display:flex;align-items:center;gap:14px;
  padding:10px 14px;
  background:var(--surface);
  color:var(--text);
  transition:background .12s ease;
}
.chat-row + .chat-row{ border-top:1px solid var(--line); }
.chat-row:active{ background:var(--surface-2); }
.chat-row:focus-visible{ outline:2px solid var(--g700); outline-offset:-3px; }

.row-main{ flex:1;min-width:0; }
.row-top{ display:flex;align-items:baseline;gap:8px; }
.row-name{
  flex:1;min-width:0;
  font-size:16px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row-time{ font-size:12px;color:var(--text-2);flex:0 0 auto; }
.row-bottom{
  display:flex;align-items:center;gap:8px;margin-top:2px;
}
.row-preview{
  flex:1;min-width:0;
  font-size:13.5px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:4px;
}
.row-preview .tick-inline{ color:var(--meta-fg);display:inline-flex;flex:0 0 auto; }
.row-badges{ display:flex;align-items:center;gap:6px;flex:0 0 auto; }
.mini{ display:inline-flex;color:var(--text-2); }
.badge{
  min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;
  background:var(--g500);color:#04291F;
  font-size:11.5px;font-weight:700;
  display:inline-grid;place-items:center;
}

/* ---------------- تلميح ---------------- */
.hint{
  display:flex;align-items:flex-start;gap:10px;
  margin:12px 14px 4px;
  padding:11px 12px;
  border-radius:12px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:12.5px;line-height:1.7;
}
.hint svg{ flex:0 0 auto; margin-top:2px; color:var(--g700); }
.hint p{ margin:0;flex:1; }
.hint-x{
  flex:0 0 auto;border:0;background:transparent;color:var(--text-2);
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
}

/* ---------------- الأرشفة ---------------- */
.archive-row{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:14px;
  border:0;background:var(--surface);color:var(--text);
  font-size:14.5px;font-weight:600;
  border-top:1px solid var(--line);
}
.archive-row:active{ background:var(--surface-2); }
.archive-row svg{ color:var(--g700); }
.archive-row .arch-lbl{ flex:1;text-align:start; }
.archive-row .arch-count{ font-size:12px;color:var(--text-2);font-weight:500; }

/* ---------------- الحالات الفارغة ---------------- */
.empty{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:56px 32px 24px;
  color:var(--text-2);
}
.empty-ico{
  width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);
  color:var(--g700);
  margin-bottom:18px;
}
.empty h3{
  margin:0 0 8px;font-size:16px;font-weight:700;color:var(--text);
}
.empty p{ margin:0 0 20px;font-size:13.5px;line-height:1.8;max-width:290px; }

/* ---------------- الحالة ---------------- */
.section-title{
  padding:16px 16px 8px;
  font-size:13px;font-weight:700;
  color:var(--g700);
  font-family:'Noto Kufi Arabic',sans-serif;
}
.section-title.small{ font-size:12px; }

.status-me{
  width:100%;
  display:flex;align-items:center;gap:14px;
  padding:10px 14px 16px;
  border:0;background:transparent;color:var(--text);
  text-align:start;
}
.status-ring{
  width:58px;height:58px;flex:0 0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  border:2px dashed var(--g700);
  padding:3px;
}
.status-ring .avatar{ width:48px;height:48px;font-size:16px; }
.status-info{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; }
.status-name{
  font-size:15px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.status-sub{ font-size:12.5px;color:var(--text-2); }
.status-add{
  width:36px;height:36px;border-radius:50%;
  background:var(--g500);color:#04291F;
  display:grid;place-items:center;flex:0 0 auto;
}
.status-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  border-top:1px solid var(--line);
}
.status-dot{
  width:44px;height:44px;border-radius:50%;
  flex:0 0 auto;
  background:var(--g700);
  box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 6px var(--g500);
}
.empty-note{
  display:flex;gap:10px;align-items:flex-start;
  margin:20px 14px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:12.5px;line-height:1.75;
}
.empty-note svg{ flex:0 0 auto;margin-top:2px;color:var(--g700); }
.empty-note p{ margin:0; }

/* ---------------- الشريط السفلي ---------------- */
.bottomnav{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-around;
  height:66px;
  padding:6px 8px;
  background:var(--surface);
  color:var(--text-2);
  border-top:1px solid var(--line);
  z-index:4;
}
.navbtn{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:0;background:transparent;
  color:var(--text-2);
  font-size:11px;font-weight:600;
  padding:4px 0;
}
.nav-ico{
  width:54px;height:28px;border-radius:14px;
  display:grid;place-items:center;
  transition:background .18s ease, color .18s ease;
}
.navbtn.is-active{ color:var(--g700); }
.navbtn.is-active .nav-ico{ background:var(--g700); color:#fff; }
.nav-lbl{ font-size:11px; }

/* ---------------- الزر العائم ---------------- */
.fab{
  position:absolute;
  inset-inline-end:16px;
  bottom:82px;
  width:56px;height:56px;
  border:0;border-radius:18px;
  background:var(--g500);
  color:#04291F;
  display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.24);
  z-index:5;
  transition:transform .12s ease;
}
.fab:active{ transform:scale(.93); }

/* ================================================================
   شاشة الدردشة
   ================================================================ */
.chatscreen{
  position:fixed;inset:0;z-index:20;
  display:flex;flex-direction:column;
  background:var(--chat-bg);
  color:var(--text);
}
.chatbar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:4px;
  padding:8px 6px;
  background:var(--headbg);
  color:var(--headfg);
  box-shadow:0 1px 4px rgba(0,0,0,.16);
  z-index:3;
}
.chattitle{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:10px;
  border:0;background:transparent;color:var(--headfg);
  padding:4px;border-radius:10px;
  text-align:start;
}
.chattitle:active{ background:rgba(255,255,255,.12); }
.chattitle-text{ display:flex;flex-direction:column;min-width:0;flex:1; }
.chatname{
  font-size:15.5px;font-weight:600;color:var(--headfg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chatemail{
  font-size:11.5px;color:rgba(255,255,255,.78);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chatbar-actions{ display:flex;align-items:center;gap:2px;flex:0 0 auto; }

.chatbody{
  flex:1;min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 8px 14px;
  background-color:var(--chat-bg);
  background-image:var(--pattern);
  background-size:118px 118px;
}

/* ---------------- شرائح النظام والتاريخ ---------------- */
.sysnote,.datechip{
  display:flex;justify-content:center;
  margin:2px 0 14px;
}
.sysnote > span,.datechip > span{
  max-width:88%;
  padding:6px 12px;
  border-radius:8px;
  font-size:11.5px;line-height:1.7;
  text-align:center;
  box-shadow:var(--shadow-1);
}
.sysnote > span{ background:var(--note-bg); color:var(--note-fg); }
.datechip > span{ background:var(--date-bg); color:var(--date-fg); font-weight:600; }
.datechip{ margin:14px 0 12px; }

/* ---------------- الفقاعات ---------------- */
.msg{ display:flex; margin-bottom:6px; padding:0 2px; }
.msg.in{ justify-content:flex-start; }
.msg.out{ justify-content:flex-end; }

.bubble{
  position:relative;
  max-width:80%;
  padding:6px 10px 7px;
  border-radius:8px;
  box-shadow:var(--shadow-1);
  font-size:15px;line-height:1.5;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  background:var(--in);
  color:var(--bubble-fg);
}
.msg.out .bubble{ background:var(--out); }
.bubble::after{ content:'';display:block;clear:both; }

.msg.out .bubble::before{
  content:'';position:absolute;top:0;inset-inline-start:-7px;
  width:8px;height:13px;
  background:var(--out);
  clip-path:polygon(100% 0, 100% 100%, 0 0);
}
.msg.in .bubble::before{
  content:'';position:absolute;top:0;inset-inline-end:-7px;
  width:8px;height:13px;
  background:var(--in);
  clip-path:polygon(0 0, 0 100%, 100% 0);
}

.bubble .txt{ user-select:text; }
.bubble .meta{
  display:inline-flex;align-items:center;gap:3px;
  float:left;
  margin:6px 6px -2px 0;
  font-size:10.5px;
  color:var(--meta-fg);
}
.msg.in .bubble .meta{ float:right; margin:6px 0 -2px 6px; }
.tick{ display:inline-flex;color:var(--meta-fg); }

.msg.enter{ animation:bubbleIn .18s ease-out; }
@keyframes bubbleIn{
  from{ transform:translateY(6px) scale(.97); opacity:0; }
  to{ transform:none; opacity:1; }
}

/* ---------------- لوحة الإيموجي ---------------- */
.emojipanel{
  position:absolute;
  inset-inline:0;bottom:66px;
  height:250px;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:2px;
  padding:10px;
  background:var(--surface);
  color:var(--text);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(0,0,0,.14);
  z-index:6;
}
.emoji{
  border:0;background:transparent;
  font-size:24px;line-height:1;
  height:40px;border-radius:8px;
  display:grid;place-items:center;
}
.emoji:active{ background:var(--surface-2); }

/* ---------------- شريط الكتابة ---------------- */
.composer{
  flex:0 0 auto;
  display:flex;align-items:flex-end;gap:6px;
  padding:8px 8px;
  background:var(--surface-2);
  color:var(--text);
  border-top:1px solid var(--line);
  z-index:7;
}
.composer textarea{
  flex:1;min-width:0;
  min-height:44px;max-height:110px;
  resize:none;
  border:0;border-radius:22px;
  background:var(--surface);
  color:var(--text);
  padding:11px 16px;
  font-size:15px;line-height:1.45;
  outline:none;
}
.composer textarea::placeholder{ color:var(--text-2); }
.sendbtn{
  width:46px;height:46px;flex:0 0 auto;
  border:0;border-radius:50%;
  background:var(--g500);color:#04291F;
  display:grid;place-items:center;
  transition:transform .1s ease, opacity .15s ease;
}
.sendbtn:active{ transform:scale(.92); }
.sendbtn.dim{ opacity:.45; }

/* ================================================================
   اللوحات المنبثقة
   ================================================================ */
.overlay{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.46);
}
.sheet{
  width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto;
  background:var(--surface);
  color:var(--text);
  border-radius:18px 18px 0 0;
  padding:18px 16px calc(20px + 0px);
  box-shadow:var(--shadow-2);
  animation:sheetUp .22s ease-out;
  position:relative;
}
@keyframes sheetUp{
  from{ transform:translateY(26px); opacity:.5; }
  to{ transform:none; opacity:1; }
}
.sheet-close{
  position:absolute;top:10px;inset-inline-start:10px;
  width:34px;height:34px;border-radius:50%;
  border:0;background:var(--surface-2);color:var(--text-2);
  display:grid;place-items:center;
}
.sheet-head{ padding:0 0 12px; padding-inline-start:44px; }
.sheet-head h2{
  margin:0;font-size:16.5px;font-weight:700;color:var(--text);
  line-height:1.5;
}
.sheet-head p{
  margin:4px 0 0;font-size:13px;line-height:1.7;color:var(--text-2);
}
.sheet-body{ padding:4px 0 6px; }
.sheet-actions{ display:flex;flex-direction:column; }
.sheet-item{
  display:flex;align-items:center;gap:14px;
  width:100%;
  border:0;background:transparent;color:var(--text);
  padding:14px 8px;
  border-radius:12px;
  font-size:15px;text-align:start;
}
.sheet-item svg{ color:var(--text-2);flex:0 0 auto; }
.sheet-item:active{ background:var(--surface-2); }
.sheet-item.danger{ color:var(--danger); }
.sheet-item.danger svg{ color:var(--danger); }

.disclosure{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--note-bg);
  color:var(--note-fg);
  font-size:12px;line-height:1.75;
}
.disclosure svg{ flex:0 0 auto;margin-top:2px; }

.settings-row{
  display:flex;align-items:center;gap:14px;
  width:100%;
  border:0;background:transparent;color:var(--text);
  padding:14px 8px;
  border-radius:12px;
  font-size:15px;text-align:start;
}
.settings-row:active{ background:var(--surface-2); }
.settings-row svg{ color:var(--text-2);flex:0 0 auto; }
.settings-row .sr-label{ flex:1; }
.settings-row .sr-sub{ display:block;font-size:12px;color:var(--text-2);margin-top:2px; }

.switch{
  width:46px;height:26px;border-radius:13px;
  background:var(--line);
  position:relative;flex:0 0 auto;
  transition:background .18s ease;
}
.switch::after{
  content:'';position:absolute;top:3px;inset-inline-start:3px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s ease;
}
.switch.on{ background:var(--g500); }
.switch.on::after{ transform:translateX(-20px); }
[dir="rtl"] .switch.on::after{ transform:translateX(-20px); }

.swatches{ display:flex;flex-wrap:wrap;gap:10px;padding-top:2px; }
.swatch{
  width:38px;height:38px;border-radius:50%;
  border:2px solid transparent;
  background:var(--c,#128C7E);
  position:relative;
}
.swatch.sel{ border-color:var(--text); }
.swatch.sel::after{
  content:'';position:absolute;inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 0 3px var(--surface);
}

.profile-head{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:6px 0 18px;
}
.profile-head .avatar{ width:78px;height:78px;font-size:26px; }

.kv{
  display:flex;justify-content:space-between;gap:12px;
  padding:11px 4px;
  border-top:1px solid var(--line);
  font-size:13.5px;
}
.kv span:first-child{ color:var(--text-2); }
.kv span:last-child{ color:var(--text); font-weight:600; }

/* ---------------- التوست ---------------- */
.toast{
  position:fixed;z-index:200;
  left:50%;bottom:88px;
  transform:translateX(-50%);
  max-width:80vw;
  padding:11px 18px;
  border-radius:999px;
  background:#1F2C34;color:#fff;
  font-size:13px;line-height:1.5;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  animation:toastIn .18s ease-out;
  pointer-events:none;
}
@keyframes toastIn{
  from{ transform:translateX(-50%) translateY(10px); opacity:0; }
  to{ transform:translateX(-50%) translateY(0); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

@media (min-width:520px){
  .toast{ bottom:100px; }
}