/* ============================================================
   LAYOUT STYLES
   App layout, pages, and containers
   ============================================================ */

/* App wrapper with bottom tab */
#app{
  display:flex; flex-direction:column; height:100%;
  padding-bottom: var(--layout-tab-height);
}

/* Pages */
.page{
  flex:1; height:100%; overflow:hidden; position:relative;
}
.page.active{ display:flex; flex-direction:column; }

/* ----- CHAT PAGE ----- */
#chatPage{
  display:none; flex-direction:column; background:var(--color-bg);
}
#chatPage.active{ display:flex; }

.chat-header{
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border);
  font-family:var(--font-family-sans); font-weight:var(--font-weight-semibold); font-size:var(--font-size-md); letter-spacing:var(--letter-spacing-tight);
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  background:var(--color-bg-secondary);
}
.chat-header-left{
  display:flex; align-items:center; gap:var(--space-3);
}
.chat-header-icon{
  width:36px; height:36px; border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--font-size-lg); flex-shrink:0;
}
.chat-header-title{
  color:var(--color-text-primary); font-weight:var(--font-weight-bold); font-size:var(--font-size-md);
}
.chat-header-status{
  display:flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-family-sans); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium);
  color:var(--color-success); background:var(--color-success-subtle);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); border:1px solid rgba(16,185,129,0.3);
}
.chat-header-center{
  display:flex; align-items:center; gap:var(--space-2);
}
.stat-pill{
  display:flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-family-sans); font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold);
  color:var(--color-text-secondary); background:var(--color-bg-card);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-full); border:1px solid var(--color-border);
}
.stat-pill.xp{ color:var(--color-warning); }
.stat-pill.streak{ color:var(--color-danger); }
.chat-header-right{
  display:flex; align-items:center; gap:var(--space-2);
}
.mode-toggle{
  display:flex; align-items:center; gap:var(--space-1);
  font-family:var(--font-family-sans); font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-full); cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.mode-toggle.active{
  background:linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
  color:#fff; border:none;
}
.mode-toggle:not(.active){
  background:transparent; border:1px solid var(--color-border);
  color:var(--color-text-secondary);
}
.mode-toggle:not(.active):hover{
  border-color:var(--color-brand-primary); color:var(--color-brand-primary);
}

.chat-messages{
  flex:1; overflow-y:auto; padding:var(--space-4) var(--space-5) var(--space-2); display:flex; flex-direction:column; gap:var(--space-3);
}
.chat-messages::-webkit-scrollbar{ width:4px; }
.chat-messages::-webkit-scrollbar-thumb{ background:var(--color-border); border-radius:var(--radius-sm); }

.chat-input-area{
  padding:var(--space-3) var(--space-4) var(--space-4); border-top:1px solid var(--color-border); flex-shrink:0;
  display:flex; gap:var(--space-3); background:var(--color-bg);
  align-items:center;
}

.file-preview-area{
  padding:var(--space-2) var(--space-4) 0; display:flex; flex-wrap:wrap; gap:var(--space-2);
  min-height:0; max-height:120px; overflow-y:auto;
}
.file-preview-area::-webkit-scrollbar{ width:4px; }
.file-preview-area::-webkit-scrollbar-thumb{ background:var(--color-border); border-radius:var(--radius-sm); }

/* ----- REELS PAGE ----- */
#reelsPage{
  display:none; flex-direction:column; background:var(--color-bg);
}
#reelsPage.active{ display:flex; }

.reels-header{
  padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--color-border); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  background:var(--color-bg);
}
.reels-header .title{
  font-family:var(--font-family-serif); font-weight:var(--font-weight-semibold); font-size:var(--font-size-md); letter-spacing:var(--letter-spacing-tight);
  display:flex; align-items:center; gap:var(--space-2);
}
.reels-header .title .node-name{
  font-family:var(--font-family-sans); font-weight:var(--font-weight-regular); font-size:var(--font-size-sm); color:var(--color-text-secondary);
  background:var(--color-bg-secondary); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full); border:1px solid var(--color-border);
}
.reels-header .actions{ display:flex; gap:var(--space-2); }

#reelsContainer{
  flex:1; min-height:0; overflow-y:scroll; scroll-snap-type:y mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
#reelsContainer::-webkit-scrollbar{ width:0; }

.reel{
  height:100%; min-height:100%; width:100%; flex-shrink:0;
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:0 46px;
  box-sizing:border-box;
}
@media (max-width:700px){ .reel{ padding:0 30px; } }
.reel-inner{ max-width:640px; width:100%; }

/* Lesson nav is a sticky footer inside the reels scroller — not a full snap slide */
.lesson-navigation{
  flex-shrink:0;
  width:100%;
  display:flex;
  flex-direction:column;
  position:sticky;
  bottom:0;
  z-index:5;
  padding:var(--space-4) var(--space-5);
  background:var(--color-bg-elevated);
  border-top:1px solid var(--color-border);
}

/* ----- SAVED PAGE ----- */
#savedPage{
  display:none; flex-direction:column; background:var(--color-bg);
}
#savedPage.active{ display:flex; }

.saved-header{
  padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--color-border); flex-shrink:0;
  background:var(--color-bg-secondary);
}
.saved-header .title{
  font-family:var(--font-family-serif); font-weight:var(--font-weight-semibold); font-size:var(--font-size-lg);
  color:var(--color-text-primary);
}

.saved-folders-container{
  flex:1; overflow-y:auto; padding:var(--space-5);
}
.saved-folders-container::-webkit-scrollbar{ width:4px; }
.saved-folders-container::-webkit-scrollbar-thumb{ background:var(--color-border); border-radius:var(--radius-sm); }

.saved-folder-card{
  background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-3); cursor:pointer;
  transition:all var(--duration-normal) var(--ease-out);
}
.saved-folder-card:hover{
  border-color:var(--color-brand-primary); transform:translateY(-2px);
}
.saved-folder-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--space-2);
}
.saved-folder-name{
  font-family:var(--font-family-sans); font-weight:var(--font-weight-semibold); font-size:var(--font-size-md);
  color:var(--color-text-primary);
}
.saved-folder-count{
  font-family:var(--font-family-sans); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium);
  color:var(--color-text-secondary); background:var(--color-bg-secondary);
  padding:var(--space-1) var(--space-3); border-radius:var(--radius-full);
}
.saved-folder-back{
  display:flex; align-items:center; gap:var(--space-2);
  margin-bottom:var(--space-4);
  background:none; border:none; color:var(--color-brand-primary);
  font-family:var(--font-family-sans); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium);
  cursor:pointer; padding:var(--space-2) 0;
}
.saved-folder-back:hover{
  color:var(--color-brand-hover);
}

.saved-reels-container{
  flex:1; overflow-y:auto; padding:var(--space-5);
}
.saved-reels-container::-webkit-scrollbar{ width:4px; }
.saved-reels-container::-webkit-scrollbar-thumb{ background:var(--color-border); border-radius:var(--radius-sm); }

.saved-reel-preview-slot{
  margin:var(--space-3) 0;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--color-border);
  background:var(--color-bg-secondary);
}
.saved-reel-item{
  background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-4); margin-bottom:var(--space-3); position:relative;
}
.saved-reel-headline{
  font-family:var(--font-family-serif); font-weight:var(--font-weight-semibold); font-size:var(--font-size-lg);
  color:var(--color-text-primary); margin-bottom:var(--space-2);
}
.saved-reel-body{
  font-family:var(--font-family-sans); font-size:var(--font-size-base); color:var(--color-text-secondary);
  line-height:var(--line-height-normal); margin-bottom:var(--space-3);
}
.saved-reel-meta{
  font-family:var(--font-family-sans); font-size:var(--font-size-xs); color:var(--color-text-tertiary);
  display:flex; justify-content:space-between; align-items:center;
}
.saved-reel-actions{
  display:flex; gap:var(--space-2); margin-top:var(--space-3);
}
.saved-reel-action-btn{
  flex:1; padding:var(--space-2); border:none; border-radius:var(--radius-md);
  font-size:var(--font-size-xs); cursor:pointer; transition:all var(--duration-normal) var(--ease-out);
  font-family:var(--font-family-sans); font-weight:var(--font-weight-medium);
}
.saved-reel-action-btn.unsave{
  background:var(--color-bg-secondary); color:var(--color-danger); border:1px solid var(--color-border);
}
.saved-reel-action-btn.unsave:hover{
  background:var(--color-danger); color:#fff;
}

.saved-empty{
  text-align:center; padding:60px var(--space-5); color:var(--color-text-secondary);
}
.saved-empty-icon{
  font-size:var(--font-size-5xl); margin-bottom:var(--space-4); opacity:0.5;
}
.saved-empty-text{
  font-family:var(--font-family-sans); font-size:var(--font-size-md);
}