/* هوية هدى ديستنيشن — مأخوذة من شعارها وموقعها hudadestination.com
   العاجي: خلفية الشعار · القرمزي: حرفا HD · العنابي والنبيذي: ألوان الموقع · الوردي المغبّر · خط ذهبي رفيع */
:root{
  --ivory:#f6efe8;        /* خلفية الشعار #F0E8E0 مفتوحة قليلاً */
  --ivory-deep:#efe4da;
  --paper:#fffdfb;
  --blush:#f1d1d1;        /* وردي الموقع */
  --rose:#d7c2c2;         /* الوردي المغبّر */
  --crimson:#9a2f3c;      /* حرفا الشعار */
  --maroon:#800000;       /* العنابي الأساسي في الموقع */
  --wine:#521b25;         /* النبيذي (sub-primary) */
  --gold:#c3a274;         /* حلقة الشعار وخطّه */
  --ink:#363636;          /* لون نص الموقع */
  --muted:#8c7b78;
  --ok:#5aa788;           /* لون النجاح في الموقع */
  --font:'Tajawal',system-ui,sans-serif;
  --serif:'Bodoni Moda','Didot',Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ivory);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
.app{height:100dvh;max-width:720px;margin:0 auto;display:flex;flex-direction:column;background:var(--ivory)}

/* الترويسة */
.top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--rose);position:relative}
.top::after{content:"";position:absolute;inset-inline:16px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.logo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--gold);flex-shrink:0;background:var(--ivory)}
.who h1{font-size:17px;font-weight:800;color:var(--wine);line-height:1.3;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.who h1 .latin{font-family:var(--serif);font-weight:500;font-style:italic;font-size:13px;color:var(--crimson);letter-spacing:.04em}
.who p{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}

.banner{background:var(--blush);color:var(--wine);font-size:13.5px;font-weight:500;text-align:center;padding:8px 16px;border-bottom:1px solid var(--rose)}

/* افتتاحية بهوية الشعار */
.intro{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 10px}
.intro img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid var(--gold);box-shadow:0 6px 24px rgba(82,27,37,.10)}
.tagline-ar{font-size:15px;color:var(--maroon);font-weight:700}
.ornament{display:flex;align-items:center;gap:8px;width:150px}
.ornament span{flex:1;height:5px;border-top:1px solid var(--maroon);border-bottom:1px solid var(--maroon)}
.ornament i{width:9px;height:9px;border:1px solid var(--maroon);transform:rotate(45deg);flex-shrink:0}

/* الرسائل */
.thread{flex:1;overflow-y:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{display:flex}
.msg.customer{justify-content:flex-start}
.msg.assistant,.msg.staff{justify-content:flex-end}
.bubble{max-width:86%;padding:11px 15px;border-radius:18px;font-size:15.5px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.customer .bubble{background:var(--wine);color:#fff;border-start-start-radius:6px}
.msg.assistant .bubble{background:var(--paper);color:var(--ink);border:1px solid var(--rose);border-start-end-radius:6px;box-shadow:0 1px 0 rgba(82,27,37,.04)}
.msg.staff .bubble{background:var(--blush);color:var(--ink);border:1px solid var(--crimson);border-start-end-radius:6px}
.tagline{display:block;font-size:11.5px;color:var(--crimson);font-weight:800;margin-bottom:2px}
.bubble a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
.msg.customer .bubble a{color:#fff}
.note{align-self:center;font-size:12.5px;color:var(--wine);background:var(--paper);border:1px solid var(--rose);border-radius:999px;padding:4px 12px}
.typing .bubble{display:flex;gap:4px;align-items:center;min-height:44px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--rose);animation:blink 1.2s infinite both}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.35}40%{opacity:1;background:var(--crimson)}}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding-top:2px}
.chips button{font:inherit;font-size:14px;font-weight:500;background:var(--paper);color:var(--maroon);border:1px solid var(--maroon);border-radius:999px;padding:7px 15px;cursor:pointer;min-height:38px;transition:background .15s,color .15s}
.chips button:hover{background:var(--blush)}
.chips button:active{background:var(--maroon);color:#fff}

/* الكتابة */
.composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;background:var(--paper);border-top:1px solid var(--rose)}
.composer textarea{flex:1;resize:none;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:var(--ivory);border:1px solid var(--rose);border-radius:22px;padding:10px 16px;max-height:140px;outline:none}
.composer textarea:focus{border-color:var(--crimson)}
.composer textarea::placeholder{color:var(--muted)}
.composer button{width:44px;height:44px;border-radius:50%;border:0;background:var(--maroon);color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .15s}
.composer button:hover{background:var(--wine)}
.composer button:disabled{opacity:.4;cursor:default}
.composer .attach{background:var(--paper);color:var(--maroon);border:1px solid var(--rose)}
.composer .attach:hover{background:var(--blush)}
.privacy{font-size:11.5px;color:var(--muted);text-align:center;padding:0 16px calc(8px + env(safe-area-inset-bottom));background:var(--paper)}

/* صورة العميلة داخل المحادثة */
.bubble .photo{display:block;max-width:220px;max-height:260px;border-radius:12px;margin-bottom:4px}
.photo-ph{display:inline-flex;align-items:center;gap:6px;opacity:.9}

/* نافذة الموافقة على الصورة */
.sheet{border:0;padding:0;margin:auto auto 0;width:min(560px,100%);max-width:100%;border-radius:22px 22px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -10px 40px rgba(82,27,37,.18)}
.sheet::backdrop{background:rgba(42,20,24,.45)}
.sheet form{display:flex;flex-direction:column;gap:12px;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
.sheet-preview{width:100%;max-height:220px;object-fit:contain;border-radius:14px;background:var(--ivory);border:1px solid var(--rose)}
.sheet h2{font-size:17px;color:var(--wine)}
.sheet ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.sheet li{padding-inline-start:18px;position:relative;line-height:1.7}
.sheet li::before{content:"";position:absolute;inset-inline-start:2px;top:.8em;width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--maroon)}
.sheet strong{color:var(--maroon)}
.sheet textarea{font:inherit;font-size:16px;border:1px solid var(--rose);border-radius:14px;padding:10px 14px;background:var(--ivory);color:var(--ink);resize:none}
.sheet-actions{display:flex;gap:8px}
.sheet-actions button{flex:1;font:inherit;font-size:15px;font-weight:700;border-radius:999px;padding:11px;cursor:pointer}
.sheet-actions .primary{background:var(--maroon);color:#fff;border:0}
.sheet-actions .ghost{background:var(--paper);color:var(--maroon);border:1px solid var(--maroon)}