/* ========================================================================
   m-lotos.ru — чат-консультант, «Жидкое стекло», вариант «Светлое стекло»
   Подключается ПОСЛЕДНИМ в index.xsl (после ml-fix.css):
   <link rel="stylesheet" href="/premium/ml-chat-glass.css?v=20260924-1"/>
   <script src="/premium/ml-chat-glass.js?v=20260924-1" defer="defer"></script>
   Меняет только внешний вид чата. Логику widget.js не трогает.
   Откат: убрать эти две строки из index.xsl.
   ===================================================================== */

html body div#ml-chat#ml-chat{
  --cg-text:#10192b; --cg-muted:#5e6a7e; --cg-accent:#1d5aa6;
  --cg-fill:rgba(255,255,255,.30); --cg-fill-in:rgba(255,255,255,.42);
  --cg-rim1:rgba(255,255,255,.95); --cg-rim2:rgba(255,255,255,.25);
  --cg-btn:linear-gradient(160deg,#3d86e0,#1a4f96);
  width:390px !important; height:680px !important; max-height:calc(100vh - 40px) !important;
  right:20px !important; bottom:20px !important;
  border-radius:30px !important; border:0 !important; overflow:hidden !important;
  color:var(--cg-text) !important;
  background:var(--cg-fill) !important;
  background-image:radial-gradient(120% 55% at 15% -8%,rgba(255,255,255,.55),transparent 60%) !important;
  -webkit-backdrop-filter:blur(28px) saturate(180%) !important;
  backdrop-filter:blur(28px) saturate(180%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),
             inset 0 0 24px rgba(255,255,255,.35),0 30px 70px rgba(20,40,80,.22),0 2px 8px rgba(20,40,80,.06) !important;
}
/* световая кромка по контуру */
html body div#ml-chat#ml-chat::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:3;
  background:linear-gradient(145deg,var(--cg-rim1) 0%,var(--cg-rim2) 30%,transparent 55%,var(--cg-rim2) 80%,var(--cg-rim1) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
html body div#ml-chat#ml-chat > *{position:relative; z-index:1}

/* ---------- шапка ---------- */
html body div#ml-chat#ml-chat .ml-head{
  background:transparent !important; border:0 !important; padding:18px 16px 12px 18px !important; gap:12px !important; color:var(--cg-text) !important;
}
html body div#ml-chat#ml-chat .ml-head .ml-glass-logo,
html body div#ml-chat#ml-chat .ml-head > img{
  flex:0 0 48px !important; width:48px !important; height:48px !important; border-radius:50% !important;
  background:rgba(255,255,255,.45) !important; border:0 !important; position:relative;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 12px rgba(255,255,255,.5),0 4px 14px rgba(20,40,80,.10) !important;
}
html body div#ml-chat#ml-chat .ml-head b{font-size:17px !important; font-weight:800 !important; letter-spacing:-.01em; color:var(--cg-text) !important}
html body div#ml-chat#ml-chat .ml-head .t span{font-size:12.5px !important; color:var(--cg-muted) !important}
html body div#ml-chat#ml-chat .ml-head .t b .ml-cg-brand{font-size:inherit !important; font-weight:inherit !important; color:var(--cg-accent) !important}
html body div#ml-chat#ml-chat .ml-head .status{background:#34c173 !important; box-shadow:0 0 8px rgba(52,193,115,.7)}
html body div#ml-chat#ml-chat .ml-head .close{
  width:36px !important; height:36px !important; padding:0 !important; border-radius:50% !important; border:0 !important;
  background:rgba(255,255,255,.5) !important; color:#34425a !important; opacity:1 !important; font-size:15px !important;
  box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(20,40,80,.08) !important; display:flex; align-items:center; justify-content:center;
}

/* строка доверия (добавляется скриптом) */
html body div#ml-chat#ml-chat .ml-cg-trust{
  margin:0 14px; padding:8px 12px; border-radius:14px; display:flex; justify-content:center; gap:14px;
  font-size:11.5px; color:var(--cg-muted); background:var(--cg-fill-in);
  box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(20,40,80,.05);
}
html body div#ml-chat#ml-chat .ml-cg-trust i{font-style:normal; color:var(--cg-accent); margin-right:4px}

/* ---------- переписка ---------- */
html body div#ml-chat#ml-chat .ml-body{background:transparent !important; padding:14px 16px 6px !important}
html body div#ml-chat#ml-chat .ml-date span{
  background:transparent !important; border:0 !important; padding:0 !important;
  font-size:11px !important; letter-spacing:.1em; text-transform:uppercase; color:var(--cg-muted) !important;
}
html body div#ml-chat#ml-chat .ml-cg-who{font-size:11.5px; font-weight:700; color:var(--cg-muted); margin:0 0 6px 6px}
html body div#ml-chat#ml-chat .ml-msg{font-size:14px !important; line-height:1.5 !important; padding:12px 15px 8px !important; max-width:92% !important}
html body div#ml-chat#ml-chat .ml-msg.op{
  background:var(--cg-fill-in) !important; border:0 !important; color:var(--cg-text) !important;
  border-radius:22px 22px 22px 8px !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 16px rgba(255,255,255,.4),0 4px 14px rgba(20,40,80,.06) !important;
}
html body div#ml-chat#ml-chat .ml-msg.me{
  background:var(--cg-btn) !important; color:#fff !important; border:0 !important; border-radius:22px 22px 8px 22px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px rgba(29,79,150,.25) !important;
}
html body div#ml-chat#ml-chat .ml-msg .time{color:var(--cg-muted) !important}
html body div#ml-chat#ml-chat .ml-msg.me .time{color:rgba(255,255,255,.75) !important}
html body div#ml-chat#ml-chat .ml-msg.sys{background:none !important; box-shadow:none !important; color:var(--cg-muted) !important}
html body div#ml-chat#ml-chat .ml-typing{color:var(--cg-muted) !important}

/* ---------- быстрые кнопки ---------- */
html body div#ml-chat#ml-chat .ml-quick{padding:6px 16px 12px !important; gap:7px !important}
html body div#ml-chat#ml-chat .ml-quick button{
  position:relative; border:0 !important; border-radius:999px !important; padding:9px 14px !important;
  font-size:12.5px !important; font-weight:700 !important; color:var(--cg-text) !important;
  background:var(--cg-fill-in) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 12px rgba(255,255,255,.4),0 3px 10px rgba(20,40,80,.07) !important;
  transition:transform .15s !important;
}
html body div#ml-chat#ml-chat .ml-quick button:hover{transform:translateY(-1px); background:rgba(255,255,255,.7) !important; color:var(--cg-accent) !important}
html body div#ml-chat#ml-chat .ml-quick button.ml-cg-main{
  background:var(--cg-btn) !important; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 6px rgba(0,0,0,.15),0 6px 16px rgba(29,79,150,.3) !important;
}
html body div#ml-chat#ml-chat .ml-quick button.ml-cg-main:hover{color:#fff !important}

/* ---------- форма ---------- */
html body div#ml-chat#ml-chat .ml-form{background:transparent !important; border:0 !important; padding:4px 14px 14px !important}
html body div#ml-chat#ml-chat .ml-contact{gap:8px !important}
html body div#ml-chat#ml-chat .ml-contact input{
  border:0 !important; border-radius:14px !important; padding:10px 13px !important; font-size:13px !important; font-weight:600;
  background:var(--cg-fill-in) !important; color:var(--cg-text) !important; outline:none;
  box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(20,40,80,.05) !important;
}
html body div#ml-chat#ml-chat .ml-input{
  border:0 !important; border-radius:24px !important; padding:5px 5px 5px 10px !important; align-items:center !important;
  background:var(--cg-fill-in) !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 14px rgba(255,255,255,.45),0 4px 14px rgba(20,40,80,.07) !important;
}
html body div#ml-chat#ml-chat .ml-input:focus-within{box-shadow:inset 0 1px 0 #fff,0 0 0 2px rgba(29,90,166,.35),0 4px 14px rgba(20,40,80,.07) !important}
html body div#ml-chat#ml-chat .ml-input textarea{
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  font-size:14px !important; color:var(--cg-text) !important; padding:8px 4px !important;
}
html body div#ml-chat#ml-chat .ml-contact input::placeholder,
html body div#ml-chat#ml-chat .ml-input textarea::placeholder{color:var(--cg-muted) !important; opacity:1}
html body div#ml-chat#ml-chat #ml-send{
  flex:0 0 44px !important; width:44px !important; height:44px !important; border-radius:50% !important; position:relative; overflow:hidden;
  background:var(--cg-btn) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(0,0,0,.18),0 8px 20px rgba(29,79,150,.35) !important;
}
html body div#ml-chat#ml-chat #ml-send::after{
  content:""; position:absolute; left:7px; right:7px; top:3px; height:45%; border-radius:999px; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));
}
html body div#ml-chat#ml-chat .ml-note{font-size:10.5px !important; margin-top:9px !important; color:var(--cg-muted) !important}
html body div#ml-chat#ml-chat .ml-note a{color:var(--cg-muted) !important; text-decoration:underline}

/* ---------- телефон: на весь экран ---------- */
@media (max-width:480px){
  html body div#ml-chat#ml-chat{
    right:0 !important; bottom:0 !important; width:100% !important; height:100% !important; max-height:100% !important;
    border-radius:0 !important; background-color:rgba(255,255,255,.55) !important;
  }
  html body div#ml-chat#ml-chat::before{display:none}
}

/* ---------- браузеры без размытия: делаем подложку плотнее ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body div#ml-chat#ml-chat{background:rgba(246,249,253,.97) !important}
}