:root {
  --app-height: 100vh; /* سيتم تحديثها بواسطة JS */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gap: 12px;
}

/* قواعد عامة */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  background: var(--bg-main, #fff);
}

/* تفضيل استخدام متغير --app-height بدلاً من 100vh مباشر */
.app-full {
  height: var(--app-height);
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
}

/* شات */
.chat-root {
  position: relative; /* لاحتواء composer المطلق */
  display: flex;
  flex-direction: column;
  height: var(--app-height);
  background: var(--bg-main, #fff);
  overflow: hidden;
}

.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--gap)) 12px  calc(var(--gap) + 56px);
}

/* composer في الأسفل، مطلق بالنسبة للحاوية */
.chat-composer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 0px);
  padding: 10px;
  background: var(--bg-surface, #fff);
  box-shadow: 0 -1px 6px rgba(0,0,0,0.06);
  z-index: 20;
}

/* إدخال */
.chat-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: var(--bg-main, #fff);
}

/* لمسات قابلة للمس */
button, .chat-input {
  touch-action: manipulation;
}

/* تجنب transform على الحاويات التي تحوي تمريراً (قد يسبب مشكلات مع لوحة المفاتيح) */
.no-transform-on-scroll, .no-transform-on-scroll * {
  transform: none !important;
  will-change: auto !important;
}

/* صور متجاوبة */
.responsive-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* تحسين لسطح المكتب */
@media (min-width: 800px) {
  .chat-root { max-width: 900px; margin: 0 auto; border-left:1px solid #f0f0f0; border-right:1px solid #f0f0f0; }
}

/* حالة عند فتح لوحة المفاتيح */
.chat-root.keyboard-open .chat-composer {
  box-shadow: 0 -1px 2px rgba(0,0,0,0.04);
}

/* قواعد إضافية مفيدة */
.hidden-visually { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* لا تستخدم 100vh مباشرة في أي عنصر آخر لتجنب تجاوزه على الهواتف */
:where(.avoid-100vh) { min-height: 0; }
.chat-sender-label{display:block;font-size:10px;font-weight:800;opacity:.72;margin-bottom:5px;letter-spacing:.1px}
.chat-msg-admin .chat-sender-label{color:var(--emerald-neon,#00e599)}
.chat-msg-bot .chat-sender-label{color:var(--text-muted,#8b949e)}