.chat-container {
  width: 80%;
  max-width: 94vw;
  height: 100%;
  background: #fff;
  margin: 0 auto;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(22,32,120,0.08), 0 6px 18px rgba(22,32,120,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 8px solid rgba(0,0,0,0.03);
}

/* --- Header --- */
.chat-container .topbar {
  background: linear-gradient(180deg,#2e63ff,#2b5df0);
  color: #fff;
  padding: 18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  height:12%;
}
.topbar .icons-left,
.topbar .icons-right {
  display:flex;
  gap:16px;
  align-items:center;
}
.topbar svg { width:22px; height:22px; opacity:.95; stroke:#fff; fill:none; stroke-width:1.6; }

/* --- Chat area --- */
.chat-area {
  flex: 1 1 auto;
  padding: 28px 26px 18px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.messages {
  height: 80%;
  overflow-y: auto;
  padding-bottom: 5%;
}

.msg-row {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 20px;
}

.avatar {
  width:44px;
  height:44px;
  border-radius:100%;
  background: radial-gradient(circle at 30% 30%, #35c4ff, #00b0ff);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  overflow:hidden;
  font-weight:700;
  box-shadow: 0 6px 18px rgba(3,37,76,0.06);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bubble {
  max-width:72%;
  padding:18px 18px;
  border-radius:16px;
  background:#f1f4f8;
  color:#111827;
  box-shadow: 0 6px 18px rgba(8,20,40,0.04);
  line-height:1.45;
  font-size:15px;
}

.msg-user {
  margin-left:auto;
  display:flex;
  align-items:flex-end;
  gap:12px;
}
.msg-user .bubble {
  background: linear-gradient(180deg,#e6f5ff,#dff3ff);
  color:#0b57d0;
  border-radius:18px;
  padding:14px 22px;
  text-align:center;
  box-shadow: 0 6px 12px rgba(10,80,200,0.06);
  max-width:78%;
}

/* Bot bubble corners */
.msg-row.bot .bubble {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 18px;
}

/* User bubble corners */
.msg-user .bubble {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 18px;
}

/* --- Input area --- */
.input-area {
  position: relative;
  height: 20%;
  left: 0;
  right: 0;
  bottom: 12px;
  padding: 12px 20px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

.input-wrapper {
  pointer-events: all;
  flex: 1;
  display:flex;
  gap:10px;
  align-items:center;
  background: #fff;
  border-radius: 28px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(8,20,40,0.04);
  border: 1px solid rgba(3,37,76,0.03);
}

.input-wrapper input[type="text"] {
  border: none;
  outline: none;
  width: 100%;
  font-size: 15px;
  padding-left:6px;
  background:transparent;
  color:#111827;
}

.modal-body{
    height:95vh;min-height:0;
}
.btn-circle {
  width:44px;
  height:44px;
  border-radius:50%;
  background: linear-gradient(180deg,#2e63ff,#2b5df0);
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  box-shadow: 0 8px 20px rgba(43,93,240,0.18);
  border:none;
}

.btn-ghost {
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f6f7fb;
  border:1px solid rgba(3,37,76,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* --- Scrollbar --- */
.messages::-webkit-scrollbar { width: 8px; }
.messages::-webkit-scrollbar-thumb { background: rgba(3,37,76,0.06); border-radius: 8px; }

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
  .chat-container {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    border-width: 4px;
  }

  .topbar {
    padding: 14px 16px;
    height: auto;
  }

  .chat-area {
    padding: 18px 14px 12px;
  }

  .bubble, .msg-user .bubble {
    max-width: 88%;
    font-size: 14px;
    padding: 12px 14px;
  }

  .input-area {
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
  }

  .input-wrapper {
    width: 100%;
  }

  .btn-circle {
    width: 40px;
    height: 40px;
  }

  .avatar {
    width: 36px;
    height: 36px;
  }
}

/* --- Extra small phones --- */
@media (max-width: 480px) {
  .chat-container {
    border-radius: 0;
    height: 100vh;
    width: 100vw;
  }

  .bubble, .msg-user .bubble {
    font-size: 13px;
    line-height: 1.4;
  }

  .input-area {
    padding: 8px 10px;
  }
}