/*────────────────────────────
  Chatbot Widget – Full Stylesheet
  ・パープル基調
  ・角張りバブル (bot: 左下 / user: 右下)
  ・三点リーダーは横一列・極小
  ・小さめ disclaimer 行
  ・スマホ対応レスポンシブ（max-width / max-height）
────────────────────────────*/

:root {
  --header-bg:       #9b7bf4;
  --header-color:    #fff;
  --bubble-btn-bg:   #9b7bf4;
  --user-bubble-bg:  #9b7bf4;
  --user-bubble-text:#fff;
  --bot-bubble-bg:   #ffffff;
  --bot-bubble-text: #333;
  --shadow: 0 4px 12px rgba(0,0,0,.15);
}

body{margin:0;font-family:"Segoe UI",sans-serif}

/*── フローティングバブル ──*/
#chat-bubble-btn{
  position:fixed;bottom:1rem;right:1rem;z-index:9999;
  width:56px;height:56px;border:none;border-radius:50%;
  background:var(--bubble-btn-bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);cursor:pointer
}
#chat-bubble-btn img{width:60%;height:60%}

/*── メインウィンドウ ──*/
#chat-window{
  position:fixed;bottom:76px;right:1rem;z-index:9999;
  width:26rem;max-width:calc(100vw - 1rem);
  height:38rem;max-height:calc(100vh - 140px);
  display:none;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:8px;box-shadow:var(--shadow)
}

/*── ヘッダー ──*/
#chat-header{
  display:flex;align-items:center;padding:.75rem 1rem;
  background:var(--header-bg);color:var(--header-color);
  font-weight:600
}
#chat-header span{flex:1}
#chat-header button{
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;margin-left:.25rem
}
#chat-header button img{width:18px;height:18px}

/*── メッセージエリア ──*/
#chat-messages{
  flex:1 1 auto;padding:1rem;overflow-y:auto;background:#fafafa
}
.msg{
  display:flex;gap:.35rem;margin-bottom:1rem;max-width:85%;
  align-items:flex-end
}
.msg.user{margin-left:auto;flex-direction:row-reverse}
.icon{width:32px;height:32px;flex:0 0 32px}
.bubble{
  padding:.65rem .95rem;line-height:1.45;word-break:break-word;
  box-shadow:0 1px 2px rgba(0,0,0,.08)
}
.bot .bubble{
  background:var(--bot-bubble-bg);color:var(--bot-bubble-text);
  border-radius:8px 8px 8px 2px  /* 左下だけ角張り */
}
.user .bubble{
  background:var(--user-bubble-bg);color:var(--user-bubble-text);
  border-radius:8px 8px 2px 8px  /* 右下だけ角張り */
}

/*── 入力行 ──*/
#chat-input-row{
  flex:0 0 auto;display:flex;gap:.5rem;padding:.6rem;background:#f1f1f1
}
#chat-input{
  flex:1;padding:.5rem .65rem;border:1px solid #ccc;border-radius:6px
}
#send-btn{
  width:38px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center
}
#send-btn img{width:24px;height:24px}

/*── typing dots (extra-small, inline) ──*/
@keyframes blink-dot{0%{opacity:.2}20%{opacity:1}100%{opacity:.2}}
.typing-dots{display:inline-block;line-height:1}
.typing-dots::before{
  content:"● ● ●";font-size:10px;letter-spacing:2px;
  animation:blink-dot 1s infinite steps(3)
}

/*── disclaimer ──*/
.disclaimer{font-size:.8em;display:block;margin-top:.35rem;color:#555}

/*── 高さが極端に低い機種での調整 ──*/
@media(max-height:600px){
  #chat-window{max-height:calc(100vh - 100px)}
}