* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* Telegram-style icons (SVG). To use custom assets: put PNG/SVG in server/public/icons/ and set background-image in .ico-* */
.ico {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}
.ico-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235288c1'%3E%3Cpath d='M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z'/%3E%3C/svg%3E");
}
.ico-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235288c1'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}
.ico-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235288c1'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E");
}
.ico-attach {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d7a8a'%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5C7 20.54 9.46 23 12.5 23s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E");
}
.ico-mute {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d7a8a'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E");
}
.ico-schedule {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d7a8a'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
}
.ico-send {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
}
.ico-mic {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d7a8a'%3E%3Cpath d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5-3c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z'/%3E%3C/svg%3E");
}
.ico-video-note {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d7a8a'%3E%3Cpath d='M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}
.tg-send-btn.silent-on .ico-mute { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235288c1'%3E%3Cpath d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z'/%3E%3C/svg%3E"); }

/* Telegram-style palette (dark theme) */
:root {
  --tg-bg: #0e1621;
  --tg-panel: #17212b;
  --tg-panel-border: #242f3d;
  --tg-bubble-out: #2b5278;
  --tg-bubble-in: #182533;
  --tg-accent: #5288c1;
  --tg-accent-dim: #5ac8fa;
  --tg-text: #e4e4e4;
  --tg-text-secondary: #6d7a8a;
  --tg-text-muted: #5c6978;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--tg-bg);
  color: var(--tg-text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

#app {
  max-width: 100%;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (max-width: 767px) {
  #app { max-width: 100%; }
}

/* ——— Двухколоночный макет как в Telegram: чаты слева, чат справа ——— */
.tg-desktop {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tg-sidebar {
  width: 360px;
  min-width: 280px;
  max-width: 45%;
  background: var(--tg-panel);
  border-right: 1px solid var(--tg-panel-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tg-sidebar-header {
  flex-shrink: 0;
}

.tg-sidebar .chat-list {
  flex: 1;
  overflow-y: auto;
}

.tg-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--tg-bg);
}

.tg-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tg-empty-state p {
  margin: 0;
  font-size: 15px;
  color: var(--tg-text-secondary);
}

.tg-chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.tg-chat-panel .header.chat-header {
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.tg-chat-panel .messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.tg-chat-panel .tg-send-form {
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.chat-list li.selected {
  background: rgba(255, 255, 255, 0.06);
}

/* Обёртка аватарки в списке: при ошибке загрузки фото показываем букву */
.chat-avatar-wrap,
.user-list-avatar-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.chat-avatar-wrap .chat-avatar.img,
.user-list-avatar-wrap .user-list-avatar.img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}

.chat-avatar-wrap .chat-avatar.letter,
.user-list-avatar-wrap .user-list-avatar.letter {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--tg-accent);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  border-radius: 50%;
}

.chat-avatar-wrap .chat-avatar.letter[data-visible],
.user-list-avatar-wrap .user-list-avatar.letter[data-visible] {
  display: flex;
}

/* На мобильных: при открытом чате скрываем список — показываем только чат */
@media (max-width: 768px) {
  .tg-desktop { flex-direction: column; }
  .tg-desktop.chat-open .tg-sidebar { display: none !important; }
  .tg-desktop.chat-open .tg-content { flex: 1; width: 100%; }
  .tg-sidebar { width: 100%; min-width: 0; max-width: 100%; max-height: 50vh; }
}

.screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.screen.hidden {
  display: none !important;
}

.hidden {
  display: none !important;
}

/* ——— Login ——— */
#screen-login {
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

.auth-card {
  width: 100%;
  max-width: 320px;
  background: var(--tg-panel);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.auth-card h1 {
  margin: 0 0 24px;
  font-size: 24px;
  text-align: center;
  color: #fff;
}

.auth-card input {
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--tg-panel-border);
  border-radius: 8px;
  background: var(--tg-panel-border);
  color: #fff;
  font-size: 16px;
}

.auth-card input::placeholder {
  color: #6d7a8a;
}

.auth-card input:focus {
  outline: none;
  border-color: var(--tg-accent);
}

.auth-buttons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.auth-card button[type="submit"],
.auth-card button#btn-register {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.auth-card button[type="submit"] {
  background: var(--tg-accent);
  color: #fff;
}

.auth-card button#btn-register {
  background: var(--tg-panel-border);
  color: var(--tg-accent);
}

.error {
  color: #e05555;
  font-size: 13px;
  margin: -4px 0 8px;
}

/* ——— Header (Telegram style). Верхний отступ под вырез/островок iPhone, чтобы кнопки не конфликтовали со шторкой ——— */
.header {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  background: var(--tg-panel);
  border-bottom: 1px solid var(--tg-panel-border);
  flex-shrink: 0;
}

.header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.header h2:first-child { text-align: left; }

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--tg-accent);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-back {
  background: none;
  border: none;
  color: var(--tg-accent);
  font-size: 22px;
  cursor: pointer;
  padding: 8px 12px;
  margin: -8px 4px -8px -8px;
}

/* ——— Drawer (Telegram menu) ——— */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
}

.drawer.open {
  pointer-events: auto;
  visibility: visible;
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.2s;
}

.drawer.open .drawer-backdrop {
  opacity: 1;
}

.drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 85vw);
  max-width: 320px;
  background: var(--tg-panel);
  box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  padding-top: env(safe-area-inset-top, 0);
  padding-left: env(safe-area-inset-left, 0);
  display: flex;
  flex-direction: column;
}

.drawer.open .drawer-panel {
  transform: translateX(0);
}

.drawer-profile {
  padding: 24px 20px;
  border-bottom: 1px solid var(--tg-panel-border);
}

.drawer-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
}

.drawer-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.drawer-avatar.img {
  position: relative;
}

.drawer-avatar.letter {
  position: absolute;
  inset: 0;
  background: var(--tg-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
}

.drawer-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.drawer-status {
  font-size: 14px;
  color: var(--tg-text-secondary);
}

.drawer-nav {
  padding: 12px 0;
}

.drawer-item {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: none;
  background: none;
  color: #e4e4e4;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.drawer-item:hover, .drawer-item:focus {
  background: var(--tg-panel-border);
}

.drawer-item.danger {
  color: #e05555;
}

/* ——— Chat list ——— */
.chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.chat-list li, .list-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--tg-panel-border);
  cursor: pointer;
  transition: background 0.15s;
  min-height: 72px;
}

.chat-list li:active, .chat-list li:hover {
  background: rgba(255,255,255,0.04);
}

.chat-avatar, .user-list-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tg-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.chat-avatar.img, .user-list-avatar.img {
  background: var(--tg-panel-border);
  object-fit: cover;
  display: block;
}

.chat-info, .user-list-info {
  flex: 1;
  min-width: 0;
}

.chat-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.chat-name, .user-list-name {
  font-weight: 600;
  font-size: 16px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-size: 13px;
  color: var(--tg-text-secondary);
  flex-shrink: 0;
}

.chat-preview, .user-list-username {
  font-size: 14px;
  color: var(--tg-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ——— Search ——— */
.search-input {
  flex: 1;
  padding: 12px 16px;
  margin: 0 8px;
  border: none;
  border-radius: 8px;
  background: #242f3d;
  color: #fff;
  font-size: 16px;
}

.search-input::placeholder {
  color: var(--tg-text-secondary);
}

.search-input:focus {
  outline: none;
}

.search-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--tg-text-secondary);
  margin: 0;
}

.user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.user-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid #242f3d;
  cursor: pointer;
  min-height: 72px;
}

.user-list li:active {
  background: #1a2634;
}

.user-list-avatar.letter {
  font-size: 20px;
}

/* ——— Profile edit ——— */
.profile-form {
  padding: 24px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.profile-avatar-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  cursor: pointer;
}

.profile-avatar-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 8px;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-avatar.letter {
  position: absolute;
  inset: 0;
  background: var(--tg-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 600;
}
.profile-avatar.img {
  display: block;
  object-fit: cover;
}
.profile-avatar-hint {
  font-size: 14px;
  color: var(--tg-accent);
}

.profile-field {
  display: block;
  margin-bottom: 20px;
}

.profile-field span {
  display: block;
  font-size: 13px;
  color: var(--tg-text-secondary);
  margin-bottom: 6px;
}

.profile-field input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #242f3d;
  border-radius: 8px;
  background: #242f3d;
  color: #fff;
  font-size: 16px;
}

.profile-field input:focus {
  outline: none;
  border-color: var(--tg-accent);
}

.btn-primary {
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  border: none;
  border-radius: 8px;
  background: var(--tg-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* ——— Chat view ——— */
.chat-header h2 {
  flex: 1;
  text-align: left;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.4;
  align-self: flex-start;
}

.msg.out {
  align-self: flex-end;
  background: #0088cc;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg.in {
  background: #242f3d;
  border-bottom-left-radius: 4px;
}

.msg-time {
  font-size: 11px;
  color: #6d7a8a;
  margin-top: 4px;
}

.msg.out .msg-time {
  color: rgba(255,255,255,0.8);
}

.send-form {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: #17212b;
  border-top: 1px solid #242f3d;
  flex-shrink: 0;
}

.send-form input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #242f3d;
  border-radius: 22px;
  background: #242f3d;
  color: #fff;
  font-size: 15px;
}

.send-form input:focus {
  outline: none;
  border-color: #0088cc;
}

.btn-send {
  padding: 12px 20px;
  border: none;
  border-radius: 22px;
  background: #0088cc;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
}

/* ——— Telegram chat header (avatar + name, tappable). Верх под safe area ——— */
.tg-header {
  padding: max(8px, env(safe-area-inset-top)) 4px 8px 0;
  padding-left: max(4px, env(safe-area-inset-left));
  background: #17212b;
}
.tg-header-back {
  margin-right: 4px;
}
.tg-header-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  min-width: 0;
}
.tg-header-avatar-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.tg-header-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.tg-header-avatar.letter {
  position: absolute;
  inset: 0;
  background: var(--tg-bubble-out);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
}
.tg-header-avatar.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}
.tg-header-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tg-header-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.tg-header-status {
  font-size: 13px;
  color: var(--tg-text-secondary);
}
.tg-header-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.tg-header-menu-wrap .btn-icon {
  color: var(--tg-text-secondary);
  font-size: 20px;
}
.chat-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 200px;
  background: var(--tg-panel);
  border: 1px solid var(--tg-panel-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  padding: 4px 0;
  z-index: 100;
}
.chat-menu-dropdown.hidden {
  display: none !important;
}
.chat-menu-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--tg-text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.chat-menu-item:hover {
  background: var(--tg-panel-border);
}
.chat-menu-item.danger {
  color: #e05555;
}

/* ——— Сообщения 1:1 как в Telegram: без обводки, форма с хвостиком внизу ——— */
/* Обёртка .msg не рисует фон/обводку — только пузырь внутри */
.msg.tg-msg {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.tg-messages {
  background: var(--tg-bg);
  padding: 6px 10px 4px;
  padding-bottom: env(safe-area-inset-bottom, 6px);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tg-msg {
  max-width: 85%;
  display: flex;
  margin-bottom: 1px;
}
.tg-msg.out { margin-left: auto; }

/* Пузырь — единственный элемент с заливкой. Форма как в Telegram: хвостик внизу. */
.tg-msg .msg-bubble {
  padding: 6px 10px 7px 11px;
  position: relative;
  max-width: 100%;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-clip: padding-box;
}
/* Исходящие: как в Telegram — скругление с «хвостиком» (меньший радиус в углу) */
.tg-msg.out .msg-bubble {
  background: var(--tg-bubble-out);
  border-radius: 18px 18px 4px 18px;
}
/* Входящие */
.tg-msg.in .msg-bubble {
  background: var(--tg-bubble-in);
  border-radius: 18px 18px 18px 4px;
}
/* Вложения: фото/видео в пузыре как в Telegram */
.tg-msg .msg-attachment {
  margin-bottom: 4px;
  border-radius: 6px;
  overflow: hidden;
  max-width: 280px;
  line-height: 0;
}
.tg-msg .msg-attachment-image img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  vertical-align: top;
}
.tg-msg .msg-attachment-video video {
  display: block;
  max-width: 100%;
  max-height: 280px;
  vertical-align: top;
}
.tg-msg .msg-attachment-voice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  min-width: 180px;
}
.msg-voice-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--tg-panel-border);
  color: var(--tg-accent);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-voice-play::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 4px;
}
.msg-voice-play.playing::before {
  width: 8px;
  height: 14px;
  border: none;
  background: currentColor;
  margin-left: 0;
  border-radius: 2px;
}
.msg-voice-wave {
  flex: 1;
  min-width: 60px;
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
  border-radius: 4px;
  overflow: hidden;
}
.msg-voice-wave > span {
  width: 3px;
  min-height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.85;
  display: block;
}
.tg-msg.out .msg-voice-wave > span { color: rgba(255,255,255,0.9); }
.tg-msg.in .msg-voice-wave > span { color: var(--tg-text); }
.msg-voice-duration {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
.tg-msg.in .msg-voice-duration { color: var(--tg-text-muted); }
.tg-msg .msg-attachment-video-note {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
}
.tg-msg .msg-attachment-video-note video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msg-video-note-play {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.msg-video-note-play::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 0 24px 40px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 8px;
}
.tg-msg .msg-text:empty {
  display: none;
}
/* Строка: текст слева, время и галочки справа от текста (на одной линии с последней строкой) */
.tg-msg .msg-content-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}
.tg-msg .msg-text {
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
  flex: 1;
  min-width: 0;
}
.tg-msg.out .msg-text { color: #fff; }
.tg-msg.in .msg-text { color: var(--tg-text); }
.tg-msg .msg-scheduled-label {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
}
/* Мета: время и галочки справа, как в Telegram */
.tg-msg .msg-meta {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-bottom: 1px;
}
.tg-msg .msg-time {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}
.tg-msg.in .msg-time { color: var(--tg-text-muted); }
/* Галочки как в Telegram: иконки SVG, голубые при прочтении */
.msg-status {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}
.msg-status svg {
  display: block;
  vertical-align: middle;
}
.msg-status-sent { color: rgba(255,255,255,0.75); }
.msg-status-read { color: #6ab2f2; }
.msg-status-scheduled { opacity: 0.85; }

/* Просмотр фото в полный экран (как в Telegram) */
.msg-attachment-image img { cursor: pointer; }

.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.media-viewer.hidden { display: none !important; }
.media-viewer-backdrop {
  position: absolute;
  inset: 0;
}
.media-viewer-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.media-viewer-content img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.media-viewer-content img.loaded {
  opacity: 1;
}

/* Плашка прикрепления (как в Telegram) */
.attach-sheet {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  visibility: hidden;
}
.attach-sheet.open {
  pointer-events: auto;
  visibility: visible;
}
.attach-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.2s;
}
.attach-sheet.open .attach-sheet-backdrop { opacity: 1; }
.attach-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  background: var(--tg-panel);
  border-radius: 12px 12px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.attach-sheet.open .attach-sheet-panel { transform: translateY(0); }
.attach-sheet-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tg-panel-border);
  position: relative;
}
.attach-sheet-close {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--tg-text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.attach-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tg-text);
}
.attach-sheet-actions {
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 4px;
}
.attach-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--tg-text);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.attach-sheet-item:hover, .attach-sheet-item:active {
  background: rgba(255,255,255,0.08);
}
.attach-sheet-icon {
  font-size: 24px;
}

/* ——— Telegram send form (кнопка отправить не менее 44px для тача) ——— */
.tg-send-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--tg-panel);
  border-top: 1px solid var(--tg-panel-border);
  flex-shrink: 0;
}
.recording-voice-bar { width: 100%; order: -1; }
.tg-send-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--tg-text-secondary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tg-send-btn.silent-on { color: var(--tg-accent); }
.tg-send-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: none;
  border-radius: 20px;
  background: var(--tg-panel-border);
  color: #fff;
  font-size: 15px;
}
.tg-send-input:focus { outline: none; }
.tg-send-input::placeholder { color: var(--tg-text-secondary); }
.tg-send-submit {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--tg-accent);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
  position: relative;
}
.tg-send-submit.hidden { display: none !important; }
.tg-record-btn .ico-record-mode { display: inline-block; }
.tg-record-btn .ico-record-mode.hidden { display: none !important; }
/* ——— Запись голоса как в Telegram: тонкая полоска, красная точка, таймер, «отпустите вне поля — отмена» ——— */
.recording-voice-bar.tg-style {
  width: 100%;
  order: -1;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 8px;
  background: var(--tg-panel);
  border-top: 1px solid var(--tg-panel-border);
  min-height: 40px;
}
.recording-voice-bar.tg-style.hidden { display: none !important; }
.recording-voice-bar.tg-style:not(.hidden) { display: flex; }
.recording-voice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e53935;
  flex-shrink: 0;
  animation: recording-dot-pulse 1s ease-in-out infinite;
}
@keyframes recording-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}
.recording-voice-bar .recording-voice-timer {
  font-size: 15px;
  color: var(--tg-text);
  min-width: 42px;
  font-variant-numeric: tabular-nums;
}
.recording-voice-hint {
  flex: 1;
  font-size: 13px;
  color: var(--tg-text-secondary);
  text-align: center;
}
.recording-voice-waveform {
  flex: 0 1 80px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
}
.recording-voice-waveform .wv-bar {
  width: 3px;
  min-height: 4px;
  border-radius: 2px;
  background: var(--tg-accent);
  opacity: 0.8;
  animation: recording-bar 0.5s ease-in-out infinite;
}
@keyframes recording-bar {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

.recording-voice-bar:not(.tg-style),
.recording-video-wrap {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--tg-panel);
  border-top: 1px solid var(--tg-panel-border);
}
.recording-voice-bar:not(.tg-style).hidden,
.recording-video-wrap.hidden { display: none !important; }
.recording-voice-bar:not(.tg-style):not(.hidden),
.recording-video-wrap:not(.hidden) { display: flex; }
.recording-video-wrap {
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  padding: 20px;
}
.recording-video-preview {
  width: min(280px, 80vw);
  height: min(280px, 80vw);
  border-radius: 50%;
  object-fit: cover;
  transform: scaleX(-1);
  border: 4px solid var(--tg-panel-border);
}
.recording-video-timer {
  margin-top: 16px;
  font-size: 18px;
  color: #fff;
}
.recording-video-stop {
  margin-top: 20px;
  padding: 12px 24px;
  border: none;
  border-radius: 24px;
  background: var(--tg-accent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

/* ——— Sheet (peer profile, Telegram style) ——— */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  visibility: hidden;
}
.sheet.open {
  pointer-events: auto;
  visibility: visible;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.2s;
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  background: var(--tg-panel);
  border-radius: 16px 16px 0 0;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.sheet.open .sheet-panel { transform: translateY(0); }
.sheet-peer {
  text-align: center;
}
.sheet-peer-avatar-wrap {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.sheet-peer-avatar-wrap:focus { outline: none; }
.sheet-peer-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
}
.sheet-peer-avatar.letter {
  position: absolute;
  inset: 0;
  background: var(--tg-bubble-out);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 600;
}
.sheet-peer-avatar.img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}
.sheet-peer-name {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.sheet-peer-username {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--tg-accent);
}
.sheet-peer-status {
  margin: 0;
  font-size: 14px;
  color: var(--tg-text-secondary);
}

/* ——— Modal (schedule) ——— */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  visibility: hidden;
}
.modal.open {
  pointer-events: auto;
  visibility: visible;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.2s;
}
.modal.open .modal-backdrop { opacity: 1; }
.modal-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 340px;
  background: var(--tg-panel);
  border-radius: 12px;
  padding: 20px;
  transition: transform 0.2s;
}
.modal.open .modal-box { transform: translate(-50%, -50%) scale(1); }
.modal-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}
.modal-datetime {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--tg-panel-border);
  border-radius: 8px;
  background: var(--tg-panel-border);
  color: #fff;
  font-size: 16px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.modal-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--tg-panel-border);
  color: var(--tg-accent);
  font-size: 15px;
  cursor: pointer;
}
.modal-btn.primary {
  background: var(--tg-accent);
  color: #fff;
}