/* =====================================================
   Всплывающие слои и пустые состояния: тост, лайтбокс фото,
   CTA-кнопки «добавить приём» / «поделиться отчётом»,
   модалка-пояснение про пищевой день.
   ===================================================== */

/* ----------------- Toast ----------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(16px);
  background: var(--text-primary);
  color: var(--surface);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
  z-index: 3500;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----------------- Лайтбокс фото ----------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lightbox.show { display: flex; }
.lightbox-stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-md);
  object-fit: contain;
}
.lightbox-strip {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  overflow-x: auto;
  max-width: 100%;
}
.lightbox-strip img {
  width: 60px;
  height: 60px;
  border-radius: var(--r-sm);
  object-fit: cover;
  opacity: 0.55;
  border: 2px solid transparent;
  cursor: pointer;
  flex: none;
}
.lightbox-strip img.active { opacity: 1; border-color: var(--color-primary); }
.lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* ----------------- Пустые состояния ----------------- */
.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 22px 16px 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* ----------------- Кнопка «Добавить приём» (уводит в чат с ботом) ------- */
.add-entry-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 14px;
  padding: 13px 16px;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, var(--border));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--surface));
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.add-entry-btn:active { transform: scale(0.98); }
.add-entry-btn svg { width: 18px; height: 18px; }

/* ----------------- Кнопка «Поделиться отчётом за день» ----------------- */
.share-day-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.share-day-btn:active { transform: scale(0.98); }
.share-day-btn:disabled { opacity: 0.6; cursor: default; }
.share-day-btn svg { width: 18px; height: 18px; color: var(--color-primary); }

/* Пояснение про персональный «пищевой день» — приглушённая строка в самом низу,
   без карточки, но кликабельная (по тапу — модалка с подробностями). */
.food-day-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin: 16px 0 2px;
  padding: 2px 6px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur) var(--ease);
}
.food-day-note[hidden] { display: none; }
.food-day-note:active { opacity: 0.55; }
.food-day-note > svg { width: 14px; height: 14px; flex: none; margin-top: 1px; opacity: 0.75; }
.food-day-note .fdn-chev { margin-top: 1px; opacity: 0.5; }

/* Тело модалки-пояснения (заголовок использует общие .nm-head/.nm-close). */
.info-body p {
  margin: 0 0 13px;
  font-size: 14px;
  line-height: 1.52;
  color: var(--text-secondary);
}
.info-body p:last-child { margin-bottom: 2px; }
.info-body b { color: var(--text-primary); font-weight: 700; }

/* ----------------- Выбор канала шеринга (история / чат) ---------------- */
.share-opts { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.share-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.share-opt:active { transform: scale(0.985); }
.share-opt-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--surface));
  color: var(--color-primary);
}
.share-opt-ico svg { width: 19px; height: 19px; }
.share-opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-opt-txt b { font-size: 15px; font-weight: 650; }
.share-opt-txt span { font-size: 12.5px; color: var(--text-muted); }
.share-opt-chev { width: 16px; height: 16px; margin-left: auto; opacity: 0.4; }

/* ----------------- Шеринг в веб-версии (превью карточки) ---------------- */
/* В браузере делимся через системное «Поделиться», поэтому сперва показываем
   саму карточку: тап по кнопке под ней — уже «свежий» жест для navigator.share
   (иначе iOS отклоняет вызов после ожидания рендера). */
.share-web {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
}
.share-web-img {
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.share-web .btn-soft,
.share-web .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
}