/**
 * チャットの見た目
 *
 * テーマの語彙に合わせる。細い罫、コーポレートカラー、見出しは Jost。
 * ただしテーマが変わっても壊れないよう、変数は使わず値で持つ。
 */

.achat{
  position:fixed;right:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);
  z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans","Noto Sans JP",sans-serif;
}

.achat__toggle{
  order:2;
  padding:.9em 1.6em;border:0;border-radius:999px;
  background:#3D4E64;color:#fff;cursor:pointer;
  font-size:13px;letter-spacing:.08em;line-height:1;
  box-shadow:0 6px 24px rgba(20,32,48,.22);
  transition:transform .25s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease;
}
.achat__toggle:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(20,32,48,.28)}
.achat__toggle:focus-visible{outline:2px solid #3D4E64;outline-offset:3px}

.achat__panel{
  order:1;
  width:min(92vw, 380px);
  max-height:min(72vh, 560px);
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #E9E9E9;
  box-shadow:0 18px 60px rgba(20,32,48,.18);
}

.achat__head{padding:18px 20px 14px;border-bottom:1px solid #E9E9E9}
.achat__title{
  margin:0 0 .5em;font-size:13px;letter-spacing:.06em;line-height:1.5;color:#333;
}
.achat__note{margin:0;font-size:11px;line-height:1.75;color:#5B6672}

.achat__log{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:16px 20px;display:flex;flex-direction:column;gap:12px;
  min-height:120px;
}
.achat__msg{
  max-width:88%;padding:.75em 1em;
  font-size:12.5px;line-height:1.95;white-space:pre-wrap;
}
.achat__msg.is-you{align-self:flex-end;background:#ECF3FA;color:#333}
.achat__msg.is-bot{align-self:flex-start;background:#F6F7F8;color:#333}
.achat__msg.is-waiting{color:#8BA5A7}

.achat__suggests{padding:0 20px 14px;display:flex;flex-wrap:wrap;gap:6px}
.achat__suggest{
  padding:.55em 1em;border:1px solid #E9E9E9;border-radius:999px;
  background:#fff;color:#5B6672;cursor:pointer;
  font-size:11.5px;line-height:1.5;
  transition:border-color .2s ease,color .2s ease;
}
.achat__suggest:hover{border-color:#8BA5A7;color:#333}

.achat__form{display:flex;gap:8px;padding:14px 20px 18px;border-top:1px solid #E9E9E9}
.achat__input{
  flex:1;min-width:0;padding:.7em .9em;
  border:1px solid #E9E9E9;background:#fff;color:#333;
  font-size:13px;line-height:1.6;font-family:inherit;
}
.achat__input:focus{outline:2px solid #3D4E64;outline-offset:-1px}
.achat__send{
  padding:.7em 1.2em;border:0;background:#3D4E64;color:#fff;cursor:pointer;
  font-size:12px;letter-spacing:.06em;white-space:nowrap;
}
.achat__send:hover{opacity:.88}

@media (max-width:480px){
  .achat{left:clamp(14px,2.5vw,28px)}
  .achat__panel{width:100%}
}

@media (prefers-reduced-motion: reduce){
  .achat__toggle,.achat__suggest{transition:none}
  .achat__toggle:hover{transform:none}
}