/* =========================
   ブログ共通ヘッダー
   ========================= */

.blog-header {
  padding: 16px 0;
  background-color: #fff;
}

/* リンク全体をブロック化 */
.blog-header a {
  display: block;
  text-decoration: none;
}

/* タイトル画像 */
.blog-header img {
  width: 100%;
  max-width: 600px;   /* PCでの最大幅 */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =========================
   タブレット以上
   ========================= */
@media screen and (min-width: 768px) {
  .blog-header {
    padding: 24px 0;
  }
}

/* =========================
   PC大画面
   ========================= */
@media screen and (min-width: 1200px) {
  .blog-header {
    padding: 32px 0;
  }
}

body {
      margin: 0;
      padding: 0;
      background-color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                   Helvetica, Arial, sans-serif;
      color: #111;
    }

    .chat-container {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 16px;
    }

    .message {
      display: flex;
      margin-bottom: 24px;
      line-height: 1.6;
    }

    .assistant {
      justify-content: center;
    }

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

    .bubble {
      padding: 14px 18px;
      border-radius: 12px;

    }

    .assistant .bubble {
      background-color: #ffffff;
      border: 1px solid #e5e5e5;
    }

    .user .bubble {
      max-width: 70%;
      background-color: #e9eefb;
      border: 1px solid #d6defa;
      text-align: left;
    }

    .role {
      font-size: 12px;
      color: #666;
      margin-bottom: 6px;
    }