/* RT Chat UI — giao diện khung chat kiểu Messenger (dùng chung web khách & RT Studio). Màu lấy từ biến của từng web. */
.cu-wrap{--cu-in:#f0e9e1; --cu-in-ink:#2b1515; --cu-out:linear-gradient(180deg,#a3151f,#6a0b12); --cu-out-ink:#fff7ea; --cu-line:#e9dccd; --cu-muted:#8a7570; --cu-accent:#9c1419; --cu-field:#f3ece4; --cu-panel:#fff; --cu-rx:#fff}
.cu-msgs{display:flex; flex-direction:column; gap:2px}
.cu-sep{align-self:center; margin:14px 0 8px; font:600 11.5px/1.2 var(--cu-font,inherit); letter-spacing:.02em; color:var(--cu-muted)}
.cu-m{position:relative; display:flex; align-items:flex-end; gap:6px; max-width:100%; margin-top:8px}
.cu-m.cont{margin-top:2px}
.cu-m.in{align-self:flex-start; padding-right:46px} .cu-m.out{align-self:flex-end; flex-direction:row-reverse; padding-left:46px}
.cu-m.has-rx{margin-bottom:14px}
.cu-av{width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:50%; overflow:hidden}
.cu-av img{width:100%; height:100%; object-fit:cover}
.cu-c{position:relative; display:flex; flex-direction:column; min-width:0; max-width:min(78vw,420px)}
.cu-m.out .cu-c{align-items:flex-end} .cu-m.in .cu-c{align-items:flex-start}
.cu-b{padding:9px 13px; border-radius:20px; font:400 15px/1.42 var(--cu-font,inherit); word-break:break-word; overflow-wrap:anywhere; white-space:normal}
.cu-m.in .cu-b{background:var(--cu-in); color:var(--cu-in-ink)}
.cu-m.out .cu-b{background:var(--cu-out); color:var(--cu-out-ink)}
.cu-m.out .cu-b a{color:inherit; text-decoration:underline}
/* bong bóng liền nhau như Messenger: góc phía người gửi bo nhỏ */
.cu-m.in.more .cu-c>.cu-b:last-child,.cu-m.in.more .cu-img{border-bottom-left-radius:6px} .cu-m.in.cont .cu-c>.cu-b:first-child,.cu-m.in.cont .cu-img{border-top-left-radius:6px}
.cu-m.out.more .cu-c>.cu-b:last-child,.cu-m.out.more .cu-img{border-bottom-right-radius:6px} .cu-m.out.cont .cu-c>.cu-b:first-child,.cu-m.out.cont .cu-img{border-top-right-radius:6px}
.cu-del{font-style:italic; opacity:.75; background:transparent!important; color:var(--cu-muted)!important; box-shadow:inset 0 0 0 1px var(--cu-line)}
.cu-emo{font-size:40px; line-height:1.1; padding:2px 2px 0}
.cu-rq{display:grid; gap:1px; max-width:100%; margin-bottom:-8px; padding:7px 12px 14px; border-radius:16px; background:transparent; box-shadow:inset 0 0 0 1px var(--cu-line); color:var(--cu-muted); text-align:left; font:500 12px/1.35 var(--cu-font,inherit); cursor:pointer; opacity:.92}
.cu-rq b{font-weight:700; font-size:11.5px} .cu-rq span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cu-img{position:relative; display:block; padding:0; border:0; border-radius:18px; overflow:hidden; background:var(--cu-in); cursor:zoom-in; line-height:0}
.cu-img img{display:block; width:min(240px,62vw); max-height:320px; object-fit:cover}
.cu-spin{position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%; border:3px solid rgba(255,255,255,.7); border-top-color:transparent; animation:cuSpin .9s linear infinite}
@keyframes cuSpin{to{transform:rotate(360deg)}}
.cu-au{display:flex; align-items:center; gap:10px; min-width:200px; padding:8px 14px 8px 8px; border-radius:22px}
.cu-m.in .cu-au{background:var(--cu-in); color:var(--cu-in-ink)} .cu-m.out .cu-au{background:var(--cu-out); color:var(--cu-out-ink)}
.cu-au-p{width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:50%; border:0; background:rgba(255,255,255,.95); color:var(--cu-accent); cursor:pointer}
.cu-m.in .cu-au-p{background:var(--cu-accent); color:#fff}
.cu-au-p svg{width:16px; height:16px; fill:currentColor} .cu-au-p svg+svg{display:none} .cu-au.on .cu-au-p svg{display:none} .cu-au.on .cu-au-p svg+svg{display:block}
.cu-au-bar{flex:1; height:4px; border-radius:4px; background:rgba(127,127,127,.35); overflow:hidden} .cu-au-bar i{display:block; height:100%; width:0; background:currentColor; border-radius:4px}
.cu-au-t{font:600 12px/1 var(--cu-font,inherit); font-variant-numeric:tabular-nums; min-width:30px; text-align:right}
.cu-card{display:flex; gap:10px; align-items:center; width:min(270px,70vw); padding:8px; border-radius:18px; background:var(--cu-panel); box-shadow:inset 0 0 0 1px var(--cu-line); color:var(--cu-in-ink); text-decoration:none}
.cu-card img{width:64px; height:64px; flex:none; border-radius:12px; object-fit:cover; background:var(--cu-in)}
.cu-card span{display:grid; gap:2px; min-width:0} .cu-card b{font:700 14px/1.25 var(--cu-font,inherit)} .cu-card small{color:var(--cu-muted); font-size:12.5px} .cu-card em{font:600 12.5px/1.2 var(--cu-font,inherit); font-style:normal; color:var(--cu-accent)}
.cu-rx{position:absolute; bottom:-14px; display:inline-flex; align-items:center; gap:1px; padding:2px 5px; border-radius:999px; background:var(--cu-rx); box-shadow:0 1px 4px rgba(0,0,0,.18); font-size:13px; line-height:1.2}
.cu-m.in .cu-rx{left:8px} .cu-m.out .cu-rx{right:8px} .cu-rx small{font-size:10.5px; color:var(--cu-muted); margin-left:2px}
.cu-tl{display:flex; gap:2px; align-self:center; opacity:0; transition:opacity .15s}
.cu-tl button{width:28px; height:28px; display:grid; place-items:center; border-radius:50%; border:0; background:transparent; color:var(--cu-muted); cursor:pointer}
.cu-tl svg{width:17px; height:17px; fill:currentColor} .cu-tl button:hover{background:var(--cu-field)}
@media (hover:hover){ .cu-m:hover .cu-tl{opacity:1} }
@media (hover:none){ .cu-tl{display:none} }
.cu-st{align-self:flex-end; margin:0 4px; font-size:11px; color:var(--cu-muted)}
.cu-m.pend .cu-c{opacity:.65}
.cu-m.flash .cu-c{animation:cuFlash 1.2s ease}
@keyframes cuFlash{30%{transform:scale(1.04); filter:brightness(1.12)}}
.cu-seen{align-self:flex-end; display:flex; align-items:center; gap:5px; margin:3px 2px 0; font:500 11.5px/1 var(--cu-font,inherit); color:var(--cu-muted)}
.cu-seen .cu-av,.cu-seen>img,.cu-seen>span:first-child:not(:last-child){width:16px; height:16px}
.cu-seen svg,.cu-seen img{width:16px; height:16px; border-radius:50%}
.cu-typing .cu-b{display:flex; gap:4px; align-items:center; padding:12px 14px}
.cu-typing .cu-b i{width:7px; height:7px; border-radius:50%; background:var(--cu-muted); animation:cuDot 1.2s infinite ease-in-out}
.cu-typing .cu-b i:nth-child(2){animation-delay:.15s} .cu-typing .cu-b i:nth-child(3){animation-delay:.3s}
@keyframes cuDot{0%,60%,100%{transform:translateY(0); opacity:.45} 30%{transform:translateY(-5px); opacity:1}}
/* ---------- ô soạn tin ---------- */
.cu-cmp{display:grid; gap:0}
.cu-reply{display:flex; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid var(--cu-line); font-size:12.5px}
.cu-reply>span{flex:1; min-width:0; display:grid; grid-template-columns:auto 1fr; column-gap:6px; align-items:center} .cu-reply svg{width:15px; height:15px; fill:var(--cu-accent); grid-row:span 2}
.cu-reply b{color:var(--cu-in-ink)} .cu-reply small{color:var(--cu-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cu-reply button{width:30px; height:30px; border-radius:50%; border:0; background:var(--cu-field); color:var(--cu-muted); cursor:pointer}
.cu-in{display:flex; align-items:flex-end; gap:2px; padding:8px 8px 8px 6px}
.cu-t{width:38px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%; border:0; background:transparent; color:var(--cu-accent); cursor:pointer; transition:transform .15s, background .2s}
.cu-t:active{transform:scale(.88)} .cu-t svg{width:24px; height:24px; fill:currentColor}
.cu-tools{display:flex; gap:0; overflow:hidden; max-width:130px; transition:max-width .25s ease, opacity .2s}
.cu-in.has:not(.wide) .cu-tools{max-width:0; opacity:0}
.cu-exp{display:none} .cu-in.has:not(.wide) .cu-exp{display:grid} .cu-exp svg{transform:rotate(180deg)}
.cu-field{flex:1; min-width:0; display:flex; align-items:flex-end; margin-left:4px; border-radius:22px; background:var(--cu-field)}
.cu-field textarea{flex:1; min-width:0; min-height:40px; max-height:120px; padding:10px 4px 10px 14px; border:0; outline:0; resize:none; background:transparent; font:400 16px/1.3 var(--cu-font,inherit); color:var(--cu-in-ink)}
.cu-field textarea::placeholder{color:var(--cu-muted)}
.cu-emo-b{width:36px; height:40px}
.cu-send{width:42px; height:40px; flex:none; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--cu-accent); cursor:pointer; transition:transform .15s}
.cu-send:active{transform:scale(.85)} .cu-send svg{width:24px; height:24px; fill:currentColor; display:none} .cu-send .cu-like{font-size:26px; line-height:1}
.cu-in.has .cu-send svg,.cu-send.on svg{display:block} .cu-in.has .cu-send .cu-like{display:none}
.cu-panel{max-height:250px; overflow:auto; overscroll-behavior:contain; border-top:1px solid var(--cu-line); background:var(--cu-panel)}
.cu-emos{display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); padding:8px}
.cu-emos button{height:42px; border:0; border-radius:10px; background:transparent; font-size:25px; cursor:pointer} .cu-emos button:hover{background:var(--cu-field)}
.cu-plus{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; padding:10px}
.cu-plus button{display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 12px 6px 6px; border:0; border-radius:14px; background:var(--cu-field); color:var(--cu-in-ink); font:600 13.5px/1.25 var(--cu-font,inherit); text-align:left; cursor:pointer}
.cu-plus button span{width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:11px; background:var(--cu-accent); color:#fff} .cu-plus svg{width:20px; height:20px; fill:currentColor}
.cu-pick{display:grid; gap:6px; padding:10px} .cu-pick-h{display:flex; align-items:center; justify-content:space-between; gap:8px; font:700 13.5px/1.2 var(--cu-font,inherit); color:var(--cu-in-ink)}
.cu-pick-h button{border:0; background:none; color:var(--cu-muted); font-size:18px; cursor:pointer}
.cu-pick-l{display:grid; gap:4px; max-height:190px; overflow:auto}
.cu-pick-l button{display:flex; align-items:center; gap:10px; padding:6px; border:0; border-radius:12px; background:transparent; color:var(--cu-in-ink); text-align:left; font:600 13.5px/1.25 var(--cu-font,inherit); cursor:pointer}
.cu-pick-l button:hover{background:var(--cu-field)} .cu-pick-l img{width:42px; height:42px; border-radius:10px; object-fit:cover; flex:none} .cu-pick-l small{display:block; font-weight:500; color:var(--cu-muted)}
/* ---------- ghi âm ---------- */
.cu-rec{display:flex; align-items:center; gap:8px; padding:8px}
.cu-rec-w{flex:1; display:flex; align-items:center; gap:10px; min-height:40px; padding:0 14px; border-radius:22px; background:var(--cu-accent); color:#fff}
.cu-rec-dot{width:10px; height:10px; border-radius:50%; background:#fff; animation:cuBlink 1s infinite}
@keyframes cuBlink{50%{opacity:.25}}
.cu-rec-wave{flex:1; display:flex; align-items:center; gap:3px; height:22px; overflow:hidden}
.cu-rec-wave i{width:3px; border-radius:3px; background:rgba(255,255,255,.85); animation:cuWave 1s infinite ease-in-out}
.cu-rec-wave i:nth-child(3n){animation-delay:.2s} .cu-rec-wave i:nth-child(3n+1){animation-delay:.45s} .cu-rec-wave i:nth-child(4n){animation-delay:.7s}
@keyframes cuWave{0%,100%{height:5px} 50%{height:20px}}
.cu-rec-t{font:700 13px/1 var(--cu-font,inherit); font-variant-numeric:tabular-nums}
/* ---------- menu 1 tin ---------- */
.cu-mm{position:fixed; inset:0; z-index:400; display:flex; align-items:flex-end; justify-content:center; padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px)); background:rgba(20,8,10,0); transition:background .18s}
.cu-mm.on{background:rgba(20,8,10,.28)}
.cu-mm-in{width:min(380px,100%); display:grid; gap:10px; transform:translateY(24px) scale(.96); opacity:0; transition:transform .25s cubic-bezier(.3,1.4,.5,1), opacity .18s}
.cu-mm.on .cu-mm-in{transform:none; opacity:1}
.cu-rxbar{display:flex; justify-content:space-around; padding:6px; border-radius:999px; background:var(--cu-panel,#fff); box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.cu-rxbar button{width:46px; height:46px; border:0; border-radius:50%; background:transparent; font-size:28px; cursor:pointer; transition:transform .15s}
.cu-rxbar button:hover,.cu-rxbar button:active{transform:scale(1.25)} .cu-rxbar button.on{background:var(--cu-field)}
.cu-acts{display:grid; border-radius:18px; overflow:hidden; background:var(--cu-panel,#fff); box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.cu-acts button{display:flex; align-items:center; gap:12px; min-height:50px; padding:0 18px; border:0; background:transparent; color:var(--cu-in-ink); font:600 15px/1 var(--cu-font,inherit); text-align:left; cursor:pointer}
.cu-acts button+button{border-top:1px solid var(--cu-line)} .cu-acts svg{width:20px; height:20px; fill:currentColor} .cu-acts .bad{color:#c0392b}
/* ---------- xem ảnh lớn ---------- */
.cu-lb{position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:20px; background:rgba(8,4,5,.9); opacity:0; transition:opacity .2s; cursor:zoom-out}
.cu-lb.on{opacity:1} .cu-lb img{max-width:100%; max-height:100%; border-radius:12px; object-fit:contain}
.cu-lb-b{position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:14px; display:flex; gap:10px}
.cu-lb-b a,.cu-lb-b button{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:20px; text-decoration:none; cursor:pointer}
@media (prefers-reduced-motion:reduce){ .cu-typing .cu-b i,.cu-rec-wave i,.cu-spin{animation:none} }
/* ô soạn tin không bị ô gõ chữ kéo rộng ra ngoài màn hình (máy hẹp) */
.cu-cmp{grid-template-columns:minmax(0,1fr)} .cu-in{min-width:0} .cu-field textarea{width:0}
@media (max-width:380px){
  .cu-in{padding:8px 4px} .cu-t{width:33px} .cu-t svg{width:22px; height:22px} .cu-send{width:38px} .cu-field{margin-left:2px}
  .cu-in:has(textarea:focus):not(.wide) .cu-tools{max-width:0; opacity:0} .cu-in:has(textarea:focus):not(.wide) .cu-exp{display:grid}
}
/* chữ gợi ý trong ô gõ luôn nằm 1 dòng (máy hẹp: không bị xuống dòng, cắt mất nửa chữ) */
.cu-field textarea:placeholder-shown{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}