/* ==========================================
   1. 全体のスタイリング
   ========================================== */
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #15202b; color: #ffffff; display: flex; justify-content: center; height: 100vh; overflow: hidden; }

.container { display: flex; width: 100%; max-width: 1100px; height: 100vh; position: relative; margin: 0 auto; }

.sidebar { width: 250px; padding: 20px; border-right: 1px solid #38444d; display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; }
.nav-logo { font-size: 2rem; padding-left: 10px; margin-bottom: 20px; color: #fff; text-align: left; letter-spacing: 0.05em; display: flex; align-items: center; gap: 10px;}
.nav-logo-sub { font-size: 0.7rem; color: #aac7ff; display: block; margin-top: 5px; font-family: 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0.1em;}

.nav-section-title { color: #8899a6; font-size: 0.8rem; font-weight: bold; padding: 10px 15px; margin-top: 10px; letter-spacing: 0.05em; text-transform: uppercase;}
.nav-item { position: relative; display: flex; align-items: center; gap: 15px; padding: 12px 15px; font-size: 1.1rem; font-weight: bold; border-radius: 50px; cursor: pointer; margin-bottom: 5px; transition: background 0.2s; }
.nav-item:hover, .nav-item.active { background-color: rgba(29, 161, 242, 0.1); color: #1da1f2; }
.nav-item#nav-timeline-kana:hover, .nav-item#nav-timeline-kana.active { background-color: rgba(225, 48, 108, 0.1); color: #e1306c; }
.nav-item#nav-likes:hover, .nav-item#nav-likes.active { background-color: rgba(249, 24, 128, 0.1); color: #f91880; }

.unread-badge { display: none; position: absolute; top: 12px; right: 15px; width: 8px; height: 8px; background-color: #1da1f2; border-radius: 50%; box-shadow: 0 0 5px rgba(29, 161, 242, 0.5); }
.nav-item.has-unread .unread-badge, .mobile-tab.has-unread .unread-badge { display: block; }

/* ==========================================
   ★ 検索・トレンド・履歴エリア
   ========================================== */
.search-container-wrapper { border-bottom: 1px solid #38444d; transition: background 0.3s; }
.search-container-wrapper.cross-search-active { background-color: rgba(29, 161, 242, 0.05); border-bottom: 1px solid #1da1f2; }
.search-box-container { padding: 15px; display: flex; gap: 10px; align-items: center; }

.search-input-wrapper { flex: 1; position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 15px; color: #8899a6; font-size: 0.9rem; }
.search-input { width: 100%; background-color: #192734; border: 1px solid #38444d; border-radius: 20px; padding: 10px 35px; color: #ffffff; font-size: 16px !important; outline: none; transition: border 0.2s; box-sizing: border-box; }
.search-input:focus { border-color: #1da1f2; }
.clear-icon { position: absolute; right: 15px; color: #8899a6; font-size: 1rem; cursor: pointer; display: none; }
.clear-icon:hover { color: #fff; }

.search-btn { background-color: #1da1f2; border: none; color: #ffffff; border-radius: 20px; padding: 0 15px; cursor: pointer; font-size: 0.9rem; font-weight: bold; height: 38px; transition: background 0.2s;}
.search-btn:hover { background-color: #1a91da; }

.trend-container { padding: 0 15px 15px 15px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.trend-label { color: #8899a6; font-size: 0.85rem; font-weight: bold; margin-right: 5px; }
.trend-tag { background-color: #192734; border: 1px solid #38444d; color: #1da1f2; padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; cursor: pointer; transition: background 0.2s; animation: fadeIn 0.5s ease-out; }
.trend-tag:hover { background-color: rgba(29, 161, 242, 0.1); border-color: #1da1f2; }

.history-container { padding: 0 15px 15px 15px; display: none; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px dashed #38444d; margin-top: -5px; padding-top: 10px;}
.history-label { color: #8899a6; font-size: 0.85rem; font-weight: bold; margin-right: 5px; }
.history-tag { background-color: transparent; border: 1px solid #536471; color: #8899a6; padding: 4px 10px; border-radius: 15px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s; }
.history-tag:hover { border-color: #fff; color: #fff; background-color: rgba(255,255,255,0.1); }
.history-clear { font-size: 0.75rem; color: #e0245e; cursor: pointer; margin-left: auto; }
.history-clear:hover { text-decoration: underline; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================
   ★ アニメーション・通知・コントローラー
   ========================================== */
@keyframes glow-success {
    0% { box-shadow: 0 0 0px #00ba7c; background-color: #192734; }
    50% { box-shadow: 0 0 20px #00ba7c; background-color: #00ba7c; color: white; }
    100% { box-shadow: 0 0 0px #00ba7c; background-color: #192734; }
}
.glow-animation { animation: glow-success 1.5s ease-out; }

.toast-notification { position: fixed; bottom: 20px; right: 20px; background-color: #00ba7c; color: white; padding: 15px 25px; border-radius: 8px; font-weight: bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transform: translateY(100px); opacity: 0; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); z-index: 10000; }
.toast-notification.show { transform: translateY(0); opacity: 1; }
.toast-notification.trend { background-color: #1da1f2; }

.arg-controller { background-color: #192734; border: 1px solid #38444d; border-radius: 15px; padding: 15px; margin-top: auto; cursor: pointer; transition: transform 0.2s, background-color 0.2s; }
.arg-controller:hover { background-color: #22303c; transform: translateY(-2px); }
.arg-controller h3 { margin: 0 0 5px 0; font-size: 0.95rem; color: #8899a6; display: flex; justify-content: space-between; align-items: center; }
.status-badge { font-size: 0.8rem; padding: 4px 8px; border-radius: 10px; background-color: #38444d; color: #8899a6; display: inline-block; margin-bottom: 15px;}
.status-badge.ready { background-color: #00ba7c; color: white; font-weight: bold; }

.btn-debug-skip { width: 100%; padding: 8px; border-radius: 15px; border: 1px dashed #e0245e; background-color: transparent; color: #e0245e; font-size: 0.8rem; font-weight: bold; cursor: pointer; margin-bottom: 8px; transition: all 0.2s; }
.btn-debug-skip:hover { background-color: rgba(224, 36, 94, 0.1); }
.btn-debug-trend { border-color: #1da1f2; color: #1da1f2; margin-bottom: 15px;}
.btn-debug-trend:hover { background-color: rgba(29, 161, 242, 0.1); }

.btn-next-day { width: 100%; padding: 12px; border-radius: 25px; border: none; background-color: #fff; color: #000; font-weight: bold; cursor: pointer; transition: all 0.3s; box-shadow: 0 0 10px rgba(255,255,255,0.2); }
.btn-next-day:hover { background-color: #e6e6e6; }
.btn-next-day:disabled { background-color: #38444d; color: #8899a6; cursor: not-allowed; box-shadow: none; }

.btn-reset { width: 100%; padding: 8px; border: none; background-color: transparent; color: #8899a6; font-size: 0.8rem; cursor: pointer; text-decoration: underline; margin-top: 5px; transition: color 0.2s; }
.btn-reset:hover { color: #e0245e; }

/* 中央：メインコンテンツエリア */
.main-content { flex: 1; border-right: 1px solid #38444d; display: flex; flex-direction: column; height: 100vh; position: relative; min-width: 0; }
.view-title { font-size: 1.3rem; font-weight: bold; padding: 15px; border-bottom: 1px solid #38444d; background-color: rgba(21, 32, 43, 0.85); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 15px; transition: background 0.3s;}
.view-title.cross-search-active { background-color: rgba(29, 161, 242, 0.9); }
.back-btn { cursor: pointer; color: #1da1f2; font-size: 1.1rem; display: none; padding: 5px; border-radius: 50%; transition: background 0.2s; }
.back-btn:hover { background-color: rgba(29, 161, 242, 0.1); }
.view-subtitle { font-size: 0.8rem; color: #8899a6; font-weight: normal; margin-left: 10px; }
.view-title.cross-search-active .view-subtitle { color: #fff; }

/* ★ 新着通知バッジ */
.new-post-badge-container { position: absolute; top: 130px; width: 100%; display: flex; justify-content: center; z-index: 100; pointer-events: none; }
@media screen and (max-width: 768px) { .new-post-badge-container { top: 110px; } }
.new-post-badge { background-color: #1da1f2; color: #fff; padding: 8px 20px; border-radius: 20px; font-size: 0.85rem; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.3); pointer-events: auto; display: none; animation: fadeInDown 0.3s ease-out; transition: background 0.2s; }
.new-post-badge:hover { background-color: #1a91da; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ★ システム時刻表示 */
.sys-time-display {
    font-family: monospace;
    font-size: 0.85rem;
    color: #536471;
    letter-spacing: 0.1em;
    margin-left: auto;
    background-color: #192734;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid #38444d;
}

/* ==========================================
   ★ Twittest (X風) タイムライン用 CSS
   ========================================== */
.scroller { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.thread-container { border-bottom: 1px solid #38444d; display: flex; flex-direction: column; }

.post { 
    display: flex; 
    padding: 15px; 
    gap: 12px; 
    transition: background 0.2s; 
    position: relative; 
    animation: fadeIn 0.5s ease-out; 
}
.post.is-my-post { background-color: rgba(0, 186, 124, 0.05); }

.avatar-wrapper { display: flex; flex-direction: column; align-items: center; width: 48px; flex-shrink: 0; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background-color: #38444d; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; cursor: pointer; z-index: 2; background-size: cover; background-position: center; overflow: hidden; }
.avatar:hover { opacity: 0.8; }
.thread-line { width: 2px; background-color: #38444d; flex-grow: 1; margin-top: 5px; margin-bottom: -20px; z-index: 1; }

.post-body { flex: 1; min-width: 0; }
.post-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap;}
.user-name { font-weight: bold; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.user-name:hover { text-decoration: underline; }
.user-id { color: #8899a6; font-size: 0.9rem; white-space: nowrap;}
.post-day-tag { color: #aac7ff; font-size: 0.75rem; background-color: #242936; padding: 2px 6px; border-radius: 4px; margin-left: auto; white-space: nowrap;}
.post-content { line-height: 1.5; font-size: 0.95rem; white-space: pre-wrap; margin-bottom: 8px; word-break: break-word; user-select: text; }

/* ▼ 投稿内のURLリンク用スタイル */
.post-link {
    color: #1da1f2;
    text-decoration: none;
    cursor: pointer;
}
.post-link:hover {
    text-decoration: underline;
}

.post-image-wrapper { margin-top: 10px; border-radius: 16px; overflow: hidden; border: 1px solid #38444d; max-height: 400px; display: block; text-align: center; background-color: #000; }
.post-image { width: 100%; height: auto; max-height: 400px; object-fit: contain; cursor: pointer; transition: opacity 0.2s; display: block; margin: 0 auto; }
.post-image:hover { opacity: 0.85; }

.reply-target-label { font-size: 0.85rem; color: #8899a6; margin-top: -2px; margin-bottom: 6px; }
.reply-target-link { color: #1da1f2; text-decoration: none; cursor: pointer; }
.reply-target-link:hover { text-decoration: underline; }

.highlight { background-color: rgba(170, 199, 255, 0.3); color: #ffffff; font-weight: bold; padding: 0 2px; border-radius: 2px; }
.no-result { text-align: center; color: #8899a6; padding: 40px 0; font-size: 0.9rem; line-height: 1.6;}

.post-actions { display: flex; gap: 40px; color: #8899a6; font-size: 0.85rem; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.action-item { transition: color 0.2s; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.action-item:hover { color: #1da1f2; }
.action-item.liked, .action-item.liked:hover { color: #f91880; }
.action-item.delete-btn:hover { color: #f4212e; }

/* ==========================================
   ★ アンケート（Poll）機能用 CSS
   ========================================== */
.poll-container { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.poll-option { border: 1px solid #1da1f2; border-radius: 20px; padding: 10px 15px; cursor: pointer; color: #1da1f2; font-weight: bold; text-align: center; transition: all 0.2s; position: relative; overflow: hidden; }
.poll-option:hover { background-color: rgba(29, 161, 242, 0.1); }
.poll-option.voted { border-color: transparent; color: #fff; text-align: left; display: flex; justify-content: space-between; cursor: default; }
.poll-bar { position: absolute; top: 0; left: 0; height: 100%; background-color: rgba(56, 68, 77, 0.7); z-index: -1; transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); border-radius: 4px; }
.poll-bar.winner { background-color: rgba(29, 161, 242, 0.7); }
.poll-text { z-index: 1; }
.poll-percent { z-index: 1; }
.poll-total { font-size: 0.85rem; color: #8899a6; margin-top: 5px; }

/* ==========================================
   ★ Instest (Instagram風) 完全専用レイアウト
   ========================================== */
.instest-format { flex-direction: column; padding: 0; margin-bottom: 20px; border: 1px solid #2f3336; border-radius: 8px; background-color: #000; overflow: hidden; cursor: default; text-align: left;}
.instest-format:hover { background-color: #000; }
.instest-post-header { display: flex; align-items: center; justify-content: flex-start; padding: 12px 15px; gap: 10px; }
.instest-avatar-ring { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); padding: 2px; display: flex; justify-content: center; align-items: center; cursor: pointer; flex-shrink: 0;}
.instest-avatar-ring .avatar { width: 100%; height: 100%; border-radius: 50%; background-color: #15202b; border: 2px solid #000; box-sizing: border-box; background-size: cover; background-position: center;}
.instest-format .avatar { width: 32px; height: 32px; font-size: 0.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; background-color: #38444d;}
.instest-image { width: 100%; height: auto; max-height: 500px; object-fit: cover; cursor: pointer; border-top: 1px solid #2f3336; border-bottom: 1px solid #2f3336; display: block;}
.instest-actions { display: flex; gap: 15px; padding: 10px 15px 5px; font-size: 1.5rem; color: #f5f5f5;}
.instest-actions .action-item { transition: transform 0.1s, color 0.2s; cursor: pointer; }
.instest-actions .action-item:hover { transform: scale(1.1); }
.instest-actions .liked, .instest-actions .liked:hover { color: #e1306c; }
.instest-likes { font-weight: bold; font-size: 0.95rem; padding: 0 15px; margin-bottom: 5px; color: #f5f5f5;}
.instest-caption { padding: 0 15px 15px; font-size: 0.95rem; line-height: 1.5; color: #f5f5f5; white-space: pre-wrap; word-break: break-word; user-select: text; text-align: left;}
.instest-caption .user-name { font-weight: bold; margin-right: 5px; cursor: pointer; }
.instest-caption .user-name:hover { text-decoration: underline; }
.instest-reply-target { padding: 0 15px 5px; font-size: 0.85rem; color: #a8a8a8; }

/* ==========================================
   ★ LINE風チャット機能（メッセージ）
   ========================================== */
.chat-list-item { display: flex; align-items: center; gap: 15px; padding: 15px; border-bottom: 1px solid #38444d; cursor: pointer; transition: background 0.2s; }
.chat-list-item:hover { background-color: rgba(255,255,255,0.05); }
.chat-list-avatar { width: 48px; height: 48px; border-radius: 50%; background-color: #38444d; background-size: cover; background-position: center; }
.chat-list-info { flex: 1; }
.chat-list-name { font-weight: bold; font-size: 1.05rem; }
.chat-list-preview { color: #8899a6; font-size: 0.85rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.chat-room-container { display: flex; flex-direction: column; height: 100%; background-color: #15202b; }
.chat-room-header { display: flex; align-items: center; gap: 15px; padding: 15px; border-bottom: 1px solid #38444d; background-color: rgba(21, 32, 43, 0.95); z-index: 10; font-weight: bold; font-size: 1.2rem; }
.chat-room-header i { cursor: pointer; color: #1da1f2; padding: 5px; border-radius: 50%; transition: background 0.2s; }
.chat-room-header i:hover { background-color: rgba(29, 161, 242, 0.1); }
.chat-messages-area { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; padding-bottom: 30px; }

.chat-bubble-row { display: flex; width: 100%; margin-bottom: 5px; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble-row.theirs { justify-content: flex-start; align-items: flex-end; gap: 8px;}

.chat-bubble { max-width: 70%; padding: 10px 15px; border-radius: 20px; font-size: 0.95rem; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; position: relative; }
.chat-bubble-row.mine .chat-bubble { background-color: #1da1f2; color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-row.theirs .chat-bubble { background-color: #38444d; color: #fff; border-bottom-left-radius: 4px; }

.chat-time { font-size: 0.7rem; color: #8899a6; align-self: flex-end; margin: 0 5px; }

/* ★ ミニスタンプ（リアクション）用のCSS */
.chat-reaction-stamp {
    position: absolute;
    bottom: -10px;
    left: -5px;
    background-color: #15202b;
    border: 1px solid #38444d;
    border-radius: 20px;
    padding: 3px 6px;
    font-size: 0.85rem;
    color: #f91880;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.chat-heart { color: #f91880; font-size: 1.8rem; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); padding: 5px; background: #38444d; border-radius: 50%; border-bottom-left-radius: 4px; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center;}

@keyframes popIn { 0% { transform: scale(0); } 80% { transform: scale(1.2); } 100% { transform: scale(1); } }

.chat-input-area { display: flex; padding: 10px 15px; border-top: 1px solid #38444d; background-color: #15202b; gap: 10px; align-items: center; }
.chat-input { flex: 1; background-color: #192734; border: 1px solid #38444d; border-radius: 20px; padding: 10px 15px; color: #fff; outline: none; font-size: 16px !important; }
.chat-input:focus { border-color: #1da1f2; }
.btn-chat-send { background-color: #1da1f2; color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; flex-shrink: 0; transition: background 0.2s;}
.btn-chat-send:hover { background-color: #1a91da; }

/* プロフィール画面用 */
.profile-header-cover { height: 150px; background-color: #38444d; background-size: cover; background-position: center; border-bottom: 1px solid #38444d; }
.profile-header-info { padding: 15px 15px 20px; border-bottom: 1px solid #38444d; display: flex; flex-direction: column; gap: 5px; position: relative;}
.profile-header-info .avatar { width: 80px; height: 80px; font-size: 1.8rem; cursor: default; border: 4px solid #15202b; margin-top: -45px; z-index: 5; background-color: #38444d; border-radius: 50%;}
.profile-header-text h2 { margin: 0 0 2px 0; font-size: 1.3rem; }
.profile-header-text p { margin: 0; color: #8899a6; font-size: 0.9rem; }
.profile-bio { font-size: 0.95rem; line-height: 1.5; color: #fff; margin-top: 10px; word-wrap: break-word; white-space: pre-wrap; }

/* ==========================================
   ★ ログイン（テスター登録）画面
   ========================================== */
.login-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #15202b; z-index: 8000; display: flex; justify-content: center; align-items: center; }
.login-card { background-color: #192734; border: 1px solid #38444d; border-radius: 12px; width: 90%; max-width: 450px; padding: 40px 30px; box-shadow: 0 15px 30px rgba(0,0,0,0.5); box-sizing: border-box; text-align: center; }
.login-card h1 { margin: 0 0 10px 0; color: #fff; font-size: 1.5rem; letter-spacing: 0.05em; font-family: monospace;}
.login-card h1 i { color: #00ba7c; margin-right: 10px; }
.login-subtitle { color: #8899a6; font-size: 0.9rem; margin-bottom: 30px; line-height: 1.5; }
.login-form-group { margin-bottom: 20px; text-align: left; }
.login-form-group label { display: block; color: #e1e8ed; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; }
.login-input { width: 100%; background-color: #15202b; border: 1px solid #38444d; border-radius: 6px; padding: 12px; color: #fff; font-size: 1rem; outline: none; box-sizing: border-box; transition: border 0.2s;}
.login-input:focus { border-color: #1da1f2; }
.login-icon-upload { display: flex; align-items: center; gap: 15px; }
.login-icon-preview { width: 60px; height: 60px; border-radius: 50%; background-color: #38444d; border: 2px solid #536471; display: flex; justify-content: center; align-items: center; color: #8899a6; font-size: 1.2rem; background-size: cover; background-position: center; flex-shrink: 0;}
.login-file-input { display: none; }
.btn-upload { background-color: transparent; border: 1px solid #1da1f2; color: #1da1f2; padding: 8px 15px; border-radius: 20px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; }
.btn-upload:hover { background-color: rgba(29, 161, 242, 0.1); }
.btn-login-submit { background-color: #00ba7c; color: #fff; border: none; padding: 14px; width: 100%; font-size: 1.1rem; font-weight: bold; border-radius: 30px; cursor: pointer; margin-top: 15px; transition: background 0.2s; }
.btn-login-submit:hover { background-color: #009966; }
.btn-login-skip { background-color: transparent; border: none; color: #8899a6; text-decoration: underline; font-size: 0.85rem; margin-top: 15px; cursor: pointer; }
.btn-login-skip:hover { color: #e1e8ed; }

/* モーダル関連 */
.modal-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 5000; justify-content: center; align-items: center; }
.btn-close-modal { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #8899a6; font-size: 1.5rem; cursor: pointer; transition: color 0.2s; }
.btn-close-modal:hover { color: #fff; }
.task-card { background-color: #192734; border: 1px solid #38444d; border-radius: 15px; width: 95%; max-width: 450px; padding: 25px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); box-sizing: border-box; }
.task-card h2 { font-size: 1.3rem; margin: 0 0 5px 0; color: #fff; display: flex; align-items: center; gap: 10px; }
.task-card h2 i { color: #1da1f2; }
.task-card .task-subtitle { font-size: 0.85rem; color: #8899a6; padding-bottom: 5px; }
.modal-task-list { display: flex; flex-direction: column; gap: 15px; max-height: 50vh; overflow-y: auto;}
.modal-task-item { display: flex; align-items: flex-start; gap: 15px; font-size: 1rem; color: #e1e8ed; padding: 5px 0; line-height: 1.4; }
.modal-task-item i.fa-circle-check { color: #00ba7c; font-size: 1.2rem; margin-top: 2px;}
.modal-task-item i.fa-circle { color: #38444d; font-size: 1.2rem; margin-top: 2px;}
.modal-task-item.completed { color: #8899a6; text-decoration: line-through; }
.btn-unlock { background-color: #00ba7c; color: #fff; border: none; padding: 12px 24px; font-size: 1rem; font-weight: bold; border-radius: 25px; cursor: pointer; width: 100%; margin-top: 15px; transition: background 0.2s; }
.btn-unlock:hover { background-color: #009966; }

.btn-delete-confirm { width: 100%; padding: 12px; border-radius: 25px; border: none; background-color: #f4212e; color: #fff; cursor: pointer; font-weight: bold; font-size: 1rem; transition: background 0.2s; }
.btn-delete-confirm:hover { background-color: #dc1e29; }
.btn-delete-cancel { width: 100%; padding: 12px; border-radius: 25px; border: 1px solid #536471; background: transparent; color: #eff3f4; cursor: pointer; font-weight: bold; font-size: 1rem; transition: background 0.2s; }
.btn-delete-cancel:hover { background-color: rgba(255,255,255,0.1); }

/* ==========================================
   ★ 種明かし（True Ending）画面用
   ========================================== */
#view-true-ending { padding: 30px; font-family: monospace; animation: fadeIn 2s ease-out; }
.true-ending-box { border: 1px solid #1da1f2; padding: 30px; border-radius: 8px; background-color: rgba(29, 161, 242, 0.05); max-width: 800px; margin: 0 auto; line-height: 1.8; color: #e1e8ed; font-size: 1.05rem; }
.true-ending-box h2 { color: #1da1f2; margin-top: 0; font-size: 1.5rem; letter-spacing: 2px; }
.btn-share { background-color: #fff; color: #000; border: none; padding: 15px 30px; font-size: 1.1rem; font-weight: bold; border-radius: 30px; cursor: pointer; transition: all 0.2s; display: inline-flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px;}
.btn-share:hover { background-color: #e6e6e6; }

/* 最終シャットダウン演出用 */
.final-shutdown-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000; z-index: 99999; justify-content: center; align-items: center; flex-direction: column; opacity: 0; transition: opacity 3s ease-in-out; }
.final-shutdown-text { color: #e0245e; font-size: 2.5rem; letter-spacing: 8px; font-family: monospace; text-shadow: 0 0 20px rgba(224, 36, 94, 0.8); }

.day-transition-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000000; z-index: 9999; justify-content: center; align-items: center; flex-direction: column; opacity: 0; transition: opacity 1s ease-in-out; }
.day-transition-overlay.show { opacity: 1; }
.result-card { text-align: center; transform: translateY(20px); opacity: 0; transition: all 0.8s ease-out 0.5s; }
.result-card.animate { transform: translateY(0); opacity: 1; }
.result-card .day-title { font-size: 3rem; font-weight: bold; color: #fff; margin-bottom: 30px; letter-spacing: 5px; margin-top: 40px; }

.reply-textarea { width: 100%; height: 100px; background-color: #15202b; color: #fff; border: 1px solid #38444d; border-radius: 8px; padding: 12px; font-size: 16px !important; box-sizing: border-box; resize: none; outline: none; margin-top: 10px; }
.reply-textarea:focus { border-color: #1da1f2; }
.btn-submit-reply { background-color: #1da1f2; color: #fff; border: none; padding: 10px 20px; font-size: 1rem; font-weight: bold; border-radius: 25px; cursor: pointer; float: right; margin-top: 10px; }
.btn-submit-reply:hover { background-color: #1a91da; }

.image-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.85); z-index: 4000; justify-content: center; align-items: center; }
.image-modal-content { max-width: 95%; max-height: 95%; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.5); object-fit: contain;}
.btn-close-image { position: absolute; top: 20px; right: 20px; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; text-shadow: 0 0 10px rgba(0,0,0,0.5); }

.note-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #f9f9f9; color: #333; z-index: 3000; justify-content: center; align-items: flex-start; overflow-y: auto; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.note-container { background-color: #fff; width: 100%; max-width: 680px; min-height: 100vh; padding: 60px 20px; box-shadow: 0 0 20px rgba(0,0,0,0.05); display: flex; flex-direction: column; margin: 0 auto; box-sizing: border-box;}
.note-header { text-align: center; margin-bottom: 40px; }
.note-title { font-size: 1.6rem; font-weight: bold; margin-bottom: 10px; font-family: -apple-system, sans-serif;}
.note-author { color: #666; font-size: 0.9rem; font-family: -apple-system, sans-serif;}
.question-area { background-color: #f0f4f8; padding: 20px; border-radius: 8px; margin: 20px 0; font-family: -apple-system, sans-serif; }
.question-text { font-size: 1rem; line-height: 1.6; margin-bottom: 20px; font-weight: bold; color: #2c3e50;}
.input-group { margin-bottom: 15px; }
.input-group label { display: block; margin-bottom: 5px; font-size: 0.9rem; color: #555; }
.input-group input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px !important; box-sizing: border-box; outline: none; }
.input-group input:focus { border-color: #1da1f2; }
.btn-unlock-note { background-color: #1da1f2; color: #fff; border: none; padding: 12px 24px; font-size: 1rem; font-weight: bold; border-radius: 25px; cursor: pointer; width: 100%; margin-top: 10px; transition: background 0.2s; }
.btn-unlock-note:hover { background-color: #1a91da; }
.error-msg { color: #e0245e; font-size: 0.9rem; margin-top: 10px; display: none; text-align: center;}
.diary-content { display: none; line-height: 1.8; font-size: 1.05rem; letter-spacing: 0.03em; }
.diary-date { font-weight: bold; color: #555; margin-top: 30px; margin-bottom: 10px; font-size: 1.1rem; border-bottom: 1px solid #eee; padding-bottom: 5px;}
.diary-text { margin-bottom: 20px; }
.btn-finish-reading { background-color: #333; color: #fff; border: none; padding: 15px 30px; font-size: 1.1rem; border-radius: 4px; cursor: pointer; margin-top: 50px; align-self: center; display: none; transition: background 0.2s; }
.btn-finish-reading:hover { background-color: #000; }

/* ==========================================
   ★ スマホ用 レスポンシブ＆フッターナビ
   ========================================== */
.desktop-only { display: flex; }
.mobile-only { display: none; }

@media screen and (max-width: 768px) {
    body { position: fixed; width: 100%; } 
    .desktop-only { display: none !important; }
    .mobile-only { display: flex; }

    .container { flex-direction: column; height: 100dvh; }
    
    .main-content { flex: 1; border-right: none; margin-bottom: 0; }
    .scroller { padding-bottom: calc(85px + env(safe-area-inset-bottom)); box-sizing: border-box; }
    
    .mobile-header { flex-direction: column; background: rgba(21, 32, 43, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid #38444d; z-index: 50; }
    .mobile-header-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; }
    .mobile-header-top .nav-logo { margin: 0; font-size: 1.3rem; display: flex; align-items: center; gap: 8px;}
    .mobile-header-icons { display: flex; gap: 20px; color: #8899a6; font-size: 1.2rem; }
    
    .mobile-tabs { display: flex; width: 100%; border-top: 1px solid #38444d; }
    .mobile-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 0.95rem; font-weight: bold; color: #8899a6; cursor: pointer; position: relative; transition: background 0.2s;}
    .mobile-tab.active { color: #fff; }
    .mobile-tab#mob-tab-riku.active::after { content: ''; position: absolute; bottom: 0; left: 20%; width: 60%; height: 4px; background-color: #1da1f2; border-radius: 4px 4px 0 0; }
    .mobile-tab#mob-tab-kana.active::after { content: ''; position: absolute; bottom: 0; left: 20%; width: 60%; height: 4px; background-color: #e1306c; border-radius: 4px 4px 0 0; }
    .mobile-tab .unread-badge { top: 10px; right: calc(50% - 45px); }

    .mobile-footer { position: fixed; bottom: 0; width: 100%; background: #15202b; border-top: 1px solid #38444d; justify-content: space-around; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 100;}
    .footer-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8899a6; font-size: 0.65rem; gap: 4px; flex: 1; max-width: 65px; cursor: pointer; transition: color 0.2s;}
    .footer-item i { font-size: 1.4rem; }
    .footer-item.active { color: #fff; }
    .footer-item.disabled { color: #38444d; cursor: not-allowed; }
    .footer-item.ready { color: #00ba7c; } 
    
    .footer-item.has-unread .unread-badge { display: block; top: 4px; right: calc(50% - 15px); }

    #desktop-view-title { display: none !important; }
    body.in-profile #desktop-view-title { display: flex !important; }
    body.in-profile .mobile-header { display: none; }
    body.in-likes .mobile-tabs { display: none; }
    
    .post-actions { gap: 30px; justify-content: space-around; }
    
    .true-ending-box { padding: 20px; font-size: 0.95rem; border: none; }

    .search-container-wrapper {
        display: none;
    }
    .search-container-wrapper.show-mobile {
        display: block;
        animation: slideDown 0.2s ease-out;
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .trend-container, .history-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .trend-container::-webkit-scrollbar, .history-container::-webkit-scrollbar {
        display: none;
    }
}