/* =========================================================
   EmpathEra-AI Chat — MASTER-40 LOCK (FINAL UI POLISH)
========================================================= */

:root {
  --bg-main: #050010;
  --accent: #7b2bff;
  --accent-soft: #3b0078;
  --accent-strong: #ff2b70;
  --text-main: #ffffff;
  --sidebar-w: 180px;
}

/* ================= BASE ================= */

body.chat-page {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: radial-gradient(circle at top, #1b0040 0%, #050010 60%);
  color: var(--text-main);
  overflow: hidden;
  height: 100dvh;
}

/* ================= APP ================= */

.chat-app {
  display: flex;
  height: 100dvh;
  position: relative;
}

/* ================= SIDEBAR ================= */

.chat-sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #070015, #15002e);
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
}

body.sidebar-collapsed .chat-sidebar {
  width: 0;
  overflow: hidden;
}

/* ================= TOGGLE ================= */

.sidebar-toggle-btn {
  position: fixed;
  left: var(--sidebar-w);
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle, #ff7be0, #7b2bff);
  color: #fff;
  z-index: 60;
  cursor: pointer;
}

body.sidebar-collapsed .sidebar-toggle-btn {
  left: 10px;
}

/* ================= MAIN ================= */

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ================= SCROLL AREA ================= */

.chat-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px 110px; /* 🔑 tightened */
}

/* ================= MESSAGE STACK ================= */

#chatApp {
  display: flex;
  flex-direction: column;
  gap: 8px; /* tighter */
}

/* ================= MESSAGES ================= */

.chat-msg {
  max-width: 75%;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}

.chat-msg.user {
  margin-left: auto;
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
}

.chat-msg.assistant {
  margin-right: auto;
  background: linear-gradient(135deg, #1f1537, #401f6a);
}

/* ================= INPUT BAR ================= */

.chat-input-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--accent-soft), #1e0035);
  z-index: 80;
}

/* ================= INPUT ================= */

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
  resize: none;
}

/* ================= BUTTONS ================= */

.square-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle, #ffe0ff, var(--accent));
}

.send-btn {
  background: radial-gradient(circle, #ffd4e5, var(--accent-strong));
}

/* ================= DISCLAIMER ================= */

.chat-warning {
  font-size: 11px;
  opacity: 0.7;
  text-align: center;
  margin-top: 4px;
}

/* ================= MOBILE PORTRAIT ================= */

@media (max-width: 768px) {
  .chat-container {
    padding: 12px 12px 130px;
  }

  .chat-msg {
    max-width: 88%;
  }
}

/* ================= MOBILE LANDSCAPE ================= */

@media (max-width: 900px) and (orientation: landscape) {
  .chat-container {
    padding-bottom: 150px;
  }

  .chat-input-bar {
    bottom: 6px;
  }
}

/* ================= CLICK SAFETY ================= */

button,
textarea,
input {
  pointer-events: auto !important;
  position: relative;
  z-index: 100;
}

.chat-page::before,
.chat-page::after,
.chat-app::before,
.chat-app::after,
.chat-main::before,
.chat-main::after {
  pointer-events: none !important;
}