/* NDIGIT v2 · שאלות: שיחת וואטסאפ. השאלה נשלחת כהודעה, ההקלדה מופיעה, והתשובה שלי נכנסת. ליים רק על ההודעות שלכם */
.fqs { padding: clamp(84px, 8vw, 130px) 0; border-top: 1px solid var(--line); }
.fqs-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.fqs-copy { position: sticky; top: 110px; }
.fqs-h { margin: 0; font: 700 clamp(56px, 5.8vw, 100px)/.9 var(--display); }
.fqs-h .lt { font-weight: 300; color: var(--soft); }
.fqs-p { max-width: 34ch; margin: 22px 0 0; font-size: 18px; line-height: 1.7; color: var(--soft); }
.fqs-p b { color: var(--bone); }

.chat { overflow: hidden; border: 1px solid #2a2c24; border-radius: 24px; background:
  radial-gradient(circle at 20% 10%, rgba(200,245,66,.05), transparent 40%), #0f100d; box-shadow: 0 40px 90px -40px #000; }
.chat-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #22241e; background: #141512; }
.chat-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: #0b0b0a; font: 400 18px/1 Anton, sans-serif; }
.chat-who { display: grid; gap: 3px; }
.chat-who b { font: 700 15px/1 var(--text); }
.chat-st { font-size: 12.5px; color: var(--soft); }
.chat-st.typing { color: var(--lime); }
.chat-log { display: grid; gap: 14px; list-style: none; margin: 0; padding: 22px 18px 10px; min-height: 360px; align-content: start; }
.fq { display: grid; gap: 8px; }
.fq-q, .fq-a { max-width: 84%; margin: 0; padding: 11px 14px 12px; font-size: 15.5px; line-height: 1.55; }
.fq-q { justify-self: end; border-radius: 16px 16px 16px 4px; background: var(--lime); color: #0b0b0a; font-weight: 700; }
.fq-a { justify-self: start; border-radius: 16px 16px 4px 16px; background: #1c1e18; color: var(--bone); }
/* מצב שיחה (רק עם JS): רק מה שנשאל מוצג */
.chat.live .fq { display: none; }
.chat.live .fq.asked { display: grid; }
.chat.live .fq.asked .fq-q { animation: fq-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.chat.live .fq .fq-a[hidden] { display: none; }
.chat.live .fq .fq-a:not([hidden]) { animation: fq-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fq-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.fq-dots { justify-self: start; display: inline-flex; gap: 4px; padding: 13px 14px; border-radius: 16px 16px 4px 16px; background: #1c1e18; }
.fq-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8b8c80; animation: fq-dot 1s infinite; }
.fq-dots i:nth-child(2) { animation-delay: .15s; } .fq-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes fq-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.fq-end { justify-self: start; max-width: 84%; margin: 0; padding: 11px 14px 12px; border-radius: 16px 16px 4px 16px; background: #1c1e18; font-size: 15.5px; line-height: 1.55; animation: fq-in .4s both; }
.fq-end a { color: var(--lime); font-weight: 700; border-bottom: 1px solid rgba(200,245,66,.4); }

.chat-picks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid #22241e; background: #121310; }
.chat-picks:empty { display: none; }
.chat-pick { padding: 10px 14px; border: 1px solid #3a3c33; border-radius: 99px; background: none; color: var(--bone); font: 600 14px/1.25 var(--text); text-align: right; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
@media (hover: hover) and (pointer: fine) { .chat-pick:hover { border-color: var(--lime); color: var(--lime); } }
.chat-pick:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.chat-pick:disabled { opacity: .4; cursor: wait; }

@media (max-width: 899px) {
  .fqs-in { grid-template-columns: 1fr; }
  .fqs-copy { position: static; }
  .fqs-h { font-size: clamp(50px, 14vw, 76px); }
  .fqs-p { font-size: 16px; }
  .chat-log { min-height: 300px; padding: 18px 12px 8px; }
  .fq-q, .fq-a, .fq-end { max-width: 90%; font-size: 15px; }
  .chat-picks { justify-content: stretch; } .chat-pick { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fq-q, .fq-a, .fq-end { animation: none !important; } .fq-dots i { animation: none; } }

/* ===== נתי 28.09: רקע עצם כדי לשבור את השחור בין הסקשנים, וחלון שנראה כמו וואטסאפ אמיתי (מצב בהיר).
   הלוגו האמיתי (ND על ליים) בעיגול. ההודעות שלכם בירוק של וואטסאפ עם וי כחול, שלי בלבן ===== */
.fqs { border-top: 0; background: #f3f1ea; color: #0b0b0a; }
.fqs-h .lt { color: #6c6961; }
.fqs-p { color: #5d5b52; } .fqs-p b { color: #0b0b0a; }
.chat { border: 0; border-radius: 26px; background: #efeae2; box-shadow: 0 0 0 1px rgba(11,11,10,.08), 0 40px 80px -36px rgba(40,34,20,.45); }
.chat-top { gap: 12px; padding: 12px 16px; border-bottom: 0; background: #fff; box-shadow: 0 1px 0 rgba(11,11,10,.08); }
.chat-av { overflow: hidden; width: 42px; height: 42px; background: #c8f542; }
.chat-av img { display: block; width: 100%; height: 100%; }
.chat-who b { color: #111b21; font-size: 16px; }
.chat-st { color: #667781; }
.chat-st.typing { color: #1fa855; font-weight: 700; }
.chat-ico { display: flex; gap: 18px; margin-right: auto; color: #54656f; }
.chat-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* הרקע של הצ'אט: הבז' של וואטסאפ עם נקודות עדינות */
.chat-log { padding: 20px 16px 12px; background-image: radial-gradient(rgba(84,101,111,.09) 1.2px, transparent 1.6px); background-size: 20px 20px; }
.fq-q, .fq-a, .fq-end { position: relative; font-size: 15.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.fq-q { padding: 8px 12px 20px; border-radius: 0 10px 10px 10px; background: #d9fdd3; color: #111b21; font-weight: 500; }
.fq-a, .fq-end { padding: 8px 12px 10px; border-radius: 10px 0 10px 10px; background: #fff; color: #111b21; }
/* הזנב של הבועה: בעברית ההודעות שלכם משמאל והתשובות שלי מימין, כמו בוואטסאפ */
.fq-q::before, .fq-a::before, .fq-end::before { content: ""; position: absolute; top: 0; width: 10px; height: 12px; }
.fq-q::before { left: -8px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.fq-a::before, .fq-end::before { right: -8px; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* וי כחול כפול על מה שנשלח */
.fq-q::after { content: ""; position: absolute; left: 10px; bottom: 6px; width: 16px; height: 10px; background: #53bdeb; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5.5l2.6 2.6L9.5 1.6M6.6 8.1l.4.4L14.9 1.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5.5l2.6 2.6L9.5 1.6M6.6 8.1l.4.4L14.9 1.6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fq-dots { border-radius: 10px 0 10px 10px; background: #fff; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.fq-dots i { background: #8696a0; }
.fq-end a { color: #027eb5; border-bottom-color: rgba(2,126,181,.35); }
/* השאלות הבאות: כמו תשובות מהירות, בתחתית החלון */
.chat-picks { border-top: 0; background: #f0f2f5; }
.chat-pick { border: 0; background: #fff; color: #008069; font-weight: 700; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
@media (hover: hover) and (pointer: fine) { .chat-pick:hover { color: #fff; background: #008069; } }
.chat-pick:focus-visible { outline-color: #008069; }
@media (max-width: 899px) {
  .chat-ico { gap: 14px; } .chat-ico svg { width: 20px; height: 20px; }
  .chat-log { padding: 16px 12px 10px; }
}