/* :root { --c-primary: #2E86AB; --c-sub: #666; --c-user: #DCF8C6; --c-assistant: #F1F0F0; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.header { display:flex; align-items:center; gap:12px; justify-content:center; padding:16px; }
.logo { width:50px; height:50px; }
.sub-title { text-align:center; color: var(--c-sub); margin: 0 16px 16px; }
.sidebar { background:#fafafa; border-right:1px solid #eee; padding:16px; max-width:360px; }
.main { padding:16px; }
@media (min-width: 900px) {
body { display: grid; grid-template-columns: 360px 1fr; min-height: 100vh; }
}
.chat { border:1px solid #eee; border-radius:10px; padding:12px; height:50vh; overflow:auto; background:#fff; }
.chat-bubble-user { background: var(--c-user); padding:10px; border-radius:10px; margin:6px 0; text-align:right; }
.chat-bubble-assistant { background: var(--c-assistant); padding:10px; border-radius:10px; margin:6px 0; text-align:left; }
.composer { display:flex; gap:8px; margin-top:12px; }
.composer input { flex:1; padding:10px; border-radius:8px; border:1px solid #ddd; }
.composer button { padding:10px 14px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.status { margin-top:8px; color: #555; min-height: 1.2em; }
.itinerary.hidden { display: none; }
.itinerary-banner { background:#e8f5e9; border:1px solid #c8e6c9; padding:10px; border-radius:8px; margin-top:16px; }
.footer { grid-column: 1 / -1; text-align:center; padding:16px; color:#444; } */


/* Full screen container split in two */
body, html {
  margin: 0;
  padding: 0;
  height: 90%;
  font-family: sans-serif;
}

/* Chat styling */
.chat {
  flex-grow: 1;
  margin-bottom: 10px;
  overflow-y: auto;
  border: 1px solid #eee;
  padding: 10px;
  background: #fafafa;
  min-height: 0;    /* 👈 removes the phantom gap */
}

.chat-column {
  max-height: calc(100vh - 50px);
}

.composer {
  display: flex;
  gap: 10px;
  margin-top: auto;   /* ⬅️ pushes it to the bottom */
  flex-shrink: 0;     /* ⬅️ prevents shrinking when chat grows */
}

.composer input {
  flex: 1;
  padding: 10px;
}

.composer button {
  padding: 10px 16px;
  cursor: pointer;
}

/* Itinerary */
.itinerary-banner {
  font-weight: bold;
  margin: 10px 0;
  padding: 8px;
  background: #e6f7e6;
  border: 1px solid #a3d9a3;
  border-radius: 5px;
}

.placeholder {
  color: #777;
  font-style: italic;
  margin-top: 20px;
}

.toggle-btn {
  /* position: absolute; */
  top: 10px;
  left: 10px;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

#rightCol .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;     /* stretch within column */
  min-height: 0;    /* 👈 allows flex children to shrink properly */
  overflow-y: auto;          /* scrollable when overflow */
}

.profile-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
}
.profile-btn img {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  object-fit: cover;
}