/* ===========================================================================
   Комната митинга — тот же оливковый мир, только глубже: на тёмном оливковом
   лица в видео читаются лучше всего. Кнопки остаются сливочно-белыми.
   =========================================================================== */

.room{
  position:fixed; inset:0; display:flex; flex-direction:column;
  background:var(--olive-900); color:var(--fg); z-index:60; font-family:var(--font);
  --r-glass:rgba(255,255,255,.1);
  --r-border:rgba(255,255,255,.18);
  --r-muted:rgba(255,255,255,.56);
  --r-tile:#3A3D2B;
}
.room *{box-sizing:border-box}

/* ------------------------------------------------------------- шапка ----- */
.room-top{
  display:flex; align-items:center; gap:10px; padding:calc(10px + var(--safe-t)) 14px 10px;
  background:rgba(255,255,255,.07); border-bottom:1px solid var(--r-border);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); flex:0 0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.room-top .who{flex:1; min-width:0}
.room-top .who b{display:block; font-size:16px; font-weight:800; letter-spacing:-.015em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.room-top .who span{display:block; font-size:12px; color:var(--r-muted); font-family:ui-monospace,Menlo,monospace; letter-spacing:.08em}
.room-top .rbtn{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--r-glass); border:1px solid var(--r-border); color:var(--fg);
  cursor:pointer; font-size:16px; font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.room-top .rbtn:active{transform:scale(.92)}
.timer{font-size:12.5px; color:var(--r-muted); font-variant-numeric:tabular-nums; padding:0 4px; font-weight:700}
.net{font-size:11px; padding:3px 8px; border-radius:999px; background:var(--r-glass); border:1px solid var(--r-border); font-weight:700}
.net.bad{background:rgba(194,96,79,.28); border-color:rgba(233,167,155,.45)}

/* ------------------------------------------------------------- сцена ----- */
.stage{flex:1; position:relative; min-height:0; overflow:hidden}

.grid{position:absolute; inset:0; display:grid; gap:8px; padding:8px; grid-auto-rows:1fr}
.grid[data-n="1"]{grid-template-columns:1fr}
.grid[data-n="2"]{grid-template-columns:1fr}
.grid[data-n="3"],.grid[data-n="4"]{grid-template-columns:1fr 1fr}
.grid[data-n="5"],.grid[data-n="6"]{grid-template-columns:1fr 1fr}
.grid[data-n="7"],.grid[data-n="8"],.grid[data-n="9"]{grid-template-columns:1fr 1fr 1fr}
.grid.many{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media (min-width:760px){
  .grid[data-n="2"]{grid-template-columns:1fr 1fr}
  .grid[data-n="3"]{grid-template-columns:1fr 1fr 1fr}
}

.tile{
  position:relative; border-radius:20px; overflow:hidden; background:var(--r-tile);
  border:1px solid var(--r-border); min-height:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.tile video{width:100%; height:100%; object-fit:cover; display:block; background:var(--r-tile)}
.tile.mirror video{transform:scaleX(-1)}
.tile.screen video{object-fit:contain; background:var(--olive-900)}
.tile.speaking{box-shadow:inset 0 0 0 3px var(--cream)}
.tile .novid{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(168deg,#43462F,#343725)}
.tile .label{
  position:absolute; left:8px; bottom:8px; right:8px; display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; pointer-events:none;
}
.tile .label .nm{
  padding:4px 10px; border-radius:999px; background:rgba(30,32,20,.66); color:var(--fg);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.tile .badge{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:11px;
  background:rgba(30,32,20,.66); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.tile .badge.mute{background:rgba(194,96,79,.9)}
.tile .hand{position:absolute; top:8px; left:8px; font-size:20px; animation:handwave 1.6s ease-in-out infinite}
@keyframes handwave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(12deg)}}
.tile .pin{
  position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%;
  background:rgba(30,32,20,.66); border:1px solid var(--r-border); color:var(--fg);
  display:grid; place-items:center; font-size:12px; cursor:pointer; opacity:0; transition:opacity .15s;
}
.tile:hover .pin{opacity:1}

.speaker{position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; padding:8px}
.speaker .main{flex:1; min-height:0}
.speaker .strip{
  flex:0 0 auto; height:96px; display:flex; gap:8px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.speaker .strip::-webkit-scrollbar{display:none}
.speaker .strip .tile{flex:0 0 132px; height:96px}

/* ---------------------------------------------------- нижняя панель ------ */
.room-bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 8px calc(10px + var(--safe-b));
  background:rgba(255,255,255,.07); border-top:1px solid var(--r-border);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  overflow-x:auto; scrollbar-width:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.room-bar::-webkit-scrollbar{display:none}
.tool{
  flex:0 0 auto; width:60px; padding:7px 2px; border:none; background:transparent; color:var(--fg);
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  font-family:inherit; font-size:10.5px; font-weight:700; border-radius:14px; position:relative;
}
.tool .ci{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:18px;
  background:var(--r-glass); border:1px solid var(--r-border); transition:transform .12s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.tool:active .ci{transform:scale(.9)}
/* Включено — белая кнопка, как и везде в программе. */
.tool.on .ci{
  background:linear-gradient(168deg,var(--cream-bright),var(--cream) 52%,var(--cream-dim));
  border-color:transparent; color:var(--olive-800);
  box-shadow:0 6px 14px rgba(20,22,12,.35), inset 0 2px 2px rgba(255,255,255,.9);
}
.tool.off .ci{background:rgba(194,96,79,.88); border-color:transparent}
.tool.leave .ci{background:rgba(194,96,79,.95); border-color:transparent}
.tool .nn{
  position:absolute; top:2px; right:6px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--cream); color:var(--olive-800); font-size:10px; font-weight:800; display:grid; place-items:center;
}

/* ------------------------------------------------------------ панель ----- */
.panel{
  position:absolute; top:0; right:0; bottom:0; width:min(360px,86vw); z-index:20;
  background:rgba(46,48,34,.94); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px);
  border-left:1px solid var(--r-border); display:flex; flex-direction:column;
  animation:slidein .26s cubic-bezier(.22,1,.36,1);
}
@keyframes slidein{from{transform:translateX(100%)}}
.panel-head{display:flex; align-items:center; gap:10px; padding:14px 14px 12px; border-bottom:1px solid var(--r-border)}
.panel-head b{flex:1; font-size:16.5px; font-weight:800}
.panel-head .rbtn{
  width:34px; height:34px; border-radius:50%; background:var(--r-glass);
  border:1px solid var(--r-border); color:var(--fg); cursor:pointer; font-family:inherit;
}
.panel-body{flex:1; overflow:auto; padding:10px}
.panel-foot{padding:10px 12px calc(12px + var(--safe-b)); border-top:1px solid var(--r-border)}

.prow{display:flex; align-items:center; gap:11px; padding:9px 8px; border-radius:14px}
.prow:hover{background:rgba(255,255,255,.06)}
.prow .tx{flex:1; min-width:0}
.prow .tx b{display:block; font-size:14.5px; font-weight:700}
.prow .tx span{display:block; font-size:12px; color:var(--r-muted); font-weight:500}
.prow .rbtn{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; background:var(--r-glass);
  border:1px solid var(--r-border); color:var(--fg); cursor:pointer; font-family:inherit;
}

.msg{margin:0 0 12px}
.msg .mh{display:flex; gap:7px; align-items:baseline; margin-bottom:2px}
.msg .mh b{font-size:13px; font-weight:800}
.msg .mh i{font-size:11px; color:var(--r-muted); font-style:normal}
.msg .mb{
  font-size:14.5px; background:rgba(255,255,255,.09); padding:9px 12px; border-radius:16px;
  border-top-left-radius:5px; white-space:pre-wrap; word-break:break-word; font-weight:500;
}
.msg.me .mb{
  background:linear-gradient(168deg,var(--cream-bright),var(--cream-dim)); color:var(--olive-800);
  border-top-left-radius:16px; border-top-right-radius:5px; font-weight:600;
}
.msg.me .mh{justify-content:flex-end}
.chat-input{display:flex; gap:8px}
.chat-input input{
  flex:1; padding:12px 14px; border-radius:16px; border:1px solid var(--r-border);
  background:rgba(255,255,255,.09); color:var(--fg); font-family:inherit; font-size:15px; font-weight:600;
}
.chat-input input::placeholder{color:var(--faint); font-weight:500}
.chat-input input:focus{outline:2px solid var(--cream); outline-offset:1px}
.chat-input button{
  width:46px; border-radius:16px; border:none; cursor:pointer; font-size:17px; color:var(--olive-800);
  background:linear-gradient(168deg,var(--cream-bright),var(--cream) 52%,var(--cream-dim));
  box-shadow:inset 0 2px 2px rgba(255,255,255,.9);
}

/* -------------------------------------------------------------- доска ---- */
/* Лист остаётся светлым: писать и считать удобно на бумаге, а не на тёмном. */
.board{position:absolute; inset:0; display:flex; flex-direction:column; background:#F7F5E6; z-index:15}
.board-canvas-wrap{flex:1; position:relative; min-height:0; overflow:hidden; touch-action:none}
.board canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
#boardPaper{z-index:0}
#boardInk{z-index:1}
#boardLive{z-index:2}
.board-text-layer{position:absolute; inset:0; z-index:3; pointer-events:none}
.board-text{
  position:absolute; pointer-events:auto; min-width:40px; padding:2px 4px; border-radius:6px;
  border:1px dashed transparent; background:transparent; font-family:var(--font); color:inherit;
  white-space:pre-wrap; outline:none; line-height:1.35; font-weight:600;
}
.board-text:focus{border-color:var(--olive); background:rgba(88,90,67,.08)}

.board-bar{
  flex:0 0 auto; display:flex; align-items:center; gap:5px; padding:9px 10px;
  background:rgba(46,48,34,.94); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border-top:1px solid var(--r-border); overflow-x:auto; scrollbar-width:none;
}
.board-bar::-webkit-scrollbar{display:none}
.bt{
  flex:0 0 auto; width:40px; height:40px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:var(--fg);
  cursor:pointer; font-size:16px; font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.bt.on{
  background:linear-gradient(168deg,var(--cream-bright),var(--cream) 52%,var(--cream-dim));
  border-color:transparent; color:var(--olive-800);
}
.bt:active{transform:scale(.92)}
.bt.wide{width:auto; padding:0 13px; font-size:13px; font-weight:700; gap:6px; display:flex; align-items:center}
.sep{width:1px; height:26px; background:rgba(255,255,255,.2); flex:0 0 auto; margin:0 3px}
.swatch{width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; flex:0 0 auto}
.swatch.on{border-color:var(--cream); box-shadow:0 0 0 2px rgba(30,32,20,.55)}
.sizes{display:flex; gap:4px; align-items:center; flex:0 0 auto}
.sz{width:32px; height:32px; border-radius:11px; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18)}
.sz.on{background:linear-gradient(168deg,var(--cream-bright),var(--cream-dim)); border-color:transparent}
.sz i{display:block; border-radius:50%; background:var(--fg)}
.sz.on i{background:var(--olive-800)}

.board-hint{
  position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:4;
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:rgba(46,48,34,.82); color:var(--fg); pointer-events:none;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}

/* --------------------------- Mark AI: вместе в программе ----------------- */
.cobrowse{position:absolute; inset:0; display:flex; flex-direction:column; background:var(--olive-900); z-index:15}
.cobrowse-head{
  flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:9px 12px;
  background:rgba(255,255,255,.07); border-bottom:1px solid var(--r-border); font-size:13px;
}
.cobrowse-head .tt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700}
.cobrowse-frame{flex:1; position:relative; min-height:0; background:#fff}
.cobrowse-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.cobrowse-shield{
  position:absolute; inset:0; z-index:5; background:transparent; cursor:not-allowed;
  display:grid; place-items:start center; padding-top:12px;
}
.cobrowse-shield span{
  padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:rgba(46,48,34,.86); color:var(--fg);
}
.ptr{position:absolute; z-index:8; width:16px; height:16px; margin:-8px 0 0 -8px; pointer-events:none;
  transition:transform .07s linear}
.ptr b{position:absolute; inset:0; border-radius:50%; border:2px solid var(--cream-bright);
  background:var(--c,#EDEBD6); box-shadow:0 2px 8px rgba(20,22,12,.5)}
.ptr i{
  position:absolute; left:18px; top:-2px; font-style:normal; font-size:11px; font-weight:800;
  white-space:nowrap; padding:2px 8px; border-radius:999px; color:var(--olive-800);
  background:var(--c,#EDEBD6); box-shadow:0 2px 8px rgba(20,22,12,.4);
}

/* ---------------------------------------------------------- предбанник --- */
.lobby{position:absolute; inset:0; display:grid; place-items:center; padding:20px; z-index:25; background:var(--olive-900)}
.lobby-card{width:100%; max-width:440px; text-align:center}
.lobby-prev{
  width:100%; aspect-ratio:4/3; border-radius:24px; overflow:hidden; background:var(--r-tile);
  border:1px solid var(--r-border); margin-bottom:18px; position:relative;
}
.lobby-prev video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1)}
.lobby-card h3{margin:0 0 6px; font-size:23px; font-weight:900; letter-spacing:-.02em}
.lobby-card p{margin:0 0 18px; color:var(--r-muted); font-size:14.5px; font-weight:500}
.lobby-row{display:flex; gap:10px; justify-content:center; margin-bottom:16px}
.lobby-row .rbtn{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:20px;
  background:var(--r-glass); border:1px solid var(--r-border); color:var(--fg);
  cursor:pointer; font-family:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.lobby-row .rbtn.off{background:rgba(194,96,79,.88); border-color:transparent}
.reaction{position:absolute; bottom:80px; font-size:34px; z-index:30; pointer-events:none;
  animation:floatup 2.4s ease-out forwards}
@keyframes floatup{
  0%{opacity:0; transform:translateY(0) scale(.6)}
  12%{opacity:1; transform:translateY(-14px) scale(1.1)}
  100%{opacity:0; transform:translateY(-190px) scale(1)}
}


/* ===========================================================================
   Сцена митинга — новый порядок.
   Вдвоём: собеседник на весь экран, ты в маленьком окошке, которое таскается
   пальцем куда угодно. Много народу: все внизу полосой, крупно — кто говорит.
   Свайп справа налево — сетка, где все одинаково большие.
   =========================================================================== */

/* Углы как у иконок iOS: не обычное скругление, а суперэллипс. */
.squircle{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M100.0%2C50.0%20L99.9%2C70.8%20L99.5%2C77.4%20L98.9%2C82.1%20L98.0%2C85.8%20L96.8%2C88.8%20L95.3%2C91.4%20L93.5%2C93.5%20L91.4%2C95.3%20L88.8%2C96.8%20L85.8%2C98.0%20L82.1%2C98.9%20L77.4%2C99.5%20L70.8%2C99.9%20L50.0%2C100.0%20L29.2%2C99.9%20L22.6%2C99.5%20L17.9%2C98.9%20L14.2%2C98.0%20L11.2%2C96.8%20L8.6%2C95.3%20L6.5%2C93.5%20L4.7%2C91.4%20L3.2%2C88.8%20L2.0%2C85.8%20L1.1%2C82.1%20L0.5%2C77.4%20L0.1%2C70.8%20L0.0%2C50.0%20L0.1%2C29.2%20L0.5%2C22.6%20L1.1%2C17.9%20L2.0%2C14.2%20L3.2%2C11.2%20L4.7%2C8.6%20L6.5%2C6.5%20L8.6%2C4.7%20L11.2%2C3.2%20L14.2%2C2.0%20L17.9%2C1.1%20L22.6%2C0.5%20L29.2%2C0.1%20L50.0%2C0.0%20L70.8%2C0.1%20L77.4%2C0.5%20L82.1%2C1.1%20L85.8%2C2.0%20L88.8%2C3.2%20L91.4%2C4.7%20L93.5%2C6.5%20L95.3%2C8.6%20L96.8%2C11.2%20L98.0%2C14.2%20L98.9%2C17.9%20L99.5%2C22.6%20L99.9%2C29.2Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M100.0%2C50.0%20L99.9%2C70.8%20L99.5%2C77.4%20L98.9%2C82.1%20L98.0%2C85.8%20L96.8%2C88.8%20L95.3%2C91.4%20L93.5%2C93.5%20L91.4%2C95.3%20L88.8%2C96.8%20L85.8%2C98.0%20L82.1%2C98.9%20L77.4%2C99.5%20L70.8%2C99.9%20L50.0%2C100.0%20L29.2%2C99.9%20L22.6%2C99.5%20L17.9%2C98.9%20L14.2%2C98.0%20L11.2%2C96.8%20L8.6%2C95.3%20L6.5%2C93.5%20L4.7%2C91.4%20L3.2%2C88.8%20L2.0%2C85.8%20L1.1%2C82.1%20L0.5%2C77.4%20L0.1%2C70.8%20L0.0%2C50.0%20L0.1%2C29.2%20L0.5%2C22.6%20L1.1%2C17.9%20L2.0%2C14.2%20L3.2%2C11.2%20L4.7%2C8.6%20L6.5%2C6.5%20L8.6%2C4.7%20L11.2%2C3.2%20L14.2%2C2.0%20L17.9%2C1.1%20L22.6%2C0.5%20L29.2%2C0.1%20L50.0%2C0.0%20L70.8%2C0.1%20L77.4%2C0.5%20L82.1%2C1.1%20L85.8%2C2.0%20L88.8%2C3.2%20L91.4%2C4.7%20L93.5%2C6.5%20L95.3%2C8.6%20L96.8%2C11.2%20L98.0%2C14.2%20L98.9%2C17.9%20L99.5%2C22.6%20L99.9%2C29.2Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

.stage-solo{position:absolute; inset:0}
.stage-solo .big{position:absolute; inset:0; border-radius:0; border:none}
.stage-solo .big video{border-radius:0}

.pip{
  position:absolute; z-index:14; width:116px; height:164px;
  overflow:hidden; cursor:grab; touch-action:none;
  filter:drop-shadow(0 12px 26px rgba(20,22,12,.6));
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.pip.dragging{cursor:grabbing; transition:none; transform:scale(1.05)}
.pip video{width:100%; height:100%; object-fit:cover; display:block; background:var(--r-tile)}
.pip .novid{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(168deg,#43462F,#343725)}
.pip .plabel{
  position:absolute; left:0; right:0; bottom:0; padding:16px 8px 8px; text-align:center;
  font-size:11.5px; font-weight:700; color:var(--fg); pointer-events:none;
  background:linear-gradient(to top,rgba(20,22,12,.7),transparent);
}
.pip .pmute{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:10px; background:rgba(194,96,79,.9);
}
@media (max-width:420px){ .pip{width:100px; height:142px} }

/* Полоса снизу, когда людей много. */
.stage-many{position:absolute; inset:0; display:flex; flex-direction:column}
.stage-many .big{flex:1; min-height:0; margin:8px 8px 0; border-radius:22px; overflow:hidden; position:relative}
.stage-many .rail{
  flex:0 0 auto; display:flex; gap:8px; padding:8px; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.stage-many .rail::-webkit-scrollbar{display:none}
.stage-many .rail .tile{flex:0 0 96px; height:128px; border-radius:26px}
.stage-many .rail .tile.active{box-shadow:inset 0 0 0 3px var(--cream)}
.stage-many .rail .tile .label{left:5px; right:5px; bottom:5px; font-size:10.5px}
.stage-many .rail .tile .label .nm{padding:3px 7px}
.stage-many .rail .tile .pin{display:none}

/* Подсказка про свайп — показывается один раз. */
.swipe-hint{
  position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:16;
  padding:9px 14px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:rgba(46,48,34,.86); color:var(--fg); pointer-events:none;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  animation:swipehint 2.6s ease-in-out infinite;
}
@keyframes swipehint{0%,100%{transform:translate(0,-50%)}50%{transform:translate(-9px,-50%)}}