/* Мини-приложение операторов. Цвета берутся из темы Telegram (--tg-theme-*),
   ниже — запасные значения для светлой и тёмной темы вне Telegram. */

:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --link: var(--tg-theme-link-color, #2a7ae2);
  --button: var(--tg-theme-button-color, #2a7ae2);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f1f1f4);
  --danger: var(--tg-theme-destructive-text-color, #e5484d);
  --separator: color-mix(in srgb, var(--hint) 28%, transparent);
  --bubble-in: var(--secondary-bg);
  --bubble-out: color-mix(in srgb, var(--button) 16%, var(--bg));
  --note-bg: color-mix(in srgb, #f5b400 16%, var(--bg));
  --note-border: color-mix(in srgb, #f5b400 60%, transparent);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --radius: 14px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--tg-theme-bg-color, #17212b);
    --text: var(--tg-theme-text-color, #f5f5f5);
    --hint: var(--tg-theme-hint-color, #708499);
    --link: var(--tg-theme-link-color, #6ab3f3);
    --button: var(--tg-theme-button-color, #5288c1);
    --button-text: var(--tg-theme-button-text-color, #ffffff);
    --secondary-bg: var(--tg-theme-secondary-bg-color, #232e3c);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }

.app {
  position: fixed;
  inset: 0;
  /* высота с учётом клавиатуры: Telegram обновляет --tg-viewport-stable-height */
  height: var(--tg-viewport-height, 100%);
  display: flex;
  justify-content: center;
  background: var(--bg);
}

.screen {
  width: 100%;
  max-width: 760px;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

@media (min-width: 800px) {
  .screen {
    border-left: 1px solid var(--separator);
    border-right: 1px solid var(--separator);
  }
}

/* --- экраны-сообщения: «откройте через бота», «нет доступа» --- */

.screen-message {
  align-items: center;
  justify-content: center;
  padding: 24px calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));
}

.message-box {
  max-width: 340px;
  text-align: center;
  color: var(--hint);
}
.message-box .message-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* --- шапки --- */

.header {
  flex: none;
  padding: calc(10px + var(--safe-top)) 12px 8px;
  border-bottom: 1px solid var(--separator);
  background: var(--bg);
}

.header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.total-badge {
  margin-left: 6px;
  vertical-align: 2px;
}

.select {
  flex: none;
  border: 0;
  border-radius: 10px;
  padding: 6px 8px;
  background: var(--secondary-bg);
  max-width: 130px;
}

.search {
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  background: var(--secondary-bg);
  outline: none;
  /* 16px — чтобы iOS не увеличивал страницу при фокусе */
  font-size: 16px;
}
.search::placeholder, .input::placeholder { color: var(--hint); }

.icon-button {
  flex: none;
  border: 0;
  background: transparent;
  padding: 6px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
}
.icon-button:active { background: var(--secondary-bg); }

.pill-button {
  flex: none;
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--secondary-bg);
  color: var(--text);
  white-space: nowrap;
  font-size: 14px;
}

.subtitle {
  margin-top: 2px;
  color: var(--hint);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-title { flex: 1; min-width: 0; }
.chat-title .title { display: block; }

.username { color: var(--hint); font-weight: 400; }

/* --- список переписок --- */

.list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--safe-bottom);
}

.row {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--separator);
  background: transparent;
  text-align: left;
  padding: 10px 12px;
}
.row:active, .row:hover { background: var(--secondary-bg); }

.row-top, .row-bottom {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.row-bottom { margin-top: 2px; align-items: center; }

.row-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-time { flex: none; color: var(--hint); font-size: 13px; }

.row-preview {
  flex: 1;
  min-width: 0;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-preview .who { color: var(--text); }

.badge {
  display: inline-block;
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--button);
  color: var(--button-text);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 18px;
}

.empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--hint);
}

/* --- лента --- */

.feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feed-more {
  align-self: center;
  color: var(--hint);
  font-size: 13px;
  padding: 6px;
}

.day {
  align-self: center;
  margin: 8px 0 4px;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--secondary-bg);
  color: var(--hint);
  font-size: 12px;
}

.unread-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: var(--link);
  font-size: 12px;
}
.unread-divider::before, .unread-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid currentColor;
  opacity: .5;
}

.msg {
  display: flex;
  flex-direction: column;
  max-width: min(82%, 520px);
}
.msg-in { align-self: flex-start; }
.msg-out { align-self: flex-end; }

.bubble {
  padding: 7px 10px 5px;
  border-radius: var(--radius);
  background: var(--bubble-in);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  min-width: 64px;
}
.msg-in .bubble { border-bottom-left-radius: 4px; }
.msg-out .bubble { background: var(--bubble-out); border-bottom-right-radius: 4px; }
.msg-failed .bubble { box-shadow: inset 0 0 0 1px var(--danger); }

.meta {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  color: var(--hint);
  font-size: 12px;
  white-space: normal;
}

.delivery-failed {
  margin-top: 4px;
  color: var(--danger);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  align-self: flex-end;
}
.link-button {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--link);
  font-size: 13px;
  text-decoration: underline;
}

.note {
  align-self: center;
  width: min(92%, 560px);
  margin: 4px 0;
  padding: 6px 10px;
  border: 1px dashed var(--note-border);
  border-radius: 10px;
  background: var(--note-bg);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note-head { color: var(--hint); font-size: 12px; margin-bottom: 2px; }

.event {
  align-self: center;
  max-width: 92%;
  margin: 4px 0;
  color: var(--hint);
  font-size: 13px;
  text-align: center;
  overflow-wrap: anywhere;
}

/* медиа */

.media { margin: -2px -4px 4px; }
.media + .text:empty { display: none; }

.photo {
  display: block;
  max-width: 100%;
  width: 260px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hint) 18%, transparent);
  cursor: zoom-in;
}
.photo.sticker {
  width: 160px;
  height: auto;
  object-fit: contain;
  background: transparent;
}
.photo-placeholder {
  width: 260px;
  max-width: 100%;
  height: 160px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hint) 18%, transparent);
}

video.player {
  display: block;
  max-width: 100%;
  width: 280px;
  max-height: 360px;
  border-radius: 10px;
  background: #000;
}
video.player.round {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
}
audio.player { display: block; width: 260px; max-width: 100%; }

.file {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 2px 0;
  text-align: left;
}
.file-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-text);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.file-info { min-width: 0; }
.file-name {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-size { color: var(--hint); font-size: 12px; }

.stub { color: var(--hint); font-style: italic; }
.media-error { color: var(--hint); font-size: 13px; font-style: italic; }

.viewer {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  cursor: zoom-out;
}
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- поле ввода --- */

.composer {
  flex: none;
  border-top: 1px solid var(--separator);
  background: var(--bg);
  padding: 6px 8px calc(6px + var(--safe-bottom));
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 0;
  border-radius: 18px;
  padding: 8px 12px;
  background: var(--secondary-bg);
  outline: none;
  max-height: 160px;
  font-size: 16px;
  line-height: 1.35;
}

.send {
  flex: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-text);
  font-size: 17px;
  line-height: 1;
}

.composer-extra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 4px 0 46px;
  font-size: 14px;
  color: var(--hint);
}
.composer-extra label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.composer-extra input[type="checkbox"] { margin: 0; accent-color: var(--button); }

.attachment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  border-radius: 10px;
  background: var(--secondary-bg);
  color: var(--text);
}
.attachment span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.attachment button { border: 0; background: transparent; color: var(--hint); padding: 0 4px; }

.composer.is-note .input { background: var(--note-bg); }

.error {
  margin: 4px 4px 0 46px;
  color: var(--danger);
  font-size: 13px;
}
.error:empty { display: none; }

.hidden { display: none !important; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 20;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 85%, transparent);
  color: var(--bg);
  font-size: 14px;
}

.title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.title-wrap .title { flex: 0 1 auto; }
.title-wrap .total-badge { flex: none; }