/* ══════════════════════════════════════════════════════════════════════════════
   GCC SESSION 10 — UX POLISH LAYER
   Additive CSS applied AFTER cc-styles.css. No overrides of existing selectors
   unless specifically needed for UX improvement. All changes are mobile-first.
   
   PROBLEMS SOLVED:
   1. Chat tab: 12 officer cards = ~1400px scroll → compact 2-col grid, chips hidden until tap
   2. Career tab: score+gaps+roadmap+jobs = ~4000px → collapsible sections
   3. Feed tab: 12 bulletins = ~3000px → truncated, expand on tap
   4. All tabs: no way to return to top without manual scroll → floating scroll-to-top
   5. Mobile More menu: wraps inline awkwardly → slide-up tray with overlay
   6. Panel headers: sticky but panel body is too dense → breathing room
   7. Long content everywhere: consistent section collapse pattern
══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. CHAT TAB: COMPACT OFFICER GRID ──────────────────────────────────────
   Instead of 12 full cards stacked vertically (1400px scroll), show a 2-col
   compact grid on mobile. Chips collapse into the card — tap to expand.
   Desktop gets 3-col. This reduces scroll depth by ~70%.                   */

@media(max-width:767px){
  #cc-officer-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  /* Compact the officer cards on mobile */
  .cc-officer-card{
    margin-bottom:0 !important;
    border-radius:10px;
  }
  .cc-officer-card-head{
    padding:10px 11px 8px !important;
    gap:8px !important;
  }
  .cc-officer-card-head > div:first-child{
    font-size:22px !important; /* smaller emoji */
  }
  .cc-officer-card-head > div:last-child > div:first-child{
    font-size:12.5px !important; /* name smaller */
  }
  .cc-officer-card-head > div:last-child > div:last-child{
    font-size:10px !important; /* domain smaller */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:110px;
  }
  /* Hide chips by default on mobile — reveal on card tap */
  .cc-officer-chips{
    max-height:0;
    overflow:hidden;
    padding:0 10px !important;
    transition:max-height .3s ease, padding .3s ease;
  }
  .cc-officer-card.expanded .cc-officer-chips{
    max-height:400px;
    padding:6px 10px 8px !important;
  }
  /* Visual indicator that card is tappable */
  .cc-officer-card::after{
    content:'▾';
    display:block;
    text-align:center;
    font-size:10px;
    color:rgba(142,255,66,.3);
    padding:2px 0 6px;
    transition:transform .2s;
  }
  .cc-officer-card.expanded::after{
    transform:rotate(180deg);
    color:var(--glow);
  }
}
/* Desktop: 3-column grid (wider cards, chips always visible) */
@media(min-width:768px){
  #cc-officer-grid{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
  .cc-officer-card{
    margin-bottom:0 !important;
  }
}

/* ── 2. CAREER TAB: COLLAPSIBLE SECTIONS ────────────────────────────────────
   Score hero and Today's Priority always visible. Everything else folds
   into labeled sections that expand on tap. Reduces initial view from
   ~4000px to ~600px.                                                        */

.cc-section-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  background:var(--cc-card);
  border:1px solid var(--cc-border);
  border-radius:9px;
  margin-bottom:8px;
  cursor:pointer;
  transition:all .18s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.cc-section-toggle:hover{
  border-color:var(--cc-border-h);
  background:#121f10;
}
.cc-section-toggle:active{
  transform:scale(.99);
}
.cc-section-toggle-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.cc-section-toggle-icon{
  font-size:18px;
  flex-shrink:0;
}
.cc-section-toggle-label{
  font-family:var(--fd);
  font-size:13px;
  font-weight:700;
  color:var(--t0);
  line-height:1.3;
}
.cc-section-toggle-sub{
  font-size:10.5px;
  color:var(--t2);
  margin-top:1px;
}
.cc-section-toggle-badge{
  font-family:var(--fm);
  font-size:10px;
  font-weight:700;
  color:var(--glow);
  background:rgba(142,255,66,.1);
  border:1px solid rgba(142,255,66,.2);
  border-radius:12px;
  padding:2px 8px;
  flex-shrink:0;
  white-space:nowrap;
}
.cc-section-toggle-chevron{
  font-size:12px;
  color:var(--t2);
  transition:transform .25s ease;
  flex-shrink:0;
  margin-left:8px;
}
.cc-section-toggle.open .cc-section-toggle-chevron{
  transform:rotate(90deg);
  color:var(--glow);
}
.cc-section-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.cc-section-body.open{
  max-height:5000px; /* large enough for any content */
  overflow:visible;
}

/* ── 3. FEED TAB: BULLETIN TRUNCATION ───────────────────────────────────────
   Show headline + 2 lines of summary by default. Tap to expand.
   Reduces 12 full bulletins from ~2400px to ~800px.                        */

.cc-bul-body{
  position:relative;
}
.cc-bul-summary{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:all .25s ease;
}
.cc-bulletin.expanded .cc-bul-summary{
  -webkit-line-clamp:unset;
  display:block;
}
/* "Read more" hint */
.cc-bul-expand-hint{
  display:block;
  text-align:center;
  font-size:10.5px;
  color:rgba(142,255,66,.5);
  padding:6px 0 2px;
  cursor:pointer;
  transition:color .15s;
}
.cc-bul-expand-hint:hover{
  color:var(--glow);
}
.cc-bulletin.expanded .cc-bul-expand-hint{
  display:none;
}
/* Hide action chips until bulletin is expanded */
.cc-bulletin-chips,
.cc-bul-actions{
  max-height:0;
  overflow:hidden;
  padding-top:0 !important;
  padding-bottom:0 !important;
  border-top:none !important;
  transition:max-height .3s ease, padding .3s ease;
}
.cc-bulletin.expanded .cc-bulletin-chips,
.cc-bulletin.expanded .cc-bul-actions{
  max-height:300px;
  padding-top:10px !important;
  padding-bottom:12px !important;
  border-top:1px solid rgba(142,255,66,.06) !important;
}

/* ── 4. FLOATING SCROLL-TO-TOP BUTTON ───────────────────────────────────────
   Appears when user scrolls >400px down. Smooth return to panel header.
   Positioned above the mobile bottom nav so it's always reachable.         */

#cc-scroll-top{
  position:fixed;
  bottom:calc(70px + env(safe-area-inset-bottom, 0px));
  right:14px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(142,255,66,.15);
  border:1px solid rgba(142,255,66,.3);
  color:var(--glow);
  font-size:16px;
  display:none; /* shown via JS */
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:9400;
  transition:all .2s;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 12px rgba(0,0,0,.3);
  -webkit-tap-highlight-color:transparent;
}
#cc-scroll-top:hover{
  background:rgba(142,255,66,.25);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(142,255,66,.15);
}
#cc-scroll-top.visible{
  display:flex;
  animation:cc-fadein .2s ease;
}
@media(min-width:768px){
  #cc-scroll-top{
    bottom:24px;
    right:24px;
    width:44px;
    height:44px;
  }
}

/* ── 5. MOBILE MORE MENU: SLIDE-UP TRAY ────────────────────────────────────
   Instead of wrapping inline (which pushes the page), slide up a tray
   with overlay backdrop. Feels like a native mobile action sheet.          */

@media(max-width:767px){
  /* Overlay backdrop */
  #cc-mobile-nav.cc-more-open::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:-1;
    animation:cc-fadein .15s ease;
  }
  /* Tray slides up from bottom */
  #cc-mobile-nav.cc-more-open{
    height:auto !important;
    max-height:70vh;
    border-radius:16px 16px 0 0;
    box-shadow:0 -8px 40px rgba(0,0,0,.5);
    padding-top:8px;
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    gap:0;
  }
  /* Grid the hidden tabs 3×3 for cleaner layout */
  #cc-mobile-nav.cc-more-open .cc-bn-hidden{
    flex:0 0 calc(33.33% - 4px);
    padding:12px 4px;
  }
  /* Primary row stays at bottom */
  #cc-mobile-nav.cc-more-open > .cc-bn:not(.cc-bn-hidden){
    border-top:1px solid rgba(142,255,66,.08);
    padding-top:10px;
  }
  /* Handle bar at top of tray */
  #cc-mobile-nav.cc-more-open::after{
    content:'';
    position:absolute;
    top:6px;
    left:50%;
    transform:translateX(-50%);
    width:32px;
    height:3px;
    border-radius:2px;
    background:rgba(142,255,66,.2);
  }
}

/* ── 6. PANEL BREATHING ROOM ────────────────────────────────────────────────
   Add consistent padding inside panel bodies so content doesn't feel
   crammed against the edges. Also ensure panel headers have clear
   visual separation.                                                       */

.cc-panel > div:not(.cc-panel-header){
  padding-left:14px;
  padding-right:14px;
}
@media(max-width:767px){
  .cc-panel > div:not(.cc-panel-header){
    padding-left:10px;
    padding-right:10px;
  }
}
/* Panel header: more prominent border */
.cc-panel-header{
  border-bottom:2px solid rgba(142,255,66,.12) !important;
  padding:14px 14px 12px !important;
}
@media(max-width:767px){
  .cc-panel-header{
    padding:12px 10px 10px !important;
  }
}

/* ── 7. GENERAL MOBILE POLISH ───────────────────────────────────────────────
   Small touches that add up to a premium feel.                             */

/* Smooth reveal animation for all cards */
@media(max-width:767px){
  .cc-card, .cc-officer-card, .cc-bulletin, .cc-session, .cc-gap-card{
    animation:cc-fadein .3s ease both;
  }
  /* Stagger cards for a cascading reveal */
  .cc-card:nth-child(2){ animation-delay:.05s; }
  .cc-card:nth-child(3){ animation-delay:.1s; }
  .cc-card:nth-child(4){ animation-delay:.15s; }
}

/* Active tab indicator — green glow on mobile nav */
@media(max-width:767px){
  .cc-bn.on{
    position:relative;
  }
  .cc-bn.on::after{
    content:'';
    position:absolute;
    top:-2px;
    left:25%;
    right:25%;
    height:2px;
    background:var(--glow);
    border-radius:0 0 2px 2px;
    box-shadow:0 1px 6px rgba(142,255,66,.3);
  }
}

/* Navigator engine cards: 2-col grid on wider mobile */
@media(min-width:480px) and (max-width:767px){
  #cc-navigator-body > div:last-of-type{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px !important;
  }
}

/* Status bar: tighter on mobile, more breathing room on desktop */
@media(max-width:767px){
  #cc-status-bar.cc-active{
    padding:10px 12px !important;
    gap:8px !important;
  }
  .cc-avatar{
    width:32px !important;
    height:32px !important;
    font-size:12px !important;
  }
  .cc-credits-block{
    min-width:100px !important;
  }
}

/* Hide the "12 Specialist Coaches" label on mobile — save vertical space */
@media(max-width:767px){
  #cc-officer-grid > div:first-child{
    font-size:8px !important;
    margin-bottom:4px !important;
  }
}

/* ── 8. CAREER SKILL BARS: MINI VISUAL ──────────────────────────────────────
   If skill scores are available, show tiny inline bars next to each
   gap card for at-a-glance visual progress.                                */

.cc-skill-mini-bar{
  height:3px;
  background:rgba(142,255,66,.1);
  border-radius:2px;
  overflow:hidden;
  margin-top:4px;
}
.cc-skill-mini-fill{
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg,var(--cc-emerald),var(--glow));
  transition:width .6s ease;
}

/* ── 9. FOCUS MODE INDICATOR ────────────────────────────────────────────────
   When a member is deep in a specific engine (career scan running,
   navigator scan in progress, chat open), dim the tab bar slightly
   to reduce visual noise and keep attention on the content.               */

.cc-focus-mode .cc-tab:not(.on),
.cc-focus-mode .cc-bn:not(.on){
  opacity:.4;
}