/* --- 基本設定 --- */
body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
}

.app-container {
    width: 100%;
    max-width: 450px;
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
    position: relative;
}

/* --- ① 最上部固定ヘッダー --- */
.screen-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #ffffff;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.header-title {
    font-size: 18px;
    font-weight: bold;
    color: #ff4a6e;
}
/* --- タブナビゲーション --- */
.top-tabs {
    display: flex;
    background: #f8f8f8;
    border-radius: 30px;
    padding: 5px;
    margin-bottom: 25px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #999;
    border-radius: 25px;
}

.tab.active {
    background-color: #ff4a6e;
    color: #fff;
}

/* --- メインコンテンツ --- */
.content-area {
    padding: 20px 15px;
}

.section-title {
    font-size: 17px;
    margin-bottom: 15px;
}

.user-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 25px;
}

.user-card {
    background: #fdfaf5;
    border-radius: 12px;
    overflow: hidden;
}

.image-wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    border-bottom-left-radius: 50% 12px;
    border-bottom-right-radius: 50% 12px;
    overflow: hidden;
}

.image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.image-wrapper.blurred img { filter: blur(10px); }

.user-info { padding: 10px; }
.user-name { font-weight: bold; margin: 0 0 4px; }
.user-meta { font-size: 12px; color: #666; margin: 0; }
.check-icon { color: #ff847f; font-size: 10px; }

.badge-top {
    font-size: 9px;
    color: #fff;
    background: linear-gradient(90deg, #ff847f, #ff847f);
    padding: 2px 5px;
    border-radius: 4px;
}

/* --- ② 下部ナビゲーション --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 450px;
    height: 70px;
    background-color: #ffffff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #bbb; /* 未選択時の色 */
    font-size: 9px;
    flex: 1;
}

.nav-item i {
    font-size: 22px;
    margin-bottom: 5px;
}

.nav-item.active {
    color: #ff847f; /* 選択時の色（アクセントカラー） */
}

/* --- タブナビゲーション --- */
.top-tabs {
    display: flex;
    background: #f8f8f8;
    border-radius: 30px;
    padding: 5px;
    margin-bottom: 25px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #999;
    border-radius: 25px;
}

.tab.active {
    background-color: #ff4a6e;
    color: #fff;
}

/* コンテンツ */
.content-area { padding: 20px 15px; }

.section-title {
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.instruction-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* フォーム */
.form-group { margin-bottom: 25px; }
.form-label {
    display: block;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
}

.form-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    background-color: #f9f9f9;
}

/* カレンダー */
.calendar-container {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-header span { font-weight: bold; font-size: 16px; }

.cal-btn {
    background: none;
    border: 1px solid #ddd;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
}

.calendar-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.calendar-table th {
    padding: 8px 0;
    font-size: 12px;
    color: #999;
}

.calendar-table td {
    padding: 10px 0;
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    width: 14.28%;
}

/* 土日色付け */
.sat { color: #4a90e2; } /* 青系 */
.sun { color: #e94e77; } /* 赤系 */

.calendar-table td:hover { background-color: #f0f0f0; }
.calendar-table td.selected {
    background-color: #ff847f !important;
    color: #fff !important;
    font-weight: bold;
}

/* 申込ボタン */
.submit-button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(to right, #ff847f, #ff847f);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(181, 141, 77, 0.3);
}

/* ボトムナビ（前回の踏襲） */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 450px;
    height: 70px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    z-index: 100;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #bbb;
    font-size: 9px;
}

.nav-item i { font-size: 22px; margin-bottom: 4px; }
.nav-item.active { color: #ff847f; }

/* メインコンテンツ */
.main-content {
    padding: 0px 15px 100px; /* 上下固定要素分の余白 */
}

/* タブ切り替え */
.tab-container {
    display: flex;
    background: #fff;
    border-radius: 30px;
    padding: 5px;
    margin-bottom: 20px;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: bold;
    color: #999;
    border-radius: 25px;
    cursor: pointer;
}

.tab-item.active {
    background-color: #ff4a6e;
    color: #fff;
}

/* セクション見出し */
.section-heading {
    font-size: 16px;
    margin-bottom: 15px;
    padding-left: 5px;
    border-left: 4px solid #ff4a6e;
}

/* ライブグリッド (2列) */
.live-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.live-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.thumbnail-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
}

.thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ライブバッジ */
.live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff4a6e;
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.viewer-count {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

/* ライブタイトル等 */
.live-info {
    padding: 10px;
}

.live-title {
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-name {
    font-size: 11px;
    color: #888;
    margin: 0;
}

/* --- ② 下部ナビゲーション --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 450px;
    height: 70px;
    background-color: #ffffff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #bbb; /* 未選択時の色 */
    font-size: 9px;
    flex: 1;
}

.nav-item i {
    font-size: 22px;
    margin-bottom: 5px;
}

.nav-item.active {
    color: #ff847f; /* 選択時の色（アクセントカラー） */
}

/* リストアイテム (マッチングカード) */
.matching-card {
    background-color: #fff;
    border-radius: 15px;
    margin-bottom: 15px;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.card-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-avatar img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fceef2;
}

.user-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.user-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.user-age {
    font-size: 13px;
    color: #888;
}

/* Messageボタン */
.message-btn {
    background-color: #ff4a6e;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.message-btn:active {
    opacity: 0.7;
}

/* 日付エリア */
.card-footer {
    margin-top: 10px;
/*    padding-top: 10px; */
    border-top: 1px solid #f9f9f9;
}

.match-date {
    font-size: 11px;
    color: #bbb;
}

/* --- ② 下部ナビゲーション --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 450px;
    height: 70px;
    background-color: #ffffff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #bbb; /* 未選択時の色 */
    font-size: 9px;
    flex: 1;
}

.nav-item i {
    font-size: 22px;
    margin-bottom: 5px;
}

.nav-item.active {
    color: #ff847f; /* 選択時の色（アクセントカラー） */
}

/* メニューリスト */
.menu-list {
    border-top: 1px solid #eee;
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 5px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.menu-item:active {
    background-color: #f9f9f9;
}

.menu-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu-left i {
    width: 24px;
    font-size: 18px;
    color: #ff4a6e; /* アイコンをアクセントカラーに */
    text-align: center;
}

.menu-left span {
    font-size: 15px;
    font-weight: 500;
}

.arrow {
    font-size: 12px;
    color: #ccc;
}

/* 特定のメニュー装飾 */
.menu-item.highlight span {
    color: #ff4a6e;
    font-weight: bold;
}

.menu-item.withdraw span {
    color: #999;
}

/* --- ② 下部ナビゲーション --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 450px;
    height: 70px;
    background-color: #ffffff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
}

.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #bbb; /* 未選択時の色 */
    font-size: 9px;
    flex: 1;
}

.nav-item i {
    font-size: 22px;
    margin-bottom: 5px;
}

.nav-item.active {
    color: #ff847f; /* 選択時の色（アクセントカラー） */
}

/* ヘッダー・フッター固定 */
.fixed-header {
    position: fixed; top: 0; width: 100%; height: 50px;
    background: #fff; display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid #eee; z-index: 1000;
}
.header-title { font-size: 16px; font-weight: bold; color: #ff4a6e; }

/* タブ */
.tab-container {
    display: flex; background: #fff; border-radius: 25px;
    padding: 3px; margin-bottom: 10px;
}
.tab-item {
    flex: 1; text-align: center; padding: 8px 0;
    font-size: 13px; font-weight: bold; color: #ccc; border-radius: 20px;
}
.tab-item.active { background: #ff4a6e; color: #fff; }

/* 8分割グリッド */
.conpa_live-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
    margin-bottom: 10px;
}
.video-cell {
    position: relative; aspect-ratio: 3/4; background: #333;
    border-radius: 8px; overflow: hidden; border: 2px solid transparent;
}
.video-cell:active { border-color: #ff4a6e; }

.video-placeholder { width: 100%; height: 100%; background: #555; }
/* サンプル用の色分け */
.p1 { background: #db7093; } .p2 { background: #ff69b4; } .p3 { background: #ff1493; } .p4 { background: #c71585; }
.p5 { background: #4682b4; } .p6 { background: #5f9ea0; } .p7 { background: #6495ed; } .p8 { background: #4169e1; }

.user-label {
    position: absolute; bottom: 3px; left: 3px;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 9px;
    padding: 2px 4px; border-radius: 4px;
}

/* 大画面表示エリア */
.large-view-container {
    background: #fff; border-radius: 12px; padding: 10px;
    margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.large-video-wrapper { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden;}
.large-screen { width: 100%; height: 100%; }
.large-info {
    position: absolute; top: 0; width: 100%; background: rgba(0,0,0,0.4);
    display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; box-sizing: border-box;
}
.large-info span { color: #fff; font-size: 12px; font-weight: bold; }
.close-btn { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }

/* コントロール・お題・リアクション */
.interaction-area { display: flex; flex-direction: column; gap: 15px; }

.self-controls { display: flex; justify-content: center; gap: 20px; }
.control-btn {
    border: none; background: #fff; width: 60px; height: 60px;
    border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    color: #ff4a6e; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.control-btn i { font-size: 18px; margin-bottom: 2px; }
.control-btn span { font-size: 9px; }
.control-btn.off { color: #ccc; }

.topic-card {
    background: #fff; border-radius: 15px; padding: 15px; text-align: center;
    border: 2px dashed #ff4a6e;
}
.topic-label { font-size: 10px; color: #ff4a6e; font-weight: bold; margin-bottom: 5px; }
#topic-text { font-size: 14px; font-weight: bold; margin: 10px 0; }
.next-topic { background: #ff4a6e; color: #fff; border: none; padding: 5px 15px; border-radius: 15px; font-size: 11px; }

.reaction-buttons { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 10px; }
.react-btn {
    background: #fff; border: 1px solid #ff4a6e; color: #ff4a6e;
    padding: 8px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; flex: 1; min-width: 80px;
}

/* エフェクトアニメーション */
#effect-layer { pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; }
.floating-effect {
    position: absolute; bottom: 100px; font-size: 30px;
    animation: floatUp 2s ease-out forwards;
}
@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-400px) scale(1.5); opacity: 0; }
}

.atab_active {
	text-decoration: none;
	color:#fff;
}
.atab_nonactive {
	text-decoration: none;
	color:#999;
}

/* コメントエリア全体のコンテナ */
.comment-area {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.8); /* 少し透け感を出してLoveny風に */
    border-radius: 15px;
    padding: 10px;
    border: 1px solid #f0f0f0;
}

/* コメントが流れるリスト部分 */
.comment-list {
    height: 150px; /* 高さを固定してスクロールさせる */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 5px;
    margin-bottom: 10px;
}

/* 個別のコメント行 */
.comment-item {
    font-size: 13px;
    line-height: 1.4;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

.comment-user {
    font-weight: bold;
    color: #ff4a6e; /* ユーザー名はテーマカラーのピンク */
    margin-right: 5px;
}

.comment-text {
    color: #333;
}

/* 入力フォーム部分 */
.comment-input-group {
    display: flex;
    gap: 5px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.comment-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 13px;
    outline: none;
}

.comment-input:focus {
    border-color: #ff4a6e;
}

.comment-send-btn {
    background: #ff4a6e;
    color: #fff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* スクロールバーのカスタマイズ（ブラウザ対応） */
.comment-list::-webkit-scrollbar {
    width: 4px;
}
.comment-list::-webkit-scrollbar-thumb {
    background: #ffc0cb;
    border-radius: 10px;
}

/* ----------------------------------------------------- */
/* 登録コンテンツ */
/* ----------------------------------------------------- */
.register-main-content {
    text-align: center;
    padding-top: 10px;
}

.register-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.register-subtitle {
    font-size: 16px;
    color: #888;
    margin-bottom: 40px;
}

/* --- フォームと入力欄 --- */
.profile-form {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    text-align: left; /* フォームのラベルを左寄せにする */
}

.input-group {
    margin-bottom: 30px;
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

/* 全ての入力フィールド(input, select)の共通スタイル */
.profile-form input[type="text"],
.profile-form input[type="number"],
.profile-form input[type="date"],
.profile-form select {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s;
    appearance: none; /* selectのデフォルトのスタイルをリセット */
    -webkit-appearance: none;
    background-color: #fff;
}

.profile-form input:focus,
.profile-form select:focus {
    border-color: #ff8c7e; /* フォーカス時にアクセントカラー */
}

/* select要素にカスタム矢印を追加 (select要素のデザインを改善) */
.input-group select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ff6b81%22%20d%3D%22M287%20196.8c-3%203-7.6%204.8-12.4%204.8H17.8c-4.8%200-9.4-1.8-12.4-4.8s-4.8-7.6-4.8-12.4c0-4.8%201.8-9.4%204.8-12.4L146.2%2036.8c3-3%207.6-4.8%2012.4-4.8s9.4%201.8%2012.4%204.8l128.6%20135.2c3%203%204.8%207.6%204.8%2012.4%200%204.8-1.8%209.4-4.8%2012.4z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px;
    padding-right: 40px; /* 矢印のためのスペース */
}


/* --- 登録確認ボタン --- */
.submit-button {
    width: 100%;
    padding: 15px 0;
    margin-top: 30px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    /* ログイン画面と同じグラデーションボタンを再現 */
    background: linear-gradient(90deg, #ff6b81 0%, #ff8c7e 100%);
    box-shadow: 0 4px 10px rgba(255, 107, 129, 0.4);
    transition: opacity 0.3s;
}

.submit-button:hover {
    opacity: 0.9;
}
/* --- テキストエリアのスタイルを追加 --- */
.profile-form textarea {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s;
    resize: vertical; /* 垂直方向のみリサイズ可能 */
}
.profile-form textarea:focus {
    border-color: #ff8c7e;
}


/* --- グループ小見出しのスタイル (h3) --- */
.form-group-heading {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #ff6b81; /* Lovenyのアクセントカラーを使用 */
    border-left: 5px solid #ff6b81;
    padding-left: 10px;
    margin-top: 40px;
    margin-bottom: 25px;
}

/* フォーム全体の最大幅を維持しつつ、テキストを左寄せにする調整 */
.profile-form {
    text-align: left; /* フォームのラベルを左寄せにする */
}

/* 既存の入力フィールドのスタイルはそのまま使用されます */
/* input[type="text"], input[type="date"], select のスタイルは既に定義されています。 */


/* 検索フォーム */
.search-form-container {
    background: #fff; border-radius: 15px; padding: 20px;
	padding: 20px 10px;
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.05);*/
}

.search-group { margin-bottom: 18px; }

.search-group label {
    display: block; font-size: 13px; font-weight: bold;
    color: #555; margin-bottom: 8px;
}
.search-group label i { color: #ff4a6e; margin-right: 5px; width: 18px; text-align: center; }

.search-group select {
    width: 100%; padding: 12px; border: 1px solid #eee;
    border-radius: 8px; background-color: #f9f9f9;
    font-size: 15px; color: #333; outline: none;
    -webkit-appearance: none; appearance: none; /* デフォルト矢印を消す（カスタム用） */
}

/* セレクトボックスの右側に矢印アイコン風の背景を追加 */
.search-group { position: relative; }
.search-group::after {
    content: '\f107'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
    position: absolute; right: 15px; bottom: 12px; color: #ccc; pointer-events: none;
}

/* 検索ボタン */
.search-submit { margin-top: 30px; }
.search-btn {
    width: 100%; background: #ff4a6e; color: #fff; border: none;
    padding: 15px; border-radius: 30px; font-size: 16px; font-weight: bold;
    box-shadow: 0 4px 10px rgba(255, 74, 110, 0.3); transition: 0.3s;
}
.search-btn:active { transform: scale(0.98); background: #e63d5d; }

.conversation-list {
    margin-top: 10px;
}

.conversation-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.conversation-item:active {
    background: #fff0f3;
}

.user-thumb-wrapper {
    position: relative;
    margin-right: 15px;
}

.user-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
}

/* オンライン状態のインジケーター */
.online-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #4caf50;
    border: 2px solid #fff;
    border-radius: 50%;
}

.msg-content {
    flex: 1;
    min-width: 0; /* テキスト省略用 */
}

.msg-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.user-name {
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

.user-age {
    font-size: 12px;
    color: #888;
    margin-left: 5px;
    font-weight: normal;
}

.msg-date {
    font-size: 11px;
    color: #bbb;
}

.msg-preview {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2行で省略 */
    overflow: hidden;
}

/* 未読バッジがある場合 */
.unread-dot {
    width: 8px;
    height: 8px;
    background: #ff4a6e;
    border-radius: 50%;
    margin-left: 10px;
}

/* コイン購入画面スタイル */
.coin-purchase-container {
    padding: 10px 0;
}

/* 現在の残高表示 */
.current-balance {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.balance-label { font-size: 14px; color: #666; }
.balance-amount { font-size: 20px; font-weight: bold; color: #ffab00; }
.balance-amount i { margin-right: 5px; }

/* プラン選択 */
.coin-plans {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
}

.plan-item { cursor: pointer; position: relative; }
.plan-item input[type="radio"] { display: none; }

.plan-content {
    background: #fff;
    border: 2px solid #eee;
    border-radius: 15px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}

.plan-item.highlight .plan-content { border-color: #ffc1cc; background: #fff9fa; }
.plan-badge {
    position: absolute;
    top: -8px; left: 15px;
    background: #ff4a6e;
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
}

.plan-coins { display: block; font-size: 16px; font-weight: bold; color: #333; }
.plan-price { font-size: 14px; color: #ff4a6e; font-weight: bold; }

.plan-check { color: #ddd; font-size: 20px; }

/* 選択時の挙動 */
.plan-item input[type="radio"]:checked + .plan-content {
    border-color: #ff4a6e;
    background: #fff0f3;
}
.plan-item input[type="radio"]:checked + .plan-content .plan-check {
    color: #ff4a6e;
}

/* 決済セクション */
.payment-section {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.payment-title {
    font-size: 15px;
    margin-bottom: 15px;
    color: #444;
}
.payment-title i { color: #ff4a6e; margin-right: 5px; }

/* Stripe要素の枠 */
#card-element-container {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fcfcfc;
    margin-bottom: 15px;
}

#card-errors {
    color: #fa755a;
    font-size: 12px;
    margin-top: 8px;
}

.payment-note {
    font-size: 11px;
    color: #999;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* 購入ボタン */
.purchase-btn {
    width: 100%;
    background: #ff4a6e;
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 74, 110, 0.3);
}

.purchase-btn:active { transform: scale(0.98); }

    /* 設定画面専用のスタイル調整 */
    .settings-form {
        padding: 10px 0;
    }

    .settings-item {
        background: #fff;
        border-radius: 12px;
        padding: 18px 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    .settings-label {
        font-size: 14px;
        font-weight: bold;
        color: #444;
        margin-bottom: 12px;
        display: block;
    }

    .settings-label i {
        color: #ff4a6e;
        margin-right: 8px;
        width: 20px;
        text-align: center;
    }

    /* ラジオボタンをボタン風にデザイン */
    .radio-group {
        display: flex;
        gap: 10px;
    }

    .radio-group label {
        flex: 1;
        text-align: center;
        background: #f9f9f9;
        border: 1px solid #eee;
        padding: 12px 0;
        border-radius: 8px;
        font-size: 13px;
        color: #888;
        cursor: pointer;
        transition: 0.3s;
    }

    .radio-group input[type="radio"] {
        display: none;
    }

    .radio-group input[type="radio"]:checked + span {
        font-weight: bold;
    }

    /* 選択時の色変化（受け取る＝ピンク系） */
    .radio-group input[type="radio"]:checked + .btn-accept {
        background: #ff4a6e;
        color: #fff;
        border-color: #ff4a6e;
    }

    /* 選択時の色変化（受け取らない＝グレー系） */
    .radio-group input[type="radio"]:checked + .btn-deny {
        background: #666;
        color: #fff;
        border-color: #666;
    }

    .submit-container {
        margin-top: 30px;
        padding: 0 10px;
    }

    .btn-submit {
        width: 100%;
        background: #ff4a6e;
        color: #fff;
        border: none;
        padding: 16px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(255, 74, 110, 0.3);
        cursor: pointer;
    }

    .btn-submit:active {
        transform: scale(0.98);
    }


    /* FAQ・お問合せ専用スタイル */
    .faq-section {
        margin-bottom: 30px;
    }
    
    .faq-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .faq-item {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #f0f0f0;
    }

    .faq-question {
        padding: 15px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: flex-start;
        cursor: pointer;
    }

    .faq-question i.q-icon {
        color: #ff4a6e;
        margin-right: 10px;
        font-size: 16px;
    }

    .faq-answer {
        padding: 0 15px 15px 41px;
        font-size: 13px;
        color: #666;
        line-height: 1.6;
        border-top: 1px solid #fafafa;
        padding-top: 10px;
    }

    /* お問合せフォーム */
    .contact-form-wrapper {
        background: #fff;
        border-radius: 15px;
        padding: 20px 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-label {
        display: block;
        font-size: 13px;
        font-weight: bold;
        color: #444;
        margin-bottom: 8px;
    }

    .form-select, .form-textarea {
        width: 100%;
        border: 1px solid #eee;
        border-radius: 8px;
        background-color: #f9f9f9;
        font-size: 14px;
        padding: 12px;
        box-sizing: border-box;
        outline: none;
        font-family: inherit;
    }

    .form-select:focus, .form-textarea:focus {
        border-color: #ff4a6e;
    }

    .form-textarea {
        resize: none;
        min-height: 120px;
    }

    .btn-submit {
        width: 100%;
        background: #ff4a6e;
        color: #fff;
        border: none;
        padding: 16px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(255, 74, 110, 0.3);
        cursor: pointer;
        transition: 0.3s;
    }

    .btn-submit:active {
        transform: scale(0.98);
    }

    .section-subheading {
        font-size: 15px;
        font-weight: bold;
        color: #ff4a6e;
        margin: 25px 0 15px;
        display: flex;
        align-items: center;
    }
    .section-subheading i { margin-right: 8px; }

    /* 退会画面専用スタイル */
    .withdrawal-info {
        background: #fff;
        border-radius: 12px;
        padding: 20px 15px;
        margin-bottom: 25px;
        border: 1px solid #ffe5e5;
    }

    .withdrawal-info h3 {
        color: #ff4a6e;
        font-size: 15px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
    }

    .withdrawal-info h3 i { margin-right: 8px; }

    .withdrawal-info ul {
        margin: 0;
        padding-left: 20px;
        font-size: 13px;
        color: #666;
        line-height: 1.8;
    }

    .withdrawal-form-wrapper {
        background: #fff;
        border-radius: 15px;
        padding: 20px 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .form-group {
        margin-bottom: 25px;
    }

    .form-label {
        display: block;
        font-size: 14px;
        font-weight: bold;
        color: #444;
        margin-bottom: 10px;
    }

    .form-textarea {
        width: 100%;
        border: 1px solid #eee;
        border-radius: 8px;
        background-color: #f9f9f9;
        font-size: 14px;
        padding: 12px;
        box-sizing: border-box;
        outline: none;
        font-family: inherit;
        resize: none;
        min-height: 150px;
    }

    .form-textarea:focus {
        border-color: #ff4a6e;
    }

    .btn-withdrawal-container {
        margin-top: 30px;
        text-align: center;
    }

    .btn-withdrawal {
        width: 100%;
        background: #bbb; /* 削除は少し落ち着いた色に */
        color: #fff;
        border: none;
        padding: 16px;
        border-radius: 30px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.3s;
    }

    /* チェックを入れたらボタンの色を変える想定のクラス */
    .btn-withdrawal.active {
        background: #666;
    }

    .back-to-mypage {
        display: block;
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
        color: #ff4a6e;
        text-decoration: none;
        font-weight: bold;
    }

    .confirmation-check {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: #333;
        line-height: 1.4;
        margin-bottom: 20px;
        cursor: pointer;
    }

    .confirmation-check input {
        margin-top: 2px;
        accent-color: #ff4a6e;
    }

/* 認証画面専用スタイル */
.verify-page {
    background-color: #fff;
}

.auth-container {
    padding: 40px 20px;
    text-align: center;
}

.verify-icon-wrapper {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.circle-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff4a6e 0%, #ff4a6e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(43, 177, 177, 0.2);
}

.auth-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 15px;
}

.auth-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 6桁入力エリア */
.code-input-group {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 40px;
}

.code-box {
    width: 15%;
    height: 60px;
    background-color: #f2f5f7;
    border: 2px solid transparent;
    border-radius: 12px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    outline: none;
    transition: 0.2s;
    -moz-appearance: textfield;
}

/* Chrome, Safari, Edge の矢印消し */
.code-box::-webkit-outer-spin-button,
.code-box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.code-box:focus {
    background-color: #fff;
    border-color: #ff4a6e; /* Lovenyのピンク */
    box-shadow: 0 0 10px rgba(255, 74, 110, 0.1);
}

.link-resend {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    color: #2bb1b1;
    font-weight: bold;
    text-decoration: none;
}

.link-resend:hover {
    text-decoration: underline;
}

.header-back {
    position: absolute;
    left: 15px;
    color: #ff4a6e;
    font-size: 18px;
    text-decoration: none;
}

/* チャット画面専用スタイル */
body { background-color: #f7f7f7; }

/* ヘッダーに戻るボタンを追加 */
.header-back { position: absolute; left: 15px; color: #ff4a6e; font-size: 18px; text-decoration: none; }

.chat-container {
    padding: 70px 15px 100px; /* 上下余白 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 日付ラベル */
.chat-date {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    margin: 10px 0;
}

/* メッセージの基本構造 */
.message-row { display: flex; align-items: flex-end; width: 100%; }
.message-row.left { justify-content: flex-start; }
.message-row.right { justify-content: flex-end; flex-direction: row-reverse; }

/* アイコン */
.chat-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-size: cover;
    margin: 0 8px;
    flex-shrink: 0;
}

/* 吹き出し */
.bubble {
    max-width: 70%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    border-radius: 18px;
}

.left .bubble {
    background: #fff;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.right .bubble {
    background: #ff4a6e;
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* 時間と既読 */
.chat-info {
    font-size: 10px;
    color: #aaa;
    margin: 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.right .chat-info { text-align: right; }
.read-text { color: #ff4a6e; font-weight: bold; }

/* 下部入力エリア */
.chat-input-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 95%;
    background: #fff;
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #eee;
    z-index: 1000;
}

.chat-input {
    flex: 1;
    background: #f0f0f0;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
}

.send-btn {
    color: #ff4a6e;
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
}

/* =====================================================
   AIフォロー画面
===================================================== */

:root {
    --ai-primary: #ff5f79;
    --ai-primary-dark: #ee4968;
    --ai-primary-soft: #fff0f3;
    --ai-purple: #8f72e8;
    --ai-blue: #58a8ed;
    --ai-green: #55bd8a;
    --ai-text: #333333;
    --ai-sub-text: #777777;
    --ai-border: #eeeeee;
    --ai-bg: #f7f7f9;
}

body.ai-follow-page {
    margin: 0;
    padding: 0;
    background: var(--ai-bg);
    color: var(--ai-text);
    display: flex;
    justify-content: center;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Yu Gothic",
        "Meiryo",
        Arial,
        sans-serif;
}

.ai-follow-page * {
    box-sizing: border-box;
}

.ai-app {
    width: 100%;
    max-width: 450px;
    min-height: 100vh;
    background: var(--ai-bg);
    position: relative;
}

/* -----------------------
   ヘッダー
----------------------- */

.ai-header {
    position: sticky;
    top: 0;
    z-index: 500;
    height: 56px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--ai-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ai-header-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ai-primary);
    font-size: 17px;
    font-weight: 700;
}

.ai-header-title i {
    font-size: 20px;
}

.ai-header-menu {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #999;
    font-size: 18px;
    cursor: pointer;
}

/* -----------------------
   メインコンテンツ
----------------------- */

.ai-main {
    padding: 14px 14px 190px;
}

/* -----------------------
   アドバイザーカード
----------------------- */

.ai-advisor-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    margin-bottom: 15px;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 255, 255, 0.9) 0,
            rgba(255, 255, 255, 0) 40%
        ),
        linear-gradient(135deg, #fff4f6 0%, #f8f3ff 55%, #eef8ff 100%);
    border: 1px solid #f5e6ed;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(73, 47, 62, 0.06);
}

.ai-advisor-card::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -22px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 129, 152, 0.08);
}

.ai-advisor-avatar {
    position: relative;
    flex-shrink: 0;
    width: 76px;
    height: 76px;
}

.ai-advisor-avatar img {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(106, 76, 91, 0.15);
}

.ai-online-mark {
    position: absolute;
    right: 3px;
    bottom: 4px;
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #50c982;
}

.ai-advisor-profile {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

.ai-advisor-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.ai-advisor-name-row h1 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: #38323a;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--ai-purple), var(--ai-blue));
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.ai-advisor-profile p {
    margin: 0 0 8px;
    color: #6f6870;
    font-size: 12px;
    line-height: 1.65;
}

.ai-online-text {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #55946e;
    font-size: 10px;
    font-weight: 600;
}

.ai-online-text > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #50c982;
}

/* -----------------------
   共通セクション見出し
----------------------- */

.ai-section-heading,
.ai-chat-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ai-section-label {
    display: block;
    margin-bottom: 2px;
    color: var(--ai-primary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ai-section-heading h2,
.ai-chat-heading h2 {
    margin: 0;
    color: #333;
    font-size: 16px;
}

.ai-detail-link {
    color: #aaa;
    font-size: 11px;
    text-decoration: none;
}

.ai-detail-link i {
    margin-left: 4px;
    font-size: 9px;
}

/* -----------------------
   活動状況
----------------------- */

.ai-status-section {
    margin-bottom: 15px;
    padding: 16px 14px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 18px;
}

.ai-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ai-status-card {
    min-width: 0;
    padding: 13px 5px 11px;
    border-radius: 14px;
    background: #fafafa;
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}

.ai-status-card:active {
    transform: scale(0.97);
}

.ai-status-icon {
    width: 34px;
    height: 34px;
    margin: 0 auto 7px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ai-status-icon-approach {
    color: #518fd8;
    background: #eaf4ff;
}

.ai-status-icon-match {
    color: #ed5774;
    background: #ffedf1;
}

.ai-status-icon-message {
    color: #7d65cf;
    background: #f0ecff;
}

.ai-status-card strong {
    display: block;
    margin-bottom: 2px;
    color: #333;
    font-size: 21px;
    line-height: 1.2;
}

.ai-status-card > span {
    display: block;
    color: #676767;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.ai-status-card small {
    display: block;
    margin-top: 5px;
    color: #aaa;
    font-size: 8px;
}

/* -----------------------
   AIからのヒント
----------------------- */

.ai-tip-card {
    display: flex;
    gap: 11px;
    padding: 14px;
    margin-bottom: 20px;
    border: 1px solid #ffe6a9;
    border-radius: 16px;
    background: linear-gradient(135deg, #fffdf6, #fff8e7);
}

.ai-tip-icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fff0b8;
    color: #e5a820;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-tip-body {
    flex: 1;
}

.ai-tip-body > span {
    display: block;
    margin-bottom: 4px;
    color: #a77d1c;
    font-size: 11px;
    font-weight: 700;
}

.ai-tip-body p {
    margin: 0;
    color: #6e6249;
    font-size: 12px;
    line-height: 1.65;
}

/* -----------------------
   チャットエリア
----------------------- */

.ai-chat-section {
    padding: 16px 12px 18px;
    margin-bottom: 18px;
    background: #f1f2f5;
    border-radius: 20px;
}

.ai-chat-reset {
    padding: 6px 9px;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    background: #fff;
    color: #888;
    font-size: 9px;
    cursor: pointer;
}

.ai-chat-reset i {
    margin-right: 4px;
}

.ai-chat-date {
    width: fit-content;
    margin: 8px auto 16px;
    padding: 4px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: #aaa;
    font-size: 9px;
}

.ai-message-row {
    display: flex;
    width: 100%;
    margin-bottom: 17px;
}

.ai-message-left {
    align-items: flex-start;
    justify-content: flex-start;
}

.ai-message-right {
    align-items: flex-end;
    justify-content: flex-end;
}

.ai-message-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    margin-right: 7px;
}

.ai-message-avatar img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
}

.ai-message-content {
    max-width: calc(100% - 45px);
}

.ai-message-right .ai-message-content {
    max-width: 80%;
}

.ai-message-name {
    margin: 0 0 4px 4px;
    color: #8b7b86;
    font-size: 9px;
    font-weight: 600;
}

.ai-bubble {
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.65;
    word-break: break-word;
}

.ai-bubble-advisor {
    color: #3e3a3d;
    background: #fff;
    border-radius: 5px 17px 17px 17px;
    box-shadow: 0 2px 6px rgba(38, 31, 35, 0.05);
}

.ai-bubble-user {
    color: #fff;
    background: linear-gradient(135deg, #ff7189, var(--ai-primary));
    border-radius: 17px 5px 17px 17px;
}

.ai-message-content time {
    display: block;
    margin-top: 4px;
    color: #aaa;
    font-size: 8px;
}

.ai-message-right .ai-message-content time {
    text-align: right;
}

/* AIが提案する返信文 */

.ai-suggestion-box {
    margin-top: 8px;
    padding: 12px;
    background: #fff9fb;
    border: 1px solid #ffd8df;
    border-radius: 14px;
}

.ai-suggestion-label {
    margin-bottom: 7px;
    color: var(--ai-primary);
    font-size: 10px;
    font-weight: 700;
}

.ai-suggestion-label i {
    margin-right: 4px;
}

.ai-suggestion-box p {
    margin: 0 0 10px;
    color: #4f474b;
    font-size: 12px;
    line-height: 1.7;
}

.ai-copy-button {
    display: block;
    margin-left: auto;
    padding: 6px 10px;
    border: 1px solid #ffd1d9;
    border-radius: 14px;
    background: #fff;
    color: var(--ai-primary);
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
}

/* -----------------------
   よくある相談
----------------------- */

.ai-quick-section {
    padding: 0 2px;
}

.ai-quick-section h2 {
    margin: 0 0 10px;
    font-size: 14px;
}

.ai-quick-scroll {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.ai-quick-scroll::-webkit-scrollbar {
    display: none;
}

.ai-quick-button {
    flex-shrink: 0;
    padding: 9px 12px;
    border: 1px solid #f0dbe0;
    border-radius: 18px;
    background: #fff;
    color: #685e63;
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.ai-quick-button i {
    margin-right: 5px;
    color: var(--ai-primary);
}

/* -----------------------
   入力エリア
----------------------- */

.ai-input-area {
    position: fixed;
    left: 50%;
    bottom: 70px;
    z-index: 600;
    width: 100%;
    max-width: 450px;
    min-height: 64px;
    padding: 9px 12px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #eee;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ai-input-plus {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-bottom: 1px;
    border: 0;
    border-radius: 50%;
    background: #f1f1f3;
    color: #999;
    cursor: pointer;
}

.ai-chat-input {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    max-height: 100px;
    padding: 10px 13px;
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    background: #f6f6f7;
    color: #333;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
    resize: none;
    outline: none;
}

.ai-chat-input:focus {
    border-color: #ffc0cb;
    background: #fff;
}

.ai-send-button {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-bottom: 1px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7189, var(--ai-primary));
    color: #fff;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(255, 95, 121, 0.25);
    cursor: pointer;
}

/* -----------------------
   AI画面のフッターナビ調整
----------------------- */

.ai-follow-page .bottom-nav {
    left: 50%;
    transform: translateX(-50%);
    max-width: 450px;
    height: 70px;
    padding-bottom: env(safe-area-inset-bottom);
}

.ai-follow-page .nav-item {
    justify-content: center;
}

.ai-follow-page .nav-item i {
    font-size: 20px;
}

.ai-follow-page .nav-item.active {
    color: var(--ai-primary);
}

/* -----------------------
   小さい画面への調整
----------------------- */

@media screen and (max-width: 370px) {

    .ai-main {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ai-advisor-card {
        padding: 15px 12px;
    }

    .ai-advisor-avatar,
    .ai-advisor-avatar img {
        width: 66px;
        height: 66px;
    }

    .ai-advisor-name-row h1 {
        font-size: 14px;
    }

    .ai-status-card strong {
        font-size: 18px;
    }

    .ai-status-card > span {
        font-size: 9px;
    }
}