/* ================= 基礎骨架 ================= */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f0f0f0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 🌟 關鍵修正：使用 100dvh，讓高度完美貼合手機實際可視範圍 */
    height: 100dvh; 
    overflow: hidden;
}

.app-container {
    width: 100%;
    max-width: 400px;
    /* 🌟 關鍵修正：限制最大高度也是 100dvh */
    height: 100%;
    max-height: 100dvh; 
    background-color: #fcfbf7;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    position: relative;
    /* 🌟 新增這行：預留空間給固定在底部的導覽列，避免內容被遮住 */
    padding-bottom: 70px;
}

.main-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 美化內容區塊捲軸 */
.main-content::-webkit-scrollbar { width: 6px; }
.main-content::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.1); border-radius: 10px; }

/* ================= 1. 頂部進度光圈區 ================= */
.top-scroll-area {
    display: flex;
    overflow-x: auto;
    padding: 20px 15px;
    gap: 15px;
    scroll-snap-type: x mandatory;
}

.top-scroll-area::-webkit-scrollbar { display: none; }

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    scroll-snap-align: start;
    min-width: 70px;
}

.story-item span { font-size: 10px; color: #555; white-space: nowrap; }

.progress-ring {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: conic-gradient(#c8849b calc(var(--progress) * 1%), #e0e0e0 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    border: 2px solid #fcfbf7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-circle img { width: 100%; height: 100%; object-fit: cover; }

/* ================= 2. 中間展示區 ================= */
.middle-section { padding: 10px 0; position: relative; }

.view { display: none; animation: fadeIn 0.3s ease-in-out; }
.view.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ================= 修改為雙排橫向滑動的 Grid 排版 ================= */
.card-slider {
    display: grid;
    grid-template-rows: repeat(2, 1fr); /* 強制劃分為 2 列 (Rows) */
    grid-auto-flow: column; /* 內容超過時，自動往右邊延伸 (Columns) */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 20px;
    gap: 15px;
    padding-bottom: 10px; /* 留一點底部空間 */
}
.card-slider::-webkit-scrollbar { display: none; }

.card {
    width: 200px; /* 固定寬度，讓排版更整齊 */
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.card img { 
    width: 100%; 
    height: 90px; /* 圖片稍微縮小，以容納兩排 */
    object-fit: cover; 
}
.card-content { padding: 10px 12px; }
.card-content h3 { font-size: 14px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-content p { font-size: 11px; color: #777; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ================= 新增：首頁 IG 風格上傳按鈕樣式 ================= */
.add-story-btn .progress-ring {
    background: #e0e0e0; /* 預設灰底 */
    border: 2px dashed #c8849b; /* 虛線外框 */
}
.add-story-btn .inner-circle {
    background-color: #fcfbf7;
}
.add-story-icon {
    font-size: 24px;
    color: #c8849b;
}

.scene-container {
    margin: 0 20px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #87CEEB;
}

.scene-bg { width: 100%; height: 100%; object-fit: cover; }
.animated-creature {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 30px;
    animation: walk 4s infinite alternate ease-in-out;
}

@keyframes walk {
    0% { transform: translateX(0); }
    100% { transform: translateX(200px); }
}

.view-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.arrow-btn { background: none; border: none; font-size: 14px; cursor: pointer; color: #555; }
.dots { display: flex; gap: 6px; }
.dot { width: 8px; height: 8px; background-color: #ccc; border-radius: 50%; }
.dot.active { background-color: #555; }

/* ================= 3. 下方資料上傳區 ================= */
.upload-section { padding: 20px; }
.upload-box {
    border: 1.5px dashed #a0a0a0;
    border-radius: 20px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: rgba(0,0,0,0.02);
}
.folder-icon { font-size: 40px; position: relative; }
.plus-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    font-size: 18px;
    background: white;
    border-radius: 50%;
    line-height: 1;
}

/* ================= 4. 底部導覽列 ================= */
.bottom-nav {
    position: fixed; /* 🌟 關鍵：直接釘死在視窗上 */
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto; /* 🌟 確保在大螢幕上它也會跟著 .app-container 置中 */
    max-width: 400px; /* 🌟 配合 .app-container 的最大寬度 */
    width: 100%;
    height: 70px;
    background-color: #fcfbf7;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #eee;
    z-index: 9999; /* 確保它絕對在最上層 */
}

.nav-item { display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; }
.nav-item img { width: 100%; height: 100%; object-fit: contain; opacity: 0.3; transition: opacity 0.2s; }
.nav-item.active img { opacity: 1; }

/* ================= 5. Write 準備上傳頁面 ================= */
.write-page-container {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.file-list-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #dcedc8;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.delete-file-btn { background: none; border: none; font-size: 18px; cursor: pointer; }

.start-upload-btn {
    margin-top: auto;
    background-color: #f4a261;
    color: #333;
    border: none;
    padding: 15px;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(244, 162, 97, 0.3);
}

/* ================= Write 頁面的 5 個階段共用設定 ================= */
.flow-stage {
    display: none; /* 預設全部隱藏 */
    flex-direction: column;
    flex: 1; /* 填滿剩餘空間 */
    height: 100%;
    animation: fadeIn 0.3s ease-in-out;
}
.flow-stage.active {
    display: flex; /* 只有加了 active 的階段才會顯示 */
}

/* --- 階段 2：聊天室區塊 --- */
.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.chat-container::-webkit-scrollbar { display: none; }

.chat-bubble {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-all;
}
.msg-user {
    align-self: flex-end;
    background-color: #dcedc8; /* 使用者的綠色對話框 */
    border-bottom-right-radius: 4px;
}
.msg-bot {
    align-self: flex-start;
    background-color: #ffffff; /* AI 的白色對話框 */
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.chat-input-area {
    display: flex;
    padding: 10px 15px;
    background-color: #fcfbf7;
    border-top: 1px solid #eee;
}
.chat-input-area input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
    font-size: 14px;
}
.chat-input-area button {
    margin-left: 10px;
    padding: 0 20px;
    background-color: #c8849b;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
}
.chat-input-area button:disabled { background-color: #ccc; }

/* --- 階段 3：等待動畫區塊 --- */
.generating-stage {
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top: 4px solid #c8849b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- 階段 4：確認區塊 (浮動動畫) --- */
.confirm-stage {
    align-items: center;
    padding: 40px 20px;
}
.confirm-target {
    background-color: #f4a261; /* 橘色目標框 */
    color: white;
    padding: 10px 30px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 50px;
    box-shadow: 0 4px 10px rgba(244, 162, 97, 0.4);
}
.confirm-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-items: center;
}
.confirm-option {
    background-color: #dcedc8;
    padding: 15px 25px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    /* 加入溫和的上下浮動動畫 */
    animation: float 3s ease-in-out infinite;
}
/* 讓選項交錯排開，製造活潑感 */
.confirm-option:nth-child(odd) { margin-right: 40px; animation-delay: 0s;}
.confirm-option:nth-child(even) { margin-left: 40px; animation-delay: 1.5s;}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- 階段 5：最終顯示區塊 --- */
.final-stage {
    padding: 30px 20px;
    justify-content: center;
}
.final-text {
    background: white;
    padding: 25px;
    border-radius: 15px;
    line-height: 1.8;
    font-size: 15px;
    color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}