/* Reset và font */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body,#root { height: 100%; }
.app-container, body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background: #fff;
  color: #0f1724;
}

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 0;
  box-shadow: none;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.brand { display:flex; align-items:center; gap:12px; }
.logo { font-size:22px; width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(135deg,#fff7ea,#fff1c2); box-shadow:0 2px 6px rgba(240,222,120,0.15); }
.app-header h1 { font-size:1.05rem; font-weight:700; }

.user-area { display:flex; align-items:center; gap:12px; }
.hearts { color:#ff6b6b; font-weight:700; }
.auth-link { color:#0f1724; text-decoration:none; font-size:0.95rem; padding:6px 10px; border-radius:8px; background:transparent; border:1px solid rgba(15,23,42,0.04);} 

/* Chat area */
.chat-box {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 24px 48px 120px 48px; /* large bottom padding so input doesn't overlap */
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message { max-width: 86%; line-height:1.5; font-size:0.97rem; }
.message .meta { display:flex; gap:10px; align-items:center; margin-bottom:6px; }
.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:#fff9ec; box-shadow:0 1px 3px rgba(15,23,42,0.04); }
.sender-label { font-weight:700; font-size:0.92rem; color:#0f1724; }
.time { font-size:0.75rem; color:#6b7280; }
.message .content { background:#fff; padding:12px 14px; border-radius:12px; box-shadow:0 6px 18px rgba(2,6,23,0.03); }

.message.ai { align-self: flex-start; }
.message.user { align-self: flex-end; }
.message.user .content { background:linear-gradient(180deg,#e6f3ff,#dff0ff); border-radius:14px; }

/* Typing indicator */
.typing { display:flex; gap:6px; align-items:center; }
.dot { width:8px; height:8px; background:#cbd5e1; border-radius:50%; animation: blink 1s infinite; }
.dot:nth-child(2) { animation-delay: 0.15s; }
.dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 0%,100% { opacity:0.25 } 50% { opacity:1 } }

/* hearts animation */
.hearts { transition: transform 220ms ease, opacity 220ms ease; display:inline-block }
.hearts.pulse { transform: scale(1.25); opacity: 0.95 }

/* Input area fixed to bottom of container */
.chat-form {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display:flex; gap:10px; align-items:center;
  padding:18px 48px; background: transparent; border-top: 1px solid rgba(15,23,42,0.06);
}
#user-input { flex:1; padding:10px 8px; border: none; border-bottom: 2px solid rgba(15,23,42,0.2); font-size:1rem; background:transparent }
#user-input::placeholder { color: #6b7280 }
#user-input:focus { outline: none; box-shadow: none }
.chat-form button { background: transparent; border: none; color: #6b7280; cursor:pointer; padding:6px }
.chat-form button svg { transform: rotate(30deg); }

@media (max-width:600px) {
  .app-container { height: 100vh; border-radius:0; }
  .logo { width:36px;height:36px }
  .avatar { width:32px;height:32px }
  .app-header { padding:10px 12px }
  .chat-box { padding:12px }
  .chat-form { padding:10px }
}