/* «شاهد كيف يعمل»: تطبيق رسايل فيه محادثة لكل مشروع من مشاريعنا */
.pm { position: relative; display: grid; grid-template-columns: 290px 1fr; height: min(680px, 78vh); min-height: 560px; background: #fff; color: #111; text-align: start; font-size: 15px; }

/* القايمة: محادثات المشاريع */
.pm-list { display: flex; flex-direction: column; min-height: 0; background: #f6f6f4; border-inline-end: 1px solid #ececea; }
.pm-list header { display: flex; align-items: center; justify-content: space-between; padding: 22px 20px 14px; }
.pm-list header b { font-size: 20px; font-weight: 750; letter-spacing: -.3px; }
.pm-list header small { color: #8a8a90; font-size: 12.5px; }
.pm-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.pm-row { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 16px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background .2s, box-shadow .2s; }
.pm-row:hover { background: #ffffffaa; }
.pm-row.on { background: #fff; box-shadow: 0 6px 18px #0000000f; }
.pm-ava { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #ddd; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e7e2f7; }
.pm-row.on .pm-ava { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f1b35c; }
.pm-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-row b { display: block; font-size: 15px; font-weight: 700; }
.pm-row span { display: block; margin-top: 2px; color: #85858c; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-row em { font-style: normal; font-size: 11px; color: #a3a3aa; align-self: start; margin-top: 4px; }
.pm-row .pm-dot { width: 9px; height: 9px; border-radius: 50%; background: #f1b35c; justify-self: end; }
.pm-new { margin: 6px 10px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 14px; border: 1.5px dashed #d8d2ea; color: #5b4bd6; font-weight: 650; text-decoration: none; transition: background .2s, border-color .2s; }
.pm-new:hover { background: #fff; border-color: #b9aef0; }

/* المحادثة */
.pm-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pm-head { display: flex; align-items: center; gap: 12px; padding: 14px clamp(16px, 3vw, 30px); border-bottom: 1px solid #f0f0ee; }
.pm-head .pm-ava { width: 40px; height: 40px; }
.pm-head b { display: block; font-size: 16px; font-weight: 750; }
.pm-head small { display: flex; align-items: center; gap: 6px; color: #8a8a90; font-size: 12.5px; }
.pm-head small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; }
.pm-open { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #111; color: #fff; font-size: 13.5px; font-weight: 650; text-decoration: none; transition: transform .2s; }
.pm-open:hover { transform: translateY(-1px); color: #fff; }
.pm-open[hidden] { display: none; }

/* المحادثة بشكل قريب من ChatGPT: عمود في النص، رد توب نت نص حر جنبه أيقونة، ورسالة العميل فقاعة رمادي فاتح */
.pm-thread { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 26px max(20px, calc((100% - 700px) / 2)) 30px; scroll-behavior: smooth; scrollbar-width: thin; background: #fff; }
.pm-day { align-self: center; padding: 4px 12px; border-radius: 999px; background: #f4f4f4; color: #8a8a90; font-size: 12px; }

.pm-you { align-self: flex-end; max-width: 78%; padding: 11px 18px; border-radius: 24px; background: #f2f2f2; color: #111; line-height: 1.75; animation: pm-in .3s ease-out both; }
.pm-you p { margin: 0; }

.pm-turn { display: flex; align-items: flex-start; gap: 14px; animation: pm-in .3s ease-out both; }
.pm-bot { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid #e6e6e6; box-shadow: 0 1px 2px #0000000d; }
.pm-bot svg { width: 19px; height: auto; color: #111; }
.pm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 4px; }
.pm-text { margin: 0; font-size: 15.5px; line-height: 1.9; color: #1d1d1f; }
.pm-think { display: inline-flex; gap: 4px; padding: 10px 0; }
.pm-think i { width: 8px; height: 8px; border-radius: 50%; background: #111; animation: pm-pulse 1.1s infinite ease-in-out; }
.pm-think i:nth-child(2) { animation-delay: .15s; } .pm-think i:nth-child(3) { animation-delay: .3s; }

/* صورة المشروع جوه الرد */
.pm-shot { width: min(100%, 460px); margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid #ececec; box-shadow: 0 14px 34px #0000000f; animation: pm-in .45s ease-out both; }
.pm-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pm-shot figcaption { padding: 9px 14px; font-size: 12.5px; color: #6b6b72; background: #fafafa; border-top: 1px solid #f0f0f0; }

/* شيبس المميزات */
.pm-tags { display: flex; flex-wrap: wrap; gap: 6px; animation: pm-in .4s both; }
.pm-tags span { padding: 6px 12px; border-radius: 999px; background: #f4f4f4; border: 1px solid #ececec; color: #333; font-size: 12.5px; font-weight: 600; }

/* كارت الرابط */
.pm-link { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; width: min(100%, 460px); padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; border: 1px solid #e6e6e6; color: #111; text-decoration: none; animation: pm-in .45s ease-out both; transition: background .2s, border-color .2s; }
.pm-link:hover { background: #f7f7f7; border-color: #d8d8d8; color: #111; }
.pm-link .pm-ava { width: 44px; height: 44px; border-radius: 10px; box-shadow: none; }
.pm-link b { display: block; font-size: 14.5px; }
.pm-link span { display: block; color: #6b6b72; font-size: 12.5px; direction: ltr; text-align: start; }
.pm-link i { font-style: normal; font-weight: 700; }

/* خانة الكتابة زي ChatGPT */
.pm-bar { display: flex; align-items: center; gap: 10px; width: min(calc(100% - 40px), 700px); margin: 0 auto 18px; padding: 10px 10px 10px 20px; border-radius: 28px; background: #f4f4f4; color: #8e8e93; text-decoration: none; box-shadow: 0 0 0 1px #ececec inset; transition: box-shadow .2s; }
.pm-bar:hover { box-shadow: 0 0 0 1px #d6d6d6 inset, 0 6px 18px #0000000d; color: #6e6e73; }
.pm-bar i { margin-inline-start: auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #111; color: #fff; font-style: normal; font-weight: 700; }

@keyframes pm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pm-pulse { 0%, 80%, 100% { transform: scale(.6); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pm-you, .pm-turn, .pm-shot, .pm-link, .pm-tags { animation: none; } .pm-thread { scroll-behavior: auto; } }

/* الجوال: القايمة تبقى شريط فوق المحادثة */
@media (max-width: 767px) {
  /* minmax(0, 1fr): the column is the screen's width, not the projects' row (640px laid end to end), which pushed the
     chat off the screen's left edge in portrait (the owner, 28 Oct 2026); that row scrolls inside it as it should */
  .pm { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 640px; min-height: 0; }
  .pm-list, .pm-chat { min-width: 0; }
  .pm-list { border-inline-end: 0; border-bottom: 1px solid #ececea; }
  .pm-list header, .pm-new, .pm-row div > span, .pm-row em, .pm-row .pm-dot { display: none; }
  .pm-rows { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 10px; gap: 6px; }
  .pm-row { grid-template-columns: 1fr; justify-items: center; gap: 6px; width: auto; min-width: 72px; padding: 8px; }
  .pm-row b { font-size: 12px; }
  .pm-you { max-width: 88%; }
}

/* رأس المحادثة: شعار توب نت وكلمة «متصل» بس */
.pm-head .pm-logo { width: 40px; height: 40px; }
.pm-head .pm-logo svg { width: 24px; color: #edb92c; }
.pm-head small { font-size: 13.5px; color: #555; }

/* ================= «شاهد كيف يعمل» بلمسة أجمل: لون لكل مشروع، خلفية تتحرك، وكلام ينساب ================= */
@property --acc { syntax: "<color>"; inherits: true; initial-value: #f1b35c; }
@property --pmp { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
#demo { --acc: #ff7a59; transition: --acc .9s ease; }
.pm { box-shadow: 0 0 0 1px #00000008; }

/* خلفية المحادثة: بقع ألوان ناعمة تتحرك مع كل رسالة، وفوقها رسومات خفيفة */
.pm-chat { position: relative; isolation: isolate; overflow: hidden; }
.pm-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #fbfaf8; }
.pm-wall i { position: absolute; width: 460px; height: 460px; border-radius: 50%; translate: -50% -50%; filter: blur(70px); transition: left 1.5s cubic-bezier(.3, 1.2, .4, 1), top 1.5s cubic-bezier(.3, 1.2, .4, 1), background .9s; }
.pm-wall i:nth-child(1) { background: color-mix(in srgb, var(--acc) 30%, transparent); }
.pm-wall i:nth-child(2) { background: #9fd0ff40; } .pm-wall i:nth-child(3) { background: #ffd9a840; }
.pm-wall::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 32l-9 9 9 9M42 32l9 9-9 9M35 28l-6 26'/%3E%3Crect x='112' y='18' width='24' height='42' rx='6'/%3E%3Cpath d='M120 52h8'/%3E%3Ccircle cx='44' cy='130' r='13'/%3E%3Cpath d='M38 130h12M44 124v12'/%3E%3Cpath d='M126 116l4 9 10 1-7 7 2 9-9-5-8 5 2-9-8-7 10-1z'/%3E%3Cpath d='M76 88c0-7 5-11 12-11 4 0 8 2 10 6 5 0 9 3 9 8s-4 8-9 8H84c-5 0-8-5-8-11z'/%3E%3Cpath d='M150 82h14M157 75v14'/%3E%3C/svg%3E") 0 0 / 180px 180px; }
.pm-thread { position: relative; z-index: 1; background: none; }
.pm-head { position: relative; z-index: 2; background: #ffffffd9; backdrop-filter: blur(14px); }
.pm-bar { position: relative; z-index: 2; }

/* رأس المحادثة: «يكتب…» بلون المشروع، والشعار يتوهّج */
.pm-head small { transition: color .3s; }
.pm-head.typing small { color: var(--acc); font-weight: 700; }
.pm-head.typing small::before { background: var(--acc); animation: pm-blink 1s infinite; }
.pm-head .pm-logo { transition: box-shadow .4s; }
.pm-head.typing .pm-logo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acc), 0 0 18px var(--acc); }
@keyframes pm-blink { 50% { opacity: .3; } }

/* القايمة: كل مشروع بلونه، حلقة مثل الستوري، ورقم الرسايل */
.pm-row { position: relative; transition: background .25s, box-shadow .25s, transform .25s; }
.pm-row:hover { transform: translateX(-3px); }
[dir="ltr"] .pm-row:hover { transform: translateX(3px); }
.pm-row .pm-ava { box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--acc) 55%, transparent); transition: box-shadow .3s, transform .3s; }
.pm-row:hover .pm-ava { transform: scale(1.06); }
.pm-row.on { box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--acc) 45%, transparent); }
.pm-row.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 4px; border-radius: 4px; background: var(--acc); }
.pm-row.on .pm-ava { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--acc); }
.pm-row .pm-dot { display: grid; place-items: center; min-width: 21px; width: auto; height: 21px; padding: 0 6px; border-radius: 99px; background: var(--acc); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; box-shadow: 0 3px 8px color-mix(in srgb, var(--acc) 50%, transparent); animation: pm-badge 2.4s ease-in-out infinite; }
@keyframes pm-badge { 50% { transform: scale(1.12); } }
.pm-row span.ty { color: var(--acc); font-weight: 700; }
/* الدائرة اللي تعدّ قبل ما ينتقل للمشروع الياي */
.pm-row.next::after { content: ""; position: absolute; inset-inline-start: 6px; top: calc(50% - 27px); width: 54px; height: 54px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--acc) var(--pmp), transparent 0); -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 89%); mask: radial-gradient(closest-side, transparent 86%, #000 89%); animation: pm-count 4.5s linear forwards; }
@keyframes pm-count { to { --pmp: 100%; } }

/* رسالة العميل بلون المشروع، وصحّين، وإيموجي يطير */
.pm-you { position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 17%, #fff), color-mix(in srgb, var(--acc) 8%, #fff)); border: 1px solid color-mix(in srgb, var(--acc) 25%, transparent); border-end-end-radius: 8px;
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--acc) 60%, transparent); animation: pm-send .5s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: bottom left; }
[dir="ltr"] .pm-you { transform-origin: bottom right; }
@keyframes pm-send { from { opacity: 0; transform: translateY(30px) scale(.8); } }
.pm-you small { display: block; margin-top: -2px; text-align: end; color: var(--acc); font-size: 11px; font-weight: 800; letter-spacing: -3px; }
.pm-float { position: absolute; bottom: 60%; inset-inline-start: 30%; z-index: 3; font-size: 22px; pointer-events: none; animation: pm-fly 1.6s cubic-bezier(.2, .7, .3, 1) var(--d) both; }
@keyframes pm-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -150px) scale(var(--s)) rotate(20deg); } }

/* توب نت يفكّر: الشعار ينبض والكلمة تلمع، وبعدين الكلام ينساب كلمة كلمة */
.pm-turn .pm-bot { transition: box-shadow .3s; }
.pm-turn.thinking .pm-bot { animation: pm-ring 1.2s ease-out infinite; }
@keyframes pm-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.pm-think { align-items: center; gap: 5px; }
.pm-think b { margin-inline-end: 4px; font-size: 14px; font-weight: 700; background: linear-gradient(90deg, #a0a0a8 0%, #111 45%, #a0a0a8 90%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pm-shim 1.4s linear infinite; }
@keyframes pm-shim { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.pm-think i { width: 6px; height: 6px; background: var(--acc); }
.pm-text .w { display: inline-block; animation: pm-word .5s ease-out both; }
@keyframes pm-word { from { opacity: 0; filter: blur(5px); transform: translateY(5px); } }

/* صورة المشروع داخل إطار متصفح، تنكشف وتنزل لتحت لما تمرّ عليها */
.pm-shot { border-radius: 16px; border-color: #e4e4e4; box-shadow: 0 22px 44px -20px color-mix(in srgb, var(--acc) 55%, #0004); animation: pm-reveal .9s cubic-bezier(.3, 1, .3, 1) both; transition: transform .4s, box-shadow .4s; }
@keyframes pm-reveal { from { clip-path: inset(0 0 100% 0 round 16px); transform: translateY(20px); } to { clip-path: inset(0 0 0 0 round 16px); } }
.pm-shot:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 30px 50px -20px color-mix(in srgb, var(--acc) 65%, #0005); }
.pm-chrome { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #f4f4f3; border-bottom: 1px solid #e9e9e7; direction: ltr; }
.pm-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .pm-chrome i:nth-child(2) { background: #febc2e; } .pm-chrome i:nth-child(3) { background: #28c840; }
.pm-chrome span { flex: 1; margin-left: 8px; padding: 3px 12px; border-radius: 99px; background: #fff; color: #6b6b72; font-size: 11.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-shot img { transition: object-position 3.5s ease-in-out; }
.pm-shot:hover img { object-position: center bottom; }

/* المميزات: شيبس بعلامة صح بلون المشروع، تطلع ورا بعض */
.pm-tags span { background: #fff; border-color: color-mix(in srgb, var(--acc) 30%, transparent); box-shadow: 0 4px 12px -8px color-mix(in srgb, var(--acc) 70%, transparent); animation: pm-chip .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--k) * 90ms); }
.pm-tags span::before { content: "✓ "; color: var(--acc); font-weight: 900; }
.pm-tags { animation: none; }
@keyframes pm-chip { from { opacity: 0; transform: scale(.6) translateY(8px); } }

/* كرت الرابط: لمعة تمر عليه والسهم يطير */
.pm-link { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--acc) 30%, #e6e6e6); }
.pm-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffffb3 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s; }
.pm-link:hover { background: color-mix(in srgb, var(--acc) 7%, #fff); border-color: var(--acc); }
.pm-link:hover::after { transform: translateX(120%); }
.pm-link i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--acc); color: #fff; transition: transform .3s; }
.pm-link:hover i { transform: translate(3px, -3px) rotate(8deg); }

/* خانة الكتابة: تقترح أفكار، وزر الإرسال بلون المشروع */
.pm-bar { background: #fffffff2; box-shadow: 0 0 0 1px #e7e7e7 inset, 0 12px 30px -16px color-mix(in srgb, var(--acc) 60%, transparent); backdrop-filter: blur(10px); }
.pm-bar:hover { box-shadow: 0 0 0 1.5px var(--acc) inset, 0 14px 34px -14px color-mix(in srgb, var(--acc) 70%, transparent); }
.pm-ph { display: inline-block; transition: opacity .3s, transform .3s; }
.pm-ph.out { opacity: 0; transform: translateY(-8px); }
.pm-bar i { background: var(--acc); box-shadow: 0 6px 14px -4px var(--acc); transition: transform .3s, background .9s; }
.pm-bar:hover i { transform: translateY(-3px) scale(1.08); }
.pm-new { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }

@media (prefers-reduced-motion: reduce) { .pm-wall i, .pm-text .w, .pm-shot, .pm-tags span, .pm-row .pm-dot, .pm-row.next::after { animation: none !important; transition: none !important; } }

/* كلام المحادثة أكبر وأوضح */
.pm-text { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.85; font-weight: 500; }
.pm-you { font-size: clamp(18px, 1.5vw, 21px); padding: 14px 22px; }
.pm-turn .pm-bot { width: 42px; height: 42px; } .pm-turn .pm-bot svg { width: 25px; }
.pm-think b { font-size: 17px; }
.pm-tags span { font-size: 14.5px; padding: 8px 14px; }
.pm-link b { font-size: 16px; } .pm-ph { font-size: 17px; }