@charset "UTF-8";

/* Difyのチャットウィンドウとバブルボタンを画面に完全固定する */
#dify-chatbot-bubble-window,
#dify-chatbot-bubble-button {
  position: fixed !important;
}
/* --- 今回追加：自作の吹き出しデザイン --- */
#dify-welcome-bubble {
  position: fixed !important;
  /* Difyボタンの位置（bottom:20px + ボタンの高さ等）に合わせて調整 */
  bottom: 85px !important; 
  right: 15px !important;
  z-index: 10000 !important; /* ボタンよりさらに手前に表示 */
/* 吹き出しの見た目 */
  background-color: #ffffff; /* 背景色（白） */
  color: #333333;            /* 文字色（濃いグレー） */
  padding: 10px 16px;        /* 内側の余白 */
  border-radius: 20px;       /* 角丸 */
  font-size: 14px;           /* 文字の大きさ */
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* フワッとした影 */
  white-space: nowrap;       /* 改行させない */
  pointer-events: none;      /* 吹き出しがクリックの邪魔をしないようにする */
}
/* 吹き出しの「下矢印（突起）」を作る */
#dify-welcome-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;              /* 吹き出しの下に配置 */
  right: 20px;               /* 右からの位置 */
  border-width: 8px 6px 0;   /* 三角形のサイズ */
  border-style: solid;
  border-color: #ffffff transparent; /* 背景色と同じ白 */
  display: block;
  width: 0;
}