/* ================================
   Dify Chat – minimal theme (Tonmana, mobile-keyboard safe)
   Version: 1.8.0
   ・×は右端寄せ＆大きいヒット領域
   ・ランチャーAIバッジを内側固定で崩れ防止
   ・タイトル: 大田呉服店AIチャットボット
   ================================ */

/* ---- Base / font / manual position (JSで上書き可) ---- */
#dify-chatbot-container.theme-tonmana{
  position: relative;
  z-index: 2147483647;
  font-family: "Yu Mincho","游明朝体","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;

  --launcher-right: 24px;
  --launcher-bottom: 88px;
  --window-right: 24px;
  --window-bottom: 96px;

  --r-window: 7px;
  --r-bubble: 6px;
  --r-chip:   5px;
  --r-input:  5px;
  --r-btn:    6px;

  --close-hit: 96px;
  --close-size: 45px;

  --menu-hit: 56px;
}

/* ---- Overlay ---- */
#chat-overlay[hidden]{ display:none; }
#chat-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.2);
  opacity:0; transition:opacity .18s ease;
  z-index:9998;
}
#chat-overlay[data-anim="out"]{ opacity:0; }
#chat-overlay:not([hidden]){ opacity:1; }

/* ---- Launcher bubble ---- */
#open-chat{
  position:fixed;
  right: var(--launcher-right);
  bottom: calc(var(--launcher-bottom) + env(safe-area-inset-bottom, 0px));
  width:61.6px; height:61.6px; border-radius:50%;
  background:#2b9aa1; color:#fff; border:none;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  cursor:pointer; transition:transform .15s, box-shadow .15s, bottom .15s;
}
#open-chat:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.16); }
#open-chat::after{
  content: attr(data-label);
  position:absolute; right:62px; top:50%; transform:translateY(-50%);
  background:#2b9aa1; color:#fff; padding:8px 12px; border-radius:999px;
  font-weight:600; font-size:13px; white-space:nowrap; opacity:.95;
  box-shadow:0 8px 16px rgba(0,0,0,.12); pointer-events:none;
}
/* モバイルではラベルをアイコンの上側・中央に表示する */
@media (max-width:767px){
  #open-chat::after{
    display:block;
    font-size:12px;
    left:auto;
    right:0;
    top:auto;
    bottom: calc(100% + 10px);
    transform:none;
    max-width: calc(100vw - 24px); /* 画面端での見切れ防止。padding相当の余白を確保 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
}

/* ランチャー内のアイコン&AIバッジ（内側固定） */
#open-chat .launcher-icon{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:26.4px; height:26.4px; color:#fff;
}
#open-chat .launcher-icon svg{ width:100%; height:100%; display:block; }
#open-chat .launcher-badge{
  position:absolute; right:4px; bottom:4px;
  background:#fff; color:#2b9aa1;
  border:1px solid rgba(43,154,161,.25);
  border-radius:999px; padding:2px 5px;
  font-weight:700; font-size:11px; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}

/* ---- Window ---- */
#chat-window[hidden]{ display:none; }
#chat-window{
  position:fixed;
  right: var(--window-right);
  bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom, 0px));
  width:380px; max-height:70vh;
  display:flex; flex-direction:column;
  background:#fff; color:#2b2b2b;
  border:1px solid #e6e9ed; border-radius: var(--r-window);
  box-shadow:0 10px 24px rgba(0,0,0,.10); overflow:hidden;
  transform: translateY(12px) scale(.98); opacity:0;
  transition: transform .18s ease, opacity .18s ease, bottom .15s;
  z-index:9999;

  --header-h-pc: 58px;
  --header-h-sp: 52px;
  --title-size-pc: 17px;
  --title-size-sp: 16px;

  --kb: 0px;
}
#chat-window[data-anim="in"]{  transform:translateY(0) scale(1); opacity:1; }
#chat-window[data-anim="out"]{ transform:translateY(12px) scale(.98); opacity:0; }

/* ---- Header ---- */
#chat-header{
  position: relative;
  flex: 0 0 var(--header-h-pc);
  height: var(--header-h-pc);
  min-height: var(--header-h-pc);
  box-sizing: border-box;
  display:flex; align-items:center; justify-content:center;
  padding: 0 14px;
  background:#f6f7f9; border-bottom:1px solid #e6e9ed;
  line-height:1; z-index:10000;
}
#chat-header::before{
  content: attr(data-title);
  display:block;
  font-weight:600; letter-spacing:.02em; color:#222;
  font-size: var(--title-size-pc);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#chat-header .title{ display:none !important; }

/* 右の×（大きいまま右端寄せ表示） */
#close-chat{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width: var(--close-hit) !important; height: var(--close-hit) !important;
  display:inline-flex; align-items:center; justify-content:flex-end;
  padding-right: 12px;
  background:transparent !important; border:none !important; box-shadow:none !important;
  color:#3b4248; font-size: var(--close-size); line-height:1;
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
#close-chat::before, #close-chat::after{ content:none !important; }
#close-chat:hover{ color:#1f2326; }
#close-chat:active{ transform:translateY(-50%) scale(.97); }

/* 左のハンバーガー */
#dify-menu-toggle{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width: var(--menu-hit); height: var(--menu-hit);
  display:inline-flex; align-items:center; justify-content:flex-start;
  padding-left:12px; background:transparent; border:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
#dify-menu-toggle .dify-bars{ position:relative; width:24px; height:18px; }
#dify-menu-toggle .dify-bar{
  position:absolute; left:0; right:0; height:2px; background:#333; border-radius:1px;
}
#dify-menu-toggle .dify-bar:nth-child(1){ top:0; }
#dify-menu-toggle .dify-bar:nth-child(2){ top:8px; }
#dify-menu-toggle .dify-bar:nth-child(3){ bottom:0; }

/* ドロップダウン */
#dify-menu-dropdown{
  position:absolute; left:8px; top: calc(100% + 6px);
  min-width: 180px; background:#fff; border:1px solid #dfe4e7; border-radius:8px;
  box-shadow:0 12px 24px rgba(0,0,0,.12); padding:6px; z-index: 10001;
  transform-origin: 12px top; transform: scale(.98); opacity:0; pointer-events:none;
  transition: transform .14s ease, opacity .14s ease;
}
#dify-menu-dropdown[data-open="true"]{
  transform: scale(1); opacity:1; pointer-events:auto;
}
.dify-menu-item{
  width:100%; text-align:left;
  background:#fff; border:none; border-radius:6px;
  padding:10px 12px; cursor:pointer; font-weight:600; color:#2b2b2b;
}
.dify-menu-item:hover{ background:#f5f7f9; }
.dify-menu-item:active{ transform:scale(.99); }

/* ---- Messages ---- */
#chat-messages{
  flex:1; padding:12px 14px; overflow:auto; background:#fafbfc; line-height:1.8;
  display:flex; flex-direction:column; gap:10px;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
.chat-row{ display:flex; align-items:flex-end; gap:10px; }
.chat-row.bot{ flex-direction: row; }
.chat-row.me { flex-direction: row; justify-content:flex-end; }
.avatar{
  width:44px; height:44px; aspect-ratio:1/1; border-radius:50% !important;
  background:#eef0f3; color:#2b2b2b; display:flex; align-items:center; justify-content:center;
  font-size:24px; border:1px solid rgba(43,154,161,.18); box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.chat-row.me .avatar{ background:#d1f1f3; }
.bubble{
  max-width:72%; padding:12px 14px; border-radius: var(--r-bubble) !important;
  background:#fff; border:1px solid #e6e9ed; box-shadow:0 1px 0 rgba(0,0,0,.02);
  white-space: pre-wrap; word-break: break-word;
}
.chat-row.me .bubble{ background:#eFf6f7; border-color:rgba(43,154,161,.18); }

/* --- 追加：アバター画像の自動トリミング＆丸型フィット --- */
.avatar img.avatar-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50% !important;
}

/* ---- Quick actions ---- */
.quick-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.quick-actions button{
  padding:8px 12px !important; border-radius: var(--r-chip) !important;
  border:1px solid #d9e9eb; background:#f1fbfc; color:#226a70; font-weight:600; cursor:pointer;
}
.quick-actions button:hover{ background:#e6f5f6; }

/* ---- Input ---- */
#chat-input{
  display:flex; gap:8px; padding:10px;
  background:#f6f7f9; border-top:1px solid #e6e9ed;
}
#user-input{
  flex:1; padding:10px 12px;
  border:1px solid #e6e9ed; border-radius: var(--r-input) !important; outline:none;
  font-size:14px;
}
#send-msg{
  padding:10px 14px; border-radius: var(--r-btn) !important;
  background:#2b9aa1; color:#fff; border:none; font-weight:600;
  min-width: 80px;
}

/* ---- Typing indicator ---- */
.bubble.typing{ background:#f3f6f8; border-style:dashed; }
.typing-box{ display:flex; align-items:center; gap:8px; }
.typing-text{ color:#6b7a80; font-size:13px; }
.dots{ display:inline-flex; gap:6px; align-items:center; }
.dot{ width:6px; height:6px; border-radius:50%; background:#9aa8ad; opacity:.55; animation:blink 1.2s infinite ease-in-out; }
.dot:nth-child(2){ animation-delay:.2s; }
.dot:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ transform:translateY(0); opacity:.4 } 40%{ transform:translateY(-2px); opacity:1 } }

/* ---- SP fullscreen & keyboard ---- */
@media (max-width:767px){
  #chat-window{
    right:0; left:0; bottom:auto; top:0; width:100%;
    max-height:none;
    height:100svh; height:100dvh; height:calc(var(--vh, 1vh) * 100);
    border-radius:0; border:none;
    overscroll-behavior: contain;

    --close-hit: 108px;
    --close-size: 51px;
    --menu-hit: 64px;
  }
  #chat-header{
    flex-basis: var(--header-h-sp);
    height: var(--header-h-sp);
    min-height: var(--header-h-sp);
    padding: 0 12px;
  }
  #chat-header::before{ font-size: var(--title-size-sp); }
  #chat-window #chat-input{
    position: sticky; bottom: 0; z-index: 2;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  #chat-window #user-input{
    padding: 11px 12px;
    min-height: 44px;
    font-size: 16px; line-height: 1.3;
  }
  #chat-window #send-msg{
    padding: 11px 16px;
    min-height: 44px;
    min-width: 94px;
    font-size: 16px;
  }
  #chat-window.kb-open #chat-messages{ padding-bottom: calc(14px + var(--kb, 0px)); }
  #chat-window.kb-open #chat-input{    margin-bottom: var(--kb, 0px); }
}
/* バブル内リンクの可読性向上 */
.bubble a{
  color:#2b9aa1;
  text-decoration: underline;
  word-break: break-all;
}
.bubble a:hover{
  text-decoration: underline;
  opacity: .9;
}