/* フォント設定 */
    body {
      font-family:
        Inter,
        "Meiryo UI",
        "Meiryo",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        system-ui,
        sans-serif;
    }

    /* バブル */
  #chat-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    /* この設定がないとチャット画面がヘッダーの下に入り込んでヘッダー見えなくなる */
    z-index: 99999;
  }

    /* ===== 共通 ===== */
    #chat-window {
      position: fixed;
      display: none;
      flex-direction: column;

      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      /* この設定がないとチャット画面がヘッダーの下に入り込んでヘッダー見えなくなる */
      z-index: 99999;
    }

    /* ===== PC ===== */
    @media (min-width: 769px) {
      #chat-window {
        bottom: 90px;
        right: 20px;

        width: 420px;
        height: 520px; /* ★ 明示的に高さを決める */
        max-height: calc(100svh - 120px);

        border-radius: 8px;
      }
    }

    /* ===== スマホ ===== */
    @media (max-width: 768px) {

      /* チャットウィンドウ：下にバブル分の余白を確保 */
      #chat-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        /* ★ バブル＋余白分だけ下を空ける */
        bottom: calc(
          16px +                 /* 余白 */
          60px +                 /* バブル高さ */
          env(safe-area-inset-bottom)
        );

        width: 100%;
        height: auto;            /* bottom で高さ決定 */

        border-radius: 0;
        max-height: none;
      }

      /* バブル：常に右下 */
      #chat-bubble {
        position: fixed;
        bottom: calc(
          16px +
          env(safe-area-inset-bottom)
        );
        right: 16px;

        top: auto;
        left: auto;
      }

      /* スマホでは拡大ボタン不要 */
      #toggle-size {
        display: none;
      }
    }


    /* ウィンドウ拡大時 */
    #chat-window.is-expanded {
      width: 520px; /* お好みで */
    }

    .chat-header-buttons {
      display: flex;
      gap: 8px;
    }

    #chat-header button {
      font-size: 12px;
      padding: 4px 8px;
      cursor: pointer;
    }

    /* チャットヘッダー */
    #chat-header {
      padding: 10px;
      background: #72c23d;
      color: #fff;

      /* ↓ ここから追加 */
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #chat-header span {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.03em;
    }

    #reset-chat,
    #toggle-size {
      background: rgba(255,255,255,0.2);
      border: none;
      color: #fff;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
      cursor: pointer;
    }

    #reset-chat:hover,
    #toggle-size:hover {
      background: rgba(255,255,255,0.35);
    }

    #chat-body {
      flex: 1 1 auto;
      min-height: 0;
      padding: 10px;
      overflow-y: auto;
      background: #f4fbf1;
    }

    /* 吹き出し設定 */
    .message-row {
      display: flex;
      margin-bottom: 14px; /* ← 行間を広げる */
      align-items: flex-end;
    }

    .message-row.user {
      justify-content: flex-end;
    }

    .message-row.bot {
      justify-content: flex-start;
      align-items: flex-start; /* ★ これを追加 */
    }

    /* ボット・ユーザーの画像設定 */
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      flex-shrink: 0;
    }

    .avatar.user {
      margin-left: 6px;
    }

    .avatar.bot {
      margin-right: 6px;
    }

    /* 会話吹き出し */
    .bubble {
      max-width: 72%;
      padding: 10px 14px;   /* ← 余白アップ */
      border-radius: 12px; /* ← 少し丸く */
      font-size: 15px;     /* ← 文字を少し大きく */
      line-height: 1.6;    /* ← 読みやすく */
    }

    /* ユーザーの会話吹き出し */
    .bubble.user {
      background: #8fd26a;
      color: #fff;
      border-bottom-right-radius: 0;
      white-space: pre-wrap; /* ★ ユーザー入力のみ改行保持 */
    }

    /* ボットの会話吹き出し */
    .bubble.bot {
      background: #ffffff;
      color: #000;
      border-bottom-left-radius: 0;
      box-shadow: 0 1px 2px #0000001a; /* 白なので少し影をつける */
    }

    #chat-footer {
    display: flex;
    flex-direction: column;   /* ★ 縦方向に並べる */
    }

    .chat-input-row {
      position: relative;
      display: flex;
    }

    .chat-disclaimer {
    margin-top: 4px;
    padding: 4px 8px;

    border-radius: 12px; /* ← 少し丸く */
    font-size: 12px;     /* ← 文字を少し大きく */
    line-height: 1.4;
    color: #888;

    background: #f7f7f7;
    border-top: 1px solid #e0e0e0;
    }

    #chat-input {
      width: 100%;
      min-height: 36px;
      max-height: 160px;          /* ★ 伸びすぎ防止（好みで） */
      padding: 8px 44px 8px 10px; /* ★ 右下にボタン分の余白 */
      resize: none;
      overflow: hidden;

      font-size: 14px;
      line-height: 1.4;
      border-radius: 6px;
    }

    #send-btn {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);

      width: 32px;
      height: 32px;

      background: #72c23d;
      border: none;
      border-radius: 6px;
      cursor: pointer;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .chat-input-row.multiline #send-btn {
      top: auto;
      bottom: 6px;
      transform: none;
    }

    /* hover / active */
    #send-btn:hover {
    background: #67b134;
    }

    #send-btn:active {
    background: #5aa22d;
    }

    /* ▲ 送信アイコン（SVG） */
    #send-btn .send-icon {
    width: 24px;          /* ★ 少し大きめで見やすく */
    height: 24px;
    fill: #ffffff;       /* ★ 確実に白 */
    display: block;      /* ★ inline SVG のズレ防止 */
    }

    .bubble.bot[data-loading="1"]::after {
      content: '...';
      display: inline-block;
      width: 1.5em;          /* ★ 固定 */
      overflow: hidden;
      white-space: nowrap;
      width: 0;
      animation: dots 1.4s steps(3, end) infinite;
    }

    .bubble.bot[data-loading="1"] {
      min-width: 4em;        /* ★ 吹き出し固定 */
    }

    .bubble.bot::after {
      content: none;
      animation: none;
    }

    @keyframes dots {
      to {
        width: 1.5em;
      }
    }