* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 13px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #525659;                 /* серый фон как у Chrome PDF viewer */
  display: flex;
  color: #e8eaed;
  overflow: hidden;
}
#app { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }
#docCol { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#brandRail { display: none; }        /* показывается только в brand-режиме */

/* ---- нативная панель Chrome ---- */
#toolbar {
  height: 44px; flex: 0 0 44px;
  background: #323639;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; gap: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
  z-index: 20; user-select: none;
}
#toolbar .tb-left { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
#toolbar .tb-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
#toolbar .tb-center { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
/* зум-группа — единый нераспадающийся блок (иначе на узком экране
   inline-содержимое span'а переносится и «−/100%/+» встают столбиком) */
#toolbar .tb-zoom { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
#filename { color: #cdd1d4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#toolbar button {
  background: transparent; border: 0; color: #cdd1d4;
  width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
#toolbar button:hover { background: rgba(255,255,255,.12); }
#toolbar button svg { display: block; }
#pageInput {
  width: 34px; height: 26px; text-align: center; border-radius: 4px;
  border: 1px solid #5f6368; background: #202124; color: #e8eaed; font-size: 12px;
}
.tb-slash, #pageCount, #zoomLevel { color: #9aa0a6; font-size: 12px; min-width: 14px; text-align: center; }
#zoomLevel { min-width: 40px; }
.tb-sep { width: 1px; height: 22px; background: #5f6368; margin: 0 6px; }

/* ---- лёгкий брендинг (mode=chip): логотип + чип менеджера в панели ---- */
.chip-only { display: none !important; }
body.chip .chip-only { display: inline-flex !important; }

.brand-logo {
  color: #7cb0ff; font-weight: 700; font-size: 13px; letter-spacing: .3px;
  white-space: nowrap; flex: 0 0 auto; align-items: center;
}

/* чип менеджера справа */
.mgr { position: relative; align-items: center; }
.mgr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: #e8eaed; cursor: pointer;
  height: 32px; padding: 0 6px 0 4px; border-radius: 16px;
}
.mgr-btn:hover { background: rgba(255,255,255,.12); }
.mgr-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: #1763eb; color: #fff; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.mgr-avatar.lg { width: 40px; height: 40px; font-size: 15px; }
.mgr-name { font-size: 12px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.mgr-caret { font-size: 9px; color: #9aa0a6; }

.mgr-pop[hidden] { display: none; }
.mgr-pop {
  position: absolute; top: 40px; right: 0; width: 240px; z-index: 30;
  background: #fff; color: #1f2328; border-radius: 12px; padding: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); text-align: left;
}
.mgr-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mgr-pop-name { font-weight: 600; font-size: 14px; }
.mgr-pop-role { font-size: 12px; color: #6b7280; }
.mgr-pop-phone { display: block; font-size: 15px; font-weight: 600; color: #1f2328; text-decoration: none; margin-bottom: 10px; }
.mgr-pop-links { display: flex; gap: 8px; }
.mgr-pop-links a {
  flex: 1; text-align: center; font-size: 12px; font-weight: 600; text-decoration: none;
  color: #1763eb; background: #eef4ff; border-radius: 8px; padding: 8px 0;
}
.mgr-pop-links a:hover { background: #e0ebff; }

/* ---- брендовый режим (mode=brand): боковой рейл + светлая тема ---- */
body.brandpage { background: #eef0f2; }
body.brandpage #brandRail {
  display: flex; flex-direction: column; gap: 20px;
  flex: 0 0 320px; width: 320px; padding: 28px 24px; overflow: auto;
  background: #fff; color: #1f2328; border-right: 1px solid #e6e8eb;
}
body.brandpage #viewerContainer { background: #eef0f2; }
body.brandpage .page-wrap { box-shadow: 0 2px 10px rgba(0,0,0,.14); }

/* светлая панель в брендовом режиме */
body.brandpage #toolbar { background: #fff; border-bottom: 1px solid #e6e8eb; box-shadow: none; }
body.brandpage #toolbar button { color: #5f6368; }
body.brandpage #toolbar button:hover { background: #f1f3f4; }
body.brandpage #filename { color: #3c4043; }
body.brandpage .tb-slash, body.brandpage #pageCount, body.brandpage #zoomLevel { color: #5f6368; }
body.brandpage #pageInput { background: #fff; border-color: #dadce0; color: #202124; }
body.brandpage .tb-sep { background: #e0e2e5; }

.rail-logo { font-weight: 800; font-size: 20px; color: #1763eb; letter-spacing: .3px; }
.rail-greeting .rail-hi { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.rail-greeting p { margin: 0; font-size: 13px; line-height: 1.55; color: #4b5563; }
.rail-mgr { text-align: center; }
.rail-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 10px;
  background: #1763eb; color: #fff; font-size: 28px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.rail-mgr-name { font-weight: 700; font-size: 16px; }
.rail-mgr-role { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
.rail-phone { font-weight: 600; color: #1f2328; text-decoration: none; font-size: 15px; }
.rail-cta {
  width: 100%; background: #1763eb; color: #fff; border: 0; border-radius: 10px;
  padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.rail-cta:hover { background: #1257d1; }
.rail-cta-done[hidden] { display: none; }
.rail-cta-done { background: #e7f6ec; color: #137a3a; border-radius: 10px; padding: 12px; font-size: 13px; text-align: center; }
.rail-msgrs { display: flex; gap: 8px; }
.rail-msgrs a {
  flex: 1; text-align: center; font-size: 13px; font-weight: 600; text-decoration: none;
  color: #1763eb; background: #eef4ff; border-radius: 8px; padding: 9px 0;
}
.rail-msgrs a:hover { background: #e0ebff; }
.rail-foot { margin-top: auto; font-size: 11px; color: #9aa0a6; text-align: center; }

/* ---- область страниц ---- */
#viewerContainer { flex: 1 1 auto; overflow: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
#pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0 40px; }
.page-wrap { position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.5); background: #fff; }
.page-wrap canvas { display: block; }
.page-num-badge {
  position: absolute; left: 8px; top: 8px; font-size: 10px; color: #fff;
  background: rgba(0,0,0,.45); padding: 1px 6px; border-radius: 8px; opacity: 0; transition: opacity .2s;
}
#viewerContainer.scrolling .page-num-badge { opacity: 1; }

/* ---- режим картинки ---- */
.img-wrap { background: #fff; }
.img-page { display: block; width: 100%; height: auto; }

/* ---- режим таблицы (sheet): вкладки листов + прокручиваемая таблица ---- */
#viewerContainer.sheet-mode #pages { align-items: stretch; padding: 16px; }
.sheet-table-wrap {
  width: 100%; overflow: auto; background: #fff; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.sheet-table-wrap table { border-collapse: collapse; width: max-content; min-width: 100%; color: #1f2328; }
.sheet-table-wrap td, .sheet-table-wrap th {
  border: 1px solid #e0e2e5; padding: 6px 10px; font-size: 13px;
  white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis;
}
/* фирменная шапка — первая строка листа */
.sheet-table-wrap tr:first-child td, .sheet-table-wrap tr:first-child th {
  background: #1763eb; color: #fff; font-weight: 600; position: sticky; top: 0; z-index: 1;
}
.sheet-table-wrap tr:nth-child(even):not(:first-child) td { background: #f7f9fc; }
.sheet-error { padding: 24px; color: #b3261e; text-align: center; }

/* панель вкладок листов (снизу, как в Excel/Google Sheets) */
#sheetTabs {
  flex: 0 0 auto; display: flex; gap: 4px; align-items: center;
  padding: 6px 10px; overflow-x: auto; background: #323639;
  border-top: 1px solid rgba(0,0,0,.35); z-index: 15;
}
.sheet-tab {
  flex: 0 0 auto; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: transparent; border: 1px solid transparent; color: #cdd1d4;
  padding: 5px 12px; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 12px;
}
.sheet-tab:hover { background: rgba(255,255,255,.10); }
.sheet-tab.active { background: #fff; color: #1763eb; font-weight: 600; }
body.brandpage #sheetTabs { background: #fff; border-top: 1px solid #e6e8eb; }
body.brandpage .sheet-tab { color: #5f6368; }
body.brandpage .sheet-tab:hover { background: #f1f3f4; }
body.brandpage .sheet-tab.active { background: #eef4ff; color: #1763eb; }

/* ---- режим office: встроенный редактор ONLYOFFICE ---- */
/* Редактор занимает всю область документа под панелью, без внутренних отступов и без скролла
   контейнера (ONLYOFFICE скроллит внутри своего iframe). */
#viewerContainer.office-embed-mode { overflow: hidden; }
#viewerContainer.office-embed-mode #pages {
  display: block; padding: 0; gap: 0; width: 100%; height: 100%;
}
#office-embed { width: 100%; height: 100%; }
#office-embed iframe { display: block; border: 0; width: 100%; height: 100%; }

/* ---- режим office: заглушка предпросмотра (фолбэк) ---- */
#viewerContainer.office-mode #pages { justify-content: center; min-height: 100%; }
.office-stub {
  max-width: 420px; margin: auto; text-align: center; padding: 40px 28px;
  background: #fff; color: #1f2328; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.office-icon { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.office-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; word-break: break-word; }
.office-text { font-size: 13px; line-height: 1.55; color: #4b5563; margin: 0 0 20px; }
.office-dl {
  background: #1763eb; color: #fff; border: 0; border-radius: 10px;
  padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.office-dl:hover { background: #1257d1; }

/* ---- режим видео (kind=video): заголовок + кастомный плеер + CTA ---- */
#viewerContainer.video-mode #pages {
  align-items: stretch;
  width: 100%; max-width: 960px; margin: 0 auto;
  padding: 24px 16px 40px; gap: 0;
}
.video-wrap { width: 100%; }
.video-title {
  margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.35;
  color: #e8eaed; word-break: break-word;
}
body.brandpage .video-title { color: #1f2328; }

.v-player {
  position: relative; width: 100%; background: #000;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.v-player video {
  display: block; width: 100%; height: auto;
  max-height: calc(100vh - 200px);   /* высокие ролики не вылезают за экран */
  background: #000;
}
/* до loadedmetadata держим пропорции 16:9, чтобы постер не схлопывался */
.v-player.v-preload video { aspect-ratio: 16 / 9; }
.v-player:fullscreen { border-radius: 0; display: flex; align-items: center; justify-content: center; }
.v-player:fullscreen video { width: 100%; height: 100%; max-height: none; }

/* затемнение и большая кнопка Play до старта / после конца */
.v-shade[hidden], .v-bigplay[hidden], .v-resume[hidden] { display: none; }
.v-shade { position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.v-bigplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: #1763eb; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.v-bigplay svg { width: 34px; height: 34px; margin-left: 4px; }
.v-bigplay:hover { background: #1257d1; }

/* плашка resume: «Продолжить с M:SS» / «Смотреть сначала» */
.v-resume {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  max-width: calc(100% - 32px);
}
.v-resume-main {
  background: #1763eb; color: #fff; border: 0; border-radius: 10px;
  padding: 13px 24px; font-size: 15px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); white-space: nowrap;
}
.v-resume-main:hover { background: #1257d1; }
.v-resume-alt {
  background: rgba(255,255,255,.92); color: #1f2328; border: 0; border-radius: 10px;
  padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.v-resume-alt:hover { background: #fff; }

/* контрол-бар поверх видео; прячется при простое мыши во время воспроизведения */
.v-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 12px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  transition: opacity .25s; user-select: none;
}
.v-player.v-idle .v-controls { opacity: 0; pointer-events: none; }
.v-player.v-idle { cursor: none; }

/* прогресс-бар: подложка + буфер + вырезы + прогресс + ползунок */
.v-bar { position: relative; height: 18px; cursor: pointer; touch-action: none; margin-bottom: 4px; }
.v-bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px;
  border-radius: 2px; background: rgba(255,255,255,.28);
}
.v-buffered { position: absolute; left: 0; top: 7px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.45); width: 0; }
.v-trimzones .v-trim { position: absolute; top: 7px; height: 4px; background: rgba(0,0,0,.6); }
.v-played { position: absolute; left: 0; top: 7px; height: 4px; border-radius: 2px; background: #1763eb; width: 0; }
.v-knob {
  position: absolute; left: 0; top: 9px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; transform: translate(-50%,-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.4); pointer-events: none;
}

.v-row { display: flex; align-items: center; gap: 2px; }
.v-row button {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.v-row button:hover { background: rgba(255,255,255,.15); }
.v-row .v-txtbtn { width: auto; padding: 0 10px; font-size: 13px; font-weight: 600; }
#vCC.active { background: rgba(255,255,255,.28); }
.v-time {
  font-size: 12px; color: #e8eaed; margin: 0 8px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.v-spacer { flex: 1 1 auto; }
.v-vol { width: 72px; accent-color: #1763eb; cursor: pointer; }
@media (hover: none) { .v-vol { display: none; } }  /* на тач-устройствах громкость — кнопками устройства */

/* ошибка загрузки видео */
.v-error {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center; color: #fff; font-size: 14px; background: rgba(0,0,0,.65);
}

/* CTA под плеером */
.v-cta-row { display: flex; justify-content: center; margin-top: 18px; }
.v-cta {
  background: #1763eb; color: #fff; border: 0; border-radius: 10px;
  padding: 13px 28px; font-size: 15px; font-weight: 600; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(23,99,235,.35);
}
.v-cta:hover { background: #1257d1; }
/* дубль CTA в brand-рейле — наследует .rail-cta */
.rail-cta-video { margin-bottom: 0; }

/* ---- экраны-заглушки: пароль / истёкшая ссылка ---- */
/* Полноэкранный оверлей поверх панели и документа; брендинг здесь не показываем. */
.gate-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: #525659;
}
.gate-card {
  width: 100%; max-width: 380px; text-align: center; padding: 40px 28px;
  background: #fff; color: #1f2328; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
.gate-icon { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.gate-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 18px; word-break: break-word; }
.gate-input {
  width: 100%; height: 42px; padding: 0 12px; margin-bottom: 12px;
  border: 1px solid #dadce0; border-radius: 10px; background: #fff; color: #1f2328;
  font-size: 15px; text-align: center;
}
.gate-input:focus { outline: none; border-color: #1763eb; box-shadow: 0 0 0 3px rgba(23,99,235,.15); }
.gate-error[hidden] { display: none; }
.gate-error { color: #b3261e; font-size: 13px; margin-bottom: 12px; }
.gate-btn {
  width: 100%; background: #1763eb; color: #fff; border: 0; border-radius: 10px;
  padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.gate-btn:hover { background: #1257d1; }
.gate-btn:disabled { opacity: .6; cursor: default; }

/* --- брендированный экран пароля: карточка менеджера + приветствие --- */
.gate-branded { max-width: 440px; padding: 36px 32px; }
.gate-avatar {
  width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
  background: #1763eb; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; overflow: hidden;
}
.gate-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gate-mgr { font-size: 18px; font-weight: 700; line-height: 1.25; }
.gate-mgr-role { display: block; font-size: 12px; font-weight: 500; color: #6b7280; margin-top: 2px; }
.gate-greeting { font-size: 14px; color: #4b5563; line-height: 1.5; margin: 12px 0 18px; }
.gate-doc {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 8px 14px; border: 1px solid #e6e8eb; border-radius: 10px; background: #f8f9fb;
  font-size: 14px; font-weight: 600; color: #1f2328; margin-bottom: 10px;
}
.gate-doc svg { color: #1763eb; flex: none; }
.gate-doc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gate-lock {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 12.5px; color: #6b7280; margin-bottom: 16px;
}
.gate-form { display: flex; flex-direction: column; gap: 10px; }
.gate-branded .gate-input { margin-bottom: 0; }
.gate-contacts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.gate-contact {
  font-size: 13px; color: #1763eb; text-decoration: none; font-weight: 600;
  padding: 6px 12px; border: 1px solid #dbe4f5; border-radius: 999px;
}
.gate-contact:hover { background: #eef3fd; }

@media (max-width: 640px) {
  #filename { font-size: 12px; }
  #toolbar #print { display: none; }        /* печать на мобилке прячем как Chrome (по id — не зависит от языка title) */
  /* право панели — по содержимому, всё остальное место отдаём имени файла */
  #toolbar .tb-right { flex: 0 0 auto; }
  .mgr-name, .mgr-caret { display: none; }                     /* на мобилке — только аватар */
  /* лёгкий брендинг: на узком экране не тесним навигацию */
  body.chip .brand-logo, body.chip #filename { display: none !important; }
  .mgr-pop { position: fixed; top: 50px; right: 8px; }

  /* брендовый режим: рейл превращаем в компактную шапку сверху */
  body.brandpage #app { flex-direction: column; }
  body.brandpage #brandRail {
    flex: 0 0 auto; width: auto; border-right: 0; border-bottom: 1px solid #e6e8eb;
    flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px;
  }
  body.brandpage .rail-avatar { width: 44px; height: 44px; font-size: 16px; margin: 0; flex: 0 0 auto; }
  body.brandpage .rail-greeting, body.brandpage .rail-msgrs,
  body.brandpage .rail-foot, body.brandpage .rail-logo,
  body.brandpage .rail-mgr-role, body.brandpage .rail-phone { display: none; }
  body.brandpage .rail-mgr { text-align: left; flex: 1 1 auto; min-width: 0; }
  body.brandpage .rail-cta { width: auto; flex: 0 0 auto; padding: 10px 14px; }

  /* видео: плеер во всю ширину, контролы пальце-пригодные */
  #viewerContainer.video-mode #pages { padding: 12px 10px 28px; }
  .video-title { font-size: 15px; margin-bottom: 10px; }
  .v-player, .v-player video { border-radius: 8px; }
  .v-row { gap: 0; }
  .v-row button { width: 40px; height: 40px; }
  .v-row .v-txtbtn { padding: 0 8px; font-size: 12px; }
  .v-time { margin: 0 4px; font-size: 11px; }
  .v-bigplay { width: 64px; height: 64px; }
  .v-bigplay svg { width: 28px; height: 28px; }
  /* на мобиле дубль CTA в компакт-шапке рейла не помещается — оставляем CTA под плеером */
  body.brandpage .rail-cta-video { display: none; }
}

/* Телефоны (телеграмовский webview, iPhone: 360–430px). Зум-кнопки прячем —
   на таче зумят пинчем; стрелки страниц прячем — листают скроллом.
   Остаются: имя файла (ellipsis), компактное «1 / N», скачивание. */
@media (max-width: 479px) {
  #toolbar .tb-zoom { display: none; }
  #toolbar #prev, #toolbar #next { display: none; }
}