/* أوروك 7.13 — طبقة تنسيق موحّدة
   لا تستبدل المنطق؛ ترتّب المسافات، البطاقات، الخطوط، والحركة. */

:root {
  --p-space: 8px;
  --p-radius: 18px;
  --p-radius-sm: 14px;
  --p-pad: 12px;
  --p-shadow: 0 10px 28px rgba(20, 16, 10, 0.06);
  --p-shadow-d: 0 16px 40px rgba(0, 0, 0, 0.28);
}

html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { letter-spacing: 0.01em; }

/* ── رأس التطبيق والتبويبات ── */
.main-header { backdrop-filter: blur(18px); }
.main-header .app-title {
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 22px;
}
.main-header-top { padding: 10px 12px 4px; }
.tabs { padding: 0 6px; gap: 2px; }
.tab {
  border-radius: 12px 12px 0 0;
  font-size: 13px;
  padding: 10px 2px 12px;
}
.tab.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.tab-indicator { height: 2.5px; border-radius: 99px; }

/* ── قوائم المحادثات / القنوات / المكالمات ── */
.chat-list, #status-list, #calls-list, #my-channels-list, #discover-channels-list {
  padding: 6px 8px 8px;
}
.chat-row, .channel-row, .call-row {
  padding: 12px 12px;
  margin: 0 0 2px;
  border-radius: 16px;
  gap: 12px;
}
.chat-row:active, .channel-row:active, .call-row:active {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
}
.chat-avatar, .channel-row img, .call-row img {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--divider) 80%, transparent);
}
.chat-name { font-size: 15.5px; font-weight: 700; letter-spacing: 0.1px; }
.chat-last { font-size: 13px; opacity: 0.92; }
.unread-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* مجلدات المحادثات */
.ux-folders {
  padding: 8px 10px 10px;
  gap: 6px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.ux-folder { padding: 6px 12px; font-size: 12.5px; }

/* ── حالات فارغة ── */
.empty-state { padding: 52px 28px 40px; gap: 10px; }
.empty-state p { font-size: 16.5px; font-weight: 800; }
.empty-state span { font-size: 13.5px; line-height: 1.7; max-width: 280px; margin: 0 auto; }
.empty-illust { opacity: 0.9; margin-bottom: 4px; }

/* ── بحث ── */
.search-inline { padding: 10px 12px 12px; border-bottom: none; }
.search-inline input,
#main-search-bar input,
#ringtone-search {
  border-radius: 16px !important;
  padding: 11px 16px !important;
  font-size: 14.5px !important;
  background: var(--surface-2) !important;
}

/* ── الإعدادات كبطاقات مجمّعة ── */
.settings-list { padding: 8px 12px 32px; }
.settings-profile-row {
  margin: 8px 0 14px;
  padding: 16px 14px;
  border: 1px solid var(--ux-line, var(--divider));
  border-radius: 20px;
  background:
    radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--surface);
  border-bottom: 1px solid var(--ux-line, var(--divider));
}
.settings-profile-avatar {
  width: 62px;
  height: 62px;
  border-radius: 20px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}
.settings-profile-name { font-size: 17.5px; font-weight: 800; }
.settings-list .section-label {
  margin: 18px 6px 8px;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.settings-list .setting-row {
  padding: 13px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 80%, transparent);
  background: var(--surface);
  gap: 12px;
}
.settings-list .section-label + .setting-row,
.settings-list .settings-profile-row + .setting-row,
.settings-list .setting-row.hidden + .setting-row {
  border-radius: 16px 16px 0 0;
}
.settings-list .setting-row:has(+ .section-label),
.settings-list .setting-row:has(+ .app-version),
.settings-list .setting-row:last-child {
  border-radius: 0 0 16px 16px;
  border-bottom: none;
}
.settings-list .section-label + .setting-row:has(+ .section-label),
.settings-list .section-label + .setting-row:has(+ .app-version),
.settings-list .section-label + .setting-row:last-child {
  border-radius: 16px;
  border-bottom: none;
}
.setting-title { font-size: 15px; font-weight: 650; }
.setting-sub { font-size: 12px; line-height: 1.45; }
.setting-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
.app-version {
  text-align: center;
  margin: 22px 0 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.62;
}

/* ── شاشات فرعية ── */
.simple-header { padding: 8px 8px 10px; }
.simple-header h2 { font-size: 17.5px; font-weight: 800; letter-spacing: 0.2px; }

/* ── المحادثة ── */
.chat-header { padding: 8px 8px 8px 6px; }
.header-avatar { border-radius: 14px; }
.chat-header-name { font-weight: 800; }
.msg {
  padding: 8px 12px 8px;
  border-radius: 16px;
  line-height: 1.55;
  letter-spacing: 0.15px;
}
.msg.me { border-bottom-left-radius: 6px; }
.msg:not(.me) { border-bottom-right-radius: 6px; }
.composer {
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  gap: 8px;
}
.composer-field {
  border-radius: 22px !important;
  min-height: 44px;
}

/* ── أزرار وعناصر عامة ── */
.primary-btn, .google-btn, .auth-choice {
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.small-btn {
  border-radius: 12px;
  font-weight: 700;
}
.icon-btn { border-radius: 14px; }
.fab {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  left: 18px;
  bottom: calc(22px + env(safe-area-inset-bottom));
}

/* ── قوائم منسدلة وأوراق ── */
.dropdown {
  border-radius: 16px;
  padding: 6px;
  min-width: 210px;
  box-shadow: var(--p-shadow-d);
}
.dropdown button {
  border-radius: 10px;
  padding: 11px 12px;
  font-weight: 600;
}
.sheet {
  border-radius: 24px 24px 0 0;
  padding-top: 8px;
}
.sheet::before {
  width: 42px;
  height: 4px;
  border-radius: 99px;
  opacity: 0.45;
}
.app-toast {
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 600;
}

/* ── مكالمة واردة ── */
.incoming-banner {
  border-radius: 22px;
  padding: 14px;
  backdrop-filter: blur(16px);
}

/* ── استوديو النغمات ── */
.rt-studio { padding: 4px 0 36px; }
.rt-hero {
  margin: 8px 2px 10px;
  padding: 18px 16px 16px;
  border-radius: 22px;
}
.rt-hero h3 { font-size: 19px; line-height: 1.35; }
.rt-hero p:last-child { font-size: 13.5px; line-height: 1.7; }
.rt-chips { padding: 4px 2px 12px; }
.rt-group { margin: 14px 4px 6px; font-size: 12px; }
.rt-card {
  margin: 0 2px 8px;
  padding: 12px;
  border-radius: 18px;
}
.rt-title { font-size: 14.5px; }
.rt-play, .rt-use { min-height: 34px; }

/* ── تسجيل الدخول ── */
.login-brand { padding-top: 28px; }
.auth-welcome-title, .auth-pane-title { letter-spacing: 0.2px; }
.auth-choice { min-height: 52px; }

/* ── سطح المكتب ── */
@media (min-width: 860px) {
  .chat-row:hover, .channel-row:hover, .call-row:hover, .rt-card:hover, .setting-row:hover {
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  }
  .tab-pages, .settings-list, .rt-studio { max-width: 760px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-card.playing .rt-wave i,
  .msg, .empty-state:not(.hidden) { animation: none !important; }
}