/* === AI-INFO === */

.ai-info {
 overflow: visible;
 margin-bottom: 0px;
 height: auto;
 padding: 160px 0;
 background-color: #edefeb;
 --section-leading: 45px; /* .section-title の margin-left と同じ */
}

#section-title-ai {
 scroll-padding-top: 150px;
}

.ai-info-message {
 max-width: 680px;
 margin: 0 60px 40px;
 line-height: 1.7;
 font-size: 17px;
}
.ai-info__inner {
 display: flex;
 justify-content: center;
 max-width: 922px;
 padding: 0 61px;
 margin-top: 20px;
 margin-inline: auto;
 position: relative;
}
.ai-chat__character {
 position: absolute;
 top: 6px;
 left: -46px;
 width: 100px;
 height: 100px;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #cccdcd;
 border-radius: 100%;
 z-index: 4;
}
.ai-chat__character figure {
 width: 50px;
 height: 50px;
 margin: 0;
 background: url(../img/icon_ai.svg) no-repeat 50% 50%;
 background-size: contain;
}
.ai-chat__character:before {
 content: "";
 position: absolute;
 top: calc(50% - 10px);
 left: calc(100% - 4px);
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 20px 10px 0 10px;
 border-color: #cccdcd transparent transparent transparent;
 transform: rotate(-90deg);
 z-index: 0;
}

/* チャット枠 */
.ai-chat__window {
 width: 100%;
 margin-inline: auto;
 display: flex;
 flex-direction: column;
 border-radius: 10px;
 padding: 16px;
 height: 580px;
 background: #fff;
}

/* 履歴 */
.chat-history {
 flex: 1;
 overflow-y: auto;
 display: flex;
 flex-direction: column;
 gap: 14px;
}

/* 吹き出し共通 */
.chat-message {
 position: relative;
 padding: 28px 22px 22px;
 max-width: 75%; /* ← 幅を広げる */
 line-height: 1.5;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 word-break: break-word;
 font-size: 0.95rem;
}

/* ユーザ */
.chat-message.user {
 align-self: flex-end;
 background-image: url("/img/customer.webp");
 background-image: url("https://tagger-web-fkaqeuevg3fkegfk.eastasia-01.azurewebsites.net/img/self.webp/img/customer.webp"); /*あとで消す*/
}

/* AI */
.chat-message.ai {
 align-self: flex-start;
 background-image: url("/img/self.webp");
 background-image: url("https://tagger-web-fkaqeuevg3fkegfk.eastasia-01.azurewebsites.net/img/self.webp"); /*あとで消す*/
}

/* 入力部 */
.chat-input {
 display: flex;
 gap: 8px;
 margin-top: 14px;
}

.chat-input input {
 flex: 1;
 padding: 10px 12px;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-size: 15px;
}

.send-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0 16px;
 background: #393939;
 border: none;
 border-radius: 4px;
 color: #fff;
 cursor: pointer;
}

.send-btn:active {
 opacity: 0.8;
}

@media screen and (max-width: 1060px) {
 .ai-chat__character {
  top: -46px;
  left: 80px;
  width: 54px;
  height: 54px;
 }
 .ai-chat__character figure {
  width: 27px;
  height: 27px;
 }
 .ai-chat__character:before {
  content: "";
  top: calc(100% - 4px);
  left: calc(50% - 10px);
  transform: rotate(0deg);
 }
}

/* タブレット */
@media (max-width: 768px) {
 .ai-info {
  padding-block: 140px 120px;
 }
 .ai-info-message {
  max-width: unset;
  font-size: 16px;
  margin: 0 30px 40px;
 }
 .ai-info__inner {
  max-width: unset;
  padding: 0 30px;
  margin-top: 30px;
 }
}

/* スマホ */
@media (max-width: 600px) {
 .ai-info {
  padding-block: 100px 100px;
 }
 .ai-info-message {
  font-size: min(15.7px, 4.18vw);
  margin: 0 20px 20px;
 }
 .ai-info__inner {
  padding: 0 20px;
  margin-top: 40px;
 }
 .ai-chat__character {
  left: 20px;
 }
 .ai-chat__character:before {
  top: calc(100% - 8px);
 }
 .chat-message {
  font-size: 15px;
 }
}

/* スマホ以下：吹き出しをより広く、入力欄もタッチしやすく */
@media screen and (max-width: 576px) {
 .ai-info {
  height: auto;
 }
 .ai-chat__window {
  padding: 12px;
  min-height: 300px;
  max-height: 350px;
 }

 .chat-message {
  padding: 20px 16px 16px;
  max-width: 90%;
  font-size: min(15.7px, 4.18vw);
 }

 .chat-input {
  flex-direction: column;
  gap: 8px;
 }

 .chat-input input {
  width: 100%;
  font-size: 16px;
  padding: 8px 10px;
 }

 .send-btn {
  width: 100%;
  padding: 10px;
 }
}