/* ═══════════════════════════════════════════════════════════════════════════
 *  Hartly · v107 · پیوی و تماس
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── پیام موقت ── */
#tst107{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%, 20px); z-index:130;
  background:rgba(28,25,23,.92); color:#fff; font-size:12.5px; font-weight:800;
  padding:10px 18px; border-radius:99px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:88vw; text-align:center;
}
#tst107.on{ opacity:1; transform:translate(-50%, 0) }

/* ═══════════ گفتگو ═══════════ */
#msgs{ padding:14px 12px 10px !important; display:flex; flex-direction:column; gap:3px }
#msgs > * + *{ margin-top:0 !important }
.dm7-empty{ margin:auto; padding:40px 0; text-align:center; color:#a8a29e; font-size:13px; font-weight:700 }
.dm7-empty span{ display:block; font-size:30px; margin-bottom:8px }
.dm7-day{ display:flex; justify-content:center; margin:10px 0 6px }
.dm7-day span{ background:#f5f5f4; color:#78716c; font-size:10.5px; font-weight:800; padding:4px 12px; border-radius:99px }

.dm7-row{ display:flex; margin:1px 0 }
.dm7-row.me{ justify-content:flex-end }
.dm7-row.them{ justify-content:flex-start }
.dm7-row.call{ justify-content:center; margin:8px 0 }

.dm7-txt{
  position:relative; max-width:76%; padding:8px 13px 17px; border-radius:18px;
  font-size:14px; line-height:1.65; word-wrap:break-word; overflow-wrap:anywhere;
}
.dm7-row.me .dm7-txt{ background:linear-gradient(135deg,#fbbf24,#f97316); color:#fff; border-end-end-radius:6px; box-shadow:0 4px 12px rgba(249,115,22,.18) }
.dm7-row.them .dm7-txt{ background:#f5f5f4; color:#1c1917; border-end-start-radius:6px }
.dm7-time{
  position:absolute; bottom:4px; inset-inline-end:10px;
  font-size:9.5px; font-weight:700; opacity:.72; white-space:nowrap; direction:ltr;
}
.dm7-clock{ font-style:normal }

/* عکس */
.dm7-img{
  position:relative; width:min(62vw, 240px); aspect-ratio:1 / var(--r, 1.2);
  border-radius:18px; overflow:hidden; background:#e7e5e4; cursor:zoom-in;
}
.dm7-row.me .dm7-img{ border-end-end-radius:6px }
.dm7-row.them .dm7-img{ border-end-start-radius:6px }
.dm7-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s }
.dm7-img.ok img{ opacity:1 }
.dm7-img.ok .dm7-spin{ display:none }
.dm7-img .dm7-time{ color:#fff; opacity:1; text-shadow:0 1px 3px rgba(0,0,0,.6); z-index:2 }
.dm7-img.err::after{ content:"⚠"; position:absolute; inset:0; display:grid; place-items:center; color:#a8a29e; font-size:22px }
.dm7-cap{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:18px 10px 20px; z-index:1;
  background:linear-gradient(transparent, rgba(0,0,0,.6)); color:#fff; font-size:12.5px }
.dm7-spin{
  position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px;
  border-radius:50%; border:2.5px solid rgba(120,113,108,.25); border-top-color:#f97316;
  animation:dm7spin .8s linear infinite;
}
.dm7-empty .dm7-spin{ position:static; display:inline-block; margin:0 }
@keyframes dm7spin{ to{ transform:rotate(360deg) } }

/* ویس */
.dm7-voice{
  position:relative; display:flex; align-items:center; gap:9px;
  width:min(70vw, 250px); padding:8px 12px 18px 8px; border-radius:18px; direction:ltr;
}
.dm7-row.me .dm7-voice{ background:linear-gradient(135deg,#fbbf24,#f97316); color:#fff; border-end-end-radius:6px }
.dm7-row.them .dm7-voice{ background:#f5f5f4; color:#1c1917; border-end-start-radius:6px }
.dm7-play{
  flex:0 0 36px; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; transition:transform .12s;
}
.dm7-row.me .dm7-play{ background:#fff; color:#f97316 }
.dm7-row.them .dm7-play{ background:linear-gradient(135deg,#fbbf24,#f97316); color:#fff }
.dm7-play:active{ transform:scale(.9) }
.dm7-voice.loading .dm7-play{ opacity:.5 }
.dm7-wave{ position:relative; flex:1; height:28px; display:flex; align-items:center; gap:2px; cursor:pointer }
.dm7-wave i{ flex:1; min-width:2px; border-radius:2px; background:currentColor; opacity:.38 }
.dm7-prog{
  position:absolute; left:0; top:0; bottom:0; width:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.0));
  box-shadow:inset 0 0 0 999px currentColor; opacity:.35; mix-blend-mode:overlay;
  transition:width .1s linear;
}
.dm7-voice.playing .dm7-wave i{ opacity:.55 }
.dm7-dur{ flex:0 0 auto; font-size:11px; font-weight:800; min-width:30px; text-align:right }
.dm7-voice .dm7-time{ inset-inline-end:auto; right:12px }

/* پیام تماس */
.dm7-call{
  display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  background:#ecfdf5; color:#047857; padding:8px 14px; border-radius:99px;
  font-family:inherit; font-size:12px;
}
.dm7-call b{ font-weight:900 }
.dm7-call span{ opacity:.6; font-size:10.5px; font-weight:700 }
.dm7-call.miss{ background:#fff1f2; color:#e11d48 }
.dm7-call svg{ width:16px; height:16px }

/* ── نوار نوشتن ── */
.dm7-comp{ position:relative; gap:4px !important; padding-inline:6px !important }
.dm7-ib{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; color:#a8a29e; transition:color .15s, background .15s, transform .12s;
}
.dm7-ib:active{ transform:scale(.88) }
.dm7-ib.att{ color:#f97316 }
.dm7-ib.mic{ color:#fff; background:linear-gradient(135deg,#fbbf24,#f97316); box-shadow:0 4px 12px rgba(249,115,22,.3) }
.dm7-comp .dm7-send{ display:none !important }
.dm7-comp.typing .dm7-send{ display:grid !important }
.dm7-comp.typing .dm7-ib.mic{ display:none }
.dm7-comp.rec > *:not(#dm7Rec){ visibility:hidden }
#dm7Rec{
  position:absolute; inset:0; display:flex; align-items:center; gap:10px;
  padding:0 6px; background:#fff7ed; border-radius:99px; visibility:visible;
}
#dm7Rec .del{ color:#e11d48 }
#dm7Rec .dot{ width:9px; height:9px; border-radius:50%; background:#ef4444; animation:dm7blink 1s ease-in-out infinite }
@keyframes dm7blink{ 50%{ opacity:.25 } }
#dm7Rec .tm{ font-size:13px; font-weight:900; color:#1c1917; direction:ltr; min-width:34px }
#dm7Rec .lvw{ width:24px; height:22px; display:grid; place-items:center }
#dm7Rec .lv{ display:block; width:5px; height:100%; border-radius:3px; background:#f97316; transform:scaleY(.25); transition:transform .08s }
#dm7Rec .hint{ flex:1; font-size:11.5px; font-weight:800; color:#a8a29e }
#dm7Rec .go{
  display:grid !important; place-items:center; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,#fbbf24,#f97316); box-shadow:0 4px 12px rgba(249,115,22,.35);
}

/* ── نمایش بزرگ عکس ── */
#dm7View{
  position:fixed; inset:0; z-index:140; background:rgba(0,0,0,.94);
  display:grid; place-items:center; animation:dm7fade .18s ease;
}
#dm7View img{ max-width:100vw; max-height:100vh; object-fit:contain }
#dm7View button{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:14px; width:40px; height:40px;
  border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
}
@keyframes dm7fade{ from{ opacity:0 } to{ opacity:1 } }

/* ═══════════ منوی سه‌نقطه ═══════════ */
#dm7Menu, #dm7Media{
  position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center; animation:dm7fade .18s ease;
}
#roomMenu{ display:none !important }
.dm7-sheet{
  width:100%; max-width:430px; background:#fff; border-radius:26px 26px 0 0; overflow:hidden;
  padding-bottom:calc(10px + env(safe-area-inset-bottom)); animation:dm7up .26s cubic-bezier(.2,.9,.3,1.05);
}
.dm7-sheet.tall{ max-height:82vh; overflow-y:auto; padding:0 14px 20px }
@keyframes dm7up{ from{ transform:translateY(40px); opacity:0 } to{ transform:none; opacity:1 } }
.dm7-hero{
  position:relative; display:flex; align-items:center; gap:13px; padding:22px 20px 26px;
  background:linear-gradient(135deg,#fb7185,#f97316 60%,#fbbf24); color:#fff;
}
.dm7-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:18px;
  background:#fff; border-radius:18px 18px 0 0;
}
.dm7-av{
  width:58px; height:58px; border-radius:50%; overflow:hidden; flex:0 0 58px;
  display:grid; place-items:center; background:rgba(255,255,255,.25);
  box-shadow:0 0 0 3px rgba(255,255,255,.7);
}
.dm7-av img{ width:100%; height:100%; object-fit:cover }
.dm7-av b{ font-size:24px; font-weight:900 }
.dm7-who{ min-width:0; display:flex; flex-direction:column; gap:2px }
.dm7-who .nm{ font-size:17px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dm7-who .un{ font-size:12px; font-weight:700; opacity:.85; direction:ltr; text-align:start }

.dm7-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:4px 14px 12px }
.dm7-quick button{
  border:0; cursor:pointer; background:#fff7ed; color:#ea580c; border-radius:16px;
  padding:12px 4px 10px; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:inherit; font-size:11.5px; font-weight:800; transition:transform .12s, background .15s;
}
.dm7-quick button:active{ transform:scale(.94); background:#ffedd5 }
.dm7-list{ padding:0 10px; display:flex; flex-direction:column }
.dm7-list button{
  border:0; background:none; cursor:pointer; display:flex; align-items:center; gap:13px;
  padding:13px 12px; border-radius:14px; font-family:inherit; font-size:14px; font-weight:800; color:#1c1917;
  text-align:start;
}
.dm7-list button:active{ background:#fafaf9 }
.dm7-list button svg{ color:#78716c; flex:0 0 auto }
.dm7-list button.red{ color:#e11d48 } .dm7-list button.red svg{ color:#e11d48 }
.dm7-list button.soft{ color:#78716c }
.dm7-cancel{
  display:block; width:calc(100% - 28px); margin:8px 14px 0; border:0; cursor:pointer;
  background:#f5f5f4; color:#57534e; border-radius:14px; padding:13px; font-family:inherit; font-size:14px; font-weight:900;
}
.dm7-mh{ position:sticky; top:0; z-index:2; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:18px 4px 10px }
.dm7-mh b{ font-size:16px; font-weight:900 }
.dm7-mh .x{ border:0; background:#f5f5f4; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; cursor:pointer }
.dm7-sec{ margin:14px 4px 8px; font-size:12px; font-weight:900; color:#a8a29e }
.dm7-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px }
.dm7-grid .dm7-img{ width:100%; border-radius:10px }
#dm7Media .dm7-row{ margin:4px 0 }

/* ═══════════ صفحهٔ تماس ═══════════ */
#incCall, #callM{ display:none !important }
body.c7-open{ overflow:hidden }
#call107{
  position:fixed; inset:0; z-index:150; display:none; overflow:hidden;
  background:#140c22; color:#fff; font-family:inherit;
}
#call107.on{ display:block; animation:dm7fade .2s ease }
.c7-bg{
  position:absolute; inset:-40px; background-size:cover; background-position:center;
  filter:blur(38px) brightness(.45) saturate(1.2); transform:scale(1.1);
  background-color:#2a1745;
}
.c7-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,12,34,.3), rgba(20,12,34,.85)) }
.c7-remote{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; background:#000 }
#call107.rvid .c7-remote{ display:block }
#call107.rvid .c7-mid{ top:auto; bottom:190px }
#call107.rvid .c7-av{ display:none }
.c7-audio{ display:none }
.c7-top{
  position:absolute; top:calc(14px + env(safe-area-inset-top)); left:0; right:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.c7-lock{ font-size:10.5px; font-weight:700; opacity:.6 }
.c7-q:empty{ display:none }
.c7-q{ font-size:11px; font-weight:800; background:rgba(239,68,68,.25); color:#fecaca; padding:3px 10px; border-radius:99px }
.c7-mid{
  position:absolute; left:0; right:0; top:18%; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:0 20px;
}
.c7-av{ position:relative; width:128px; height:128px; margin-bottom:10px }
.c7-av .r1, .c7-av .r2{
  position:absolute; inset:0; border-radius:50%; border:2px solid rgba(251,191,36,.55);
  animation:c7ring 2.2s ease-out infinite;
}
.c7-av .r2{ animation-delay:1.1s }
#call107.st-live .c7-av .r1, #call107.st-live .c7-av .r2,
#call107.st-ended .c7-av .r1, #call107.st-ended .c7-av .r2{ display:none }
@keyframes c7ring{ from{ transform:scale(1); opacity:.9 } to{ transform:scale(1.7); opacity:0 } }
.c7-pic{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(135deg,#fbbf24,#f97316); box-shadow:0 0 0 4px rgba(255,255,255,.18), 0 20px 50px rgba(0,0,0,.5);
}
.c7-pic img{ width:100%; height:100%; object-fit:cover }
.c7-pic b{ font-size:48px; font-weight:900 }
.c7-pic .c7-u{ display:grid; place-items:center; opacity:.9 } .c7-pic .c7-u svg{ width:52px; height:52px }
.c7-name{ font-size:24px; font-weight:900; text-shadow:0 2px 12px rgba(0,0,0,.4) }
.c7-st{ font-size:14px; font-weight:700; opacity:.8; direction:ltr; unicode-bidi:plaintext }
#call107.st-ended .c7-st{ color:#fda4af; opacity:1 }

.c7-local{
  position:absolute; z-index:4; right:14px; top:calc(70px + env(safe-area-inset-top));
  width:104px; height:146px; object-fit:cover; border-radius:18px; background:#000;
  border:2px solid rgba(255,255,255,.6); box-shadow:0 10px 26px rgba(0,0,0,.5);
  display:none; touch-action:none; cursor:grab;
}
.c7-local.mirror{ transform:scaleX(-1) }
#call107.cam .c7-local{ display:block }

.c7-ctl{
  position:absolute; left:0; right:0; bottom:calc(34px + env(safe-area-inset-bottom)); z-index:5;
  display:flex; justify-content:center; gap:18px; padding:0 16px;
}
.c7-col{ display:flex; flex-direction:column; align-items:center; gap:8px }
.c7-col span{ font-size:11.5px; font-weight:800; opacity:.85 }
.c7-b{
  width:62px; height:62px; border-radius:50%; border:0; cursor:pointer; color:#fff;
  display:grid; place-items:center; transition:transform .12s, background .15s;
}
.c7-b:active{ transform:scale(.9) }
.c7-b.glass{ background:rgba(255,255,255,.16); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) }
.c7-b.glass.on{ background:#fff; color:#1c1917 }
.c7-b.red{ background:#ef4444; box-shadow:0 10px 26px rgba(239,68,68,.45) }
.c7-b.green{ background:#22c55e; box-shadow:0 10px 26px rgba(34,197,94,.45) }
.c7-b.pulse{ animation:c7pulse 1.4s ease-in-out infinite }
@keyframes c7pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.1) } }
#call107.st-incoming .c7-ctl{ gap:38px }
@media (prefers-reduced-motion:reduce){
  .c7-av .r1, .c7-av .r2, .c7-b.pulse, #dm7Rec .dot{ animation:none }
}