.chat-page {
  max-width: 500px;
  margin: 32px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 30px #7ddfc81a;
  display: flex;
  flex-direction: column;
  height: 70vh;
  min-height: 320px;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 13px 14px 10px 14px;
  background: #e6faf5;
  border-radius: 16px 16px 0 0;
  font-weight: 700;
  font-size: 1.11em;
  border-bottom: 1px solid #b2dfd5;
}
.chat-title {
  font-size: 1.09em;
  color: #38b48b;
  margin-left: 2px;
}

.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 17px 14px 10px 14px;
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-message {
  max-width: 72%;
  padding: 9px 13px;
  border-radius: 16px;
  margin-bottom: 2px;
  font-size: 1em;
  line-height: 1.6;
  word-break: break-all;
  background: #fff;
  box-shadow: 0 1px 5px #99eed733;
}
.chat-message.from-me {
  align-self: flex-end;
  background: #38b48b;
  color: #fff;
}
.chat-message.from-you {
  align-self: flex-start;
  background: #fff;
  color: #333;
  border: 1px solid #d3f4e5;
}

.chat-form {
  display: flex;
  padding: 11px 14px 13px 14px;
  border-top: 1px solid #e7f6f1;
  background: #fff;
  border-radius: 0 0 16px 16px;
  gap: 8px;
}
.chat-input {
  flex: 1 1 auto;
  font-size: 1em;
  padding: 7px 11px;
  border-radius: 14px;
  border: 1px solid
}
.chat-send-btn {
  font-size: 1em;
  padding: 7px 20px;
  border-radius: 14px;
  border: none;
  background: #38b48b;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.17s, box-shadow 0.16s, transform 0.09s;
  box-shadow: 0 2px 8px #2cf0b432;
  outline: none;
}
.chat-send-btn:hover,
.chat-send-btn:focus {
  background: #45bf7c;
  color: #fff;
  box-shadow: 0 3px 14px #6ee7b72a;
  transform: translateY(-2px) scale(1.04);
}
.chat-send-btn:active {
  background: #2bd4aa;
  color: #fff;
  transform: scale(0.98);
}
.chat-back-btn {
  background: #eeeeee;                  /* 薄いパープル背景 */
  color: #0f0f0f;                       /* POPな紫 */
  border: none;
  border-radius: 16px;
  padding: 7px 19px;
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  margin-right: 10px;
  transition: background 0.16s, color 0.16s, transform 0.13s;
}
.chat-back-btn:hover,
.chat-back-btn:focus {
  background: #e3d4fa;
  color: #4b218e;
  transform: translateY(-2px) scale(1.04);
}
.chat-back-btn:active {
  background: #d6bef5;
  color: #fff;
  transform: scale(0.97);
}