/* Launcher（右下ボタン：画像のみ） */
#chat-launcher{
  position: fixed;
  right: 5px;
  bottom: 55px;
width: 300px;      /* ← ここを広げる */
  height: 100px;     /* ← ここもバランスを見て調整 */
  border: none;
  background: url("http://ppc-affiliate.site/wp-content/uploads/2025/10/chat.png")
              no-repeat center / contain;
  cursor: pointer;
  z-index: 2147483646;
  transition: opacity .2s;
  background-color: transparent;
  padding: 0;
}
#chat-launcher:hover{ opacity: .85; }

/* Panel */
.chat-box{
  position: fixed; right: 28px; bottom: 28px;
  z-index: 2147483647;
  width: 560px; max-width: calc(100vw - 48px);
  height: 78vh; max-height: 820px; min-height: 460px;
  background:#fff; border:1px solid #d0d7de; border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  display:grid; grid-template-rows:auto 1fr auto; overflow:hidden;

  opacity:0; transform: translateY(12px) scale(.98);
  pointer-events:none; transition: opacity .22s, transform .22s;
}
.chat-box.open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }

/* Header */
.chat-header{
  display:flex; align-items:center; justify-content:space-between;
  background:#f6f8fa; border-bottom:1px solid #e5e7eb; padding:10px 12px;
}
.chat-title{ font-weight:700; color:#0f172a; }
.chat-close{
  border:none; background:transparent; font-size:20px; width:32px; height:32px;
  border-radius:8px; cursor:pointer;
}
.chat-close:hover{ background:#eaeef2; }

/* Messages */
.chat-messages{ padding:16px; overflow-y:auto; background:#fff; }
.message{
  max-width:95%; padding:10px 12px; border-radius:12px;
  margin:8px 0; line-height:1.8; word-wrap:break-word;
}
.message.user{ margin-left:auto; background:#e7f1ff; color:#0f172a; }
.message.assistant{ margin-right:auto; background:#f6f8fa; color:#0f172a; }
.message.assistant p{ margin:.6em 0; }
.message.assistant h3{ margin:.6em 0 .3em; font-size:1rem; font-weight:700; }
.message.assistant strong{ font-weight:700; }

/* 考え中ドット */
.typing{ display:inline-flex; gap:6px; padding:8px 2px; align-items:center; }
.typing span{
  width:7px; height:7px; border-radius:50%;
  background:#94a3b8; animation: blink 1s infinite ease-in-out; opacity:.25;
}
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{opacity:.25;} 40%{opacity:1;} }

/* Input */
.chat-input{ display:flex; border-top:1px solid #e5e7eb; }
.chat-input input{ flex:1; border:none; padding:12px; font-size:14px; outline:none; }
.chat-input button{ border:none; background:#1f6feb; color:#fff; padding:0 16px; cursor:pointer; }
.chat-input button:hover{ background:#1757c2; }
.chat-input button[disabled]{ opacity:.6; cursor:not-allowed; }

/* Responsive */
@media (min-width: 1200px){
  .chat-box{ width: 640px; height: 80vh; }
}
@media (max-width: 640px){
  .chat-box{ right:8px; left:8px; width:auto; height:78vh; }
}