/* Mesajbulut demosu: telefonda WhatsApp sohbeti, duvarda cevap takibi panosu. */
.sdemo--mesajbulut { --mj: #10b981; --mj-d: #047857; }

/* Telefon: WhatsApp Business sohbeti */
.mj-phone { font-size: 5.6cqw; background: #efe7dd; }
.mj-phone .sd-status { background: #075e54; color: #fff; }
.mj-head { flex: none; height: 9.5cqh; display: flex; align-items: center; gap: 3.5cqw; padding: 0 5cqw; background: #075e54; color: #fff; }
.mj-head span:last-child { display: flex; flex-direction: column; }
.mj-head b { font-size: 6.4cqw; } .mj-head small { font-size: 4.6cqw; opacity: .8; }
.mj-av { display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; background: #cbd5e1; color: #075e54; font-weight: 800; font-size: 6cqw; flex: none; }
.mj-chat { flex: 1; position: relative; display: flex; flex-direction: column; gap: 2cqh; padding: 3cqh 4cqw;
           background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.2px); background-size: 6cqw 6cqw; }
.mj-day { align-self: center; padding: .6cqh 3cqw; border-radius: 2cqw; background: #e1f2fb; color: #3b5563; font-size: 4.4cqw; font-weight: 600; }
.mj-b { position: relative; max-width: 82%; padding: 1.6cqh 3.6cqw 3.6cqh; border-radius: 3.6cqw; font-size: 5.5cqw; line-height: 1.3; box-shadow: 0 .2cqh .4cqh rgba(0,0,0,.08);
        opacity: 0; transform: translateY(2cqh) scale(.96); transition: opacity .35s, transform .4s cubic-bezier(.2,.9,.3,1.2); }
.mj-b i { position: absolute; right: 3cqw; bottom: .9cqh; font-style: normal; font-size: 3.8cqw; color: #64748b; }
[dir="rtl"] .mj-b i { right: auto; left: 3cqw; }
.mj-b s { text-decoration: none; color: #34b7f1; }
.mj-b--in { align-self: flex-start; background: #fff; border-start-start-radius: 0; }
.mj-b--out { align-self: flex-end; background: #d9fdd3; border-start-end-radius: 0; }
.s-msg .mj-b--in, .s-reply .mj-b--out { opacity: 1; transform: none; }
.mj-input { flex: none; height: 11cqh; display: flex; align-items: center; gap: 2.4cqw; padding: 0 3cqw 1.4cqh; }
.mj-field { position: relative; flex: 1; height: 8cqh; border-radius: 99px; background: #fff; overflow: hidden; }
.mj-field i { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 4cqw; font-style: normal; font-size: 5cqw; white-space: nowrap; overflow: hidden; transition: opacity .2s; }
.mj-ph { color: #94a3b8; } .mj-typed { opacity: 0; color: #0f172a; }
.s-type .mj-ph { opacity: 0; } .s-type .mj-typed { opacity: 1; animation: mj-type .45s steps(14) both; }
.s-reply .mj-typed { opacity: 0; } .s-reply .mj-ph { opacity: 1; }
@keyframes mj-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.mj-send { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: #00a884; color: #fff; font-size: 5cqw; flex: none; }
[dir="rtl"] .mj-send { transform: scaleX(-1); }

/* Duvar: cevap takibi panosu */
.mw { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.6cqh; padding: 3cqh 2.4cqw; background: #f4f7f6; color: #0f172a; font-size: 1.8cqw; }
.mw-top { flex: none; display: flex; justify-content: space-between; align-items: center; }
.mw-logo { display: flex; align-items: center; gap: 1cqw; font-weight: 800; font-size: 2.6cqw; }
.mw-logo i { display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw; background: var(--mj); color: #fff; font-style: normal; font-size: 2cqw; }
.mw-live { display: flex; align-items: center; gap: .8cqw; color: #64748b; font-weight: 600; }
.mw-live i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--mj); box-shadow: 0 0 0 .5cqw rgba(16,185,129,.2); }
.mw-kpis { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.mw-kpi { display: flex; flex-direction: column; gap: .6cqh; padding: 2cqh 1.6cqw; border-radius: 1.2cqw; background: #fff; border: .15cqw solid #e2e8f0; transition: background .4s, border-color .4s; }
.mw-kpi small { color: #64748b; font-weight: 600; }
.mw-kpi b { position: relative; font-size: 4.4cqw; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mw-kpi b span { transition: opacity .35s; } .mw-kpi b span + span { position: absolute; inset-inline-start: 0; opacity: 0; }
.mw-kpi em { font-style: normal; color: #94a3b8; font-size: 1.6cqw; }
.s-done .mw-a1, .s-wait .mw-w0, .s-msg .mw-k1 { opacity: 0; } .s-done .mw-a2, .s-wait .mw-w1, .s-msg .mw-k2 { opacity: 1; }
.s-done .mw-a2 { color: var(--mj-d); }
.s-wait .mw-kpi--wait { background: #fffbeb; border-color: #fcd34d; }
.s-late .mw-kpi--wait { background: #fef2f2; border-color: #fca5a5; } .s-late .mw-kpi--wait b { color: #dc2626; }
.s-done .mw-kpi--wait { background: #fff; border-color: #e2e8f0; } .s-done .mw-kpi--wait b { color: inherit; } .s-done .mw-w1 { opacity: 0; } .s-done .mw-w0 { opacity: 1; }
.mw-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.4cqw; }
.mw-cols h4 { margin: 0 0 1.6cqh; font-size: 1.9cqw; color: #475569; }
.mw-team, .mw-queue { position: relative; padding: 2cqh 1.6cqw; border-radius: 1.2cqw; background: #fff; border: .15cqw solid #e2e8f0; }
.mw-rep { display: grid; grid-template-columns: auto 6cqw 1fr auto; align-items: center; gap: .9cqw; margin-bottom: 1.8cqh; }
.mw-rep b { font-size: 1.8cqw; } .mw-rep em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.mw-bar { height: 1cqh; border-radius: 99px; background: #eef2f7; overflow: hidden; } .mw-bar i { display: block; height: 100%; background: var(--mj); border-radius: inherit; }
.mw-rep:nth-child(4) .mw-bar i { background: #f59e0b; }
.mw-av { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; color: #fff; font-weight: 800; font-size: 1.7cqw; flex: none; }
.mw-av--1 { background: #6366f1; } .mw-av--2 { background: #0ea5e9; } .mw-av--3 { background: #f97316; } .mw-av--c { background: #64748b; }
.mw-none { margin: 0; color: #94a3b8; transition: opacity .3s; }
.s-wait .mw-none { opacity: 0; }
.mw-row { position: absolute; left: 1.6cqw; right: 1.6cqw; top: 9cqh; overflow: hidden; display: flex; align-items: center; gap: 1cqw; padding: 1.8cqh 1.2cqw; border-radius: 1cqw;
          background: #fffbeb; border: .2cqw solid #fcd34d; opacity: 0; transform: translateY(-3cqh); transition: opacity .4s, transform .5s cubic-bezier(.2,.9,.3,1.2), background .4s, border-color .4s; }
.mw-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mw-row-t b { font-size: 1.9cqw; } .mw-row-t small { color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.5cqw; }
.mw-timer { position: relative; display: grid; font-weight: 800; font-size: 2.2cqw; color: #b45309; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mw-timer i { grid-area: 1 / 1; font-style: normal; transition: opacity .3s; text-align: end; }
.mw-t2, .mw-t3 { opacity: 0; }
.mw-t3 { font-size: 1.7cqw; }
.s-wait .mw-row { opacity: 1; transform: none; }
.s-wait .mw-row .sd-flash { transition: transform .9s .2s ease-out; transform: translateX(130%); }
.s-late .mw-row { background: #fef2f2; border-color: #fca5a5; animation: mw-pulse 1s 2; } .s-late .mw-timer { color: #dc2626; } .s-late .mw-t1 { opacity: 0; } .s-late .mw-t2 { opacity: 1; }
@keyframes mw-pulse { 50% { box-shadow: 0 0 0 .8cqw rgba(220,38,38,.18); } }
.s-done .mw-row { background: #ecfdf5; border-color: #6ee7b7; animation: none; } .s-done .mw-timer { color: var(--mj-d); } .s-done .mw-t2 { opacity: 0; } .s-done .mw-t3 { opacity: 1; }