/* ═══════════════════════════════════════════════════════════
   VEYRA — kstyle-mobile.css
   All @media (max-width: 768px) overrides — mobile only
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile custom select picker ── */
.mob-sel { display: none !important; }

.mob-sel-btn {
  display: none;
  width: 100%;
  max-width: 220px;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

@media (max-width: 768px) {
  .mob-sel-btn { display: flex; }
}

/* Bottom-sheet picker overlay */
.mob-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
}

.mob-picker-sheet {
  width: 100%;
  background: var(--card-bg, #141108);
  border-radius: 18px 18px 0 0;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 16px);
  max-height: 65vh;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.mob-picker-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border2);
  margin: 8px auto 14px;
}

.mob-picker-row {
  display: block;
  width: 100%;
  padding: 14px 22px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.90rem;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

.mob-picker-row:last-child { border-bottom: none; }
.mob-picker-row:active { background: var(--surface-2); }

.mob-picker-row.active {
  color: var(--accent);
  font-weight: 600;
}

/* ── Mobile Bottom Bar ── */
@media (max-width: 768px) {
  :root {
    --mbb-h: 56px;
  }

  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mbb-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 400;
    align-items: stretch;
    justify-content: space-around;
  }

  .mbb-tab,
  .mbb-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--border2);
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 6px 4px 2px;
    transition: color 0.18s;
  }

  .mbb-tab svg,
  .mbb-menu svg {
    stroke: currentColor;
    transition: stroke 0.18s;
  }

  .mbb-tab.nav-active {
    color: var(--accent);
  }

  .mbb-tab:active,
  .mbb-menu:active {
    color: var(--border2);
  }
}

/* ── 768px: single column, compact header ── */
@media (max-width: 768px) {
  :root {
    --rbar-w: 0px;
    --header-h: 60px;
  }

  .main-header { padding: 0 12px; gap: 8px; }
  .rbar-toggle  { display: none !important; }
  .pwa-install-btn { display: none !important; }

  /* Mobile top bar: compact greeting */
  .greeting-hey   { display: none; }
  .greeting-name  { font-size: 0.85rem; }
  .header-rank-badge { display: none; }

  /* Mobile top bar: compact clock widget (no rbar to align to here) */
  .clock-widget.stats-integrated {
    width: auto;
    height: 40px;
    padding: 0;
  }
  .clock-widget.header-clock { margin-right: 0; }
  .cw-info { padding: 4px 10px; }
  .cw-row:last-child { display: none; }
  .cw-row:first-child { flex-direction: column; align-items: flex-start; gap: 1px; }
  .cw-time    { font-size: 0.78rem; }
  .cw-weather { display: block; font-size: 0.68rem; opacity: 0.75; }
  .cw-sep     { display: none; }
  .stats-btn-inner {
    width: 68px;
    height: 100%;
    font-size: 0.6rem;
    gap: 2px;
  }
  .stats-btn-inner .stats-icon svg { width: 11px; height: 11px; }

  .playground {
    margin-right: 0;
    padding: 10px 10px calc(var(--mbb-h) + env(safe-area-inset-bottom) + 10px);
    grid-template-columns: 1fr;
    grid-template-rows: 50px repeat(8, auto);
    grid-auto-rows: auto;
    row-gap: 15px;
    column-gap: 0;
  }

  .card {
    height: auto;
    min-height: 570px;
  }
  .card.full-row { grid-column: 1 !important; }

  .card.notes {
    height: 620px;
    min-height: 0;
  }

  /* rbar-w is 0 on mobile — let the header deadline/wisdom bar flex instead of
     collapsing to zero width. */
  .header-dream {
    width: auto;
    flex: 1 1 auto;
  }

  .dream-standalone {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 50px !important;
    min-height: 0 !important;
  }

  .dream-input {
    min-width: 0;
    width: 100%;
    font-size: 0.85rem;
    padding: 8px 12px;
    letter-spacing: 0.08em;
  }

  .dream-text {
    font-size: 1rem !important;
    letter-spacing: 0.1em !important;
  }

  /* Community tab: full width */
  #sec-comms { order: -1; }

  /* Hide dream bar on habits tab, show habit pulse instead */
  body[data-route="habits"] .dream-standalone { display: none !important; }

  /* Habit Pulse card */
  .habit-pulse-section {
    display: flex;
    flex-direction: column;
    height: 170px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 0;
  }
  .habit-pulse-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 8px 14px 4px;
    flex-shrink: 0;
  }
  .habit-pulse-chart-wrap {
    flex: 1;
    position: relative;
    padding: 0 10px 10px;
    min-height: 0;
  }
  .habit-pulse-chart-wrap canvas {
    width: 100% !important;
    max-width: 350px;
    height: 100% !important;
  }

  .adbox-row { flex-wrap: wrap; height: auto; }
  .add1,.add2,.add3,.add4,.add5 {
    flex: 1 1 calc(50% - 6px);
    height: 90px;
    min-width: 100px;
  }

  /* ── Profile card: stack columns vertically on mobile ── */
  .sec-profile-card { height: auto !important; overflow-y: auto !important; }
  .profile-cols { flex-direction: column; overflow: visible; }
  .profile-col { overflow-y: visible; }
  .profile-col-left { border-right: none; border-bottom: 1px solid var(--border); }

  /* ── BuddyBot: vertical stack ── */
  .bb-soon-inner   { flex-direction: column; gap: 24px; }
  .bb-soon-features { flex: none; width: 100%; }
  .bb-soon-name    { font-size: 2.2rem; }
  .bb-soon-desc    { max-width: 100%; }

  /* ── Notes editor mobile tweaks ── */
  .editor-top-bar { margin-top: 14px; }
  .icon-btn { width: 38px; height: 38px; }
  #noteTitle { font-size: 1.15rem; }
  .editor-media-actions {
    bottom: 10px;
    right: 10px;
    padding: 5px;
    gap: 6px;
  }
  .infinite-canvas { padding-bottom: 70px; font-size: 1rem; }

  /* ── Stats: flip card on mobile ── */
  .stats-wrap {
    display: block;
    grid-column: 1;
    height: 620px;
    perspective: 1200px;
  }
  .stats-flip-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .stats-flip-inner.flipped { transform: rotateY(180deg); }
  #sec-stats, #sec-rank-guide {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: none !important;
    flex: none !important;
  }
  #sec-rank-guide { transform: rotateY(180deg); }
  .stats-flip-btn { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); padding: 5px 10px; border-radius: 8px; cursor: pointer; }

  /* ── Habits tab: row-1 must be auto (dream is hidden, pulse is first) ── */
  body[data-route="habits"] .playground { grid-template-rows: repeat(9, auto) !important; }

  /* ── Habits: single panel card (no flip, no today section) ── */
  .habits-card {
    height: auto !important;
    min-height: 0 !important;
    perspective: none !important;
    animation: none !important;
  }
  .habits-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  .habit-face.habit-back { display: none !important; }
  .habit-face.habit-front {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: auto !important;
    perspective: none !important;
    transform-style: flat !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
  }
  .habit-face.habit-front.flipped { transform: none !important; }
  /* Only front panel visible — today section hidden on mobile */
  .habit-panel-front {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: auto !important;
    transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    display: flex !important;
    flex-direction: column;
    background: transparent !important;
    border-radius: 0;
    overflow: visible !important;
  }
  .habit-panel-back { display: none !important; }
  /* Divider hidden (today section gone) */
  .habit-divider { display: none !important; }
  /* Hide all flip/nav buttons */
  #habitFlipBtn, #habitFlipBackBtn { display: none !important; }
  .habit-mob-only { display: none !important; }
  .habit-desk-only { display: none !important; }
  /* Hide pulse col inside card (it's a separate card above) */
  .habit-pulse-col { display: none !important; }
  /* Scrollable manage list */
  .habit-manage-list { max-height: 340px; overflow-y: auto; }
  /* Add row always visible */
  .habit-add-row { display: flex !important; }

  /* ── Skills/Achievements: flip card on mobile ── */
  .skills-wrap {
    display: block;
    grid-column: 1;
    height: 620px;
    perspective: 1200px;
  }
  .skills-flip-inner {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .skills-flip-inner.flipped { transform: rotateY(180deg); }
  #sec-skills, #sec-achievements {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: none !important;
    flex: none !important;
  }
  #sec-achievements { transform: rotateY(180deg); }
  .skills-flip-btn { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); padding: 5px 10px; border-radius: 8px; cursor: pointer; margin-left: auto; }

  /* ── R-bar: end at the top of the bottom bar ── */
  .r-bar {
    height: calc(100dvh - var(--mbb-h) - env(safe-area-inset-bottom)) !important;
  }
}