/* Суфлёр Simple Money — оформление.
   Всё тёмное и контрастное: белый текст на чёрном, без полутонов,
   потому что читается с расстояния метра и через стекло телепромптера. */

:root{
  --text-size: 56px;        /* размер текста сценария */
  --line-height: 1.35;
  --col-width: 92;          /* ширина колонки, % от экрана */
  --dim: 0.30;              /* яркость уже прочитанного */
  --brightness: 1;          /* общая яркость экрана суфлёра */
  --weight: 600;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --accent: #ffd23f;
  --panel: #17181c;
  --panel-2: #23252b;
  --stroke: #34373f;
  --muted: #9aa0aa;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background:#000; color:#fff; font-family: var(--ui);
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  touch-action: manipulation;
}
button, input, textarea, select{ font-family: var(--ui); font-size:16px; }
button{ cursor:pointer; border:none; background:none; color:inherit; }

.screen{ position:fixed; inset:0; display:none; flex-direction:column; }
.screen.on{ display:flex; }

/* ---------- Общие элементы интерфейса ---------- */
.topbar{
  display:flex; align-items:center; gap:10px;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 12px;
  border-bottom:1px solid var(--stroke); background:#0d0e11;
}
.topbar h1{ font-size:19px; margin:0; font-weight:700; letter-spacing:-0.2px; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; padding:0 16px; border-radius:12px;
  background:var(--panel-2); color:#fff; font-size:16px; font-weight:600;
  border:1px solid var(--stroke);
}
.btn:active{ background:#2f3239; }
.btn.primary{ background:var(--accent); color:#000; border-color:var(--accent); }
.btn.ghost{ background:transparent; }
.btn.danger{ color:#ff6b6b; }
.btn.sq{ padding:0; width:46px; }
.btn[disabled]{ opacity:.4; }

.body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 90px); }

/* ---------- Библиотека ---------- */
.folders{ display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; }
.chip{
  flex:0 0 auto; padding:10px 15px; border-radius:999px; background:var(--panel);
  border:1px solid var(--stroke); color:#d7dae0; font-size:15px; font-weight:600;
}
.chip.on{ background:#fff; color:#000; border-color:#fff; }

.docrow{ display:flex; gap:8px; margin-bottom:10px; align-items:stretch; }
.doc{
  display:flex; align-items:center; gap:12px; flex:1; min-width:0;
  padding:16px; border-radius:16px;
  background:var(--panel); border:1px solid var(--stroke); text-align:left;
}
.docrow .edit{ width:52px; border-radius:16px; background:var(--panel); font-size:19px; }
.doc:active{ background:var(--panel-2); }
.doc .t{ flex:1; min-width:0; }
.doc .t b{ display:block; font-size:17px; font-weight:650; margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc .t span{ font-size:13px; color:var(--muted); }
.doc .go{ font-size:18px; color:var(--accent); }

.empty{ text-align:center; color:var(--muted); padding:50px 20px; font-size:15px; line-height:1.5; }

.fab{
  position:fixed; left:14px; right:14px; bottom: calc(env(safe-area-inset-bottom) + 14px);
  display:flex; gap:10px;
}
.fab .btn{ flex:1; height:54px; }

/* ---------- Редактор ---------- */
.editor{ flex:1; display:flex; flex-direction:column; padding:14px; gap:10px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 14px); }
.editor input[type=text]{
  width:100%; padding:14px; border-radius:12px; background:var(--panel);
  border:1px solid var(--stroke); color:#fff; font-size:17px; font-weight:600;
}
.editor textarea{
  flex:1; width:100%; padding:14px; border-radius:12px; background:var(--panel);
  border:1px solid var(--stroke); color:#fff; font-size:17px; line-height:1.5; resize:none;
}
.editor .row{ display:flex; gap:10px; align-items:center; }
.editor .row .btn{ flex:1; }
.hint{ color:var(--muted); font-size:13px; }

/* ---------- Суфлёр ---------- */
#prompter{ background:#000; }
#stage{
  position:absolute; inset:0; overflow:hidden;
  filter: brightness(var(--brightness));
  transform: scale(var(--mir-x, 1), var(--mir-y, 1));
  transform-origin: center center;
}
#camera{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:none; opacity:.55;
}
#stage.cam #camera{ display:block; }
#flow{
  position:absolute; left:50%; top:0;
  width: calc(var(--col-width) * 1%);
  transform: translate3d(-50%,0,0);
  will-change: transform;
}
#mirror{ /* зеркало теперь на #stage целиком */ }
#text{
  font-size: var(--text-size);
  line-height: var(--line-height);
  font-weight: var(--weight);
  letter-spacing:-0.01em;
  color:#fff;
  padding: 0 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
#text p{ margin: 0 0 0.75em; }
#text .w{ transition: opacity .25s linear, color .25s linear; }
#text .w.done{ opacity: var(--dim); }
#text .w.now{ color: var(--accent); }

/* линия чтения */
#line{ position:absolute; left:0; right:0; height:0; pointer-events:none; display:none; }
#line.on{ display:block; }
#line::before, #line::after{
  content:""; position:absolute; top:-9px; border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
#line::before{ left:0; border-left:13px solid var(--accent); }
#line::after{ right:0; border-right:13px solid var(--accent); }

/* верхнее и нижнее затемнение, чтобы текст «выплывал» */
#stage .fade{ position:absolute; left:0; right:0; height:12%; pointer-events:none; z-index:2; }
#stage .fade.top{ top:0; background:linear-gradient(#000, transparent); }
#stage .fade.bot{ bottom:0; background:linear-gradient(transparent, #000); }

/* ---------- Панель управления суфлёра ---------- */
#hud{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
  background:linear-gradient(transparent, rgba(0,0,0,.85) 35%);
  transition: opacity .3s, transform .3s;
}
#hud.hide{ opacity:0; transform:translateY(12px); pointer-events:none; }
.hudrow{ display:flex; gap:8px; align-items:center; justify-content:center; }
.hb{
  min-width:52px; height:52px; padding:0 12px; border-radius:14px;
  background:rgba(35,37,43,.9); border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:15px; font-weight:650; display:inline-flex;
  align-items:center; justify-content:center;
}
.hb:active{ background:rgba(70,74,84,.95); }
.hb.on{ background:var(--accent); color:#000; border-color:var(--accent); }
.hb.wide{ flex:1; }

/* статус микрофона */
#mic{
  position:absolute; top: calc(env(safe-area-inset-top) + 10px); left:12px; z-index:6;
  display:flex; align-items:center; gap:7px; font-size:13px; color:#c6cad2;
  background:rgba(0,0,0,.55); padding:7px 11px; border-radius:999px;
}
#mic .dot{ width:9px; height:9px; border-radius:50%; background:#5b6070; }
#mic.live .dot{ background:#33d17a; box-shadow:0 0 10px #33d17a; }
#mic.hear .dot{ background:var(--accent); box-shadow:0 0 12px var(--accent); }
#mic.err .dot{ background:#ff5c5c; }
#mic.hidden{ opacity:0; transition:opacity .3s; }

/* обратный отсчёт */
#count{
  position:absolute; inset:0; z-index:8; display:none;
  align-items:center; justify-content:center; font-size:150px; font-weight:800;
  background:rgba(0,0,0,.65); color:#fff;
}
#count.on{ display:flex; }

/* ---------- Настройки (шторка) ---------- */
#sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:9;
  max-height: 92%; height:auto;
  background:#101116; border-top:1px solid var(--stroke);
  border-radius:20px 20px 0 0; padding:0 16px calc(env(safe-area-inset-bottom) + 20px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateY(101%); transition:transform .28s ease;
}
#sheet.on{ transform:translateY(0); }
/* шапка прилипает к верху шторки: «Готово» не уезжает при прокрутке */
.sheet-h{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:14px 0 10px; margin-bottom:2px;
  background:#101116; border-bottom:1px solid #1e2027;
}
.sheet-h b{ flex:1; font-size:18px; }
.sheet-h .hb{ height:46px; padding:0 20px; }
.set{ padding:12px 0; border-bottom:1px solid #1e2027; }
.set:last-child{ border-bottom:none; }
.set label{ display:flex; justify-content:space-between; font-size:15px; color:#d7dae0;
  margin-bottom:9px; font-weight:600; }
.set label i{ font-style:normal; color:var(--muted); font-weight:500; }
.set input[type=range]{ width:100%; height:34px; accent-color:var(--accent); }
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.seg .hb{ flex:1; min-width:70px; height:46px; font-size:14px; }


/* крупная шестерёнка: мелкий значок было не попасть пальцем */
#hSet{ font-size:26px; line-height:1; padding:0 14px; }
#hMirY, #hMirX{ font-size:20px; }

/* горизонтальная раскладка: экран низкий, кнопки и шторка ужимаются */
@media (max-height: 520px){
  #hud{ padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px); }
  .hudrow{ gap:6px; }
  .hudrow:first-child{ margin-bottom:6px !important; }
  .hb{ min-width:44px; height:42px; font-size:13px; padding:0 9px; border-radius:11px; }
  #hSet{ font-size:21px; padding:0 11px; }
  #sheet{ max-height: 96%; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); }
  .set{ padding:9px 0; }
  .set label{ margin-bottom:5px; }
  .set input[type=range]{ height:30px; }
  .seg .hb{ height:42px; }
  .sheet-h{ padding:10px 0 8px; }
}