:root {
  --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);
  --app-height: 100dvh;
  --app-top: 0px;
  --headerBase: 72px;
  --sat: var(--safe-top);
  --sab: var(--safe-bottom);
  --sidebarWidth: clamp(270px, 30%, 380px);
}

:root.native-insets {
  --safe-top: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-right: 0px;
}

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
button, a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[hidden] { display: none !important; }
.edge-block { display: none; }

.layout {
  position: fixed;
  inset: var(--app-top) var(--safe-right) auto var(--safe-left);
  height: var(--app-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: var(--safe-bottom);
}

.layout > .header {
  position: relative;
  top: auto;
  height: calc(var(--headerBase) + var(--safe-top));
  flex: 0 0 calc(var(--headerBase) + var(--safe-top));
  padding-top: var(--safe-top);
  z-index: 20;
}
.header::before { display: none; }
.header .left-header, .header .right-header, .header .left-header1 { height: var(--headerBase); }
body[data-screen="list"] .right-header { visibility: hidden; pointer-events: none; }
.layout > .container {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.container > .chat-list {
  position: relative;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}
.chat-scroll { flex: 1 1 0; min-height: 0; padding: 8px 0 80px; overflow: auto; overscroll-behavior: contain; }
.chat-list > nav.tabs {
  position: relative;
  flex: 0 0 64px;
  inset: auto;
  width: auto;
  height: 64px;
  margin: 0 10px 8px;
  padding: 4px;
  z-index: 3;
}
.tabs .tab { min-width: 0; min-height: 48px; flex: 1 1 0; padding: 4px 2px; }
.tabs .tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chat-list > .fab-wrapper { position: absolute; right: 16px; bottom: 88px; z-index: 4; }
.container > .chat-area {
  position: relative;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 2;
}
.chat-area #messagesArea {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 12px !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: auto;
}
.chat-area .input-area {
  position: relative;
  flex: 0 0 auto;
  inset: auto !important;
  width: calc(100% - 32px);
  max-width: 860px;
  min-height: 56px;
  margin: 8px auto 16px;
  padding: 6px 8px;
  gap: 4px;
  z-index: 4;
}
.chat-area .input-area > button { flex: 0 0 44px; width: 44px; height: 44px; margin: 0; align-self: flex-end; }
.chat-area .input-area .composer { flex: 1 1 0; min-width: 0; }
.chat-area .input-area #messageInput {
  top: auto;
  min-height: 42px;
  max-height: min(160px, calc(var(--app-height) * .25));
  height: auto;
  width: 100%;
  margin: 0;
  padding: 10px 6px;
  line-height: 1.4;
  font-size: 16px;
  font-weight: 400;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  overflow-y: auto;
  touch-action: auto;
}
#messageInput.is-empty::before { top: 10px; left: 6px; margin: 0; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
#replyHost { max-height: min(100px, calc(var(--app-height) * .2)); overflow: auto; }
.message { flex: 0 0 auto; min-width: 0; max-width: 88%; overflow-wrap: anywhere; }
.message:not(.sticker) { width: fit-content !important; max-width: min(88%, 620px); }
.message img, .message video { max-width: 100%; }
.search-wrapper input, .settings-body input, .group-title-block input { min-width: 0; font-size: 16px; }
.search-wrapper { position: relative; }
#clearSearch { flex: 0 0 44px; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 24px; }
.search-wrapper:has(#clearSearch:not([hidden])) #userTagInput { padding-right: 42px; }
.search-wrapper #clearSearch { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.empty-state { padding: 32px 20px; color: #657084; text-align: center; line-height: 1.5; }

.settings-sidebar {
  inset: var(--app-top) auto auto 0;
  height: var(--app-height);
  width: min(420px, 100%);
  padding: var(--safe-top) 0 var(--safe-bottom);
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .2s ease, visibility .2s;
  z-index: 120;
  overflow: hidden;
}
.settings-sidebar.open { left: 0; transform: none; visibility: visible; pointer-events: auto; display: flex !important; }
.settings-sidebar .settings-header {
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0;
  padding: 56px 20px 18px !important;
  position: relative;
}
.settings-sidebar .settings-header::before { display: none; }
.settings-sidebar .avatar-wrapper { flex-shrink: 0; width: 110px; height: 110px; margin: 0 auto; }
.settings-sidebar #settingsHeader { position: absolute !important; top: 6px !important; left: 54px !important; right: 12px !important; height: 44px !important; display: flex; align-items: center; font-size: 18px; margin: 0 !important; }
.settings-sidebar .close-sidebar { top: 6px !important; left: 6px !important; }
.settings-sidebar .settings-body { flex: 1 1 0; height: auto; min-height: 0; overflow-y: auto; padding: 20px; overscroll-behavior: contain; }
.settings-body input, .settings-body select, .settings-body button { max-width: 100%; }
#screenBackdrop { position: fixed; inset: 0; background: rgba(15,23,42,.35); border: 0; z-index: 100; }
.groupmodal, .modal1 {
  top: var(--app-top) !important;
  bottom: auto !important;
  height: var(--app-height) !important;
  padding: calc(var(--safe-top) + 12px) 12px calc(var(--safe-bottom) + 12px);
  z-index: 160;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.groupmodal .groupmodal-content, .modal1 .modal-content { width: min(440px, 100%); max-height: 100%; margin: auto; overflow-y: auto; }
.group-header { min-width: 0; }
.group-title-block { min-width: 0; flex: 1; }
.group-actions button { min-height: 44px; }
#sidebar { top: calc(var(--app-top) + var(--safe-top)) !important; height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom)) !important; z-index: 120 !important; overflow-y: auto !important; }
.panel-close { position: absolute; top: 8px; right: 8px; z-index: 5; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #364052; font-size: 24px; }
#sidebar-stickers { z-index: 30 !important; top: calc(var(--app-top) + var(--safe-top)) !important; height: calc(var(--app-height) - var(--safe-top) - var(--safe-bottom)) !important; box-sizing: border-box; }
.menu-dropdown { max-width: calc(100vw - 24px); max-height: calc(var(--app-height) - 90px); overflow-y: auto; z-index: 40; }
.modal-window { position: fixed; z-index: 180; max-width: calc(100vw - 24px); max-height: calc(var(--app-height) - 24px); overflow-y: auto; }
#customMenu, #customContextMenu { z-index: 180; max-width: calc(100vw - 20px); max-height: calc(var(--app-height) - 24px); overflow-y: auto; }
.call-overlay { top: var(--app-top); bottom: auto; height: var(--app-height); padding: calc(var(--safe-top) + 12px) 12px calc(var(--safe-bottom) + 12px); z-index: 220; overflow-y: auto; }
.call-window { max-height: 100%; max-width: 100%; overflow-y: auto; }
.call-mini { top: calc(var(--app-top) + var(--safe-top) + 8px); max-width: calc(100vw - 24px); z-index: 230; }
.ss-content { z-index: 170 !important; max-height: min(300px, calc(var(--app-height) - 80px)); }

@media (min-width: 738px) {
  .container > .chat-list { flex: 0 0 var(--sidebarWidth); max-width: var(--sidebarWidth); }
  .container > .chat-area, .container.sidebar-open > .chat-area { flex: 1 1 0; width: auto; }
  .container.sidebar-open > .chat-area { margin-right: 272px; }
  .header.sidebar-open ~ .container .chat-area { margin-right: 272px; }
}

@media (max-width: 737px) {
  .layout > .container { flex-direction: column; }
  .container > .chat-list, .container > .chat-area { flex: 1 1 0; width: 100%; max-width: none; }
  body[data-screen="chat"] .chat-list { display: none !important; }
  body[data-screen="list"] .chat-area { display: none !important; }
  .chat-area .input-area { width: 100%; max-width: none; margin: 0; border-radius: 0; border: 0; border-top: 1px solid #e4e7ed; background: #fff; }
  .chat-area .input-area .mic-button, .chat-area .input-area .send-button { margin: 0; }
  .settings-sidebar { width: 100%; }
  #sidebar { width: 100% !important; right: 0 !important; }
  #sidebar #contactCard > div:first-child { max-height: 40vh; aspect-ratio: auto !important; }
  #sidebar-stickers {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: min(280px, calc(var(--app-height) * .38)) !important;
    flex: 0 0 min(280px, calc(var(--app-height) * .38));
    border: 0 !important;
    border-top: 1px solid #e4e7ed !important;
  }
  .v-divider { display: none; }
  .keyboard-open .chat-list > .tabs, .keyboard-open .chat-list > .fab-wrapper { display: none; }
  .keyboard-open .chat-scroll { padding-bottom: 12px; }
}

@media (max-height: 540px) {
  .settings-sidebar .settings-header { padding-bottom: 8px !important; }
  .settings-sidebar .avatar-wrapper { width: 64px; height: 64px; }
  .settings-sidebar .settings-body { padding-top: 12px; }
  .groupmodal .group-avatar { width: 54px; height: 54px; flex: 0 0 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .settings-sidebar, .fab-mini, .chat-area { transition: none; }
}


/* iOS composer: keep the input close to the bottom without stacking the home-indicator inset on top of the keyboard. */
@media (max-width: 737px) {
  html[data-platform="ios"] .chat-area .input-area {
    padding-bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) - 16px));
  }
  html[data-platform="ios"].keyboard-open .chat-area .input-area {
    padding-bottom: 4px;
  }
}