/* ============================================================
   CHINAZIUM — мессенджер
   Тот же дизайн-канон, что на главной: токены из css/site.css,
   карточка .card-dark как оболочка, шрифты SF Pro / SF Mono.
   ============================================================ */

.messages-page{padding:118px 0 48px; min-height:100vh;}
.messages-title{margin-bottom:24px;}
.messages-title h1{font-size:clamp(2.2rem,5vw,3.5rem); margin-top:8px;}

.messenger{
  height:min(720px, calc(100vh - 220px));
  height:min(720px, calc(100dvh - 220px));
  min-height:520px;
  display:grid; grid-template-columns:340px minmax(0,1fr);
  overflow:hidden; padding:0;
  border-color:rgba(100,169,214,.28);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}

/* ---------------- СПИСОК ДИАЛОГОВ ---------------- */

.chat-list-panel{
  border-right:1px solid var(--line);
  min-width:0; overflow-y:auto;
  background:rgba(2,5,13,.28);
  scrollbar-width:thin; scrollbar-color:var(--blue) transparent;
}
.chat-list-head{
  position:sticky; top:0; z-index:2;
  padding:22px 20px 14px;
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, rgba(5,11,24,.98) 70%, rgba(5,11,24,0));
}
.chat-list-head h2{font-size:1.2rem; margin-right:auto;}
.chat-back,.new-chat-btn{
  border:0; background:none; color:var(--cyan-2);
  font:600 .8rem var(--font-display); cursor:pointer;
  transition:color .2s;
}
.chat-back:hover,.new-chat-btn:hover{color:#fff;}
.chat-back{display:none;}

.peer-picker{
  margin:0 10px 12px; padding:12px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(5,12,25,.92);
}
.peer-picker label{display:block; color:var(--muted); font-size:.72rem; margin-bottom:7px;}
.peer-picker input{
  width:100%; border:1px solid var(--line); border-radius:10px;
  background:#050b16; color:var(--ink); padding:9px 11px; outline:none;
  transition:border-color .2s;
}
.peer-picker input:focus{border-color:var(--cyan);}
.peer-results{max-height:230px; overflow-y:auto; margin-top:7px;}
.peer-option{
  width:100%; display:flex; align-items:center; gap:9px;
  padding:8px; border:0; border-radius:10px;
  background:transparent; color:var(--ink); cursor:pointer; text-align:left;
  transition:background .2s;
}
.peer-option:hover{background:rgba(30,94,159,.25);}
.peer-option .chat-avatar{width:32px; height:32px;}
.peer-none{padding:10px; color:var(--muted); font-size:.8rem;}

.chat-list{padding:0 10px 14px;}
.chat-item{
  width:100%; border:1px solid transparent; border-radius:14px; padding:12px;
  display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:11px;
  align-items:center; text-align:left; color:var(--ink);
  background:transparent; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.chat-item:hover,.chat-item.is-active{background:rgba(30,94,159,.2); border-color:rgba(100,169,214,.18);}

.chat-avatar{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg, var(--blue), #123a66);
  color:var(--cyan-2); font-weight:700; text-transform:uppercase; flex:0 0 auto;
}
.chat-avatar img,.chat-avatar video{width:100%; height:100%; display:block; object-fit:cover;}
.chat-item-copy{min-width:0;}
.chat-item-name{font-weight:650;}
.chat-item-preview{
  color:var(--muted); font-size:.78rem; margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-unread{
  min-width:22px; height:22px; padding:0 6px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--cyan); color:#051426; font:bold .7rem var(--font-mono);
  box-shadow:0 0 14px rgba(71,197,255,.45);
}
.chat-empty{padding:24px; color:var(--muted); line-height:1.55; font-size:.9rem;}

/* ---------------- КОМНАТА ---------------- */

.chat-room{min-width:0; height:100%; overflow:hidden; position:relative;}
.chat-welcome{height:100%; display:grid; place-content:center; text-align:center; color:var(--muted); padding:24px;}
.chat-welcome h2{color:var(--ink); margin:14px 0 8px;}
.chat-welcome-icon{font-size:2rem; color:var(--cyan); filter:drop-shadow(0 0 10px var(--cyan));}

.chat-active{
  height:100%; min-height:0; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto auto;
}
.chat-peer{
  padding:14px 22px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px;
  background:rgba(2,5,13,.35);
}
.chat-peer h2{font-size:1.05rem;}
.chat-peer a{color:var(--muted); font-size:.75rem; transition:color .2s;}
.chat-peer a:hover{color:var(--cyan-2);}

.chat-messages{
  min-height:0; padding:24px;
  overflow-y:scroll; overscroll-behavior:contain;
  scrollbar-gutter:stable; scrollbar-width:thin;
  scrollbar-color:var(--blue-light) rgba(2,5,13,.35);
  display:flex; flex-direction:column; gap:8px;
}
.chat-messages::-webkit-scrollbar{width:9px;}
.chat-messages::-webkit-scrollbar-track{background:rgba(2,5,13,.35);}
.chat-messages::-webkit-scrollbar-thumb{
  border:2px solid transparent; border-radius:10px;
  background:var(--blue-light); background-clip:padding-box;
}

.message{
  max-width:min(72%,560px); padding:10px 13px;
  border-radius:16px 16px 16px 4px;
  background:rgba(30,94,159,.28);
  line-height:1.45; overflow-wrap:anywhere;
}
.message.is-mine{
  align-self:flex-end; border-radius:16px 16px 4px 16px;
  background:linear-gradient(135deg, var(--blue), #123a66);
}
.message-time{
  display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:5px;
  color:rgba(238,245,255,.48); font:500 .62rem var(--font-mono); text-align:right;
}

/* Галочки: одна — доставлено, две — собеседник открыл диалог.
   Рисуем рамками, чтобы не тащить шрифт с символами. */
.msg-ticks{
  position:relative; flex:0 0 auto;
  width:14px; height:9px; display:inline-block;
}
.msg-ticks::before,.msg-ticks::after{
  content:""; position:absolute; top:1px;
  width:5px; height:9px; box-sizing:border-box;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
}
.msg-ticks::before{right:0;}
/* вторая галочка появляется только у прочитанного */
.msg-ticks::after{right:4px; opacity:0;}
.msg-ticks.is-read{color:var(--cyan-2);}
.msg-ticks.is-read::after{opacity:1;}
.message-media{display:block; max-width:100%; max-height:360px; border-radius:12px;}
.message-circle{width:min(250px,60vw); aspect-ratio:1; object-fit:cover; border-radius:50%; background:#02050d;}
.message.has-media{padding:5px;}
.message.has-media .message-text:not(:empty){display:block; padding:7px 8px 2px;}
.message.has-voice{padding:6px 8px 4px; max-width:min(82%,420px);}

/* ---------------- ГОЛОСОВЫЕ СООБЩЕНИЯ ---------------- */

.voice-message{display:flex; align-items:center; gap:12px; padding:4px 4px 4px 2px; min-width:230px;}
.voice-message audio{display:none;}

.voice-play{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(143,227,255,.45);
  background:linear-gradient(135deg, rgba(71,197,255,.24), rgba(30,94,159,.32));
  color:var(--cyan-2);
  transition:background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.voice-play:hover{border-color:var(--cyan); box-shadow:0 0 18px rgba(71,197,255,.35); transform:scale(1.04);}
.voice-icon-play{
  width:0; height:0; margin-left:3px;
  border-left:11px solid currentColor;
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.voice-icon-pause{
  display:none; width:11px; height:13px;
  border-left:3.5px solid currentColor; border-right:3.5px solid currentColor;
}
.voice-message.is-playing .voice-icon-play{display:none;}
.voice-message.is-playing .voice-icon-pause{display:block;}

.voice-body{flex:1; min-width:0; display:flex; align-items:center; gap:11px;}

.voice-wave{
  --p:0%;
  position:relative; flex:1; min-width:0; height:30px; cursor:pointer;
  touch-action:none;
}
.voice-bars{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:2px;
}
.voice-bars i{
  flex:1; min-width:2px; border-radius:2px;
  background:rgba(238,245,255,.32);
  transition:height .12s linear;
}
/* Проигранная часть — та же шкала, обрезанная по текущей позиции. */
.voice-bars.is-played{clip-path:inset(0 calc(100% - var(--p)) 0 0);}
.voice-bars.is-played i{background:var(--cyan); box-shadow:0 0 6px rgba(71,197,255,.55);}

.voice-duration{
  flex:0 0 auto;
  font:600 .68rem var(--font-mono); color:rgba(238,245,255,.62);
  font-variant-numeric:tabular-nums;
}

/* ---------------- ПОЛЕ ВВОДА ---------------- */

.chat-compose{margin:0 18px 12px;}
.compose-row{display:flex; gap:10px; align-items:flex-end;}
.chat-compose textarea{
  flex:1; resize:none; max-height:120px;
  border:1px solid rgba(100,169,214,.25); border-radius:18px;
  background:rgba(2,5,13,.7); color:var(--ink); font:inherit;
  padding:13px 16px; outline:none;
  transition:border-color .2s;
}
.chat-compose textarea:focus{border-color:var(--cyan);}
.chat-compose .btn{padding:13px 20px;}

.media-actions{display:flex; gap:6px;}
.media-btn{
  display:grid; place-items:center;
  width:44px; height:44px; flex:0 0 auto;
  border:1px solid rgba(100,169,214,.25); border-radius:50%;
  background:rgba(30,94,159,.18); color:var(--cyan-2);
  font-size:1.35rem; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.media-btn:hover{border-color:var(--cyan); background:rgba(30,94,159,.35);}
.circle-btn{font-size:.9rem; color:#ff657e;}
.voice-btn svg{width:19px; height:19px;}
.voice-btn.is-recording{border-color:#ff657e; color:#ff657e; background:rgba(255,101,126,.18);}

/* строка записи голосового — подменяет собой поле ввода */
.voice-recorder{
  display:flex; align-items:center; gap:12px;
  padding:8px 10px 8px 8px; border-radius:22px;
  border:1px solid rgba(255,101,126,.4);
  background:rgba(2,5,13,.72);
}
.voice-recorder[hidden]{display:none;}
.voice-cancel{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(100,169,214,.25); background:transparent;
  color:var(--muted); font-size:1.3rem; line-height:1; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.voice-cancel:hover{color:#ff8b9b; border-color:#ff657e;}
.voice-rec-dot{
  flex:0 0 auto; width:9px; height:9px; border-radius:50%;
  background:#ff657e; box-shadow:0 0 10px #ff657e;
  animation:voice-blink 1.2s ease-in-out infinite;
}
@keyframes voice-blink{0%,100%{opacity:1;} 50%{opacity:.25;}}
.voice-rec-label{
  flex:0 0 auto;
  font:600 .68rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:#ff8b9b;
}
.voice-rec-wave{flex:1; min-width:40px; height:26px; display:flex; align-items:center; gap:2px;}
.voice-rec-wave i{flex:1; min-width:2px; border-radius:2px; background:var(--cyan-2); opacity:.75; transition:height .1s linear;}
.voice-rec-time{
  flex:0 0 auto; font:600 .78rem var(--font-mono);
  color:var(--cyan-2); font-variant-numeric:tabular-nums;
}
.voice-stop{
  flex:0 0 auto; padding:10px 18px; border-radius:100px; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--cyan), var(--blue-light));
  color:#051426; font:700 .8rem var(--font-display);
  transition:filter .2s, box-shadow .2s;
}
.voice-stop:hover{filter:brightness(1.08); box-shadow:0 10px 26px -12px rgba(71,197,255,.7);}

/* ---------------- ПРЕДПРОСМОТР ВЛОЖЕНИЯ ---------------- */

.attachment-preview{
  position:relative; width:max-content; max-width:100%;
  margin:0 0 9px 100px; padding:7px;
  border:1px solid var(--line); border-radius:14px;
  background:rgba(2,5,13,.5);
}
.attachment-preview img,.attachment-preview video{display:block; max-width:220px; max-height:150px; border-radius:9px;}
.attachment-preview.is-voice{width:min(340px,100%); padding:6px 10px;}
.remove-attachment{
  position:absolute; right:-8px; top:-8px;
  width:25px; height:25px; border:0; border-radius:50%;
  background:#d84d66; color:#fff; cursor:pointer;
}
.chat-status{min-height:18px; color:#ff9d9d; font-size:.75rem; padding:0 22px 8px;}

/* ---------------- ЗАПИСЬ ВИДЕОКРУЖКА ---------------- */

.circle-recorder{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:rgba(0,3,10,.82); backdrop-filter:blur(8px);
}
.circle-recorder[hidden]{display:none;}
.circle-recorder-card{
  text-align:center; padding:25px;
  border:1px solid var(--line); border-radius:24px; background:#07101f;
}
.circle-recorder video{
  width:min(360px,75vw); aspect-ratio:1; object-fit:cover;
  border-radius:50%; border:3px solid var(--cyan);
}
.circle-recorder p{font:600 .85rem var(--font-mono); margin:12px;}
.circle-recorder-card>div{display:flex; gap:10px; justify-content:center;}

/* ---------------- ПОДГРУЗКА ---------------- */

.load-older{
  align-self:center; border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; background:rgba(30,94,159,.18); color:var(--cyan-2);
  font:600 .75rem var(--font-display); cursor:pointer;
  transition:background .2s;
}
.load-older:hover{background:rgba(30,94,159,.35);}
.load-older:disabled{cursor:wait; opacity:.65;}
.chat-loading{
  margin:auto; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:6px;
  color:var(--muted); font-size:.82rem;
}
.chat-loading span{width:7px; height:7px; border-radius:50%; background:var(--cyan); animation:chat-pulse 1s ease-in-out infinite;}
.chat-loading span:nth-child(2){animation-delay:.15s;}
.chat-loading span:nth-child(3){animation-delay:.3s;}
.chat-loading b{flex-basis:100%; text-align:center; font-weight:500; margin-top:4px;}
@keyframes chat-pulse{0%,100%{opacity:.3; transform:translateY(0);} 50%{opacity:1; transform:translateY(-4px);}}

/* ---------------- ТЕЛЕФОН ---------------- */

@media(max-width:720px){
  .messages-page{padding-top:96px;}
  .messages-title{margin-bottom:14px;}
  .messenger{
    height:calc(100vh - 180px); height:calc(100dvh - 180px);
    min-height:460px; display:block;
  }
  .chat-list-panel,.chat-room{height:100%;}
  .messenger.has-chat .chat-list-panel{display:none;}
  .messenger:not(.has-chat) .chat-room{display:none;}
  .chat-back{display:block;}
  .new-chat-btn{font-size:.75rem;}
  .message{max-width:86%;}
  .message.has-voice{max-width:92%;}
  .chat-messages{padding:16px;}
  .chat-compose{margin:0 8px 8px;}
  .compose-row{gap:6px;}
  .media-actions{gap:3px;}
  .media-btn{width:39px; height:39px;}
  .chat-compose .btn{font-size:0; width:44px; height:44px; padding:0; justify-content:center;}
  .chat-compose .btn::after{content:'➤'; font-size:1rem;}
  .attachment-preview{margin-left:0;}
  .voice-rec-label{display:none;}
  .voice-stop{padding:9px 14px;}
}

@media (prefers-reduced-motion: reduce){
  .voice-rec-dot{animation:none;}
  .voice-bars i,.voice-rec-wave i{transition:none;}
}