/* KAIRO Messenger – mobile & layout fixes
   Drop this file after the existing style.css
   <link rel="stylesheet" href="mobile-fixes.css">
*/

/* ---------- GENERAL LAYOUT SAFETY ---------- */
:root {
  /* Keep existing vars; only slightly bump footer on small screens via media query below */
}

html, body {
  height: 100%;
}

#app-container .container {
  min-height: 100dvh; /* Use dynamic viewport to avoid keyboard/URL-bar jumps */
  display: flex;
}

/* Ensure chat column lays out properly */
.messages-container {
  /* Make sure the message area never hides behind header/footer */
  height: calc(100dvh - var(--header-height) - var(--footer-height));
  overflow-y: auto;
  box-sizing: border-box;
  padding-right: 16px;
  padding-bottom: 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Prevent chat content from being cropped on the right */
.message, .message .bubble, .message.me .bubble, .message.other .bubble {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* ---------- MESSAGE INPUT (bottom bar) ---------- */
.message-input-container {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120; /* above chat content */
  background: var(--secondary-bg);
  padding: 8px 12px;
  height: auto; /* allow content to size naturally */
  gap: 10px;
  border-top: 1px solid var(--border-color);
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.message-input-container .message-input {
  flex: 1;
  min-height: 44px; /* comfortable tap/typing area */
  padding: 10px 12px;
  border-radius: var(--border-radius);
  background: var(--primary-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  outline: none;
}

/* Make tap targets big enough so “Send” never looks squashed */
.attachment-btn, .voice-btn, .send-btn {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

.send-btn i, .voice-btn i, .attachment-btn i {
  line-height: 1;
}

/* ---------- PAGES (Profile, Contacts, Calls, Settings, etc.) ---------- */
/* Make pages reliably overlay EVERYTHING (including the sidebar on mobile) */
.page {
  /* keep base styles from style.css */
}

.page.active {
  transform: translateX(0);
  display: block;
  z-index: 300; /* higher than mobile sidebar (150) */
}

/* Page header back button should always be visible */
.page .page-header {
  position: sticky;
  top: 0;
  z-index: 310;
  background: var(--primary-bg);
  padding-top: env(safe-area-inset-top, 0px);
}

/* Back button size for easy tapping */
.page .back-btn {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- DROPDOWNS ABOVE CONTENT ---------- */
.chat-dropdown-menu,
.dropdown-menu {
  z-index: 250; /* below .page.active but above regular content */
}

/* ---------- MOBILE-SPECIFIC TWEAKS ---------- */
@media (max-width: 768px) {
  /* Slightly taller footer area on mobile, via variable override */
  :root { --footer-height: 78px; }

  /* Sidebar defaults to hidden (project already moved it off-canvas).
     When a settings/contact/calls/profile page is open, we keep sidebar hidden
     by simply letting the page overlay it fully. To be extra safe, push it left. */
  .page.active ~ .sidebar,
  .container:has(.page.active) .sidebar {
    left: -100%;
  }

  /* Ensure the active page covers the full viewport on small screens */
  .page.active {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: auto;
  }

  /* Keep chat messages fully visible above the input on small screens */
  .messages-container {
    height: calc(100dvh - var(--header-height) - var(--footer-height));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Make sure send/voice/attach never get squeezed */
  .attachment-btn, .voice-btn, .send-btn {
    flex: 0 0 44px;
  }
}

/* ---------- ULTRA SMALL DEVICES ---------- */
@media (max-width: 360px) {
  .message-input-container {
    padding: 6px 8px;
  }
  .message-input-container .message-input {
    min-height: 42px;
    padding: 8px 10px;
  }
  .attachment-btn, .voice-btn, .send-btn {
    min-width: 42px;
    min-height: 42px;
    width: 42px;
    height: 42px;
  }
}

/* ---------- SAFE AREA SUPPORT (iOS) ---------- */
@supports (padding: max(0px)) {
  .message-input-container {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .page .page-header {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

@media (max-width: 768px) {
  /* Контейнер приложения занимает реальную высоту окна */
  .container {
    min-height: 100svh;              /* современно: учитывает скрытие адресной строки */
    min-height: -webkit-fill-available; /* fallback iOS */
    display: flex;
    flex-direction: column;
  }

  .messages-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }

  .main-content::after {
    content: "";
    display: block;
    height: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px));
  }

  /* Нижняя панель всегда на виду */
  .message-input-container {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    /* по желанию: добавить фоновый цвет и тень */
    /* background: var(--secondary-bg); box-shadow: 0 -8px 24px rgba(0,0,0,.2); */
  }

  html, body {
    height: 100dvh;
  }
}