@charset "UTF-8";

/* ==========================================================================
   1. 基本設定
   ========================================================================== */
html {
  font-size: 62.5%;
  /* 1rem = 10px */
  scroll-behavior: smooth;
  /* スムーズスクロール */
}

body {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #270407;
  font-family: "Noto Sans JP", sans-serif;
  background-color: #fcfafb;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

#top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
}

/* ==========================================================================
   2. カード & 基本ボタン
   ========================================================================== */
.login-card,
.result-card,
.no-info {
  background-color: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(39, 4, 7, 0.06);
  width: 90%;
  max-width: 420px;
  text-align: center;
  box-sizing: border-box;
}

.btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 6px;
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background-color: #270407;
  color: #fff;
  margin-bottom: 15px;
}

.btn-primary:hover {
  background-color: #ed1c24;
}

.btn-secondary {
  border: 2px solid #270407;
  color: #270407;
  background-color: transparent;
}

.btn-secondary:hover {
  background-color: #270407;
  color: #fff;
}

/* ==========================================================================
   3. 掲示板パーツ・返信・ログインフォーム関連
   ========================================================================== */
/* (ログイン、入力フォーム、記事一覧等のスタイルは省略せずそのまま適用してください) */
/* 略（ここまでのコードを維持） */
.input-group {
  margin-bottom: 20px;
}

.input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.input-group input[type="file"] {
  display: block;
  padding: 15px;
  margin: 0 auto;
  text-align: center;
  width: fit-content;
  max-width: 100%;
}

/* フォーム内のテキストエリアも、カードの幅（100%）にカチッと合わせる設定 */
.input-group textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  font-family: inherit;
  /* 文字のフォントをbodyと統一する */
}

.post-message {
  text-align: left;
  background: #fffcfc;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ffebee;
  margin-bottom: 15px;
}

/* 通常の投稿カード*/
.post-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(39, 4, 7, 0.04);
  border-left: 5px solid #bb36d2;
  margin-bottom: 20px;
  box-sizing: border-box;
  width: 100%;
}

/* 一般の投稿カード (左側に赤い線を引いて区別)*/
.reply-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(39, 4, 7, 0.04);
  border-left: 5px solid #ed1c24;
  margin-bottom: 20px;
  box-sizing: border-box;
  width: 100%;
}

/* AIアシスタントからの返信カード(左端を青い線にしてAIっぽさを演出)*/
.reply-item.ai-reply {
  border-left: 5px solid#0275d8;
  background-color: #f7faff;
}

/* プロフィール画像・アイコンのサイズ制限 */
.post-avatar,
.reply-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px auto;
  /* 中央寄せ用 */
}

/* ==========================================================================
   4. 画面固定ボタン（フローティングメニュー）
   ========================================================================== */
.btn-floating {
  display: inline-block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.btn-floating:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

.floating-menu-right {
  position: fixed;
  right: 20px;
  bottom: 90px;
  z-index: 999;
}

.floating-menu-left {
  position: fixed;
  left: 20px;
  bottom: 30px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-home {
  background-color: #4a90e2;
}

.btn-mypage {
  background-color: #8e44ad;
}

.btn-logout {
  background-color: #e53935;
}

/* ==========================================================================
   5. AIチャットウィンドウ
   ========================================================================== */
#ai-chat-window {
  display: none;
  position: fixed !important;
  bottom: 90px !important;
  right: 20px !important;
  width: 340px !important;
  height: 480px !important;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  z-index: 10000 !important;
  flex-direction: column;
  overflow: hidden;
}

.chat-open-trigger {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  padding: 12px 24px !important;
  background: #270407 !important;
  color: white !important;
  border-radius: 30px !important;
  z-index: 9999 !important;
  cursor: pointer;
}

/* その他チャット用パーツのスタイルはそのまま継続 */
.chat-head {
  background: #0275d8;
  color: white;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chat-history {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-footer {
  padding: 10px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}

#chat-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 20px;
}

.chat-send-btn {
  background: #5cb85c;
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 20px;
  cursor: pointer;
}

.msg-user {
  align-self: flex-end;
  background: #5cb85c;
  color: white;
  padding: 8px 12px;
  border-radius: 15px 15px 0 15px;
  font-size: 14px;
}

.msg-ai {
  align-self: flex-start;
  background: #fff;
  color: #333;
  padding: 8px 12px;
  border-radius: 15px 15px 15px 0;
  font-size: 14px;
  border: 1px solid #e9e9e9;
}


/* ==========================================================================
   6. スマートフォン・タブレット対応（レスポンシブ）
   ========================================================================== */
@media screen and (max-width: 768px) {

  /* 1. スマホのときは画面中央固定を解除し、上から順に流れるようにする */
  body {
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
    min-height: auto;
  }

  /* 2. メインカードの調整（ギューギュー感をなくす） */
  .login-card,
  .result-card,
  .no-info,
  .post-card,
  .timeline-container {
    width: 100%;
    padding: 25px 20px;
    /* 上下の余白を少し広げてゆったりさせる */
    margin-top: 10px;
    margin-bottom: 100px;
    /* 下の固定ボタンと被らないように余白を多めに */
  }

  /* 3. 【崩れ対策】テキストエリアと入力欄をスマホ幅にピッタリ合わせる */
  .input-group textarea,
  .input-group input[type="file"],
  .input-group input {
    width: 100% !important;
    box-sizing: border-box !important;
    /* 枠線を含めて100%の幅にする */
    margin-bottom: 15px !important;
    /* 各パーツの間に程よい隙間を作る */
  }

  /* 4. チェックボックスと「AIアシスタントに相談する」の間の隙間を調整 */
  .login-card form div[style*="margin: 10px 0;"] {
    margin: 20px 0 !important;
    /* 送信ボタンとの間隔をあける */
    font-size: 1.5rem;
  }

  /* 5. スマホではAIチャット窓のサイズを画面に合わせる */
  #ai-chat-window {
    width: calc(100% - 40px) !important;
    height: 60vh !important;
    right: 20px !important;
    bottom: 80px !important;
  }

  /* 6. 画面下のボタンたちをスマホでも押しやすいサイズ・位置に微調整 */
  .floating-menu-left {
    left: 15px;
    bottom: 15px;
  }

  .floating-menu-right {
    right: 15px;
    bottom: 75px;
  }

  .chat-open-trigger {
    right: 15px !important;
    bottom: 15px !important;
    padding: 10px 18px !important;
    font-size: 1.3rem !important;
  }
}