/* =====================================================================
   Advokat chati — umumiy komponent (static/js/advokat-chat-ui.js)

   Fuqaro sahifasi (templates/core/advokat_chat.html) va advokat paneli
   (templates/core/advokat/chat.html) BIR XIL ko'rinish va mantiqdan
   foydalanadi. Ranglar `--ac-*` o'zgaruvchilari orqali har sahifaning
   o'z palitrasiga ulanadi — bu faylda xom rang faqat zaxira sifatida.
   ===================================================================== */

.ac{
  --ac-bg: var(--ac-bg-x, #f4f1ea);
  --ac-surface: var(--ac-surface-x, #fff);
  --ac-line: var(--ac-line-x, #e4ded3);
  --ac-ink: var(--ac-ink-x, #14181f);
  --ac-muted: var(--ac-muted-x, #6b7482);
  --ac-mine: var(--ac-mine-x, #14263f);
  --ac-mine-ink: var(--ac-mine-ink-x, #fff);
  --ac-their: var(--ac-their-x, #fff);
  --ac-accent: var(--ac-accent-x, #b08442);
  --ac-ok: var(--ac-ok-x, #2f8a5b);
  --ac-bad: var(--ac-bad-x, #c0392b);
  --ac-read: var(--ac-read-x, #7fd0ff);
  position:relative; display:flex; flex-direction:column; min-height:0; min-width:0;
  color:var(--ac-ink);
}
.ac *{box-sizing:border-box}
.ac [hidden]{display:none !important}

/* ---- Xabarlar maydoni --------------------------------------------- */
.ac-scroll{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:14px clamp(10px, 3vw, 28px) 10px;
  background:var(--ac-bg);
  /* Juda sokin naqsh — Telegram fonidagi kabi, matnga xalaqit bermaydi */
  background-image:radial-gradient(color-mix(in srgb, var(--ac-accent) 14%, transparent) 1px, transparent 1.2px);
  background-size:22px 22px;
  scroll-behavior:auto;
}
.ac-list{display:flex; flex-direction:column; gap:2px; max-width:820px; margin:0 auto}

.ac-day{
  align-self:center; position:sticky; top:4px; z-index:2;
  margin:10px 0 8px; padding:4px 11px; border-radius:999px;
  font-size:.74rem; font-weight:650; color:var(--ac-muted);
  background:color-mix(in srgb, var(--ac-surface) 88%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.ac-sys{
  align-self:center; max-width:92%; margin:6px 0; padding:5px 12px; border-radius:12px;
  font-size:.78rem; line-height:1.45; text-align:center; color:var(--ac-muted);
  background:color-mix(in srgb, var(--ac-surface) 80%, transparent);
}
.ac-sys.ac-sys-call{color:var(--ac-ink); font-weight:600}

.ac-row{display:flex; margin-top:6px}
.ac-row.ac-cont{margin-top:2px}
.ac-row.ac-me{justify-content:flex-end}

.ac-b{
  position:relative; max-width:min(78%, 520px); min-width:64px;
  padding:7px 10px 6px 12px; border-radius:16px;
  background:var(--ac-their); color:var(--ac-ink);
  font-size:.93rem; line-height:1.45; overflow-wrap:anywhere;
  box-shadow:0 1px 1.5px rgba(16,24,38,.10);
}
.ac-me .ac-b{background:var(--ac-mine); color:var(--ac-mine-ink)}
/* Guruhning oxirgi pufakchasida "dum" */
.ac-row.ac-last:not(.ac-me) .ac-b{border-bottom-left-radius:5px}
.ac-row.ac-last.ac-me .ac-b{border-bottom-right-radius:5px}
.ac-row:not(.ac-last):not(.ac-me) .ac-b{border-bottom-left-radius:6px}
.ac-row:not(.ac-last).ac-me .ac-b{border-bottom-right-radius:6px}
.ac-row.ac-cont:not(.ac-me) .ac-b{border-top-left-radius:6px}
.ac-row.ac-cont.ac-me .ac-b{border-top-right-radius:6px}

.ac-who{display:block; font-size:.74rem; font-weight:700; color:var(--ac-accent); margin-bottom:2px}
.ac-txt{white-space:pre-wrap}
.ac-txt a{color:inherit; text-decoration:underline; text-underline-offset:2px}
/* Vaqt va belgi matn oxiriga "suzadi" — Telegram kabi */
.ac-meta{
  float:right; margin:6px 0 -4px 10px; display:inline-flex; align-items:center; gap:3px;
  font-size:.68rem; line-height:1; opacity:.72; white-space:nowrap; user-select:none;
}
.ac-tick{width:16px; height:11px}
.ac-read .ac-tick{color:var(--ac-read); opacity:1}
.ac-me .ac-meta{opacity:.8}
.ac-pend .ac-meta{opacity:.6}

/* Rasm */
.ac-img{display:block; margin:-3px -6px 4px -8px; border-radius:12px; overflow:hidden; cursor:zoom-in;
  background:color-mix(in srgb, var(--ac-muted) 12%, transparent); max-width:340px}
.ac-img img{display:block; width:100%; max-height:360px; object-fit:cover}
.ac-b.ac-only-img{padding:4px; background:transparent; box-shadow:none}
.ac-b.ac-only-img .ac-img{margin:0}
.ac-b.ac-only-img .ac-meta{position:absolute; right:12px; bottom:12px; float:none; margin:0;
  padding:3px 7px; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; opacity:1}

/* Hujjat kartasi */
.ac-doc{display:flex; align-items:center; gap:11px; padding:4px 0 6px; color:inherit; text-decoration:none; min-width:200px}
.ac-doc-ico{width:42px; height:42px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font:800 .62rem/1 system-ui,sans-serif; letter-spacing:.02em; text-transform:uppercase;
  background:color-mix(in srgb, var(--ac-accent) 20%, transparent); color:var(--ac-accent)}
.ac-me .ac-doc-ico{background:rgba(255,255,255,.18); color:#fff}
.ac-doc b{display:block; font-size:.88rem; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px}
.ac-doc small{font-size:.74rem; opacity:.72}
.ac-doc:hover b{text-decoration:underline}

/* Ovozli xabar */
.ac-voice{display:flex; align-items:center; gap:10px; min-width:220px; padding:2px 0 4px}
.ac-play{width:40px; height:40px; border-radius:50%; border:0; flex-shrink:0; cursor:pointer;
  display:grid; place-items:center; background:var(--ac-mine); color:var(--ac-mine-ink)}
.ac-me .ac-play{background:rgba(255,255,255,.95); color:var(--ac-mine)}
.ac-wave{flex:1; height:26px; display:flex; align-items:center; gap:2px; cursor:pointer}
.ac-wave i{flex:1; min-width:2px; border-radius:2px; background:currentColor; opacity:.28}
.ac-wave i.on{opacity:.9}
.ac-vdur{font-size:.72rem; opacity:.75; font-variant-numeric:tabular-nums; min-width:34px}
.ac-media{display:block; max-width:100%; border-radius:10px; margin:-2px -4px 4px -6px}
audio.ac-media{width:260px; margin:2px 0 4px}

/* Yuklanish halqasi */
.ac-prog{height:3px; border-radius:3px; background:rgba(127,127,127,.25); overflow:hidden; margin:4px 0 2px}
.ac-prog i{display:block; height:100%; width:0; background:currentColor; transition:width .2s}
.ac-fail{color:var(--ac-bad); font-size:.76rem; font-weight:650; margin-top:3px; cursor:pointer}

/* "Yozmoqda..." */
.ac-typing{display:flex; align-items:center; gap:4px; padding:10px 14px; width:max-content;
  border-radius:16px; border-bottom-left-radius:5px; background:var(--ac-their); margin-top:6px;
  box-shadow:0 1px 1.5px rgba(16,24,38,.10)}
.ac-typing i{width:7px; height:7px; border-radius:50%; background:var(--ac-muted); animation:ac-dot 1.2s infinite}
.ac-typing i:nth-child(2){animation-delay:.15s}
.ac-typing i:nth-child(3){animation-delay:.3s}
@keyframes ac-dot{0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

/* Pastga tushish tugmasi */
.ac-down{position:absolute; right:18px; bottom:92px; z-index:5; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--ac-line); background:var(--ac-surface); color:var(--ac-ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.12)}
.ac-down b{position:absolute; top:-6px; right:-4px; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--ac-accent); color:#fff; font-size:.7rem; line-height:20px; text-align:center}

/* Faylni tashlash */
.ac-drop{position:absolute; inset:8px; z-index:20; border-radius:18px; display:grid; place-items:center;
  border:2px dashed var(--ac-accent); background:color-mix(in srgb, var(--ac-surface) 90%, transparent);
  font-weight:700; color:var(--ac-accent); pointer-events:none}

/* ---- Yozish qatori ------------------------------------------------- */
.ac-foot{background:var(--ac-surface); border-top:1px solid var(--ac-line);
  padding:10px clamp(10px, 3vw, 28px) calc(10px + var(--ac-safe-bottom, 0px))}
.ac-foot-in{max-width:820px; margin:0 auto}
.ac-tray{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px}
.ac-chip{position:relative; flex-shrink:0; width:74px; height:74px; border-radius:12px; overflow:hidden;
  border:1px solid var(--ac-line); background:var(--ac-bg); display:grid; place-items:center;
  font:700 .66rem/1.2 system-ui,sans-serif; color:var(--ac-muted); text-align:center; padding:4px}
.ac-chip img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ac-chip span{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-all}
.ac-chip button{position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; border:0;
  background:rgba(0,0,0,.6); color:#fff; font-size:13px; line-height:20px; cursor:pointer; padding:0}

.ac-bar{display:flex; align-items:flex-end; gap:8px}
.ac-ibtn{width:44px; height:44px; border-radius:50%; border:0; flex-shrink:0; cursor:pointer;
  display:grid; place-items:center; background:transparent; color:var(--ac-muted);
  transition:background .15s, color .15s}
.ac-ibtn:hover:not(:disabled){background:color-mix(in srgb, var(--ac-muted) 12%, transparent); color:var(--ac-ink)}
.ac-ibtn:disabled{opacity:.35; cursor:default}
.ac-input{flex:1; min-width:0; min-height:44px; max-height:180px; resize:none; overflow-y:auto;
  padding:11px 15px; border-radius:22px; border:1px solid var(--ac-line);
  background:var(--ac-bg); color:var(--ac-ink); font:inherit; font-size:16px; line-height:1.4; outline:none}
.ac-input:focus{border-color:color-mix(in srgb, var(--ac-mine) 55%, var(--ac-line))}
.ac-send{width:44px; height:44px; border-radius:50%; border:0; flex-shrink:0; cursor:pointer;
  display:grid; place-items:center; background:var(--ac-mine); color:var(--ac-mine-ink);
  transition:transform .12s, opacity .15s}
.ac-send:active{transform:scale(.92)}
.ac-send:disabled{opacity:.4; cursor:default}
.ac-send.ac-mic{background:transparent; color:var(--ac-muted)}
.ac-send.ac-mic:hover{color:var(--ac-ink); background:color-mix(in srgb, var(--ac-muted) 12%, transparent)}

/* Ovoz yozish qatori */
.ac-rec{display:flex; align-items:center; gap:12px; min-height:44px}
.ac-rec-dot{width:10px; height:10px; border-radius:50%; background:var(--ac-bad); animation:ac-blink 1s infinite}
@keyframes ac-blink{50%{opacity:.25}}
.ac-rec-t{font-variant-numeric:tabular-nums; font-weight:650}
.ac-rec-hint{flex:1; color:var(--ac-muted); font-size:.85rem}
.ac-foot-note{text-align:center; font-size:.78rem; color:var(--ac-muted); padding:4px 0 2px}

/* ---- Rasmni kattalashtirish --------------------------------------- */
.ac-lb{position:fixed; inset:0; z-index:1000; background:rgba(8,12,18,.92); display:flex; flex-direction:column}
.ac-lb-top{display:flex; justify-content:flex-end; gap:6px; padding:12px calc(12px + env(safe-area-inset-right)) 0 12px;
  padding-top:calc(12px + env(safe-area-inset-top))}
.ac-lb-top a,.ac-lb-top button{width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.12);
  color:#fff; display:grid; place-items:center; cursor:pointer}
.ac-lb-img{flex:1; min-height:0; display:grid; place-items:center; padding:16px}
.ac-lb-img img{max-width:100%; max-height:100%; object-fit:contain; border-radius:6px}

/* ---- Qo'ng'iroq oynasi -------------------------------------------- */
.ac-call{position:fixed; inset:0; z-index:900; background:#0b1119; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden;
  font-family:inherit}
.ac-call video{background:#000}
.ac-call-remote{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ac-call[hidden]{display:none}
.ac-call.ac-fit .ac-call-remote{object-fit:contain}
/* Audio qo'ng'iroqda video element faqat ovoz uchun turadi */
.ac-call:not(.ac-vid) .ac-call-remote{opacity:0}
.ac-call-local{position:absolute; right:16px; top:calc(16px + env(safe-area-inset-top)); z-index:3;
  width:min(28vw, 220px); aspect-ratio:3/4; object-fit:cover; border-radius:14px;
  border:2px solid rgba(255,255,255,.25); box-shadow:0 8px 30px rgba(0,0,0,.5); transform:scaleX(-1)}
.ac-call-local.ac-screen{transform:none}
@media (min-width:900px){ .ac-call-local{aspect-ratio:16/10} }
.ac-call-face{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; padding:24px}
.ac-call.ac-live.ac-vid .ac-call-face{position:absolute; top:calc(18px + env(safe-area-inset-top)); left:18px;
  align-items:flex-start; text-align:left; padding:0; gap:4px}
.ac-call.ac-live.ac-vid .ac-av{display:none}
.ac-av{width:112px; height:112px; border-radius:50%; display:grid; place-items:center;
  font-size:2.4rem; font-weight:700; background:linear-gradient(135deg, #2b4a74, #b08442); color:#fff;
  box-shadow:0 0 0 0 rgba(176,132,66,.5)}
.ac-call.ac-ring .ac-av{animation:ac-ringpulse 1.6s infinite}
@keyframes ac-ringpulse{0%{box-shadow:0 0 0 0 rgba(176,132,66,.55)} 100%{box-shadow:0 0 0 34px rgba(176,132,66,0)}}
.ac-call-name{font-size:1.45rem; font-weight:700; text-shadow:0 1px 8px rgba(0,0,0,.4)}
.ac-call-st{font-size:.95rem; opacity:.8; font-variant-numeric:tabular-nums; text-shadow:0 1px 8px rgba(0,0,0,.4)}
.ac-call-ctl{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; justify-content:center; gap:16px;
  flex-wrap:wrap; padding:22px 16px calc(28px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, rgba(0,0,0,.55))}
.ac-cbtn{display:flex; flex-direction:column; align-items:center; gap:7px; font-size:.74rem; opacity:.95;
  background:none; border:0; color:#fff; cursor:pointer; font-family:inherit}
.ac-cbtn i{width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background .15s}
.ac-cbtn:hover i{background:rgba(255,255,255,.26)}
.ac-cbtn.ac-off i{background:#fff; color:#0b1119}
.ac-cbtn.ac-end i{background:#e5484d}
.ac-cbtn.ac-end:hover i{background:#d13b40}
.ac-cbtn.ac-acc i{background:#30a46c}
.ac-cbtn.ac-acc:hover i{background:#2a9460}
.ac-call-min{position:absolute; left:16px; bottom:calc(120px + env(safe-area-inset-bottom)); z-index:3}

/* Qo'ng'iroq davom etayotgani haqida chat tepasidagi yashil lenta */
.ac-callbar{display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 12px;
  background:var(--ac-ok); color:#fff; font-size:.85rem; font-weight:650; cursor:pointer}

@media (prefers-reduced-motion: reduce){
  .ac-typing i,.ac-rec-dot,.ac-call.ac-ring .ac-av{animation:none}
}