/* Family messenger — strictly black & white. */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; background:#000; color:#fff; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow:hidden; user-select:none; -webkit-user-select:none;
  position:fixed; inset:0;
}
button { font-family:inherit; color:#fff; background:none; border:none; cursor:pointer; }
.hidden { display:none !important; }

.screen { position:absolute; inset:0; display:none; flex-direction:column; background:#000; }
.screen.active { display:flex; }

/* ---------- main ---------- */
#topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 4px;
}
#btn-stacks { opacity:.9; padding:6px; }
#net-dot { width:9px; height:9px; border-radius:50%; background:#333; }
#net-dot.on { background:#fff; box-shadow:0 0 8px #fff; }

#circle-wrap {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; gap:18px;
}
#circle {
  position:relative; width:min(78vw, 62vh); aspect-ratio:1/1; border-radius:50%;
  overflow:hidden; border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 0 60px rgba(255,255,255,.10), inset 0 0 60px rgba(0,0,0,.55);
  background:#050505; cursor:pointer; flex:none;
}
#fog { position:absolute; inset:0; width:100%; height:100%; }
#remote-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:50%; display:none; background:#000;
}
#circle.incall #remote-video.hasvideo { display:block; }
#call-actions { display:flex; gap:14px; }
#call-actions.hidden { display:none !important; }
.call-btn {
  padding:12px 22px; border-radius:999px; font-size:16px;
  border:1px solid rgba(255,255,255,.5);
}
.call-btn.accept { background:#fff; color:#000; font-weight:600; }
.call-btn.decline { background:transparent; color:#fff; }
#dots {
  display:flex; gap:8px; min-height:12px; cursor:pointer; padding:6px 10px;
}
#dots .dot {
  width:10px; height:10px; border-radius:50%; background:#fff;
  box-shadow:0 0 10px #fff, 0 0 22px rgba(255,255,255,.7);
  animation:dotpulse 1.8s ease-in-out infinite;
}
@keyframes dotpulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.35);} }


/* ---------- fog strip ---------- */
#strip {
  position:relative; height:calc(58px + env(safe-area-inset-bottom));
  margin:0 14px calc(10px + env(safe-area-inset-bottom));
  border-radius:999px; overflow:hidden; cursor:pointer; flex:none;
  border:1px solid rgba(255,255,255,.16);
}
#strip canvas { position:absolute; inset:0; width:100%; height:100%; }
#rec-ui {
  position:absolute; inset:0; display:flex; align-items:center; gap:10px; padding:0 18px;
  background:rgba(0,0,0,.55); font-size:14px;
}
#rec-dot { width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 12px #fff; animation:dotpulse 1s infinite; }

/* ---------- rising panel ---------- */
#panel {
  position:absolute; left:0; right:0; bottom:0; z-index:30;
  background:#0a0a0a; border-top:1px solid rgba(255,255,255,.25);
  border-radius:22px 22px 0 0; padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  animation:rise .28s ease-out;
}
@keyframes rise { from { transform:translateY(60px); opacity:.4;} to { transform:none; opacity:1;} }
#panel-text {
  width:100%; background:#161616; border:1px solid rgba(255,255,255,.25); border-radius:14px;
  color:#fff; font-size:17px; padding:12px; resize:none; outline:none;
  user-select:text; -webkit-user-select:text;
}
#attach-row { display:flex; gap:10px; margin-top:12px; align-items:center; }
.attach-btn {
  padding:9px 16px; border:1px solid rgba(255,255,255,.4); border-radius:999px;
  font-size:14px; cursor:pointer; color:#fff;
}
#panel-close { margin-left:auto; font-size:18px; padding:8px 12px; opacity:.7; }
#names-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
#names-row button {
  padding:11px 18px; border-radius:999px; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.45); font-size:16px;
}
#names-row button.selected {
  background:#fff; color:#000; border-color:#fff; font-weight:700;
  box-shadow:0 0 14px rgba(255,255,255,.35);
}
#panel-send {
  width:100%; margin-top:14px; padding:14px; border-radius:999px;
  background:#fff; color:#000; font-size:17px; font-weight:700;
}
#panel-send:disabled { opacity:.28; }
#panel-attach-preview { font-size:14px; opacity:.85; margin-bottom:10px; }
#panel-voice-note { font-size:14px; margin-bottom:10px; opacity:.9; }

/* ---------- stacks & chat ---------- */
.screen-head {
  display:flex; align-items:center; gap:10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.back-btn { font-size:16px; opacity:.85; padding:6px 4px; }
.screen-title { font-size:18px; font-weight:600; letter-spacing:.04em; }
#people-list { flex:1; overflow-y:auto; padding:10px 14px; }
.person {
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 8px; border-bottom:1px solid rgba(255,255,255,.08);
}
.person .p-ava {
  width:52px; height:52px; border-radius:50%; flex:none;
  border:1px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:radial-gradient(circle at 35% 35%, #4a4a4a, #101010 70%);
}
.person .p-name { font-size:18px; }
.person .p-sub { font-size:13px; opacity:.5; margin-top:2px; }
.person .p-dots { margin-left:auto; display:flex; gap:5px; }
.person .p-dots .dot { width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; }
#stacks-foot { padding:16px; text-align:center; }
#btn-reset { font-size:13px; opacity:.45; text-decoration:underline; }

#chat-call-btns { margin-left:auto; display:flex; gap:8px; }
#chat-call-btns button {
  padding:8px 14px; border:1px solid rgba(255,255,255,.4); border-radius:999px; font-size:14px;
}
#messages { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:82%; padding:11px 14px; border-radius:18px; font-size:16px; line-height:1.35; word-wrap:break-word; user-select:text; -webkit-user-select:text; }
.msg.mine { align-self:flex-end; background:#fff; color:#000; border-bottom-right-radius:6px; }
.msg.theirs { align-self:flex-start; background:#1b1b1b; border:1px solid rgba(255,255,255,.16); border-bottom-left-radius:6px; }
.msg .m-time { display:block; font-size:11px; opacity:.55; margin-top:5px; }
.msg img.m-photo, .msg video.m-video { max-width:100%; border-radius:12px; display:block; }

/* ---------- стопка: разделы по видам обмена ---------- */
.sec-head {
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.55;
  margin:20px 2px 4px;
}
.sec-head:first-child { margin-top:2px; }
.empty-stack { text-align:center; opacity:.45; padding:38px 24px; font-size:15px; line-height:1.6; }

/* голосовые — строки с кнопкой прослушивания и полосой прогресса */
.voice-row {
  display:flex; align-items:center; gap:12px; max-width:88%; min-width:210px;
  padding:9px 12px; border-radius:16px;
}
.voice-row.mine { align-self:flex-end; background:#fff; color:#000; border-bottom-right-radius:6px; }
.voice-row.theirs { align-self:flex-start; background:#1b1b1b; color:#fff; border:1px solid rgba(255,255,255,.16); border-bottom-left-radius:6px; }
.voice-row .v-play {
  width:38px; height:38px; border-radius:50%; flex:none; color:inherit;
  border:1.5px solid currentColor; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.voice-row .v-body { flex:1; display:flex; flex-direction:column; gap:5px; }
.voice-row .v-track { height:4px; border-radius:2px; background:rgba(130,130,130,.45); overflow:hidden; }
.voice-row .v-fill { height:100%; width:0%; background:currentColor; }
.voice-row .v-meta { font-size:11px; opacity:.6; }
.voice-row audio { display:none; }

/* фото и видео — сетка превью */
.media-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.m-cell {
  position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:#101010; border:1px solid rgba(255,255,255,.12); cursor:pointer;
}
.m-cell img, .m-cell video { width:100%; height:100%; object-fit:cover; display:block; }
.m-cell-ph {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.4;
}
.m-cell .v-badge {
  position:absolute; right:6px; bottom:6px; width:24px; height:24px; border-radius:50%;
  background:rgba(0,0,0,.68); color:#fff; font-size:10px;
  display:flex; align-items:center; justify-content:center;
}

/* файлы — отдельный список */
.file-list { display:flex; flex-direction:column; }
.file-row {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:11px 12px; border:1px solid rgba(255,255,255,.16); border-radius:14px;
  background:#141414; margin-bottom:8px; color:#fff;
}
.file-row .f-ico {
  width:38px; height:38px; border-radius:10px; flex:none;
  border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:.04em;
}
.file-row .f-main { flex:1; min-width:0; }
.file-row .f-name { display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row .f-sub { display:block; font-size:12px; opacity:.55; margin-top:2px; }
.file-row .f-dl { font-size:18px; opacity:.8; flex:none; }
#chat-strip {
  display:flex; gap:8px; align-items:flex-end;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.14);
}
#chat-text {
  flex:1; background:#161616; border:1px solid rgba(255,255,255,.25); border-radius:18px;
  color:#fff; font-size:16px; padding:10px 12px; resize:none; outline:none; max-height:110px;
  user-select:text; -webkit-user-select:text;
}
#chat-strip button {
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
  font-size:17px; flex:none; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
#chat-strip #chat-send { background:#fff; color:#000; font-weight:700; } /* специфичность выше #chat-strip button: стрелка обязана быть ЧЁРНОЙ на белом (иначе «непонятный белый круг») */
#chat-voice.recording { background:#fff; color:#000; box-shadow:0 0 16px #fff; }
#chat-attach-row { display:flex; gap:10px; padding:0 12px 12px; }

/* ---------- viewer ---------- */
#viewer {
  position:fixed; inset:0; z-index:50; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
#viewer-circle {
  width:min(88vw, 70vh); aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center;
  background:#050505;
}
#viewer-img, #viewer-video { width:100%; height:100%; object-fit:cover; display:none; }
#viewer-name { font-size:15px; opacity:.75; }
#viewer-close {
  position:absolute; top:calc(14px + env(safe-area-inset-top)); right:16px;
  font-size:22px; padding:10px; opacity:.85;
}
#viewer-download { color:#fff; text-decoration:underline; font-size:15px; }

/* ---------- no invite ---------- */
#noinvite-box { margin:auto; text-align:center; padding:30px; line-height:1.7; font-size:17px; opacity:.9; }
.mini-fog { font-size:80px; opacity:.35; margin-bottom:14px; }