/* =========================
   Baloro Help – FINAL FIX
========================= */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  background: #f4f5f7;
  color: #111;

  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* =========================
   Header
========================= */
.help-header {
  position: sticky;
  top: 0;
  z-index: 10;

  padding: 14px 16px;
  text-align: center;
  font-weight: 700;
  color: #fff;

  background: linear-gradient(135deg, #6a5cff, #8a7cff);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  flex-shrink: 0; /* ✅ Başlıq ölçüsü sabit qalsın */
}

/* =========================
   Messages area (ƏSAS FIX)
========================= */
#messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0; /* ✅ ƏSAS DÜZƏLİŞ: flex item büzülsün */

  /* ✅ əsas: alt boşluq footer üçün */
  padding: 12px 12px 130px 12px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

/* Kiçik telefonlar */
@media (max-width: 360px) {
  .help-header { padding: 12px; font-size: 14px; }

  /* ⚠️ padding:10px yazma! bottom itir */
  #messages { padding: 10px 10px 130px 10px; gap: 8px; }

  .bubble { font-size: 14px; padding: 9px 12px; }
  #messageInput { padding: 11px 12px; font-size: 14px; }
  #sendBtn { padding: 11px 14px; font-size: 13px; }
}

/* Tablet */
@media (min-width: 768px) {
  /* ⚠️ padding:16px yazma! bottom itir */
  #messages { padding: 16px 16px 140px 16px; }

  .bubble { max-width: min(62%, 560px); font-size: 15.5px; }
  .help-footer { padding: 12px; }
}

/* iOS PWA safe-area */
@supports (padding: env(safe-area-inset-bottom)) {
  #messages {
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
  .help-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}


/* Scrollbar */
#messages::-webkit-scrollbar {
  width: 10px;
}
#messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 999px;
}

/* =========================
   Message bubbles
========================= */
.bubble {
  max-width: min(70%, 520px);
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.bubble.mine {
  align-self: flex-end;
  background: #6a5cff;
  color: #fff;
  border-bottom-right-radius: 8px;
}

.bubble.other {
  align-self: flex-start;
  background: #e7e7ee;
  color: #111;
  border-bottom-left-radius: 8px;
}

/* ADMIN */
.bubble.other.admin {
  background: #eef2ff;
  border-left: 4px solid #6a5cff;
  position: relative;
}

.bubble.other.admin::before {
  content: "ADMIN";
  position: absolute;
  top: -14px;
  left: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #6a5cff;
}

/* =========================
   Footer / Input bar
========================= */
.help-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;

  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 10px;
  flex-shrink: 0; /* ✅ Footer ölçüsü sabit qalsın */
}

.help-footer .bar {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Input */
#messageInput {
  flex: 1;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 999px;
  padding: 12px 14px;
  font-size: 15px;
}

/* Button */
#sendBtn {
  border: none;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6a5cff, #8a7cff);
}

/* =========================
   Message wrapper + time
========================= */
.msg-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg-time {
  font-size: 11px;
  color: #777;
  padding: 0 6px;
}

.msg-time.right { text-align: right; }
.msg-time.left { text-align: left; }

/* =========================
   iOS / PWA Safe Area
========================= */
@supports (padding: env(safe-area-inset-bottom)) {
  #messages {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }

  .help-footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}