:root {
  --bubble-ai: linear-gradient(120deg, #6746ef 50%, #2d365e 100%);
  --bubble-user: linear-gradient(120deg, #27dbb6 30%, #09877b 100%);
  --bubble-border-ai: #cebaff3c;
  --bubble-border-user: #7be8d766;
  --gold: #D4AF37;
  --header-h: 80px;
}
html, body { height: 100%; }
body {
  background: url('/ai-chat/assets/bg.png') no-repeat center center fixed, linear-gradient(120deg, #181825 60%, #222b39 100%);
  background-size: cover;
  color: #e2e2e2;
  font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
  margin: 0; padding: 0;
  direction: rtl;
  height: 100vh;
  min-height: 100vh;
  /* Smooth font */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

/* ===== رأس الصفحة =========================================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);padding:0 20px;
  display:flex;align-items:center;gap:20px;
  background:rgba(37,35,54,.23);
  border-bottom:1.5px solid rgba(255,255,255,.08);
  border-radius:0 0 22px 22px;
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 2px 12px #0001;
}
.logo{
  width:140px;height:140px;object-fit:contain;
  background:transparent!important;border:none!important;box-shadow:none!important;
}
.header-brand{display:none;}             /* إخفاء النص */

.logout-btn{
  margin-inline-start:auto;
  display:flex;align-items:center;gap:6px;
  padding:12px 28px;
  font:700 0.8rem/1 'Cairo',sans-serif;
  color:#252336;
  background:linear-gradient(120deg,#ffeab5 0%,var(--gold) 100%);
  border:none;border-radius:22px;text-decoration:none;
  box-shadow:0 2px 8px #0002;
  transition:transform .16s,box-shadow .16s;
}
.logout-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0004;}

/* ==== عنوان مركزي داخل الهيدر ==== */
.header{ position:fixed; /* موجودة مسبقاً، تذكير */ }

.page-title{
  position:absolute;           /* يخرجه من تدفّق Flex */
  top:50%; left:50%;
  transform:translate(-50%,-50%);  /* محور X و Y معاً */
  font-size:clamp(1.5rem,5vw,3rem);
  color:var(--gold);
  font-weight:800;
  letter-spacing:1.2px;
  margin:0;                    /* ألغِ هوامش H1 الافتراضية */
  pointer-events:none;         /* لا يعيق النقر على العناصر حوله */
  z-index:10;                  /* فوق عناصر الهيدر الأخرى */
}


.chat-page {
  width: 100vw;
  display: flex; flex-direction: column; align-items: center;
  margin: 0;
  background: transparent;
  padding-top: var(--header-h);
  box-sizing: border-box;
  height: calc(var(--vh, 1vh) * 100);
min-height: calc(var(--vh, 1vh) * 100);

  /* Force stacking context for iOS Keyboard! */
  position: relative;
  overflow: hidden;
}
.wrapper {
  width: 100vw;
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center;
  height: calc(100vh - var(--header-h) - 78px);
  min-height: 0;
  margin: 0; padding: 0;
  box-sizing: border-box;
  position: relative;
}
.chat-bubbles {
  width: 100vw; max-width: 100vw;
  height: 100%;
  margin: 0 auto; padding: 20px 0 16px 0;
  border-radius: 28px;
  overflow-y: auto;
  list-style: none;
  display: flex; flex-direction: column; gap: 18px;
  scroll-behavior: smooth;
  background: none;
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.chat-bubbles::-webkit-scrollbar { display: none; }
.chat-bubbles { scrollbar-width: none; }

.chat-bubbles li.user {
  direction: rtl; display: flex; flex-direction: row-reverse;
  justify-content: flex-end; align-items: flex-end; width: 100%;
  margin-bottom: 2px;
  animation: fadein-msg 0.8s;
}
.chat-bubbles li.user .bubble {
  direction: rtl; display: flex; flex-direction: row;
  align-items: flex-start; gap: 7px;
}
.chat-bubbles li.user .avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 1px 6px #0003;
  background: #e3f9f6; border: 2px solid var(--bubble-border-user);
  margin: 2px;
  align-self: flex-end;
  aspect-ratio: 1/1;
}
.chat-bubbles li.user span {
  background: var(--bubble-user);
  color: #fff;
  border-radius: 20px 8px 20px 20px;
  box-shadow: 0 1px 8px #16182328;
  padding: clamp(10px, 3vw, 18px) clamp(18px, 5vw, 34px);
  font-size: clamp(1rem, 2.7vw, 1.32rem);
  min-width: 60px;
  max-width: 630px;
  text-align: right;
  display: block;
  unicode-bidi: plaintext;
  border: 1.7px solid var(--bubble-border-user);
  background-clip: padding-box;
  word-break: break-word;
  animation: upfade 0.4s;
  transition: background 0.2s;
  backdrop-filter: blur(9px) saturate(110%);
}
.chat-bubbles li.ai {
  direction: ltr; display: flex; flex-direction: row;
  justify-content: flex-start; align-items: flex-start; width: 100%;
  margin-bottom: 2px;
  animation: fadein-msg 0.8s;
}
.chat-bubbles li.ai .bubble {
  direction: ltr; display: flex; flex-direction: row;
  align-items: flex-start; gap: 7px;
}
.chat-bubbles li.ai .avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 1px 6px #0003;
  background: #fff8ee; border: 2px solid var(--bubble-border-ai);
  margin: 0 12px 0 0; align-self: flex-start;
  aspect-ratio: 1/1;
}
.chat-bubbles li.ai span {
  background: var(--bubble-ai);
  color: #fff;
  border-radius: 8px 20px 20px 20px;
  box-shadow: 0 1px 8px #ffdba622;
  padding: clamp(10px, 3vw, 18px) clamp(18px, 5vw, 34px);
  font-size: clamp(1.12rem, 2.7vw, 1.32rem);
  min-width: 60px;
  max-width: 630px;
  text-align: left;
  display: block;
  unicode-bidi: plaintext;
  border: 1.7px solid var(--bubble-border-ai);
  background-clip: padding-box;
  word-break: break-word;
  animation: upfade 0.4s;
  transition: background 0.2s;
  backdrop-filter: blur(9px) saturate(110%);
}
@keyframes upfade {
  0% { opacity: 0; transform: translateY(20px);}
  100% { opacity: 1; transform: none;}
}
@keyframes fadein-msg {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
.typing-dot {
  opacity: 0.8; font-style: italic;
  font-size: 1.1em;
  letter-spacing: 1.7px;
  display: flex; gap: 4px;
}
.typing-dot span {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ffdba6;
  margin: 0 2px;
  opacity: 0.5;
  animation: bounceDot 1.2s infinite;
}
.typing-dot span:nth-child(2) {animation-delay: 0.24s;}
.typing-dot span:nth-child(3) {animation-delay: 0.48s;}
@keyframes bounceDot {
  0%, 80%, 100% { transform: scale(1);}
  40% { transform: scale(1.5);}
}
/* ====== فورم الكتابة الثابت أسفل الشاشة ====== */
.fixed-form{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  width:100vw;  background:rgba(37,35,54,.23);
  border-top:1px solid #ffdba61a;
  backdrop-filter:blur(8px);
  padding:10px 0 14px;
  box-sizing:border-box;
}
.input-container{
  max-width:900px;width:100%;margin:0 auto;
  position:relative;display:flex;align-items:center;
  gap:16px;                       /* مسافة واضحة بين الحقل والزر */
}

/* ===== حقل الرسالة ===== */
#message-input, input[name="message"]{
  flex:1 1 auto;width:100%;
  font-size:clamp(1.05rem,2.3vw,1.2rem);
  background:#181a1e;var(--gold);
  border:2px solid #D4AF37;border-radius:20px;
  padding:16px 20px;
  transition:border .2s,box-shadow .2s;
  box-shadow:0 1px 8px #18182514;
  color: #fff;
}
#message-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #D4AF37;}

/* ===== زر الإرسال (ذهبي) ===== */
#send-btn{
  flex-shrink:0;
  width:60px;height:60px;                    /* حجم افتراضي */
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;line-height:0;              /* للأيقونة النصية أو SVG */
  color:#252336;
  background:linear-gradient(140deg,#ffeab5 0%,#d4af37 100%);
  border:none;border-radius:50%;
  box-shadow:0 2px 12px #0003;
  cursor:pointer;user-select:none;outline:none;
  transition:transform .16s,box-shadow .16s;
}
#send-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0005;}
#send-btn:disabled{opacity:.4;pointer-events:none;}

/* بدلاً من “left:-10px” نستخدم **order** و gap */
.input-container{flex-direction:row-reverse;} /* لأجل RTL */
#send-btn{order:-1;}                           /* يظهر يسار الحقل في RTL */

/* ===== حجم أصغر على الموبايل ===== */
@media(max-width:480px){
  .input-container{gap:2px;}
  #send-btn{width:52px;height:52px;font-size:1.8rem;}
}

@keyframes ripple-anim {
  to {transform: scale(2.6); opacity: 0;}
}
/* Responsive */
@media (max-width: 900px) {
  .input-container {max-width: 99vw;}
  .chat-bubbles li.user span,
  .chat-bubbles li.ai span {max-width: 95vw;}
  .wrapper {height: calc(100vh - var(--header-h) - 78px);}
}
@media (max-width: 700px) {
  :root {--header-h: 55px;}
  .logo {height: 85px !important; width: 85px !important;}
  .header-brand {font-size: 1.32rem !important;}
}
@media (max-width: 480px) {
  :root {--header-h: 42px;}
  .logo {height: 85px !important; width: 85px !important;}
  .header-brand {font-size: 1.09rem !important;}
  .chat-bubbles li.user span,
  .chat-bubbles li.ai span {
    font-size: 0.9rem !important;
    padding: 12px 7px !important;
    max-width: 90vw !important;
  }
  .input-container {gap: 4px;}
  #send-btn {width: 39px;height:39px;}
}


/* ========== PATCH 2025-07-18 ========== */

/* مساحة داخلية خفيفة حول الأفاتار – يمنعه من لمس الحافة */
.chat-bubbles li.user .avatar { margin-right: 10px; }
.chat-bubbles li.ai   .avatar { margin-left:  10px; }


/* المكوّن (HTML) الموافق للرأس
-------------------------------------------------
<header class="header">
  <img src="/ai-chat/assets/logo.png" class="logo" alt="logo" />
  <a href="https://smoky-house.vip" class="logout-btn">خروج</a>
</header>
-------------------------------------------------*/

/* احتياط 120px أسفل قائمة الرسائل حتى لا تختبئ خلف الفورم */
:root       { --form-h: 78px; }
.chat-bubbles{ padding-bottom: calc(var(--form-h) + 30px); }

/* حوِّل زر الإرسال إلى عنصر Flex بدلاً من موضع مطلق
   لمنعه من الخروج عن حافة الشاشة في الأجهزة الضيّقة */
.input-container        { display: flex; align-items: center; }
#send-btn {
  position: static;          /* يلغي position:absolute السابق */
  transform: none;
  margin-inline-start: 6px;  /* مسافة يسار/يمين صغيرة */
  flex-shrink: 0;            /* لا يسمح بالانكماش */
}

/* التفاف مضمون لأي نص طويل داخل الفقاعة */
.chat-bubbles li.user span,
.chat-bubbles li.ai   span {
  white-space: pre-wrap;     /* يحافظ على الأسطر ويكسر عند الحاجة */
  word-break: break-word;
}

/* تحسين طفيف لحدّ أقصى لعرض الفقاعات في الشاشات الصغيرة */
@media (max-width: 480px) {
  .chat-bubbles li.user span,
  .chat-bubbles li.ai   span { max-width: 72vw !important; }
}

/* ========== PATCH 2025-07-18-B ========== */


/* تكييف الارتفاع على الشاشات الصغيرة */
@media (max-width: 700px) { :root { --header-h: 74px; } }
@media (max-width: 480px) {
  :root { --header-h: 66px; }
  .logo { width: 48px; height: 48px; }
}
/* ========== تقليل الفراغ بين الأفاتار وفقاعة AI على الموبايل ========== */
@media (max-width: 480px) {
  /* قلِّل هامش الأفاتار إلى 6px بدل 12px */
  .chat-bubbles li.ai .avatar {
    margin: 0 2px 0 0;
  }

  /* قلِّل الـ gap داخل .bubble من 7px إلى 4px */
  .chat-bubbles li.ai .bubble {
    gap: 4px;
  }
}